/* ============================================================================
   K9 Attendance — Cool Editorial
   ----------------------------------------------------------------------------
   ONE aesthetic. Light + dark. Scoped to html[data-aesthetic="editorial"]
   so nothing leaks when this layer ships.

   Direction: Linear's clarity × a magazine spread.
     - Cool palette, never warm. Pure-cool off-white / pure-cool near-black.
     - Purple brand (#7c3aed light / #a78bfa dark) shows ONLY on hover and
       active nav — never at rest on a button.
     - Cyan accent (#06b6d4 light / #67e8f9 dark) is reserved for the italic
       <em> moment inside headings + the focus ring. Precious by scarcity.
     - Typography pairing: Manrope body, Fraunces italic display, JetBrains
       Mono for labels, codes, and tabular numerals.
     - Hairline rules and dashed dividers replace card chrome.

   The single rule the dashboard reads by:
       "monochrome at rest · brand on intent"
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1 · Tokens
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] {
  /* Fonts (already loaded by index.html from Google Fonts) */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans:    var(--font-body);            /* alias for legacy consumers */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Status (theme-shared; theme nudges contrast below) */
  --ok:   #16a34a;
  --warn: #d97706;
  --err:  #dc2626;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --pad-page: 36px;
  --pad-card: 22px;
  --hairline: 1px;
}

