/* v0.14.0 — UI moderne high-tech (palette electric violet + cyan + deep space) Theme switch via [data-theme="light"] sur . Default = dark. */ :root, :root[data-theme="dark"] { --bg-0: #050714; --bg-1: #0a0f24; --bg-2: #0f1530; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.11); /* === Echelle z-index (revue 01/06) — hierarchie UNIQUE et documentee. === Tout nouveau z-index DOIT reutiliser une de ces variables (fini 50 vs 1200 vs 9999 vs 999999 au hasard). REGLE D'OR : un popover/menu qui descend SOUS un conteneur a backdrop-filter (cartes, topbar, widgets) est PIEGE par le stacking context de ce backdrop-filter quelle que soit sa valeur z-index — il faut le portaliser vers en position:fixed via portalPopover() (common.js). Les valeurs existantes migreront progressivement vers ces vars. */ --topbar-h: 88px; /* hauteur topbar fixe (surchargee a 64px en mobile) */ --z-base: 1; --z-sticky: 30; /* en-tetes collants, resize handles */ --z-topbar: 50; /* barre de navigation fixe */ --z-dropdown: 1000; /* menus/popovers ancres dans le flow */ --z-overlay: 8000; /* voiles de drawer */ --z-modal: 9000; /* modales, FAB */ --z-toast: 9500; /* notifications toast */ --z-portal: 999999; /* popovers portalises vers (au-dessus de tout) */ /* === Tokens semantiques de couleur (revue 01/06) — mapper les hex repandus (#dc2626 / #f59e0b / #16a34a / #3b82f6, 323+ occurrences hardcodees) vers ces variables pour unifier la palette et le theme clair/sombre. Migration progressive ; lint stylelint a brancher en CI. */ --color-crit: #dc2626; --color-crit-soft: rgba(220, 38, 38, 0.12); --color-warn: #f59e0b; --color-warn-soft: rgba(245, 158, 11, 0.12); --color-ok: #16a34a; --color-ok-soft: rgba(22, 163, 74, 0.12); --color-info: #3b82f6; --color-info-soft: rgba(59, 130, 246, 0.12); --border: rgba(148, 163, 220, 0.10); --border-strong: rgba(148, 163, 220, 0.22); --text: #f1f5fc; --muted: #97a3c4; --dim: #5a6688; /* Accents : violet electric → cyan, plus moderne que le bleu basique */ --accent: #7c5cff; /* violet primaire Foxchip */ --accent-2: #b794ff; /* violet hover */ --accent-cyan: #22d3ee; /* cyan accent secondaire (data/tech) */ --accent-glow: rgba(124, 92, 255, 0.45); --gradient-primary: linear-gradient(135deg, #7c5cff 0%, #5b6fff 50%, #22d3ee 100%); --gradient-card: linear-gradient(135deg, rgba(124,92,255,0.06), rgba(34,211,238,0.04)); --green: #22c55e; --green-glow: rgba(34, 197, 94, 0.4); --red: #ef4444; --red-glow: rgba(239, 68, 68, 0.4); --amber: #f59e0b; --amber-glow: rgba(245, 158, 11, 0.4); /* v0.15.2 — Palette d'etats KPI/widget : ok / warn / crit / info / neutral. Utilisee via [data-state="..."] sur les .stat / .dash-comp-card. */ --state-ok: #10b981; --state-ok-soft: rgba(16,185,129,0.10); --state-ok-glow: rgba(16,185,129,0.35); --state-warn: #f59e0b; --state-warn-soft: rgba(245,158,11,0.10); --state-warn-glow: rgba(245,158,11,0.35); --state-crit: #ef4444; --state-crit-soft: rgba(239,68,68,0.10); --state-crit-glow: rgba(239,68,68,0.40); --state-info: #3b82f6; --state-info-soft: rgba(59,130,246,0.10); --state-info-glow: rgba(59,130,246,0.35); --state-neutral: #64748b; --state-neutral-soft: rgba(100,116,139,0.10); --state-neutral-glow: rgba(100,116,139,0.25); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* v0.15 (harmonisation 02/06) — Échelle d'espacement. Comblait le seul trou des échelles : avant, tous les gap/padding/margin étaient en dur. À utiliser via var(--space-*) dans les nouveaux composants et les migrations. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* v0.13.30 (2026-05-14) — Tokens font-size pour uniformiser (20 valeurs distinctes trouvees dans app.js inline-styles). À utiliser via var(--fs-*) dans les nouveaux composants. */ --fs-xs: 0.72rem; /* badges, hint, secondary muted */ --fs-sm: 0.82rem; /* labels, table cells, descriptions */ --fs-base: 0.95rem; /* body text */ --fs-md: 1rem; /* boutons primaires, h4 */ --fs-lg: 1.15rem; /* h3 */ --fs-xl: 1.5rem; /* h2 */ /* v0.13.30 — Alias semantiques pour les hex hardcodes (323 occurrences) */ --color-text-soft: #fca5a5; /* utilise avec fond rouge transparent (badges critiques) */ --color-accent-soft-bg: rgba(124,92,255,0.18); --scheme: dark; } /* Light theme — meme identite violet/cyan mais sur fond clair */ :root[data-theme="light"] { --bg-0: #f6f7fb; --bg-1: #eef0f8; --bg-2: #ffffff; --surface: rgba(255, 255, 255, 0.85); --surface-2: rgba(241, 244, 252, 0.92); --surface-3: rgba(231, 236, 248, 0.95); --border: rgba(124, 92, 255, 0.12); --border-strong: rgba(124, 92, 255, 0.22); --text: #0f172a; --muted: #475569; --dim: #94a3b8; --accent: #6d4dff; --accent-2: #5b6fff; --accent-cyan: #0ea5e9; --accent-glow: rgba(109, 77, 255, 0.18); --gradient-primary: linear-gradient(135deg, #6d4dff 0%, #5b6fff 50%, #0ea5e9 100%); --gradient-card: linear-gradient(135deg, rgba(109,77,255,0.04), rgba(14,165,233,0.03)); --green: #16a34a; --green-glow: rgba(22, 163, 74, 0.18); --red: #dc2626; --red-glow: rgba(220, 38, 38, 0.18); --amber: #d97706; --amber-glow: rgba(217, 119, 6, 0.18); /* Couleurs d'état lisibles sur fond clair (AA sur blanc) — sobres, pas de fantaisie. Sans ça, les --state-* du thème sombre (ambre/vert vifs) sont illisibles sur blanc. */ --state-ok: #047857; --state-warn: #b45309; --state-crit: #b91c1c; --state-info: #1d4ed8; --scheme: light; } :root[data-theme="light"] body { background: linear-gradient(rgba(109,77,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(109,77,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px, radial-gradient(circle at 15% -5%, rgba(109,77,255,0.10), transparent 45%), radial-gradient(circle at 85% 100%, rgba(14,165,233,0.08), transparent 45%), var(--bg-0) !important; } :root[data-theme="light"] select option { background-color: #ffffff; color: var(--text); } :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(109,77,255,0.20); background-clip: padding-box; } :root[data-theme="light"] ::selection { background: rgba(109,77,255,0.25); color: #0f172a; } :root[data-theme="light"] .topbar, :root[data-theme="light"] .sidebar, :root[data-theme="light"] .card { background: rgba(255,255,255,0.85) !important; } /* Fix theme clair (16/06) : les items de menu ACTIFS avaient color:#fff hardcode, invisible sur le surlignage translucide quand le fond passe en clair. Texte violet fonce = lisible sur le highlight clair, et distingue bien l'item actif. */ :root[data-theme="light"] .nav a.active, :root[data-theme="light"] .nav-dd-trigger.active, :root[data-theme="light"] .nav-side a.active { color: #4c1d95 !important; } :root[data-theme="light"] .topbar { background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(250,251,255,0.97), rgba(255,255,255,0.98)) !important; background-image: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(250,251,255,0.97), rgba(255,255,255,0.98)), linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-cyan) 50%, var(--accent) 70%, transparent 100%) !important; } /* v0.13.86 (28/05) : fix widgets light mode — fond sombre hardcode non override. Le selector .widget definissait background rgba(20,25,50,...) calibre dark mode, donc les widgets restaient sombres en light avec texte clair illisible. Override : fond clair + orb glow attenue + texte sombre. */ :root[data-theme="light"] .widget { background: radial-gradient(ellipse at 100% 0%, rgba(var(--w-accent-rgb), 0.12) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(var(--w-accent-rgb), 0.06) 0%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,255,0.94)) !important; border: 1px solid rgba(var(--w-accent-rgb), 0.25) !important; box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(var(--w-accent-rgb), 0.05), inset 0 1px 0 rgba(255,255,255,0.6) !important; } :root[data-theme="light"] .widget::after { opacity: 0.45; } :root[data-theme="light"] .widget-clickable:hover { box-shadow: 0 18px 50px -10px rgba(var(--w-accent-rgb), 0.30), 0 6px 20px -4px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(var(--w-accent-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.7) !important; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; background: /* Subtle grid pattern for "tech" feel */ linear-gradient(rgba(124,92,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(124,92,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px, /* Gradient orbs */ radial-gradient(circle at 15% -5%, rgba(124,92,255,0.18), transparent 45%), radial-gradient(circle at 85% 100%, rgba(34,211,238,0.12), transparent 45%), radial-gradient(circle at 50% 50%, rgba(91,111,255,0.08), transparent 60%), var(--bg-0); background-attachment: fixed; color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* v0.14.5 — Filter drawer slide-in style Datto RMM */ .filter-drawer-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.55); backdrop-filter: blur(2px); z-index: 8999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; } .filter-drawer-overlay.open { opacity: 1; pointer-events: auto; } .filter-drawer { position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; background: var(--bg-1); border-left: 1px solid var(--border-strong); box-shadow: -10px 0 32px rgba(0,0,0,0.55); z-index: 9000; transform: translateX(100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; } .filter-drawer.open { transform: translateX(0); } .filter-drawer .fd-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .filter-drawer .fd-body { flex:1; overflow-y:auto; padding:16px 20px; } .filter-drawer .fd-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--surface); } /* Animations globales - utiliser .fadeIn pour les nouvelles pages */ @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } main > * { animation: fadeIn .25s ease both; } main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; } main > *:nth-child(4) { animation-delay: .12s; } main > *:nth-child(5) { animation-delay: .16s; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(124,92,255,0.35); background-clip: padding-box; border: 2px solid transparent; } ::selection { background: rgba(124,92,255,0.35); color: #fff; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font-family: inherit; font-size: 0.9rem; color: var(--text); } /* Force la lisibilité des