:root {
  --ink: #211c16;
  --ink-soft: #5c5548;
  --paper: #eae3d3;
  --paper-raised: #f1ecdf;
  --rule: #d8cfb8;
  --brass: #a9822f;
  --brass-dark: #8a6a22;
  --forest: #38493e;
  --clay: #9c4a3a;

  --font-display: "Fraunces", serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

[x-cloak] { display: none !important; }

a { color: inherit; }

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

/* ---------- Sidebar ---------- */

.rail {
  background: var(--ink);
  color: var(--paper);
  padding: 32px 24px;
}

.rail-mark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.rail-sub {
  color: #a39a86;
  font-size: 13px;
  margin-top: 2px;
  margin-bottom: 32px;
}

.rail-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rail-nav a {
  display: block;
  text-decoration: none;
  color: #c9c0ac;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 15px;
}

.rail-nav a:hover {
  color: var(--rail-text);
}

.rail-nav a.is-active {
  background: rgba(169, 130, 47, 0.22);
  color: var(--rail-text);
  border-left: 2px solid var(--brass);
  padding-left: 10px;
}

.rail-nav a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------- Main content ---------- */

main {
  padding: 48px clamp(24px, 5vw, 64px);
  max-width: 880px;
}

.kicker {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ink-soft);
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  margin: 0 0 24px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 16px;
}

.hero-stats {
  display: flex;
  gap: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 28px;
}

.stat-label {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 4px;
}

.notice {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--paper-raised);
  border-left: 2px solid var(--brass);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 60ch;
}

.panel {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}

.panel:last-child {
  border-bottom: none;
}

/* ---------- Settings form ---------- */

.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
}

.settings-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.settings-row input {
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  width: 160px;
}

.settings-row input:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.switch-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.switch {
  border: none;
  background: var(--rule);
  width: 44px;
  height: 24px;
  border-radius: 12px;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.switch .switch-knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.15s ease;
}

.switch.is-on {
  background: var(--forest);
}

.switch.is-on .switch-knob {
  transform: translateX(20px);
}

.switch:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.save-state {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Ledger table ---------- */

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

table.ledger th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--rule);
}

table.ledger td {
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--rule);
}

table.ledger th.num,
table.ledger td.num {
  text-align: right;
  font-family: var(--font-mono);
}

.empty-state {
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .rail {
    padding: 20px 24px;
  }

  .rail-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  main {
    padding: 32px 20px;
  }

  h1 {
    font-size: 30px;
  }

  .hero-stats {
    gap: 24px;
  }
}

.rail-account {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(234, 227, 211, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.rail-account-email {
  font-size: 13px;
  color: #a39a86;
  word-break: break-all;
}

.rail-account-logout {
  font-size: 13px;
  color: var(--brass);
  text-decoration: none;
}

.rail-account-logout:hover {
  text-decoration: underline;
}

/* ---------- Status tabs (Listings dashboard) ---------- */

.status-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
}

.status-tab:hover {
  color: var(--ink);
}

.status-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

.status-tab .count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border-radius: 10px;
  padding: 1px 7px;
}

.status-tab.is-active .count {
  color: var(--brass-dark);
}

/* ---------- Status + flag badges ---------- */

.status-badge {
  display: inline-block;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink-soft);
}

.status-badge.status-pending {
  color: var(--brass-dark);
  background: rgba(169, 130, 47, 0.15);
}

.status-badge.status-approved {
  color: var(--forest);
  background: rgba(56, 73, 62, 0.12);
}

.status-badge.status-rejected {
  color: var(--clay);
  background: rgba(156, 74, 58, 0.12);
}

.flag-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--clay);
  background: rgba(156, 74, 58, 0.1);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ---------- Row action buttons ---------- */

.actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.actions-cell button {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}

.actions-cell button:hover:not(:disabled) {
  border-color: var(--brass);
}

.actions-cell button:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-approve {
  border-color: var(--forest) !important;
  color: var(--forest) !important;
}

.btn-reject {
  border-color: var(--clay) !important;
  color: var(--clay) !important;
}

.btn-publish {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: var(--paper) !important;
}

.btn-publish:disabled {
  background: var(--paper-raised) !important;
  color: var(--ink-soft) !important;
  border-color: var(--rule) !important;
}

