/* ============================================================
   BLACKWOODS — Galaxy UI System
   Thèmes dark:  violet, gold, cyber, crimson, ocean, rose, amber,
                 arctic, forest, midnight, neon-city, lava, sakura,
                 dusk, slate, copper, jade, cobalt, lavender, toxic,
                 aurora, ember
   Thèmes clair: snowflake, parchment, daybreak, blossom
   Thèmes demi:  twilight, gunmetal, mocha, denim
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Thème Violet (défaut) ===== */
:root, [data-theme="violet"] {
    --bg-base:              #050510;
    --bg-surface:           #0d0d20;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(139,92,246,0.25);
    --glass-border-hover:   rgba(139,92,246,0.6);
    --accent:               #8b5cf6;
    --accent-2:             #00d4ff;
    --accent-rgb:           139,92,246;
    --accent-2-rgb:         0,212,255;
    --neon-glow:            0 0 20px rgba(139,92,246,0.4), 0 0 60px rgba(139,92,246,0.15);
    --neon-glow-sm:         0 0 10px rgba(139,92,246,0.3);
    --nebula-a:             rgba(139,92,246,0.12);
    --nebula-b:             rgba(0,212,255,0.08);
    --nebula-c:             rgba(236,72,153,0.06);
    --text:                 #e8e8ff;
    --text-muted:           #8888aa;
    --text-faint:           #33334a;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(255,255,255,0.13);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius:               12px;
    --radius-lg:            18px;
    --radius-sm:            8px;
}

