/* ============================================================
   TIMEFORGE — Design tokens
   Matched to Planning Hub. Media · Colchester Institute
   Dark mode is the default; light mode via :root[data-theme="light"]

   TWO RULES, both learned the hard way in Planning Hub:
     1. Light mode MUST be selected as :root[data-theme="light"].
        A bare [data-theme="light"] loses to :root on specificity
        and light mode silently does nothing.
     2. Every structural variable must live INSIDE a :root {} block.
        Orphaned declarations broke the sidebar and theme repeatedly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

/* ── DARK (default) ──────────────────────────────────────── */
:root {
  /* Grounds */
  --bg:               #0C0F11;
  --bg-deep:          #090C0E;
  --bg-surface:       #0F1518;
  --bg-hover:         #111820;

  /* Rules */
  --border:           #1A2228;
  --border-mid:       #1E2830;
  --border-light:     #141C22;

  /* Type */
  --text-primary:     #EDE8E0;
  --text-secondary:   #6B7B85;
  --text-muted:       #4A5A63;
  --text-faint:       #2A3840;

  /* Orange — primary action */
  --accent-orange:        #E8622A;
  --accent-orange-bg:     #1A0C08;
  --accent-orange-border: #3A1A10;
  --accent-orange-hover:  #D4541F;

  /* Teal — status, active navigation */
  --accent-teal:          #29B6C8;
  --accent-teal-bg:       #0A1C24;
  --accent-teal-border:   #1A3840;

  /* Purple — PDT sessions */
  --accent-purple:        #A855F7;
  --accent-purple-bg:     #140A1E;
  --accent-purple-border: #2A1A3A;

  /* Green — success, feasible */
  --accent-green:         #4A9A5A;
  --accent-green-bg:      #0A1810;
  --accent-green-border:  #1A3020;

  /* Amber — hourly-paid cover, warnings. Cost signal: must be loud. */
  --accent-amber:         #D9A441;
  --accent-amber-bg:      #1C1408;
  --accent-amber-border:  #3A2C10;

  /* Red — infeasible, destructive */
  --accent-red:           #D1495B;
  --accent-red-bg:        #1C0A0E;
  --accent-red-border:    #3A1620;

  /* Sidebar — stays dark in BOTH themes */
  --sidebar-bg:           #0A0D0F;
  --sidebar-bg-light:     #1A1F2E;

  /* Structural — keep these inside :root, see rule 2 above */
  --sidebar-collapsed:  64px;
  --sidebar-expanded:   232px;
  --topbar-height:      56px;
  --radius:             6px;
  --radius-lg:          10px;
  --transition:         180ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow:             0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.55);

  /* Type scale */
  --font:               'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:              11px;
  --fs-sm:              12px;
  --fs-base:            13px;
  --fs-md:              15px;
  --fs-lg:              19px;
  --fs-xl:              26px;
  --label-tracking:     0.08em;
}

/* ── LIGHT ───────────────────────────────────────────────────
   NOTE: verify these against Planning Hub's own light values in
   its style.css and align them exactly. They are set here to a
   warm neutral consistent with the system, but Planning Hub is
   the reference — diff before shipping.
   ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:               #F5F2EE;
  --bg-deep:          #EDE8E2;
  --bg-surface:       #FFFFFF;
  --bg-hover:         #F0EBE5;

  --border:           #DDD6CE;
  --border-mid:       #C9C0B6;
  --border-light:     #E8E2DA;

  --text-primary:     #1A1F22;
  --text-secondary:   #55636B;
  --text-muted:       #7B8892;
  --text-faint:       #A8B2B9;

  /* Accents darkened for contrast on light grounds — AA on --bg */
  --accent-orange:        #C24A18;
  --accent-orange-bg:     #FBEDE6;
  --accent-orange-border: #EAC9B8;
  --accent-orange-hover:  #A63D10;

  --accent-teal:          #10707E;
  --accent-teal-bg:       #E4F2F4;
  --accent-teal-border:   #B9D9DE;

  --accent-purple:        #7B32C4;
  --accent-purple-bg:     #F2E9FA;
  --accent-purple-border: #DCC6EF;

  --accent-green:         #2E6B3C;
  --accent-green-bg:      #E7F1E9;
  --accent-green-border:  #C2DAC8;

  --accent-amber:         #8A6410;
  --accent-amber-bg:      #FAF1DC;
  --accent-amber-border:  #E5D3A8;

  --accent-red:           #A82B3D;
  --accent-red-bg:        #FBE9EC;
  --accent-red-border:    #EDC5CC;

  --shadow:               0 2px 8px rgba(26, 31, 34, 0.08);
  --shadow-lg:            0 8px 32px rgba(26, 31, 34, 0.14);
}

/* ── BASE ────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

/* Label runs — replaces the monospace face v1 used for metadata */
.label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── STATUS CHIPS ─────────────────────────────────────────────
   Solve outcomes. INFEASIBLE and TIMED OUT are deliberately
   different colours — they mean completely different things and
   must never be collapsed into a shared "failed" state.
   ───────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-success    { color: var(--accent-green);  background: var(--accent-green-bg);  border-color: var(--accent-green-border); }
.chip-running    { color: var(--accent-teal);   background: var(--accent-teal-bg);   border-color: var(--accent-teal-border); }
.chip-queued     { color: var(--text-secondary); background: var(--bg-hover);        border-color: var(--border); }
.chip-timeout    { color: var(--accent-amber);  background: var(--accent-amber-bg);  border-color: var(--accent-amber-border); }
.chip-infeasible { color: var(--accent-red);    background: var(--accent-red-bg);    border-color: var(--accent-red-border); }
.chip-pdt        { color: var(--accent-purple); background: var(--accent-purple-bg); border-color: var(--accent-purple-border); }
.chip-hourly     { color: var(--accent-amber);  background: var(--accent-amber-bg);  border-color: var(--accent-amber-border); }
.chip-cancelled  { color: var(--text-secondary); background: var(--bg-hover);        border-color: var(--border); }
.chip-failed     { color: var(--accent-red);    background: var(--accent-red-bg);    border-color: var(--accent-red-border); }

/* ── WORKER HEARTBEAT PILL ───────────────────────────────────
   Required, not decorative: the worker runs on a PC that gets
   switched off, and a queued job with no visible reason is the
   fastest way to lose management's trust in the tool.
   ───────────────────────────────────────────────────────────── */
.worker-pill { display: inline-flex; align-items: center; gap: 6px; }
.worker-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot, var(--text-muted));
}
.worker-pill.online  { --dot: var(--accent-green); }
.worker-pill.stale   { --dot: var(--accent-amber); }
.worker-pill.offline { --dot: var(--accent-red); }

/* Paused is a deliberate browser-side choice, not a health state — a
   hollow dot rather than a new fill colour, so it never reads as a
   fourth severity level alongside online/stale/offline. Pair with a
   "Paused" text label in the pill itself; don't rely on the dot alone. */
.worker-pill.paused::before {
  background: transparent;
  border: 1.5px solid var(--text-secondary);
}

.worker-pause-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  transition: background var(--transition), border-color var(--transition);
}
.worker-pause-toggle:hover { background: var(--bg-hover); }
.worker-pause-toggle.is-paused {
  color: var(--accent-orange);
  border-color: var(--accent-orange-border);
  background: var(--accent-orange-bg);
}