/* ============================================================
   CuestVanguard - calm layer
   ============================================================
   Replaces the industrial layer. Sits on top of the base, brand and
   night-shift rules in styles.css; calm.js switches html.calm and
   html.night on, so every dark-mode fix in styles.css still applies and
   this file only has to retone it.

   Intent: very dark, flat and quiet. Near-black page, hairline zinc
   borders, slightly rounded corners, no gradients, stripes or heavy
   shadows, Poppins throughout. Gold is kept for the one button to press.
   Delete the calm.css / calm.js lines in index.html to drop it.
   ============================================================ */

@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }

/* The wordmark face: flared small caps, so "CuestVanguard" sets as a big C
   and V with small capitals between. Latin subset, weight 600 only. */
@font-face { font-family: 'Cinzel'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/cinzel-600.woff2') format('woff2'); }

/* ---------- wordmark: Cinzel, with the V in gold ---------- */
.wordmark { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.wordmark .wm-v { color: #c9a961; }

html.calm {
  --zinc-950: #09090b;
  --zinc-925: #0f0f12;
  --zinc-900: #18181b;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --zinc-50: #fafafa;

  --bg: var(--zinc-950);
  --surface: var(--zinc-925);
  --surface-alt: var(--zinc-900);
  --text: var(--zinc-50);
  --text-secondary: var(--zinc-400);
  --muted: var(--zinc-500);
  --border: var(--zinc-800);
  --border-strong: var(--zinc-700);
  --primary: var(--zinc-50);
  --accent: var(--zinc-300);
  --info-bg: rgba(59, 130, 246, 0.12);
  --neutral-bg: var(--zinc-900); --neutral-text: var(--zinc-400);
  --ok-bg: rgba(34, 197, 94, 0.12);     --ok-text: #86efac;
  --warn-bg: rgba(234, 179, 8, 0.12);   --warn-text: #fde047;
  --danger-bg: rgba(239, 68, 68, 0.12); --danger-text: #fca5a5;
  --info-text: #93c5fd;
  --gold: #c9a961;
  --gold-hover: #b3924a;
  --gold-soft: rgba(255, 255, 255, 0.03);
  --heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 8px;
  --shadow: none;
  --shadow-lift: none;
  color-scheme: dark;
}

/* ---------- page ---------- */
html.calm body {
  background: var(--zinc-950);
  background-image: none;
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html.calm button,
html.calm input,
html.calm select,
html.calm textarea { font-family: inherit; }

/* Always dark, so the night-shift switch has nothing to do. */
html.calm #nightBtn { display: none; }

/* ---------- header ---------- */
html.calm .app-header {
  background: var(--zinc-950);
  border-bottom: 1px solid var(--zinc-800);
}
html.calm .app-header .brand-mark { height: 30px; width: auto; }
html.calm .app-header h1.wordmark { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--zinc-50); }
@media (max-width: 560px) {
  html.calm .app-header h1.wordmark { font-size: 15px; letter-spacing: 0.02em; }
}
html.calm .brand-rule { background: var(--zinc-800); }
html.calm .brand-parent { color: var(--zinc-500); font-family: var(--heading); font-size: 12px; letter-spacing: 0.04em; }
html.calm .user-chip { border-radius: 0; }
/* The monogram: a square tile, the initials in the wordmark's lettering with
   the first in gold, and gold on two opposite corners. */
html.calm .user-avatar {
  position: relative; border-radius: 0; box-shadow: none;
  background: var(--zinc-900); border: 1px solid var(--zinc-700); color: var(--zinc-50);
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; letter-spacing: 0;
}
html.calm .user-avatar::before,
html.calm .user-avatar::after { content: ''; position: absolute; width: 6px; height: 6px; border: 0 solid var(--gold); }
html.calm .user-avatar::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
html.calm .user-avatar::after { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
html.calm .user-avatar .av-first { color: var(--gold); }
html.calm .user-chip:hover .user-avatar { border-color: var(--zinc-500); }
html.calm .user-name { font-family: var(--heading); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--zinc-50); }
html.calm .user-sub { color: var(--zinc-500); }
html.calm .role-tag { border-radius: 0; background: var(--zinc-800); color: var(--zinc-300); }
html.calm .hdr-divider { background: var(--zinc-800); }
html.calm .hdr-btn {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--zinc-800);
  color: var(--zinc-300);
}
html.calm .hdr-btn:hover { background: var(--zinc-900); color: var(--zinc-50); }
html.calm .hdr-label { font-family: var(--heading); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- sidebar ---------- */
html.calm .sidebar { background: var(--zinc-950); border-right: 1px solid var(--zinc-800); }
html.calm .sidebar .nav-group {
  color: var(--zinc-500);
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 1;
}
html.calm .sidebar .nav-item {
  font-family: var(--heading);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zinc-400);
  border-left: none;
  border-radius: 6px;
  margin: 1px 8px;
  padding-left: 10px;
}
html.calm .sidebar .nav-item::before { background: var(--zinc-500); opacity: 1; }
html.calm .sidebar .nav-item:hover { background: var(--zinc-900); color: var(--zinc-50); padding-left: 10px; }
html.calm .sidebar .nav-item.active { background: var(--zinc-900); color: var(--zinc-50); font-weight: 500; }
html.calm .sidebar .nav-item.active::before { background: var(--gold); }

/* Phone section picker. */
html.calm .nav-select-wrap select {
  background-color: var(--zinc-900);
  color: var(--zinc-50);
  border: 1px solid var(--zinc-800);
  border-radius: 8px;
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- page heading: plain text over a hairline ---------- */
html.calm .page-banner,
html.calm.dusk .page-banner {
  background: none;
  border: none;
  border-bottom: 1px solid var(--zinc-800);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 2px 18px;
  margin-bottom: 20px;
  color: var(--zinc-50);
}
html.calm .page-banner::after { display: none; }
html.calm .page-banner .pb-eyebrow { color: var(--zinc-500); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 4px; }
html.calm .page-banner .pb-title { font-family: var(--heading); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--zinc-50); }
html.calm .page-banner .pb-sub { color: var(--zinc-400); font-size: 13px; }

/* ---------- cards ---------- */
html.calm .card,
html.calm.night .card {
  background: var(--zinc-925);
  border: 1px solid var(--zinc-800);
  border-radius: 8px;
  box-shadow: none;
}
html.calm h2,
html.calm.night h2 {
  font-family: var(--heading);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zinc-50);
}
html.calm .card > h2::before,
html.calm .guide-head h2::before { display: none; }
html.calm h3 { color: var(--zinc-300); }
html.calm label { color: var(--zinc-400); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Warning cards drop the hazard stripe for a quiet amber edge. */
html.calm #unconvertedCard,
html.calm #staleTalksCard { padding-top: 18px; border-left: 2px solid #ca8a04; }
html.calm #unconvertedCard::before,
html.calm #staleTalksCard::before { display: none; }

/* ---------- inputs ---------- */
html.calm input,
html.calm select,
html.calm textarea,
html.calm.night input,
html.calm.night select,
html.calm.night textarea {
  background-color: var(--zinc-950);
  color: var(--zinc-50);
  border: 1px solid var(--zinc-800);
  border-radius: 6px;
}
html.calm input::placeholder,
html.calm textarea::placeholder { color: var(--zinc-500); }
html.calm input:focus,
html.calm select:focus,
html.calm textarea:focus {
  outline: none;
  border-color: var(--zinc-500);
  box-shadow: 0 0 0 1px var(--zinc-500);
}
html.calm input[type="checkbox"],
html.calm input[type="radio"] { accent-color: var(--gold); }

/* ---------- buttons ---------- */
/* The main action: a small dark square block with a gold bar down its left
   edge, rather than a gold fill. */
html.calm button.primary {
  background: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  border-left: 3px solid var(--gold);
  color: var(--zinc-50);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: none;
  padding: 6px 13px 6px 11px;
  min-height: 0;
}
html.calm button.primary:hover { background: var(--zinc-800); border-color: var(--zinc-500); border-left-color: var(--gold); box-shadow: none; transform: none; }
html.calm button.primary:disabled { opacity: 0.5; }
@media (max-width: 600px) { html.calm button.primary { min-height: 36px; padding: 8px 14px 8px 12px; } }
html.calm .export-btn,
html.calm button.secondary,
html.calm.night .export-btn,
html.calm.night button.secondary {
  background: transparent;
  border: 1px solid var(--zinc-800);
  color: var(--zinc-300);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
html.calm .export-btn:hover,
html.calm button.secondary:hover { background: var(--zinc-900); color: var(--zinc-50); }
/* The second button in a pair (Find Registers, the CSV download, Import,
   Clock Out) was navy with white text. Here --primary is near-white, so
   they turned white-on-white; they take the outlined look instead, leaving
   gold for the main action beside them. */
html.calm #syncFindBtn,
html.calm #payrollView .pr-alt,
html.calm #estimatesView .est-import-btn,
html.calm .clock-card .clock-out {
  background: transparent;
  border: 1px solid var(--zinc-700);
  color: var(--zinc-50);
  border-radius: 0;
}
html.calm #syncFindBtn:hover,
html.calm #payrollView .pr-alt:hover,
html.calm #estimatesView .est-import-btn:hover,
html.calm .clock-card .clock-out:hover { background: var(--zinc-900); border-color: var(--zinc-500); }
html.calm .small-btn,
html.calm.night .small-btn { color: var(--zinc-300); font-family: var(--heading); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Segmented tabs: one hairline group, the active one filled grey. */
html.calm .tabs button,
html.calm.night .tabs button { background: transparent; color: var(--zinc-400); border-color: var(--zinc-800); border-radius: 0; }
html.calm .tabs button:first-child,
html.calm .tabs button:last-child { border-radius: 0; }
/* The rest of the buttons, square like the main ones. */
html.calm .sign-actions .small-btn,
html.calm .pt-folders button { border-radius: 0; }
html.calm .pt-folders button.on { background: var(--zinc-800); border-color: var(--zinc-600, #52525b); color: var(--zinc-50); box-shadow: inset 3px 0 0 var(--gold); }
html.calm .tabs button.active,
html.calm.night .tabs button.active { background: var(--zinc-800); color: var(--zinc-50); border-color: var(--zinc-800); }

/* ---------- stat boxes: a slim strip, label over a modest number ---------- */
html.calm .summary,
html.calm.night .summary {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; grid-template-columns: none;
}
html.calm .summary .stat,
html.calm.night .summary .stat {
  flex: 0 1 auto; min-width: 140px;
  background: transparent;
  border: 1px solid var(--zinc-800);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 14px;
  display: flex; flex-direction: column-reverse; gap: 2px;
}
html.calm .summary .stat::before { display: none; }
html.calm .summary .stat:hover { transform: none; }
html.calm .summary .stat .num,
html.calm.night .summary .stat .num { font-family: var(--heading); font-size: 1.05rem; line-height: 1.25; font-weight: 600; color: var(--zinc-50); letter-spacing: -0.01em; }
.summary .stat.stat-money .num::before { content: '$'; }
html.calm .summary .stat .lbl { color: var(--zinc-500); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- status: colored words, like the Estimating Log ---------- */
html.calm .badge,
html.calm.night .badge {
  background: none !important;
  border: 0;
  border-radius: 0;
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
}
/* Some statuses arrive lower case ("approved"): just the first letter up. */
html.calm .badge::first-letter { text-transform: uppercase; }
html.calm .badge-ok { color: #6fd394; }
html.calm .badge-warn { color: #e9c75a; }
html.calm .badge-danger { color: #f08a93; }
html.calm .badge-info { color: #7fb6f0; }
html.calm .badge-neutral { color: var(--zinc-400); }

/* ---------- filters: one compact row that applies as you change it ---------- */
html.calm .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 12px; }
html.calm .filters > div { flex: 0 1 200px; min-width: 150px; }
html.calm .filters label { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zinc-500); margin: 0 0 3px; }
html.calm .filters input, html.calm .filters select { margin: 0; padding: 6px 9px; font-size: 0.82rem; }
html.calm .filters .drawer-open { margin: 0; align-self: flex-end; }
.tb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.tb-bar .drawer-open { margin: 0; }
html.calm .card.tb-card { padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 6px; }
html.calm .card.tb-card .tb-bar { margin: 0; }

/* ---------- "new item" forms open in a drawer beside the list ---------- */
html.calm .card.side-drawer {
  position: fixed; top: 51px; right: 0; bottom: 0; z-index: 30; margin: 0;
  width: min(480px, 100vw); overflow-y: auto; border-radius: 0;
  border: 0; border-left: 1px solid var(--zinc-700); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.35);
}
html.calm .card.side-drawer.drawer-closed { display: none; }
.side-drawer .drawer-x { float: right; margin: -4px 0 0 10px; }
.side-drawer h2 { margin-top: 0; }
@media (max-width: 560px) { html.calm .card.side-drawer { top: 79px; } }
html.calm .job-tag,
html.calm.night .job-tag {
  background: var(--zinc-900);
  border: 1px solid var(--zinc-800);
  border-radius: 4px;
  box-shadow: none;
  color: var(--zinc-300);
  font-family: var(--heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
html.calm .job-tag::before { background: var(--gold); border-color: var(--gold); }

/* ---------- tables ---------- */
html.calm th,
html.calm.night th {
  background: none;
  color: var(--zinc-500);
  font-family: var(--heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--zinc-800);
}
html.calm td,
html.calm.night td { color: var(--zinc-300); border-bottom: 1px solid var(--zinc-800); font-variant-numeric: tabular-nums; }
html.calm tbody tr:nth-child(even) td { background: none; }
html.calm tbody tr:hover td,
html.calm.night tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }

/* ---------- empty states: no cartoons ---------- */
html.calm .state-cell .empty-art,
html.calm .all-clear svg { display: none; }
html.calm .state-cell,
html.calm.night .state-cell { color: var(--zinc-500); }
html.calm .state-cell .state-title { font-family: var(--heading); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--zinc-400); }
html.calm .all-clear { padding: 16px 0; border: 1px dashed var(--zinc-800); border-radius: 8px; text-align: center; }
html.calm .all-clear .ac-title,
html.calm.night .all-clear .ac-title { font-family: var(--heading); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--zinc-300); }

/* ---------- the "needs you" rail ---------- */
html.calm .rail-title { color: var(--zinc-500); font-family: var(--heading); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; }
html.calm .rail-item,
html.calm.night .rail-item,
html.calm.night .rail-item:hover {
  background: var(--zinc-925);
  border: 1px solid var(--zinc-800);
  border-left: 2px solid var(--zinc-700);
  border-radius: 8px;
  box-shadow: none;
}
html.calm .rail-item:hover { transform: none; border-color: var(--zinc-700); }
html.calm .rail-item.tone-danger { border-left-color: #b91c1c; }
html.calm .rail-item.tone-warn { border-left-color: #ca8a04; }
html.calm .rail-item.tone-info { border-left-color: #3b82f6; }
html.calm .rail-count,
html.calm.night .rail-count { font-family: var(--heading); font-weight: 600; color: var(--zinc-50); }
html.calm .rail-item.tone-danger .rail-count { color: #dc2626; }
html.calm .rail-item.tone-warn .rail-count { color: #fde047; }
html.calm .rail-label { color: var(--zinc-300); }
html.calm .rail-clear,
html.calm.night .rail-clear { color: var(--zinc-500); border-color: var(--zinc-800); }

/* ---------- the rest of the surfaces ---------- */
html.calm .guide-tip,
html.calm.night .guide-tip { background: var(--zinc-900); border-color: var(--zinc-800); border-radius: 6px; }
html.calm .msg,
html.calm.night .msg { background: var(--zinc-900); border-color: var(--zinc-800); }
html.calm .msg.is-mine,
html.calm.night .msg.is-mine { background: #1c1c20; border-color: var(--zinc-700); }
html.calm .clock-elapsed,
html.calm.night .clock-elapsed,
html.calm .est-grand,
html.calm.night .est-grand { color: var(--zinc-50); border-top-color: var(--zinc-700); }
html.calm .status-box { border-radius: 6px; }
html.calm .ui-modal-box,
html.calm.night .ui-modal-box { background: var(--zinc-925); border: 1px solid var(--zinc-800); box-shadow: none; }
html.calm .tape,
html.calm.night .tape { background-color: var(--zinc-800); }
html.calm.night .gantt-bar.is-milestone { background: var(--zinc-300); }
/* The pop-up notice. It took its fill from --text, which is near-white here,
   so it read white-on-white. */
html.calm .toast {
  background: var(--zinc-800);
  color: var(--zinc-50);
  border: 1px solid var(--zinc-700);
  border-radius: 6px;
  font-size: 13px;
  padding: 9px 16px;
}
html.calm .cv-stamp,
html.calm.night .cv-stamp { background: rgba(9, 9, 11, 0.6); }

/* ---------- welcome splash: flat black, no skyline ---------- */
html.calm .welcome,
html.calm.dusk .welcome { background: var(--zinc-950); }
html.calm .welcome-emblem { width: 120px; height: auto; }
html.calm .welcome-word { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-weight: 600; letter-spacing: 0.04em; color: var(--zinc-50); }
html.calm .welcome-rule { background: var(--zinc-800); opacity: 1; }
html.calm .welcome-motto { font-family: var(--heading); color: var(--zinc-500); letter-spacing: 0.24em; }