:root {
  color-scheme: light;
  --navy: #0F1B3D;
  --blue-accent: #FF7F33;
  --ink: #101828;
  --muted: #667085;
  --line: #E5E7EB;
  --bg: #F5F7FA;
  --bg-image: none;
  --surface: #fff;
  --white: #fff;
  --card-border: #E5E7EB;
  --topbar-bg: rgba(255,255,255,.72);
  --green: #16A34A;
  --green-soft: #ECFDF3;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
  --blue-soft: #FFF1EC;
  --shadow: 0 2px 4px rgba(16,24,40,.04), 0 10px 26px -6px rgba(16,24,40,.12);
  --badge-blue-bg: #EAF2FF; --badge-blue-fg: #1D6FD9;
  --badge-green-bg: #E7FBF0; --badge-green-fg: #16A34A;
  --badge-amber-bg: #FFF3E0; --badge-amber-fg: #B45309;
  --badge-red-bg: #FDEDED; --badge-red-fg: #B91C1C;
  --badge-muted-bg: #F1F2F4; --badge-muted-fg: #667085;
}

/* Night mode -- toggled via the sun/moon button in the topbar, persisted
   to localStorage as data-theme on <html>, applied inline in index.html's
   <head> before paint so there's no flash of the wrong theme. Manual
   toggle only (falls back to OS preference just once, on first visit) --
   ported from mr-fieldtrack's own admin dashboard, same reasoning: a
   deliberate choice, not OS-following.

   Deliberately NOT repointing --white here (mr-fieldtrack's own scheme
   does, reusing it as a dark "surface" color) -- our buttons use
   `color: var(--white)` for their text, and a repointed --white would
   make button text nearly invisible in dark mode. --surface is its own
   token instead, used only for card/topbar backgrounds. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0F1B3D;
  --blue-accent: #FF7F33;
  --ink: #EDF0F7;
  --muted: #93A0BB;
  --line: rgba(255,255,255,.09);
  --bg: #0A0E1A;
  --bg-image: radial-gradient(1100px 700px at 14% -8%, rgba(255,127,51,.24), transparent 60%),
              radial-gradient(900px 600px at 100% 0%, rgba(109,74,255,.16), transparent 55%);
  --surface: rgba(24,30,48,.66);
  --white: #fff;
  --card-border: rgba(246,184,143,.28);
  --topbar-bg: rgba(14,18,32,.62);
  --green: #4ADE80;
  --green-soft: rgba(74,222,128,.26);
  --red: #F87171;
  --red-soft: rgba(248,113,113,.26);
  --blue-soft: rgba(255,127,51,.22);
  --shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px -12px rgba(0,0,0,.55);
  --badge-blue-bg: rgba(76,154,255,.28); --badge-blue-fg: #9CC2FF;
  --badge-green-bg: rgba(74,222,128,.26); --badge-green-fg: #4ADE80;
  --badge-amber-bg: rgba(251,191,102,.28); --badge-amber-fg: #FBBF66;
  --badge-red-bg: rgba(248,113,113,.26); --badge-red-fg: #F87171;
  --badge-muted-bg: rgba(255,255,255,.08); --badge-muted-fg: #93A0BB;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-image) var(--bg);
  background-attachment: fixed;
  color: var(--ink);
}

#app { min-height: 100vh; }

/* ---------- App shell: sidebar + topbar + content ---------- */

.app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 20px 14px;
}
.sidebar-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 6px 10px 22px;
}
.sidebar-logo-wrap { display: inline-flex; align-items: center; }
.sidebar-logo { height: 45px; width: auto; display: block; }
.sidebar-brand .brand-sub { font-size: 11px; color: #8592AC; font-weight: 600; letter-spacing: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: #C7D0E0; text-decoration: none; font-size: 13.5px; font-weight: 600; cursor: pointer;
  margin-bottom: 2px; margin-top: 0; border: 0; background: none; width: 100%; text-align: left;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(255,127,51,.30); color: #fff; }
.nav-item.nested { padding-left: 30px; font-size: 13px; }

/* Product group heading in the sidebar (e.g. "MR FieldTrack") -- a plain
   label, not a route, sitting above that product's own indented pages. */
.nav-group-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #6E7A98; padding: 14px 12px 4px;
}

