@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-ar-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-ar-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-ar-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-ar-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-ar-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-ar-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-ar-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-ar-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =====================================================================
   Elwakeel Design System v6 — loaded last on every page.
   Tokens → base → components → screens → desktop → motion.
   ===================================================================== */
:root{
  /* brand */
  --brand-navy:#2C3E50; --brand-red:#C8102E; --brand-orange:#C2410C; --brand-grad:linear-gradient(135deg,#C8102E 0%,#C2410C 100%);
  --hero-grad:radial-gradient(120% 140% at 100% 0%,#3B5168 0%,#2C3E50 45%,#1E2B38 100%);
  /* neutrals */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF1F4; --line:#E5E8EC; --line-2:#D6DBE1;
  --text:#101828; --text-2:#344054; --muted:#5D6B7E;
  /* semantic (legacy names kept so old rules inherit) */
  --navy:#2C3E50; --navy-2:#3B5168; --teal:#C8361E; --teal-soft:#FCEDE6; --accent-a:#C8102E; --accent-b:#C2410C;
  --ok:#1F7A55; --ok-soft:#E6F4EE; --warn:#8A5A00; --warn-soft:#FDF4E0; --danger:#B42318; --danger-soft:#FDECEA; --info:#2C5A8A; --info-soft:#E8F0F9;
  --focus:0 0 0 3px rgba(200,16,46,.18);
  /* shape & depth (8pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:28px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 2px 8px -2px rgba(16,24,40,.06);
  --shadow-md:0 1px 2px rgba(16,24,40,.04),0 8px 24px -6px rgba(16,24,40,.10);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04),0 24px 48px -12px rgba(16,24,40,.18);
  --glass:rgba(255,255,255,.82);
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.22s;
  --font:'Plex Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --hero-grad:radial-gradient(120% 140% at 100% 0%,#2A3B4E 0%,#1A2532 50%,#121A24 100%);
  --bg:#0A0F15; --surface:#111821; --surface-2:#161F2A; --surface-3:#1C2633; --line:#222E3B; --line-2:#2E3B4A;
  --text:#EEF2F6; --text-2:#C9D2DC; --muted:#94A3B5;
  --navy:#B8C7D9; --navy-2:#D0DBE7; --teal:#FF8A5B; --teal-soft:#33201A; --accent-a:#E0364F; --accent-b:#C2410C;
  --ok:#6FD3A5; --ok-soft:#13291F; --warn:#F5C46B; --warn-soft:#2D2414; --danger:#FF9C94; --danger-soft:#3A1D1C; --info:#9CC3EE; --info-soft:#162536;
  --focus:0 0 0 3px rgba(255,138,91,.28);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.02);
  --shadow-md:0 1px 2px rgba(0,0,0,.4),0 10px 28px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 56px -12px rgba(0,0,0,.7);
  --glass:rgba(17,24,33,.78);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --hero-grad:radial-gradient(120% 140% at 100% 0%,#2A3B4E 0%,#1A2532 50%,#121A24 100%);
  --bg:#0A0F15; --surface:#111821; --surface-2:#161F2A; --surface-3:#1C2633; --line:#222E3B; --line-2:#2E3B4A;
  --text:#EEF2F6; --text-2:#C9D2DC; --muted:#94A3B5;
  --navy:#B8C7D9; --navy-2:#D0DBE7; --teal:#FF8A5B; --teal-soft:#33201A; --accent-a:#E0364F; --accent-b:#C2410C;
  --ok:#6FD3A5; --ok-soft:#13291F; --warn:#F5C46B; --warn-soft:#2D2414; --danger:#FF9C94; --danger-soft:#3A1D1C; --info:#9CC3EE; --info-soft:#162536;
  --focus:0 0 0 3px rgba(255,138,91,.28);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.02);
  --shadow-md:0 1px 2px rgba(0,0,0,.4),0 10px 28px -8px rgba(0,0,0,.55); --shadow-lg:0 24px 56px -12px rgba(0,0,0,.7);
  --glass:rgba(17,24,33,.78); color-scheme:dark;
}}

/* ---------- base & type scale (12/13/14/15/17/20/24/30) ---------- */
html,body{font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:var(--font)}
.num,.val,.amt,.kpi-v,td.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
::selection{background:rgba(200,16,46,.16)}
:focus-visible{outline:2px solid var(--accent-a);outline-offset:2px;border-radius:10px}
svg{stroke-width:1.8}
h1,h2,h3{letter-spacing:-.005em}
.muted{color:var(--muted)}
a{color:inherit}

/* ---------- top bar (glass) ---------- */
.topbar{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:calc(10px + env(safe-area-inset-top)) var(--s4) 10px}
.brand img{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);box-shadow:var(--shadow-xs);background:#fff;padding:2px}
.brand h1{font-size:16px;font-weight:700;letter-spacing:-.01em}
.brand small{font-size:12px;color:var(--muted);margin-top:-2px;font-weight:500}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);box-shadow:var(--shadow-xs);transition:background var(--dur),transform .12s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:19px;height:19px}
.brand-bar{height:2px;background:var(--brand-grad)}

