/*
 * DocTrack — one stylesheet, no build step.
 *
 * Three things meet here. CapacityOS gives the STRUCTURE — a folder of static
 * files with a sidebar shell, because that is the only shape this cPanel can
 * host. The Claude Design canvas gives the SURFACE — palette, type and radii,
 * taken exactly, so the built app and the drawn design are one thing. Apple's
 * HIG settles the BEHAVIOUR the canvas does not draw: 44px touch targets, real
 * switches, press feedback, system dark mode, reduced motion.
 *
 * This file is the base: tokens, controls, sign-in. app.css holds the console
 * shell and the screens.
 */

:root {
  /* ---- Palette -------------------------------------------------------
     Taken from the Claude Design canvas (direction 1a) so the built app
     and the drawn design are the same thing. One ramp of neutrals, ONE
     action blue. Status hues are semantic only: nothing decorative may
     borrow them, or a red stops meaning "overdue". */
  --bg: #F6F7F9;
  --elevated: #FFFFFF;
  --text-primary: #101828;    /* headings                     */
  --text-secondary: #667085;  /* body and secondary           */
  --text-tertiary: #98A2B3;   /* placeholders, disabled       */
  --text-label: #344054;      /* form labels, table body      */
  --border: #D5D9E2;          /* control edges                */
  --divider: #E6E8EE;         /* hairline rules               */
  --fill-1: #EEF1F6;          /* control backgrounds          */
  --fill-2: #F4F6F9;          /* grouped notes                */

  --brand: #2F6FE4;
  --brand-dark: #235BC4;
  --brand-soft: #EAF1FE;
  --ink: #0E1726;             /* the deep navy panel          */
  --ink-2: #0B1120;           /* what the photo fades into    */

  --ok: #0E7C4A;      --ok-soft: #E7F5EE;
  --warn: #B25E09;    --warn-soft: #FDF1E3;
  --danger: #C0392B;  --danger-soft: #FBEAE8;
  --info: #2F6FE4;    --info-soft: #EAF1FE;

  /* ---- Type ----------------------------------------------------------
     Instrument Sans throughout, IBM Plex Mono for anything read aloud or
     compared character by character — tracking codes, serials, money.
     Both fall back to the platform's own face if the webfont never
     arrives, so the page is never unreadable offline. */
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
          'Segoe UI', Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo, monospace;

  /* ---- Shape ----------------------------------------------------------
     8px controls and 12px cards, from the design. Pills stay fully round
     so anything actionable reads as actionable. */
  --r-card: 12px;
  --r-control: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(11,27,51,0.18);
  --shadow-pop: 0 8px 32px -8px rgba(11,27,51,0.24);
}

/* Dark mode follows the system, because on Apple's platforms it is a system
   setting and an app that ignores it looks broken beside everything else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --elevated: #1C1C1E;
    --text-primary: rgba(255,255,255,0.92);
    --text-secondary: rgba(235,235,245,0.60);
    --text-tertiary: rgba(235,235,245,0.30);
    --border: rgba(84,84,88,0.65);
    --fill-1: rgba(120,120,128,0.24);
    --fill-2: rgba(120,120,128,0.16);
    --brand-soft: #17233C;
    --divider: rgba(84,84,88,0.5);
    --text-label: rgba(235,235,245,0.75);
    --ok-soft: #10261C;  --warn-soft: #2A1D0C;
    --danger-soft: #2A1512; --info-soft: #141F3A;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --elevated: #1C1C1E;
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(235,235,245,0.60);
  --text-tertiary: rgba(235,235,245,0.30);
  --border: rgba(84,84,88,0.65);
  --fill-1: rgba(120,120,128,0.24);
  --fill-2: rgba(120,120,128,0.16);
  --brand-soft: #17233C;
    --divider: rgba(84,84,88,0.5);
    --text-label: rgba(235,235,245,0.75);
  --ok-soft: #10261C; --warn-soft: #2A1D0C;
  --danger-soft: #2A1512; --info-soft: #141F3A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/*
  `hidden` must actually hide. Any rule below that sets `display` — .pill and
  .switch both do — outranks the attribute's default styling, so an element
  marked hidden still paints. That showed up immediately as an empty red error
  pill sitting on the sign-in form before anything had gone wrong.
*/
[hidden] { display: none !important; }

/* Visible to screen readers, not on screen. */
.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;
}

body {
  font-family: var(--font);
  /* The design's UI size. Apple's 17px is a reading size; a dense console
     with tables and side navigation is not a reading surface. */
  font-size: 15px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  background: var(--bg);
}

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p  { margin: 0; }
a  { color: var(--brand); text-decoration: none; }

.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted  { color: var(--text-secondary); }
.small  { font-size: 13px; }

/* Every interactive thing gets the same visible focus ring. Keyboard users
   are not a special case to be styled last. */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ====================================================================== */
/* Buttons                                                                */
/* ====================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                 /* Apple's minimum touch target */
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--elevated);
  color: var(--text-primary);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.btn:hover  { background: var(--fill-2); }
.btn:active { transform: scale(0.97); }   /* the press Apple gives you back */
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--brand); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { background: var(--danger); border-color: transparent; color: #fff; }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 13px; font-size: 13.5px; }

/* ====================================================================== */
/* Fields                                                                 */
/* ====================================================================== */

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--text-secondary); }
.field .err  { font-size: 13px; color: var(--danger); }