/* ---------- Section-level nav (above platform/status tabs in the rail) ---------- */

.rail-nav-sections {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(234, 227, 211, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-nav-sections a {
  display: block;
  text-decoration: none;
  color: #8f8672;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.rail-nav-sections a:hover {
  color: var(--rail-text);
}

.rail-nav-sections a.is-active {
  color: var(--brass);
  font-weight: 500;
}

/* ---------- Supplier upload form ---------- */

.upload-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.upload-form input[type="file"] {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Recent imports strip ---------- */

.recent-imports .import-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.recent-imports .import-list strong {
  color: var(--ink);
  font-weight: 500;
}

.recent-imports .import-when {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* ---------- Audit form ---------- */

.audit-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-form input[type="url"] {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  flex: 1;
  min-width: 260px;
}

.audit-form input[type="url"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.audit-error {
  border-left-color: var(--clay);
  color: var(--clay);
}

/* ---------- Severity badges ---------- */

.severity-badge {
  display: inline-block;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  text-transform: capitalize;
}

.severity-badge.severity-high {
  color: var(--clay);
  background: rgba(156, 74, 58, 0.12);
}

.severity-badge.severity-medium {
  color: var(--brass-dark);
  background: rgba(169, 130, 47, 0.15);
}

.severity-badge.severity-low {
  color: var(--ink-soft);
  background: var(--paper-raised);
}

.severity-badge.severity-none {
  color: var(--forest);
  background: rgba(56, 73, 62, 0.12);
}

/* ---------- Audit report history ---------- */

.audit-report {
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}

.audit-report summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  list-style: none;
}

.audit-report summary::-webkit-details-marker {
  display: none;
}

.audit-url {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}

.audit-when {
  font-size: 12px;
  color: var(--ink-soft);
}

.audit-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.issue-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.issue-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- Date filter form ---------- */

.audit-date-filter {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.audit-date-filter label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.audit-date-filter input[type="date"] {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
}

.audit-date-filter input[type="date"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.clear-filter {
  font-size: 13px;
  color: var(--clay);
  text-decoration: none;
  padding-bottom: 9px;
}

.clear-filter:hover {
  text-decoration: underline;
}

/* ---------- Audit history header + print button ---------- */

.audit-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.audit-history-head h2 {
  margin: 0;
}

.btn-print {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 3px;
  border: 1px solid var(--brass);
  background: var(--paper-raised);
  color: var(--brass-dark);
  cursor: pointer;
}

.btn-print:hover {
  background: var(--brass);
  color: var(--paper);
}

/* ---------- Grouped by URL ---------- */

.audit-url-group {
  margin-bottom: 32px;
}

.audit-url-group:last-child {
  margin-bottom: 0;
}

.audit-url-heading {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- Print styles ---------- */

@media print {
  .no-print,
  .rail {
    display: none !important;
  }

  .shell {
    display: block;
  }

  main {
    padding: 0;
    max-width: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .audit-report {
    break-inside: avoid;
  }

  details {
    display: block !important;
  }

  details summary {
    list-style: none;
  }
}

/* ---------- Tenant cards ---------- */

.tenant-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: var(--paper-raised);
}

.tenant-card:last-child {
  margin-bottom: 0;
}

.tenant-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tenant-card-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

.tenant-details {
  margin: 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}

.tenant-details dt {
  color: var(--ink-soft);
}

.tenant-details dd {
  margin: 0;
  color: var(--ink);
}

/* ---------- Tenant create form ---------- */

.tenant-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.tenant-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.tenant-form input,
.tenant-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
}

.tenant-form textarea {
  resize: vertical;
  font-family: var(--font-body);
}

.tenant-form input:focus-visible,
.tenant-form textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.tenant-form button {
  align-self: flex-start;
}

/* ---------- Trend note ---------- */

.trend-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Trend cards ---------- */

.trend-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: var(--paper-raised);
}

.trend-card:last-child {
  margin-bottom: 0;
}

.trend-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.trend-card-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

.trend-latest-value {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--brass-dark);
}

.trend-scale {
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 2px;
}

.sparkline {
  width: 100%;
  height: 60px;
  display: block;
  margin-bottom: 8px;
}

.trend-checked-at {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Related searches button + panel ---------- */

.btn-related {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  margin-top: 4px;
}

.btn-related:hover {
  border-color: var(--brass);
  color: var(--ink);
}

.related-queries {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.related-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

.related-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.related-column h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--ink);
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.related-list li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule);
}

.related-query {
  color: var(--ink);
}

.related-value {
  font-family: var(--font-mono);
  color: var(--brass-dark);
}

.empty-state-small {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .related-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- Trend card action row ---------- */

.trend-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.clear-trend-form {
  margin: 0;
}

.btn-clear {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid var(--clay);
  background: var(--paper-raised);
  color: var(--clay);
  cursor: pointer;
}

.btn-clear:hover {
  background: var(--clay);
  color: var(--paper);
}

/* ---------- Trend chart labels ---------- */

.trend-chart-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

.sparkline-history {
  margin-top: 4px;
  margin-bottom: 16px;
}

/* ---------- Competitor URL link ---------- */

.competitor-url {
  margin: 4px 0 12px;
  font-size: 13px;
}

.competitor-url a {
  color: var(--brass-dark);
  text-decoration: none;
}

.competitor-url a:hover {
  text-decoration: underline;
}

/* ---------- Price comparison ---------- */

.price-comparison {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--paper);
  border-radius: 4px;
}

.price-comparison-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-comparison-label {
  font-size: 12px;
  color: var(--ink-soft);
}

.price-comparison-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink);
}

.price-comparison-value.price-higher {
  color: var(--clay);
}

.price-comparison-value.price-lower {
  color: var(--forest);
}

/* ---------- Log price form ---------- */

.log-price-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.log-price-form input[type="number"] {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  width: 100px;
}

.log-price-form .currency-input {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  width: 60px;
}

.tenant-form select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
}

