/* ============================================================================
   VERVE COLOR SKIN — loaded ONLY when g.company.skin is set (see base.html).
   Layers the Verve "Warm Craft" palette over the Clearspace base bundle:
   Ink / Paper / Canvas / Tan plus semantic pos-warn-neg, and a light Paper
   sidebar. Clearspace never links this file, so its design is untouched.

   SCOPE: colors and brand marks only. Deliberately no typeface change and no
   radius/shadow overrides — the Clearspace shapes and type stay.

   The three files in static/css/ are vendored design-system sources and must not
   be forked; this is additive, and loads last in <head> so it also wins over
   base.html's own <style> block at equal specificity.
   ============================================================================ */

/* ── Token remap. The vendored CSS is heavily tokenized, so re-pointing the
   --cs-* ramps here re-colors the sidebar, nav, buttons, inputs, cards, tables,
   filter popovers, modals, bottom nav and drawer in one move — and, via
   style.css's token import, all five auth pages. ─────────────────────────── */
:root {
  /* Verve core palette */
  --color-ink:      #1A1818;
  --color-paper:    #FFFFFF;
  --color-canvas:   #F7F2EF;
  --color-tan:      #D9BF9E;
  --color-ink-80:   #3D3938;
  --color-ink-60:   #6E6A69;
  --color-ink-40:   #A4A19F;
  --color-ink-20:   #D6D3D1;
  --color-ink-10:   #EBEBEB;
  --color-warm-100: #EDE7E1;
  --color-warm-200: #E2DBD3;
  --color-canvas-2: #EFE7DE;   /* deeper canvas — quiet fills */
  --color-canvas-3: #FAF7F4;   /* row hover */
  --color-tan-ink:  #9A7B4F;   /* readable tan-family text on light */

  /* Status accents — semantic feedback only, never decoration. */
  --color-pos:  #3C6E4F;  --color-pos-bg:  #E8F0EA;
  --color-warn: #7A5C1E;  --color-warn-bg: #F7EFE0;
  --color-neg:  #8A2F24;  --color-neg-bg:  #F6E7E4;  --color-neg-line: #E0B6AF;

  /* Charcoal/blue/dark-blue → ink; the blue ramp → ink + tan tints (no blue). */
  --cs-charcoal:   var(--color-ink);
  --cs-dark-blue:  var(--color-ink);
  --cs-light-blue: var(--color-ink);   /* primary accent: links, stat values */
  --cs-blue-500:   var(--color-ink);
  --cs-blue-600:   var(--color-ink);
  --cs-blue-700:   var(--color-ink-60);
  --cs-blue-hover: var(--color-ink-80);
  --cs-blue-50:    #F2EBE2;           /* tan tint — chip / avatar fills */
  --cs-blue-100:   #EBE0D2;
  --cs-light-red:  var(--color-neg);
  --cs-n-50:  #F7F2EF;
  --cs-n-100: #EDE7E1;
  --cs-n-200: #E2DBD3;
  --cs-n-300: var(--color-ink-20);
  --cs-n-400: var(--color-ink-40);
  --cs-n-500: var(--color-ink-60);
  --cs-n-600: var(--color-ink-80);
  --cs-n-700: var(--color-ink-80);

  /* Warm-Craft focus ring: tan glow, no blue. */
  --focus-ring: 0 0 0 4px rgba(217,191,158,0.45);
}

/* ── Server-emitted inline styles (ps-tokens.css) re-pointed to Verve.
   This is what carries the palette *inside* the content — status pills, type
   chips, progress bars, avatar and group tints, timeline dots, day chips — none
   of which a plain stylesheet could reach, because they're inline styles built in
   services/views.py + services/domain.py. Verve's palette is narrow by design, so
   the blue ramp collapses onto Ink + Tan and the lime/red/amber semantics move to
   pos / neg / warn. ──────────────────────────────────────────────────────── */
:root {
  --ps-accent:       var(--color-ink);      --ps-accent-deep: var(--color-ink);
  --ps-accent-mid:   var(--color-ink-80);   --ps-accent-bg:   #F2EBE2;
  --ps-accent-bg-2:  #EBE0D2;               --ps-accent-line: var(--color-tan);
  --ps-accent-wash:  rgba(217,191,158,0.22);
  --ps-pos-fg:       var(--color-pos);      --ps-pos-bg:      var(--color-pos-bg);
  --ps-pos-bg-2:     var(--color-pos-bg);   --ps-pos-bg-3:    var(--color-pos-bg);
  --ps-pos-wash:     var(--color-pos-bg);
  --ps-pos-fg-2:     var(--color-pos);      --ps-pos-dot:     var(--color-pos);
  --ps-neg:          var(--color-neg);      --ps-neg-fg:      var(--color-neg);
  --ps-neg-bg:       var(--color-neg-bg);
  --ps-neg-bg-2:     var(--color-neg-bg);   --ps-neg-fg-2:    var(--color-neg);
  --ps-warn:         var(--color-warn);     --ps-warn-fg:     var(--color-warn);
  --ps-warn-bg:      var(--color-warn-bg);  --ps-warn-bg-2:   var(--color-warn-bg);
  --ps-n-bg:         var(--color-warm-100); --ps-n-bg-2:      var(--color-warm-200);
  --ps-n-wash:       var(--color-warm-100);
  --ps-n-fg:         var(--color-ink-60);   --ps-n-fg-2:      var(--color-ink-80);
  --ps-n-fg-3:       var(--color-ink-80);   --ps-n-muted:     var(--color-ink-40);
  --ps-n-line:       var(--color-ink-20);
  --ps-ink:          var(--color-ink);      --ps-ink-deep:    var(--color-ink);
  --ps-surface:      var(--color-paper);    --ps-on-accent:   var(--color-canvas);
}

