/* ========== NERRA — Global Clean Styles ========== */ /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root { /* Palette (light par défaut) */ --bg: #f7f8fb; --surface: #ffffff; --panel: #ffffff; --ink: #0f172a; --ink-2: #475569; --muted: #64748b; --line: #e2e8f0; --brand: #2563eb; --brand-2: #1d4ed8; --ok: #16a34a; --warn: #d97706; --danger: #dc2626; --ring: 0 0 0 3px rgba(37,99,235,.25); } html, body { background: var(--bg); color: var(--ink); } /* ----- Mode dark auto si préférence OS ----- */ @media (prefers-color-scheme: dark) { :root { --bg: #0b1020; --surface: #0e1428; --panel: #121a34; --ink: #e6e9f2; --ink-2: #a9b0c1; --muted: #9aa3b7; --line: rgba(255,255,255,0.08); --brand: #3b82f6; --brand-2: #2563eb; } } /* ----- Mode dark manuel : ----- */ :root[data-theme="dark"] { --bg: #0b1020; --surface: #0e1428; --panel: #121a34; --ink: #e6e9f2; --ink-2: #a9b0c1; --muted: #9aa3b7; --line: rgba(255,255,255,0.08); --brand: #3b82f6; --brand-2: #2563eb; } /* ---------- Shell & Topbar ---------- */ .shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--ink); } .topbar { position: sticky; top: 0; z-index: 1000; height: 56px; display: flex; align-items: center; gap: .75rem; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); backdrop-filter: saturate(150%) blur(6px); } .topbar .brand { font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; color: var(--ink); } .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, var(--brand)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent); display: inline-block; } .topbar .grow { flex: 1; } .topbar .info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .badge { background: color-mix(in oklab, var(--panel) 85%, transparent); color: var(--muted); padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); } .topbar .btn-ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: .45rem .7rem; border-radius: .6rem; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .topbar .btn-ghost:hover { background: color-mix(in oklab, var(--panel) 85%, transparent); } /* ---------- Layout Grid (sidebar + content) ---------- */ .layout-grid { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 16px; flex: 1 1 auto; min-height: 0; padding: 16px; max-width: 1400px; margin: 0 auto; } /* Sidebar */ .sidebar { grid-column: 1; grid-row: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; overflow: auto; box-shadow: 0 6px 24px rgba(0,0,0,.08); } .sidebar a { display: block; text-decoration: none; color: var(--ink); } .sidebar .menu { width: 100%; text-align: left; background: transparent; color: var(--ink); border: 1px solid transparent; padding: .75rem .85rem; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease; } .sidebar .menu:hover { background: color-mix(in oklab, var(--panel) 85%, transparent); border-color: var(--line); } .sidebar .menu:active { transform: translateY(1px); } .sidebar .menu .chev { opacity: .6; } /* NavLink utilisé comme menu simple */ .sidebar .menu.link { display: block; text-decoration: none; } .sidebar .menu.link.active { border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); background: linear-gradient(0deg, color-mix(in oklab, var(--brand) 10%, transparent), transparent); color: var(--ink); } /* Sous-menus */ .sidebar .submenu { margin: 4px 0 8px 10px; display: flex; flex-direction: column; gap: 4px; padding-left: 6px; border-left: 2px solid color-mix(in oklab, var(--brand) 30%, var(--line)); } .sidebar .submenu .item, .sidebar .submenu a { display: block; color: var(--muted); padding: 6px 10px; border-radius: 6px; transition: background .15s ease, color .15s ease; } .sidebar .submenu .item:hover, .sidebar .submenu a:hover { background: color-mix(in oklab, var(--panel) 85%, transparent); color: var(--ink); } .sidebar .submenu .item.active, .sidebar .submenu a.active { color: var(--ink); background: linear-gradient(90deg, color-mix(in oklab, #22c55e 14%, transparent), transparent 80%); } /* Content */ .content { grid-column: 2; grid-row: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.06); } .content h1, .content h2, .content h3 { margin: 0 0 10px; } /* ---------- Panels / Toolbars / Utils ---------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .toolbar { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .filters, .actions { display: flex; align-items: center; gap: 8px; } .totaux { display: flex; gap: 24px; margin: 8px 0; } .error { color: var(--danger); } .info { color: var(--ok); } /* ---------- Forms & Buttons ---------- */ input, select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } input:focus, select:focus { outline: none; box-shadow: var(--ring); } button { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: background .15s ease; } button:hover { background: var(--brand-2); } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } th { background: color-mix(in oklab, var(--panel) 85%, transparent); color: var(--ink); font-weight: 600; } tr:last-child td { border-bottom: 0; } tr.locked { opacity: .55; } /* ---------- Avatar (optionnel) ---------- */ .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#4f46e5,#2563eb); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ---------- Focus accessibilité ---------- */ :focus-visible { outline: 2px solid color-mix(in oklab, var(--brand) 60%, white); outline-offset: 2px; border-radius: .5rem; } /* ---------- Responsive ---------- */ /* ≤ 1024px : empilage (sidebar au-dessus, contenu dessous) */ @media (max-width: 1024px) { .layout-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px; } .sidebar { grid-column: 1; grid-row: 1; } .content { grid-column: 1; grid-row: 2; } .topbar { padding: 0 12px; } .topbar .badge { display: none; } /* alléger l’en-tête sur mobile */ } /* ≤ 640px : densité mobile accrue */ @media (max-width: 640px) { .content { padding: 12px; border-radius: 12px; } .sidebar { padding: 6px; border-radius: 12px; } .sidebar .menu, .sidebar .menu.link { padding: .6rem .7rem; font-size: .95rem; } .sidebar .submenu { margin-left: .2rem; } .brand { font-size: 1rem; } .logo-dot { width: .7rem; height: .7rem; } .topbar .btn-ghost { padding: .35rem .6rem; } } /* === Sidebar bleue pro (override) === */ :root { --sidebar-bg-1: #123066; /* bleu profond (haut) */ --sidebar-bg-2: #0d2552; /* bleu plus sombre bas */ --sidebar-line: rgba(255,255,255,.10); --sidebar-text: #eaf2ff; /* texte principal */ --sidebar-muted: #c9dafd; /* texte secondaire */ --sidebar-active: #3b82f6; /* bleu action/hilight */ } .sidebar { background: linear-gradient(180deg, var(--sidebar-bg-1), var(--sidebar-bg-2)); border: 1px solid var(--sidebar-line); color: var(--sidebar-text); border-radius: 1rem; box-shadow: 0 6px 24px rgba(7,17,48,.25); } .sidebar .menu, .sidebar .menu.link { color: var(--sidebar-text); border: 1px solid transparent; background: transparent; } .sidebar .menu:hover, .sidebar .menu.link:hover { border-color: var(--sidebar-line); background: rgba(255,255,255,.06); } .sidebar .menu .chev { opacity: .8; } .sidebar .submenu { border-left: 2px solid rgba(255,255,255,.15); } .sidebar .submenu .item, .sidebar .submenu a { color: var(--sidebar-muted); } .sidebar .submenu .item:hover, .sidebar .submenu a:hover { color: #ffffff; background: rgba(255,255,255,.08); } .sidebar .submenu .item.active, .sidebar .submenu a.active, .sidebar .menu.link.active { color: #ffffff; border-color: rgba(59,130,246,.45); background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.06) 70%); } /* lisibilité des icônes/emoji dans le menu */ .sidebar .menu span, .sidebar .submenu .item { text-shadow: 0 1px 0 rgba(0,0,0,.15); } /* === Plein écran “vrai” pour la grille === */ :root { /* règle ici la hauteur réelle de ta topbar */ --topbar-h: 56px; /* mets 52px si ta topbar est à 52 */ --page-gap: 16px; /* padding latéral de .layout-grid */ } /* assure une hauteur viewport dynamique (mobile-friendly) */ .shell { min-height: 100dvh; display: flex; flex-direction: column; } /* topbar pilotée par variable (optionnel) */ .topbar { height: var(--topbar-h); } /* la grille occupe tout l’espace restant sous la topbar */ .layout-grid { flex: 1 1 auto; min-height: calc(100dvh - var(--topbar-h)); align-items: stretch; /* force sidebar + contenu à la même hauteur */ } /* contenu “plein écran” même si peu d’éléments */ .content { min-height: calc(100dvh - var(--topbar-h) - (2 * var(--page-gap))); display: flex; flex-direction: column; } /* sidebar fixe et scrollable sur desktop, à la même hauteur que le contenu */ .sidebar { position: sticky; top: calc(var(--topbar-h) + var(--page-gap)); max-height: calc(100dvh - var(--topbar-h) - (2 * var(--page-gap))); overflow: auto; } /* mobile/tablette : empilage, la sidebar redevient statique */ @media (max-width: 1024px) { .sidebar { position: static; max-height: none; } .content { min-height: calc(100dvh - var(--topbar-h) - (2 * var(--page-gap))); } } /* densité mobile fine */ @media (max-width: 640px) { :root { --page-gap: 12px; } } /* ====== FULL-SCREEN LAYOUT OVERRIDES ====== */ :root { --topbar-h: 56px; } .shell { min-height: 100vh; } .layout-grid { /* plein écran, sans max-width */ width: 100%; max-width: none !important; margin: 0; padding: 16px; gap: 16px; grid-template-columns: 290px minmax(0,1fr); height: calc(100vh - var(--topbar-h)); } .content { min-width: 0; /* évite les débordements */ min-height: 0; display: flex; /* permet de “stretcher” un enfant */ } /* tout enfant marqué .full-bleed occupe 100% de l’espace dispo */ .content > .full-bleed, .content > .panel.full-bleed { flex: 1 1 auto; min-height: 100%; } /* centrer verticalement une page vide agréable */ .panel.centered { display: flex; align-items: center; justify-content: center; text-align: center; } .panel.centered > div { max-width: 640px; margin: auto; } /* Responsive : une colonne sur mobile mais garde la hauteur écran */ @media (max-width:1024px) { .layout-grid { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - var(--topbar-h)); } } /* --- Ventes DASHBOARD --- */ /* --- Force light look for tables on all devices --- */ html { color-scheme: light; } /* Empêche tout zébrage/contraste auto (iOS/Android) */ table, thead, tbody, tr, th, td { background: #fff !important; color: #0f172a !important; } tr:nth-child(odd), tr:nth-child(even) { background: #fff !important; } /* bordures douces si besoin */ table { border: 1px solid #e5e7eb; } th, td { border-bottom: 1px solid #eef2f7; } /* Chart container: prend toute la largeur; hauteur adaptée */ .chart-wrap { width: 100%; height: 320px; } @media (min-width: 768px) { .chart-wrap { height: 420px; } } /* Canvas doit suivre le conteneur */ .chart-wrap > canvas { width: 100% !important; height: 100% !important; display: block; }