/* BTLLP interface system: calm, legible, and consistent across every report. */
:root {
  color-scheme: dark;
  --brand-ink: #f7f8fb;
  --brand-navy: #53617f;
  --brand-indigo: #53617f;
  --brand-sky: #74829f;
  --brand-accent: #d1a15d;
  --brand-accent-muted: #e0b97f;
  --brand-panel: #1d2533;
  --brand-frost: rgba(255, 255, 255, 0.06);
  --backdrop-start: #141a24;
  --backdrop-end: #181f2b;
  --panel-border: #354155;
  --panel-hover: #273244;
  --nav-text: #aeb9ca;
  --nav-text-strong: #f7f8fb;
  --nav-pill-bg: rgba(209, 161, 93, 0.14);
  --nav-pill-text: #e2b675;
  --page-gradient: #171e29;
  --surface-raised: #222c3b;
  --surface-soft: #273244;
  --focus-ring: rgba(209, 161, 93, 0.28);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
  --brand-ink: #1d2738;
  --brand-navy: #3f4d6b;
  --brand-indigo: #53617f;
  --brand-sky: #667796;
  --brand-accent: #9a6929;
  --brand-accent-muted: #b27d38;
  --brand-panel: #ffffff;
  --brand-frost: rgba(63, 77, 107, 0.055);
  --backdrop-start: #f5f6f8;
  --backdrop-end: #f5f6f8;
  --panel-border: #dce1e8;
  --panel-hover: #f3f5f8;
  --nav-text: #647086;
  --nav-text-strong: #1d2738;
  --nav-pill-bg: #edf0f5;
  --nav-pill-text: #53617f;
  --page-gradient: #f5f6f8;
  --surface-raised: #ffffff;
  --surface-soft: #f7f8fa;
  --focus-ring: rgba(154, 105, 41, 0.2);
  --shadow-card: 0 1px 2px rgba(18, 28, 45, 0.05), 0 8px 24px rgba(18, 28, 45, 0.055);
}