/* ===== Thème Gold ===== */
[data-theme="gold"] {
    --bg-base:              #06050a;
    --bg-surface:           #100d00;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(212,175,55,0.3);
    --glass-border-hover:   rgba(212,175,55,0.7);
    --accent:               #d4af37;
    --accent-2:             #fbbf24;
    --accent-rgb:           212,175,55;
    --accent-2-rgb:         251,191,36;
    --neon-glow:            0 0 20px rgba(212,175,55,0.45), 0 0 60px rgba(212,175,55,0.15);
    --neon-glow-sm:         0 0 10px rgba(212,175,55,0.35);
    --nebula-a:             rgba(212,175,55,0.12);
    --nebula-b:             rgba(251,191,36,0.08);
    --nebula-c:             rgba(180,100,20,0.06);
    --text:                 #fff8e6;
    --text-muted:           #99886a;
    --text-faint:           #3a3020;
    --border:               rgba(255,255,255,0.06);
    --border-strong:        rgba(212,175,55,0.2);
    --success:              #22c55e;
    --warning:              #f97316;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,197,94;
    --warning-rgb:          249,115,22;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Cyber ===== */
[data-theme="cyber"] {
    --bg-base:              #000a03;
    --bg-surface:           #000d04;
    --bg-card:              rgba(255,255,255,0.03);
    --bg-card-hover:        rgba(255,255,255,0.06);
    --glass-border:         rgba(0,255,136,0.2);
    --glass-border-hover:   rgba(0,255,136,0.55);
    --accent:               #00ff88;
    --accent-2:             #a3e635;
    --accent-rgb:           0,255,136;
    --accent-2-rgb:         163,230,53;
    --neon-glow:            0 0 20px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.15);
    --neon-glow-sm:         0 0 10px rgba(0,255,136,0.3);
    --nebula-a:             rgba(0,255,136,0.08);
    --nebula-b:             rgba(163,230,53,0.05);
    --nebula-c:             rgba(0,180,100,0.06);
    --text:                 #e6fff2;
    --text-muted:           #66997a;
    --text-faint:           #0d2218;
    --border:               rgba(255,255,255,0.06);
    --border-strong:        rgba(0,255,136,0.15);
    --success:              #00ff88;
    --warning:              #fbbf24;
    --danger:               #ff4444;
    --info:                 #38bdf8;
    --success-rgb:          0,255,136;
    --warning-rgb:          251,191,36;
    --danger-rgb:           255,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Crimson ===== */
[data-theme="crimson"] {
    --bg-base:              #080003;
    --bg-surface:           #130007;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(255,45,85,0.25);
    --glass-border-hover:   rgba(255,45,85,0.6);
    --accent:               #ff2d55;
    --accent-2:             #ff6b9d;
    --accent-rgb:           255,45,85;
    --accent-2-rgb:         255,107,157;
    --neon-glow:            0 0 20px rgba(255,45,85,0.45), 0 0 60px rgba(255,45,85,0.15);
    --neon-glow-sm:         0 0 10px rgba(255,45,85,0.35);
    --nebula-a:             rgba(255,45,85,0.12);
    --nebula-b:             rgba(255,107,157,0.07);
    --nebula-c:             rgba(180,0,40,0.06);
    --text:                 #ffe8f0;
    --text-muted:           #aa6677;
    --text-faint:           #2a000f;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(255,45,85,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ff2d55;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           255,45,85;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Ocean ===== */
[data-theme="ocean"] {
    --bg-base:              #01050e;
    --bg-surface:           #020a1a;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(14,165,233,0.25);
    --glass-border-hover:   rgba(14,165,233,0.6);
    --accent:               #0ea5e9;
    --accent-2:             #06b6d4;
    --accent-rgb:           14,165,233;
    --accent-2-rgb:         6,182,212;
    --neon-glow:            0 0 20px rgba(14,165,233,0.4), 0 0 60px rgba(14,165,233,0.15);
    --neon-glow-sm:         0 0 10px rgba(14,165,233,0.3);
    --nebula-a:             rgba(14,165,233,0.11);
    --nebula-b:             rgba(6,182,212,0.08);
    --nebula-c:             rgba(0,100,180,0.06);
    --text:                 #e0f4ff;
    --text-muted:           #5588aa;
    --text-faint:           #031022;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(14,165,233,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #0ea5e9;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             14,165,233;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Rose ===== */
[data-theme="rose"] {
    --bg-base:              #070010;
    --bg-surface:           #0e0018;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(236,72,153,0.25);
    --glass-border-hover:   rgba(236,72,153,0.6);
    --accent:               #ec4899;
    --accent-2:             #a855f7;
    --accent-rgb:           236,72,153;
    --accent-2-rgb:         168,85,247;
    --neon-glow:            0 0 20px rgba(236,72,153,0.4), 0 0 60px rgba(236,72,153,0.15);
    --neon-glow-sm:         0 0 10px rgba(236,72,153,0.3);
    --nebula-a:             rgba(236,72,153,0.11);
    --nebula-b:             rgba(168,85,247,0.08);
    --nebula-c:             rgba(180,0,120,0.06);
    --text:                 #ffe0f4;
    --text-muted:           #997788;
    --text-faint:           #200028;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(236,72,153,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Amber ===== */
[data-theme="amber"] {
    --bg-base:              #070400;
    --bg-surface:           #100800;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(245,158,11,0.28);
    --glass-border-hover:   rgba(245,158,11,0.65);
    --accent:               #f59e0b;
    --accent-2:             #ef4444;
    --accent-rgb:           245,158,11;
    --accent-2-rgb:         239,68,68;
    --neon-glow:            0 0 20px rgba(245,158,11,0.45), 0 0 60px rgba(245,158,11,0.15);
    --neon-glow-sm:         0 0 10px rgba(245,158,11,0.35);
    --nebula-a:             rgba(245,158,11,0.12);
    --nebula-b:             rgba(239,68,68,0.07);
    --nebula-c:             rgba(180,80,0,0.06);
    --text:                 #fff8e0;
    --text-muted:           #997744;
    --text-faint:           #281800;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(245,158,11,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Arctic ===== */
[data-theme="arctic"] {
    --bg-base:              #010810;
    --bg-surface:           #020f1e;
    --bg-card:              rgba(255,255,255,0.05);
    --bg-card-hover:        rgba(255,255,255,0.09);
    --glass-border:         rgba(125,211,252,0.22);
    --glass-border-hover:   rgba(125,211,252,0.55);
    --accent:               #7dd3fc;
    --accent-2:             #bae6fd;
    --accent-rgb:           125,211,252;
    --accent-2-rgb:         186,230,253;
    --neon-glow:            0 0 20px rgba(125,211,252,0.35), 0 0 60px rgba(125,211,252,0.12);
    --neon-glow-sm:         0 0 10px rgba(125,211,252,0.28);
    --nebula-a:             rgba(125,211,252,0.09);
    --nebula-b:             rgba(186,230,253,0.06);
    --nebula-c:             rgba(56,189,248,0.05);
    --text:                 #f0faff;
    --text-muted:           #5577aa;
    --text-faint:           #021526;
    --border:               rgba(255,255,255,0.08);
    --border-strong:        rgba(125,211,252,0.18);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #7dd3fc;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             125,211,252;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Forest ===== */
[data-theme="forest"] {
    --bg-base:              #010801;
    --bg-surface:           #031005;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(74,222,128,0.2);
    --glass-border-hover:   rgba(74,222,128,0.55);
    --accent:               #4ade80;
    --accent-2:             #86efac;
    --accent-rgb:           74,222,128;
    --accent-2-rgb:         134,239,172;
    --neon-glow:            0 0 20px rgba(74,222,128,0.38), 0 0 60px rgba(74,222,128,0.13);
    --neon-glow-sm:         0 0 10px rgba(74,222,128,0.28);
    --nebula-a:             rgba(74,222,128,0.09);
    --nebula-b:             rgba(134,239,172,0.06);
    --nebula-c:             rgba(20,130,50,0.06);
    --text:                 #e8fff0;
    --text-muted:           #5a8365;
    --text-faint:           #071a0c;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(74,222,128,0.15);
    --success:              #4ade80;
    --warning:              #fbbf24;
    --danger:               #ff4444;
    --info:                 #38bdf8;
    --success-rgb:          74,222,128;
    --warning-rgb:          251,191,36;
    --danger-rgb:           255,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Midnight ===== */
[data-theme="midnight"] {
    --bg-base:              #01010e;
    --bg-surface:           #04041a;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(99,102,241,0.25);
    --glass-border-hover:   rgba(99,102,241,0.6);
    --accent:               #6366f1;
    --accent-2:             #818cf8;
    --accent-rgb:           99,102,241;
    --accent-2-rgb:         129,140,248;
    --neon-glow:            0 0 20px rgba(99,102,241,0.42), 0 0 60px rgba(99,102,241,0.15);
    --neon-glow-sm:         0 0 10px rgba(99,102,241,0.32);
    --nebula-a:             rgba(99,102,241,0.11);
    --nebula-b:             rgba(129,140,248,0.08);
    --nebula-c:             rgba(55,48,200,0.06);
    --text:                 #eeeeff;
    --text-muted:           #7777bb;
    --text-faint:           #0d0d28;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(99,102,241,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Neon City ===== */
[data-theme="neon-city"] {
    --bg-base:              #000510;
    --bg-surface:           #000c1e;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(255,102,0,0.28);
    --glass-border-hover:   rgba(255,102,0,0.65);
    --accent:               #ff6600;
    --accent-2:             #ffcc00;
    --accent-rgb:           255,102,0;
    --accent-2-rgb:         255,204,0;
    --neon-glow:            0 0 20px rgba(255,102,0,0.5), 0 0 60px rgba(255,102,0,0.18);
    --neon-glow-sm:         0 0 10px rgba(255,102,0,0.4);
    --nebula-a:             rgba(255,102,0,0.1);
    --nebula-b:             rgba(255,204,0,0.07);
    --nebula-c:             rgba(180,50,0,0.06);
    --text:                 #fff8f0;
    --text-muted:           #996633;
    --text-faint:           #1a0a00;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(255,102,0,0.22);
    --success:              #22d3a3;
    --warning:              #ffcc00;
    --danger:               #ff2d55;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          255,204,0;
    --danger-rgb:           255,45,85;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Lava ===== */
[data-theme="lava"] {
    --bg-base:              #060100;
    --bg-surface:           #0e0300;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(255,69,0,0.3);
    --glass-border-hover:   rgba(255,69,0,0.7);
    --accent:               #ff4500;
    --accent-2:             #ff6b35;
    --accent-rgb:           255,69,0;
    --accent-2-rgb:         255,107,53;
    --neon-glow:            0 0 20px rgba(255,69,0,0.55), 0 0 60px rgba(255,69,0,0.2);
    --neon-glow-sm:         0 0 10px rgba(255,69,0,0.42);
    --nebula-a:             rgba(255,69,0,0.13);
    --nebula-b:             rgba(255,107,53,0.08);
    --nebula-c:             rgba(180,30,0,0.07);
    --text:                 #fff0e8;
    --text-muted:           #aa5533;
    --text-faint:           #200500;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(255,69,0,0.22);
    --success:              #22d3a3;
    --warning:              #fbbf24;
    --danger:               #ff4500;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          251,191,36;
    --danger-rgb:           255,69,0;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Sakura ===== */
[data-theme="sakura"] {
    --bg-base:              #060010;
    --bg-surface:           #0d0018;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(255,145,176,0.25);
    --glass-border-hover:   rgba(255,145,176,0.6);
    --accent:               #ff91b0;
    --accent-2:             #ffb7d5;
    --accent-rgb:           255,145,176;
    --accent-2-rgb:         255,183,213;
    --neon-glow:            0 0 20px rgba(255,145,176,0.45), 0 0 60px rgba(255,145,176,0.15);
    --neon-glow-sm:         0 0 10px rgba(255,145,176,0.35);
    --nebula-a:             rgba(255,145,176,0.1);
    --nebula-b:             rgba(255,183,213,0.07);
    --nebula-c:             rgba(200,0,100,0.05);
    --text:                 #fff0f6;
    --text-muted:           #997788;
    --text-faint:           #1a0020;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(255,145,176,0.2);
    --success:              #86efac;
    --warning:              #fbbf24;
    --danger:               #ff4477;
    --info:                 #a5f3fc;
    --success-rgb:          134,239,172;
    --warning-rgb:          251,191,36;
    --danger-rgb:           255,68,119;
    --info-rgb:             165,243,252;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Dusk ===== */
[data-theme="dusk"] {
    --bg-base:              #060308;
    --bg-surface:           #0d0612;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(251,146,60,0.25);
    --glass-border-hover:   rgba(192,132,252,0.6);
    --accent:               #fb923c;
    --accent-2:             #c084fc;
    --accent-rgb:           251,146,60;
    --accent-2-rgb:         192,132,252;
    --neon-glow:            0 0 20px rgba(251,146,60,0.4), 0 0 60px rgba(192,132,252,0.18);
    --neon-glow-sm:         0 0 10px rgba(251,146,60,0.32);
    --nebula-a:             rgba(251,146,60,0.1);
    --nebula-b:             rgba(192,132,252,0.08);
    --nebula-c:             rgba(120,50,200,0.05);
    --text:                 #fff2e8;
    --text-muted:           #997755;
    --text-faint:           #1a0810;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(251,146,60,0.2);
    --success:              #22d3a3;
    --warning:              #fb923c;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          251,146,60;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Slate ===== */
[data-theme="slate"] {
    --bg-base:              #030608;
    --bg-surface:           #080e14;
    --bg-card:              rgba(255,255,255,0.05);
    --bg-card-hover:        rgba(255,255,255,0.09);
    --glass-border:         rgba(148,163,184,0.2);
    --glass-border-hover:   rgba(148,163,184,0.5);
    --accent:               #94a3b8;
    --accent-2:             #60a5fa;
    --accent-rgb:           148,163,184;
    --accent-2-rgb:         96,165,250;
    --neon-glow:            0 0 20px rgba(148,163,184,0.3), 0 0 60px rgba(96,165,250,0.12);
    --neon-glow-sm:         0 0 10px rgba(148,163,184,0.25);
    --nebula-a:             rgba(148,163,184,0.08);
    --nebula-b:             rgba(96,165,250,0.06);
    --nebula-c:             rgba(51,65,85,0.05);
    --text:                 #f1f5f9;
    --text-muted:           #64748b;
    --text-faint:           #0f172a;
    --border:               rgba(255,255,255,0.08);
    --border-strong:        rgba(148,163,184,0.18);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #60a5fa;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             96,165,250;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Copper ===== */
[data-theme="copper"] {
    --bg-base:              #050300;
    --bg-surface:           #0d0800;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(184,115,51,0.28);
    --glass-border-hover:   rgba(184,115,51,0.65);
    --accent:               #b87333;
    --accent-2:             #e8a045;
    --accent-rgb:           184,115,51;
    --accent-2-rgb:         232,160,69;
    --neon-glow:            0 0 20px rgba(184,115,51,0.45), 0 0 60px rgba(184,115,51,0.15);
    --neon-glow-sm:         0 0 10px rgba(184,115,51,0.35);
    --nebula-a:             rgba(184,115,51,0.12);
    --nebula-b:             rgba(232,160,69,0.07);
    --nebula-c:             rgba(120,70,0,0.06);
    --text:                 #fff3e0;
    --text-muted:           #886633;
    --text-faint:           #1e1000;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(184,115,51,0.2);
    --success:              #22d3a3;
    --warning:              #e8a045;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          232,160,69;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Jade ===== */
[data-theme="jade"] {
    --bg-base:              #000807;
    --bg-surface:           #001210;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(0,184,148,0.22);
    --glass-border-hover:   rgba(0,184,148,0.55);
    --accent:               #00b894;
    --accent-2:             #00cec9;
    --accent-rgb:           0,184,148;
    --accent-2-rgb:         0,206,201;
    --neon-glow:            0 0 20px rgba(0,184,148,0.4), 0 0 60px rgba(0,184,148,0.14);
    --neon-glow-sm:         0 0 10px rgba(0,184,148,0.3);
    --nebula-a:             rgba(0,184,148,0.1);
    --nebula-b:             rgba(0,206,201,0.07);
    --nebula-c:             rgba(0,100,80,0.06);
    --text:                 #e0fff8;
    --text-muted:           #4a8878;
    --text-faint:           #021814;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(0,184,148,0.15);
    --success:              #00b894;
    --warning:              #fbbf24;
    --danger:               #ff4444;
    --info:                 #38bdf8;
    --success-rgb:          0,184,148;
    --warning-rgb:          251,191,36;
    --danger-rgb:           255,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Cobalt ===== */
[data-theme="cobalt"] {
    --bg-base:              #000815;
    --bg-surface:           #000e25;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(30,144,255,0.25);
    --glass-border-hover:   rgba(30,144,255,0.6);
    --accent:               #1e90ff;
    --accent-2:             #00bfff;
    --accent-rgb:           30,144,255;
    --accent-2-rgb:         0,191,255;
    --neon-glow:            0 0 20px rgba(30,144,255,0.45), 0 0 60px rgba(30,144,255,0.15);
    --neon-glow-sm:         0 0 10px rgba(30,144,255,0.35);
    --nebula-a:             rgba(30,144,255,0.11);
    --nebula-b:             rgba(0,191,255,0.08);
    --nebula-c:             rgba(0,50,180,0.06);
    --text:                 #e8f4ff;
    --text-muted:           #4477aa;
    --text-faint:           #001030;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(30,144,255,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #1e90ff;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             30,144,255;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Lavender ===== */
[data-theme="lavender"] {
    --bg-base:              #060510;
    --bg-surface:           #0c0a1e;
    --bg-card:              rgba(255,255,255,0.05);
    --bg-card-hover:        rgba(255,255,255,0.08);
    --glass-border:         rgba(196,181,253,0.2);
    --glass-border-hover:   rgba(196,181,253,0.55);
    --accent:               #c4b5fd;
    --accent-2:             #f0abfc;
    --accent-rgb:           196,181,253;
    --accent-2-rgb:         240,171,252;
    --neon-glow:            0 0 20px rgba(196,181,253,0.38), 0 0 60px rgba(196,181,253,0.13);
    --neon-glow-sm:         0 0 10px rgba(196,181,253,0.28);
    --nebula-a:             rgba(196,181,253,0.09);
    --nebula-b:             rgba(240,171,252,0.06);
    --nebula-c:             rgba(120,90,200,0.05);
    --text:                 #f5f0ff;
    --text-muted:           #8877bb;
    --text-faint:           #100d28;
    --border:               rgba(255,255,255,0.08);
    --border-strong:        rgba(196,181,253,0.18);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Toxic ===== */
[data-theme="toxic"] {
    --bg-base:              #020500;
    --bg-surface:           #060d00;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(132,204,22,0.25);
    --glass-border-hover:   rgba(132,204,22,0.6);
    --accent:               #84cc16;
    --accent-2:             #facc15;
    --accent-rgb:           132,204,22;
    --accent-2-rgb:         250,204,21;
    --neon-glow:            0 0 20px rgba(132,204,22,0.5), 0 0 60px rgba(132,204,22,0.18);
    --neon-glow-sm:         0 0 10px rgba(132,204,22,0.4);
    --nebula-a:             rgba(132,204,22,0.1);
    --nebula-b:             rgba(250,204,21,0.07);
    --nebula-c:             rgba(60,120,0,0.06);
    --text:                 #f7ffe0;
    --text-muted:           #6a8833;
    --text-faint:           #0c1800;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(132,204,22,0.18);
    --success:              #84cc16;
    --warning:              #facc15;
    --danger:               #ff4444;
    --info:                 #38bdf8;
    --success-rgb:          132,204,22;
    --warning-rgb:          250,204,21;
    --danger-rgb:           255,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Aurora ===== */
[data-theme="aurora"] {
    --bg-base:              #010810;
    --bg-surface:           #02101a;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(45,212,191,0.22);
    --glass-border-hover:   rgba(45,212,191,0.55);
    --accent:               #2dd4bf;
    --accent-2:             #818cf8;
    --accent-rgb:           45,212,191;
    --accent-2-rgb:         129,140,248;
    --neon-glow:            0 0 20px rgba(45,212,191,0.42), 0 0 60px rgba(129,140,248,0.15);
    --neon-glow-sm:         0 0 10px rgba(45,212,191,0.32);
    --nebula-a:             rgba(45,212,191,0.1);
    --nebula-b:             rgba(129,140,248,0.08);
    --nebula-c:             rgba(0,140,120,0.06);
    --text:                 #e8fffc;
    --text-muted:           #4a8888;
    --text-faint:           #011820;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(45,212,191,0.18);
    --success:              #2dd4bf;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #818cf8;
    --success-rgb:          45,212,191;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             129,140,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Ember ===== */
[data-theme="ember"] {
    --bg-base:              #060200;
    --bg-surface:           #100500;
    --bg-card:              rgba(255,255,255,0.04);
    --bg-card-hover:        rgba(255,255,255,0.07);
    --glass-border:         rgba(251,146,60,0.28);
    --glass-border-hover:   rgba(251,146,60,0.65);
    --accent:               #fb923c;
    --accent-2:             #fde68a;
    --accent-rgb:           251,146,60;
    --accent-2-rgb:         253,230,138;
    --neon-glow:            0 0 20px rgba(251,146,60,0.5), 0 0 60px rgba(251,146,60,0.18);
    --neon-glow-sm:         0 0 10px rgba(251,146,60,0.4);
    --nebula-a:             rgba(251,146,60,0.13);
    --nebula-b:             rgba(253,230,138,0.06);
    --nebula-c:             rgba(180,80,0,0.07);
    --text:                 #fff6e8;
    --text-muted:           #996633;
    --text-faint:           #1a0800;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(251,146,60,0.22);
    --success:              #22d3a3;
    --warning:              #fde68a;
    --danger:               #ef4444;
    --info:                 #38bdf8;
    --success-rgb:          34,211,163;
    --warning-rgb:          253,230,138;
    --danger-rgb:           239,68,68;
    --info-rgb:             56,189,248;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== THÈMES CLAIRS ===== */

/* ===== Thème Snowflake (blanc, accent violet) ===== */
[data-theme="snowflake"] {
    --bg-base:              #f8f8ff;
    --bg-surface:           #f0eeff;
    --bg-card:              rgba(0,0,0,0.04);
    --bg-card-hover:        rgba(0,0,0,0.07);
    --glass-border:         rgba(124,58,237,0.18);
    --glass-border-hover:   rgba(124,58,237,0.42);
    --accent:               #7c3aed;
    --accent-2:             #06b6d4;
    --accent-rgb:           124,58,237;
    --accent-2-rgb:         6,182,212;
    --neon-glow:            0 0 18px rgba(124,58,237,0.18), 0 0 40px rgba(124,58,237,0.08);
    --neon-glow-sm:         0 0 8px rgba(124,58,237,0.18);
    --nebula-a:             rgba(124,58,237,0.05);
    --nebula-b:             rgba(6,182,212,0.04);
    --nebula-c:             rgba(200,180,255,0.04);
    --text:                 #1e1b3a;
    --text-muted:           #6b5fa0;
    --text-faint:           #ddd5ff;
    --border:               rgba(0,0,0,0.08);
    --border-strong:        rgba(124,58,237,0.15);
    --success:              #059669;
    --warning:              #d97706;
    --danger:               #dc2626;
    --info:                 #0891b2;
    --success-rgb:          5,150,105;
    --warning-rgb:          217,119,6;
    --danger-rgb:           220,38,38;
    --info-rgb:             8,145,178;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Parchment (parchemin, accent cuivre) ===== */
[data-theme="parchment"] {
    --bg-base:              #fdf6e8;
    --bg-surface:           #f5e6ca;
    --bg-card:              rgba(0,0,0,0.04);
    --bg-card-hover:        rgba(0,0,0,0.07);
    --glass-border:         rgba(146,64,14,0.18);
    --glass-border-hover:   rgba(146,64,14,0.4);
    --accent:               #92400e;
    --accent-2:             #d97706;
    --accent-rgb:           146,64,14;
    --accent-2-rgb:         217,119,6;
    --neon-glow:            0 0 16px rgba(146,64,14,0.15), 0 0 36px rgba(146,64,14,0.07);
    --neon-glow-sm:         0 0 8px rgba(146,64,14,0.14);
    --nebula-a:             rgba(217,119,6,0.06);
    --nebula-b:             rgba(146,64,14,0.04);
    --nebula-c:             rgba(255,210,120,0.05);
    --text:                 #2d1b0e;
    --text-muted:           #78604a;
    --text-faint:           #f0dfc0;
    --border:               rgba(0,0,0,0.07);
    --border-strong:        rgba(146,64,14,0.15);
    --success:              #15803d;
    --warning:              #b45309;
    --danger:               #b91c1c;
    --info:                 #0369a1;
    --success-rgb:          21,128,61;
    --warning-rgb:          180,83,9;
    --danger-rgb:           185,28,28;
    --info-rgb:             3,105,161;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Daybreak (bleu clair doux, accent cyan) ===== */
[data-theme="daybreak"] {
    --bg-base:              #f0f8ff;
    --bg-surface:           #dff0fb;
    --bg-card:              rgba(0,0,0,0.04);
    --bg-card-hover:        rgba(0,0,0,0.07);
    --glass-border:         rgba(8,145,178,0.2);
    --glass-border-hover:   rgba(8,145,178,0.48);
    --accent:               #0891b2;
    --accent-2:             #0ea5e9;
    --accent-rgb:           8,145,178;
    --accent-2-rgb:         14,165,233;
    --neon-glow:            0 0 18px rgba(8,145,178,0.2), 0 0 40px rgba(8,145,178,0.08);
    --neon-glow-sm:         0 0 8px rgba(8,145,178,0.18);
    --nebula-a:             rgba(8,145,178,0.05);
    --nebula-b:             rgba(14,165,233,0.04);
    --nebula-c:             rgba(0,200,220,0.04);
    --text:                 #0c2a3a;
    --text-muted:           #3a778a;
    --text-faint:           #b8e4f5;
    --border:               rgba(0,0,0,0.07);
    --border-strong:        rgba(8,145,178,0.18);
    --success:              #0e7a56;
    --warning:              #b45309;
    --danger:               #b91c1c;
    --info:                 #0891b2;
    --success-rgb:          14,122,86;
    --warning-rgb:          180,83,9;
    --danger-rgb:           185,28,28;
    --info-rgb:             8,145,178;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Blossom (rose pâle, accent framboise) ===== */
[data-theme="blossom"] {
    --bg-base:              #fff0f7;
    --bg-surface:           #ffe0ef;
    --bg-card:              rgba(0,0,0,0.04);
    --bg-card-hover:        rgba(0,0,0,0.07);
    --glass-border:         rgba(157,23,77,0.18);
    --glass-border-hover:   rgba(157,23,77,0.42);
    --accent:               #be185d;
    --accent-2:             #9333ea;
    --accent-rgb:           190,24,93;
    --accent-2-rgb:         147,51,234;
    --neon-glow:            0 0 18px rgba(190,24,93,0.18), 0 0 40px rgba(190,24,93,0.08);
    --neon-glow-sm:         0 0 8px rgba(190,24,93,0.18);
    --nebula-a:             rgba(190,24,93,0.05);
    --nebula-b:             rgba(147,51,234,0.04);
    --nebula-c:             rgba(255,150,200,0.04);
    --text:                 #2d0018;
    --text-muted:           #8b4566;
    --text-faint:           #f5cce0;
    --border:               rgba(0,0,0,0.07);
    --border-strong:        rgba(157,23,77,0.15);
    --success:              #15803d;
    --warning:              #b45309;
    --danger:               #be185d;
    --info:                 #7c3aed;
    --success-rgb:          21,128,61;
    --warning-rgb:          180,83,9;
    --danger-rgb:           190,24,93;
    --info-rgb:             124,58,237;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== THÈMES DEMI (ni trop sombre, ni trop clair) ===== */

/* ===== Thème Twilight (violet-bleu moyen, doux) ===== */
[data-theme="twilight"] {
    --bg-base:              #1a1830;
    --bg-surface:           #221f42;
    --bg-card:              rgba(255,255,255,0.06);
    --bg-card-hover:        rgba(255,255,255,0.1);
    --glass-border:         rgba(167,139,250,0.22);
    --glass-border-hover:   rgba(167,139,250,0.55);
    --accent:               #a78bfa;
    --accent-2:             #60d4ff;
    --accent-rgb:           167,139,250;
    --accent-2-rgb:         96,212,255;
    --neon-glow:            0 0 20px rgba(167,139,250,0.35), 0 0 50px rgba(167,139,250,0.12);
    --neon-glow-sm:         0 0 10px rgba(167,139,250,0.28);
    --nebula-a:             rgba(167,139,250,0.1);
    --nebula-b:             rgba(96,212,255,0.07);
    --nebula-c:             rgba(100,60,200,0.06);
    --text:                 #e4e0ff;
    --text-muted:           #9090cc;
    --text-faint:           #2e2a50;
    --border:               rgba(255,255,255,0.09);
    --border-strong:        rgba(167,139,250,0.2);
    --success:              #22d3a3;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #60d4ff;
    --success-rgb:          34,211,163;
    --warning-rgb:          245,158,11;
    --danger-rgb:           239,68,68;
    --info-rgb:             96,212,255;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Gunmetal (gris bleuté moyen, style GitHub Dark) ===== */
[data-theme="gunmetal"] {
    --bg-base:              #1c2128;
    --bg-surface:           #252d35;
    --bg-card:              rgba(255,255,255,0.06);
    --bg-card-hover:        rgba(255,255,255,0.09);
    --glass-border:         rgba(88,166,255,0.2);
    --glass-border-hover:   rgba(88,166,255,0.5);
    --accent:               #58a6ff;
    --accent-2:             #56d364;
    --accent-rgb:           88,166,255;
    --accent-2-rgb:         86,211,100;
    --neon-glow:            0 0 18px rgba(88,166,255,0.32), 0 0 45px rgba(88,166,255,0.1);
    --neon-glow-sm:         0 0 9px rgba(88,166,255,0.25);
    --nebula-a:             rgba(88,166,255,0.08);
    --nebula-b:             rgba(86,211,100,0.05);
    --nebula-c:             rgba(40,80,130,0.07);
    --text:                 #e6edf3;
    --text-muted:           #7d8590;
    --text-faint:           #2d333b;
    --border:               rgba(255,255,255,0.08);
    --border-strong:        rgba(88,166,255,0.18);
    --success:              #56d364;
    --warning:              #d29922;
    --danger:               #f85149;
    --info:                 #58a6ff;
    --success-rgb:          86,211,100;
    --warning-rgb:          210,153,34;
    --danger-rgb:           248,81,73;
    --info-rgb:             88,166,255;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Mocha (brun café chaud, mi-sombre) ===== */
[data-theme="mocha"] {
    --bg-base:              #1c1408;
    --bg-surface:           #281c0c;
    --bg-card:              rgba(255,255,255,0.05);
    --bg-card-hover:        rgba(255,255,255,0.09);
    --glass-border:         rgba(212,168,73,0.25);
    --glass-border-hover:   rgba(212,168,73,0.58);
    --accent:               #d4a849;
    --accent-2:             #c47c3a;
    --accent-rgb:           212,168,73;
    --accent-2-rgb:         196,124,58;
    --neon-glow:            0 0 18px rgba(212,168,73,0.38), 0 0 45px rgba(212,168,73,0.13);
    --neon-glow-sm:         0 0 9px rgba(212,168,73,0.3);
    --nebula-a:             rgba(212,168,73,0.1);
    --nebula-b:             rgba(196,124,58,0.07);
    --nebula-c:             rgba(140,80,10,0.06);
    --text:                 #f5e8cc;
    --text-muted:           #8b7050;
    --text-faint:           #2e2010;
    --border:               rgba(255,255,255,0.07);
    --border-strong:        rgba(212,168,73,0.2);
    --success:              #22d3a3;
    --warning:              #d4a849;
    --danger:               #ef4444;
    --info:                 #60a5fa;
    --success-rgb:          34,211,163;
    --warning-rgb:          212,168,73;
    --danger-rgb:           239,68,68;
    --info-rgb:             96,165,250;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Thème Denim (bleu acier moyen, reposant) ===== */
[data-theme="denim"] {
    --bg-base:              #0e1929;
    --bg-surface:           #152436;
    --bg-card:              rgba(255,255,255,0.06);
    --bg-card-hover:        rgba(255,255,255,0.1);
    --glass-border:         rgba(96,165,250,0.22);
    --glass-border-hover:   rgba(96,165,250,0.55);
    --accent:               #60a5fa;
    --accent-2:             #34d399;
    --accent-rgb:           96,165,250;
    --accent-2-rgb:         52,211,153;
    --neon-glow:            0 0 18px rgba(96,165,250,0.35), 0 0 48px rgba(96,165,250,0.12);
    --neon-glow-sm:         0 0 9px rgba(96,165,250,0.28);
    --nebula-a:             rgba(96,165,250,0.09);
    --nebula-b:             rgba(52,211,153,0.06);
    --nebula-c:             rgba(20,60,120,0.06);
    --text:                 #dde8f5;
    --text-muted:           #4f7a9a;
    --text-faint:           #1a2e42;
    --border:               rgba(255,255,255,0.08);
    --border-strong:        rgba(96,165,250,0.18);
    --success:              #34d399;
    --warning:              #fbbf24;
    --danger:               #f87171;
    --info:                 #60a5fa;
    --success-rgb:          52,211,153;
    --warning-rgb:          251,191,36;
    --danger-rgb:           248,113,113;
    --info-rgb:             96,165,250;
    --sidebar-width:        260px;
    --radius: 12px; --radius-lg: 18px; --radius-sm: 8px;
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Fond nébuleuse */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
body::before {
    width: 600px; height: 600px;
    top: -150px; left: -100px;
    background: radial-gradient(circle, var(--nebula-a) 0%, transparent 70%);
    animation: nebula-drift 18s ease-in-out infinite alternate;
}
body::after {
    width: 500px; height: 500px;
    bottom: -100px; right: -80px;
    background: radial-gradient(circle, var(--nebula-b) 0%, transparent 70%);
    animation: nebula-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes nebula-drift {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(40px,30px) scale(1.08); }
}

/* ===== Layout ===== */
.container { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06) 0%, rgba(0,0,0,0.4) 100%);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    padding: 20px 14px;
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(.4,0,.2,1);
}

.sidebar--collapsed { width: 64px !important; }
.sidebar--collapsed .logo h1, .sidebar--collapsed .logo p,
.sidebar--collapsed .user-details, .sidebar--collapsed .menu-item span,
.sidebar--collapsed .theme-picker-label, .sidebar--collapsed .theme-picker,
.sidebar--collapsed .logout-btn { display: none; }
.sidebar--collapsed .menu-item { justify-content: center; padding: 10px; gap: 0; }
.sidebar--collapsed .user-info { justify-content: center; padding: 10px; }
.sidebar--collapsed .logo { padding: 6px 0; }

/* Logo */
.logo {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.logo h1 {
    font-size: 20px; font-weight: 800; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),0.5));
}
.logo p { color: var(--text-muted); font-size: 11px; margin-top: 3px; letter-spacing: 0.8px; }

/* User info */
.user-info {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.user-info i { color: var(--accent); font-size: 20px; flex-shrink: 0; }
.user-details h3 { font-size: 13px; font-weight: 600; }
.user-details p { font-size: 11px; color: var(--text-muted); }
.logout-btn {
    background: rgba(var(--danger-rgb),0.12);
    color: var(--danger);
    border: 1px solid rgba(var(--danger-rgb),0.3);
    padding: 5px 9px;
    border-radius: 6px; cursor: pointer; font-size: 12px;
    margin-left: auto; transition: all 0.2s; flex-shrink: 0;
}
.logout-btn:hover { background: rgba(var(--danger-rgb),0.25); box-shadow: 0 0 10px rgba(var(--danger-rgb),0.3); }

/* Menu */
.menu { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    flex: 1 1 auto; 
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
    padding-right: 4px;
}
.menu::-webkit-scrollbar { width: 4px; }
.menu::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }
.menu::-webkit-scrollbar-thumb:hover { background: var(--glass-border-hover); }
.menu-item {
    display: flex; align-items: center;
    padding: 9px 12px;
    color: var(--text-muted); text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    position: relative; gap: 10px; font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap; overflow: hidden;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.menu-item::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 55%;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 0 2px 2px 0; transition: transform 0.2s;
}
.menu-item i { width: 16px; text-align: center; flex-shrink: 0; font-size: 14px; }
.menu-item:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--glass-border); }
.menu-item:hover::before { transform: translateY(-50%) scaleY(1); }
.menu-item.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.2), rgba(var(--accent-2-rgb),0.08));
    color: var(--accent); border-color: var(--glass-border-hover); font-weight: 600;
    box-shadow: var(--neon-glow-sm), inset 0 0 20px rgba(var(--accent-rgb),0.05);
}
.menu-item.active::before { transform: translateY(-50%) scaleY(1); }

/* Theme picker */
.theme-picker-wrapper { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.theme-picker-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 7px; }
.theme-picker { display: flex; gap: 8px; }
.theme-dot {
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all 0.2s;
}
.theme-dot[data-theme="violet"] { background: linear-gradient(135deg,#8b5cf6,#00d4ff); }
.theme-dot[data-theme="gold"]   { background: linear-gradient(135deg,#d4af37,#fbbf24); }
.theme-dot[data-theme="cyber"]  { background: linear-gradient(135deg,#00ff88,#a3e635); }
.theme-dot:hover { transform: scale(1.2); }
.theme-dot.active { border-color: var(--text); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6); }

/* Sidebar toggle */
.sidebar-toggle {
    position: absolute; top: 18px; right: -13px;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #000; border: 2px solid var(--bg-base);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 10px; z-index: 100; transition: all 0.3s;
    box-shadow: var(--neon-glow-sm);
}
.sidebar-toggle:hover { transform: scale(1.15); box-shadow: var(--neon-glow); }

/* ===== Content ===== */
.content {
    flex: 1; padding: 30px 32px;
    overflow-y: auto; overflow-x: hidden; min-width: 0;
}

/* Page header */
.page-header {
    margin-bottom: 28px;
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px;
    padding-right: 52px; /* clearance pour le bouton cloche fixe en haut à droite */
}
.page-header h2 {
    font-size: 28px; font-weight: 800;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),0.4));
    line-height: 1.2; flex: 1 1 auto; min-width: 0;
}
.page-header p { color: var(--text-muted); font-size: 13px; width: 100%; margin-top: -4px; }

/* ===== Stat cards ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.stat-card {
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 20px 22px; border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    position: relative; overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.stat-card::after {
    content: ''; position: absolute; top: -50%; right: -50%;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 70%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--neon-glow); border-color: var(--glass-border-hover); }
.stat-card.stat-primary {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12) 0%, rgba(var(--accent-2-rgb),0.06) 100%);
    border-color: rgba(var(--accent-rgb),0.4);
}
.stat-card h3 { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.stat-card .value { font-size: 26px; font-weight: 800; color: var(--accent); margin-bottom: 6px; line-height: 1; text-shadow: 0 0 20px rgba(var(--accent-rgb),0.4); }
.stat-card .trend { font-size: 12px; display: flex; align-items: center; gap: 5px; color: var(--text-muted); flex-wrap: wrap; }
.trend.positive { color: var(--success); }
.trend.negative { color: var(--danger); }

/* ===== Charts ===== */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.chart-card {
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 22px; border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    transition: box-shadow 0.2s;
}
.chart-card:hover { box-shadow: var(--neon-glow-sm); }
.chart-card h3 { margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.chart-card h3 i { color: var(--accent); font-size: 13px; }

/* Generic card */
.card {
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); border: 1px solid var(--glass-border); overflow: hidden;
}

/* ===== Tables ===== */
.table-container {
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); border: 1px solid var(--glass-border);
    overflow: hidden; margin-bottom: 24px;
}
.table-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08) 0%, transparent 100%);
}
.table-header h3 { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.table-header h3 i { color: var(--accent); }
.table-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Barre de recherche filtre inline dans les tables */
.table-search-input {
    height: 34px; padding: 0 12px;
    background: var(--glass-bg); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 12px; font-family: inherit;
    outline: none; width: 180px; transition: border-color 0.18s, width 0.25s;
}
.table-search-input:focus { border-color: var(--accent); width: 240px; box-shadow: var(--neon-glow-sm); }
.table-search-input::placeholder { color: var(--text-muted); }

/* ===== Table Sort & Select Filters ===== */
.th-sort-wrap { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.sort-ico { font-size: 9px; opacity: 0.3; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; }
th:hover .sort-ico { opacity: 0.7; }
.sort-ico.active { opacity: 1; color: var(--accent); }
.tbl-sel-filter {
    height: 34px; padding: 0 10px;
    background: var(--glass-bg); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 12px; font-family: inherit;
    outline: none; cursor: pointer; transition: border-color 0.18s;
    max-width: 160px;
}
.tbl-sel-filter:focus { border-color: var(--accent); box-shadow: var(--neon-glow-sm); }
.tbl-sel-filter option { background: var(--bg-surface); }

table { width: 100%; border-collapse: collapse; }
thead { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-2-rgb),0.05) 100%); }
th {
    padding: 11px 14px; text-align: left;
    color: var(--accent); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    vertical-align: middle; white-space: nowrap;
}
td { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(var(--accent-rgb),0.04); }
.validated-row   { background: rgba(var(--success-rgb),0.04); }
.validated-row:hover   { background: rgba(var(--success-rgb),0.09); }
.unvalidated-row { background: rgba(var(--warning-rgb),0.04); }
.unvalidated-row:hover { background: rgba(var(--warning-rgb),0.09); }

/* ===== Buttons ===== */
.btn {
    padding: 9px 18px; border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #000; box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35);
}
.btn-primary:hover { box-shadow: var(--neon-glow), 0 4px 20px rgba(var(--accent-rgb),0.5); transform: translateY(-1px); filter: brightness(1.1); }
.btn-secondary {
    background: rgba(255,255,255,0.05); color: var(--text);
    border: 1px solid var(--border-strong); backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.09); border-color: var(--glass-border-hover); box-shadow: var(--neon-glow-sm); }
.btn-success { background: rgba(var(--success-rgb),0.14); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.3); }
.btn-success:hover { background: rgba(var(--success-rgb),0.24); box-shadow: 0 0 12px rgba(var(--success-rgb),0.3); }
.btn-danger  { background: rgba(var(--danger-rgb),0.14); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.3); }
.btn-danger:hover  { background: rgba(var(--danger-rgb),0.24); box-shadow: 0 0 12px rgba(var(--danger-rgb),0.3); }
.btn-warning { background: rgba(var(--warning-rgb),0.14); color: var(--warning); border: 1px solid rgba(var(--warning-rgb),0.3); }
.btn-warning:hover { background: rgba(var(--warning-rgb),0.24); box-shadow: 0 0 12px rgba(var(--warning-rgb),0.3); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text); border-color: var(--glass-border); }
.btn-info  { background: rgba(56,189,248,0.14); color: var(--info); border: 1px solid rgba(56,189,248,0.3); }
.btn-info:hover  { background: rgba(56,189,248,0.24); box-shadow: 0 0 12px rgba(56,189,248,0.25); }
.btn-sm { padding: 5px 11px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }

/* ===== Badges ===== */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
}
.badge-success { background: rgba(var(--success-rgb),0.14); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.3); box-shadow: 0 0 8px rgba(var(--success-rgb),0.18); }
.badge-warning { background: rgba(var(--warning-rgb),0.14); color: var(--warning); border: 1px solid rgba(var(--warning-rgb),0.3); box-shadow: 0 0 8px rgba(var(--warning-rgb),0.18); }
.badge-danger  { background: rgba(var(--danger-rgb),0.14);  color: var(--danger);  border: 1px solid rgba(var(--danger-rgb),0.3);  box-shadow: 0 0 8px rgba(var(--danger-rgb),0.18); }
.badge-info    { background: rgba(56,189,248,0.14); color: var(--info); border: 1px solid rgba(56,189,248,0.3); }

/* ===== Modal ===== */
.modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 2000; justify-content: center; align-items: center; padding: 20px;
}
.modal.active, .modal[style*="display: block"] { display: flex !important; }
.modal-content {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07) 0%, var(--bg-surface) 100%);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    padding: 30px; border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border-hover);
    box-shadow: var(--neon-glow), 0 30px 80px rgba(0,0,0,0.6);
    max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
    position: relative;
    animation: modal-in 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content h3 {
    font-size: 18px; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 22px;
    padding-bottom: 14px; border-bottom: 1px solid var(--glass-border);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-header h3 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.close, .close-modal {
    position: absolute; top: 14px; right: 16px;
    background: rgba(var(--danger-rgb),0.1); border: 1px solid rgba(var(--danger-rgb),0.2);
    color: var(--text-muted); font-size: 16px; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; line-height: 1;
}
.close:hover, .close-modal:hover { color: var(--danger); background: rgba(var(--danger-rgb),0.2); transform: rotate(90deg); box-shadow: 0 0 10px rgba(var(--danger-rgb),0.3); }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; position: relative; }
.form-group label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.form-row { display: flex; gap: 12px; margin-bottom: 16px; }
.form-row .form-group { margin-bottom: 0; }
.form-input, .form-control {
    width: 100%; padding: 10px 13px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font-size: 14px;
    font-family: inherit; transition: all 0.2s;
}
.form-input, .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.10), var(--neon-glow-sm); background: rgba(var(--accent-rgb),0.03); }
.form-input::placeholder, .form-control::placeholder { color: var(--text-faint); }
select.form-input, select.form-control { 
    cursor: pointer; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select.form-input option, select.form-control option {
    background: var(--bg-surface);
    color: var(--text);
    padding: 8px;
}
select.form-input option:checked, select.form-control option:checked,
select.form-input option:hover, select.form-control option:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.2), rgba(var(--accent-2-rgb),0.1));
    color: var(--accent);
}
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ===== Month selector ===== */
.month-selector {
    display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
    margin-bottom: 24px; padding: 16px 22px;
    background: var(--bg-card); backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); border: 1px solid var(--glass-border);
}
.month-selector input[type="month"] { max-width: 190px; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent); }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab-btn { padding: 9px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; margin-bottom: -1px; white-space: nowrap; }
.tab-btn i { margin-right: 7px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb),0.4); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== Filter bar ===== */
.filter-bar {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 13px 16px;
    background: var(--bg-card); backdrop-filter: blur(16px);
    border-radius: var(--radius); border: 1px solid var(--glass-border);
}
.filter-bar .form-group { flex: 1; min-width: 160px; margin: 0; }

