/* ============================================
   CSS VARIABLES — THEMING
   ============================================ */
:root {
  --bg-app: #faf9f6;
  --bg-card: #ffffff;
  --bg-sidebar: #1a1a2e;
  --bg-topbar: #ffffff;
  --bg-input: #faf9f6;
  --border: #e8e5dd;
  --border-light: #f0ede6;
  --border-hover: #c7d2fe;
  --text-primary: #1a1a2e;
  --text-secondary: #52504b;
  --text-muted: #94918a;
  --text-hint: #c4c1b9;
  --text-sidebar: #6b6980;
  --text-sidebar-active: #ffffff;
  --font-main: 'Outfit', system-ui, sans-serif;
  --font-dyslexia: 'OpenDyslexic', sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 20px;
  /* Color accents */
  --indigo: #6366f1; --indigo-bg: #eef2ff; --indigo-border: #c7d2fe; --indigo-text: #4f46e5;
  --rose: #f43f5e; --rose-bg: #fff1f2; --rose-border: #fecdd3; --rose-text: #e11d48;
  --green: #10b981; --green-bg: #ecfdf5; --green-border: #a7f3d0; --green-text: #059669;
  --amber: #f59e0b; --amber-bg: #fffbeb; --amber-border: #fde68a; --amber-text: #d97706;
  --sky: #0ea5e9; --sky-bg: #f0f9ff; --sky-border: #bae6fd; --sky-text: #0284c7;
  --violet: #8b5cf6; --violet-bg: #faf5ff; --violet-border: #e9d5ff; --violet-text: #7c3aed;
  --cyan: #06b6d4; --cyan-bg: #ecfeff; --cyan-border: #a5f3fc; --cyan-text: #0891b2;
  --pink: #ec4899; --pink-bg: #fdf2f8; --pink-border: #fbcfe8; --pink-text: #db2777;
}

/* Dark theme */
body.dark {
  --bg-app: #0f0f17;
  --bg-card: #18181f;
  --bg-sidebar: #111118;
  --bg-topbar: #14141c;
  --bg-input: #1e1e28;
  --border: #262630;
  --border-light: #1e1e28;
  --border-hover: rgba(99,102,241,.3);
  --text-primary: #e2e0d8;
  --text-secondary: #9a988f;
  --text-muted: #6b6980;
  --text-hint: #3a3847;
  --text-sidebar: #6b6980;
  --text-sidebar-active: #ffffff;
  --indigo-bg: rgba(99,102,241,.1); --indigo-border: rgba(99,102,241,.2); --indigo-text: #a5b4fc;
  --rose-bg: rgba(244,63,94,.1); --rose-border: rgba(244,63,94,.2); --rose-text: #fb7185;
  --green-bg: rgba(16,185,129,.1); --green-border: rgba(16,185,129,.2); --green-text: #34d399;
  --amber-bg: rgba(245,158,11,.1); --amber-border: rgba(245,158,11,.2); --amber-text: #fbbf24;
  --sky-bg: rgba(14,165,233,.1); --sky-border: rgba(14,165,233,.2); --sky-text: #38bdf8;
  --violet-bg: rgba(139,92,246,.1); --violet-border: rgba(139,92,246,.2); --violet-text: #a78bfa;
  --cyan-bg: rgba(6,182,212,.1); --cyan-border: rgba(6,182,212,.2); --cyan-text: #22d3ee;
  --pink-bg: rgba(236,72,153,.1); --pink-border: rgba(236,72,153,.2); --pink-text: #f472b6;
}

/* Dyslexia mode */
body.dyslexia { font-family: var(--font-dyslexia) !important; letter-spacing: .05em; }
body.dyslexia * { font-family: var(--font-dyslexia) !important; line-height: 1.8 !important; }
body.dyslexia .cd-r, body.dyslexia .tab, body.dyslexia .si { letter-spacing: .03em; }

/* Daltonien mode */
body.daltonien .pill-green, body.daltonien .sc-grn { --green-bg: var(--sky-bg); --green-border: var(--sky-border); --green-text: var(--sky-text); }
body.daltonien .pill-rose, body.daltonien .sc-ros { --rose-bg: var(--violet-bg); --rose-border: var(--violet-border); --rose-text: var(--violet-text); }

/* ============================================
   RESET & BASE
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); background: var(--bg-app); color: var(--text-primary); }
input, select, textarea, button { font-family: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ============================================
   LOGIN PAGE
   ============================================ */
