/* Direction: premium corporate — navy ink, royal blue accent, crisp white cards */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f5fb;
  --surface: #ffffff;
  --surface-2: #e6e9f0;
  --border: #d9e1f0;
  --border-strong: #abafb9;
  --ink: #0a1f44;
  --muted: #53627f;
  --accent: #1d4fd8;
  --accent-hover: #1943b8;
  --accent-ink: #ffffff;
  --accent-text: #1a43b8;
  --accent-strong: #1d4fd8;
  --accent-soft: #d4def6;
  --accent-border: #92aaeb;
  --success: #12805a;
  --success-ink: #ffffff;
  --success-soft: #d7e7e8;
  --success-strong: #106d4c;
  --warning: #b86e00;
  --warning-ink: #0a1f44;
  --warning-soft: #ebe5dd;
  --warning-strong: #8f5600;
  --danger: #cf3148;
  --danger-ink: #ffffff;
  --danger-soft: #eedde6;
  --danger-strong: #af293d;
  --chart-1: #1d4fd8;
  --chart-2: #b53cc0;
  --chart-3: #930318;
  --chart-4: #936e0e;
  --chart-5: #075e14;
  --chart-6: #128791;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px #0a1f4414, 0 10px 28px #0a1f440f;
  --x-navy: #0a1f44;
  --x-navy-2: #11306b;
  --x-royal: #2b63e8;
  --x-on-photo: #ffffff;
  --x-glass: #ffffff24;
  --x-glass-2: #ffffff14;
  --x-half: #d9722a;
  --x-violet: #7557d6;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030610;
  --surface: #1c1f28;
  --surface-2: #10121c;
  --border: #262931;
  --border-strong: #4f5158;
  --ink: #f2f5fb;
  --muted: #92959d;
  --accent: #1d4fd8;
  --accent-hover: #3f69de;
  --accent-ink: #ffffff;
  --accent-text: #6a8be5;
  --accent-strong: #5d81e3;
  --accent-soft: #09163c;
  --accent-border: #0f276a;
  --success: #12805a;
  --success-ink: #ffffff;
  --success-soft: #062120;
  --success-strong: #469c7e;
  --warning: #b86e00;
  --warning-ink: #ffffff;
  --warning-soft: #2b1d0c;
  --warning-strong: #be7a14;
  --danger: #cf3148;
  --danger-ink: #ffffff;
  --danger-soft: #300f1c;
  --danger-strong: #da5e70;
  --chart-1: #2d63ed;
  --chart-2: #c951d4;
  --chart-3: #e52e39;
  --chart-4: #a87f18;
  --chart-5: #1b9a2a;
  --chart-6: #1c9ba6;
}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--x-royal);color:var(--x-on-photo);font-family:var(--font-display);font-weight:700;flex-shrink:0;font-size:.95rem}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:9999px;margin-right:.45rem;flex-shrink:0}
.st-present{background:var(--success)}.st-late{background:var(--warning)}.st-half{background:var(--x-half)}
.st-absent{background:var(--danger)}.st-leave{background:var(--accent)}.st-holiday{background:var(--x-violet)}.st-off{background:var(--muted)}
.badge{display:inline-flex;align-items:center;white-space:nowrap}

.hero-band{background:linear-gradient(135deg,var(--x-navy) 0%,var(--x-navy-2) 55%,var(--x-royal) 130%);color:var(--x-on-photo);position:relative;overflow:hidden}
.hero-band::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:9999px;border:36px solid var(--x-glass-2);pointer-events:none}
.grid-bg{background-color:var(--x-navy);background-image:linear-gradient(var(--x-glass-2) 1px,transparent 1px),linear-gradient(90deg,var(--x-glass-2) 1px,transparent 1px);background-size:36px 36px}
.on-navy{color:var(--x-on-photo)}
.on-navy-dim{color:var(--x-on-photo);opacity:.75}

.side{background:var(--x-navy);color:var(--x-on-photo)}
.side-link{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border-radius:12px;color:var(--x-on-photo);opacity:.78;font-weight:500;font-size:.95rem;transition:background .15s,opacity .15s}
.side-link:hover{background:var(--x-glass-2);opacity:1}
.side-link.active{background:var(--x-glass);opacity:1;font-weight:600}
.side-link:focus-visible,.nav-item:focus-visible{outline:2px solid var(--x-royal);outline-offset:2px}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--x-royal);color:var(--x-on-photo);flex-shrink:0}

.bottom-nav{background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem 0 .45rem;font-size:.68rem;font-weight:600;color:var(--muted);position:relative}
.nav-item.active{color:var(--accent-text)}
.nav-item.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}

.bell-dot{position:absolute;top:-4px;right:-4px;min-width:1.1rem;height:1.1rem;border-radius:9999px;background:var(--danger);color:var(--x-on-photo);font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .25rem}

.punch-btn{min-height:3.9rem;font-size:1.1rem;font-weight:700}
.punch-btn:not(:disabled){animation:ring 2.6s ease-out infinite}
.punch-out{background:var(--x-navy);color:var(--x-on-photo)}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
html.reduced-motion .punch-btn{animation:none}

.kpi{display:flex;flex-direction:column;gap:.35rem;padding:1rem;transition:transform .15s}
.kpi:hover{transform:translateY(-2px)}
.kpi-ico{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:10px;background:var(--accent-soft);color:var(--accent-strong)}
.tabular{font-variant-numeric:tabular-nums}

.bar-col{display:flex;flex-direction:column-reverse;border-radius:8px 8px 3px 3px;overflow:hidden;width:100%;background:var(--surface-2)}
.donut{width:9.5rem;height:9.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.donut>div{width:6.4rem;height:6.4rem;border-radius:9999px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}

.role-tab{flex:1;padding:.65rem;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--muted);transition:background .15s,color .15s}
.role-tab[aria-pressed="true"]{background:var(--accent);color:var(--x-on-photo)}
.role-tabs{display:flex;gap:.25rem;padding:.25rem;border-radius:14px;background:var(--surface-2)}

.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:.65rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:.7rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.selfie-thumb{width:2.2rem;height:2.2rem;border-radius:8px;object-fit:cover}
.unread{border-left:3px solid var(--accent)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}