/* LHS brand layer — sits on top of Tailwind CDN tokens defined in base.html.
   Keep selectors minimal; prefer Tailwind utility classes in templates. */

:root {
  --lhs-navy: #1F2A44;
  --lhs-navy-2: #283353;
  --lhs-gold: #C9A14A;
  --lhs-gold-2: #B68F3D;
  --lhs-cream: #F7F2E7;
  --lhs-cream-2: #EDE6D2;
  --lhs-success: #2F7D5B;
  --lhs-alert: #B33A3A;
  --lhs-warn: #D9A23B;
  --lhs-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --lhs-sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Headings: serif. Body: sans. */
h1, h2, h3, .lhs-serif {
  font-family: var(--lhs-serif);
  letter-spacing: -0.005em;
}

/* KPI tile — large value, smaller prior, delta with arrow.
   Pair with utility classes in the template for color/state. */
.lhs-tile {
  background: #fff;
  border: 1px solid var(--lhs-cream-2);
  border-top: 3px solid var(--lhs-gold);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.06), 0 4px 12px rgba(31, 42, 68, 0.04);
}
.lhs-tile--red    { border-top-color: var(--lhs-alert); }
.lhs-tile--yellow { border-top-color: var(--lhs-warn);  }
.lhs-tile--green  { border-top-color: var(--lhs-success); }

.lhs-tile__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.lhs-tile__value {
  font-family: var(--lhs-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--lhs-navy);
  line-height: 1.1;
  margin-top: 0.25rem;
}
.lhs-tile__prior {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}
.lhs-tile__delta--up   { color: var(--lhs-success); }
.lhs-tile__delta--down { color: var(--lhs-alert); }

/* Scorecard table — navy header, cream-banded body, gold border accent. */
.lhs-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lhs-table thead th {
  background: var(--lhs-navy);
  color: var(--lhs-cream);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lhs-table thead th:first-child { border-top-left-radius: 6px; }
.lhs-table thead th:last-child  { border-top-right-radius: 6px; }
.lhs-table tbody tr:nth-child(even) { background: var(--lhs-cream); }
.lhs-table tbody tr:nth-child(odd)  { background: #fff; }
.lhs-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--lhs-cream-2);
  color: var(--lhs-navy);
}
.lhs-table tbody tr:hover { background: var(--lhs-cream-2); }

/* Stoplight badges. */
.lhs-stoplight {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.lhs-stoplight--red    { background: rgba(179, 58, 58, 0.10);  color: var(--lhs-alert);   }
.lhs-stoplight--yellow { background: rgba(217, 162, 59, 0.12); color: #8a6c1f;            }
.lhs-stoplight--green  { background: rgba(47, 125, 91, 0.10);  color: var(--lhs-success); }

/* Section header rule — navy text + thin gold underline. */
.lhs-section-header {
  font-family: var(--lhs-serif);
  color: var(--lhs-navy);
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 2px solid var(--lhs-gold);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* Stale-snapshot warning bar. */
.lhs-stale {
  background: rgba(217, 162, 59, 0.10);
  border: 1px solid rgba(217, 162, 59, 0.35);
  border-left-width: 4px;
  border-left-color: var(--lhs-warn);
  border-radius: 4px;
  padding: 0.65rem 1rem;
  color: #6b4d10;
  font-size: 0.875rem;
}

/* Refresh button — gold accent for the live re-query action. */
.lhs-btn-refresh {
  background: var(--lhs-gold);
  color: var(--lhs-navy);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--lhs-gold-2);
  font-size: 0.875rem;
  transition: background 120ms ease;
}
.lhs-btn-refresh:hover:not(:disabled) { background: var(--lhs-gold-2); }
.lhs-btn-refresh:disabled { opacity: 0.55; cursor: not-allowed; }

/* Subtle hover/focus on existing link tables, mobile-friendly tap targets. */
@media (max-width: 768px) {
  .lhs-table tbody td { padding: 0.6rem 0.7rem; }
  .lhs-tile__value { font-size: 1.6rem; }
  input, select, textarea, button { font-size: 16px; /* iOS no-zoom */ }
}

/* Print: drop navy bars / shadows so PDF export stays clean. */
@media print {
  .lhs-tile { box-shadow: none; border-top: 2px solid #000; }
  .lhs-table thead th { background: #000; color: #fff; }
  aside, nav, .no-print { display: none !important; }
}