/* ---------- Backlink contact + notes ---------- */

.backlink-contact {
  margin: 4px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.backlink-notes {
  margin: 4px 0 12px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.backlink-live-link {
  margin: 8px 0;
  font-size: 14px;
}

.backlink-live-link a {
  color: var(--forest);
  text-decoration: none;
}

.backlink-live-link a:hover {
  text-decoration: underline;
}

/* ---------- Email preview ---------- */

.email-preview {
  margin: 12px 0;
  padding: 16px;
  background: var(--paper);
  border-left: 2px solid var(--brass);
  border-radius: 4px;
}

.email-preview-label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.email-subject {
  margin: 0 0 8px;
  font-size: 14px;
}

.email-body {
  margin: 0;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ---------- Link acquired form ---------- */

.link-acquired-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 260px;
}

.link-acquired-form input[type="text"] {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  flex: 1;
}

/* ---------- Blog body preview ---------- */

.blog-body-preview {
  margin: 12px 0;
}

.blog-body-preview summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--brass-dark);
}

.blog-body-content {
  margin-top: 12px;
  padding: 16px;
  background: var(--paper);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 70ch;
}

.blog-body-content p {
  margin: 0 0 1em;
}

.blog-body-content h2,
.blog-body-content h3 {
  font-family: var(--font-display);
  margin: 1em 0 0.5em;
}

/* ---------- Publish blog form ---------- */

.publish-blog-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.publish-blog-form select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
}

/* ---------- Clickable supplier card links ---------- */

.supplier-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.supplier-card-link:hover {
  border-color: var(--brass);
}

/* ---------- Supplier name link (inside card heading, not the whole card) ---------- */

.supplier-name-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.supplier-name-link:hover {
  color: var(--brass-dark);
  border-bottom-color: var(--brass);
}

/* ---------- Explicit hover states for action buttons ---------- */

.trend-card-actions button:hover {
  cursor: pointer;
  filter: brightness(1.1);
}

.btn-clear:hover {
  background: var(--clay) !important;
  color: var(--paper) !important;
}


/* ---------- Data table (variation grouping) ---------- */

main:has(.data-table) {
  max-width: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: var(--paper-raised);
}

.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--paper-raised);
}

.data-table td:nth-child(2) {
  white-space: normal;
  min-width: 180px;
  font-weight: 600;
}

.data-table td:last-child {
  white-space: nowrap;
}

.data-table td:last-child button,
.data-table td:last-child form {
  white-space: nowrap;
  display: inline-block;
}


main:has(.data-table) {
  min-width: 0;
}


#products-bulk-form {
  max-width: none;
}