.sidebar-footer { margin-top: auto; padding: 10px; font-size: 12px; color: #8592AC; }

.hamburger-btn { display: none; border: 0; background: none; padding: 6px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.hamburger-btn:hover { background: var(--blue-soft); }
.sidebar-backdrop { display: none; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.topbar-title { font-size: 19px; font-weight: 800; color: var(--ink); }
.topbar-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.content { padding: 26px 28px; }

.theme-toggle-btn {
  position: relative; color: var(--muted); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: none; margin-top: 0;
}
.theme-toggle-btn:hover { background: var(--blue-soft); color: var(--ink); }
.theme-toggle-btn svg { display: block; }
.theme-toggle-btn svg[hidden] { display: none; }

/* Topbar quick-action pills (Create Invoice / Add Org / Add Client) --
   colored tint per action (matches the stat-card badge colors), pill-
   shaped so they read as real actions, not just icon buttons. */
.pill-action-btn {
  display: flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 8px 14px; margin: 0;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.pill-action-btn:hover { filter: brightness(0.96); transform: translateY(-1px); }
:root[data-theme="dark"] .pill-action-btn:hover { filter: brightness(1.15); }
.pill-action-btn svg { flex-shrink: 0; display: block; }

@media (max-width: 760px) {
  .pill-action-btn span { display: none; }
  .pill-action-btn { padding: 8px; }
}

.logout-link { font-size: 13px; color: var(--blue-accent); cursor: pointer; text-decoration: none; }

/* ---------- Topbar search ---------- */

.topbar-search {
  position: relative; flex: 1; max-width: 480px; margin: 0 24px; height: 38px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 0 12px; color: var(--muted);
}
.topbar-search:focus-within { border-color: var(--blue-accent); }
.topbar-search input {
  border: 0; background: none; padding: 0; font-size: 13.5px; color: var(--ink); width: 100%; height: 100%; min-width: 0;
}
.topbar-search input:focus { outline: none; }
.topbar-search svg { flex-shrink: 0; }
.search-kbd-hint {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.topbar-search:focus-within .search-kbd-hint { display: none; }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 360px; overflow-y: auto; padding: 8px; z-index: 50;
}
.search-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 4px; }
.search-result-item {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink);
  font-size: 13.5px; font-weight: 500; padding: 8px; border-radius: 8px; margin: 0; cursor: pointer;
}
.search-result-item:hover { background: var(--blue-soft); }

@media (max-width: 820px) {
  .topbar-search { display: none; }
}

/* ---------- Profile chip ---------- */

.profile-chip-wrap { position: relative; }
.profile-chip {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 6px;
  border-radius: 10px; cursor: pointer; margin: 0; color: var(--ink);
}
.profile-chip:hover { background: var(--blue-soft); }
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.profile-chip-text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.profile-name { font-size: 13px; font-weight: 700; }
.profile-role { font-size: 11px; color: var(--muted); }
.profile-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px; padding: 8px; z-index: 50;
}
.profile-dropdown.open { display: block; }
.profile-dropdown button { width: 100%; margin: 0; }
.profile-dropdown button + button { margin-top: 6px; }

@media (max-width: 480px) {
  .profile-chip-text { display: none; }
}

/* ---------- Overview: greeting, quick actions, tables, trend ---------- */

.greeting-header { margin-bottom: 20px; }
.greeting-header h2 { margin: 0; font-size: 22px; color: var(--ink); }

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
/* min-width:0 overrides a grid item's default min-width:auto (which sizes
   to its content's max-content width) -- without it, a card containing a
   wide table can force its "1fr" track wider than its sibling's, so two
   equal fr units silently render unequal. The card's own internal
   overflow-x:auto wrappers handle any real overflow instead. */
.dashboard-grid .card { margin-bottom: 0; min-width: 0; }

/* Revenue Overview + Recurring Invoices share a row, matched to equal
   height by JS (`syncOverviewCardHeights()`) rather than grid's own
   align-items:stretch -- a nested flex-in-grid card with a flex:1 child
   (the scroll area below) doesn't reliably stretch to its sibling's
   height across browsers, so the actual taller-of-the-two height is
   measured post-render and applied to both as a min-height instead. The
   recurring card is a flex column so its scroll area is the only part
   that grows/shrinks to fill that assigned height. Capping the scroll
   area's own max-height is what keeps it from simply growing to fit every
   plan (which would drag the whole row, and the Revenue card next to it,
   taller and taller) -- ~2 rows' worth, so a third plan is what actually
   needs the scrollbar. */
.dashboard-grid-equal .card { display: flex; flex-direction: column; }
.recurring-alert-scroll { flex: 1 1 auto; min-height: 80px; max-height: 270px; overflow-y: auto; padding-right: 6px; margin-top: 2px; }

.revenue-chart-wrap { position: relative; }
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 10; transform: translateY(-100%);
  background: var(--navy); color: #fff; font-size: 12px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow); white-space: nowrap;
}

