/* Callbot base stylesheet: design tokens + primitives. Loaded FIRST on every page. See docs/UI.md.
   Page CSS uses these tokens only (no hard-coded colours).
   Dark values appear twice on purpose: once for "System" (prefers-color-scheme) and once for an explicit
   data-theme="dark". Keep the two blocks identical. */

/* ---- Tokens that do not change with the theme ---- */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 4 / 8 px spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;

  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem;
  --leading-tight: 1.25; --leading-normal: 1.5;

  --hit: 2.25rem;            /* minimum height of a button / input; 40 px on phones (below) */
  --header-h: 3.25rem;
  --focus-width: 2px;
}
@media (max-width: 640px) { :root { --hit: 2.5rem; } }

/* ---- Light (default) ---- */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eceef2;
  --border: #d9dde4;
  --border-input: #7d8697;
  --text: #151a23;
  --text-muted: #4d5666;

  --accent: #1d4fd7;
  --accent-hover: #173fb0;
  --accent-fg: #ffffff;          /* text on --accent */
  --accent-soft: #e8eefc;
  --accent-text: #1a47b8;        /* accent used as link text */
  --focus: #1d4fd7;

  --danger: #b42318;             /* text, borders and outlines of danger actions */
  --danger-soft: #fdecea;
  --danger-border: #e8a39b;
  --warning: #7a4a00;
  --warning-soft: #fff3d1;
  --warning-border: #e5b84a;
  --success: #146c2e;
  --success-soft: #e3f5e8;
  --success-border: #8ccf9f;

  --overlay: rgb(15 20 30 / 0.45);
  --toast-bg: #151a23;
  --toast-fg: #ffffff;

  /* Priority badges. Text "P1".."P4" is always shown; colour only reinforces it. */
  --p1-bg: #b42318; --p1-fg: #ffffff; --p1-border: #b42318;
  --p2-bg: #ffdca8; --p2-fg: #5e3400; --p2-border: #e0a23e;
  --p3-bg: #e3e7ee; --p3-fg: #2b3340; --p3-border: #c3cad6;
  --p4-bg: #f3f4f7; --p4-fg: #4a5262; --p4-border: #c3c9d4;

  /* Ticket statuses: -bg/-fg for chips and the status select, -bar for the board column accent */
  --status-new-bg: #e5e8ee;            --status-new-fg: #2b3340;            --status-new-bar: #7b8497;
  --status-proposed-bg: #fff0c2;       --status-proposed-fg: #6b4500;       --status-proposed-bar: #a36b00;
  --status-scheduled-bg: #dbe8ff;      --status-scheduled-fg: #1740a0;      --status-scheduled-bar: #3b7bf0;
  --status-in-progress-bg: #e9e0ff;    --status-in-progress-fg: #4b2a9e;    --status-in-progress-bar: #8156e0;
  --status-done-bg: #d8f3e0;           --status-done-fg: #14602b;           --status-done-bar: #22803f;
  --status-needs-followup-bg: #ffe1d6; --status-needs-followup-fg: #8a2a0a; --status-needs-followup-bar: #cc4a16;

  /* "AI" markers (Autopilot approved / AI priority) */
  --ai-bg: #f1ecff; --ai-fg: #4a2e9c; --ai-border: #8e72dd;

  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.08);
  --shadow-2: 0 4px 12px rgb(16 24 40 / 0.12);
  --shadow-3: 0 12px 32px rgb(16 24 40 / 0.22);
}