/* ---------- Data table: compact action buttons ---------- */

.data-table thead th,
.data-table tbody td {
  padding: 8px 10px;
}

.data-table td:last-child button {
  padding: 4px 8px;
  font-size: 12px;
  margin-right: 4px;
}


/* ---------- Row actions dropdown ---------- */

.row-actions {
  position: relative;
  display: inline-block;
}

.row-actions summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  white-space: nowrap;
}

.row-actions summary::-webkit-details-marker {
  display: none;
}

.row-actions summary:hover {
  border-color: var(--brass);
}

.row-actions[open] summary {
  border-color: var(--brass);
}

.row-actions-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 20;
  min-width: 120px;
}

.row-actions-menu button {
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 6px 10px;
}

.data-table td:nth-child(2) {
  min-width: 120px;
}


#listing-action-btn {
  align-self: flex-end !important;
}


#listing-action-btn {
  padding: 8px 14px !important;
  font-size: 15px !important;
}


.data-table thead th {
  font-weight: 700 !important;
  color: var(--ink) !important;
}


.kicker,
.trend-chart-label,
.email-preview-label {
  font-weight: 700 !important;
  color: var(--ink) !important;
}


/* ---------- Sticky Action column (always visible, no horizontal scroll needed) ---------- */

.data-table {
  position: relative;
}

.data-table thead th:last-child {
  position: sticky;
  right: 0;
  background: var(--paper-raised);
  z-index: 2;
  box-shadow: -4px 0 6px -4px rgba(0,0,0,0.15);
}

.data-table tbody td:last-child {
  position: sticky;
  right: 0;
  background: var(--paper);
  z-index: 1;
  box-shadow: -4px 0 6px -4px rgba(0,0,0,0.15);
}

.data-table tbody tr:hover td:last-child {
  background: var(--paper-raised);
}


/* ---------- Compact data table (Amazon economics) ----------
   An opt-in modifier. Tables without .compact are completely unaffected,
   which matters because the Suppliers page relies on the nth-child(2)
   rule above and has 630 rows depending on it. */

.data-table.compact thead th,
.data-table.compact tbody td {
  padding: 5px 8px;
  font-size: 13px;
}

.data-table.compact thead th {
  font-size: 11px;
  padding-top: 8px;
  padding-bottom: 6px;
}

/* Column 2 is the product name on Suppliers and needs 180px and wrapping.
   Here it is Family, a secondary detail - the inherited rule was what
   pushed the right-hand columns off the page. */