/* Version Adoption tab's per-tenant card grid */
.org-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.org-summary-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  background: none; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 16px; cursor: pointer; color: var(--ink); margin: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.org-summary-card:hover { opacity: .85; transform: translateY(-1px); }
.org-summary-name { font-size: 14px; font-weight: 700; }
.org-summary-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

.pagination-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

.trend-badge { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.trend-badge.up { color: var(--green); background: var(--green-soft); }
.trend-badge.down { color: var(--red); background: var(--red-soft); }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.data-table td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover td { background: var(--blue-soft); }
.data-table tbody tr.clickable-row:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: -2px; }

/* Recent Invoices -- capped to roughly 3 rows tall so a full 5-row list
   needs a scroll instead of stretching the card; header stays pinned
   while scrolling so the columns are never ambiguous. */
.data-table-scroll { overflow: auto; max-height: 220px; }
.data-table-scroll .data-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* ---------- Invoices page: section headers, grouped forms, item table ---------- */

.section-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.section-header-text { flex: 1; min-width: 0; }
.section-header-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.section-header button { margin-top: 0; flex-shrink: 0; }

.form-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
@media (max-width: 700px) { .form-group-grid { grid-template-columns: 1fr; } }
.form-group { border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.form-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--blue-accent); }

.form-row-2, .form-row-3 { display: grid; gap: 16px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .form-row-2, .form-row-3 { grid-template-columns: 1fr; } }

.section-subtitle { font-size: 13px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; }

.item-table-header, .item-row {
  display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 36px; gap: 8px; align-items: center;
}
.item-table-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 0 0 6px;
}
.item-row { margin-top: 8px; }
.item-row input { margin: 0; }