/* ===== Alert ===== */
.alert { padding: 11px 15px; border-radius: var(--radius-sm); margin: 10px 0; display: flex; align-items: center; gap: 10px; font-size: 13px; backdrop-filter: blur(8px); }
.alert-warning { background: rgba(var(--warning-rgb),0.1); border: 1px solid rgba(var(--warning-rgb),0.3); color: var(--warning); }

/* ===== Action buttons ===== */
.action-buttons { display: flex; gap: 5px; flex-wrap: wrap; }

/* ===== Inline search box (filter bars) ===== */
.search-box { position: relative; }
.search-box input { padding-left: 36px; }
.search-box i.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; }

/* ===== Cashier ===== */
.cashier-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; margin-bottom: 14px; }
.product-card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 12px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 13px; }
.product-card:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); box-shadow: var(--neon-glow-sm); transform: translateY(-2px); }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.cart-item:hover { background: rgba(var(--accent-rgb),0.03); }
.cart-total { font-size: 20px; font-weight: 800; color: var(--accent); text-align: right; padding: 14px; text-shadow: 0 0 20px rgba(var(--accent-rgb),0.5); }

/* ===== Crafting & Recipes ===== */
.recipes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.recipe-card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 18px; transition: all 0.2s; }
.recipe-card:hover { border-color: var(--glass-border-hover); box-shadow: var(--neon-glow-sm); transform: translateY(-2px); background: var(--bg-card-hover); }
.recipe-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.recipe-header h3 { color: var(--text); font-size: 14px; font-weight: 700; margin: 0; }
.recipe-description { color: var(--text-muted); margin-bottom: 12px; font-size: 12px; }
.recipe-ingredients h4 { font-size: 11px; color: var(--accent); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.recipe-ingredients ul { list-style: none; padding: 0; margin-bottom: 10px; }
.recipe-ingredients li { padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.recipe-output { padding: 9px 12px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 12px; }
.crafting-container { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 24px; }
.crafting-recipes-section, .crafting-cart-section, .crafting-history-section { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 18px; backdrop-filter: blur(16px); }
.crafting-recipes-section h3, .crafting-cart-section h3, .crafting-history-section h3 { color: var(--accent); margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.crafting-recipes-list { max-height: 560px; overflow-y: auto; }
.crafting-recipe-item { display: flex; justify-content: space-between; align-items: center; padding: 11px; border-bottom: 1px solid var(--border); transition: background 0.12s; border-radius: var(--radius-sm); }
.crafting-recipe-item:hover { background: rgba(var(--accent-rgb),0.06); }
.recipe-info h4 { margin: 0 0 3px; color: var(--text); font-size: 13px; }
.recipe-category { color: var(--text-muted); font-size: 11px; }
.recipe-ingredients-count { color: var(--accent); font-size: 11px; }
.crafting-cart { min-height: 260px; max-height: 440px; overflow-y: auto; margin-bottom: 12px; }
.empty-cart { text-align: center; color: var(--text-muted); padding: 32px 20px; }
.cart-item-info h4 { margin: 0 0 3px; color: var(--text); font-size: 13px; }
.cart-item-info p { margin: 0; font-size: 11px; color: var(--text-muted); }
.ingredients-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.ingredient-tag { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.2); padding: 1px 6px; border-radius: 4px; font-size: 10px; color: var(--text-muted); }
.cart-item-actions { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.quantity-control { display: flex; align-items: center; gap: 7px; }
.quantity-control .quantity { min-width: 26px; text-align: center; font-weight: 700; color: var(--accent); }
.crafting-cart-actions { display: flex; flex-direction: column; gap: 8px; }
.recipe-details { max-width: 600px; }
.recipe-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 7px; }
.ingredients-table { width: 100%; margin: 12px 0; }
.recipe-output-detail { background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2); padding: 12px; border-radius: var(--radius-sm); margin: 12px 0; }
.recipe-pricing { font-size: 11px; color: var(--text-muted); margin: 5px 0; padding: 5px 9px; background: rgba(var(--accent-rgb),0.05); border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ===== Login ===== */
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--bg-base); }
.login-box {
    background: var(--bg-card); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    padding: 42px 38px; border-radius: var(--radius-lg);
    box-shadow: var(--neon-glow), 0 40px 100px rgba(0,0,0,0.6);
    width: 100%; max-width: 400px;
    border: 1px solid var(--glass-border-hover);
    animation: modal-in 0.4s cubic-bezier(.4,0,.2,1);
}
.login-box h1 {
    text-align: center; margin-bottom: 8px; font-size: 30px; font-weight: 900; letter-spacing: 3px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.6));
}
.login-box h2 { text-align: center; margin-bottom: 28px; font-size: 13px; color: var(--text-muted); font-weight: 400; letter-spacing: 0.8px; }

