/* ═══════════════════════════════════════════════════════════════════════════
   SilverClean — shared design tokens
   ───────────────────────────────────────────────────────────────────────────
   One palette for every server-rendered surface: admin dashboard, worker
   dashboard, client portal, login, password change, and the error pages.

   Before this file, each of the ten templates carried its own inline <style>
   with its own hard-coded hexes — the admin dashboard alone had 358 colour
   literals and ran burnt orange, while the worker portal ran green and the
   client portal ran violet. A manager, a cleaner and a customer each saw what
   looked like a different product.

   The palette matches marketing/styles.css so the site that sells SilverClean
   and the software itself are recognisably one thing.

   RULE: semantic colours (ok / warn / danger / info) are deliberately separate
   from --brand. A status pill means the same thing regardless of branding, so
   re-skinning must never silently change what a badge communicates.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────
     Deep teal reads as the marketing site's cyan on a light ground while
     still passing contrast for text; the bright cyan is reserved for dark
     surfaces where it has room to glow. */
  --brand:         #0e7490;
  --brand-strong:  #0b5c73;   /* hover / pressed */
  --brand-lit:     #22d3ee;   /* accents on dark grounds only */
  --brand-wash:    #ecfeff;   /* active nav, tinted rows */
  --brand-wash-2:  #d7f5fb;   /* hover on a washed surface */
  --brand-line:    #b6e6f0;   /* borders on washed surfaces */

  /* ── Ink & ground ──────────────────────────────────────────────────── */
  --ink:           #0b1220;   /* headings */
  --ink-2:         #334155;   /* body */
  /* #64748b measured 4.34:1 on --ground, under the 4.5:1 floor. Labels sit on
     the page background as often as on a card, so it is darkened one step.
     Kept in step with SilverCleanApp's textLight — see ThemeProvider.tsx. */
  --ink-3:         #5d6b80;   /* labels, secondary */
  --ink-4:         #94a3b8;   /* placeholders only — never real text */
  --ground:        #f1f5f9;   /* page background */
  --surface:       #ffffff;   /* cards, panels, modals */
  --surface-2:     #f8fafc;   /* subtle fills, table heads, hover rows */
  --line:          #e2e8f0;   /* hairlines */
  --line-2:        #cbd5e1;   /* input borders */

  /* ── Dark header band ──────────────────────────────────────────────── */
  --header-from:   #0b1220;
  --header-to:     #0e2438;
  --on-dark:       #f2f6fc;
  --on-dark-2:     rgba(226,236,247,.72);

  /* ── Semantic — independent of brand ───────────────────────────────── */
  --ok:            #059669;
  --ok-wash:       #d1fae5;
  --ok-ink:        #065f46;
  /* #d97706 as a status dot measured 2.91:1 on --ground, under the 3:1 floor
     for meaningful non-text. The wash and ink are unchanged. */
  --warn:          #b45309;
  --warn-wash:     #fef3c7;
  --warn-ink:      #92400e;
  --danger:        #dc2626;
  --danger-wash:   #fee2e2;
  --danger-ink:    #991b1b;
  --info:          #2563eb;
  --info-wash:     #dbeafe;
  --info-ink:      #1e40af;

  /* ── Elevation ─────────────────────────────────────────────────────────
     Flat by default. Shadows indicate layering (modals, popovers), not
     importance — a page where every card floats has no hierarchy at all. */
  --sh-1: 0 1px 2px rgba(11,18,32,.05);
  --sh-2: 0 1px 3px rgba(11,18,32,.07), 0 4px 12px rgba(11,18,32,.05);
  --sh-3: 0 4px 12px rgba(11,18,32,.10), 0 12px 32px rgba(11,18,32,.08);

  /* ── Radius & type ─────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  /* Menlo first, deliberately.
     The mobile app resolves MONO to Menlo on iOS and Droid Sans Mono on
     Android; the web previously led with SF Mono / Consolas. Same product,
     same figure, three different zeros — dotted on macOS, slashed on Windows,
     plain on Android. Leading with Menlo means macOS and iOS agree exactly,
     and the remaining fallbacks are ordered so the closest match wins on each
     platform rather than whatever the OS happens to prefer.
     A single bundled face would be exact everywhere; that costs a font file
     and expo-font, and is the upgrade if the difference still shows. */
  --mono: Menlo, ui-monospace, SFMono-Regular, 'SF Mono', 'DejaVu Sans Mono',
          'Roboto Mono', 'Droid Sans Mono', Consolas, 'Liberation Mono',
          monospace;

  /* ── Easing ────────────────────────────────────────────────────────────
     Two curves, borrowed from the marketing stylesheet, used everywhere.
     Consistency is what reads as "designed"; a page where every transition
     picks the browser default `ease` reads as assembled. The dashboard had
     17 transitions at 0.2s and not one named curve.

     --ease-out decelerates hard: fast departure, long settle. It suits
     things ARRIVING (a panel opening, a toast sliding in).
     --ease is gentler and suits state changes on something already on
     screen (hover, active, colour shifts). */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ── Type scale ────────────────────────────────────────────────────────
     A real ratio rather than a size chosen locally per heading. Sizes relate
     to each other, which is most of what makes a layout look considered.

     Deliberately flatter than the marketing site's scale: that page opens on
     a 104px display because it has one message to land. A dashboard is
     scanned, not read — an oversized heading there just costs rows of data.
     Same discipline, different amplitude. */
  --t-page:    1.6rem;    /* page title: "Home", "Invoicing" */
  --t-section: 1.15rem;   /* card headings */
  --t-body:    0.95rem;
  --t-sm:      0.85rem;   /* secondary text, table cells */
  --t-xs:      0.75rem;   /* labels, captions, badges */

  /* Long lines are unreadable and look unconsidered. Applies to prose, never
     to tables. */
  --measure: 68ch;
}

