/* ==========================================================================
   Grassroots design system
   Shared by every page. Component classes are prefixed `gr-`; the bottom
   section modernises the older page markup so all pages look consistent.
   ========================================================================== */

:root {
  --gr-bg: #f5f7fb;
  --gr-surface: #ffffff;
  --gr-surface-muted: #f8fafc;
  --gr-border: #e6e9f0;
  --gr-border-strong: #d6dbe5;
  --gr-text: #0f172a;
  --gr-text-2: #334155;
  --gr-muted: #64748b;
  --gr-subtle: #94a3b8;
  --gr-primary: #1d4ed8;
  --gr-primary-hover: #1e40af;
  --gr-primary-soft: #eef3ff;
  --gr-brand-red: #ed1f2a;
  --gr-success: #059669;
  --gr-success-soft: #ecfdf5;
  --gr-danger: #dc2626;
  --gr-danger-soft: #fef2f2;
  --gr-warning: #d97706;
  --gr-radius: 16px;
  --gr-radius-sm: 10px;
  --gr-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.04);
  --gr-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12);
  --gr-focus: 0 0 0 3px rgba(29, 78, 216, 0.16);
}

html { scroll-behavior: smooth; }

body:not(.login-page) {
  background: var(--gr-bg) !important;
}

body {
  color: var(--gr-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

::selection { background: rgba(29, 78, 216, 0.16); }

.tabular, td, .gr-kpi-value, .gr-num { font-variant-numeric: tabular-nums; }

/* ---------- Page header ---------- */
.gr-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.gr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gr-primary);
  margin-bottom: 6px;
}
.gr-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gr-text);
}
.gr-subtitle { margin-top: 6px; font-size: 14px; color: var(--gr-muted); max-width: 640px; }
.gr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Cards ---------- */
.gr-card {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius);
  box-shadow: var(--gr-shadow);
  padding: 22px;
  min-width: 0;
}
.gr-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.gr-card-title { font-size: 16px; font-weight: 700; color: var(--gr-text); }
.gr-card-sub { font-size: 13px; color: var(--gr-muted); margin-top: 2px; }

/* ---------- KPI tiles ---------- */
.gr-kpi { display: flex; flex-direction: column; gap: 6px; }
.gr-kpi-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gr-muted);
}
.gr-kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gr-kpi-icon .material-symbols-outlined { font-size: 18px; }
.gr-kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gr-kpi-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gr-muted); }

.gr-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.gr-delta.up { color: var(--gr-success); background: var(--gr-success-soft); }
.gr-delta.down { color: var(--gr-danger); background: var(--gr-danger-soft); }
.gr-delta.flat { color: var(--gr-muted); background: #f1f5f9; }
.gr-delta .material-symbols-outlined { font-size: 14px; }

/* ---------- Buttons ---------- */
.gr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--gr-radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
  white-space: nowrap;
}
.gr-btn:active { transform: translateY(1px); }
.gr-btn:focus-visible { outline: none; box-shadow: var(--gr-focus); }
.gr-btn .material-symbols-outlined { font-size: 20px; }
.gr-btn-primary { background: var(--gr-primary); color: #fff; box-shadow: 0 1px 2px rgba(29, 78, 216, 0.3); }
.gr-btn-primary:hover { background: var(--gr-primary-hover); }
.gr-btn-secondary { background: #fff; color: var(--gr-text-2); border-color: var(--gr-border-strong); }
.gr-btn-secondary:hover { background: var(--gr-surface-muted); border-color: #c4cbd8; }
.gr-btn-ghost { background: transparent; color: var(--gr-primary); padding: 0 10px; }
.gr-btn-ghost:hover { background: var(--gr-primary-soft); }
.gr-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Form controls ---------- */
.gr-input, .gr-select {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--gr-radius-sm);
  border: 1px solid var(--gr-border-strong);
  background: #fff;
  color: var(--gr-text);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gr-select { padding-right: 34px; }
.gr-input:focus, .gr-select:focus { outline: none; border-color: var(--gr-primary); box-shadow: var(--gr-focus); }
.gr-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--gr-muted); margin-bottom: 6px; }

.gr-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  background: #eef1f6;
  gap: 2px;
}
.gr-segmented button {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gr-muted);
}
.gr-segmented button[aria-pressed='true'] { background: #fff; color: var(--gr-text); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }

/* ---------- Chips & badges ---------- */
.gr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--gr-primary-soft);
  color: var(--gr-primary);
}
.gr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Tables ---------- */
.gr-table-wrap { overflow-x: auto; margin: 0 -22px; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gr-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gr-muted);
  background: var(--gr-surface-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--gr-border);
  border-bottom: 1px solid var(--gr-border);
  white-space: nowrap;
}
.gr-table th:first-child, .gr-table td:first-child { padding-left: 22px; }
.gr-table th:last-child, .gr-table td:last-child { padding-right: 22px; }
.gr-table th.num, .gr-table td.num { text-align: right; }
.gr-table th[data-sort] { cursor: pointer; user-select: none; }
.gr-table th[data-sort]:hover { color: var(--gr-text); }
.gr-table td { padding: 12px 14px; border-bottom: 1px solid #f0f2f6; color: var(--gr-text-2); }
.gr-table tbody tr:last-child td { border-bottom: none; }
.gr-table tbody tr:hover td { background: #fafbfd; }

/* ---------- Progress bars ---------- */
.gr-bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.gr-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gr-primary); }

/* ---------- Empty state ---------- */
.gr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 36px 12px;
  color: var(--gr-subtle);
  font-size: 13px;
}
.gr-empty .material-symbols-outlined { font-size: 34px; }