/* ===== Utility ===== */
.positive { color: var(--success); }
.negative { color: var(--danger); }
.warning  { color: var(--warning); }

/* ===== Page Comptes ===== */
.accounts-year-block { margin-bottom: 32px; }
.accounts-year-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-bottom: 14px; padding: 12px 18px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-2-rgb),0.03) 100%);
    backdrop-filter: blur(16px); border-radius: var(--radius);
    border: 1px solid var(--glass-border); border-left: 3px solid var(--accent);
}
.accounts-year-title { color: var(--accent); font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 9px; font-weight: 700; text-shadow: 0 0 10px rgba(var(--accent-rgb),0.4); }
.accounts-year-totals { display: flex; gap: 18px; flex-wrap: wrap; }
.year-total-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.year-total-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.year-total-value { font-size: 13px; font-weight: 700; }
.accounts-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.accounts-month-card { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.accounts-month-card:hover { transform: translateY(-4px); box-shadow: var(--neon-glow); border-color: var(--glass-border-hover); }
.accounts-month-card:hover .accounts-card-arrow { color: var(--accent); }
.accounts-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.accounts-card-header h3 { color: var(--text); font-size: 14px; font-weight: 700; margin: 0; }
.accounts-card-arrow { color: var(--text-faint); font-size: 11px; transition: color 0.15s; }
.accounts-card-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; }
.accounts-card-net { font-weight: 700; font-size: 13px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5px 0; margin: 3px 0; }
.accounts-label { color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.accounts-value { font-weight: 600; }
.accounts-card-employee { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 11px; flex-direction: column; align-items: flex-start; gap: 3px; }
.accounts-card-employee .accounts-label { font-size: 10px; }
.accounts-employee { color: var(--accent); font-weight: 600; font-size: 11px; display: flex; align-items: center; gap: 4px; }

/* ===== Skeleton ===== */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, rgba(var(--accent-rgb),0.06) 50%, var(--bg-card) 75%); background-size: 600px 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
.skeleton-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--glass-border); }
.skeleton-text { height: 12px; margin: 7px 0; border-radius: 4px; }
.skeleton-title { height: 16px; width: 60%; margin-bottom: 10px; border-radius: 4px; }
.skeleton-value { height: 28px; width: 70%; margin: 10px 0; border-radius: 5px; }
.skeleton-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.skeleton-row > div { height: 12px; border-radius: 4px; }