#loginPage {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
}
.login-box { width: 340px; text-align: center; }
.login-logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
}
.login-logo svg { width: 30px; height: 30px; }
.login-title { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: 3px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; letter-spacing: 1px; margin-top: 4px; }
.login-input {
  width: 100%; padding: 13px 16px; background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; margin-bottom: 12px; outline: none;
  transition: border .15s;
}
.login-input:focus { border-color: var(--indigo); }
.login-input::placeholder { color: var(--text-hint); }
.login-btn {
  width: 100%; padding: 13px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; border-radius: var(--radius-md); font-size: 14px;
  font-weight: 700; cursor: pointer; margin-top: 6px; transition: opacity .15s;
}
.login-btn:hover { opacity: .9; }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }
.login-footer { font-size: 10px; color: var(--text-hint); margin-top: 24px; letter-spacing: 2px; }
.login-error { font-size: 12px; color: var(--rose-text); margin-top: 10px; display: none; }
.login-status { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ============================================
   APP SHELL
   ============================================ */
#appPage { display: none; min-height: 100vh; }
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 68px; background: var(--bg-sidebar); display: flex; flex-direction: column;
  align-items: center; padding: 14px 0; gap: 4px; flex-shrink: 0;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
}
.sidebar-logo {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #6366f1, #ec4899);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0;
}
.sidebar-logo svg { width: 18px; height: 18px; }
.si {
  width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex;
  align-items: center; justify-content: center; font-size: 17px;
  color: var(--text-sidebar); cursor: pointer; transition: all .15s; position: relative;
}
.si:hover { background: rgba(255,255,255,.06); color: #fff; }
.si.on { background: rgba(255,255,255,.1); color: var(--text-sidebar-active); }
.si.on::after {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.si[data-color="indigo"].on::after { background: var(--indigo); }
.si[data-color="rose"].on::after { background: var(--rose); }
.si[data-color="sky"].on::after { background: var(--sky); }
.si[data-color="amber"].on::after { background: var(--amber); }
.si[data-color="green"].on::after { background: var(--green); }
.si[data-color="cyan"].on::after { background: var(--cyan); }
.si[data-color="violet"].on::after { background: var(--violet); }
.si[data-color="pink"].on::after { background: var(--pink); }
.sidebar-sep { width: 28px; height: 1px; background: rgba(255,255,255,.08); margin: 6px 0; }
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; margin-top: auto; cursor: pointer;
}
.sidebar-tooltip {
  display: none; position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
  background: #1a1a2e; color: #fff; font-size: 11px; padding: 4px 10px;
  border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 60;
}
.si:hover .sidebar-tooltip { display: block; }

/* Main area */
.main-area { flex: 1; margin-left: 68px; display: flex; flex-direction: column; min-height: 100vh; }

/* Topbar */
.topbar {
  height: 52px; background: var(--bg-topbar); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.defcon-badge {
  font-size: 10px; padding: 3px 12px; border-radius: var(--radius-md);
  font-weight: 700; letter-spacing: .3px;
}
.defcon-5 { background: var(--green-bg); color: var(--green-text); }
.defcon-4 { background: var(--amber-bg); color: var(--amber-text); }
.defcon-3 { background: var(--amber-bg); color: var(--amber-text); }
.defcon-2 { background: var(--rose-bg); color: var(--rose-text); }
.defcon-1 { background: var(--rose-bg); color: var(--rose-text); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-ent { font-size: 12px; color: var(--text-muted); }
.topbar-ent b { color: var(--text-primary); }
.a11y-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--bg-card); display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; transition: all .15s; position: relative;
}
.a11y-btn:hover { border-color: var(--indigo); }

/* A11y Panel */
.a11y-panel {
  display: none; position: absolute; top: 42px; right: 0; width: 240px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.a11y-panel.open { display: block; }
.a11y-panel-title { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.a11y-row:last-child { border: none; }
.a11y-label { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.a11y-desc { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
.a11y-toggle {
  width: 36px; height: 20px; border-radius: 10px; background: var(--border);
  cursor: pointer; position: relative; transition: background .2s;
}
.a11y-toggle.on { background: var(--indigo); }
.a11y-toggle .knob {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px; transition: transform .2s;
}
.a11y-toggle.on .knob { transform: translateX(16px); }

/* Content area */
.content { flex: 1; padding: 20px; }
.page { display: none; }
.page.on { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   REUSABLE COMPONENTS
   ============================================ */
/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tab {
  padding: 9px 16px; font-size: 12px; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 600;
  transition: all .12s; white-space: nowrap; flex-shrink: 0;
}
.tab.on { color: var(--indigo-text); border-bottom-color: var(--indigo); }
.tab:hover { color: var(--text-primary); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/* Stat cards */
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.sc { border-radius: var(--radius-lg); padding: 14px; border: 1px solid; }
.sc-ind { background: var(--indigo-bg); border-color: var(--indigo-border); }
.sc-ind .sv { color: var(--indigo-text); }
.sc-ros { background: var(--rose-bg); border-color: var(--rose-border); }
.sc-ros .sv { color: var(--rose-text); }
.sc-grn { background: var(--green-bg); border-color: var(--green-border); }
.sc-grn .sv { color: var(--green-text); }
.sc-amb { background: var(--amber-bg); border-color: var(--amber-border); }
.sc-amb .sv { color: var(--amber-text); }
.sc-sky { background: var(--sky-bg); border-color: var(--sky-border); }
.sc-sky .sv { color: var(--sky-text); }
.sc-vio { background: var(--violet-bg); border-color: var(--violet-border); }
.sc-vio .sv { color: var(--violet-text); }
.sc-cya { background: var(--cyan-bg); border-color: var(--cyan-border); }
.sc-cya .sv { color: var(--cyan-text); }
.sl { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; }
.sv { font-size: 20px; font-weight: 800; }
.sv-s { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* Cards */
.cd { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px; }
.cd-h {
  padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
}
.cd-h .dot { width: 8px; height: 8px; border-radius: 50%; }
.cd-h .more { font-size: 11px; color: var(--indigo-text); cursor: pointer; font-weight: 600; }
.cd-h .more:hover { text-decoration: underline; }
.cd-h .btn-add {
  font-size: 11px; background: var(--indigo-bg); color: var(--indigo-text); border: none;
  padding: 4px 12px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer;
}
.cd-h .btn-add:hover { background: var(--indigo); color: #fff; }
.cd-r {
  padding: 9px 14px; display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light);
}
.cd-r:last-child { border: none; }

/* Pills */
.pill { font-size: 9px; padding: 3px 9px; border-radius: var(--radius-sm); font-weight: 700; }
.pill-ind { background: var(--indigo-bg); color: var(--indigo-text); }
.pill-ros { background: var(--rose-bg); color: var(--rose-text); }
.pill-grn { background: var(--green-bg); color: var(--green-text); }
.pill-amb { background: var(--amber-bg); color: var(--amber-text); }
.pill-sky { background: var(--sky-bg); color: var(--sky-text); }
.pill-vio { background: var(--violet-bg); color: var(--violet-text); }

/* ID Card */
.id-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 14px; display: flex; }
.id-left {
  width: 120px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
}
.id-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px;
  border: 2px solid rgba(255,255,255,.3);
}
.id-code { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.id-label { font-size: 8px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }
.id-right { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; }
.id-name { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.id-fl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.id-fv { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 1px; }
.id-fv.job { color: var(--indigo-text); }

/* Buttons */
.btn-primary {
  padding: 10px 20px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.btn-primary:hover { opacity: .9; }
.btn-secondary {
  padding: 10px 20px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--indigo); color: var(--indigo-text); }

/* Home Page Cards */
.id2 { display: flex; gap: 0; margin-bottom: 18px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; }
.id2-left {
  width: 160px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; position: relative;
}
.id2-left::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,.15); }
.id2-av {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px;
}
.id2-code { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 1.5px; }
.id2-label { font-size: 8px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 2.5px; margin-top: 3px; }
.id2-duty { margin-top: 10px; font-size: 9px; padding: 4px 12px; border-radius: 12px; font-weight: 700; }
.id2-duty.on { background: rgba(52,211,153,.2); color: #34d399; }
.id2-duty.off { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
.id2-right { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.id2-name { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; }
.id2-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.id2-field { padding: 10px 12px; background: var(--bg-input); border-radius: 10px; border: 1px solid var(--border-light); }
.id2-fl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.id2-fv { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.id2-fv.accent { color: var(--indigo-text); }

.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
.stat-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 16px; position: relative; overflow: hidden; transition: all .2s; cursor: pointer;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; }
.stat-card.s1::before { background: var(--indigo); }
.stat-card.s2::before { background: var(--green); }
.stat-card.s3::before { background: var(--amber); }
.stat-card.s4::before { background: var(--violet); }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 10px; }
.stat-card.s1 .stat-icon { background: var(--indigo-bg); }
.stat-card.s2 .stat-icon { background: var(--green-bg); }
.stat-card.s3 .stat-icon { background: var(--amber-bg); }
.stat-card.s4 .stat-icon { background: var(--violet-bg); }
.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 800; }
.stat-card.s1 .stat-value { color: var(--indigo-text); }
.stat-card.s2 .stat-value { color: var(--green-text); }
.stat-card.s3 .stat-value { color: var(--amber-text); }
.stat-card.s4 .stat-value { color: var(--violet-text); }
.stat-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.home-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.hcard { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 12px; }
.hcard-h { padding: 12px 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between; border-bottom: 1px solid var(--border-light); }
.hcard-h .icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.hcard-h .title { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.hcard-h .more { font-size: 11px; color: var(--indigo-text); font-weight: 600; cursor: pointer; }
.hcard-h .more:hover { text-decoration: underline; }
.hcard-item {
  padding: 10px 16px; border-bottom: 1px solid var(--border-light); display: flex;
  align-items: center; gap: 10px; cursor: pointer; transition: background .1s;
}
.hcard-item:hover { background: var(--bg-input); }
.hcard-item:last-child { border: none; }
.hcard-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hcard-text { flex: 1; font-size: 12px; color: var(--text-secondary); }
.hcard-text b { color: var(--text-primary); }
.hcard-pill { font-size: 9px; padding: 3px 9px; border-radius: 8px; font-weight: 700; }
.health-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px 16px; }
.health-item { text-align: center; padding: 8px; background: var(--bg-input); border-radius: 8px; }
.health-item .val { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.health-item .lab { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.rdv-empty { padding: 20px 16px; text-align: center; color: var(--text-hint); }
.rdv-empty .ico { font-size: 24px; margin-bottom: 4px; }
@media (max-width: 768px) {
  .id2 { flex-direction: column; }
  .id2-left { width: 100%; flex-direction: row; gap: 12px; padding: 14px; }
  .id2-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .home-grid { grid-template-columns: 1fr; }
}

/* Improved Buttons */
.btn-sm{padding:6px 14px;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.btn-sm:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-indigo{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.btn-rose{background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff}
.btn-amber{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.btn-outline2{background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-secondary);padding:6px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer}
.btn-outline2:hover{border-color:var(--indigo);color:var(--indigo-text)}

/* Employee Detail */
.emp-detail{background:var(--bg-card);border-radius:16px;border:1.5px solid var(--border);overflow:hidden}
.emp-detail-head{padding:20px;display:flex;gap:16px;border-bottom:1px solid var(--border-light);background:linear-gradient(135deg,rgba(99,102,241,.03),rgba(139,92,246,.03))}
.emp-detail-name{font-size:18px;font-weight:800;color:var(--text-primary);margin-bottom:3px}
.emp-detail-sub{font-size:11px;color:var(--text-muted)}
.emp-detail-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.emp-detail-badge{font-size:10px;padding:3px 12px;border-radius:8px;font-weight:700}
.detail-tabs{display:flex;border-bottom:1px solid var(--border-light);padding:0 20px;background:var(--bg-input)}
.dtab{padding:10px 14px;font-size:11px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.dtab.on{color:var(--indigo-text);border-bottom-color:var(--indigo)}
.info-section{padding:16px 20px}
.info-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-field{padding:10px 12px;background:var(--bg-input);border-radius:10px;border:1px solid var(--border-light)}
.info-fl{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.info-fv{font-size:13px;font-weight:600;color:var(--text-primary)}
.info-fv.mono{font-family:monospace;font-size:12px;color:var(--indigo-text)}
.timeline-item{display:flex;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border-light)}
.timeline-item:last-child{border:none}
.timeline-dot{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.timeline-content{flex:1}
.timeline-title{font-size:12px;font-weight:600;color:var(--text-primary)}
.timeline-desc{font-size:10px;color:var(--text-muted);margin-top:1px}
.timeline-date{font-size:10px;color:var(--text-hint);min-width:50px;text-align:right;align-self:center}
.doc-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 20px}
.doc-mini-item{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg-input);border-radius:8px;border:1px solid var(--border-light);cursor:pointer;transition:all .12s}
.doc-mini-item:hover{border-color:var(--indigo-border)}
.archive-card{background:var(--bg-card);border:1.5px solid var(--rose-border);border-radius:14px;padding:16px;display:flex;gap:14px;opacity:.65;position:relative;margin-bottom:10px}
.archive-card::before{content:'ARCHIVÉ';position:absolute;top:10px;right:10px;font-size:8px;padding:2px 8px;border-radius:6px;background:var(--rose-bg);color:var(--rose-text);font-weight:700}

/* Employee Cards */
.emp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.emp-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px;display:flex;gap:14px;transition:all .2s;position:relative}
.emp-card:hover{border-color:var(--green-border);transform:translateY(-1px)}
.emp-av2{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
.emp-info2{flex:1;min-width:0}
.emp-name2{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.emp-id2{font-size:10px;color:var(--text-muted);font-family:monospace}
.emp-role2{display:inline-block;font-size:10px;padding:3px 10px;border-radius:8px;font-weight:700;margin-top:6px}
.emp-meta2{display:flex;gap:12px;margin-top:8px;font-size:10px;color:var(--text-muted)}
.emp-actions2{display:flex;gap:4px;margin-top:8px}
.emp-act2{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all .12s}
.emp-act2:hover{border-color:var(--indigo);background:var(--indigo-bg)}
.emp-act2.danger:hover{border-color:var(--rose);background:var(--rose-bg)}
.emp-status2{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%}
.emp-status2.on{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.4)}
.emp-status2.off{background:var(--border)}
.emp-add2{background:var(--bg-card);border:2px dashed var(--border);border-radius:var(--radius-xl);padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;min-height:120px;transition:all .2s}
.emp-add2:hover{border-color:var(--green);background:var(--green-bg)}

/* Grade Cards */
.grade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grade-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:all .2s}
.grade-card:hover{border-color:var(--indigo-border)}
.grade-head{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-light)}
.grade-level{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
.grade-details{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grade-detail .lab{color:var(--text-muted);font-size:9px;text-transform:uppercase;letter-spacing:.3px}
.grade-detail .val{font-weight:600;color:var(--text-primary);font-size:11px;margin-top:1px}
.grade-detail .val.money{color:var(--green-text)}
.grade-perms{padding:8px 16px;border-top:1px solid var(--border-light);display:flex;gap:4px;flex-wrap:wrap}
.grade-perm{font-size:9px;padding:2px 8px;border-radius:6px;font-weight:600;background:var(--green-bg);color:var(--green-text)}
.grade-perm.off{background:var(--bg-input);color:var(--text-hint)}

/* Planning */
.planning-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.plan-day{background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;padding:10px;text-align:center;min-height:120px}
.plan-day.today{border-color:var(--indigo);background:var(--indigo-bg)}
.plan-day-name{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.plan-day-num{font-size:18px;font-weight:800;color:var(--text-primary);margin-bottom:8px}
.plan-day.today .plan-day-name,.plan-day.today .plan-day-num{color:var(--indigo-text)}
.plan-slot{font-size:9px;padding:4px 6px;border-radius:6px;margin-bottom:3px;font-weight:600;text-align:left}

/* RH Cards */
.rh-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rh-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}
.rh-head{padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-light)}

/* Note Cards */
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.note-card{border-radius:var(--radius-xl);padding:16px;cursor:pointer;transition:all .2s;position:relative;min-height:140px}
.note-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.note-card.n1{background:var(--amber-bg);border:1.5px solid var(--amber-border)}
.note-card.n2{background:var(--indigo-bg);border:1.5px solid var(--indigo-border)}
.note-card.n3{background:var(--green-bg);border:1.5px solid var(--green-border)}
.note-card.n4{background:var(--violet-bg);border:1.5px solid var(--violet-border)}
.note-card.n5{background:var(--rose-bg);border:1.5px solid var(--rose-border)}
.note-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.note-body{font-size:11px;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.note-footer{position:absolute;bottom:10px;left:16px;right:16px;display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted)}

/* Stock Cards */
.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stock-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px;transition:all .15s;position:relative;overflow:hidden}
.stock-card:hover{border-color:var(--cyan-border)}
.stock-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0}
.stock-card.sok::before{background:var(--green)}
.stock-card.slow::before{background:var(--amber)}
.stock-card.sout::before{background:var(--rose)}
.stock-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
.stock-fill{height:100%;border-radius:3px}
.stock-pill{font-size:9px;padding:2px 8px;border-radius:6px;font-weight:700;position:absolute;top:12px;right:12px}

/* Finance */
.fin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.fin-stat{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px;position:relative;overflow:hidden}
.fin-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0}
.fin-stat.fs1::before{background:var(--green)}.fin-stat.fs2::before{background:var(--sky)}.fin-stat.fs3::before{background:var(--rose)}.fin-stat.fs4::before{background:var(--violet)}
.bilan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.bilan-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px}
.mvt-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:12px}
.mvt-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border-light)}
.mvt-item:last-child{border:none}
.mvt-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.sal-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:12px}
.sal-emp{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light)}
.sal-emp:last-child{border:none}
.sal-breakdown{display:flex;gap:6px;margin-top:4px}
.sal-tag{font-size:9px;padding:2px 8px;border-radius:6px;font-weight:600}
.sal-tag.fix{background:var(--indigo-bg);color:var(--indigo-text)}
.sal-tag.com{background:var(--green-bg);color:var(--green-text)}
.sal-tag.prime{background:var(--amber-bg);color:var(--amber-text)}
.tax-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:12px}