/* ---------- section switcher bar ---------- */
.secbar{gap:4px;padding:8px var(--s4);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);position:relative;z-index:15}
.secbar a{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px;padding:7px 14px;border-radius:999px;transition:background var(--dur),color var(--dur)}
.secbar a:hover{background:var(--surface-3);color:var(--text)}
.secbar a.on{background:var(--brand-navy);color:#fff;box-shadow:var(--shadow-xs)}
:root[data-theme="dark"] .secbar a.on{background:#E8EDF3;color:#0B1118}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .secbar a.on{background:#E8EDF3;color:#0B1118}}

/* ---------- bottom tab bar (floating glass) ---------- */
.bottomnav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:22px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--shadow-lg);padding:6px}
.bottomnav button{gap:3px;padding:6px 2px 5px;font-size:11.5px;font-weight:600;color:var(--muted);border-radius:16px;min-height:52px;transition:color var(--dur)}
.bottomnav button svg{width:22px;height:22px;padding:0;transition:transform var(--dur) var(--ease)}
.bottomnav button.on{background:transparent;color:var(--text)}
.bottomnav button.on svg{color:var(--accent-a)}
.bottomnav button.on::before{content:"";position:absolute;top:4px;left:50%;width:44px;height:30px;transform:translateX(-50%);border-radius:12px;background:color-mix(in srgb,var(--accent-a) 10%,transparent);z-index:-1}
.bottomnav button{isolation:isolate}
.bottomnav .badge{top:2px;left:calc(50% - 24px)}
main{padding:var(--s4) var(--s4) 128px}
.page-head{margin:var(--s1) 0 var(--s4);align-items:flex-end}
.page-head h2{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.25}

/* ---------- stat tiles ---------- */
.cards{gap:var(--s3);margin-bottom:var(--s4)}
.card{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);box-shadow:var(--shadow);background:var(--surface)}
.card .lbl{font-size:12.5px;font-weight:600;color:var(--muted);gap:8px}
.card .lbl i{width:8px;height:8px;border-radius:3px}
.card .val{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:6px;line-height:1.2}
.card .val small{font-size:12px;font-weight:600;color:var(--muted)}
#cards>.card:first-child{background:var(--hero-grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
#cards>.card:first-child::after{content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,125,26,.35),transparent)}
#cards>.card:first-child .lbl,#cards>.card:first-child .val small{color:rgba(255,255,255,.75)}
#cards>.card:first-child .val{color:#fff}
#cards>.card:first-child .lbl i{background:#EF7D1A!important}