/* ===== Sparklines ===== */
.stat-card { position: relative; }
.sparkline-wrapper { position: absolute; bottom: 10px; right: 10px; opacity: 0.28; width: 80px; height: 30px; pointer-events: none; }

/* ===== Goal progress ===== */
.goal-progress { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.goal-progress-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.goal-progress-label .goal-pct { font-weight: 700; color: var(--text); }
.progress-bar { height: 5px; background: var(--border-strong); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.progress-fill.progress-danger  { background: var(--danger); box-shadow: 0 0 6px rgba(var(--danger-rgb),0.5); }
.progress-fill.progress-warning { background: var(--warning); box-shadow: 0 0 6px rgba(var(--warning-rgb),0.5); }
.progress-fill.progress-success { background: var(--success); box-shadow: 0 0 6px rgba(var(--success-rgb),0.5); }
.progress-fill.progress-gold    { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--neon-glow-sm); }
.goal-edit-btn { background: none; border: none; color: var(--text-muted); font-size: 10px; cursor: pointer; padding: 0 0 0 5px; transition: color 0.2s; }
.goal-edit-btn:hover { color: var(--accent); }

/* ===== Recherche globale Ctrl+K ===== */
#search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3000; align-items: flex-start; justify-content: center; padding-top: 80px; }
#search-overlay.active { display: flex; }
.search-box {
    width: 100%; max-width: 600px;
    background: var(--bg-surface); backdrop-filter: blur(24px);
    border-radius: var(--radius-lg); border: 1px solid var(--glass-border-hover);
    box-shadow: var(--neon-glow), 0 30px 80px rgba(0,0,0,0.7);
    overflow: hidden;
    animation: modal-in 0.2s cubic-bezier(.4,0,.2,1);
}
.search-input-wrapper { display: flex; align-items: center; padding: 14px 18px; gap: 12px; border-bottom: 1px solid var(--border); }
.search-input-wrapper i { color: var(--text-muted); font-size: 15px; }
#search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; font-family: inherit; }
#search-input::placeholder { color: var(--text-muted); }
.search-shortcut { font-size: 10px; color: var(--text-muted); background: var(--border-strong); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border-strong); white-space: nowrap; }
#search-results { max-height: 400px; overflow-y: auto; padding: 6px 0; }
.search-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 7px 18px 3px; }
.search-result-item { display: flex; align-items: center; gap: 11px; padding: 9px 18px; cursor: pointer; transition: background 0.1s; }
.search-result-item:hover, .search-result-item.focused, .search-result-item.search-kbactive { background: rgba(var(--accent-rgb),0.12); }
.search-result-item.search-kbactive { border-left: 2px solid var(--accent); }
.search-result-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),0.1); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent); flex-shrink: 0; }
.search-result-label { font-size: 13px; font-weight: 600; }
.search-result-sub { font-size: 11px; color: var(--text-muted); }
.search-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ===== Heatmap ===== */
.heatmap-section { margin-bottom: 32px; }
.heatmap-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.heatmap-toolbar h3 { flex: 1; font-size: 14px; color: var(--text); font-weight: 700; }
.heatmap-grid-wrapper { overflow-x: auto; padding-bottom: 8px; }
.heatmap-months-labels { display: grid; grid-template-columns: 30px repeat(53, 14px); gap: 2px; margin-bottom: 3px; }
.heatmap-month-label { font-size: 9px; color: var(--text-muted); text-align: center; }
.heatmap-grid { display: grid; grid-template-columns: 30px repeat(53, 14px); grid-template-rows: repeat(7, 14px); gap: 2px; align-items: center; }
.heatmap-day-label { font-size: 9px; color: var(--text-muted); text-align: right; padding-right: 4px; line-height: 14px; }
.heat-cell { 
    width: 14px; height: 14px; border-radius: 3px; 
    background: rgba(255,255,255,0.07);
    cursor: default; transition: transform 0.1s, background 0.2s; position: relative; 
}
/* 4 niveaux discrets avec fort contraste */
.heat-cell[data-level="1"] { background: rgba(var(--accent-rgb), 0.35); }
.heat-cell[data-level="2"] { background: rgba(var(--accent-rgb), 0.56); box-shadow: 0 0 5px rgba(var(--accent-rgb),0.25); }
.heat-cell[data-level="3"] { background: rgba(var(--accent-rgb), 0.78); box-shadow: 0 0 7px rgba(var(--accent-rgb),0.4); }
.heat-cell[data-level="4"] { background: rgba(var(--accent-rgb), 1);    box-shadow: 0 0 12px rgba(var(--accent-rgb),0.7); }
.heat-cell:hover { transform: scale(1.4); z-index: 10; }
.heat-cell[title]:hover::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--bg-surface); border: 1px solid var(--glass-border); color: var(--text); font-size: 10px; padding: 3px 8px; border-radius: 4px; pointer-events: none; z-index: 999; box-shadow: var(--neon-glow-sm); }
.heatmap-legend { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10px; color: var(--text-muted); }
.heatmap-legend-cell { width: 12px; height: 12px; border-radius: 2px; }

/* ===== P&L ===== */
.pnl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pnl-table-wrapper { overflow-x: auto; }
.pnl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pnl-table th { background: rgba(var(--accent-rgb),0.08); padding: 9px 13px; text-align: right; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border-bottom: 1px solid var(--border-strong); }
.pnl-table th:first-child { text-align: left; color: var(--accent); }
.pnl-table td { padding: 9px 13px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pnl-table td:first-child { text-align: left; color: var(--text-muted); font-size: 11px; }
.pnl-table tr.pnl-row-revenue td { color: var(--success); }
.pnl-table tr.pnl-row-expenses td { color: var(--danger); }
.pnl-table tr.pnl-row-net td { font-weight: 700; font-size: 13px; background: rgba(var(--accent-rgb),0.05); border-top: 1px solid var(--border-strong); }
.pnl-table tr.pnl-row-total td { font-weight: 700; font-size: 14px; background: rgba(var(--accent-rgb),0.1); border-top: 2px solid var(--accent); color: var(--accent); }
.pnl-table tr.pnl-row-total td:first-child { color: var(--accent); }
.pnl-badge-margin { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }

/* ===== Comparaison mois ===== */
.compare-toggle { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.compare-toggle label { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.compare-active .stat-card { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.compare-col { border-left: 1px solid var(--border); padding-left: 11px; }
.compare-col:first-child { border-left: none; padding-left: 0; }
.compare-col-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.compare-delta { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 3px; }
.compare-delta.up   { background: rgba(var(--success-rgb),0.15); color: var(--success); }
.compare-delta.down { background: rgba(var(--danger-rgb),0.15);  color: var(--danger); }
.compare-delta.flat { background: rgba(255,255,255,0.05); color: var(--text-muted); }

/* ===== Remboursements ===== */
.refunds-alert-card { cursor: pointer; border-left: 3px solid var(--warning) !important; }
.refunds-alert-card:hover { box-shadow: 0 0 20px rgba(var(--warning-rgb),0.25) !important; }

/* ===== Help tooltip système ===== */
.help-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.4);
    color: var(--accent); font-size: 9px; font-weight: 700;
    cursor: help; vertical-align: middle; margin-left: 4px;
    flex-shrink: 0; position: relative; transition: all 0.2s; z-index: 10;
}
.help-badge:hover { background: rgba(var(--accent-rgb),0.25); box-shadow: var(--neon-glow-sm); transform: scale(1.15); }
.help-badge .help-tooltip {
    display: none; position: absolute;
    bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-hover); border-radius: var(--radius);
    padding: 10px 13px; font-size: 12px; font-weight: 400; color: var(--text);
    width: 220px; line-height: 1.5;
    box-shadow: var(--neon-glow-sm), 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10000; pointer-events: none; text-align: left; white-space: normal;
}
.help-badge .help-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--glass-border-hover); }
.help-badge:hover .help-tooltip { display: block; }

/* ===== Emoji picker (prix de vente) ===== */
.emoji-quick-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 8px; padding: 10px;
    background: var(--bg-base); border: 1px solid var(--glass-border);
    border-radius: var(--radius); max-height: 120px; overflow-y: auto;
}
.emoji-pick {
    cursor: pointer; font-size: 20px; padding: 3px 5px;
    border-radius: 6px; transition: background 0.15s, transform 0.15s;
    line-height: 1;
}
.emoji-pick:hover { background: rgba(var(--accent-rgb),0.15); transform: scale(1.25); }

/* ===== Tour interactif ===== */
#tour-overlay { display: none; position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
#tour-overlay.active { display: block; }
#tour-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 9001; pointer-events: all; }
#tour-highlight {
    position: fixed; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), var(--neon-glow);
    border: 2px solid var(--accent);
    z-index: 9002; pointer-events: none;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    animation: tour-pulse 2s ease-in-out infinite;
}
@keyframes tour-pulse {
    0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 20px rgba(var(--accent-rgb),0.5), 0 0 50px rgba(var(--accent-rgb),0.2); }
    50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 30px rgba(var(--accent-rgb),0.8), 0 0 70px rgba(var(--accent-rgb),0.3); }
}
.tour-bubble {
    position: fixed; z-index: 9003;
    background: var(--bg-surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-hover); border-radius: var(--radius-lg);
    padding: 18px 22px; max-width: 320px; min-width: 240px;
    box-shadow: var(--neon-glow), 0 20px 60px rgba(0,0,0,0.6);
    animation: modal-in 0.25s cubic-bezier(.4,0,.2,1);
    pointer-events: all;
}
.tour-bubble-step { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; margin-bottom: 5px; }
.tour-bubble-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.tour-bubble-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.tour-bubble-actions { display: flex; gap: 7px; align-items: center; }
.tour-progress { flex: 1; height: 3px; background: var(--border-strong); border-radius: 2px; overflow: hidden; }
.tour-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; transition: width 0.3s ease; box-shadow: var(--neon-glow-sm); }

/* ===== Page Tuto ===== */
.tuto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tuto-section-card { background: var(--bg-card); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 22px; transition: all 0.2s; }
.tuto-section-card:hover { border-color: var(--glass-border-hover); box-shadow: var(--neon-glow-sm); transform: translateY(-2px); }
.tuto-section-icon { width: 44px; height: 44px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-2-rgb),0.08)); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); margin-bottom: 12px; box-shadow: var(--neon-glow-sm); }
.tuto-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.tuto-section-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.tuto-features { list-style: none; padding: 0; margin-bottom: 14px; }
.tuto-features li { font-size: 11px; color: var(--text-muted); padding: 2px 0; display: flex; align-items: center; gap: 7px; }
.tuto-features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 6px rgba(var(--accent-rgb),0.6); }
.tuto-start-btn { width: 100%; justify-content: center; }