html { background: var(--backdrop-start); }
body { font-size: 15px; line-height: 1.5; background: var(--page-gradient); }
.main-backdrop { background: var(--page-gradient); }
.app-header { color: var(--nav-text-strong); }
.app-header .app-subtext { color: var(--nav-text); }
.brand-mark { background: var(--brand-panel); border-color: var(--panel-border); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.app-header .btn-primary, .app-header .btn-ghost { letter-spacing: .08em; }
.app-mobile-menu { color: var(--nav-text-strong); background: var(--brand-panel); border-color: var(--panel-border); }
.app-mobile-menu:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.app-flash { color: var(--nav-text-strong); background: var(--brand-panel); border-color: var(--panel-border); box-shadow: var(--shadow-card); }

.theme-panel,
.theme-card,
:root[data-theme="light"] .theme-panel,
:root[data-theme="light"] .theme-card {
  background: var(--brand-panel);
  color: var(--nav-text-strong);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}
.panel-shell { border-radius: 1rem; padding: 1.25rem; }
.card-shell { border-radius: 1rem; padding: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

.theme-card h1, .theme-card h2, .theme-card h3,
.theme-panel h1, .theme-panel h2, .theme-panel h3,
:root[data-theme="light"] .theme-card [class*="text-white"],
:root[data-theme="light"] .theme-panel [class*="text-white"],
:root[data-theme="light"] .stat-pill [class*="text-white"] {
  color: var(--nav-text-strong) !important;
}
.section-eyebrow {
  color: var(--brand-accent);
  font-size: .68rem;
  letter-spacing: .15em;
  font-weight: 800;
}
:root[data-theme="light"] .section-eyebrow { color: var(--brand-accent); }
.section-subtext, .form-label, .nav-text { color: var(--nav-text); }
h1 { letter-spacing: -.025em; }
h2, h3 { letter-spacing: -.015em; }

.nav-panel,
:root[data-theme="light"] .nav-panel {
  background: var(--brand-panel);
  color: var(--nav-text-strong);
  border-color: var(--panel-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}
.nav-panel nav > div,
.nav-group,
:root[data-theme="light"] .nav-panel nav > div {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-panel .accordion-body { margin-top: .45rem; }
.nav-link,
:root:not([data-theme="light"]) .nav-link,
:root[data-theme="light"] .nav-link {
  color: var(--nav-text);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-link span { color: inherit; font-size: .82rem; letter-spacing: 0; text-transform: none; }
.nav-link:hover,
:root:not([data-theme="light"]) .nav-link:hover,
:root[data-theme="light"] .nav-link:hover {
  color: var(--nav-text-strong);
  background: var(--panel-hover);
  border: 0;
  box-shadow: none;
}
.nav-link.is-active { color: var(--nav-text-strong); background: var(--nav-pill-bg); }
.nav-link.is-active::before { content: ""; width: 3px; height: 1.25rem; border-radius: 1rem; background: var(--brand-accent); margin-left: -.5rem; }
.nav-pill,
:root[data-theme="light"] .nav-pill {
  min-width: auto;
  width: auto;
  height: auto;
  padding: 0;
  color: var(--nav-pill-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1.15rem;
  line-height: 1;
}

.table-shell { border-color: var(--panel-border); border-radius: .75rem; box-shadow: none; }
.theme-table,
:root[data-theme="light"] .theme-table {
  background: var(--brand-panel);
  color: var(--nav-text-strong);
  box-shadow: none;
}
.theme-table thead,
:root[data-theme="light"] .theme-table thead { background: var(--surface-soft); }
.theme-table tbody,
:root[data-theme="light"] .theme-table tbody { background: var(--brand-panel); }
.theme-table th { color: var(--nav-text); font-size: .68rem; letter-spacing: .08em; }
.theme-table td { border-color: var(--panel-border); }
.theme-table tr:hover,
:root[data-theme="light"] .theme-table tr:hover { background: var(--panel-hover); }

.stat-pill,
:root[data-theme="light"] .stat-pill {
  border: 1px solid var(--panel-border);
  border-radius: .75rem;
  background: var(--surface-soft);
  color: var(--nav-text-strong);
  box-shadow: none;
}
.badge {
  padding: .28rem .62rem;
  letter-spacing: .055em;
  background: var(--nav-pill-bg);
  color: var(--nav-pill-text);
  border-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
}

.form-field,
:root[data-theme="light"] .form-field,
.workflow-control,
:root[data-theme="light"] .workflow-control {
  min-height: 2.65rem;
  border-radius: .625rem;
  border-color: var(--panel-border);
  background: var(--surface-raised) !important;
  color: var(--nav-text-strong) !important;
  -webkit-text-fill-color: var(--nav-text-strong) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.form-field-sm { min-height: 2.35rem; padding: .5rem .7rem; border-radius: .55rem; }
.form-field-xs { min-height: 2rem; border-radius: .5rem; }
.form-field::placeholder { color: var(--nav-text); opacity: .78; }
.form-field:focus, .workflow-control:focus {
  outline: 0;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-field[type="date"], .form-field[type="number"],
:root:not([data-theme="light"]) .form-field[type="date"],
:root:not([data-theme="light"]) .form-field[type="number"] {
  color: var(--nav-text-strong) !important;
  -webkit-text-fill-color: var(--nav-text-strong) !important;
}

.btn-primary, .btn-ghost {
  min-height: 2.45rem;
  border-radius: .625rem;
  padding: .58rem .9rem;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary,
:root[data-theme="light"] .btn-primary {
  color: #fff;
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.btn-primary:hover,
:root[data-theme="light"] .btn-primary:hover {
  transform: none;
  color: #fff;
  background: color-mix(in srgb, var(--brand-navy) 82%, #000 18%);
  border-color: color-mix(in srgb, var(--brand-navy) 82%, #000 18%);
  box-shadow: none;
}
.btn-ghost,
:root[data-theme="light"] .btn-ghost {
  color: var(--nav-text-strong);
  background: var(--surface-raised);
  border-color: var(--panel-border);
  box-shadow: none;
}
.btn-ghost:hover,
:root[data-theme="light"] .btn-ghost:hover {
  transform: none;
  color: var(--nav-text-strong);
  background: var(--panel-hover);
  border-color: color-mix(in srgb, var(--brand-navy) 48%, var(--panel-border));
}
.btn-primary-sm, .btn-ghost-sm { min-height: 2.15rem; padding: .42rem .7rem; }
.btn-danger, .btn-danger-outline { border-radius: .625rem; box-shadow: none; }

.modal-overlay { background: rgba(10, 15, 24, .62); backdrop-filter: blur(4px); }
.modal-panel,
:root[data-theme="light"] .modal-panel {
  border-radius: 1rem;
  background: var(--brand-panel);
  color: var(--nav-text-strong);
  border-color: var(--panel-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.modal-panel h3,
:root[data-theme="light"] .modal-panel h3 { color: var(--nav-text-strong); }
.modal-panel .modal-subtext,
:root[data-theme="light"] .modal-panel .modal-subtext { color: var(--nav-text); }
.modal-table-shell,
:root[data-theme="light"] .modal-table-shell { background: var(--surface-soft); border-color: var(--panel-border); box-shadow: none; }

/* Normalize legacy translucent utility cards that appear on older pages. */
.theme-card .bg-white\/5, .theme-panel .bg-white\/5,
.theme-card .bg-white\/10, .theme-panel .bg-white\/10,
section > .bg-white\/10 {
  background: var(--surface-soft) !important;
  border-color: var(--panel-border) !important;
}
:root[data-theme="light"] section > [class*="text-white"],
:root[data-theme="light"] section [class*="text-white"] { color: var(--nav-text-strong) !important; }
:root[data-theme="light"] section [class*="text-white/"] { color: var(--nav-text) !important; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .panel-shell, .card-shell { padding: 1rem; border-radius: .875rem; }
  .theme-table th, .theme-table td { padding-left: .75rem !important; padding-right: .75rem !important; }
  .app-header .btn-ghost, .app-header .btn-primary { padding: .48rem .65rem; font-size: .64rem; letter-spacing: .08em; }
}

@media print {
  .theme-panel, .theme-card, .stat-pill { box-shadow: none !important; }
}