.data-table.compact td:nth-child(2) {
  white-space: nowrap;
  min-width: 0;
  font-weight: 400;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

/* Figures line up down the column, so they can be compared without being
   read one at a time. */
.data-table.compact td.num,
.data-table.compact th.num {
  text-align: right;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-variant-numeric: tabular-nums;
  width: 62px;
}

.data-table.compact th.num {
  font-family: inherit;
}

.data-table.compact .sku-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.data-table.compact .sku-asin {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: var(--ink-soft);
}

.data-table.compact .sortable {
  cursor: pointer;
}

.data-table.compact .sortable:hover {
  color: var(--brass);
}

.data-table.compact .chip {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}


/* Margin target, editable in the row. Narrow enough that adding a column
   does not push the table wider - the value is never more than two
   digits. */
.data-table.compact .margin-input {
  width: 46px;
  padding: 2px 4px;
  font-size: 12px;
  text-align: right;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

.data-table.compact .margin-input:focus {
  border-color: var(--brass);
  outline: none;
}


/* ================= Dark mode =================
   The light scheme is warm - cream paper, brown ink, brass and clay. The
   dark one keeps that warmth rather than going cold or true black; pure
   white on pure black is tiring to read, which defeats the point.

   Note the rail. In light mode it is DARK against a light page. Flipping
   every variable together would make it dark against a dark page and it
   would disappear, so it is given its own lighter value. */

[data-theme="dark"] {
  --ink: #e8e1d2;
  --ink-soft: #a89f8c;
  --paper: #1c1813;
  --paper-raised: #262019;
  --rule: #3b332a;
  --brass: #d4a851;
  --brass-dark: #b88f3c;
  --forest: #7fa38c;
  --clay: #d4715c;
  --rail-bg: #100d09;
  --rail-text: #e8e1d2;
  --rail-muted: #8a8172;
}

:root {
  --rail-bg: #211c16;
  --rail-text: #eae3d3;
  --rail-muted: #a39a86;
}

.rail { background: var(--rail-bg); color: var(--rail-text); }
.rail-sub { color: var(--rail-muted); }

/* Semantic status colours. Previously literal hex in the Amazon
   template, which meant pale pastels glaring on a dark page. */
:root {
  --stat-good-bg: #D9EFC6;
  --stat-good-line: #3B6D11;
  --stat-good-text: #27500A;
  --stat-info-bg: #DCE7F5;
  --stat-info-line: #185FA5;
  --stat-info-text: #0C447C;
  --stat-bad-bg: #F8D7D7;
  --stat-bad-line: #A32D2D;
  --stat-bad-text: #791F1F;
  --stat-warn-bg: #FAE3C0;
  --stat-warn-text: #633806;
}

[data-theme="dark"] {
  --stat-good-bg: #1e3312;
  --stat-good-line: #5f9c2e;
  --stat-good-text: #a8d67c;
  --stat-info-bg: #14283f;
  --stat-info-line: #3f83c9;
  --stat-info-text: #8fc0ee;
  --stat-bad-bg: #3d1717;
  --stat-bad-line: #c25252;
  --stat-bad-text: #eda0a0;
  --stat-warn-bg: #3c2a0e;
  --stat-warn-text: #e0b268;
}

.stat-card { border-radius: 8px; padding: 12px 14px; border-left: 4px solid; }
.stat-good { background: var(--stat-good-bg); border-left-color: var(--stat-good-line); color: var(--stat-good-text); }
.stat-info { background: var(--stat-info-bg); border-left-color: var(--stat-info-line); color: var(--stat-info-text); }
.stat-bad  { background: var(--stat-bad-bg);  border-left-color: var(--stat-bad-line);  color: var(--stat-bad-text); }
.stat-card .stat-label { font-size: 12px; font-weight: 500; }
.stat-card .stat-value { font-size: 26px; font-weight: 600; }
.stat-card .stat-note  { font-size: 11px; }

.chip-good { background: var(--stat-good-bg); color: var(--stat-good-text); }
.chip-warn { background: var(--stat-warn-bg); color: var(--stat-warn-text); }
.chip-bad  { background: var(--stat-bad-bg);  color: var(--stat-bad-text); }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--paper-raised);
  color: var(--ink);
  border-color: var(--rule);
}

[data-theme="dark"] .data-table tbody tr:hover { background: var(--paper-raised); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
}

.theme-switch {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--rule);
  position: relative;
  transition: background .15s;
}

.theme-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper-raised);
  transition: transform .15s;
}

[data-theme="dark"] .theme-switch { background: var(--brass); }
[data-theme="dark"] .theme-switch::after { transform: translateX(20px); }


/* The rail is dark in BOTH modes, so anything inside it that needs to
   contrast with it should use --rail-text rather than --paper. This
   catches any rule that still reaches for the page background by
   habit. */
[data-theme="dark"] .rail a,
[data-theme="dark"] .rail a:hover,
[data-theme="dark"] .rail-nav a:hover,
[data-theme="dark"] .rail-nav a.is-active,
[data-theme="dark"] .rail-nav-sections a:hover {
  color: var(--rail-text);
}

[data-theme="dark"] .rail-nav a {
  color: #c9c0ac;
}


/* Family badge with no TACOS to show - neutral in both modes. */
.chip-none {
  background: var(--paper-raised);
  color: var(--ink-soft);
}

/* The view toggle uses btn-publish for the selected side, which is a
   solid brass fill. In dark mode its label needs to contrast with that
   fill rather than with the page. */
[data-theme="dark"] .btn-publish {
  color: #1c1813;
}


/* ================= Dark mode: buttons =================
   Almost every button in this app is an outline - transparent fill, a
   coloured border, a coloured label. That relies on the page behind it
   being light. On a dark page the button has no surface of its own, so
   only a thin border and some text remain, both in tones chosen for
   cream.

   Everything below gives them a surface and lifts the accents. Semantic
   meaning is preserved: remove is red, approve is green, the primary
   action is brass. */

