/* ============================================================
   Re-Order CRM — 2026 theme layer
   ------------------------------------------------------------
   Loaded AFTER style.css. style.css is ~87% token-driven (850
   var() references), so redefining the tokens here re-skins
   every screen at once without touching 293 component
   selectors — and without risking the WCAG AA contrast work
   and print rules already in that file.

   Only the visual language changes here: palette, surfaces,
   elevation, radii, density. Structure and behaviour stay put.
   Mobile layout lives in mobile.css.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     Ground & surfaces
     Flat neutral instead of the old sky-blue gradient. Field
     staff read this outdoors on a phone; a flat, high-contrast
     ground stays legible in sunlight where a wash does not.
     ---------------------------------------------------------- */
  --bg-top:      #eef2f7;
  --bg-bot:      #f6f8fb;
  --card:        #ffffff;
  --card-soft:   #f7f9fc;

  /* ----------------------------------------------------------
     Ink — slate, warmer and higher-contrast than the old navy.
     --muted is the smallest text on screen (11px counts and
     meta), so it is held at ~5.6:1 on white, above AA.
     ---------------------------------------------------------- */
  --text:        #0f172a;
  --text-soft:   #334155;
  --muted:       #55647c;
  --muted-soft:  #8695a9;

  /* ----------------------------------------------------------
     Accent — indigo. Reads as "software" rather than the old
     link-blue, and keeps white text above AA at every weight.
     ---------------------------------------------------------- */
  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-bright: #6366f1;
  --primary-soft:   #eef2ff;
  --primary-glow:   rgba(99, 102, 241, 0.20);

  --ice:           #eef2ff;
  --frost:         #f7f9fc;
  --border:        #e4e9f0;
  --border-strong: #c8d2e0;

  /* Status — same semantics, cleaner hues. The *-text variants
     are what actually sits on the *-bg chips, so both moved
     together to hold contrast. */
  --error-bg:   #fee9e9; --error-text:   #a51c22; --error:   #e11d48;
  --success-bg: #dcfce7; --success-text: #0a6045; --success: #059669;
  --warn-bg:    #fef3c7; --warn-text:    #7c4500; --warn:    #d97706;
  --info-bg:    #e6ecff; --info-text:    #3730a3; --info:    #4f46e5;

  /* ----------------------------------------------------------
     Elevation — tighter and cooler. The old shadows were large
     and soft, which read as dated and muddied the dense tables.
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow:    0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.05), 0 16px 36px rgba(15, 23, 42, 0.10);
  --shadow-pop: 0 20px 50px rgba(15, 23, 42, 0.26);

  /* Radii — a touch larger; modern without turning into pills. */
  --radius-xs:   7px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  --ring: 0 0 0 3px rgba(99, 102, 241, 0.38);
}

/* ============================================================
   Ground
   ============================================================ */
body {
  background: var(--bg-bot);
  background-image: none;
}

/* ============================================================
   Top bar — solid, thin, and sticky. The old bar carried a
   shadow that competed with the page head underneath it.
   ============================================================ */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.topbar-links a {
  font-weight: var(--fw-medium);
  color: var(--text-soft);
}
.topbar-links a:hover { background: var(--frost); color: var(--text); }
.topbar-links a.active {
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: var(--fw-semi);
}

/* ============================================================
   Cards, panels, stats — flatter, crisper edges
   ============================================================ */
.panel,
.form-card,
.chart-card,
.stat,
.auth-card,
.insights-panel {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

/* The lift-on-hover was 3px, which made dense stat rows jitter. */
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ============================================================
   Buttons — squarer, tighter, with a real pressed state
   ============================================================ */
.btn {
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  box-shadow: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-secondary {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--text-soft);
}
.btn-secondary:hover { background: var(--frost); border-color: var(--muted-soft); color: var(--text); }

/* ============================================================
   Inputs — 1px borders instead of 1.5px, calmer focus
   ============================================================ */
input[type="text"], input[type="search"], input[type="date"],
input[type="number"], input[type="password"], input[type="datetime-local"],
input[type="email"], input[type="tel"], select, textarea {
  border-width: 1px;
  border-color: var(--border-strong);
  background: var(--card);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-bright);
  box-shadow: var(--ring);
  outline: none;
}

/* ============================================================
   Tables — the densest surface in the app. Zebra removed in
   favour of a hairline rule; the stripes fought with the
   status badges in every row.
   ============================================================ */
.table thead th {
  background: var(--frost);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:hover { background: var(--primary-soft); }

/* ============================================================
   Badges — flat chips, no gradients or borders
   ============================================================ */
.badge {
  border: 0;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  box-shadow: none;
}

/* ============================================================
   Hard-coded gradients left over in style.css
   ------------------------------------------------------------
   style.css is 87% token-driven, but a handful of gradients
   carry literal hex values that the token overrides above
   cannot reach. The dashboard hero was the visible one: it
   stayed on the old link-blue while every button beside it had
   already moved to indigo. Re-pointed here rather than edited
   in place, so style.css stays untouched.
   ============================================================ */
.hero-card {
  background: linear-gradient(135deg,
              var(--primary-hover) 0%,
              var(--primary) 45%,
              var(--primary-bright) 100%);
}

/* The call / WhatsApp circles keep their own green — that is a
   platform colour people recognise, not part of our palette —
   but the flat fills read cleaner than the old two-stop ramps. */
.icon-btn-call     { background: linear-gradient(135deg, #10b981, #059669); }
.icon-btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }

/* ============================================================
   [hidden] must actually hide
   ------------------------------------------------------------
   The `hidden` attribute only carries a UA `display: none`, so
   any class rule with its own `display` silently beats it.
   style.css line 821 sets `.outcome-new-wrap { display: flex }`
   — so the "Type new outcome name…" box rendered permanently
   on the Take Action form and inside the quick-log modal even
   though the markup marks it hidden and app.js toggles the
   attribute. Several other components use the attribute the
   same way (bulk bar, search overlay, WhatsApp picker), so
   this is fixed once, globally, rather than per component.

   Anything that needs to stay visible while carrying the
   attribute must therefore set its own display explicitly with
   a stronger selector — nothing in this app does.
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   Last call & remark — separator
   ------------------------------------------------------------
   The "date : remark" separator used to be a literal text node
   between the two spans. style.css's print block sets both to
   display:block, which stranded the colon alone on its own
   line on every printed row. It is generated now, so it only
   exists when there is a remark to separate — and print, where
   the two already stack, drops it entirely.
   ============================================================ */
.last-remark-text::before { content: ": "; color: var(--muted); }

@media print {
  .last-remark-text::before { content: none; }
}