/* ---------- inputs / toolbar ---------- */
.toolbar{gap:var(--s2);margin-bottom:var(--s4)}
.search input,.toolbar select,.field input,.field select,.field textarea,.rep-head input[type=month],.audit-filters input[type=date]{min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line);background-color:var(--surface);color:var(--text);font-size:15px;transition:border-color var(--dur),box-shadow var(--dur)}
.field input,.field select,.field textarea{background-color:var(--surface-2);padding:11px 14px}
.field textarea{min-height:96px}
.search input{padding-inline:44px 14px}
.search svg{right:14px;width:18px;height:18px}
input:focus,select:focus,textarea:focus{border-color:var(--accent-a)!important;box-shadow:var(--focus)!important;outline:none}
select,.toolbar select,.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235D6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 12px center!important;padding-inline:14px 36px!important}
.field label{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form{gap:var(--s3) var(--s3)}
.seg{background:var(--surface-3);border:0;border-radius:14px;padding:4px;gap:2px}
.seg button{padding:9px 8px;border-radius:10px;font-weight:600;color:var(--muted);transition:background var(--dur),color var(--dur),box-shadow var(--dur);min-height:40px}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 6px -1px rgba(16,24,40,.08)}
:root[data-theme="dark"] .seg button.on{background:var(--line-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button.on{background:var(--line-2)}}

/* ---------- buttons ---------- */
.btn{min-height:46px;border-radius:var(--r-sm);padding:11px 18px;font-weight:600;font-size:15px;background:var(--brand-navy);color:#fff;box-shadow:var(--shadow-xs);transition:transform .12s var(--ease),filter var(--dur),background var(--dur)}
.btn:hover{filter:brightness(1.08)}
.btn.sm{min-height:38px;padding:7px 14px;font-size:13.5px;border-radius:11px}
.btn.teal{background:var(--brand-grad)!important;box-shadow:0 1px 2px rgba(200,16,46,.2),0 6px 16px -6px rgba(200,16,46,.45)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-xs)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.soft{background:var(--surface-3);color:var(--text)}
.btn.danger{background:var(--danger);color:#fff}
:root[data-theme="dark"] .btn:not(.ghost):not(.soft):not(.teal):not(.danger){background:#E8EDF3;color:#0B1118}
:root[data-theme="dark"] .btn.danger{color:#2A0F0D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.ghost):not(.soft):not(.teal):not(.danger){background:#E8EDF3;color:#0B1118}:root:not([data-theme="light"]) .btn.danger{color:#2A0F0D}}
.btn.teal{color:#fff!important}
button:active:not(:disabled),.btn:active:not(:disabled),.item:active,.tile:active,.sec-card:active,.kpi:active,.qa a:active{transform:scale(.97)}

/* ---------- lists (grouped rows with avatars) ---------- */
.list{gap:var(--s2)}
.item{border:1px solid var(--line);border-radius:var(--r);padding:14px var(--s4);box-shadow:var(--shadow);gap:2px 12px;transition:transform .12s var(--ease),box-shadow var(--dur),border-color var(--dur)}
.item:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}
.item .t{font-size:15px;font-weight:600;color:var(--text)}
.item .s{font-size:12.5px;color:var(--muted)}
.item .amt{font-weight:700;font-size:15.5px}
.item .bar{height:6px;background:var(--surface-3);border-radius:99px;margin-top:10px}
.item .bar span{border-radius:99px;background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 70%,#7BD3A8))}
.item .foot{margin-top:8px;font-size:12.5px}
.item.has-av{grid-template-columns:44px 1fr auto}
.item.has-av>.av{grid-row:1/3;align-self:center}
.item.has-av>.bar,.item.has-av>.foot{grid-column:2/-1}
.av,.avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;border:0;background:var(--tone-bg,var(--surface-3));color:var(--tone-fg,var(--text-2))}
.av svg{width:20px;height:20px}
.item.task .avatar{width:38px;height:38px;border-radius:12px;font-size:14px}
.item.task.is-late,.item.task.is-today,.alert-row.late,.alert-row.today{border-inline-start-width:1px;border-inline-start-color:var(--line);position:relative;overflow:hidden}
.item.task.is-late::before,.alert-row.late::before,.item.task.is-today::before,.alert-row.today::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:var(--danger)}
.item.task.is-today::before,.alert-row.today::before{background:var(--warn)}
.check{width:30px;height:30px;border-width:2px;border-color:var(--line-2);transition:background var(--dur),border-color var(--dur),transform .2s var(--ease)}
.check.on{background:var(--ok)!important;border-color:var(--ok)!important;animation:pop .32s var(--ease)}

/* ---------- pills, chips, badges ---------- */
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;gap:6px;line-height:1.5}
.pill::before{width:6px;height:6px}
.pill.cat,.pill.new,.pill.normal{background:var(--surface-3);border:0;color:var(--text-2)}
.pill.act{border-radius:8px}
.chip{font-weight:600;font-size:12px;padding:3px 10px;background:var(--surface-3);border:0;color:var(--text-2);display:inline-flex;align-items:center;gap:4px}
.chip svg{width:14px;height:14px}
.chip.red{background:var(--danger-soft);color:var(--danger)} .chip.gold{background:var(--warn-soft);color:var(--warn)}
.badge{background:var(--brand-red);box-shadow:0 0 0 2px var(--surface);font-weight:700;font-size:11px;min-width:19px;height:19px}
.role{font-weight:600;border:0;padding:2px 9px}
.role.r-owner{background:var(--brand-navy);color:#fff}
.role.r-manager{background:var(--info-soft);color:var(--info)}
.role.r-supervisor{background:var(--ok-soft);color:var(--ok)}
.role.r-employee{background:var(--warn-soft);color:var(--warn)}

/* ---------- tables (desktop) ---------- */
table.tbl{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);font-size:14px}
.tbl th{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--muted);padding:12px 16px;letter-spacing:.01em}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line)}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,var(--surface))}

/* ---------- empty + skeleton ---------- */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--s6) var(--s4);background:var(--surface)}
.empty svg{width:28px;height:28px;color:var(--accent-a);opacity:1;padding:14px;box-sizing:content-box;border-radius:18px;background:color-mix(in srgb,var(--accent-a) 9%,transparent)}
.empty b{font-size:16px;font-weight:600;margin-top:12px}
.skel-list{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.skel-list i,.skel{display:block;height:76px;border-radius:var(--r);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-3) 50%,var(--surface) 70%) 0 0/300% 100%;border:1px solid var(--line);animation:shimmer 1.3s linear infinite}
.skel-list i:nth-child(2){opacity:.8}.skel-list i:nth-child(3){opacity:.6}
.skel-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.skel-kpis i{height:96px}
.skel-hero{height:168px!important;border-radius:var(--r-xl)!important}
@keyframes shimmer{to{background-position:-300% 0}}