/* ── Page ground ─────────────────────────────────────────────────────────── */
body, .app, .main { background: var(--color-canvas); }
::-webkit-scrollbar-thumb { background: var(--color-ink-20); border-color: var(--color-canvas); }

/* ── Buttons: Ink primary, Ink-outline secondary ─────────────────────────── */
.cs-btn--primary { background: var(--color-ink); color: var(--color-canvas); border-color: var(--color-ink); }
.cs-btn--primary:hover { background: var(--color-ink-80); border-color: var(--color-ink-80); }
.cs-btn--secondary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); }
.cs-btn--secondary:hover { background: var(--color-canvas); border-color: var(--color-ink); }

/* ── Warm hairline surfaces ──────────────────────────────────────────────── */
.card, .stat-card { border-color: var(--color-ink-10); background: var(--color-paper); }
.table-main thead { background: var(--color-canvas); border-bottom-color: var(--color-ink-10); }
.table-main td { border-bottom-color: var(--color-ink-10); }
.table-main tbody tr.clickable:hover td { background: var(--color-canvas-3); }
.filter-menu, .cs-menu { border-color: var(--color-ink-20); }
.cs-menu button { color: var(--color-ink); }
.cs-menu button:hover { background: var(--color-canvas); }
.run-card:hover { border-color: var(--color-ink-20); }
.task-row:hover { background: var(--color-canvas-3); }

/* ── Accent: active = Ink; focus = Tan ring; no blue ─────────────────────── */
.input-field:focus { border-color: var(--color-ink); box-shadow: var(--focus-ring); }
.filter-opt input:checked + .filter-check { background: var(--color-ink); border-color: var(--color-ink); }
.filter-multi-btn .filter-count { background: var(--color-ink); color: var(--color-canvas); }
.link-blue { color: var(--color-ink); }
.cs-label { color: var(--color-ink-60); }
.cs-required::after { color: var(--color-tan); }

/* Underline tabs + the toggle switch hardcode blue in base.html's <style>. */
.cs-tab:hover { color: var(--color-ink); }
.cs-tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.cs-tabs { border-bottom-color: var(--color-ink-10); }
.cs-switch input:checked + .cs-switch-track { background: var(--color-ink); }

/* ── Sidebar: light Paper surface, hairline edge, Ink active pill. The base
   bundle assumes a dark sidebar and hardcodes white text throughout, so every
   one of those has to be re-pointed to ink here. ─────────────────────────── */
.sidebar { background: var(--color-paper); border-right: 1px solid var(--color-ink-10); }
.sidebar-brand .brand-sysname { color: var(--color-ink-60); }
/* Restated because components.css's img[alt="Clearspace"] branch no longer
   matches under Verve; the class branch does, this is belt-and-braces. Verve's
   wordmark is a shallower aspect ratio, so equal height reads heavier at 22px. */
.sidebar-brand img.wordmark { height: 20px; width: auto; max-width: 100%;
  align-self: flex-start; flex-shrink: 0; }
.sidebar-brand img.mark { border-radius: 4px; }  /* the favicon is a filled Ink square */
.nav-link { color: var(--color-ink-80); }
.nav-link:hover { color: var(--color-ink); background: var(--color-canvas); }
.nav-link.active { color: var(--color-paper); background: var(--color-ink); font-weight: 500; }
.nav-divider { background: var(--color-ink-10); }
.sidebar-collapse-btn { color: var(--color-ink-80); border: 1.5px solid var(--color-ink-40); }
.sidebar-collapse-btn:hover { color: var(--color-ink); border-color: var(--color-ink-60);
  background: var(--color-canvas); }
.sidebar-foot .user-row { color: var(--color-ink-80); }
.sidebar-foot .name { color: var(--color-ink); }
.sidebar-foot .logout-btn { color: var(--color-ink-40); }
.sidebar-foot .logout-btn:hover { color: var(--color-neg); background: var(--color-neg-bg); }

/* Company switcher, restyled for the light sidebar (dark text, dark chevron). */
.brand-switch {
  color: var(--color-ink);
  background-color: var(--color-canvas);
  border-color: var(--color-ink-20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1818' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.brand-switch:hover { background-color: var(--color-canvas-3); border-color: var(--color-ink-40); }
.brand-switch:focus-visible { border-color: var(--color-ink); box-shadow: var(--focus-ring); }
.brand-switch option { color: var(--color-ink); background: var(--color-paper); }

/* ── Schedule / checklist editor accents (hardcoded blue in base.html) ───── */
[data-schedule-body] .att-add { border-color: var(--color-ink-40); color: var(--color-ink-60); }
[data-schedule-body] .att-add:hover { border-color: var(--color-ink); color: var(--color-ink);
  background: var(--color-canvas); }
.drop-above { box-shadow: inset 0 2px 0 0 var(--color-ink); }
.drop-below { box-shadow: inset 0 -2px 0 0 var(--color-ink); }

/* ── Mobile floating chrome: Ink for contrast against the light page ─────── */
@media (max-width: 767.98px) {
  .bottom-nav { background: var(--color-ink); }
  .bottom-nav .tab .tab-badge { background: var(--color-tan); color: var(--color-ink); }
  .sidebar::before { background: rgba(26,24,24,0.16); }
  .sidebar .drawer-close-btn { color: rgba(26,24,24,0.55); }
  .sidebar .drawer-close-btn:hover { background: var(--color-canvas); color: var(--color-ink); }
  .table-card-reflow tr { border-color: var(--color-ink-10); }
}
