:root {
  color-scheme: light;
  --bg: #f4f0fb;
  --surface: #fdfbff;
  --surface-text: #241a3a;
  --ink: #241a3a;
  --muted: #6f6688;
  --line: #ddd4ef;
  --primary: #6a3fd1;
  --primary-dark: #4c2b9e;
  --accent: #22a06b;
  --alert: #f4b63f;
  --danger: #c7473f;
  --info: #2e6ea6;
  --shadow: 0 18px 46px rgba(36, 26, 58, 0.12);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --surface-soft: #ede6fa;
  --secondary-bg: #ece5f7;
  --secondary-text: #241a3a;
  --mode-switch-bg: #f2ecfb;
  --mode-switch-text: #241a3a;
  --line-soft: rgba(36, 26, 58, 0.08);
  /* Categorical chart series — fixed hue order, validated colorblind-safe
     (adjacent ΔE ≥ 8 CVD / ≥ 15 normal vision) against this surface. Never
     reassign a slot's meaning per-chart; fold a 9th category into "Other".
     Deliberately NOT part of the violet re-theme — these hues encode chart
     identity and must stay mutually distinct; re-validated against the new
     surface colors (see validate_palette.js run), not just left unchecked. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --series-other: #98a3a0;
  --chart-hover: rgba(106, 63, 209, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #150f24;
  --surface: #1e1633;
  --surface-text: #150f24;
  --ink: #efe8fb;
  --muted: #b3a3d6;
  --line: rgba(230, 216, 255, 0.08);
  --primary: #b79cf7;
  --primary-dark: #9575e0;
  --accent: #3fc088;
  --alert: #f0b24f;
  --danger: #f06b6b;
  --info: #7aa9d3;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
  --surface-soft: #241a3d;
  --secondary-bg: #f0f0f0;
  --secondary-text: #150f24;
  --mode-switch-bg: rgba(255, 255, 255, 0.08);
  --mode-switch-text: #150f24;
  --line-soft: rgba(255, 255, 255, 0.06);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #5b6d67;
  --chart-hover: rgba(183, 156, 247, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 18% 10%, rgba(34, 160, 107, 0.14), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(106, 63, 209, 0.12), transparent 20%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  transition: background 0.35s ease, color 0.35s ease;
}

::selection {
  background: rgba(106, 63, 209, 0.35);
  color: #fff;
}

::-moz-selection {
  background: rgba(106, 63, 209, 0.35);
  color: #fff;
}

html[data-theme="dark"] ::selection {
  background: rgba(255, 255, 255, 0.18);
  color: var(--surface-text);
}

html[data-theme="dark"] ::-moz-selection {
  background: rgba(255, 255, 255, 0.18);
  color: var(--surface-text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.05;
}

h2 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

p {
  color: var(--muted);
}

.app-frame {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line-soft);
  background: var(--surface);
}

.brand,
.brand-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-preview {
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
}

.brand-preview strong {
  color: var(--ink);
}

html[data-theme="dark"] .brand-preview strong {
  color: #f8f4fd;
}

.brand {
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

.brand strong {
  display: block;
  font-size: 1.2rem;
}

.brand small {
  color: var(--muted);
}

.nav-tabs {
  display: grid;
  gap: 8px;
}

.nav-tabs button,
.mode-switch button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  text-align: left;
}

.nav-tabs button {
  padding: 0 12px;
}

.nav-tabs button.active,
.mode-switch button.active {
  background: rgba(106, 63, 209, 0.12);
  color: var(--primary);
}

.logout-button {
  margin-top: auto;
}

.nav-backdrop {
  display: none;
}

.menu-toggle {
  display: none;
}

.main-shell {
  min-width: 0;
}

.app-content,
.auth-screen {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: 26px 0 42px;
}

/* Ensure the HTML `hidden` attribute actually hides elements even when
   components define display styles (prevents auth screen staying visible)
*/
[hidden] { display: none !important; }

/* When the sidebar is hidden, collapse the left column so main content centers */
.app-frame.no-sidebar {
  grid-template-columns: 1fr;
}

.auth-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.auth-card {
  width: min(460px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-logo {
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  border-radius: 16px;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 18px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mode-switch-bg);
}

.mode-switch button {
  text-align: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mode-switch button.active {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

html[data-theme="dark"] .mode-switch button {
  background: rgba(255, 255, 255, 0.06);
  color: var(--surface-text);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .mode-switch button.active {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

.topbar,
.panel-header,
.actions {
  display: flex;
  gap: 14px;
}

.topbar,
.panel-header {
  align-items: center;
  justify-content: space-between;
}

.topbar {
  margin-bottom: 18px;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.icon-button,
.primary,
.secondary {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.top-actions .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icon-button {
  width: 44px;
  background: var(--ink);
  color: #fff;
}

.offline-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  min-height: 38px;
  border-radius: 999px;
  background: #fff4d9;
  color: #b87911;
  font-size: 0.82rem;
  font-weight: 800;
}

.offline-badge[hidden] {
  display: none;
}

.icon-button:hover,
.primary:hover,
.secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.theme-button {
  width: auto;
  min-width: 44px;
  padding: 0 12px;
}

.primary {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--primary) 82%, #ffffff) 0%,
    var(--primary) 55%,
    color-mix(in srgb, var(--primary) 88%, #000000) 100%);
  box-shadow:
    0 4px 10px -3px color-mix(in srgb, var(--primary) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 0 18px;
}

.primary:hover {
  background: var(--primary-dark);
}

.secondary {
  background: var(--secondary-bg);
  color: var(--secondary-text);
  padding: 0 16px;
}

html[data-theme="dark"] .icon-button {
  background: rgba(255, 255, 255, 0.12);
  color: var(--surface-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .mode-switch {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .mode-switch button {
  color: #fff;
  background: transparent;
}

html[data-theme="dark"] .mode-switch button.active {
  background: var(--primary);
  color: #fff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .row-button,
html[data-theme="dark"] .open-button,
html[data-theme="dark"] .mini-item,
html[data-theme="dark"] .report-item,
html[data-theme="dark"] .detail-grid div,
html[data-theme="dark"] .alert-panel,
html[data-theme="dark"] .brand-preview {
  color: var(--surface-text);
}

html[data-theme="dark"] .secondary {
  background: var(--secondary-bg);
}

html[data-theme="dark"] .alert-panel {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .brand-preview {
  background: var(--surface-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--surface-text);
}

html[data-theme="dark"] .palette span {
  background: var(--surface-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--surface-text);
}

.palette span {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.brand-guide {
  display: grid;
  gap: 14px;
}

.brand-guide h2 {
  margin-top: 0;
}

.brand-guide p {
  color: var(--muted);
}

.palette span::before {
  content: "";
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--swatch);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .palette span::before {
  border-color: rgba(255, 255, 255, 0.08);
}

.danger {
  color: var(--danger);
}

.full {
  width: 100%;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric,
.panel,
.alert-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
}

/* Each summary tile carries its own hue on the ICON only — the label and the
   value stay in text ink, so colour never becomes the sole carrier of
   meaning. Pending/Approved deliberately take the reserved warning/good
   status colours (they really are statuses); the rest are categorical
   identity. Both sets were run through the dataviz validator against this
   app's own surfaces — light and dark each pass the lightness band, chroma
   floor, CVD separation, normal-vision floor and 3:1 contrast checks. */
.metric-spend {
  --metric-color: #0FA3A3;
}

.metric-gst {
  --metric-color: #5B3FD1;
}

.metric-raw {
  --metric-color: #E8437B;
}

.metric-pending {
  --metric-color: #A85C00;
}

.metric-approved {
  --metric-color: #3ACB74;
}

.metric-suppliers {
  --metric-color: #1573E6;
}

html[data-theme="dark"] .metric-spend {
  --metric-color: #17A0A0;
}

html[data-theme="dark"] .metric-gst {
  --metric-color: #7C63E8;
}

html[data-theme="dark"] .metric-raw {
  --metric-color: #E05186;
}

html[data-theme="dark"] .metric-pending {
  --metric-color: #C97A0F;
}

html[data-theme="dark"] .metric-approved {
  --metric-color: #23A85C;
}

html[data-theme="dark"] .metric-suppliers {
  --metric-color: #3D8FE8;
}

/* iOS-home-screen treatment: a gradient-filled squircle with a glossy top
   edge, a soft inner floor shadow, and a coloured drop shadow lifting it off
   the card — the depth cue phone app icons use. Every layer is derived from
   the one --*-color token via color-mix, so a hue change needs one edit. */
.metric-icon,
.procedure-step.complete span,
.procedure-step.active span {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--tile-color) 72%, #ffffff) 0%,
    var(--tile-color) 52%,
    color-mix(in srgb, var(--tile-color) 80%, #000000) 100%
  );
  color: #fff;
  box-shadow:
    0 5px 12px -3px color-mix(in srgb, var(--tile-color) 55%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--tile-color) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.14);
}

.metric-icon {
  --tile-color: var(--metric-color, var(--primary));
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 11px;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
}

.metric span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.metric strong {
  font-size: 1.4rem;
}

.dashboard-grid,
.workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ai-procedure {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.procedure-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

/* Each workflow step carries its own hue so the row reads as five distinct
   stages at a glance. The colours are the ones already in this app's
   palette (brand violet, link blue, accent green, warning amber, alert red)
   rather than new arbitrary ones, so the row still looks native to the rest
   of the UI. Deliberately NOT the --series-N chart colours: those identify
   chart series, and reusing them here would imply a relationship between a
   step and a spend category that doesn't exist. */
.step-icon-capture {
  --step-color: #3ACB74;
}

.step-icon-classify {
  --step-color: #5B3FD1;
}

.step-icon-check {
  --step-color: #E8437B;
}

.step-icon-analyze {
  --step-color: #1573E6;
}

.step-icon-alert {
  --step-color: #E5484D;
}

html[data-theme="dark"] .step-icon-capture {
  --step-color: #23A85C;
}

html[data-theme="dark"] .step-icon-classify {
  --step-color: #7C63E8;
}

html[data-theme="dark"] .step-icon-check {
  --step-color: #E05186;
}

html[data-theme="dark"] .step-icon-analyze {
  --step-color: #3D8FE8;
}

html[data-theme="dark"] .step-icon-alert {
  --step-color: #E05C5C;
}

.procedure-step span {
  --tile-color: var(--step-color, var(--primary));
  display: grid;
  width: 32px;
  height: 32px;
  grid-row: span 2;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--step-color, var(--primary)) 14%, transparent);
  color: var(--step-color, var(--ink));
  font-weight: 800;
}

.procedure-step span svg {
  width: 16px;
  height: 16px;
}

.procedure-step strong {
  color: var(--ink);
}

.procedure-step small {
  font-size: 0.78rem;
}

.procedure-step.complete {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
}

.procedure-step.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Progress state fills the badge with that step's OWN colour rather than a
   single shared brand colour, so "which stage am I at" and "which stage is
   this" stay readable at the same time. */
.procedure-step.complete span,
.procedure-step.active span {
  background: var(--step-color, var(--primary));
  color: #fff;
}


.insight-panel {
  min-height: 360px;
}

.trend-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-area {
  position: relative;
  min-height: 280px;
  margin-top: 18px;
}

.chart-area svg {
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
}

.chart-label,
.chart-value {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 0.78rem;
}

.chart-value {
  fill: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.chart-grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-axis-tick {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 0.72rem;
}

.chart-axis-line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  pointer-events: none;
}

/* A soft lift on chart marks. Deliberately shadow + gradient only — never
   extrusion or perspective, which would change how long a bar or how wide an
   arc LOOKS and so misreport the value. Geometry stays exact. */
.chart-mark {
  cursor: pointer;
  outline: none;
  transition: opacity 0.12s ease, filter 0.12s ease;
  filter: drop-shadow(0 2px 3px rgba(36, 26, 58, 0.22));
}

.chart-line-mark {
  filter: drop-shadow(0 2px 4px rgba(36, 26, 58, 0.28));
}

html[data-theme="dark"] .chart-mark {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

html[data-theme="dark"] .chart-line-mark {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

.chart-mark:hover,
.chart-mark:focus-visible {
  opacity: 0.82;
}

.chart-mark:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chart-hit-target {
  fill: transparent;
  cursor: pointer;
}

.chart-dot {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 2px;
  transition: r 0.12s ease;
}

.chart-dot.chart-dot-hover {
  r: 6;
}

/* Shared floating tooltip, reused across every chart on the dashboard */
.chart-tooltip {
  position: fixed;
  z-index: 60;
  min-width: 140px;
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.chart-tooltip[hidden] {
  display: none;
}

.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(21, 15, 36, 0.72);
}

.camera-modal[hidden] {
  display: none;
}

.camera-modal-inner {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  padding: 20px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.camera-modal video {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}

.camera-modal-actions {
  display: flex;
  gap: 10px;
}

.camera-modal-actions button {
  flex: 1;
}

.import-modal-inner {
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}

.import-help {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.import-mapping-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.import-mapping-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.import-mapping-table th,
.import-mapping-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.import-mapping-table tr:last-child td {
  border-bottom: none;
}

.import-mapping-table select {
  width: 100%;
}

.import-mapping-table .import-preview-cell {
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-summary {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.import-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffe4e1;
  color: #b3261e;
  font-size: 0.85rem;
}

.camera-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffe4e1;
  color: var(--danger);
  font-size: 0.9rem;
}

.chart-tooltip-title {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.tooltip-row + .tooltip-row {
  margin-top: 4px;
}

.tooltip-key {
  flex: none;
  width: 10px;
  height: 3px;
  border-radius: 2px;
}

.tooltip-label {
  flex: 1;
  color: var(--muted);
}

.tooltip-value {
  color: var(--ink);
  font-weight: 800;
}

/* Donut chart (Category Spend) */
.donut-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.donut-svg-wrap {
  flex: none;
  width: 300px;
}

.donut-svg-wrap svg {
  width: 100%;
  height: auto;
}

.donut-center-value {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 800;
}

.donut-center-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.donut-slice-label {
  fill: #fff;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  pointer-events: none;
}

.donut-callout-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  pointer-events: none;
}

.donut-callout-label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 800;
  pointer-events: none;
}

/* Small per-item KPI cards (worth + share), one per category/supplier */
.mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.mini-stat-grid:empty {
  display: none;
}

.mini-stat-card {
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--stat-color, var(--primary));
  border-radius: 8px;
  background: var(--surface-soft);
  min-width: 0;
}

.mini-stat-label {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-stat-value {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mini-stat-percent {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.panel {
  padding: 20px;
}

.scanner-panel,
.expense-form,
.expense-ledger {
  min-width: 0;
}

.drop-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 18px 0;
  overflow: hidden;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
}

.drop-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-zone img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #fff;
}

.ocr-progress {
  margin: -4px 0 16px;
}

.progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e0f0;
  box-shadow: inset 0 1px 2px rgba(36, 26, 58, 0.16);
}

.progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--info) 72%, #ffffff) 0%,
    var(--info) 60%,
    color-mix(in srgb, var(--info) 88%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: width 0.2s ease;
}

.ocr-progress p {
  margin: 8px 0 0;
  font-size: 0.86rem;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.field-warning {
  display: block;
  margin-top: -2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b87911;
}

html[data-theme="dark"] .field-warning {
  color: #f4c063;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-left: 42px;
}

.password-toggle {
  position: absolute;
  left: 4px;
  top: 50%;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  place-items: center;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: var(--primary);
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 800;
}

.check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d6cce8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .mini-item,
html[data-theme="dark"] .report-item,
html[data-theme="dark"] .detail-grid div,
html[data-theme="dark"] .alert-panel,
html[data-theme="dark"] .brand-preview,
html[data-theme="dark"] .sms-link,
html[data-theme="dark"] .row-button,
html[data-theme="dark"] .open-button {
  color: var(--surface-text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106, 63, 209, 0.13);
}

textarea {
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.actions {
  flex-wrap: wrap;
}

.alert-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-color: #f1c5aa;
  background: #fff7ef;
}

.alert-panel[hidden],
.app-content[hidden] {
  display: none;
}

.alert-panel h2 {
  color: var(--danger);
}

.alert-panel p {
  margin-bottom: 0;
}

.sms-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  text-decoration: none;
}

.alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.owner-note {
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff7ef;
  border: 1px solid #f1c5aa;
  color: var(--danger);
  font-size: 0.9rem;
}

html[data-theme="dark"] .owner-note {
  background: rgba(244, 182, 63, 0.12);
  border-color: rgba(244, 182, 63, 0.4);
}

/* Settings screen: a light pastel wash on its two panels instead of plain
   white, scoped to #settingsScreen only — every other screen is untouched. */
#settingsScreen .settings-form {
  background: linear-gradient(135deg, #f2ecfd 0%, #e9e0fb 100%);
  border-color: #ddcdf5;
}

#settingsScreen .brand-guide {
  background: linear-gradient(135deg, #faf0fb 0%, #f3e2f5 100%);
  border-color: #ecd0ec;
}

html[data-theme="dark"] #settingsScreen .settings-form {
  background: linear-gradient(135deg, #23193d 0%, #1c1434 100%);
  border-color: rgba(183, 156, 247, 0.22);
}

html[data-theme="dark"] #settingsScreen .brand-guide {
  background: linear-gradient(135deg, #2c1a37 0%, #241a3a 100%);
  border-color: rgba(230, 217, 245, 0.16);
}

.duplicate-filter-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid #f1c5aa;
  border-radius: 10px;
  background: #fff7ef;
}

.duplicate-filter-notice p {
  margin: 0;
  color: var(--danger);
  font-weight: 700;
  font-size: 0.92rem;
}

html[data-theme="dark"] .duplicate-filter-notice {
  background: rgba(244, 182, 63, 0.12);
  border-color: rgba(244, 182, 63, 0.4);
}

.table-wrap {
  position: relative;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(36, 26, 58, 0.1);
}

.status.Pending {
  background: #fff4d9;
  color: #b87911;
}

.status.Approved {
  background: #dcf3e8;
  color: var(--accent);
}

.status.Rejected {
  background: #ffe4e1;
  color: var(--danger);
}

.status-select {
  border: none;
  width: auto;
  padding: 0 28px 0 10px;
  font-weight: 900;
  cursor: pointer;
  /* colors come from the shared .status/.Pending/.Approved/.Rejected rules
     above, which win on specificity over the generic select background/color */
}

.status-select:focus {
  box-shadow: 0 0 0 2px rgba(106, 63, 209, 0.35);
}

.hint-text {
  margin: -6px 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.recommendation-list {
  display: grid;
  gap: 10px;
}

.recommendation-item {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.recommendation-info {
  background: #e8f1fb;
  border-color: #cfe0f5;
  color: #2e6ea6;
}

.recommendation-warning {
  background: #fff4d9;
  border-color: #f1dfa6;
  color: #b87911;
}

.recommendation-success {
  background: #dcf3e8;
  border-color: #bfe6d3;
  color: var(--accent);
}

.supplier-lookup {
  margin-bottom: 14px;
}

.supplier-lookup-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.88rem;
}

.supplier-lookup-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #cfe0f5;
  background: #e8f1fb;
}

.supplier-lookup-card img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

.supplier-lookup-card strong {
  display: block;
  color: var(--ink);
}

.supplier-lookup-card p {
  margin: 4px 0 8px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.supplier-lookup-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}

.supplier-lookup-meta a {
  color: #2e6ea6;
  font-weight: 700;
}

.supplier-lookup-disclaimer {
  color: var(--muted);
}

.confidence-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: help;
}

.confidence-badge.confidence-high {
  background: #dcf3e8;
  color: #1f8a5c;
}

.confidence-badge.confidence-medium {
  background: #fff4d9;
  color: #b87911;
}

.confidence-badge.confidence-low {
  background: #fde3df;
  color: #c23b2c;
}

html[data-theme="dark"] .confidence-badge.confidence-high {
  background: rgba(63, 192, 136, 0.18);
  color: #6fe3ac;
}

html[data-theme="dark"] .confidence-badge.confidence-medium {
  background: rgba(244, 182, 63, 0.18);
  color: #f4c063;
}

html[data-theme="dark"] .confidence-badge.confidence-low {
  background: rgba(226, 88, 68, 0.2);
  color: #f39485;
}

.supplier-lookup-empty {
  background: var(--surface-soft);
  border-color: var(--line);
}

.supplier-lookup-candidates {
  display: grid;
  gap: 10px;
}

.supplier-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.supplier-candidate strong {
  display: block;
  color: var(--ink);
}

.supplier-candidate p {
  margin: 4px 0 8px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
}

.supplier-candidate-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.supplier-candidate-actions a {
  color: #2e6ea6;
  font-weight: 700;
  font-size: 0.85rem;
}

.supplier-candidate-actions button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.85rem;
}

html[data-theme="dark"] .supplier-candidate strong {
  color: #f8f4fd;
}

html[data-theme="dark"] .supplier-lookup-card {
  background: rgba(46, 110, 166, 0.16);
  border-color: rgba(46, 110, 166, 0.4);
}

html[data-theme="dark"] .supplier-lookup-card strong {
  color: #f8f4fd;
}

html[data-theme="dark"] .supplier-lookup-meta a {
  color: #7fb4e0;
}

.upi-pay-section {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.upi-qr-container {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 6px;
  text-align: center;
}

.upi-qr-container > div {
  padding: 10px;
  border-radius: 8px;
  background: #fff;
}

.upi-pay-link {
  font-weight: 800;
  color: var(--primary);
}

.row-button,
.open-button {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
}

.row-button {
  color: var(--danger);
}

.open-button {
  color: var(--primary);
}

.empty-state {
  margin: 24px 0 4px;
  text-align: center;
}

.bar-list,
.mini-list,
.report-list {
  display: grid;
  gap: 12px;
}

.bar-item {
  display: grid;
  gap: 7px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e0f0;
  box-shadow: inset 0 1px 2px rgba(36, 26, 58, 0.16);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 72%, #ffffff) 0%,
    var(--accent) 60%,
    color-mix(in srgb, var(--accent) 88%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
 }

.mini-item,
.report-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbf9fe;
}

.mini-item strong,
.report-item strong {
  display: block;
}

.mini-item span,
.report-item span {
  color: var(--muted);
  font-size: 0.9rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.detail-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbf9fe;
}

.detail-grid dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.detail-grid dd {
  margin: 6px 0 0;
  font-weight: 900;
}

.detail-vendor-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.detail-vendor-select {
  max-width: 360px;
  margin-bottom: 6px;
  font-size: 1.15rem;
  font-weight: 900;
}

.supplier-period-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.supplier-period-grid h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.brand-guide .brand-preview {
  margin: 14px 0;
}

.brand-guide img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
}

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.palette span {
  display: grid;
  gap: 8px;
  padding: 16px 12px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-weight: 800;
}

html[data-theme="dark"] .palette span {
  color: #f8f4fd;
}

html[data-theme="dark"] .brand-preview ::selection,
html[data-theme="dark"] .palette span ::selection {
  background: rgba(255, 255, 255, 0.25);
  color: #150f24;
}

html[data-theme="dark"] .brand-preview ::-moz-selection,
html[data-theme="dark"] .palette span ::-moz-selection {
  background: rgba(255, 255, 255, 0.25);
  color: #150f24;
}

.palette span::before {
  content: "";
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--swatch);
}

html[data-theme="dark"] .chart-value,
html[data-theme="dark"] .chart-label {
  fill: #f2eef8;
}

@media (max-width: 980px) {
  .app-frame {
    grid-template-columns: 1fr;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: min(78vw, 300px);
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-right: 1px solid var(--line);
    border-top: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 6, 20, 0.5);
  }

  .nav-tabs button {
    min-height: 48px;
    font-size: 0.95rem;
  }
}

@media (max-width: 820px) {
  .dashboard-grid,
  .workspace {
    grid-template-columns: 1fr;
  }

  .ai-procedure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .detail-grid,
  .supplier-period-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .app-content,
  .auth-screen {
    width: min(100% - 20px, 1240px);
    padding-top: 18px;
  }

  .topbar,
  .panel-header,
  .alert-panel,
  .mini-item,
  .report-item {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions,
  .panel-header select,
  .sms-link {
    width: 100%;
  }

  .top-actions {
    justify-content: flex-end;
  }

  .top-actions .secondary,
  .top-actions .icon-button {
    width: 44px;
    padding: 0;
    gap: 0;
  }

  .top-actions .secondary span {
    display: none;
  }

  .ai-procedure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
  }

  .procedure-step {
    padding: 8px;
    gap: 2px 6px;
  }

  .procedure-step span {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.72rem;
  }

  .procedure-step span svg {
    width: 13px;
    height: 13px;
  }

  .metric {
    padding: 13px;
  }

  .metric-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 9px;
    border-radius: 9px;
  }

  .metric-icon svg {
    width: 15px;
    height: 15px;
  }

  .procedure-step strong {
    font-size: 0.78rem;
  }

  .procedure-step small {
    font-size: 0.66rem;
  }

  /* Settings: flatten the two gradient panels into one grouped list, like a typical app's settings screen. */
  #settingsScreen .dashboard-grid {
    gap: 22px;
  }

  #settingsScreen .settings-form,
  #settingsScreen .brand-guide,
  html[data-theme="dark"] #settingsScreen .settings-form,
  html[data-theme="dark"] #settingsScreen .brand-guide {
    background: var(--surface);
    border-color: var(--line);
    padding: 4px 16px;
    box-shadow: none;
  }

  #settingsScreen h2 {
    font-size: 0.98rem;
    padding: 14px 0 2px;
  }

  #settingsScreen .owner-note {
    margin: 6px 0 0;
  }

  #settingsScreen .field,
  #settingsScreen .check-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  #settingsScreen .field:last-of-type,
  #settingsScreen .check-field:last-of-type {
    border-bottom: 0;
  }

  #settingsScreen .check-field {
    flex-direction: row-reverse;
  }

  #settingsScreen .field input {
    width: auto;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  #settingsScreen #saveSettingsButton {
    width: 100%;
    margin-top: 16px;
  }

  #settingsScreen .brand-preview {
    background: transparent;
    border: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  #settingsScreen .palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  #settingsScreen .brand-guide p {
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  #settingsScreen .brand-guide p:last-child {
    border-bottom: 0;
  }
}