/* ===== Notifications ===== */
.notification {
    position: fixed; top: 22px; right: 22px;
    padding: 12px 18px; border-radius: var(--radius);
    font-size: 13px; font-weight: 500; z-index: 9000;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--neon-glow-sm), 0 10px 30px rgba(0,0,0,0.5);
    max-width: 320px; display: flex; align-items: center; gap: 9px;
    opacity: 0; transform: translateX(28px) scale(0.97);
    transition: opacity 0.28s ease, transform 0.28s ease, top 0.22s ease;
    pointer-events: none;
}
.notification.visible { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.notification.success { background: rgba(var(--success-rgb),0.16); border-color: rgba(var(--success-rgb),0.5); color: var(--success); }
.notification.error   { background: rgba(var(--danger-rgb),0.16);  border-color: rgba(var(--danger-rgb),0.5);  color: var(--danger); }
.notification.warning { background: rgba(var(--warning-rgb),0.16); border-color: rgba(var(--warning-rgb),0.5); color: var(--warning); }
.notification.info    { background: rgba(56,189,248,0.16); border-color: rgba(56,189,248,0.5); color: #38bdf8; }

/* ===== Responsive ===== */
@media (max-width: 960px) { .cashier-grid, .crafting-container { grid-template-columns: 1fr; } .charts-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .sidebar { width: 60px; }
    .logo h1, .logo p, .menu-item span, .user-details, .theme-picker-label, .theme-picker, .logout-btn { display: none; }
    .menu-item { justify-content: center; padding: 10px; gap: 0; }
    .content { padding: 18px 14px; }
    .page-header h2 { font-size: 20px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .heatmap-grid, .heatmap-months-labels { grid-template-columns: 24px repeat(53, 11px); }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--glass-border); }

/* ===== KPI Delta badge ===== */
.kpi-delta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; margin-top: 7px;
    transition: all 0.3s;
}
.kpi-delta.up   { background: rgba(var(--success-rgb),0.12); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.3); }
.kpi-delta.down { background: rgba(var(--danger-rgb),0.12);  color: var(--danger);  border: 1px solid rgba(var(--danger-rgb),0.3); }
.kpi-delta.flat { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }

/* ===== FAB — Bouton action rapide ===== */
.fab-container {
    position: fixed; bottom: 28px; right: 28px; z-index: 1500;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.fab-btn {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #000; border: none; font-size: 20px; cursor: pointer;
    box-shadow: var(--neon-glow), 0 6px 20px rgba(var(--accent-rgb),0.4);
    transition: all 0.25s; display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}
.fab-btn:hover { transform: scale(1.1); box-shadow: var(--neon-glow), 0 10px 30px rgba(var(--accent-rgb),0.6); }
.fab-menu { display: none; flex-direction: column; gap: 8px; align-items: flex-end; }
.fab-menu.active { display: flex; }
.fab-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border: none; border-radius: var(--radius);
    background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-hover);
    color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    box-shadow: var(--neon-glow-sm), 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.2s;
    animation: fab-item-in 0.18s ease both;
}
.fab-item:nth-child(1) { animation-delay: 0ms; }
.fab-item:nth-child(2) { animation-delay: 40ms; }
.fab-item:nth-child(3) { animation-delay: 80ms; }
.fab-item:hover { background: rgba(var(--accent-rgb),0.12); color: var(--accent); transform: translateX(-4px); }
.fab-item i { color: var(--accent); width: 16px; text-align: center; }
@keyframes fab-item-in {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Notification Bell ===== */
.notif-bell-btn {
    position: fixed !important; top: 12px !important; left: 50% !important; transform: translateX(-50%); z-index: 9500 !important;
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-muted);
    transition: all 0.2s; user-select: none;
}
.notif-bell-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--neon-glow-sm); }
.notif-bell-btn.has-alerts { color: var(--warning); border-color: rgba(var(--warning-rgb),0.5); box-shadow: 0 0 10px rgba(var(--warning-rgb),0.2); animation: bell-ring 3s ease-in-out infinite; }
@keyframes bell-ring {
    0%,85%,100% { transform: translateX(-50%) rotate(0deg); }
    88%          { transform: translateX(-50%) rotate(14deg); }
    91%          { transform: translateX(-50%) rotate(-12deg); }
    94%          { transform: translateX(-50%) rotate(8deg); }
    97%          { transform: translateX(-50%) rotate(-5deg); }
}
.notif-badge {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 8px rgba(var(--danger-rgb),0.5);
}
.notif-panel {
    display: none; position: fixed; top: 65px; left: 50%; transform: translateX(-50%); z-index: 9499;
    width: 360px; max-width: calc(100vw - 40px);
    background: var(--bg-surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-hover); border-radius: var(--radius-lg);
    box-shadow: var(--neon-glow-sm), 0 20px 50px rgba(0,0,0,0.6);
    overflow: hidden; animation: slide-fade-in 0.25s ease;
}
.notif-panel.active { display: block; }
@keyframes slide-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.notif-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08), transparent);
}
.notif-panel-header h4 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0; }
.notif-panel-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 0; line-height: 1;
    transition: color 0.2s;
}
.notif-panel-close:hover { color: var(--danger); }
.notif-panel-body { overflow-y: auto; max-height: 340px; }
.notif-panel-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13px; }
.notif-item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.12s; align-items: flex-start;
}
.notif-item:hover { background: rgba(var(--accent-rgb),0.05); }
.notif-item-icon {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.notif-item-icon.danger  { background: rgba(var(--danger-rgb),0.12);  color: var(--danger); }
.notif-item-icon.warning { background: rgba(var(--warning-rgb),0.12); color: var(--warning); }
.notif-item-icon.info    { background: rgba(56,189,248,0.12);          color: var(--info); }
.notif-item-label  { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-item-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== Settings page ===== */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 18px; }
.settings-card {
    background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    padding: 22px; display: flex; gap: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-card:hover { border-color: var(--glass-border-hover); box-shadow: var(--neon-glow-sm); }
.settings-card-icon {
    width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-2-rgb),0.08));
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--accent); box-shadow: var(--neon-glow-sm);
}
.settings-card-body { flex: 1; min-width: 0; }
.settings-card-body h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.settings-card-body p  { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.settings-label { font-size: 13px; color: var(--text-muted); }
.settings-info-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-muted);
    padding: 6px 0; border-bottom: 1px solid var(--border);
}
.settings-info-row span:last-child { color: var(--accent); font-weight: 600; }

/* Toggle switch */
.toggle-switch { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute; inset: 0;
    background: var(--border-strong); border-radius: 22px; cursor: pointer;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; left: 3px; top: 3px;
    background: var(--text-muted); border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: rgba(var(--success-rgb),0.3); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--success); }