.icon-btn {
  background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
  width: 32px; height: 32px; padding: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-btn:hover { background: var(--blue-soft); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.icon-btn-danger { color: var(--red); }
.icon-btn-danger:hover { background: var(--red-soft); color: var(--red); }

textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: var(--surface); color: var(--ink); font-family: inherit; resize: vertical;
}
.invoice-total-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink);
}
.invoice-total-row .hint-text { margin-top: 0; font-weight: 400; }

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .hamburger-btn { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 100;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(15,27,61,.45); z-index: 99;
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ---------- Cards (frosted glass) ---------- */

.card {
  background: var(--surface);
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow), 0 10px 28px -10px rgba(255,127,51,.22), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
:root[data-theme="dark"] .card { box-shadow: var(--shadow), 0 10px 28px -10px rgba(255,127,51,.3), inset 0 1px 0 rgba(255,255,255,.07); }

.card:hover {
  border-color: rgba(255,127,51,.45);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,127,51,.12), 0 14px 36px -8px rgba(255,127,51,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,127,51,.18), 0 14px 36px -8px rgba(255,127,51,.5), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- Login (own fixed branded look, independent of the app's
   light/dark toggle -- a deliberate splash/entry design, matching the
   Creazine logo's real orange/navy gradient, not the in-app theme). ---------- */

.login-page {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: radial-gradient(1400px 900px at 12% 88%, rgba(255,127,51,.35), transparent 60%),
              radial-gradient(1200px 800px at 88% 8%, rgba(255,158,66,.22), transparent 55%),
              linear-gradient(160deg, #0A1230 0%, #0F1B3D 45%, #14224A 100%);
  padding: 24px;
}

.login-orb {
  position: absolute; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
              radial-gradient(circle at 60% 65%, rgba(255,127,51,.55), rgba(15,27,61,.05) 70%);
  opacity: .85; pointer-events: none;
}
.login-orb-1 { width: 640px; height: 640px; left: -220px; bottom: -260px; }
.login-orb-2 { width: 520px; height: 520px; right: -200px; top: -220px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
              radial-gradient(circle at 60% 65%, rgba(29,111,217,.4), rgba(15,27,61,.05) 70%);
}

.login-side-text {
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600;
  letter-spacing: .28em; line-height: 1.9; text-transform: uppercase;
}
.login-watermark {
  position: absolute; right: 56px; bottom: 32px;
  color: rgba(255,255,255,.4); font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.login-watermark::before { content: ''; width: 26px; height: 1px; background: rgba(255,255,255,.4); }

@media (max-width: 860px) { .login-side-text, .login-watermark { display: none; } }

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: rgba(237,242,251,.78);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 24px 60px -12px rgba(5,10,30,.55), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  padding: 36px 32px 30px;
  text-align: center;
}
.login-logo { height: 40px; width: auto; margin-bottom: 22px; }
.login-subtitle { color: #344055; font-size: 15px; font-weight: 500; margin: 0 0 22px; line-height: 1.4; }

.login-field {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #E1E6F0; border-radius: 12px;
  padding: 4px 14px; text-align: left;
}
.login-field:focus-within { border-color: #FF7F33; box-shadow: 0 0 0 3px rgba(255,127,51,.12); }
.login-field svg { flex: none; color: #8B93A7; }
.login-card .login-field input {
  border: 0; padding: 12px 0; background: none; font-size: 15px; color: #101828;
  width: 100%; font-family: inherit;
}
.login-card .login-field input:focus { outline: none; }

.login-cta {
  width: 100%; margin-top: 18px; padding: 13px 18px;
  background: linear-gradient(135deg, #FF7F33, #FF8A3D);
  color: #fff; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px -8px rgba(255,127,51,.55);
}
.login-cta:hover { opacity: .95; }

button.login-back {
  margin-top: 14px; background: none; color: #667085; border: none;
  font-size: 13px; font-weight: 600; padding: 4px; box-shadow: none;
}
button.login-back:hover { opacity: .8; color: #344055; }

.login-footnote { color: #8B93A7; font-size: 12.5px; margin: 18px 0 0; }
.login-card .error-text { margin-top: 12px; }
.login-card .hint-text { color: #667085; font-size: 13px; margin: 0 0 22px; line-height: 1.4; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=date], input[type=number], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: var(--surface); color: var(--ink); font-family: inherit;
}
input[type=file] {
  width: 100%; padding: 8px 0; font-size: 13px; color: var(--muted); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  border-color: #FF7F33; outline: 2px solid rgba(255,127,51,.25); outline-offset: 1px;
}
/* Native controls (select's own dropdown popup, the date-input's
   calendar picker) draw themselves outside our CSS -- color-scheme is
   what tells the browser which palette to use for those, so they don't
   stay stuck light inside an otherwise dark page. */
select option { background: var(--surface); color: var(--ink); }

/* Pill radius (999px) is the app-wide button shape now -- matches the
   Trials page's row-action buttons (.pill-action below), rolled out
   everywhere via this one shared rule rather than repeating it per button.
   UI-primitive elements that happen to use a <button> tag for semantics
   (.nav-item, .toggle, .icon-btn, .login-cta, .pill-action-btn, etc.) each
   already define their own border-radius as a class selector, which wins
   over this bare-tag one regardless of source order -- so they're
   unaffected by this change (2026-09-16). */
button {
  background: linear-gradient(135deg, #FF7F33, #FF8A3D); color: var(--white); border: none;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 16px;
}
button:hover { opacity: .92; }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: var(--surface); color: var(--blue-accent); border: 1px solid var(--blue-accent); }
button.danger { background: var(--surface); color: var(--red); border: 1px solid var(--red); }
/* --blue-accent is actually the brand orange (see its definition above) --
   .secondary/.danger both read from real theme tokens correctly in both
   light and dark mode, but neither is an actual blue. .info fills that gap
   for actions (like "copy a link") that want to read as distinct from both
   the primary orange action and a destructive red one. */
button.info { background: var(--surface); color: var(--badge-blue-fg); border: 1px solid var(--badge-blue-fg); }

/* Compact pill-shaped action button (icon + label) for table-row actions --
   same "outline in its own status color, solid for the primary action"
   convention as the buttons above, just rounder and tighter for a row of
   several sitting side by side. */
button.pill-action {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; font-size: 12.5px; padding: 7px 14px; margin-top: 0;
}
button.pill-action svg { flex-shrink: 0; display: block; }

/* The browser's own file-picker button ignores our theme entirely by
   default (always its OS-native gray), which reads as broken in dark mode
   -- style it to match every other button so it doesn't stand out as an
   unthemed native control. */
input[type="file"] { color: var(--muted); font-size: 13px; }
input[type="file"]::file-selector-button {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; margin-right: 10px;
}
input[type="file"]::file-selector-button:hover { background: var(--blue-soft); }

.error-text { color: var(--red); font-size: 13px; margin-top: 10px; }
.hint-text { color: var(--muted); font-size: 12px; margin-top: 8px; }

.section-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 16px; }

.org-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.org-row:last-child { border-bottom: none; }
.org-name { font-weight: 600; color: var(--ink); }
.org-slug { font-size: 12px; color: var(--muted); }
/* Per-seat billing metric ("how many MRs are currently active") --
   distinct blue rather than the muted slug color, since this is the
   number that actually drives what an org gets invoiced. */
.org-mr-count { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--badge-blue-fg); margin-top: 5px; }
.org-mr-count svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Stacked (not a wide row) -- this card now shares a 3-up row with Quick
   Actions/Recent Organisations, so each item needs to read well in a
   narrow column rather than a full-width row. */
.recurring-alert-row {
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.recurring-alert-row:last-child { border-bottom: none; }
.recurring-alert-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.recurring-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.recurring-alert-actions button { margin-top: 0; font-size: 12.5px; padding: 7px 12px; }

/* The due date is the one thing that must never get missed -- a solid
   filled pill (not just colored text) so it reads as a distinct, urgent
   marker at a glance rather than blending into the surrounding hint text. */
.due-date-badge {
  display: inline-block; font-weight: 700; font-size: 12px;
  color: #fff; background: linear-gradient(135deg, #FF7F33, #FF9F5A);
  padding: 4px 10px; border-radius: 999px; letter-spacing: .01em;
}

.new-org-form { display: flex; gap: 10px; align-items: flex-end; }
.new-org-form input { flex: 1; }
.new-org-form button { margin-top: 0; }

.feature-list { margin-top: 8px; }
.feature-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.feature-row:last-child { border-bottom: none; }

.toggle {
  position: relative; width: 40px; height: 22px; border-radius: 11px;
  background: var(--line); cursor: pointer; border: none; padding: 0; flex-shrink: 0;
}
.toggle.on { background: var(--green); }
.toggle .knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s ease;
}
.toggle.on .knob { left: 20px; }

.pill {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.pill.on { background: var(--green-soft); color: var(--green); }
.pill.off { background: var(--red-soft); color: var(--red); }
.pill.warn { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.pill.muted { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
/* Dedicated yellow for "Partially Paid" only (added 2026-09-19) -- kept
   separate from --badge-amber-*, which .pill.warn already uses for
   unrelated states (overdue invoices, hot leads, never-reported orgs);
   changing that shared variable would have recolored all of those too.
   One fixed value in both themes (not a --badge-yellow-* pair) so the
   Overview donut's hardcoded JS fill can match it exactly without
   needing to read the active theme. */
.pill.partial-paid { background: rgba(234,179,8,.2); color: #CA8A04; }

/* Status chips (WhatsApp Suite, 2026-09-20): a softer take on .pill for
   state read at a glance -- a leading dot in the state's colour, tinted
   background and hairline border, all from the same theme tokens so it holds
   up in light and dark mode. .pill is left untouched for the rest of the app.
   on = good/delivered, info = accepted but no news yet, warn = we chose not to
   send, off = failed/inactive, tag = neutral label with no dot. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.chip.on   { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.chip.off  { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, transparent); }
.chip.warn { background: var(--badge-amber-bg); color: var(--badge-amber-fg); border-color: color-mix(in srgb, var(--badge-amber-fg) 28%, transparent); }
.chip.info { background: var(--badge-blue-bg); color: var(--badge-blue-fg); border-color: color-mix(in srgb, var(--badge-blue-fg) 28%, transparent); }
.chip.tag  { background: var(--badge-muted-bg); color: var(--badge-muted-fg); border-color: color-mix(in srgb, var(--badge-muted-fg) 22%, transparent); }
.chip.tag::before { display: none; }

/* WhatsApp log page body: fixed-height box with its own scrollbar, so a page
   of 10 rows never stretches the site list. Thin scrollbar in the app's
   muted line colour rather than the OS-default one. */
.wa-log-scroll {
  max-height: 340px; overflow-y: auto; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.wa-log-scroll::-webkit-scrollbar { width: 8px; }
.wa-log-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.wa-log-scroll::-webkit-scrollbar-track { background: transparent; }

/* Site name cell: favicon (or coloured initial) + name/domain. */
.site-cell { display: flex; align-items: center; gap: 10px; }
.site-favicon, .site-avatar {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); object-fit: contain; padding: 2px;
}
.site-avatar {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--white);
  background: linear-gradient(135deg, #FF7F33, #FF8A3D); border: none;
}


.spinner-text { color: var(--muted); font-size: 14px; padding: 20px 0; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 4px;
}
.stat-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.stat-body { min-width: 0; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Glass icon tile with no solid fill -- background stays fully transparent
   (no color block), but a soft sheen highlight + backdrop blur give it a
   glassy, faintly convex read instead of a plain flat-bordered box. Each
   instance sets its own glyph `color` inline; the sheen opacities are kept
   low on purpose so this never reads as a background color again. */
.icon-badge {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 38px; height: 38px;
  border-radius: 13px; border: 1px solid var(--card-border); background: none;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -6px 8px -6px rgba(0,0,0,.1);
}
:root[data-theme="dark"] .icon-badge {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -6px 8px -6px rgba(0,0,0,.35);
}
.icon-badge::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 22% 16%, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
}
.icon-badge::after {
  content: ''; position: absolute; pointer-events: none;
  left: 5%; right: 5%; top: 1%; height: 30%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity: .7;
}
.icon-badge svg { position: relative; z-index: 1; display: block; }

.currency-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.currency-card {
  border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(165deg, var(--badge-blue-bg), transparent 65%);
}
.currency-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.currency-symbol-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--badge-blue-bg); color: var(--badge-blue-fg);
  font-weight: 800; font-size: 14px;
}
.currency-card .currency-code { font-weight: 800; color: var(--ink); font-size: 13.5px; letter-spacing: .03em; }
.currency-amount-block + .currency-amount-block { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.currency-card .currency-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 1px 0; }
.currency-card .currency-row .label { color: var(--muted); font-weight: 600; }
.currency-amount-value { font-size: 15px; font-weight: 800; }
.currency-amount-block.collected .currency-amount-value { color: var(--badge-green-fg); }
.currency-amount-block.outstanding .currency-amount-value { color: var(--badge-amber-fg); }

.overview-flex { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }

.donut-chart-wrap { position: relative; flex-shrink: 0; }
.donut-arc { cursor: pointer; transition: filter .15s ease; }
.donut-arc:hover, .donut-arc:focus { filter: brightness(1.16); outline: none; }
.donut-tooltip {
  position: absolute; pointer-events: none; z-index: 10; transform: translateY(-100%);
  background: var(--navy); color: #fff; font-size: 12px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow); white-space: nowrap;
}

.donut-legend { display: flex; flex-direction: column; gap: 10px; font-size: 13px; flex: 1; min-width: 120px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; }
.donut-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-label { color: var(--ink); }

/* Lead Radar's in-page sub-tab switcher (Review Queue / Sources / Stats) --
   a lighter-weight toggle than the sidebar's .nav-item, since these three
   views share one route rather than being separate pages. */
.subtab-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.subtab-btn {
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 7px 16px;
  margin-top: 0; cursor: pointer;
}
.subtab-btn:hover { opacity: 1; color: var(--ink); }
.subtab-btn.active { background: var(--blue-accent); color: #fff; border-color: var(--blue-accent); }

.lead-card { padding: 16px 0; border-bottom: 1px solid var(--line); }
.lead-card:last-child { border-bottom: none; }
.lead-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lead-card-title { font-weight: 600; color: var(--ink); font-size: 17px; }
.lead-view-post-link {
  font-size: 13px; font-weight: 600; color: var(--blue-accent);
  text-decoration: none; margin-left: 8px; white-space: nowrap;
}
.lead-view-post-link:hover { text-decoration: underline; }
.lead-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Bumped up 2026-09-18 -- the default .hint-text (12px) and the old 13.5px
   draft box were too small to comfortably read a lead's full text; scoped
   to .lead-card specifically rather than raising .hint-text globally,
   since that class is shared with unrelated parts of the app (invoice
   rows, login screen, etc.) that don't need the same bump. */
.lead-card .hint-text { font-size: 14.5px; line-height: 1.5; }
.lead-draft-box {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin-top: 12px; font-size: 16px; line-height: 1.5;
}
.lead-draft-box textarea { width: 100%; margin-top: 6px; font-family: inherit; font-size: 16px; line-height: 1.5; }
.lead-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lead-card-actions button { margin-top: 0; }
.donut-legend-value { margin-left: auto; font-weight: 700; color: var(--ink); }

/* MindEase demo tab */
.me-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border, rgba(128,128,128,.25)); }
.me-sub { font-size: 13px; opacity: .7; margin-top: 2px; }
.me-links { margin-top: 16px; }
.me-link { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.me-link span { min-width: 56px; font-weight: 600; }
.me-link a { word-break: break-all; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #9aa3a1; border-radius: 26px; cursor: pointer; transition: .2s; }
.switch .slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: #00897b; }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .5; cursor: wait; }

/* Client Sites tab (public/admin/clientSites.js) */
.cs-rules { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: rgba(255,127,51,.08); border: 1px solid rgba(255,127,51,.25); margin-bottom: 14px; }
.cs-site { border: 1px solid var(--border, rgba(128,128,128,.25)); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.cs-site-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.cs-mode-active { background: rgba(0,137,123,.15); color: #00897b; }
.cs-mode-notice { background: rgba(245,166,35,.18); color: #b26a00; }
.cs-mode-admin_locked { background: rgba(229,115,0,.18); color: #c25400; }
.cs-mode-suspended { background: rgba(211,47,47,.15); color: #d32f2f; }
.cs-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 800px) { .cs-modes { grid-template-columns: 1fr 1fr; } }
.cs-mode-btn { background: transparent; color: inherit; border: 1px solid var(--border, rgba(128,128,128,.35)); text-align: left; padding: 10px 12px; border-radius: 8px; font-weight: 700; }
.cs-mode-btn small { display: block; font-weight: 400; font-size: 11.5px; opacity: .75; margin-top: 2px; line-height: 1.35; }
.cs-mode-btn.active { border-color: #00897b; background: rgba(0,137,123,.1); }
.cs-site[data-id] .cs-mode-btn.active[data-mode="suspended"] { border-color: #d32f2f; background: rgba(211,47,47,.1); }
.cs-site[data-id] .cs-mode-btn.active[data-mode="admin_locked"] { border-color: #c25400; background: rgba(229,115,0,.1); }
.cs-site[data-id] .cs-mode-btn.active[data-mode="notice"] { border-color: #b26a00; background: rgba(245,166,35,.1); }
.cs-features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 800px) { .cs-features { grid-template-columns: 1fr; } }
.cs-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cs-panel { margin-top: 12px; }
.cs-key-row { display: flex; gap: 10px; align-items: center; }
.cs-key-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(128,128,128,.12); }
.cs-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-top: 8px; }
.cs-ok { color: #00897b; font-weight: 600; }
.cs-bad { color: #d32f2f; font-weight: 600; }