[data-theme="dark"] .btn-approve,
[data-theme="dark"] .btn-reject,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-related,
[data-theme="dark"] .btn-clear,
[data-theme="dark"] .actions-cell button,
[data-theme="dark"] .data-table td button,
[data-theme="dark"] .row-actions summary {
  background: #302820 !important;
  border: 1px solid #4a4036 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .btn-reject,
[data-theme="dark"] .btn-reject:not(:disabled) {
  border-color: #8f4436 !important;
  color: #e8927e !important;
}

[data-theme="dark"] .btn-approve,
[data-theme="dark"] .btn-approve:not(:disabled) {
  border-color: #4a7a5e !important;
  color: #8fc9a6 !important;
}

/* The primary action keeps a solid fill, so its label contrasts with the
   fill rather than with the page. */
[data-theme="dark"] .btn-publish {
  background: var(--brass) !important;
  border: 1px solid var(--brass) !important;
  color: #1c1813 !important;
}

[data-theme="dark"] .btn-publish:hover:not(:disabled) {
  background: var(--brass-dark) !important;
}

[data-theme="dark"] .btn-approve:hover:not(:disabled),
[data-theme="dark"] .btn-reject:hover:not(:disabled),
[data-theme="dark"] .btn-secondary:hover:not(:disabled),
[data-theme="dark"] .btn-related:hover:not(:disabled),
[data-theme="dark"] .actions-cell button:hover:not(:disabled),
[data-theme="dark"] .data-table td button:hover:not(:disabled) {
  background: #3c3228 !important;
}

/* A disabled button must look disabled rather than merely dim - on a
   dark ground "dim" is how everything looks. */
[data-theme="dark"] button:disabled,
[data-theme="dark"] .btn-approve:disabled,
[data-theme="dark"] .btn-reject:disabled,
[data-theme="dark"] .btn-publish:disabled {
  background: #241e18 !important;
  border-color: #332b23 !important;
  color: #6b6255 !important;
  opacity: 1;
}

/* Form controls and the status tabs sit in the same trap. */
[data-theme="dark"] .status-tab {
  color: var(--ink-soft);
}

[data-theme="dark"] .status-tab:hover,
[data-theme="dark"] .status-tab.is-active {
  color: var(--ink);
}

[data-theme="dark"] .status-badge {
  background: var(--paper-raised);
  color: var(--ink);
}

[data-theme="dark"] .margin-input {
  background: #302820;
  border-color: #4a4036;
  color: var(--ink);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b6255;
}

[data-theme="dark"] a {
  color: inherit;
}

[data-theme="dark"] .panel a:not(.btn-publish):not(.btn-secondary) {
  color: var(--brass);
}


/* The Ad Console's platform list, nested inside its parent item. The
   indent and the rule down the left make the relationship visible -
   without them a nested list reads as a continuation of the main nav
   rather than as children of the item above. */
.rail-subnav {
  margin: 4px 0 4px 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}

.rail-subnav a {
  font-size: 14px;
}


/* ---------- Collapsible nav group (Ad Console) ----------
   Styled explicitly rather than inheriting from .rail-nav a, because a
   summary element is not an anchor and would not pick those rules up.
   The values match the existing nav items so it sits flush with them. */

.rail-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 3px;
  color: #c9c0ac;
  font-size: 15px;
}

.rail-group summary::-webkit-details-marker { display: none; }
.rail-group summary::marker { content: ""; }

.rail-group summary:hover {
  color: var(--rail-text);
}

.rail-group summary.is-active {
  background: rgba(169, 130, 47, 0.22);
  color: var(--rail-text);
}

/* A chevron that turns, so the control announces what it does. */
.rail-group summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  margin-left: 8px;
  opacity: .7;
}

.rail-group[open] summary::after {
  transform: rotate(-135deg);
}


/* ---------- Top bar ----------
   Sits outside #content, which HTMX replaces on every navigation. A bar
   inside that element would be destroyed on the first click. */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.topbar-left {
  font-size: 12px;
  color: var(--ink-soft);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper-raised);
}

.topbar-btn:hover {
  border-color: var(--brass);
  color: var(--ink);
}

.topbar-account {
  position: relative;
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--brass);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="dark"] .topbar-avatar {
  color: #1c1813;
}

.topbar-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  min-width: 230px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  z-index: 40;
  overflow: hidden;
}

