/* ============================================================================
   WFH Management — enhanceUI shared design system  (tokens + components)
   Built on the existing stack (Tailwind + Alpine + ApexCharts). No new framework.
   Single source of truth for admin / client / employee surfaces (de-triplication 5.1).
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* surfaces (light) */
  --canvas:#F3F1F9;--surface:#FFFFFF;--card:#FFFFFF;--subtle:#F8F6FC;--sider:#FBFAFE;--header:#FFFFFF;
  --plot:#F7F5FC;--grid-line:rgba(15,23,42,.08);--border-hi:rgba(15,23,42,.02);
  --border:#E4E0F2;--border-soft:#EEEAF7;
  /* brand */
  --primary:#6B3FE7;--primary-active:#4A2BA6;--primary-050:#EDE8FC;--primary-100:#DDD3FA;--primary-600:#5530BE;
  --secondary:#334155;
  /* text */
  --tp:#0F172A;--ts:#334155;--tm:#64748B;
  /* semantic */
  --success:#16A34A;--warn:#D97706;--danger:#DC2626;--pending:#2563EB;--leave:#7C3AED;--external:#0891B2;--muted:#64748B;
  /* categorical viz palette (brand-anchored, colorblind-considered — Plotly-inspired) */
  --cat-1:#6B3FE7;--cat-2:#0891B2;--cat-3:#16A34A;--cat-4:#D97706;--cat-5:#DC2626;--cat-6:#2563EB;
  /* elevation (2-layer: ambient + key) */
  --sh-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --sh-md:0 4px 8px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg:0 16px 40px -12px rgba(16,24,40,.22),0 4px 10px -4px rgba(16,24,40,.10);
  /* geometry + motion */
  --hd:64px;--rail:240px;--rail-sm:64px;
  --r-card:16px;--r-ctl:10px;--r-btn:999px;
  --dur-fast:150ms;--dur:220ms;--ease:cubic-bezier(.16,1,.3,1);
}
.dark{
  --canvas:#0D0D1A;--surface:#1C1C3E;--card:#1C1C3E;--subtle:#15152B;--sider:#141430;--header:#1C1C3E;
  --plot:#181834;--grid-line:rgba(255,255,255,.07);--border-hi:rgba(255,255,255,.05);
  --border:#2E2E5C;--border-soft:#242449;
  --primary:#7B5FF5;--primary-active:#B39DFF;--primary-050:rgba(123,95,245,.18);--primary-100:rgba(123,95,245,.28);--primary-600:#8A6FF7;
  --secondary:#94A3B8;
  --tp:#F1F5F9;--ts:#CBD5E1;--tm:#94A3B8;
  --success:#22C55E;--warn:#F59E0B;--danger:#EF4444;--pending:#3B82F6;--leave:#A78BFA;--external:#22D3EE;--muted:#94A3B8;
  --cat-1:#7B5FF5;--cat-2:#22D3EE;--cat-3:#22C55E;--cat-4:#F59E0B;--cat-5:#EF553B;--cat-6:#636EFA;
  --sh-sm:0 1px 2px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.5);
  --sh-md:0 2px 4px rgba(0,0,0,.4),0 12px 28px -10px rgba(0,0,0,.6);
  --sh-lg:0 4px 8px rgba(0,0,0,.45),0 20px 48px -12px rgba(0,0,0,.7);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
body{background:var(--canvas);color:var(--tp);font-family:'Cairo','Segoe UI',system-ui,Tahoma,sans-serif;font-size:14px;transition:background var(--dur),color var(--dur)}
[x-cloak]{display:none!important}
.muted{color:var(--tm)}.sec{color:var(--ts)}
svg{display:block}

/* ── 3. STANDARDIZED ICON PRIMITIVE (one rule, everywhere — 5.5) ────────── */
.ico{display:grid;place-items:center;line-height:0;flex:none}
.nav-ic{display:inline-grid;place-items:center;line-height:0;color:inherit;flex:none;width:20px;height:20px}
.icbtn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;line-height:0;color:var(--ts);
  border:1px solid var(--border);background:var(--surface);cursor:pointer;position:relative;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.icbtn:hover{border-color:var(--primary);color:var(--primary)}
.icbtn.on{background:var(--primary-050);border-color:var(--primary);color:var(--primary-active)}
.icbtn.ghost{border-color:transparent;background:transparent}
.icbtn.ghost:hover{background:var(--subtle);border-color:transparent;color:var(--tp)}
.icbtn .badge{position:absolute;top:5px;inset-inline-start:6px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}

