/* Modern "clean SaaS" theme layer, loaded after office.css.
   Visual only: no IDs, markup or behaviour depend on it. Selectors start with
   body[data-office-app] so they outrank Tailwind's runtime utilities (incl. dark: variants). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ── Tokens ─────────────────────────────────────────────── */
:root{
 --m-bg:#f6f7fb;--m-surface:#fff;--m-subtle:#f2f4f8;--m-hover:#f7f8fb;--m-line:#e7e9f0;--m-line-strong:#d8dce6;
 --m-ink:#0e1321;--m-muted:#667085;--m-accent:#5b54e8;--m-accent-soft:#eef0ff;--m-ring:#5b54e833;
 --m-btn:#5b54e8;--m-btn-2:#8b5cf6;--m-glow:#6366f11a;
 --m-shadow-sm:0 1px 2px #1018280a,0 1px 3px #1018280d;--m-shadow-md:0 4px 8px -2px #1018280f,0 14px 28px -10px #1018281f;--m-shadow-lg:0 24px 48px -12px #1018282e;
 --m-rail-bg:#fbfbfd;--m-rail-ink:#0e1321;--m-rail-muted:#5b6475;--m-rail-hover:#f0f1f5;--m-rail-active:#eef0ff;--m-rail-active-ink:#4338ca;
 --office-bg:var(--m-bg);--office-surface:var(--m-surface);--office-ink:var(--m-ink);--office-muted:var(--m-muted);--office-line:var(--m-line);--office-accent:var(--m-accent)}
html.dark{
 --m-bg:#090b11;--m-surface:#10131b;--m-subtle:#161a24;--m-hover:#151925;--m-line:#1e2330;--m-line-strong:#2a3040;
 --m-ink:#eaedf5;--m-muted:#98a2b3;--m-accent:#8b87ff;--m-accent-soft:#8b87ff1f;--m-ring:#8b87ff40;
 --m-btn:#6760f0;--m-btn-2:#9a6bff;--m-glow:#8b87ff14;
 --m-shadow-sm:0 1px 2px #00000066;--m-shadow-md:0 10px 28px -10px #000000b3;--m-shadow-lg:0 24px 60px -12px #000000cc;
 --m-rail-bg:#0c0f17;--m-rail-ink:#eaedf5;--m-rail-muted:#8f98ab;--m-rail-hover:#ffffff0a;--m-rail-active:#8b87ff24;--m-rail-active-ink:#d4d2ff;
 --office-bg:var(--m-bg);--office-surface:var(--m-surface);--office-ink:var(--m-ink);--office-muted:var(--m-muted);--office-line:var(--m-line);--office-accent:var(--m-accent)}