/* Gov Nav */
.gov-nav{background:var(--bg-topbar);border-bottom:1px solid var(--border);padding:10px 20px 0}
.gov-group{display:flex;gap:4px;margin-bottom:6px;align-items:center;flex-wrap:wrap}
.gov-group-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:700;min-width:80px;padding-right:8px}
.gov-tab{padding:6px 12px;font-size:10px;color:var(--text-muted);cursor:pointer;font-weight:600;border-radius:8px;transition:all .12s;white-space:nowrap}
.gov-tab:hover{background:var(--pink-bg);color:var(--pink-text)}
.gov-tab.on{background:var(--pink-bg);color:var(--pink-text);font-weight:700}

/* Gov specific */
.dc-panel{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.dc-lvl{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all .2s}
.dc-lvl:hover{transform:translateY(-2px)}
.dc-lvl.active{border-width:3px}
.dc-lvl.d5.active{border-color:var(--green);background:var(--green-bg)}
.dc-lvl.d4.active{border-color:var(--sky);background:var(--sky-bg)}
.dc-lvl.d3.active{border-color:var(--amber);background:var(--amber-bg)}
.dc-lvl.d2.active{border-color:#f97316;background:#fff7ed}
.dc-lvl.d1.active{border-color:var(--rose);background:var(--rose-bg)}
.dc-num{font-size:24px;font-weight:800;margin-bottom:2px}
.dc-lvl.d5 .dc-num{color:var(--green-text)}.dc-lvl.d4 .dc-num{color:var(--sky-text)}.dc-lvl.d3 .dc-num{color:var(--amber-text)}.dc-lvl.d2 .dc-num{color:#ea580c}.dc-lvl.d1 .dc-num{color:var(--rose-text)}
.dc-label{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.jl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-light)}
.jl-item:last-child{border:none}
.jl-time{min-width:60px;text-align:right;font-size:9px;color:var(--text-muted);padding-top:2px}
.jl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.jl-content{flex:1}
.jl-title{font-size:11px;font-weight:600;color:var(--text-primary)}
.jl-detail{font-size:9px;color:var(--text-muted);margin-top:1px}
.tmpl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tmpl-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all .15s}
.tmpl-card:hover{border-color:var(--indigo-border);transform:translateY(-2px)}

/* Law Cards */
.law-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.law-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px; cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
}
.law-card:hover { border-color: var(--indigo-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(99,102,241,.08); }
.law-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 14px 14px 0 0; }
.law-card.lc-amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.law-card.lc-sky::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.law-card.lc-rose::before { background: linear-gradient(90deg, #e11d48, #f43f5e); }
.law-card.lc-indigo::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.law-card.lc-violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.law-icon { font-size: 28px; margin-bottom: 10px; }
.law-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.law-count { font-size: 11px; color: var(--text-muted); }
.law-badge { position: absolute; top: 12px; right: 12px; font-size: 9px; padding: 3px 10px; border-radius: 8px; font-weight: 700; }

/* Procedure Cards */
.proc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.proc-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px; cursor: pointer; transition: all .2s; display: flex; gap: 14px; align-items: flex-start;
}
.proc-card:hover { border-color: var(--violet-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(139,92,246,.08); }
.proc-num {
  width: 44px; height: 44px; border-radius: 12px; background: var(--violet-bg); border: 1.5px solid var(--violet-border);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--violet-text); flex-shrink: 0;
}
.proc-info { flex: 1; }
.proc-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.proc-chap { font-size: 11px; color: var(--text-muted); }

/* Decree Cards */
.decree-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.decree-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px; cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
}
.decree-card:hover { border-color: var(--amber-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245,158,11,.08); }
.decree-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #f59e0b, #d97706); }
.decree-icon { font-size: 20px; margin-bottom: 8px; }
.decree-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; }
.decree-meta { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); }
.decree-author { font-weight: 600; color: var(--indigo-text); }

