/* style.css - DV1: interface statique pour Micro-Dixie */
:root{
	--bg:#f7f8fb;
	--card:#ffffff;
	--muted:#6b6f76;
	--accent:#0b66f6;
	--border:#e6e9ee;
	--radius:8px;
	--max-width:1100px;
	--header-height:88px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#111}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.subtitle{margin:0.25rem 0 0;color:var(--muted)}

/* Global header / system bar (CRM identity) */
.global-header{position:sticky;top:0;z-index:1300;padding:0.5rem 0;background:rgba(255,255,255,0.55);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(2,6,23,0.06);border-bottom:1px solid rgba(0,0,0,0.04)}
.nav-row{display:flex;align-items:center;gap:1rem;justify-content:flex-end}
.nav-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-actions .btn{height:36px;padding:0 0.6rem;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;margin-left:0.5rem}
.nav-actions .btn.header-collapse{background:transparent;border:1px solid transparent;color:var(--muted)}
.session-indicator{display:inline-flex;align-items:center;gap:0.35rem;margin-left:0.5rem;font-size:0.8rem;color:var(--muted)}
.session-dot{width:7px;height:7px;border-radius:50%;background:#2f9e44;flex:0 0 auto;box-shadow:0 0 0 3px rgba(47,158,68,0.15)}
.header-clock{margin-left:0.5rem;font-size:0.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Header collapsed state */
.global-header.collapsed{padding:0;border-bottom:1px solid rgba(0,0,0,0.04);}
.global-header .nav-row{padding:0.35rem 0}
.header-collapse{margin-left:0.5rem;background:transparent;border:1px solid transparent;color:var(--muted);padding:0.25rem 0.45rem;border-radius:6px}
.version-badge{margin-left:0.5rem;background:rgba(0,0,0,0.06);padding:0.2rem 0.45rem;border-radius:6px;font-size:0.8rem;color:var(--muted)}

@media (max-width:800px){
	.session-indicator .session-text{display:none}
	.global-header.collapsed .nav-actions > * { display: none; }
	.global-header.collapsed .nav-actions .version-badge { display: inline-block; }
	.global-header.collapsed .nav-actions .header-collapse { display: inline-block; }

	.global-header.collapsed .nav-row{align-items:center}
}

/* App shell: left sidebar (fixed while scrolling) + main content (dashboard layout) */
.app-body{display:flex;align-items:flex-start}
.sidebar{
	flex:0 0 240px;
	width:240px;
	position:sticky;
	top:var(--header-height);
	align-self:flex-start;
	height:calc(100vh - var(--header-height));
	overflow-y:auto;
	display:flex;
	flex-direction:column;
	gap:1rem;
	padding:1.1rem 0.9rem;
	background:rgba(11,102,246,0.035);
	border-right:1px solid var(--border);
}
.dark .sidebar{background:rgba(255,255,255,0.02)}
.sidebar-brand{display:flex;flex-direction:column;gap:0.15rem;padding:0.2rem 0.3rem 1rem;margin-bottom:0.3rem;border-bottom:1px solid var(--border)}
.sidebar-brand-name{font-size:1.05rem;font-weight:700;color:var(--text)}
.sidebar-brand-suffix{color:var(--accent)}
.sidebar-brand-tagline{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em}
.sidebar-section{display:flex;flex-direction:column}
.sidebar-title{display:flex;align-items:center;justify-content:space-between;gap:0.4rem;width:100%;margin:0 0 0.15rem;padding:0.35rem 0.3rem;background:transparent;border:none;border-radius:6px;font:inherit;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);cursor:pointer;text-align:left}
.sidebar-title:hover{background:rgba(11,102,246,0.08);color:var(--accent)}
.sidebar-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar-chevron{font-size:0.65rem;line-height:1;flex:0 0 auto;transition:transform 0.2s ease}
.sidebar-section.collapsed .sidebar-chevron{transform:rotate(-90deg)}
.sidebar-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows 0.22s ease}
.sidebar-section.collapsed .sidebar-collapse{grid-template-rows:0fr}
.sidebar-panel{display:flex;flex-direction:column;gap:0.3rem;overflow:hidden}
.sidebar-link{display:block;padding:0.45rem 0.6rem;border-radius:6px;color:var(--text);text-decoration:none;font-size:0.92rem}
.sidebar-link:hover,.sidebar-link.active{background:rgba(11,102,246,0.1);color:var(--accent)}
.sidebar-btn{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:6px;padding:0.45rem 0.6rem;font-size:0.85rem;color:var(--text);cursor:pointer}
.sidebar-btn:hover{background:rgba(11,102,246,0.08)}
.sidebar-btn.danger{color:#b33}
.sidebar-btn.danger:hover{background:rgba(179,51,51,0.08)}
.sidebar-system .sidebar-panel{font-size:0.8rem;color:var(--muted);gap:0.15rem}
.sidebar-system p{margin:0.2rem 0}
.main-content{flex:1;min-width:0}

@media (max-width:900px){
	.app-body{flex-direction:column}
	.sidebar{position:static;top:auto;height:auto;overflow-y:visible;width:100%;flex:0 0 auto;border-right:none;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;gap:1rem}
	.sidebar-section{flex:1 1 160px}
}

.layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:1rem;align-items:start}
.layout > *{min-width:0}
.panel{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);box-shadow:0 1px 3px rgba(2,6,23,0.05)}