html[data-aesthetic="editorial"][data-theme="light"] {
  /* Creamy paper palette — warm not cool. Pairs with the Fraunces italic
   * display + the warm splash gradient. Cards are a touch warmer than
   * the page so panels lift cleanly. */
  --bg:        #f7f2e8;     /* page — creamy paper */
  --bg-elev-1: #fdf8ed;     /* card — warmer than page */
  --bg-elev-2: #efe8d6;     /* secondary panel / hover */
  --bg-hover:  #ebe3cc;
  --bg-active: #e3d9bf;
  --line:      #e3d8bf;     /* default border — warm tan hairline */
  --line-hi:   #d8caa6;     /* hairline divider */
  --text:      #0a0a0c;     /* deep cool ink */
  --text-2:    #52525b;
  --text-3:    #a1a1aa;
  --brand:     #7c3aed;     /* purple at full saturation */
  --brand-2:   #6d28d9;
  --brand-soft: color-mix(in oklab, #7c3aed 10%, transparent);
  --accent:    #06b6d4;     /* cyan — italic <em> + focus rings only */
  --accent-soft: color-mix(in oklab, #06b6d4 14%, transparent);
  --ok:        #16a34a;
  --warn:      #d97706;
  --err:       #dc2626;
  --shadow:    none;        /* hairline borders carry the depth */
  --pop-bg:    rgba(255,255,255,0.96);
  color-scheme: light;
}

html[data-aesthetic="editorial"][data-theme="dark"] {
  --bg:        #0a0a0d;     /* cool near-black, NOT warm */
  --bg-elev-1: #14141a;     /* card surface */
  --bg-elev-2: #1c1c24;     /* secondary panel / hover */
  --bg-hover:  #1a1a22;
  --bg-active: #20202a;
  --line:      #24242b;
  --line-hi:   #1e1e26;
  --text:      #f3f3f5;     /* near-white, cool */
  --text-2:    #a1a1aa;
  --text-3:    #71717a;
  --brand:     #a78bfa;     /* softer purple for dark contrast */
  --brand-2:   #c4b5fd;
  --brand-soft: color-mix(in oklab, #a78bfa 16%, transparent);
  --accent:    #67e8f9;     /* softer cyan for dark */
  --accent-soft: color-mix(in oklab, #67e8f9 18%, transparent);
  --ok:        #4ade80;
  --warn:      #fbbf24;
  --err:       #f87171;
  --shadow:    none;
  --pop-bg:    rgba(20,20,26,0.96);
  color-scheme: dark;
}


/* ---------------------------------------------------------------------------
   2 · Base typography + body
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "calt";
}

/* Tabular numerals wherever a number could land — column alignment */
html[data-aesthetic="editorial"] .mono,
html[data-aesthetic="editorial"] .num,
html[data-aesthetic="editorial"] code,
html[data-aesthetic="editorial"] .stat-val,
html[data-aesthetic="editorial"] table td,
html[data-aesthetic="editorial"] table th,
html[data-aesthetic="editorial"] .t td,
html[data-aesthetic="editorial"] input[type="number"] {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The em element carries the only cyan in body copy — used inside titles
   for the "Good morning, *Miro*." moment. */
html[data-aesthetic="editorial"] em,
html[data-aesthetic="editorial"] .italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}


/* ---------------------------------------------------------------------------
   3 · Page header — Mono eyebrow + italic Fraunces title + dashed rule
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .page-header,
html[data-aesthetic="editorial"] .page > header,
html[data-aesthetic="editorial"] .ph {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
html[data-aesthetic="editorial"] .page-title,
html[data-aesthetic="editorial"] h1.page-title,
html[data-aesthetic="editorial"] .page > header h1,
html[data-aesthetic="editorial"] .ph-title,
html[data-aesthetic="editorial"] .ph h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
}
html[data-aesthetic="editorial"] .page-header .ph-meta,
html[data-aesthetic="editorial"] .page-header .muted,
html[data-aesthetic="editorial"] .page > header .muted,
html[data-aesthetic="editorial"] .ph .ph-meta,
html[data-aesthetic="editorial"] .ph-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
  opacity: 0.95;
}


/* ---------------------------------------------------------------------------
   4 · Section header — small uppercase eyebrow + italic title + dashed rule
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .section-header,
html[data-aesthetic="editorial"] .sh {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
html[data-aesthetic="editorial"] .section-header .sh-title,
html[data-aesthetic="editorial"] .section-header h2,
html[data-aesthetic="editorial"] .section-header h3,
html[data-aesthetic="editorial"] .sh-title,
html[data-aesthetic="editorial"] .sh h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}
html[data-aesthetic="editorial"] .section-header .sh-sub,
html[data-aesthetic="editorial"] .section-header .ph-sub,
html[data-aesthetic="editorial"] .sh .sh-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}


/* ---------------------------------------------------------------------------
   5 · Cards — flat, cool surface, hairline border, no warm beige
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  box-shadow: none;
}
html[data-aesthetic="editorial"] .card:hover {
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
}
html[data-aesthetic="editorial"] .card-compact {
  padding: 16px;
  border-radius: var(--r-md);
}


/* ---------------------------------------------------------------------------
   6 · Buttons
   ---------------------------------------------------------------------------
   Ghost  → transparent, hairline border, Manrope 500
   Primary → MONOCHROME at rest (ink-on-paper light / cream-on-ink dark)
            HOVER reveals the purple brand — the accent only shows at
            the moment of intent. This is the headline interaction rule.
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .btn {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
html[data-aesthetic="editorial"] .btn:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}
html[data-aesthetic="editorial"] .btn-ghost {
  border-color: transparent;
}
html[data-aesthetic="editorial"] .btn-ghost:hover {
  border-color: var(--line-hi);
  background: var(--bg-elev-2);
  color: var(--text);
}
html[data-aesthetic="editorial"] .btn-pri,
html[data-aesthetic="editorial"] .btn-primary {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.005em;
  background: var(--text);              /* ink (light) / cream (dark) */
  border-color: var(--text);
  color: var(--bg);                     /* paper (light) / ink (dark) */
  padding: 8px 18px;
}
html[data-aesthetic="editorial"] .btn-pri:hover,
html[data-aesthetic="editorial"] .btn-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}


/* ---------------------------------------------------------------------------
   7 · Pills + badges — Mono uppercase, 1px tinted border, 8% tinted bg
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .badge,
html[data-aesthetic="editorial"] .pill,
html[data-aesthetic="editorial"] .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  background: color-mix(in oklab, currentColor 8%, transparent);
}
html[data-aesthetic="editorial"] .badge-ok    { color: var(--ok); }
html[data-aesthetic="editorial"] .badge-warn  { color: var(--warn); }
html[data-aesthetic="editorial"] .badge-err   { color: var(--err); }
html[data-aesthetic="editorial"] .badge-info,
html[data-aesthetic="editorial"] .badge-brand { color: var(--brand); }
html[data-aesthetic="editorial"] .badge-mute  { color: var(--text-3); }


/* ---------------------------------------------------------------------------
   8 · Tables — hairline only, uppercase mono header, tabular body numbers
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .t,
html[data-aesthetic="editorial"] table {
  border-collapse: collapse;
  width: 100%;
}
html[data-aesthetic="editorial"] .t thead th,
html[data-aesthetic="editorial"] table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
html[data-aesthetic="editorial"] .t tbody td,
html[data-aesthetic="editorial"] table tbody td {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-hi);
  color: var(--text);
}
html[data-aesthetic="editorial"] .t tbody tr:hover td,
html[data-aesthetic="editorial"] table tbody tr:hover td {
  background: var(--bg-elev-2);
}
html[data-aesthetic="editorial"] .t td:first-child,
html[data-aesthetic="editorial"] table td:first-child {
  font-weight: 500;
}


/* ---------------------------------------------------------------------------
   9 · Mini stats — uppercase mono eyebrow + italic Fraunces 30px value
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .mini-stat,
html[data-aesthetic="editorial"] .stat-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
html[data-aesthetic="editorial"] .mini-stat .lbl,
html[data-aesthetic="editorial"] .stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
html[data-aesthetic="editorial"] .mini-stat .val,
html[data-aesthetic="editorial"] .stat-card .stat-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* ---------------------------------------------------------------------------
   10 · Sidebar — uppercase mono group labels, pill nav rows
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .sb-group-label,
html[data-aesthetic="editorial"] .nav-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 16px 6px;
  opacity: 0.85;
}
html[data-aesthetic="editorial"] .sb-item,
html[data-aesthetic="editorial"] .nav-item {
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: background-color 100ms, color 100ms;
}
html[data-aesthetic="editorial"] .sb-item:hover,
html[data-aesthetic="editorial"] .nav-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
html[data-aesthetic="editorial"] .sb-item.active,
html[data-aesthetic="editorial"] .nav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
}
html[data-aesthetic="editorial"] .sb-item .sb-sub,
html[data-aesthetic="editorial"] .nav-item .nav-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-top: 1px;
}


/* ---------------------------------------------------------------------------
   11 · Topbar — crumb above active page title
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .topbar,
html[data-aesthetic="editorial"] .tb {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html[data-aesthetic="editorial"] .topbar .crumb,
html[data-aesthetic="editorial"] .tb-crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
html[data-aesthetic="editorial"] .tb-active {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--text);
}


/* ---------------------------------------------------------------------------
   12 · Inputs — soft hairline + 3px purple focus ring
   --------------------------------------------------------------------------- */
html[data-aesthetic="editorial"] .inp,
html[data-aesthetic="editorial"] .input,
html[data-aesthetic="editorial"] .sel,
html[data-aesthetic="editorial"] input[type="text"],
html[data-aesthetic="editorial"] input[type="email"],
html[data-aesthetic="editorial"] input[type="number"],
html[data-aesthetic="editorial"] input[type="search"],
html[data-aesthetic="editorial"] input[type="date"],
html[data-aesthetic="editorial"] input[type="time"],
html[data-aesthetic="editorial"] textarea,
html[data-aesthetic="editorial"] select {
  font-family: var(--font-body);
  font-size: 13.5px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  padding: 8px 12px;
  transition: border-color 120ms, box-shadow 120ms;
}
html[data-aesthetic="editorial"] .inp:focus,
html[data-aesthetic="editorial"] textarea:focus,
html[data-aesthetic="editorial"] select:focus,
html[data-aesthetic="editorial"] input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* Caret in the cyan accent — the one place inputs nod to the em color. */
html[data-aesthetic="editorial"] input,
html[data-aesthetic="editorial"] textarea {
  caret-color: var(--accent);
}


/* ---------------------------------------------------------------------------
   13 · Editorial flourishes
   --------------------------------------------------------------------------- */

/* Quote / note block — italic Fraunces + 2px purple left border */
html[data-aesthetic="editorial"] blockquote,
html[data-aesthetic="editorial"] .ed-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 14px;
  margin: 8px 0;
}
html[data-aesthetic="editorial"] .ed-attrib {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* Dashed rule between lists / strips */
html[data-aesthetic="editorial"] hr,
html[data-aesthetic="editorial"] .ed-divider {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 20px 0;
  opacity: 0.95;
}

/* Greeting headline (.ed-greeting) — the "good morning, *Miro*." moment */
html[data-aesthetic="editorial"] .ed-greeting {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}

/* Selection — cool brand wash, not the default blue */
html[data-aesthetic="editorial"] ::selection {
  background: var(--brand-soft);
  color: var(--text);
}

/* Scrollbar — slim cool gutter (WebKit) */
html[data-aesthetic="editorial"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-aesthetic="editorial"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-aesthetic="editorial"] ::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
html[data-aesthetic="editorial"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}


/* ---------------------------------------------------------------------------
   14 · Primitive class fixes — wire to the actual class names used by
   primitives.jsx (PageHeader, SectionHeader, KPI) instead of the abstract
   .page-title / .mini-stat that don't exist in the dashboard markup.
   --------------------------------------------------------------------------- */

/* PageHeader = <div class="ph"> with bare <h2> + .ph-meta + .right */
html[data-aesthetic="editorial"] .ph {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
html[data-aesthetic="editorial"] .ph > div:first-child {
  min-width: 0;
}
html[data-aesthetic="editorial"] .ph h2,
html[data-aesthetic="editorial"] .ph h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
html[data-aesthetic="editorial"] .ph .ph-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-top: 8px;
}
html[data-aesthetic="editorial"] .ph .right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* KPI cards on Today scoreboard — .kpi wrapper, .kpi-label, .kpi-value */
html[data-aesthetic="editorial"] .kpi {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: border-color 120ms;
}
html[data-aesthetic="editorial"] .kpi:hover {
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
}
html[data-aesthetic="editorial"] .kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
html[data-aesthetic="editorial"] .kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
html[data-aesthetic="editorial"] .kpi-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
html[data-aesthetic="editorial"] .kpi-value span {
  /* The denominator + trend get tabular alignment too */
  font-feature-settings: "tnum" 1, "lnum" 1;
}
html[data-aesthetic="editorial"] .kpi-trend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 4px;
}
html[data-aesthetic="editorial"] .kpi-icon {
  color: var(--text-3);
  opacity: 0.85;
}

/* The .muted utility appears across the dashboard — make it carry the
   editorial palette so secondary text doesn't render in stale colors. */
html[data-aesthetic="editorial"] .muted {
  color: var(--text-3);
}

/* Person card / employee roster cards use .person-card + the .ava avatar */
html[data-aesthetic="editorial"] .person-card,
html[data-aesthetic="editorial"] .employee-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 120ms;
}
html[data-aesthetic="editorial"] .person-card:hover,
html[data-aesthetic="editorial"] .employee-card:hover {
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
}

/* Match the existing dashboard's .toolbar / search input chrome */
html[data-aesthetic="editorial"] .toolbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}