/* Settings theme picker */
.settings-theme-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.settings-theme-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; padding: 8px; border-radius: var(--radius);
    border: 2px solid transparent; transition: all 0.2s;
}
.settings-theme-option:hover { border-color: var(--glass-border); background: var(--bg-card-hover); }
.settings-theme-option.active { border-color: var(--accent); box-shadow: var(--neon-glow-sm); }
.settings-theme-option span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.settings-theme-preview { width: 52px; height: 30px; border-radius: 6px; }
.violet-preview  { background: linear-gradient(135deg,#8b5cf6,#00d4ff); }
.gold-preview    { background: linear-gradient(135deg,#d4af37,#fbbf24); }
.cyber-preview   { background: linear-gradient(135deg,#00ff88,#a3e635); }
.crimson-preview { background: linear-gradient(135deg,#ff2d55,#ff6b9d); }
.ocean-preview   { background: linear-gradient(135deg,#0ea5e9,#06b6d4); }
.rose-preview    { background: linear-gradient(135deg,#ec4899,#a855f7); }
.amber-preview   { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.arctic-preview  { background: linear-gradient(135deg,#7dd3fc,#bae6fd); }
.forest-preview  { background: linear-gradient(135deg,#4ade80,#86efac); }
.midnight-preview{ background: linear-gradient(135deg,#6366f1,#818cf8); }
.neon-city-preview { background: linear-gradient(135deg,#ff6600,#ffcc00); }
.lava-preview    { background: linear-gradient(135deg,#ff4500,#ff6b35); }
.sakura-preview  { background: linear-gradient(135deg,#ff91b0,#ffb7d5); }
.dusk-preview    { background: linear-gradient(135deg,#fb923c,#c084fc); }
.slate-preview   { background: linear-gradient(135deg,#475569,#60a5fa); }
.copper-preview  { background: linear-gradient(135deg,#b87333,#e8a045); }
.jade-preview    { background: linear-gradient(135deg,#00b894,#00cec9); }
.cobalt-preview  { background: linear-gradient(135deg,#1e90ff,#00bfff); }
.lavender-preview{ background: linear-gradient(135deg,#c4b5fd,#f0abfc); }
.toxic-preview   { background: linear-gradient(135deg,#84cc16,#facc15); }
.aurora-preview  { background: linear-gradient(135deg,#2dd4bf,#818cf8); }
.ember-preview   { background: linear-gradient(135deg,#fb923c,#fde68a); }
.snowflake-preview { background: linear-gradient(135deg,#c4b5fd,#bae6fd); }
.parchment-preview { background: linear-gradient(135deg,#f5e6ca,#d97706); }
.daybreak-preview  { background: linear-gradient(135deg,#dff0fb,#0891b2); }
.blossom-preview   { background: linear-gradient(135deg,#ffe0ef,#be185d); }
.twilight-preview  { background: linear-gradient(135deg,#221f42,#a78bfa); }
.gunmetal-preview  { background: linear-gradient(135deg,#252d35,#58a6ff); }
.mocha-preview     { background: linear-gradient(135deg,#281c0c,#d4a849); }
.denim-preview     { background: linear-gradient(135deg,#152436,#60a5fa); }

/* Thèmes clairs : corrections spécifiques */
[data-theme="snowflake"] .stats-card,
[data-theme="parchment"] .stats-card,
[data-theme="daybreak"] .stats-card,
[data-theme="blossom"] .stats-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="snowflake"] .sidebar,
[data-theme="parchment"] .sidebar,
[data-theme="daybreak"] .sidebar,
[data-theme="blossom"] .sidebar {
    border-right-color: var(--glass-border);
    background: var(--bg-surface);
}
[data-theme="snowflake"] body::before,
[data-theme="snowflake"] body::after,
[data-theme="parchment"] body::before,
[data-theme="parchment"] body::after,
[data-theme="daybreak"] body::before,
[data-theme="daybreak"] body::after,
[data-theme="blossom"] body::before,
[data-theme="blossom"] body::after {
    opacity: 0.5;
}
[data-theme="snowflake"] .modal-content,
[data-theme="parchment"] .modal-content,
[data-theme="daybreak"] .modal-content,
[data-theme="blossom"] .modal-content {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--glass-border);
}
[data-theme="snowflake"] .data-table th,
[data-theme="parchment"] .data-table th,
[data-theme="daybreak"] .data-table th,
[data-theme="blossom"] .data-table th {
    background: var(--bg-surface);
    color: var(--text-muted);
}
[data-theme="snowflake"] .data-table td,
[data-theme="parchment"] .data-table td,
[data-theme="daybreak"] .data-table td,
[data-theme="blossom"] .data-table td {
    border-color: var(--border);
}
[data-theme="snowflake"] .form-control,
[data-theme="parchment"] .form-control,
[data-theme="daybreak"] .form-control,
[data-theme="blossom"] .form-control {
    background: rgba(0,0,0,0.05);
    border-color: var(--glass-border);
    color: var(--text);
}
[data-theme="snowflake"] .form-control:focus,
[data-theme="parchment"] .form-control:focus,
[data-theme="daybreak"] .form-control:focus,
[data-theme="blossom"] .form-control:focus {
    background: rgba(0,0,0,0.07);
    border-color: var(--accent);
}
[data-theme="snowflake"] .table-container,
[data-theme="parchment"] .table-container,
[data-theme="daybreak"] .table-container,
[data-theme="blossom"] .table-container {
    background: var(--bg-surface);
    border-color: var(--glass-border);
}
[data-theme="snowflake"] select.form-control option,
[data-theme="parchment"] select.form-control option,
[data-theme="daybreak"] select.form-control option,
[data-theme="blossom"] select.form-control option {
    background: var(--bg-surface);
    color: var(--text);
}
.themes-page { padding: 4px 0 24px; }
.themes-searchbar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    flex-wrap: wrap;
}
.themes-searchbar input {
    flex: 1; min-width: 180px; max-width: 280px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    color: var(--text); border-radius: var(--radius-sm); padding: 8px 14px;
    font-size: 13px; outline: none; transition: border-color 0.2s;
}
.themes-searchbar input:focus { border-color: var(--accent); }
.theme-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chip {
    padding: 5px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
    background: var(--bg-card); color: var(--text-muted); cursor: pointer;
    font-size: 12px; transition: all 0.18s;
}
.theme-chip:hover { border-color: var(--accent); color: var(--text); }
.theme-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.theme-card {
    border-radius: var(--radius-lg); border: 2px solid transparent;
    overflow: hidden; cursor: pointer; transition: all 0.22s;
    background: var(--bg-card);
    display: flex; flex-direction: column;
}
.theme-card:hover { border-color: var(--glass-border-hover); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.theme-card.active { border-color: var(--accent); box-shadow: var(--neon-glow-sm); }
.theme-card.hidden { display: none; }

/* Mini UI preview inside each theme card */
.tc-preview {
    width: 100%; aspect-ratio: 16/9; display: flex;
    background: var(--p-bg, #050510); overflow: hidden; flex-shrink: 0;
    position: relative;
}
.tc-sidebar {
    width: 28%; background: var(--p-surf, #0d0d20);
    border-right: 1px solid var(--p-brdr, rgba(139,92,246,0.25));
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 6px;
}
.tc-logo-bar {
    width: 70%; height: 7px; border-radius: 4px;
    background: linear-gradient(90deg, var(--p-acc, #8b5cf6), var(--p-acc2, #00d4ff));
    margin-bottom: 4px;
}
.tc-nav {
    width: 80%; height: 5px; border-radius: 3px;
    background: var(--p-txt-f, rgba(255,255,255,0.08));
}
.tc-nav.active {
    background: rgba(var(--p-acc-rgb, 139,92,246), 0.35);
    box-shadow: 0 0 6px rgba(var(--p-acc-rgb, 139,92,246), 0.4);
}
.tc-body {
    flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 6px 7px;
    background: var(--p-bg, #050510);
}
.tc-topbar {
    height: 6px; border-radius: 3px; width: 55%;
    background: linear-gradient(90deg, var(--p-acc, #8b5cf6), var(--p-acc2, #00d4ff));
    opacity: 0.7;
}
.tc-stats { display: flex; gap: 4px; }
.tc-stat {
    flex: 1; height: 18px; border-radius: 4px;
    background: var(--p-surf, #0d0d20);
    border: 1px solid var(--p-brdr, rgba(139,92,246,0.25));
    position: relative; overflow: hidden;
}
.tc-stat::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 40%; height: 4px; border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--p-acc, #8b5cf6), var(--p-acc2, #00d4ff));
}
.tc-bottom-row { display: flex; gap: 4px; flex: 1; }
.tc-chart-block {
    flex: 3; background: var(--p-surf, #0d0d20);
    border-radius: 4px; border: 1px solid var(--p-brdr, rgba(139,92,246,0.25));
    padding: 4px; position: relative; overflow: hidden;
}
.tc-chart-line {
    position: absolute; bottom: 4px; left: 4px; right: 4px; height: 14px;
}
.tc-chart-line::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%, var(--p-acc, #8b5cf6) 20%,
        var(--p-acc2, #00d4ff) 50%, var(--p-acc, #8b5cf6) 80%, transparent 100%);
    opacity: 0.5; clip-path: polygon(0 100%, 10% 60%, 25% 30%, 40% 50%, 55% 20%, 70% 40%, 85% 10%, 100% 30%, 100% 100%);
}
.tc-table-block {
    flex: 2; background: var(--p-surf, #0d0d20);
    border-radius: 4px; border: 1px solid var(--p-brdr, rgba(139,92,246,0.25));
    padding: 3px 5px; display: flex; flex-direction: column; gap: 2px;
}
.tc-trow {
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.07);
}
.tc-trow.header {
    background: linear-gradient(90deg, var(--p-acc, #8b5cf6), transparent);
    opacity: 0.5;
}

/* Footer d'une theme-card */
.theme-card-footer {
    padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; background: var(--bg-card);
}
.theme-card-name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.theme-card-tag {
    font-size: 10px; padding: 2px 8px; border-radius: 999px;
    background: rgba(var(--accent-rgb),0.12); color: var(--accent); font-weight: 500;
}
.theme-card-check {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent; flex-shrink: 0;
    transition: all 0.2s;
}
.theme-card.active .theme-card-check {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.themes-count { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* Shortcuts list */
.settings-shortcuts { display: flex; flex-direction: column; gap: 7px; }
.shortcut-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.shortcut-label { color: var(--text-muted); margin-left: 4px; }
kbd {
    background: rgba(var(--accent-rgb),0.1); border: 1px solid var(--glass-border);
    border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700;
    color: var(--accent); font-family: inherit;
}

/* ===== Responsive — Tablette (≤ 1080px) ===== */
@media (max-width: 1080px) {
    .charts-grid { grid-template-columns: 1fr; }
    .stats-grid  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 860px) {
    .cashier-grid, .crafting-container { grid-template-columns: 1fr; }
    .pnl-table th, .pnl-table td { padding: 7px 9px; font-size: 11px; }
    .settings-grid { grid-template-columns: 1fr; }
    /* Bell & FAB adjustment */
    .notif-bell-btn { top: 12px; left: 50%; transform: translateX(-50%); right: auto; }
    .notif-panel { left: 50%; transform: translateX(-50%); right: auto; width: calc(100vw - 20px); max-width: 360px; }
    .fab-container { bottom: 18px; right: 16px; }
}

@media (max-width: 768px) {
    .sidebar { width: 60px; }
    .logo h1, .logo p, .menu-item span, .user-details, .theme-picker-label, .theme-picker, .logout-btn { display: none; }
    .menu-item { justify-content: center; padding: 10px; gap: 0; }
    .content { padding: 18px 14px; }
    .page-header { flex-direction: column; gap: 8px; padding-right: 48px; }
    .page-header .btn { width: 100%; justify-content: center; }
    .page-header h2 { font-size: 22px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    .table-container { border-radius: var(--radius); overflow-x: auto; }
    .table-header { flex-wrap: wrap; gap: 8px; }
    .table-actions { flex-wrap: wrap; }
    td, th { padding: 9px 10px; }
    .heatmap-grid, .heatmap-months-labels { grid-template-columns: 24px repeat(53, 11px); }
    .fab-btn { width: 48px; height: 48px; font-size: 18px; }
    .modal-content { padding: 22px 16px; max-height: 92vh; }
    .form-actions { flex-wrap: wrap; gap: 8px; }
    .kanban-board { grid-template-columns: 1fr 1fr; }
}

/* ===== Changelog ===== */
.changelog-entry {
    border-left: 3px solid rgba(var(--accent-rgb), 0.4);
    padding: 18px 0 18px 20px;
    margin-bottom: 6px;
    position: relative;
}
.changelog-entry::before {
    content: '';
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute; left: -7px; top: 22px;
}
.changelog-entry-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.changelog-version-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.changelog-version {
    font-size: 16px; font-weight: 800; color: var(--accent);
    font-family: monospace; letter-spacing: .03em;
}
.changelog-title { font-size: 14px; color: var(--text); font-weight: 600; }
.changelog-latest-badge {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),.25), rgba(var(--accent-rgb),.1));
    border: 1px solid rgba(var(--accent-rgb),.4);
    color: var(--accent); border-radius: 20px; padding: 2px 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.changelog-date { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.changelog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.changelog-item { display: flex; align-items: flex-start; gap: 10px; }
.changelog-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 6px; padding: 2px 8px; font-size: 10px;
    font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.changelog-item-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; padding-top: 1px; }

/* ===== 1-B Micro-animations ===== */
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.page-fade-in { animation: page-fade-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px) rotate(-1deg); }
    40%      { transform: translateX(5px)  rotate(1deg); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.btn-danger:active { animation: shake 0.35s ease; }

/* ===== 1-D Empty states ===== */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center; gap: 12px; color: var(--text-muted);
}
.empty-state-icon { font-size: 48px; opacity: 0.35; margin-bottom: 4px; }
.empty-state-title { font-size: 18px; font-weight: 700; color: var(--text); }
.empty-state-sub { font-size: 13px; color: var(--text-muted); max-width: 320px; line-height: 1.5; }
.empty-state .btn { margin-top: 8px; }

/* ===== 1-E Bottom bar mobile ===== */
.bottom-bar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
    background: var(--glass-bg); backdrop-filter: blur(18px);
    border-top: 1px solid var(--glass-border);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
}
.bottom-bar-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; color: var(--text-muted); cursor: pointer;
    padding: 5px 10px; border-radius: 10px; transition: color 0.18s, background 0.18s;
    border: none; background: none;
}
.bottom-bar-item i { font-size: 20px; }
.bottom-bar-item.active, .bottom-bar-item:hover { color: var(--accent); }
.bottom-bar-item.active i { filter: drop-shadow(0 0 6px var(--accent)); }

/* ===== 2-E Batch action toolbar ===== */
.batch-bar {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px;
}
.batch-bar.active { display: flex; }
.batch-bar-count { font-weight: 700; color: var(--accent); margin-right: 4px; }
input[type="checkbox"].row-cb { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.select-all-cb { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* ===== 4-A Kanban commandes ===== */
.kanban-toggle { margin-left: auto; }
.kanban-board {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; align-items: start;
}
.kanban-col {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 16px; min-height: 200px;
}
.kanban-col-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-weight: 700; font-size: 13px; padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}
.kanban-col-count {
    margin-left: auto; background: rgba(var(--accent-rgb),0.15);
    border-radius: 20px; padding: 2px 8px; font-size: 11px; color: var(--accent);
}
.kanban-card {
    background: rgba(var(--accent-rgb), 0.05); border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 12px; margin-bottom: 10px; cursor: grab;
    transition: box-shadow 0.18s, transform 0.15s;
}
.kanban-card:hover { box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.2); transform: translateY(-2px); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-col.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.kanban-card-title { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.kanban-card-meta { font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.kanban-card-amount { font-weight: 700; color: var(--accent); margin-top: 8px; }
.kanban-card-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ===== 4-B Calendrier transactions ===== */
.calendar-container { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 20px; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-nav h3 { font-size: 16px; font-weight: 700; }
.calendar-container .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-container .calendar-day-label {
    text-align: center; font-size: 11px; color: var(--text-muted); padding: 6px 4px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.calendar-container .calendar-day {
    min-height: 52px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--text);
    transition: background 0.15s, transform 0.12s, border-color 0.12s;
    border: 1px solid transparent; position: relative; padding: 4px 2px;
}
.calendar-container .calendar-day:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); transform: scale(1.06); }
.calendar-container .calendar-day.empty { cursor: default; opacity: 0; pointer-events: none; }
.calendar-container .calendar-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
/* Cellules avec ventes : fond coloré + texte toujours lisible */
.calendar-container .calendar-day.has-sales {
    background: rgba(var(--accent-rgb), var(--cal-opacity, 0.25));
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.calendar-container .calendar-day.has-sales.high   { --cal-opacity: 0.65; }
.calendar-container .calendar-day.has-sales.medium { --cal-opacity: 0.40; }
.calendar-container .calendar-day.has-sales.low    { --cal-opacity: 0.18; color: var(--text); text-shadow: none; }
/* Montant journalier */
.calendar-container .calendar-day .cal-dot {
    font-size: 9px; font-weight: 600; color: inherit; opacity: 0.9;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
/* Today quand il a aussi des ventes */
.calendar-container .calendar-day.has-sales.today {
    border-color: #fff; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.6);
}
.calendar-legend { display: flex; gap: 12px; align-items: center; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.cal-legend-box { width: 14px; height: 14px; border-radius: 4px; background: rgba(var(--accent-rgb), 0.4); }

/* ===== 3-E Budget P&L ===== */
.pnl-row-budget td { color: var(--info-color) !important; font-style: italic; }
.pnl-budget-input { width: 72px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 6px; padding: 3px 6px; color: var(--text); font-size: 11px; text-align: right; }
.pnl-budget-input:focus { border-color: var(--accent); outline: none; }
.pnl-row-budget-var td { font-size: 11px; }

/* ===== 4-D Dashboard drag & drop ===== */
.widget-draggable { cursor: grab; }
.widget-draggable.dragging { opacity: 0.55; cursor: grabbing; }
.widget-drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
.drag-handle {
    position: absolute; top: 10px; right: 10px; color: var(--text-muted);
    opacity: 0.4; font-size: 11px; cursor: grab;
}
.drag-handle:hover { opacity: 1; }

/* ===== 4-E Multi-mois P&L ===== */
.pnl-compare-table th.compare-month { background: rgba(var(--accent-rgb),0.12); }
.pnl-compare-table td.compare-month { background: rgba(var(--accent-rgb),0.05); }
.month-pill {
    display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--accent-rgb),0.15);
    border-radius: 20px; padding: 4px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid rgba(var(--accent-rgb),0.3);
}
.month-pill.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.month-pill.selected i { color: #fff; }

/* ===== responsive bottom-bar ===== */
@media (max-width: 860px) {
    .bottom-bar { display: flex; }
    .content { padding-bottom: 70px !important; }
    .fab-container { bottom: 80px; }
    .kanban-board { grid-template-columns: 1fr; }
}

/* ===== Plein écran caisse ===== */
.cashier-fullscreen .content { padding: 16px; }
.cashier-fullscreen .sidebar { display: none; }
.cashier-fullscreen .notif-bell-btn { display: none; }
.cashier-fullscreen .fab-container { display: none; }
.cashier-fullscreen .bottom-bar { display: none; }
.cashier-fullscreen .cashier-grid { height: calc(100vh - 80px); }

/* ===== Responsive — Mobile S (≤ 480px) ===== */
@media (max-width: 480px) {
    body { font-size: 13px; }
    .sidebar { display: none; }
    .content { padding: 12px 10px; padding-bottom: 70px; }
    .page-header { padding-right: 0; flex-direction: column; gap: 10px; align-items: flex-start; }
    .page-header h2 { font-size: 18px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px 14px; }
    .stat-card .value { font-size: 18px; }
    .charts-grid { grid-template-columns: 1fr; }
    .table-container { border-radius: var(--radius-sm); overflow-x: auto; }
    td, th { padding: 7px 8px; font-size: 11px; }
    .btn { padding: 7px 13px; font-size: 12px; }
    .modal-content { padding: 20px 16px; max-height: 92vh; }
    .cashier-grid { grid-template-columns: 1fr; }
    .kanban-board { grid-template-columns: 1fr; }
    .bottom-bar { display: flex; }
    .fab-container { bottom: 70px; }
    .notif-bell-btn { top: 10px; left: 50%; transform: translateX(-50%); right: auto; }
    .filter-bar { padding: 10px 12px; }
    .filter-bar .form-group { min-width: 130px; }
    .pnl-table th, .pnl-table td { padding: 6px 8px; font-size: 10px; }
    
    /* Vues calendrier responsive */
    .week-view { grid-template-columns: 1fr; }
    .calendar-day { min-height: 60px; }
    .btn-group { width: 100%; }
    .btn-group .btn { flex: 1; font-size: 11px; }
}

/* ===== Tooltips icônes [data-tip] ===== */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    background: var(--bg-surface);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    z-index: 9000;
    transition: opacity 0.15s, transform 0.15s;
    transform: translateX(-50%) translateY(4px);
}
[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--glass-border-hover);
    pointer-events: none;
    opacity: 0;
    z-index: 9001;
    transition: opacity 0.15s;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
    opacity: 1;
}

/* ===== Calendrier d'Événements ===== */
.calendar-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
    padding-bottom: 15px; border-bottom: 1px solid var(--border);
}
.calendar-header h3 {
    flex: 1; text-align: center; font-size: 18px; font-weight: 700;
    color: var(--text); margin: 0;
}
/* Calendrier événements uniquement (pas dans .calendar-container) */
.card > .calendar-grid {
    display: flex; flex-direction: column; gap: 2px;
}
.card > .calendar-grid .calendar-days-header {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    margin-bottom: 2px;
}
.card > .calendar-grid .calendar-day-name {
    text-align: center; font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase;
    padding: 8px; background: var(--bg-card);
    border-radius: var(--radius-sm);
}
.card > .calendar-grid .calendar-days-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.card > .calendar-grid .calendar-day {
    min-height: 80px; background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 6px;
    position: relative; cursor: pointer;
    transition: all 0.2s;
}
.card > .calendar-grid .calendar-day:hover {
    border-color: var(--accent); background: var(--bg-card-hover);
}
.card > .calendar-grid .calendar-day-empty {
    background: transparent; border-color: transparent; cursor: default;
}
.card > .calendar-grid .calendar-day-empty:hover {
    background: transparent; border-color: transparent;
}
.card > .calendar-grid .calendar-day-today {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}
.card > .calendar-grid .calendar-day-num {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 4px;
}
.card > .calendar-grid .calendar-day-today .calendar-day-num {
    color: var(--accent);
}
.card > .calendar-grid .calendar-event {
    font-size: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #000; padding: 3px 6px; border-radius: 4px;
    margin-bottom: 3px; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card > .calendar-grid .calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}
.card > .calendar-grid .calendar-event-time {
    font-weight: 700; margin-right: 4px;
}
.card > .calendar-grid .calendar-event-name {
    font-weight: 500;
}
.card > .calendar-grid .calendar-day-add {
    position: absolute; bottom: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--accent); font-size: 14px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.card > .calendar-grid .calendar-day:hover .calendar-day-add {
    display: flex;
}
.card > .calendar-grid .calendar-day-add:hover {
    background: var(--accent); color: #000;
    transform: scale(1.15);
}
.upcoming-events {
    display: flex; flex-direction: column; gap: 10px;
}
.upcoming-event-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 12px;
    cursor: pointer; transition: all 0.2s;
}
.upcoming-event-item:hover {
    border-color: var(--accent); background: var(--bg-card-hover);
    transform: translateX(3px);
}
.upcoming-event-badge {
    font-size: 11px; font-weight: 700; padding: 4px 10px;
    border-radius: 12px; white-space: nowrap;
}
.upcoming-event-badge.badge-danger {
    background: rgba(var(--danger-rgb), 0.15); color: var(--danger);
    border: 1px solid rgba(var(--danger-rgb), 0.4);
}
.upcoming-event-badge.badge-warning {
    background: rgba(var(--warning-rgb), 0.15); color: var(--warning);
    border: 1px solid rgba(var(--warning-rgb), 0.4);
}
.upcoming-event-badge.badge-info {
    background: rgba(var(--info-rgb), 0.15); color: var(--info);
    border: 1px solid rgba(var(--info-rgb), 0.4);
}
.upcoming-event-info {
    flex: 1;
}
.upcoming-event-name {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 3px;
}
.upcoming-event-details {
    font-size: 12px; color: var(--text-muted);
}

/* ===== Vues semaine et jour (calendrier événements) ===== */
.week-view {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.week-day {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 10px;
    min-height: 300px; display: flex; flex-direction: column;
}
.week-day-today {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: var(--accent);
}
.week-day-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.week-day-name {
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase;
}
.week-day-num {
    font-size: 20px; font-weight: 800; color: var(--accent);
}
.week-day-events {
    flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.week-event {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-sm); padding: 8px;
    cursor: pointer; transition: all 0.2s;
}
.week-event:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.15));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.week-event-time {
    font-size: 11px; font-weight: 700; color: var(--accent);
    margin-bottom: 3px;
}
.week-event-name {
    font-size: 13px; font-weight: 600; color: var(--text);
}
.week-event-company {
    font-size: 11px; color: var(--text-muted); margin-top: 3px;
}
.week-add-event {
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px dashed rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-sm); padding: 6px;
    color: var(--accent); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    margin-top: auto;
}
.week-add-event:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-style: solid;
}

.day-view {
    max-width: 800px; margin: 0 auto;
}
.day-no-events {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted);
}
.day-no-events i {
    font-size: 48px; margin-bottom: 20px; opacity: 0.3;
}
.day-no-events p {
    font-size: 16px; margin-bottom: 20px;
}
.day-event {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius); padding: 16px;
    margin-bottom: 12px; cursor: pointer;
    transition: all 0.2s;
}
.day-event:hover {
    border-color: var(--accent); background: var(--bg-card-hover);
    transform: translateX(5px);
}
.day-event-time {
    font-size: 13px; font-weight: 700; color: var(--accent);
    margin-bottom: 8px;
}
.day-event-time i {
    margin-right: 6px;
}
.day-event-name {
    font-size: 18px; font-weight: 700; color: var(--text);
    margin-bottom: 8px;
}
.day-event-company {
    font-size: 13px; color: var(--text-muted);
    margin-bottom: 6px;
}
.day-event-company i {
    margin-right: 6px;
}
.day-event-description {
    font-size: 14px; color: var(--text);
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
}
.day-event-employees {
    font-size: 12px; color: var(--text-muted);
    margin-top: 8px;
}
.day-event-employees i {
    margin-right: 6px;
}

.btn-group {
    display: flex; gap: 0; border-radius: var(--radius);
    overflow: hidden;
}
.btn-group .btn {
    border-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.btn-group .btn:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
.btn-group .btn:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-right: none;
}

/* ===== Audit log & Login history ===== */
.audit-log-list { max-height: 460px; overflow-y: auto; }
.audit-date-group { margin-bottom: 10px; }
.audit-date-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 6px 0 3px; border-bottom: 1px solid var(--border); margin-bottom: 2px; font-weight: 700; }
.audit-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: var(--radius-sm); font-size: 12px; flex-wrap: wrap; transition: background 0.1s; }
.audit-row:hover { background: rgba(var(--accent-rgb),0.05); }
.audit-action-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 20px; border: 1px solid; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.audit-user { font-weight: 600; min-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-entity { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.audit-details { color: var(--text-muted); font-size: 11px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.audit-ip { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.audit-time { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* Notes indicator in table rows */
.notes-indicator { cursor: help; }

/* ===== ANALYTICS PAGE ===== */
.analytics-year-bar { display:flex; align-items:center; gap:10px; padding:8px 0; margin-bottom:16px; flex-wrap:wrap; }
.analytics-compare-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:900px) { .analytics-compare-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .analytics-compare-grid { grid-template-columns:1fr 1fr; } }
.compare-kpi-card { padding:18px 14px; text-align:center; border-radius:12px; background:var(--glass-bg); border:1px solid var(--glass-border); transition:transform .15s; }
.compare-kpi-card:hover { transform:translateY(-2px); }
.compare-label  { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.compare-value  { font-size:22px; font-weight:800; color:var(--text); margin:4px 0; }
.compare-month  { font-size:11px; color:var(--text-muted); }
.compare-sub    { font-size:12px; font-weight:600; margin-top:4px; }
.analytics-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:768px) { .analytics-charts-row { grid-template-columns:1fr; } }
.analytics-card { padding:18px; overflow:hidden; }
.analytics-card-title { font-weight:700; font-size:14px; margin-bottom:14px; color:var(--text); }
.analytics-card-title i { color:var(--accent); margin-right:6px; }
.top-item { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
.top-item:last-child { border-bottom:none; }
.top-rank  { width:22px; font-weight:800; font-size:13px; color:var(--accent); text-align:center; flex-shrink:0; padding-top:1px; }
.top-name  { flex:1; min-width:0; font-size:13px; }
.top-name div:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-bar-wrap { background:rgba(255,255,255,.07); border-radius:3px; height:4px; margin-top:4px; }
.top-bar  { height:4px; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.top-value { font-weight:700; font-size:12px; color:var(--text-muted); white-space:nowrap; padding-top:1px; }

/* ===== CHAT PANEL ===== */
.chat-bell-btn {
    position:fixed; bottom:20px; right:76px; z-index:1009;
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--glass-border);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.25);
    transition:all .2s;
}
.chat-bell-btn:hover { transform:scale(1.08); background:rgba(var(--accent-rgb),.2); }
.chat-bell-btn .chat-badge {
    position:absolute; top:-4px; right:-4px; min-width:18px; height:18px;
    border-radius:9px; background:var(--danger); color:#fff; font-size:10px;
    font-weight:700; display:none; align-items:center; justify-content:center; padding:0 4px;
}
.chat-bell-btn .chat-badge.visible { display:flex; }

.chat-panel {
    position:fixed; bottom:0; right:0; z-index:1010;
    width:320px; height:460px; display:flex; flex-direction:column;
    background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--glass-border); border-bottom:none;
    border-radius:16px 16px 0 0; box-shadow:0 -4px 32px rgba(0,0,0,.25);
    transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    pointer-events:none; opacity:0;
}
.chat-panel.chat-open { transform:translateY(0); pointer-events:all; opacity:1; }

.chat-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--glass-border); flex-shrink:0;
    font-weight:700; font-size:14px;
}
.chat-panel-header .chat-close-btn {
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    font-size:16px; padding:2px 6px; border-radius:6px; transition:all .15s;
}
.chat-panel-header .chat-close-btn:hover { color:var(--text); background:rgba(255,255,255,.08); }

.chat-messages {
    flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px;
    scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:2px; }

.chat-msg  { display:flex; gap:6px; align-items:flex-end; max-width:100%; }
.chat-mine { flex-direction:row-reverse; }

.chat-bubble {
    max-width:78%; background:var(--glass-bg); border:1px solid var(--glass-border);
    border-radius:14px 14px 14px 4px; padding:8px 10px; position:relative;
    word-break:break-word;
}
.chat-mine .chat-bubble { border-radius:14px 14px 4px 14px; background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.28); }

.chat-author { font-size:10px; color:var(--accent); font-weight:700; margin-bottom:2px; }
.chat-text   { font-size:13px; color:var(--text); white-space:pre-wrap; line-height:1.45; }
.chat-time   { font-size:10px; color:var(--text-muted); text-align:right; margin-top:2px; }

.chat-del-btn {
    visibility:hidden; opacity:0; background:none; border:none; cursor:pointer;
    color:var(--text-muted); font-size:11px; padding:2px 4px; border-radius:4px;
    transition:all .15s; flex-shrink:0; align-self:flex-start; margin-top:8px;
}
.chat-del-btn:hover { color:var(--danger); }
.chat-msg:hover .chat-del-btn { visibility:visible; opacity:1; }

.chat-input-bar {
    display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--glass-border);
    align-items:flex-end; flex-shrink:0;
}
.chat-input-field {
    flex:1; resize:none; max-height:80px; font-size:13px; min-height:36px;
    background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
    border-radius:10px; padding:8px 10px; color:var(--text); font-family:inherit;
    transition:border-color .15s;
}
.chat-input-field:focus { outline:none; border-color:var(--accent); }
.chat-empty {
    text-align:center; color:var(--text-muted); padding:24px; font-size:13px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
}

/* ===== Print (Clôture de journée) ===== */
@media print {
    .sidebar, .fab-container, .notif-bell-btn, .notif-panel,
    #search-overlay, .page-header .btn, .btn-secondary, .btn-primary,
    .theme-picker-wrapper, .sidebar-toggle { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    body::before, body::after { display: none !important; }
    .content { padding: 10mm; }
    .stat-card { background: #f9f9f9 !important; border: 1px solid #ddd !important; color: #000 !important; }
    .stat-card .value, .stat-card h3 { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: none !important; }
    .modal { position: static !important; background: none !important; display: block !important; }
    .modal-content { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; max-height: none !important; }
    .modal-content h3 { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; }
    .close-modal { display: none !important; }
}