/* ── Base ───────────────────────────────────────────────── */
body.office-app[data-office-app]{background:radial-gradient(1100px 520px at 75% -8%,var(--m-glow),transparent 62%) fixed,var(--m-bg);color:var(--m-ink);font-family:Inter,"Nirmala UI","Noto Sans Devanagari",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body[data-office-app] ::selection{background:var(--m-accent);color:#fff}
body[data-office-app] ::-webkit-scrollbar{width:10px;height:10px}
body[data-office-app] ::-webkit-scrollbar-track{background:transparent}
body[data-office-app] ::-webkit-scrollbar-thumb{background:var(--m-line-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box}

/* Dark mode: swap Tailwind's blue-tinted slate for neutral tokens. */
html.dark body[data-office-app] :is(.dark\:bg-slate-900,.dark\:bg-slate-900\/60,.glass-card){background-color:var(--m-surface)}
html.dark body[data-office-app] :is(.dark\:bg-slate-900\/80,.dark\:bg-slate-900\/85,.dark\:bg-slate-900\/90){background-color:color-mix(in srgb,var(--m-surface) 86%,transparent)}
html.dark body[data-office-app] :is(.dark\:bg-slate-800,.dark\:bg-slate-800\/60,.dark\:bg-slate-800\/50,.dark\:bg-slate-950){background-color:var(--m-subtle)}
html.dark body[data-office-app] :is(.dark\:border-slate-800,.dark\:border-slate-800\/80,.dark\:border-slate-800\/60,.dark\:border-slate-800\/50){border-color:var(--m-line)}
html.dark body[data-office-app] :is(.dark\:border-slate-700,.dark\:border-slate-700\/80){border-color:var(--m-line-strong)}
html.dark body[data-office-app] :is(.dark\:divide-slate-800,.dark\:divide-slate-800\/60)>:not([hidden])~:not([hidden]){border-color:var(--m-line)}

/* ── Cards ──────────────────────────────────────────────── */
body[data-office-app] :is(.rounded-xl,.rounded-2xl,.rounded-3xl):is(.bg-white,.glass-card,.glass):not(button):not(a):not(header):not(.shadow-xl):not(.shadow-2xl){border-color:var(--m-line);box-shadow:var(--m-shadow-sm)}
body[data-office-app] .glass-card{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Presence KPI tiles: soft colour wash + hairline accent instead of a thick top border. */
body[data-office-app] .kpi-card{--kpi:var(--m-accent);position:relative;overflow:hidden;background:radial-gradient(140% 110% at 100% 0%,color-mix(in srgb,var(--kpi) 14%,transparent),transparent 58%),var(--m-surface);border:1px solid var(--m-line);border-radius:18px;box-shadow:var(--m-shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body[data-office-app] :is(#kpiCard-in,#kpiCard-out,#kpiCard-absent,#kpiCard-missed_out,#kpiCard-all){border-top:1px solid var(--m-line)}
body[data-office-app] :is(#kpiCard-in,#kpiCard-out,#kpiCard-absent,#kpiCard-missed_out,#kpiCard-all):hover{border-color:color-mix(in srgb,var(--kpi) 40%,var(--m-line));box-shadow:var(--m-shadow-md);transform:translateY(-2px)}
body[data-office-app] .kpi-card::after{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--kpi),transparent)}
#kpiCard-in{--kpi:#10b981}#kpiCard-out{--kpi:#f59e0b}#kpiCard-absent{--kpi:#94a3b8}#kpiCard-missed_out{--kpi:#f97316}#kpiCard-all{--kpi:#6366f1}
/* Presence's Tailwind config has no brand-300, so the dark "Total" label fell back to brand-800. */
html.dark body[data-office-app] #kpiCard-all .text-brand-800{color:#a5b4fc}

/* ── Header ─────────────────────────────────────────────── */
body.office-app[data-office-app] header{background:color-mix(in srgb,var(--m-surface) 76%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--m-line);box-shadow:none}

/* ── Side rail: light in light mode, near-black in dark mode ── */
body[data-office-app] .office-rail{background:var(--m-rail-bg);color:var(--m-rail-muted);border-right:1px solid var(--m-line)}
body[data-office-app] .office-rail .office-brand{color:var(--m-rail-ink)}
body[data-office-app] .office-rail .office-brand strong span{color:var(--m-accent)!important}
body[data-office-app] .office-rail .office-brand small,body[data-office-app] .office-nav-label{color:var(--m-rail-muted)}
body[data-office-app] .office-nav a{color:var(--m-rail-muted);font-weight:500;border-radius:10px}
body[data-office-app] .office-nav a:hover{background:var(--m-rail-hover);color:var(--m-rail-ink)}
body[data-office-app] .office-nav a[aria-current=page]{background:var(--m-rail-active);color:var(--m-rail-active-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--m-accent)}
body[data-office-app] .office-rail-bottom{border-top-color:var(--m-line)}
body[data-office-app] .office-rail-bottom strong{color:var(--m-rail-ink)}
body[data-office-app] .office-rail-bottom p{color:var(--m-rail-muted)}
body[data-office-app] .office-rail .office-install{background:var(--m-surface);border-color:var(--m-line);color:var(--m-rail-ink)}
@media(max-width:1099px){
 body[data-office-app] .office-rail{border-right:0;border-bottom:1px solid var(--m-line)}
 body[data-office-app] .office-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--m-accent)}
}

/* ── Page intro ─────────────────────────────────────────── */
body[data-office-app] .office-intro .office-eyebrow{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--m-accent-soft);color:var(--m-accent);letter-spacing:.14em}
body[data-office-app] .office-intro h2{font-weight:800;letter-spacing:-.025em}
body[data-office-app] .office-install{border-radius:10px;border-color:var(--m-line);box-shadow:var(--m-shadow-sm);transition:border-color .15s,box-shadow .15s}
body[data-office-app] .office-install:hover{border-color:var(--m-line-strong);box-shadow:var(--m-shadow-md)}

/* ── Buttons ────────────────────────────────────────────── */
body[data-office-app] :is(.bg-indigo-600,.bg-brand-600){background-color:var(--m-btn);background-image:linear-gradient(180deg,#ffffff24,#ffffff00);box-shadow:inset 0 1px 0 #ffffff2e,0 1px 2px #1018281f,0 6px 16px -6px color-mix(in srgb,var(--m-btn) 70%,transparent)}
body[data-office-app] :is(.bg-gradient-to-r,.bg-gradient-to-tr):is(.from-brand-600,.from-indigo-600){background-image:linear-gradient(135deg,var(--m-btn),var(--m-btn-2))}
body[data-office-app] :is(button,a):is(.bg-indigo-600,.bg-brand-600,.bg-gradient-to-r){transition:filter .15s,transform .1s,box-shadow .15s}
body[data-office-app] :is(button,a):is(.bg-indigo-600,.bg-brand-600,.bg-gradient-to-r):hover{filter:brightness(1.08)}
body[data-office-app] :is(button,a).bg-white{box-shadow:var(--m-shadow-sm);transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s}
body[data-office-app] :is(button,a).bg-white:hover{border-color:var(--m-line-strong)}

/* ── Form controls (inline-styled login overlay fields keep their own look) ── */
body.office-app[data-office-app] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):not([style]){border:1px solid var(--m-line-strong);background-color:var(--m-surface);color:var(--m-ink);border-radius:12px;box-shadow:0 1px 2px #1018280a;transition:border-color .15s,box-shadow .15s}
body.office-app[data-office-app] :is(input,select,textarea):not([style]):focus{border-color:var(--m-accent);box-shadow:0 0 0 4px var(--m-ring);outline:none}
body.office-app[data-office-app] :is(input,select,textarea):not([style]):focus-visible{outline:none!important}
body.office-app[data-office-app] input[type=checkbox]{accent-color:var(--m-accent)}

/* ── Tables ─────────────────────────────────────────────── */
body.office-app[data-office-app] :is(thead,thead>tr){background:var(--m-subtle)}
body.office-app[data-office-app] th{color:var(--m-muted);font-size:11px;font-weight:600;letter-spacing:.06em;border-bottom:1px solid var(--m-line)}
body.office-app[data-office-app] tbody>tr{transition:background-color .12s}
body.office-app[data-office-app] tbody>tr:hover{background-color:var(--m-hover)}

/* ── People app tabs: underline tabs become a segmented control ── */
body[data-office-app=admin] main>div:has(>.tab-btn){width:fit-content;max-width:100%;gap:4px;padding:4px;border:1px solid var(--m-line);border-radius:14px;background:var(--m-subtle)}
body[data-office-app=admin] .tab-btn{border:0;border-radius:10px;padding:8px 14px;font-size:13px;transition:background-color .15s,color .15s,box-shadow .15s}
body[data-office-app=admin] .tab-btn:hover{background:color-mix(in srgb,var(--m-surface) 60%,transparent)}
body[data-office-app=admin] .tab-btn.border-indigo-600{background:var(--m-surface);color:var(--m-accent);font-weight:600;box-shadow:var(--m-shadow-sm),0 0 0 1px var(--m-line)}

/* ── Login ──────────────────────────────────────────────── */
body[data-office-app] #loginView .glass-card{border-radius:24px;border-color:var(--m-line);box-shadow:var(--m-shadow-lg)}
@media(min-width:1100px){
 body[data-office-app] .login-story{background:radial-gradient(60% 50% at 85% 95%,#7c3aed55,transparent 65%),radial-gradient(55% 45% at 5% 0%,#4f46e555,transparent 60%),linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 44px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/44px 100%,#090b12}
 body[data-office-app] .login-story h2 span{background:linear-gradient(90deg,#a5b4fc,#c4b5fd 45%,#6ee7b7);-webkit-background-clip:text;background-clip:text;color:transparent}
 /* Payroll's rail lives inside #payrollView, which already reserves the rail width. */
 body.office-app[data-office-app=payroll]{padding-left:0}
 /* #loginView reserves 48% for the story panel, but payroll's copy carries `hidden`; show it. */
 body.office-app[data-office-app=payroll] .login-story.hidden{display:flex!important}
}