/* ---- Dark: System setting, unless the user picked Light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1116;
    --surface: #161a21;
    --surface-raised: #1d222b;
    --surface-sunken: #12151b;
    --border: #2a303b;
    --border-input: #6b7586;
    --text: #e7eaf0;
    --text-muted: #a3acbb;

    --accent: #7aa2ff;
    --accent-hover: #9bb9ff;
    --accent-fg: #0a1020;
    --accent-soft: #1a2747;
    --accent-text: #9db9ff;
    --focus: #9bb9ff;

    --danger: #ff8f85;
    --danger-soft: #3a1613;
    --danger-border: #7a2a24;
    --warning: #f5c35c;
    --warning-soft: #33280d;
    --warning-border: #735a1c;
    --success: #6fd48c;
    --success-soft: #12301c;
    --success-border: #2d6a40;

    --overlay: rgb(0 0 0 / 0.6);
    --toast-bg: #e7eaf0;
    --toast-fg: #0e1116;

    --p1-bg: #7f1d16; --p1-fg: #ffe3df; --p1-border: #b3382e;
    --p2-bg: #5a3a00; --p2-fg: #ffd9a0; --p2-border: #9a6a10;
    --p3-bg: #2a3240; --p3-fg: #dfe4ec; --p3-border: #465064;
    --p4-bg: #1b2029; --p4-fg: #a3acbb; --p4-border: #3a4252;

    --status-new-bg: #2a303b;            --status-new-fg: #dfe4ec;            --status-new-bar: #8892a6;
    --status-proposed-bg: #3d2f08;       --status-proposed-fg: #f5d27a;       --status-proposed-bar: #e0b13a;
    --status-scheduled-bg: #16284f;      --status-scheduled-fg: #a9c4ff;      --status-scheduled-bar: #5b8cf5;
    --status-in-progress-bg: #2c2152;    --status-in-progress-fg: #cdbdff;    --status-in-progress-bar: #9a78f0;
    --status-done-bg: #11341f;           --status-done-fg: #8fdcaa;           --status-done-bar: #3fb768;
    --status-needs-followup-bg: #4a1f10; --status-needs-followup-fg: #ffbfa6; --status-needs-followup-bar: #f07a4a;

    --ai-bg: #271f4a; --ai-fg: #cfc0ff; --ai-border: #7a62d0;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

/* ---- Dark: explicit choice (same values as above) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --surface: #161a21;
  --surface-raised: #1d222b;
  --surface-sunken: #12151b;
  --border: #2a303b;
  --border-input: #6b7586;
  --text: #e7eaf0;
  --text-muted: #a3acbb;

  --accent: #7aa2ff;
  --accent-hover: #9bb9ff;
  --accent-fg: #0a1020;
  --accent-soft: #1a2747;
  --accent-text: #9db9ff;
  --focus: #9bb9ff;

  --danger: #ff8f85;
  --danger-soft: #3a1613;
  --danger-border: #7a2a24;
  --warning: #f5c35c;
  --warning-soft: #33280d;
  --warning-border: #735a1c;
  --success: #6fd48c;
  --success-soft: #12301c;
  --success-border: #2d6a40;

  --overlay: rgb(0 0 0 / 0.6);
  --toast-bg: #e7eaf0;
  --toast-fg: #0e1116;

  --p1-bg: #7f1d16; --p1-fg: #ffe3df; --p1-border: #b3382e;
  --p2-bg: #5a3a00; --p2-fg: #ffd9a0; --p2-border: #9a6a10;
  --p3-bg: #2a3240; --p3-fg: #dfe4ec; --p3-border: #465064;
  --p4-bg: #1b2029; --p4-fg: #a3acbb; --p4-border: #3a4252;

  --status-new-bg: #2a303b;            --status-new-fg: #dfe4ec;            --status-new-bar: #8892a6;
  --status-proposed-bg: #3d2f08;       --status-proposed-fg: #f5d27a;       --status-proposed-bar: #e0b13a;
  --status-scheduled-bg: #16284f;      --status-scheduled-fg: #a9c4ff;      --status-scheduled-bar: #5b8cf5;
  --status-in-progress-bg: #2c2152;    --status-in-progress-fg: #cdbdff;    --status-in-progress-bar: #9a78f0;
  --status-done-bg: #11341f;           --status-done-fg: #8fdcaa;           --status-done-bar: #3fb768;
  --status-needs-followup-bg: #4a1f10; --status-needs-followup-fg: #ffbfa6; --status-needs-followup-bar: #f07a4a;

  --ai-bg: #271f4a; --ai-fg: #cfc0ff; --ai-border: #7a62d0;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* ---- Reset and typography ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3 { line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-3); }
a { color: var(--accent-text); }
small { font-size: var(--text-sm); color: var(--text-muted); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.muted { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: var(--text-sm); }

/* ---- Focus: a visible ring on everything reachable by keyboard ---- */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 2px;
}