/* ── 4. APP SHELL (full-width header aligned to the rail on one grid) ────── */
.appheader{background:var(--header);border-bottom:1px solid var(--border);box-shadow:var(--sh-sm);height:var(--hd)}
.brand{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#7B5FF5,#4A2BA6);box-shadow:0 4px 12px rgba(107,63,231,.30);display:grid;place-items:center;color:#fff}
.sider{background:var(--sider);border-inline-end:1px solid var(--border-soft);position:relative}
.sider>*{position:relative;z-index:1}
/* faceted diamond-mosaic corner texture — flat geometric tiles, fading from faint outlines to solid brand tiles */
.sider .sider-tex{position:absolute;right:0;bottom:0;z-index:0;pointer-events:none}
.grouplbl{color:var(--tm);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px 4px;height:auto}
.navlink{color:var(--ts);border-radius:9px;margin:2px 10px;font-weight:500;transition:background var(--dur-fast),color var(--dur-fast)}
.navlink:hover{background:var(--border-soft)}
.navlink.active{background:var(--primary);color:#fff;font-weight:600}
.navlink.active .nav-ic{color:#fff}
.collapse-btn{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid var(--border-soft);color:var(--tm);cursor:pointer;font-weight:500;transition:background var(--dur-fast)}
.collapse-btn:hover{background:var(--border-soft)}

/* ── 5. CARDS + elevation + metric tiles ───────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-sm);transition:box-shadow var(--dur),border-color var(--dur),transform var(--dur),background var(--dur)}
.card--tile{position:relative;overflow:hidden}
.card--tile:hover{box-shadow:var(--sh-md);border-color:var(--primary);transform:translateY(-3px)}
.card--tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--external))}
.card--alert{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.card--tile.card--alert::before{background:linear-gradient(90deg,var(--danger),var(--warn))}
.card--tile.card--alert:hover{border-color:var(--danger)}
.kpi-v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pagetitle{font-size:22px;font-weight:700;letter-spacing:-.01em}
.chip-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;line-height:0;flex:none}

/* ── 6. BUTTONS (pill; designed hover/active/focus states) ─────────────── */
.btn{border-radius:var(--r-btn);font-weight:600;font-size:14px;padding:0 .9rem;height:36px;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;transition:filter var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-primary:active{transform:scale(.97)}
.btn-default{background:var(--surface);color:var(--ts);border:1px solid var(--border)}
.btn-default:hover{border-color:var(--primary);color:var(--primary)}
.btn-default:active{transform:scale(.97)}
.btn-link{color:var(--primary);background:transparent;padding-inline:0}

/* ── 7. FORM CONTROLS ──────────────────────────────────────────────────── */
.control{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);color:var(--tp);padding:.45rem .7rem;height:36px;width:100%;font-size:14px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
select.control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;padding-inline-end:1.9rem;line-height:1.6;text-overflow:ellipsis}
[dir=rtl] select.control{background-position:left .7rem center}
[dir=ltr] select.control{background-position:right .7rem center}
select.control option{color:var(--tp);background:var(--surface)}
.col-filter{height:30px;font-size:12px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--tp);padding:.25rem .5rem}
.tbl-search::placeholder{color:var(--tm)}

/* control bar (Dash-style filter row) */
.ctrlbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctrlsel{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ts);background:var(--surface);border:1px solid var(--border);border-radius:9px;height:34px;padding:0 11px;cursor:pointer;transition:border-color var(--dur-fast)}
.ctrlsel:hover{border-color:var(--primary)}.ctrlsel .ico{color:var(--tm)}
.livepill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent);border-radius:999px;padding:5px 10px}
.livepill .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.rangechip{font-size:11px;font-weight:600;color:var(--tm);background:transparent;border:1px solid var(--border);border-radius:7px;padding:4px 10px;cursor:pointer;transition:all var(--dur-fast)}
.rangechip.on{background:var(--primary-050);border-color:var(--primary);color:var(--primary)}

/* ── 8. TABLES ─────────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%}
thead th{background:var(--subtle);color:var(--ts);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;text-align:start;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
thead th:hover{color:var(--primary)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}
tbody tr{transition:background var(--dur-fast)}
tbody tr:hover{background:var(--subtle)}
th[draggable].dragging{opacity:.4}.th-in{display:inline-flex;align-items:center;gap:3px}.caret{font-size:9px;color:var(--tm)}
tr.frow th{background:var(--surface);padding:6px 8px}

/* ── 9. TAGS / STATUS ──────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:12px;font-weight:600;padding:2px 8px;letter-spacing:.02em}
.dot{width:7px;height:7px;border-radius:50%}

/* ── 10. MODAL (accessible dialog shell) ───────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow:auto}
.modal-box{background:var(--surface);border-radius:16px;width:100%;max-width:680px;box-shadow:var(--sh-lg);max-height:92vh;overflow:auto;border:1px solid var(--border)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-bottom:1px solid var(--border)}
.modal-sec{font-weight:700;font-size:14px;margin:11px 0 6px}
.modal-box .p-6{padding:16px 22px}.modal-box .control{height:38px}
.infocard dt{color:var(--tm);font-size:12px}.infocard dd{font-weight:500;font-size:14px}

/* ── 11. COMBOBOX ──────────────────────────────────────────────────────── */
.combo{position:relative;flex:1}
.combo-list{position:absolute;top:calc(100% + 2px);inset-inline:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:10px;max-height:210px;overflow:auto;box-shadow:var(--sh-md)}
.combo-opt{padding:.45rem .65rem;cursor:pointer;font-size:14px}.combo-opt:hover{background:var(--subtle)}.combo-opt.hidden{display:none}

/* ── 12. ACCESSIBILITY — focus-visible everywhere (4.1) ────────────────── */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.navlink:focus-visible,.icbtn:focus-visible,.ctrlsel:focus-visible,.rangechip:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:9px}
.control:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 13. MOTION (respect reduced-motion — 4.3) ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .card--tile:hover{transform:none}
}