/* ---------- Chart helpers ---------- */
.gr-chart-tooltip {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: var(--gr-shadow-lg);
  opacity: 0;
  transition: opacity 0.12s;
}
.gr-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 600; color: var(--gr-muted); }
.gr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gr-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   Modernise existing page markup (applies to every page)
   ========================================================================== */

/* Top bars: same height, frosted white, hairline border */
body > header.fixed,
app-topbar > header {
  height: 64px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gr-border) !important;
  box-shadow: none !important;
}

/* Cards: hairline border + soft shadow instead of flat blocks */
main .bg-surface-container-lowest,
main section.bg-white,
main div.bg-white.rounded-xl,
main div.bg-white.rounded-2xl {
  border: 1px solid var(--gr-border);
  box-shadow: var(--gr-shadow) !important;
}
main .bg-surface-container-lowest.rounded-xl,
main .bg-surface-container-lowest.rounded-lg { border-radius: var(--gr-radius) !important; }

/* Tables */
main table thead th {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--gr-muted) !important;
  background: var(--gr-surface-muted);
  border-bottom: 1px solid var(--gr-border);
}
main table tbody tr { border-bottom: 1px solid #f0f2f6; }
main table tbody tr:hover { background: #fafbfd !important; }
main table tbody td { font-variant-numeric: tabular-nums; }

/* Form fields: white with a clear border and focus ring */
main input:not([type='checkbox']):not([type='radio']):not([type='range']):not(.gr-input),
main select:not(.gr-select),
main textarea {
  background-color: #fff !important;
  border: 1px solid var(--gr-border-strong) !important;
  border-radius: var(--gr-radius-sm) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
main input:not([type='checkbox']):not([type='radio']):focus,
main select:focus,
main textarea:focus {
  outline: none !important;
  border-color: var(--gr-primary) !important;
  box-shadow: var(--gr-focus) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
main input::placeholder, main textarea::placeholder { color: #a3adbd !important; }

/* Header search boxes stay soft grey */
body > header input[type='text'],
app-topbar input[type='text'] {
  background: #f1f4f9 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}
body > header input[type='text']:focus, app-topbar input[type='text']:focus { background: #fff !important; border-color: var(--gr-primary) !important; box-shadow: var(--gr-focus) !important; }

/* Primary gradient buttons -> solid brand blue */
main .bg-gradient-to-br.from-primary,
main .cta-gradient { background-image: none !important; background-color: var(--gr-primary) !important; }

/* Modals opened by app.js */
.fixed.inset-0.z-\[10000\] > div { border: 1px solid var(--gr-border); box-shadow: var(--gr-shadow-lg) !important; }

/* Sidebar polish */
app-sidebar aside { border-right: 1px solid var(--gr-border); box-shadow: none !important; background: #fbfcfe !important; }
app-sidebar .sidebar-link { border-radius: 10px !important; }
app-sidebar .sidebar-link.bg-white { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 0 0 1px var(--gr-border) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Keep IDs, amounts and dates on one line; let wide tables scroll inside their card */
main table th, main table td { white-space: nowrap; }
main div:has(> table) { overflow-x: auto; }
/* Room for the dropdown arrow on every select */
main select { padding-right: 2.25rem !important; }

/* Add Lead: numbered steps */
.step-num {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--gr-primary); background: var(--gr-primary-soft);
}
section[data-complete='true'] .step-num { background: var(--gr-success); color: #fff; }
.step-done {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--gr-success); background: var(--gr-success-soft);
}

/* ---------- Collapsible sidebar ---------- */
aside.gr-sidebar { transition: width 0.2s ease, padding 0.2s ease; overflow-x: hidden; }
main, app-topbar > header, body > header.fixed, #site-footer { transition: margin-left 0.2s ease, left 0.2s ease; }
html.sb-collapsed aside.gr-sidebar { width: 72px !important; padding-left: 12px !important; padding-right: 12px !important; }
html.sb-collapsed .sidebar-label,
html.sb-collapsed .sidebar-brand-full { display: none !important; }
html.sb-collapsed .sidebar-brand-mini { display: block !important; }
html.sb-collapsed .sidebar-head { flex-direction: column; align-items: center; padding-left: 0; padding-right: 0; gap: 14px; }
html.sb-collapsed .sidebar-link { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
html.sb-collapsed .sidebar-link:hover { transform: none !important; }
@media (min-width: 768px) {
  html.sb-collapsed main.md\:ml-64,
  html.sb-collapsed main.ml-64 { margin-left: 72px !important; }
  html.sb-collapsed app-topbar > header,
  html.sb-collapsed body > header.fixed { left: 72px !important; }
  html.sb-collapsed #site-footer { left: 72px !important; }
}

/* ---------- Smooth page changes ----------
   Cross-document view transitions (Chrome/Edge 126+): the content cross-fades while the
   sidebar, top bar and footer stay perfectly still. Other browsers just navigate normally. */
@view-transition { navigation: auto; }
app-sidebar aside { view-transition-name: gr-sidebar; }
app-topbar > header { view-transition-name: gr-topbar; }
#site-footer { view-transition-name: gr-footer; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
::view-transition-group(gr-sidebar),
::view-transition-group(gr-topbar),
::view-transition-group(gr-footer) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- No flashes while a page loads ---------- */
/* Template sample rows/cards from the original design: never shown; app.js renders real data. */
[data-sample] { display: none !important; }
/* Icons: fixed 1em box so nothing shifts while the icon font loads (its text stays invisible). */
.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}