.input, select.input, textarea.input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--elevated);
  color: var(--text-primary);
  font: inherit; font-size: 16px;    /* 16px stops iOS zooming on focus */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47,111,228,0.13);
}
.input::placeholder { color: var(--text-tertiary); }
textarea.input { min-height: 96px; resize: vertical; }

/* An input with an icon inside it, and optionally a button on the right. */
.input-wrap { position: relative; display: block; }
.input-wrap .lead {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none; display: flex;
}
.input-wrap .lead ~ .input { padding-left: 42px; }
.input-wrap .trail {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; padding: 8px; cursor: pointer;
  color: var(--text-tertiary); border-radius: 8px; display: flex;
}
.input-wrap .trail:hover { color: var(--text-secondary); background: var(--fill-2); }

/* ====================================================================== */
/* Switch — Apple's, because a checkbox does not read as "on"             */
/* ====================================================================== */

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: relative; width: 51px; height: 31px; flex: none;
  background: var(--fill-1); border-radius: 980px;
  transition: background .22s cubic-bezier(0.2,0.8,0.2,1);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.22);
  transition: transform .22s cubic-bezier(0.2,0.8,0.2,1);
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track {
  outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 2px;
}
/* Scoped to the class, NOT to .switch — in a settings row the label sits
   beside the switch rather than inside it, and a descendant selector left the
   title and its description running together on one line. */
.switch-label { display: grid; gap: 2px; min-width: 0; }
.switch-label b { font-size: 14.5px; font-weight: 600; }
.switch-label span { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }

/* A settings row: label on the left, control on the right, hairline between. */
.row-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.row-setting:last-child { border-bottom: 0; }

/* ====================================================================== */
/* Cards, pills, tables                                                   */
/* ====================================================================== */

.card {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.card-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }

.stat-card { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; }
.stat-val { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* Status never relies on colour alone — every pill carries a dot, so it
   survives a monochrome printout and colour blindness. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 980px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok     { background: var(--ok-soft);     color: var(--ok); }
.pill-warn   { background: var(--warn-soft);   color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-info   { background: var(--info-soft);   color: var(--info); }
.pill-muted  { background: var(--fill-1);      color: var(--text-secondary); }

.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th {
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.dtable td { padding: 13px 12px; border-bottom: 1px solid var(--border); }
.dtable tbody tr:hover { background: var(--fill-2); }
.table-scroll { overflow-x: auto; }

/* ====================================================================== */
/* Toast                                                                  */
/* ====================================================================== */

.toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; }
.toast {
  background: rgba(28,28,30,0.94); color: #fff; backdrop-filter: blur(20px);
  padding: 13px 20px; border-radius: 980px; font-size: 15px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  animation: toast-in .28s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ====================================================================== */
/* Sign-in                                                                */
/* ====================================================================== */

.auth { display: grid; min-height: 100dvh; grid-template-columns: 1fr; background: var(--elevated); }
@media (min-width: 900px) { .auth { grid-template-columns: 1.05fr 1fr; } }

/* The dark panel. The photograph sits behind a navy wash so white text keeps
   its contrast whatever the picture underneath happens to be. */
.auth-art {
  position: relative; display: none; overflow: hidden;
  padding: 44px; color: #fff;
  background: var(--ink);
}
@media (min-width: 900px) { .auth-art { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-art .photo {
  position: absolute; top: 0; left: 0; right: 0; height: 42%;
  background-image: var(--auth-photo, none);
  background-size: cover; background-position: center 38%;
}
/* Fades the photograph into flat navy before the headline starts, so the
   words never sit on a busy part of the picture. */
.auth-art .wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,16,28,0.50) 0%,
    rgba(10,16,28,0.14) 12%,
    rgba(10,16,28,0.20) 22%,
    rgba(11,17,29,0.78) 34%,
    var(--ink-2) 42%);
}
.auth-art > * { position: relative; }

.auth-logo { display: flex; align-items: center; gap: 12px; }
.auth-logo .mark {
  width: 42px; height: 42px; border-radius: 11px; background: #fff;
  display: grid; place-items: center; flex: none;
}
.auth-logo b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; display: block; }
.auth-logo .tag {
  display: block; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-top: 3px;
}

.auth-art h1 { font-size: 40px; line-height: 1.12; max-width: 12ch; }
@media (max-width: 1100px) { .auth-art h1 { font-size: 32px; } }
.auth-art .lede { margin-top: 14px; max-width: 34ch; color: rgba(255,255,255,0.74); font-size: 16px; }

.auth-points { display: flex; gap: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); }
.auth-points div { display: grid; gap: 6px; }
.auth-points svg { opacity: .82; }
.auth-points b { font-size: 13.5px; font-weight: 600; }
.auth-points span { font-size: 12px; color: rgba(255,255,255,0.58); }

.auth-form { display: grid; align-content: center; justify-items: stretch; padding: 40px 24px; }
.auth-form .inner { width: 100%; max-width: 380px; margin: 0 auto; }
.auth-top { display: flex; justify-content: flex-end; margin-bottom: 30px; }

.auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-tertiary); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--border); }

.link-right { display: block; text-align: right; font-size: 13.5px; font-weight: 600; margin-top: -6px; }

/* The slide dots under the art panel. Decorative, so hidden from readers. */
.dots { display: flex; gap: 7px; }
.dots i { width: 22px; height: 4px; border-radius: 980px; background: rgba(255,255,255,0.28); }
.dots i.on { background: #fff; width: 30px; }

/* People who prefer less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}