/* ---- Buttons: .btn (secondary), .btn.primary, .btn.danger ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--hit); padding: 0 var(--space-4);
  font: inherit; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-input);
  border-radius: var(--radius-md); cursor: pointer;
}
.btn:hover { background: var(--surface-sunken); }
.btn.primary { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { min-height: calc(var(--hit) - 0.25rem); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Form controls ---- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: var(--hit); padding: var(--space-1) var(--space-3);
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
}
textarea { width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent); }
@media (max-width: 640px) {
  /* 16 px stops iOS from zooming the page when a field gets focus */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: var(--text-md); }
}
.field-label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.field-label > input, .field-label > select { font-weight: 400; font-size: var(--text-base); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit); cursor: pointer; }

/* ---- Badges: priority, urgency, AI marker ---- */
.prio {
  display: inline-block; min-width: 2.25rem; padding: 0 var(--space-2); text-align: center;
  font-size: var(--text-xs); font-weight: 700; line-height: 1.4rem;
  border: 1px solid; border-radius: var(--radius-pill);
}
.prio.p1 { background: var(--p1-bg); color: var(--p1-fg); border-color: var(--p1-border); }
.prio.p2 { background: var(--p2-bg); color: var(--p2-fg); border-color: var(--p2-border); }
.prio.p3 { background: var(--p3-bg); color: var(--p3-fg); border-color: var(--p3-border); }
.prio.p4 { background: var(--p4-bg); color: var(--p4-fg); border-color: var(--p4-border); }
.badge {
  display: inline-block; padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: 600;
  line-height: 1.4rem; border: 1px solid; border-radius: var(--radius-pill); text-transform: capitalize;
}
.badge.emergency { background: var(--p1-bg); color: var(--p1-fg); border-color: var(--p1-border); }
.badge.routine { background: var(--p3-bg); color: var(--p3-fg); border-color: var(--p3-border); }
/* The customer asked a person to call them (chat call-back request): nothing is planned until someone does. */
.badge.callback { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.ai-mark {
  display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 600; line-height: 1.3rem;
  color: var(--ai-fg); background: var(--ai-bg); border: 1px solid var(--ai-border); border-radius: var(--radius-sm);
}

/* ---- Status colours (chips, the status select and the board column accent) ---- */
.status.new, .column.new { --st-bg: var(--status-new-bg); --st-fg: var(--status-new-fg); --st-bar: var(--status-new-bar); }
.status.proposed, .column.proposed { --st-bg: var(--status-proposed-bg); --st-fg: var(--status-proposed-fg); --st-bar: var(--status-proposed-bar); }
.status.scheduled, .column.scheduled { --st-bg: var(--status-scheduled-bg); --st-fg: var(--status-scheduled-fg); --st-bar: var(--status-scheduled-bar); }
.status.in_progress, .column.in_progress { --st-bg: var(--status-in-progress-bg); --st-fg: var(--status-in-progress-fg); --st-bar: var(--status-in-progress-bar); }
.status.done, .column.done { --st-bg: var(--status-done-bg); --st-fg: var(--status-done-fg); --st-bar: var(--status-done-bar); }
.status.needs_followup, .column.needs_followup { --st-bg: var(--status-needs-followup-bg); --st-fg: var(--status-needs-followup-fg); --st-bar: var(--status-needs-followup-bar); }
select.status { font-weight: 600; color: var(--st-fg); background: var(--st-bg); border-color: var(--st-bar); }

/* ---- Theme toggle (Light / Dark / System), built by /theme.js ---- */
.theme-toggle { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hit); height: calc(var(--hit) - 2px); padding: 0; border: 0; border-radius: 0;
  color: var(--text-muted); background: transparent; cursor: pointer;
}
.theme-toggle button + button { border-left: 1px solid var(--border); }
.theme-toggle button:hover { background: var(--surface-sunken); color: var(--text); }
.theme-toggle button[aria-pressed="true"] { color: var(--accent-fg); background: var(--accent); }
.theme-toggle button:focus-visible { outline-offset: -2px; }
.theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Empty, loading and error states ---- */
.state { margin: 0; padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-muted); }
.state.error { color: var(--danger); }
.notice { padding: var(--space-3) var(--space-4); border: 1px solid var(--danger-border); border-radius: var(--radius-md); color: var(--danger); background: var(--danger-soft); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}