/* Health Cards */
.health-grid2 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.health-card2 {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 16px; text-align: center; position: relative; overflow: hidden;
}
.health-card2::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; }
.health-card2.hc1::before { background: var(--rose); }
.health-card2.hc2::before { background: var(--sky); }
.health-card2.hc3::before { background: var(--green); }
.health-card2.hc4::before { background: var(--amber); }
.health-ico { font-size: 24px; margin-bottom: 6px; }
.health-val2 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.health-lab2 { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hist-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.hist-h { padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-light); }
.hist-h .icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.hist-h .title { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.hist-empty { padding: 24px 16px; text-align: center; color: var(--text-hint); font-size: 11px; }
.hist-empty .ico { font-size: 24px; margin-bottom: 6px; display: block; }

/* Vote Cards */
.vote-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 18px; margin-bottom: 12px; }
.vote-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.vote-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.vote-bar-wrap { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.vote-bar { flex: 1; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.vote-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #10b981, #34d399); transition: width .3s; }
.vote-count { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.vote-pour {
  padding: 9px 24px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #059669, #10b981); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.vote-contre {
  padding: 9px 24px; border: 1.5px solid var(--rose-border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--rose-text); font-size: 12px; font-weight: 700; cursor: pointer;
}
@media (max-width: 768px) {
  .law-grid { grid-template-columns: 1fr 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  .decree-grid { grid-template-columns: 1fr; }
  .health-grid2 { grid-template-columns: repeat(2,1fr); }
  .hist-grid { grid-template-columns: 1fr; }
}

/* Job Cards */
.jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.job-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px; transition: all .2s; cursor: pointer; position: relative; overflow: hidden;
}
.job-card:hover { border-color: var(--indigo-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(99,102,241,.08); }
.job-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 14px 14px 0 0; }
.job-card.jc1::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.job-card.jc2::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.job-card.jc3::before { background: linear-gradient(90deg, #10b981, #06b6d4); }
.job-card.jc4::before { background: linear-gradient(90deg, #ec4899, #f43f5e); }
.job-card.jc5::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.job-card.jc6::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.job-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.job-icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex;
  align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.job-info { flex: 1; min-width: 0; }
.job-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.job-company { font-size: 11px; color: var(--text-muted); }
.job-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.job-tag { font-size: 10px; padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 600; }
.job-tag-salary { background: var(--green-bg); color: var(--green-text); }
.job-tag-commission { background: var(--amber-bg); color: var(--amber-text); }
.job-tag-type { background: var(--indigo-bg); color: var(--indigo-text); }
.job-tag-urgent { background: var(--rose-bg); color: var(--rose-text); }
.job-desc {
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px;
}
.job-footer { display: flex; justify-content: space-between; align-items: center; }
.job-date { font-size: 10px; color: var(--text-hint); }
.job-apply {
  padding: 7px 16px; border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.job-apply:hover { opacity: .85; }

/* Enterprise Cards */
.ent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ent-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px; text-align: center; transition: all .2s; cursor: pointer;
}
.ent-card:hover { border-color: var(--amber-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245,158,11,.08); }
.ent-emoji { font-size: 36px; margin-bottom: 8px; display: block; }
.ent-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.ent-type { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
.ent-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.ent-status { display: inline-block; font-size: 9px; padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 700; }
.ent-reviews { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.ent-search { margin-bottom: 14px; }
.ent-search input {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: 12px; outline: none; background: var(--bg-card); color: var(--text-primary);
}
.ent-search input:focus { border-color: var(--amber); }
.ent-filter { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ent-fbtn {
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-muted); transition: all .15s;
}
.ent-fbtn.on { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-text); }
.ent-fbtn:hover { border-color: var(--amber); }
.review-btn {
  padding: 10px 20px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.review-btn:hover { opacity: .9; }
@media (max-width: 768px) {
  .jobs-grid { grid-template-columns: 1fr; }
  .ent-grid { grid-template-columns: 1fr 1fr; }
}

/* Slide Panel */
.slide-overlay{position:fixed;inset:0;z-index:200;pointer-events:none}
.slide-bg{position:absolute;inset:0;background:rgba(26,26,46,.4);opacity:0;transition:opacity .3s;backdrop-filter:blur(2px);pointer-events:none}
.slide-overlay.open .slide-bg{opacity:1;pointer-events:auto}
.slide-panel{position:absolute;top:0;right:0;bottom:0;width:620px;max-width:90vw;background:var(--bg-input);transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.12);pointer-events:auto}
.slide-overlay.open .slide-panel{transform:translateX(0)}
.slide-head{padding:12px 16px;background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.slide-head-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}
.slide-close{background:none;border:1.5px solid var(--border);width:28px;height:28px;border-radius:8px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s}
.slide-close:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-bg)}
.slide-body{flex:1;overflow-y:auto;padding:20px;display:flex;justify-content:center}
.gov-letter{width:100%;max-width:540px;background:#fff;border:1px solid #d4d0c4;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.06);position:relative;overflow:hidden;animation:letterIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:.15s}
@keyframes letterIn{0%{opacity:0;transform:translateY(20px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
.gov-letter::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#1a1a2e 0%,#1a1a2e 33%,#c4c1b9 33%,#c4c1b9 66%,#8b7355 66%,#8b7355 100%)}
.gov-header{padding:24px 28px 16px;text-align:center;border-bottom:1px solid #e8e5dd}
.gov-seal{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1a1a2e,#2d2d4e);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.gov-state{font-size:9px;text-transform:uppercase;letter-spacing:3px;color:#94918a;margin-bottom:2px}
.gov-office{font-size:12px;font-weight:700;color:#1a1a2e;letter-spacing:1px}
.gov-line{width:60px;height:2px;background:linear-gradient(90deg,transparent,#c9944a,transparent);margin:10px auto 0}
.gov-doc-title{padding:20px 32px 0;font-size:17px;font-weight:800;color:#1a1a2e;line-height:1.4;text-align:center}
.gov-doc-ref{font-size:10px;color:#94918a;text-align:center;margin-top:4px;letter-spacing:.5px}
.gov-content{padding:20px 32px;font-size:13.5px;line-height:1.9;color:#3a3832;text-align:justify}
.gov-content p{margin-bottom:12px}
.gov-content p:last-child{margin-bottom:0}
.gov-signature{padding:14px 28px 20px;text-align:right}
.gov-sig-line{width:140px;height:1px;background:#c4c1b9;margin-left:auto;margin-bottom:6px}
.gov-sig-name{font-size:12px;font-weight:700;color:#1a1a2e;font-style:italic}
.gov-sig-role{font-size:10px;color:#94918a}
.gov-footer{padding:10px 28px;background:#f8f6f0;border-top:1px solid #e8e5dd;display:flex;justify-content:space-between;font-size:9px;color:#c4c1b9}
.gov-stamp{position:absolute;bottom:60px;right:30px;width:64px;height:64px;border-radius:50%;border:2px solid rgba(200,148,74,.15);display:flex;align-items:center;justify-content:center;transform:rotate(-15deg);opacity:.25}
.gov-stamp-inner{font-size:7px;text-transform:uppercase;letter-spacing:1px;color:#c9944a;text-align:center;font-weight:700;line-height:1.3}

/* Messages */
.msg-layout { display: flex; height: calc(100vh - 160px); min-height: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.msg-list { width: 280px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.msg-search { padding: 10px; border-bottom: 1px solid var(--border); }
.msg-search input {
  width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11px; outline: none; background: var(--bg-input); color: var(--text-primary);
}
.msg-search input:focus { border-color: var(--rose); }
.msg-items { flex: 1; overflow-y: auto; }
.msg-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-light);
  display: flex; gap: 10px; align-items: flex-start; transition: background .1s;
}
.msg-item:hover { background: var(--bg-input); }
.msg-item.on { background: var(--rose-bg); }
.msg-item.unread { border-left: 3px solid var(--rose); }
.msg-av {
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.msg-av.ent { background: var(--indigo-bg); color: var(--indigo-text); }
.msg-av.cit { background: var(--green-bg); color: var(--green-text); }
.msg-av.gov { background: var(--amber-bg); color: var(--amber-text); }
.msg-body { flex: 1; min-width: 0; }
.msg-from { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-subj { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-preview { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msg-date { font-size: 9px; color: var(--text-muted); min-width: 32px; text-align: right; flex-shrink: 0; }
.msg-new { padding: 10px; border-top: 1px solid var(--border); }
.msg-new-btn {
  width: 100%; padding: 10px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f43f5e, #ec4899); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.msg-new-btn:hover { opacity: .9; }
.msg-detail { flex: 1; display: flex; flex-direction: column; background: var(--bg-app); }
.msg-d-head { padding: 14px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.msg-d-subj { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.msg-d-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.msg-d-from { font-weight: 600; color: var(--indigo-text); }
.msg-thread { flex: 1; overflow-y: auto; padding: 14px 20px; }
.bubble { max-width: 85%; margin-bottom: 12px; animation: fadeIn .2s ease; }
.bubble.them { margin-right: auto; }
.bubble.me { margin-left: auto; }
.bubble-inner {
  padding: 10px 14px; border-radius: var(--radius-lg); font-size: 12px;
  line-height: 1.6; color: var(--text-primary); white-space: pre-wrap;
}
.bubble.them .bubble-inner { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.me .bubble-inner { background: var(--indigo-bg); border: 1px solid var(--indigo-border); border-bottom-right-radius: 4px; }
.bubble-meta { font-size: 9px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.bubble.me .bubble-meta { justify-content: flex-end; }
.bubble-sender { font-weight: 600; color: var(--indigo-text); }
.bubble-rdv {
  background: var(--amber-bg); border: 1px solid var(--amber-border);
  border-radius: var(--radius-md); padding: 10px 12px; margin-top: 6px; font-size: 11px;
}
.bubble-rdv .rdv-title { font-weight: 700; color: var(--amber-text); margin-bottom: 4px; }
.bubble-rdv .rdv-detail { color: var(--text-secondary); }
.bubble-doc {
  background: var(--indigo-bg); border: 1px solid var(--indigo-border);
  border-radius: var(--radius-md); padding: 10px 12px; margin-top: 6px; font-size: 11px;
}
.bubble-doc .doc-title { font-weight: 700; color: var(--indigo-text); margin-bottom: 2px; }
.msg-compose {
  padding: 12px 20px; background: var(--bg-card); border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-end;
}
.msg-compose textarea {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: 12px; color: var(--text-primary); outline: none; resize: none;
  min-height: 40px; max-height: 80px; background: var(--bg-input); font-family: inherit;
}
.msg-compose textarea:focus { border-color: var(--rose); }
.msg-send {
  width: 40px; height: 40px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f43f5e, #ec4899); color: #fff;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-send:hover { opacity: .9; }
.msg-attach {
  width: 40px; height: 40px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-attach:hover { border-color: var(--rose); color: var(--rose); }
.msg-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; color: var(--text-hint); padding: 40px;
}
.msg-empty .big { font-size: 40px; margin-bottom: 8px; }
.msg-empty p { font-size: 12px; }

/* New message modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex;
  align-items: center; justify-content: center; z-index: 200; animation: fadeIn .15s;
}
.modal-box {
  background: var(--bg-card); border-radius: var(--radius-xl); padding: 24px;
  width: 400px; max-width: 90vw; animation: popUp .25s cubic-bezier(.68,-.55,.27,1.55);
}
@keyframes popUp { 0%{transform:scale(.8);opacity:0} 100%{transform:scale(1);opacity:1} }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.modal-field { margin-bottom: 12px; }
.modal-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.modal-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-primary); outline: none; background: var(--bg-input);
}
.modal-input:focus { border-color: var(--indigo); }
.modal-textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-primary); outline: none; background: var(--bg-input);
  min-height: 100px; resize: vertical; font-family: inherit;
}
.modal-textarea:focus { border-color: var(--indigo); }
.modal-select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-primary); outline: none; background: var(--bg-input);
}
.modal-btns { display: flex; gap: 8px; margin-top: 16px; }
.modal-btns .btn-primary { flex: 1; }
.modal-btns .btn-secondary { flex: 1; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar { width: 56px; }
  .main-area { margin-left: 56px; }
  .si { width: 36px; height: 36px; font-size: 14px; }
  .g4 { grid-template-columns: repeat(2,1fr); }
  .g2 { grid-template-columns: 1fr; }
  .content { padding: 14px; }
  .id-card { flex-direction: column; }
  .id-left { width: 100%; padding: 14px; flex-direction: row; gap: 12px; }
  .msg-list { width: 200px; }
}