/* ── Shared primitives ───────────────────────────────────────────────────
   Small enough to stay out of the way of each template's own layout rules,
   but enough that a login page and an error page agree on what a button and
   a card look like without either restating it. */

.sc-auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding: 24px;
}

.sc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 2.25rem;
  width: 100%;
  max-width: 420px;
}

.sc-title {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.015em;
  margin: 0 0 .4rem;
}

.sc-sub {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: .7rem 1.4rem;
  font: 600 .95rem var(--font);
  cursor: pointer;
  transition: background .18s ease;
}
.sc-btn:hover  { background: var(--brand-strong); }
.sc-btn:disabled { opacity: .55; cursor: not-allowed; }

.sc-field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.sc-field input,
.sc-field select,
.sc-field textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: 400 .95rem var(--font);
  color: var(--ink);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* Status pills — one vocabulary everywhere. */
.sc-pill {
  display: inline-block;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
}
.sc-pill-ok      { background: var(--ok-wash);     color: var(--ok-ink); }
.sc-pill-warn    { background: var(--warn-wash);   color: var(--warn-ink); }
.sc-pill-danger  { background: var(--danger-wash); color: var(--danger-ink); }
.sc-pill-info    { background: var(--info-wash);   color: var(--info-ink); }
.sc-pill-neutral { background: var(--surface-2);   color: var(--ink-3); }

/* Numbers that sit in columns must line up digit-for-digit. */
.sc-num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BORROWED FROM THE MARKETING STYLESHEET
   ───────────────────────────────────────────────────────────────────────────
   Three ideas that earn their place in a work tool. Everything else on that
   page — liquid glass, chromatic aberration, scroll-driven reveals, the
   cursor-tracked specular light — is deliberately NOT here. A marketing page
   is looked at once and needs to impress; a dashboard is operated for eight
   hours and needs to disappear. Motion that delights on first view becomes
   friction on the four-hundredth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Mono for anything that represents data ─────────────────────────────
   The marketing stylesheet argues this and the dashboard needs it more:
   field-service software is a record system, and numerals set in a UI face
   read as decorative where in mono they read as evidence. Timestamps, hours,
   money and counts are the entire content of this product.

   tabular-nums is the functional half: proportional digits make a column of
   times visibly ragged because 1 is narrower than 8. */
.mono,
.sc-num,
td.num, th.num,
time, .time, .hours, .amount, .money, .count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 2. Uppercase mono labels ──────────────────────────────────────────────
   Used on the marketing site for eyebrows and section kickers. In a dashboard
   it separates a FIELD LABEL from the value beneath it without needing a
   heavier weight or a rule. */
.label-mono {
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 3. Named easing on interactive surfaces ───────────────────────────────
   Applied narrowly — to things the user acts on, not to everything. */
.sc-btn,
button, .btn,
input, select, textarea,
.tab-btn, a {
  transition-timing-function: var(--ease);
}

/* Focus ring: one treatment across every surface, including keyboard access
   to table rows and tab buttons. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Prose gets a measure cap; tables and grids never do. */
.prose, .lede, .hint, .form-help {
  max-width: var(--measure);
}