/* ---------- FAB ---------- */
.fab{left:18px;bottom:calc(92px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:20px;background:var(--brand-grad)!important;box-shadow:0 2px 4px rgba(200,16,46,.2),0 12px 28px -8px rgba(200,16,46,.55);transition:transform .15s var(--ease)}
.fab:hover{transform:translateY(-1px)}

/* ---------- sheets & dialogs ---------- */
dialog::backdrop{background:rgba(10,15,21,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-inner{border-radius:var(--r-xl) var(--r-xl) 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);border:1px solid var(--line);border-bottom:0}
.sheet-inner::before{width:40px;height:5px;background:var(--line-2);margin-bottom:14px}
.sheet-inner h3{font-size:19px;font-weight:700;margin-bottom:16px}
#sheet[open],dialog.confirm[open]{animation:sheetUp .32s var(--ease)}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.row-actions{gap:var(--s2);margin-top:var(--s5)}
.row-actions .btn{min-height:50px}
.detail-grid .card{background:var(--surface-2);border:0}
.pay{border:0;background:var(--surface-2);border-radius:var(--r-sm);padding:10px 14px}
.inline-pay{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}

/* ---------- toast ---------- */
#toast{bottom:calc(100px + env(safe-area-inset-bottom));background:#101828;color:#fff;border-radius:14px;padding:12px 18px;font-weight:500;font-size:14.5px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;transition:opacity .2s,transform .28s var(--ease)}
:root[data-theme="dark"] #toast{background:#EEF2F6;color:#0B1118}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #toast{background:#EEF2F6;color:#0B1118}}
#toast .tk{width:22px;height:22px;flex:none;border-radius:50%;background:#1F9D6A;display:grid;place-items:center}
#toast .tk svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:20;stroke-dashoffset:20;animation:draw .4s .08s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- login ---------- */
.login{background:var(--bg);padding:0;display:block;min-height:100dvh;position:relative;overflow:hidden}
.login::before{content:"";position:absolute;inset:0 0 auto 0;height:46vh;min-height:300px;background:var(--hero-grad);border-radius:0 0 36px 36px}
.login::after{content:"";position:absolute;top:-80px;left:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,125,26,.32),transparent);pointer-events:none}
.login-card{position:relative;z-index:1;margin:calc(64px + env(safe-area-inset-top)) auto 32px;width:calc(100% - 32px);max-width:400px;border-radius:var(--r-xl);padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.login-card .login-logo{width:200px;border-radius:18px;box-shadow:none;border:1px solid var(--line);margin-bottom:var(--s4)}
.login-card h1{font-size:22px;font-weight:700;margin:4px 0 4px}
.login-card p{font-size:14px;margin-bottom:var(--s5)}
.login-card .btn{min-height:50px;font-size:16px;margin-top:var(--s4);background:var(--brand-grad)!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(200,16,46,.55)}
.login-card .field{margin-top:var(--s3)!important}
.login-foot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:12.5px;padding-bottom:24px}