.topbar-menu.is-open { display: block; }

.topbar-menu-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
}

.topbar-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.topbar-menu a:hover { background: var(--paper); }
.topbar-menu .topbar-signout { color: var(--clay); }

/* ---------- App menu (replaces the sidebar) ----------
   The sidebar is gone from every page, so pages use the full width. A Menu
   button at the top left opens a drawer over the page; choosing a page, Esc,
   Close or clicking the dimmed page closes it. Solid colours from the old
   sidebar, in light and dark mode. */

.shell { grid-template-columns: 1fr; }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
}

.app-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}
.app-menu-btn:hover { border-color: var(--brass); }
.app-menu-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.app-menu-icon { font-size: 19px; line-height: 1; }

.app-crumb { font-size: 16px; color: var(--ink-soft); }
.app-crumb b { color: var(--ink); font-weight: 600; }

.app-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 900;
}
.app-scrim.is-open { opacity: 1; }

.app-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--rail-bg);
  color: var(--rail-text);
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
  transform: translateX(-100%);
  transition: transform 0.18s;
  z-index: 901;
  display: flex;
  flex-direction: column;
}
.app-drawer.is-open { transform: none; }
.app-drawer[hidden],
.app-scrim[hidden] { display: none; }

.app-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.app-drawer-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.app-drawer-close {
  font: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--rail-text);
  cursor: pointer;
}
.app-drawer-close:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.app-drawer-list,
.app-drawer-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.app-drawer-list a {
  display: block;
  text-decoration: none;
  color: var(--rail-text);
  font-size: 17px;
  padding: 11px 14px;
  border-radius: 6px;
}
.app-drawer-list a:hover { background: rgba(255, 255, 255, 0.08); }
.app-drawer-list a:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.app-drawer-list a.is-active {
  background: rgba(169, 130, 47, 0.28);
  border-left: 3px solid var(--brass);
  padding-left: 11px;
  font-weight: 600;
}
.app-drawer-sub a,
.app-drawer-list a.app-drawer-subitem { padding-left: 30px; font-size: 16px; }
.app-drawer-sub a.is-active,
.app-drawer-list a.app-drawer-subitem.is-active { padding-left: 27px; }
.app-drawer-group {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rail-muted);
  padding: 14px 14px 4px;
}
.app-drawer-foot {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--rail-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The supplier detail page has no top bar of its own. */
.app-topbar-standalone { padding: 8px clamp(24px, 5vw, 64px) 0; }

/* ---------- Proportional sizes ----------
   Page titles smaller, the Menu button and "you are here" line larger, so
   they read as one set. */
h1 { font-size: 28px; margin: 0 0 14px; }
.app-menu-btn { font-size: 18px; padding: 9px 18px; gap: 10px; }
.app-menu-icon { font-size: 22px; }
.app-crumb { font-size: 18px; }

/* ---------- Amber card ----------
   For figures that are moving the wrong way without being a loss, such as
   the account return rate rising. */
.stat-warn { background: var(--stat-warn-bg); border-left-color: #B7791F; color: var(--stat-warn-text); }

/* ---------- White theme and crisp screen font (step 2) ----------
   One screen font for everything - Segoe UI on Windows, the Mac or phone
   equivalent elsewhere - with evenly spaced digits so pounds line up. The
   light theme becomes clean white with near-black text; cards become white
   with a coloured bar and a coloured number; the Menu drawer is white. Dark
   mode keeps its own colours. The layout adapts to the screen width. */

:root {
  --font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

:root:not([data-theme="dark"]) {
  --ink: #0F1111;
  --ink-soft: #565959;
  --paper: #FFFFFF;
  --paper-raised: #F7F8F8;
  --rule: #E3E6E6;
  --brass: #8A6A1F;
  --brass-dark: #6E5418;
  --rail-bg: #FFFFFF;
  --rail-text: #0F1111;
  --rail-muted: #565959;
  --stat-good-bg: #FFFFFF;
  --stat-info-bg: #FFFFFF;
  --stat-bad-bg: #FFFFFF;
  --stat-warn-bg: #FFFFFF;
  --stat-good-text: #1B7F3B;
  --stat-info-text: #1F5FAD;
  --stat-bad-text: #B42318;
  --stat-warn-text: #955800;
}

/* White cards: a thin grey edge, the coloured bar on the left, the number in
   colour, the words in near-black. */
:root:not([data-theme="dark"]) .stat-card {
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
:root:not([data-theme="dark"]) .stat-card .stat-label { color: var(--ink); font-weight: 600; }
:root:not([data-theme="dark"]) .stat-card .stat-note { color: var(--ink-soft); }
:root:not([data-theme="dark"]) .stat-good .stat-value { color: var(--stat-good-text); }
:root:not([data-theme="dark"]) .stat-info .stat-value { color: var(--stat-info-text); }
:root:not([data-theme="dark"]) .stat-bad .stat-value { color: var(--stat-bad-text); }
:root:not([data-theme="dark"]) .stat-warn .stat-value { color: var(--stat-warn-text); }

/* The white Menu drawer. */
:root:not([data-theme="dark"]) .app-drawer { border-right: 1px solid var(--rule); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12); }
:root:not([data-theme="dark"]) .app-drawer-head,
:root:not([data-theme="dark"]) .app-drawer-foot { border-color: var(--rule); }
:root:not([data-theme="dark"]) .app-drawer-close { border-color: #C9CDD2; }
:root:not([data-theme="dark"]) .app-drawer-list a:hover { background: #F3F4F6; }
:root:not([data-theme="dark"]) .app-drawer-list a.is-active { background: #FBF5E6; border-left-color: var(--brass); }

/* ---------- Fits every screen ----------
   Cards: all in one row on a large monitor, rows of 4 on a laptop, 2 on a
   tablet, 1 on a phone. Wide tables scroll sideways inside their own box
   with the first column fixed. Finger-sized buttons on tablets and phones. */
@media (max-width: 1500px) {
  main div:has(> .stat-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1200px) {
  .data-table { display: block; overflow-x: auto; max-width: 100%; }
  .data-table th:first-child,
  .data-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--rule); }
}
@media (max-width: 900px) {
  main div:has(> .stat-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main { padding: 20px 14px; }
  button, select, input[type="text"], input[type="search"], input[type="date"], input[type="number"],
  .app-menu-btn, .btn-secondary, .btn-publish { min-height: 44px; }
  .app-drawer-list a { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 500px) {
  main div:has(> .stat-card) { grid-template-columns: 1fr !important; }
  h1 { font-size: 22px; }
  .topbar-left { flex-wrap: wrap; }
}

/* ---------- Bigger tabs and even filter boxes (step 3) ----------
   The Economics tabs are the page's main navigation: 16px, semi-bold, 40px
   tall, with a hover effect; the open tab stays bold on gold. Every filter
   box is the same width and height, so the filter row lines up. */
#econ-tabs > button { font-size: 16px; font-weight: 600; min-height: 40px; padding: 0 16px; }
#econ-tabs > button.btn-secondary:hover { background: #F3F4F6; }
[data-theme="dark"] #econ-tabs > button.btn-secondary:hover { background: var(--paper-raised); }

#pf-filter label, #cf-filter label, #cat-filter label { gap: 4px; font-size: 13px; }
#pf-filter select, #pf-filter input[type="search"],
#cf-filter select, #cf-filter input[type="search"],
#cf-filter input[name="min_spend"], #cf-filter input[name="min_clicks"],
#cat-filter select, #cat-filter input[type="search"], #cat-filter input[type="date"] {
  width: 200px !important; min-width: 0 !important; max-width: none !important;
  height: 36px; box-sizing: border-box; text-overflow: ellipsis;
}
#cf-filter input[name="min_acos"], #cf-filter input[name="max_acos"] { width: 80px !important; height: 36px; box-sizing: border-box; }
#pf-filter button, #cf-filter button, #cat-filter button { height: 36px; box-sizing: border-box; white-space: nowrap; }
.filter-more .more-names { color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.filter-more .more-arrow { margin-left: 4px; }
@media (max-width: 500px) {
  #pf-filter select, #pf-filter input[type="search"], #cf-filter select, #cf-filter input[type="search"],
  #cf-filter input[name="min_spend"], #cf-filter input[name="min_clicks"],
  #cat-filter select, #cat-filter input[type="search"], #cat-filter input[type="date"] { width: 100% !important; }
  .filter-more .more-names { display: none; }
}