/* Form */
.user-form{display:flex;flex-direction:column;gap:0.75rem}
.user-form label{display:flex;flex-direction:column;font-size:0.9rem;color:var(--muted)}
.user-form input,.user-form select{margin-top:0.35rem;padding:0.5rem 0.6rem;border:1px solid var(--border);border-radius:6px;background:transparent}
.form-actions{margin-top:0.5rem}
.btn{background:var(--accent);color:#fff;border:none;padding:0.5rem 0.75rem;border-radius:6px;cursor:pointer}
.btn.small{padding:0.25rem 0.5rem;font-size:0.85rem}
.btn.small.ghost{background:transparent;color:var(--accent);border:1px solid rgba(11,102,246,0.12)}

/* Messages */
.form-message{min-height:1.25rem;margin-bottom:0.5rem;color:var(--muted);font-size:0.95rem}
.form-message.success{color:#1166aa}
.form-message.error{color:#b33}

/* Counter */
.counter{margin-top:0.5rem;font-weight:600;color:var(--muted);font-size:0.95rem}

/* Controls: search + filters */
.controls{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:0.5rem}
.search input[type="search"]{width:100%;max-width:360px;padding:0.45rem 0.6rem;border:1px solid var(--border);border-radius:6px}
.filters{display:flex;gap:0.5rem;align-items:center}
.filters select{padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:6px}
.no-results{color:var(--muted);font-style:italic;margin-bottom:0.5rem}

/* Role badges */
.role-badge{display:inline-block;padding:0.25rem 0.45rem;border-radius:999px;font-size:0.8rem;color:#fff}
.role-admin{background:#0b66f6}
.role-editor{background:#6f42c1}
.role-observer{background:#6c757d}

/* Delete button style */
.btn.delete{background:transparent;color:#b33;border:1px solid transparent;padding:0.25rem 0.45rem;cursor:pointer}
.btn.delete:hover{background:rgba(179,51,51,0.06)}

/* Danger button (destructive actions, e.g. delete user from fiche) */
.btn-danger{background:#c0392b;color:#fff;margin-right:auto}
.btn-danger:hover{background:#a5301f}

/* Active/inactive status badge (users table) */
.status-badge{display:inline-block;padding:0.25rem 0.6rem;border-radius:999px;font-size:0.8rem;font-weight:600}
.status-active{background:rgba(40,167,69,0.14);color:#1e7e34}
.status-inactive{background:rgba(220,53,69,0.12);color:#b02a37}

/* Activate/deactivate toggle button (fiche utilisateur) */
.btn-deactivate{background:#e0a800;color:#fff}
.btn-deactivate:hover{background:#c69500}
.btn-activate{background:#28a745;color:#fff}
.btn-activate:hover{background:#218838}

/* Table visual improvement */
table{background:transparent}
tbody tr:hover{background:rgba(11,102,246,0.03)}
thead th{letter-spacing:0.2px}

/* Dashboard: role donut chart + activité récente, inspired by professional admin dashboards */
.dashboard{display:flex;gap:1rem;align-items:stretch;margin:1rem 0;flex-wrap:wrap}
.card-header{display:flex;align-items:center;gap:0.55rem;margin-bottom:0.85rem}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(11,102,246,0.1);color:var(--accent);font-size:1rem;flex:0 0 auto}
.chart-card-title,.activity-card-title{margin:0;font-size:1rem}

.chart-card{flex:1;min-width:300px;display:flex;flex-direction:column}
.chart-card-body{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.donut-chart{position:relative;width:132px;height:132px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--border) 0 100%)}
.donut-chart::before{content:'';position:absolute;inset:16px;background:var(--card);border-radius:50%;box-shadow:inset 0 0 0 1px var(--border)}
.donut-center{position:absolute;inset:16px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-total{font-size:1.6rem;font-weight:700;line-height:1}
.donut-total-label{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:0.15rem}
.chart-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;flex:1;min-width:170px}
.legend-item{display:flex;align-items:center;gap:0.55rem;font-size:0.88rem}
.legend-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.legend-label{flex:1;color:var(--text)}
.legend-value{font-weight:700;min-width:1.5em;text-align:right;display:inline-block}

/* Brief highlight when a role count changes (color set inline per role by JS) */
@keyframes legendValuePulse{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.legend-value-pulse{animation:legendValuePulse 550ms ease-out}

@media (prefers-reduced-motion: reduce){
  .legend-value-pulse{animation:none}
  .back-to-top{transition:opacity 0.15s linear,bottom 0.15s linear;transform:none}
  .back-to-top:hover{transform:none}
}

.activity-card{width:340px;display:flex;flex-direction:column}
.activity-log{background:transparent;border:1px solid var(--border);border-radius:8px;padding:0.25rem 0.6rem;max-height:220px;overflow:auto;font-size:0.88rem;color:var(--muted)}
.activity-log .entry{display:flex;align-items:center;gap:0.55rem;padding:0.5rem 0;border-bottom:1px dashed var(--border)}
.activity-log .entry::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.activity-log .entry:last-child{border-bottom:0}

/* hide empty activity log to avoid an empty box in the card */
.activity-log:empty{display:none}

@media (max-width:900px){
	.dashboard{flex-direction:column}
	.activity-card{width:100%}
	.chart-card-body{justify-content:center}
}

@media (max-width:640px){
	.layout{grid-template-columns:1fr}
	.controls{flex-direction:column;align-items:stretch}
	.search input[type="search"]{max-width:none}
	.chart-card,.activity-card{width:100%;min-width:0}
	.chart-card-body{gap:1rem}
	.chart-legend{min-width:0}
}


/* Avatar in table */
.avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:white;background:#6c7ae0}

/* Floating versioning panel (single non-blocking Historique component) */
.floating-panel{position:fixed;right:1.5rem;bottom:1.5rem;width:580px;height:480px;min-width:260px;min-height:44px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.12);z-index:1320;display:flex;flex-direction:column;resize:both;overflow:hidden}
.floating-panel[hidden]{display:none !important}
.floating-header{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);background:linear-gradient(#fff,#fafafa);cursor:move;user-select:none}
.floating-header h3{margin:0;font-size:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.floating-controls{display:flex;gap:0.3rem;align-items:center;flex:0 0 auto}
.floating-btn{background:transparent;border:0;font-size:1.05rem;padding:0 0.35rem;cursor:pointer}
.floating-body{padding:0.75rem;overflow:auto;flex:1}
.floating-intro p{margin:0 0 0.45rem;font-size:0.95rem;color:var(--muted)}
.floating-panel .version-list{max-height:100%;overflow:auto;padding-top:0.5rem}

@media (max-width:800px){
    .floating-panel{width:94%;right:1rem;left:1rem;bottom:1rem;height:420px}
}

/* Window dock (bottom-right), ready to host several minimized windows */
.window-dock{position:fixed;right:16px;bottom:16px;z-index:5000;display:flex;flex-direction:column;gap:0.4rem;align-items:flex-end;pointer-events:none}
.dock-item{pointer-events:auto;display:flex;align-items:center;gap:0.4rem;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:0.35rem 0.65rem;box-shadow:0 6px 18px rgba(2,6,23,0.12);font-size:0.85rem}
.dock-item[hidden]{display:none}
.dock-dot{width:9px;height:9px;border-radius:50%;background:#e0605a;display:inline-block;flex:0 0 auto}
.dock-title{font-weight:600;white-space:nowrap}
.dock-btn{background:transparent;border:0;cursor:pointer;font-size:0.95rem;padding:0 0.2rem;line-height:1}

/* Toast notifications (top-right), complements the activity journal without replacing it */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:6000;display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end;pointer-events:none;max-width:360px}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:0.5rem;width:100%;min-width:240px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:0.6rem 0.7rem;box-shadow:0 8px 24px rgba(2,6,23,0.14);font-size:0.85rem;color:var(--text);animation:toast-in 0.2s ease}
.toast.success{border-left-color:#2f9e44;background:rgba(47,158,68,0.08)}
.toast.info{border-left-color:#0b66f6;background:rgba(11,102,246,0.08)}
.toast.danger{border-left-color:#e03131;background:rgba(224,49,49,0.08)}
.toast.closing{animation:toast-out 0.18s ease forwards}
.toast-message{flex:1}
.toast-close{margin-left:auto;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:0.85rem;line-height:1;padding:0.1rem 0.2rem}
.toast-close:hover{color:var(--text)}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}

@media (max-width:600px){
	.toast-container{left:1rem;right:1rem;max-width:none}
}

/* User window (fiche utilisateur) content — reuses .floating-panel/.floating-header/.floating-body */
.user-window-body{display:flex;flex-direction:column;gap:0.6rem}
.uw-avatar{width:56px;height:56px;border-radius:50%;background:#6c7ae0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}
.uw-form label{display:block;margin-bottom:0.45rem}
.uw-form input,.uw-form select{width:100%;padding:0.35rem;border:1px solid var(--border);border-radius:6px}
.uw-footer{display:flex;gap:0.5rem;justify-content:flex-end}
.uw-dirty-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f5a623;margin-left:0.35rem;vertical-align:middle}
.uw-dirty-dot[hidden]{display:none}
.uw-toolbar{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap}
.uw-tool-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:0.2rem 0.5rem;font-size:0.78rem;color:var(--muted);cursor:pointer}
.uw-tool-btn:hover{background:rgba(0,0,0,0.04)}
.uw-feedback{font-size:0.78rem;color:var(--muted)}

/* Print-only area, used exclusively to print a single fiche utilisateur (see printUserWindow in js/app.js) */
.print-only{display:none}
@media print{
	body *{visibility:hidden}
	#printArea,#printArea *{visibility:visible}
	#printArea{display:block !important;position:absolute;left:0;top:0;width:100%;padding:1rem}
	#printArea .print-note{margin-top:1rem;font-size:0.8rem;color:#555}
}

/* Versioning modal specific */
.version-list{max-height:320px;overflow:auto;padding:0.25rem 0;border-top:1px dashed var(--border);margin-top:0.5rem}
.version-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem}
.version-list li{padding:0.4rem;border-radius:6px;background:transparent}
.version-list li strong{display:inline-block;width:56px}
.version-list li.version-current{background:rgba(11,102,246,0.08);border:1px solid rgba(11,102,246,0.25)}
.version-current-tag{margin-left:0.4rem;background:var(--accent);color:#fff;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;padding:0.1rem 0.4rem;border-radius:999px}

@media (max-width:700px){
	.version-list{max-height:260px}
}

/* Back to top */
.back-to-top{
	position:fixed;
	right:1.25rem;
	bottom:calc(1.25rem + var(--dock-clearance,0px));
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg,var(--accent),#0b4fc0);
	color:#fff;
	border:none;
	border-radius:50%;
	font-size:1.05rem;
	line-height:1;
	cursor:pointer;
	box-shadow:0 8px 20px rgba(11,102,246,0.35);
	z-index:1000;
	opacity:0;
	transform:translateY(14px) scale(0.9);
	pointer-events:none;
	transition:opacity 0.25s ease,transform 0.25s ease,bottom 0.25s ease,box-shadow 0.2s ease;
}
.back-to-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.back-to-top:hover{box-shadow:0 10px 26px rgba(11,102,246,0.45);transform:translateY(-3px) scale(1.05)}
.back-to-top:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Dark mode */
:root{--bg:#ffffff;--text:#0b0b0b;--card:#ffffff;--border:#e6e9ef;--muted:#6b7280;--accent:#0b66f6}
.dark{--bg:#0f1720;--text:#e6eef8;--card:#0b1220;--border:#1f2937;--muted:#9aa4b2;--accent:#3b82f6}
body{background:var(--bg);color:var(--text)}

/* small responsive tweaks */
@media (max-width:700px){
	.user-window{width:94%;max-width:94%}
}

/* Table */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;border-spacing:0}
thead th{background:transparent;text-align:left;padding:0.65rem 0.5rem;color:var(--muted);font-size:0.9rem;border-bottom:1px solid var(--border)}
tbody td{padding:0.6rem 0.5rem;border-bottom:1px dashed var(--border)}
tbody tr:last-child td{border-bottom:0}

/* Empty state row */
.empty-state td{text-align:center;color:#7a7f87;font-style:italic;padding:1rem;font-size:0.95rem}

/* Footer: identity, features, stack and author — cohesive with the header/sidebar CRM identity */
.global-footer{background:var(--card);border-top:1px solid var(--border);padding:1.5rem 0 1.1rem;margin-top:1.25rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start}
.footer-col-title{margin:0 0 0.55rem;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text)}
.footer-brand-suffix{color:var(--accent)}
.footer-baseline{margin:0 0 0.6rem;color:var(--muted);font-size:0.85rem}
.footer-col p{margin:0.25rem 0;color:var(--muted);font-size:0.85rem}
.footer-col a{color:var(--accent);text-decoration:none}
.footer-col a:hover{text-decoration:underline}
.footer-muted{color:var(--muted);font-size:0.8rem}
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.35rem}
.footer-list li{color:var(--muted);font-size:0.85rem}
.footer-bottom{margin-top:1rem;border-top:1px dashed var(--border);padding-top:0.65rem;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:0.25rem}
.footer-bottom small{font-size:0.78rem}
.footer-disclaimer{color:var(--muted);font-style:italic}
.site-footer{display:none}

/* Responsive: stack columns on small screens */
@media (max-width:800px){
	.layout{grid-template-columns:1fr;}
	.container{padding:0.75rem}
	.footer-grid{grid-template-columns:1fr 1fr;gap:1.25rem}
}

@media (max-width:560px){
	.footer-grid{grid-template-columns:1fr}
}

@media (max-width:420px){
	thead th, tbody td{font-size:0.9rem}
}