/* ---------- home ---------- */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:var(--s1) 0 var(--s4)}
.hello small{display:block;color:var(--muted);font-size:13px;font-weight:500}
.hello h2{margin:2px 0 0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:20px 20px 18px;background:var(--hero-grad);color:#fff;box-shadow:var(--shadow-md);margin-bottom:var(--s3);text-decoration:none;display:block}
.hero::after{content:"";position:absolute;bottom:-90px;left:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,125,26,.38),transparent);pointer-events:none}
.hero .lbl{font-size:13px;color:rgba(255,255,255,.72);font-weight:500;display:flex;align-items:center;gap:8px}
.hero .big{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.hero .big small{font-size:15px;font-weight:500;color:rgba(255,255,255,.7);margin-inline-start:6px}
.hero .sub{display:flex;gap:16px;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.78);flex-wrap:wrap}
.hero .sub b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.hero .spark{position:absolute;inset-inline-end:16px;top:18px;width:112px;height:44px;opacity:.95}
.hero .spark path.l{fill:none;stroke:#FFB37A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .spark path.a{fill:url(#sg)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s5)}
.kpi{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;box-shadow:var(--shadow);position:relative;transition:transform .12s var(--ease),box-shadow var(--dur)}
.kpi:hover{box-shadow:var(--shadow-md)}
.kpi .ki{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px;background:var(--surface-3);color:var(--text-2)}
.kpi .ki svg{width:18px;height:18px}
.kpi.red .ki{background:var(--danger-soft);color:var(--danger)} .kpi.gold .ki{background:var(--warn-soft);color:var(--warn)} .kpi.ok .ki{background:var(--ok-soft);color:var(--ok)} .kpi.info .ki{background:var(--info-soft);color:var(--info)}
.kpi .kpi-l{font-size:12.5px;color:var(--muted);font-weight:500}
.kpi .kpi-v{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.kpi .kpi-v small{font-size:12px;color:var(--muted);font-weight:500;margin-inline-start:3px}
.kpi .kpi-s{font-size:12px;color:var(--muted)}
.sec-t{display:flex;align-items:center;justify-content:space-between;margin:0 2px var(--s3);font-size:15px;font-weight:700}
.sec-t small{font-weight:500;color:var(--muted);font-size:12.5px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s5)}
.qa a,.qa button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12.5px;font-weight:500;color:var(--text-2);transition:transform .12s var(--ease)}
.qa .qi{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text)}
.qa .qi svg{width:22px;height:22px}
.qa a:first-child .qi{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(200,16,46,.6)}
.qa a:focus-visible .qi{outline:2px solid var(--accent-a);outline-offset:2px}
.switcher{gap:var(--s3)}
.sec-card{border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .12s var(--ease),box-shadow var(--dur)}
.sec-card:hover{box-shadow:var(--shadow-md)}
.sec-card::before{display:none}
.sec-card .ic{width:48px;height:48px;border-radius:15px;background:var(--surface-3);color:var(--text)}
.sec-card[data-sec="salaf"] .ic{background:var(--brand-grad);color:#fff}
.sec-card[data-sec="tasks"] .ic{background:var(--brand-navy);color:#fff}
.sec-card .ic svg{width:24px;height:24px}
.sec-card h3{font-size:16.5px;font-weight:700}
.sec-card .go{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2)}
.sec-card .go svg{width:18px;height:18px}
.home-grid{display:grid;gap:0}

/* ---------- assistant ---------- */
.chat{gap:14px;padding-bottom:180px}
.bub{font-size:15px;line-height:1.8;padding:12px 16px;border-radius:20px;box-shadow:var(--shadow-xs)}
.bub.me{background:var(--brand-navy);color:#fff;border-end-start-radius:6px;box-shadow:none}
:root[data-theme="dark"] .bub.me{background:#2A3B4E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bub.me{background:#2A3B4E}}
.bub.ai{position:relative;background:var(--surface);border:1px solid var(--line);border-end-end-radius:6px;margin-inline-end:0;max-width:calc(100% - 44px);margin-inline-start:0}
.ai-row{display:flex;gap:10px;align-items:flex-end;align-self:flex-end;max-width:92%;flex-direction:row-reverse}
.ai-row .bub{max-width:100%}
.ai-av{width:32px;height:32px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--brand-grad);color:#fff;box-shadow:0 4px 10px -4px rgba(200,16,46,.5)}
.ai-av svg{width:16px;height:16px}
.bub.ai b{font-weight:600}
.bub.ai ul{padding-inline-start:20px}.bub.ai li{margin:2px 0}
.bub.err{background:var(--warn-soft);border-color:transparent}
.chips{gap:var(--s2)}
.chips button{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:13.5px;box-shadow:var(--shadow-xs);text-align:start;min-height:44px;transition:border-color var(--dur),background var(--dur)}
.chips button:hover{border-color:var(--line-2);background:var(--surface-2)}
.asst-hero{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:var(--s4)}
.asst-hero .ai-av{width:44px;height:44px;border-radius:14px}.asst-hero .ai-av svg{width:22px;height:22px}
.asst-hero b{display:block;font-size:15.5px}.asst-hero span{color:var(--muted);font-size:13px;line-height:1.6;display:block}
.ask{left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:6px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:var(--shadow-md);align-items:flex-end}
.ask textarea{border:0;background:transparent;min-height:44px;padding:11px 12px;border-radius:14px;font-size:15px}
.ask textarea:focus{box-shadow:none!important}
.ask .btn{width:44px;height:44px;min-height:44px;padding:0;border-radius:14px}
.ask:focus-within{border-color:var(--accent-a);box-shadow:var(--focus),var(--shadow-md)}

/* ---------- settings, users, permissions ---------- */
.tg{padding:14px 0}
.tg input{width:48px;height:28px;background:var(--line-2)}
.tg input:checked{background:var(--ok)}
.hint-box{border-radius:var(--r);background:var(--info-soft);color:var(--text-2);padding:14px 16px}
.hint-box b{color:var(--text)}
.perm-sec{background:transparent;color:var(--text);font-size:15px;font-weight:700;padding:0 2px;margin:20px 0 8px;display:flex;align-items:center;gap:8px}
.perm-sec::before{content:"";width:8px;height:20px;border-radius:4px;background:var(--brand-grad)}
.perm-group{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.perm-t{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.perm{border-radius:12px;padding:10px 12px;min-height:52px;transition:border-color var(--dur),background var(--dur)}
.perm .box{border-radius:7px;border-color:var(--line-2)}
.perm input:checked+.box{background:var(--brand-navy);border-color:var(--brand-navy)}
:root[data-theme="dark"] .perm input:checked+.box{background:var(--ok);border-color:var(--ok);color:#0B1118}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .perm input:checked+.box{background:var(--ok);border-color:var(--ok);color:#0B1118}}
.perm:has(input:checked){border-color:color-mix(in srgb,var(--navy) 35%,var(--line));background:color-mix(in srgb,var(--navy) 4%,var(--surface))}
.group-t{font-size:14px;font-weight:700;margin:22px 2px 10px}
.user-row .avatar{width:40px;height:40px}
.tile{border-radius:var(--r-lg);padding:16px;gap:6px}
.tile svg{width:22px;height:22px;color:var(--text);padding:9px;box-sizing:content-box;border-radius:12px;background:var(--surface-3)}

/* ---------- reports & charts ---------- */
.rep-card{border-radius:var(--r-lg);padding:var(--s4) var(--s4) 18px;box-shadow:var(--shadow)}
.rep-card h3{font-size:15px;font-weight:700;margin-bottom:14px}
.hbars{gap:14px}
.hbar .hl{font-size:13.5px}
.hbar .hl b{font-weight:600}
.hbar .ht{height:8px;border:0;background:var(--surface-3);border-radius:99px;margin-top:6px}
.hbar .ht span{border-radius:99px;transform-origin:right;animation:grow .7s var(--ease) both}
.hbars.navy .ht span{background:linear-gradient(90deg,#3B5168,#2C3E50)}
:root[data-theme="dark"] .hbars.navy .ht span{background:linear-gradient(90deg,#9DB4CC,#B8C7D9)}
@keyframes grow{from{transform:scaleX(0)}}
.donut-wrap{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.donut{width:116px;height:116px;flex:none}
.donut circle{fill:none;stroke-width:14}
.donut .c-bg{stroke:var(--surface-3)}
.donut-legend{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0;flex:1}
.donut-legend span{display:flex;align-items:center;gap:8px;min-width:0}
.donut-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.donut-legend em{font-style:normal;margin-inline-start:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.donut text{font-family:var(--font);fill:var(--text);font-weight:700;font-size:15px}
.donut text.s{fill:var(--muted);font-size:10px;font-weight:500}

/* ---------- notifications ---------- */
.notif-item{position:relative}
.notif-item.unread{border-inline-start-width:1px}
.notif-item.unread::after{content:"";position:absolute;top:18px;inset-inline-end:16px;width:8px;height:8px;border-radius:50%;background:var(--brand-red)}

/* ---------- desktop: sidebar shell ---------- */
.side{display:none}
@media (min-width:900px){
  body.has-side{padding-inline-start:264px}
  .side{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;inset-inline-start:0;width:264px;z-index:30;background:var(--surface);border-inline-end:1px solid var(--line);padding:20px 14px;gap:6px;overflow-y:auto}
  .side .sb{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
  .side .sb img{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:2px}
  .side .sb b{display:block;font-size:15.5px;font-weight:700;line-height:1.25}.side .sb small{color:var(--muted);font-size:12px}
  .side .sl{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;padding:14px 12px 6px}
  .side a,.side button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text-2);font-weight:500;font-size:14.5px;position:relative;transition:background .15s,color .15s}
  .side a:hover,.side button:hover{background:var(--surface-2);color:var(--text)}
  .side a.on,.side button.on{background:var(--surface-3);color:var(--text);font-weight:600}
  .side a.on::before,.side button.on::before{content:"";position:absolute;inset-inline-start:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-grad)}
  .side svg{width:20px;height:20px;flex:none}
  .side .badge{position:static;margin-inline-start:auto}
  .side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line)}
  .side .me .avatar{width:36px;height:36px;border-radius:12px;font-size:13px}
  .side .me b{font-size:13.5px;display:block;font-weight:600}.side .me small{font-size:12px;color:var(--muted)}
  body.has-side .secbar,body.has-side .bottomnav,body.has-side .tabs{display:none!important}
  body.has-side .topbar .brand img{display:none}
  body.has-side .topbar{padding-inline:32px}
  body.has-side main{max-width:1240px;padding:28px 32px 48px}
  body.has-side .topbar .wrap{max-width:1240px}
  body.has-side .ask{bottom:20px;left:32px;right:296px;max-width:none;margin:0}
  body.has-side .chat{max-width:860px;margin-inline:auto}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .home-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
  .hero{padding:28px}
  .hero .big{font-size:40px}
  .hero .spark{width:180px;height:64px;top:28px;inset-inline-end:28px}
  .page-head h2{font-size:28px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .list:has(.item.task),.list:has(.req-row),.list:has(.notif-item){display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media (min-width:1440px){ body.has-side main{max-width:1320px} .list:has(.item.task){grid-template-columns:1fr 1fr 1fr} }

/* ---------- motion ---------- */
.page-in>*:not(.ask){animation:pageIn .32s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  button:active,.btn:active,.item:active,.kpi:active,.sec-card:active{transform:none!important}
}
@media print{.side{display:none!important}body.has-side{padding:0!important}}
/* avatar tones (set by shell.js from the name) */
.tone-0{--tone-bg:#E8F0F9;--tone-fg:#2C5A8A}.tone-1{--tone-bg:#FDECEA;--tone-fg:#A3241B}.tone-2{--tone-bg:#E6F4EE;--tone-fg:#1F6B4C}
.tone-3{--tone-bg:#FDF4E0;--tone-fg:#7A5000}.tone-4{--tone-bg:#EFEAFB;--tone-fg:#5B3DAF}.tone-5{--tone-bg:#E9EDF2;--tone-fg:#2C3E50}
:root[data-theme="dark"] .tone-0{--tone-bg:#162536;--tone-fg:#9CC3EE}:root[data-theme="dark"] .tone-1{--tone-bg:#3A1D1C;--tone-fg:#FF9C94}:root[data-theme="dark"] .tone-2{--tone-bg:#13291F;--tone-fg:#6FD3A5}
:root[data-theme="dark"] .tone-3{--tone-bg:#2D2414;--tone-fg:#F5C46B}:root[data-theme="dark"] .tone-4{--tone-bg:#241C3B;--tone-fg:#C3B2F5}:root[data-theme="dark"] .tone-5{--tone-bg:#1C2633;--tone-fg:#C9D2DC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tone-0{--tone-bg:#162536;--tone-fg:#9CC3EE}:root:not([data-theme="light"]) .tone-1{--tone-bg:#3A1D1C;--tone-fg:#FF9C94}:root:not([data-theme="light"]) .tone-2{--tone-bg:#13291F;--tone-fg:#6FD3A5}
:root:not([data-theme="light"]) .tone-3{--tone-bg:#2D2414;--tone-fg:#F5C46B}:root:not([data-theme="light"]) .tone-4{--tone-bg:#241C3B;--tone-fg:#C3B2F5}:root:not([data-theme="light"]) .tone-5{--tone-bg:#1C2633;--tone-fg:#C9D2DC}}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ring svg{width:84px;height:84px;display:block;margin:0 auto}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .c-bg{stroke:var(--surface-3)}
.ring .c-v{animation:dash .9s var(--ease) both}
@keyframes dash{from{stroke-dasharray:0 999}}
.ring text{font-family:var(--font);font-weight:700;font-size:15px;fill:var(--text)}
.ring span{display:block;font-weight:600;font-size:13px;margin-top:4px}.ring small{color:var(--muted);font-size:12px}
.donut circle:not(.c-bg){animation:dash 1s var(--ease) both}
.item .t small{font-weight:500}

/* ===== v6 IA: one navigation ===== */
.secbar{display:none!important}
.home-btn{text-decoration:none}
@media (min-width:900px){ .home-btn{display:none!important} }
.side .s-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;padding-inline-start:18px;border-inline-start:1px solid var(--line);margin-inline-start:21px}
@media (min-width:900px){
  .side .s-sub button{padding:8px 10px;font-size:13.5px;border-radius:10px}
  .side .s-sub button svg{width:17px;height:17px}
  .side .s-sub button.on{background:color-mix(in srgb,var(--accent-a) 8%,transparent);color:var(--text)}
  .side .s-sub button.on::before{display:none}
  .side .s-sub .badge{position:static;margin-inline-start:auto}
}
/* inline, dismissible push hint */
.hint-inline{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;margin:0 0 var(--s4);border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--text-2);transition:opacity .18s}
.hint-inline>svg{width:18px;height:18px;color:var(--accent-a);flex:none}
.hint-inline span{flex:1;line-height:1.5}
.lnk{all:unset;cursor:pointer;color:var(--accent-a);font-weight:600;font-size:13px;padding:6px 8px;border-radius:8px;text-decoration:none}
.lnk:hover{background:color-mix(in srgb,var(--accent-a) 8%,transparent)}
:root[data-theme="dark"] .lnk{color:#FF9A7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lnk{color:#FF9A7A}}
.hint-inline .x{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}
.hint-inline .x:hover{background:var(--surface-3)}.hint-inline .x svg{width:16px;height:16px}
/* KPI tiles */
.kpi{overflow:hidden;min-height:120px}
.kpi .ki{margin-bottom:6px}
.kpi.navy .ki{background:var(--brand-navy);color:#fff}
:root[data-theme="dark"] .kpi.navy .ki{background:#2A3B4E;color:#D0DBE7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kpi.navy .ki{background:#2A3B4E;color:#D0DBE7}}
.kpi .kpi-v{margin-top:2px}
.kpi-spark{position:absolute;top:16px;inset-inline-end:14px;width:84px;height:28px}
.kpi-spark .l{fill:none;stroke:var(--warn);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi-spark .a{fill:color-mix(in srgb,var(--warn) 12%,transparent)}
@media (max-width:400px){.kpi-spark{width:56px}}
/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px 6px 8px;margin-bottom:var(--s4)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 8px}
.panel-h h3{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.panel-h .count{font-size:12px;font-weight:600;background:var(--danger-soft);color:var(--danger);border-radius:999px;padding:1px 9px}
.panel-h .ai-av{width:28px;height:28px;border-radius:9px}.panel-h .ai-av svg{width:15px;height:15px}
.panel-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:18px 12px 20px;color:var(--muted);font-size:13px}
.panel-empty svg{width:22px;height:22px;color:var(--ok);padding:10px;box-sizing:content-box;border-radius:14px;background:var(--ok-soft);margin-bottom:6px}
.panel-empty b{color:var(--text);font-size:14.5px;font-weight:600}
.alist,.feed{display:flex;flex-direction:column}
.arow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--text);transition:background .12s}
.arow:hover{background:var(--surface-2)}
.arow+.arow{box-shadow:0 -1px 0 var(--line)}
.arow .av{width:40px;height:40px;border-radius:13px;font-size:14px}
.arow .av.late{background:var(--danger-soft);color:var(--danger)}.arow .av.late svg{width:19px;height:19px}
.arow .ab{flex:1;min-width:0;display:flex;flex-direction:column}
.arow .ab b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .ab small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .ae{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.arow .ae b{font-weight:700;font-size:14.5px}.arow .ae small{font-size:11px;color:var(--muted);font-weight:500}
.fr{display:flex;align-items:flex-start;gap:12px;padding:10px 12px}
.fr+.fr{box-shadow:0 -1px 0 var(--line)}
.av.sm{width:32px;height:32px;border-radius:10px;font-size:12.5px}
.fb{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.5}
.ft{font-size:13.5px;color:var(--text-2)}.ft b{font-weight:600;color:var(--text)}
.fs{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fa{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none;margin-top:2px}
/* compact assistant */
.mini-ask{display:flex;gap:8px;padding:2px 8px 4px}
.mini-ask input{flex:1;min-width:0;min-height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);padding:0 14px;font-size:14.5px;color:var(--text)}
.mini-ask .btn{width:46px;padding:0;flex:none}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 8px 6px}
.mini-chips button{all:unset;cursor:pointer;font-size:12.5px;padding:6px 11px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.mini-chips button:hover{background:var(--line)}
/* section links */
.sec-links{display:flex;flex-direction:column}
.sec-links a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--text)}
.sec-links a:hover{background:var(--surface-2)}
.sec-links a+a{box-shadow:0 -1px 0 var(--line)}
.sec-links a>span:nth-child(2){flex:1;display:flex;flex-direction:column;min-width:0}
.sec-links b{font-weight:600;font-size:14.5px}.sec-links small{color:var(--muted);font-size:12.5px}
.sec-links>a>svg{width:18px;height:18px;color:var(--muted)}
.si{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);flex:none}
.si svg{width:20px;height:20px}.si.salaf{background:var(--brand-grad);color:#fff}.si.tasks{background:var(--brand-navy);color:#fff}
:root[data-theme="dark"] .si.tasks{background:#2A3B4E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .si.tasks{background:#2A3B4E}}
@media (min-width:900px){ .home-grid .col{min-width:0} .kpi{min-height:148px;padding:18px} .kpi .kpi-v{font-size:26px} .hello h2{font-size:30px} }
@media (max-width:899px){ .home-grid{display:block} }
@media (min-width:900px) and (max-width:1099px){ .home-grid{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,1fr)} body.has-side{padding-inline-start:240px} .side{width:240px} body.has-side .ask{right:272px} }
dialog:focus,dialog:focus-visible,.sheet-inner:focus{outline:none}