/* The ranch theme. Component styles Tailwind's CDN build can't reach (no
   build step here), plus the handful of textures — rope, leather, parchment —
   that make the palette in base.html's tailwind.config read as a place and
   not just a color swap. Everything is plain CSS on our own origin; nothing
   here loosens CSP. */

:root {
  --sand-50: #faf9f6;
  --sand-100: #f4f1ea;
  --sand-200: #e7e1d3;
  --sand-300: #d5ccb8;
  --sand-500: #94866a;
  --sand-700: #5f5644;
  --sand-900: #403a31;
  --saddle-100: #f0e6d8;
  --saddle-300: #ccab7f;
  --saddle-500: #a4713d;
  --saddle-700: #6e4626;
  --saddle-900: #4c311f;
  --saddle-950: #2a1a0f;
  --rust-600: #c04a1c;
  --paper: #fffdf9;
  --font-display: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", Georgia, serif;
}

body {
  font-feature-settings: "tnum" 1;
  background-color: var(--sand-100);
}

.font-display {
  font-family: var(--font-display);
}

h1 {
  font-family: var(--font-display);
  color: var(--saddle-900);
}

:focus-visible {
  outline: 2px solid var(--saddle-500);
  outline-offset: 2px;
}

/* ---- Feel: transitions, focus, press states ----------------------------- */

/* One consistent focus treatment for every text control, wherever the
   template put its border classes. */
main input:not([type="checkbox"]):not([type="hidden"]),
main select,
main textarea {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

main input:not([type="checkbox"]):not([type="hidden"]):focus,
main select:focus,
main textarea:focus {
  outline: none;
  border-color: var(--saddle-500);
  box-shadow: 0 0 0 3px rgb(164 113 61 / 0.15);
}

button,
a {
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease,
    opacity 120ms ease, transform 80ms ease;
}

/* A held click should feel held. Scoped to real buttons, not link-buttons. */
main button:active:not(:disabled) {
  transform: translateY(1px);
}

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

/* Checkboxes in the brand color instead of browser blue. */
input[type="checkbox"] {
  accent-color: var(--saddle-700);
  width: 1rem;
  height: 1rem;
}

/* ---- Boosted-navigation progress bar ------------------------------------ */

/* base.html renders #page-loading once per page; the sidebar nav points its
   hx-indicator here, so the bar runs exactly while a boosted request is in
   flight and vanishes when the new body settles. */
#page-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, var(--rust-600), var(--saddle-500));
  transform-origin: left;
  transform: scaleX(0);
}

#page-loading.htmx-request {
  opacity: 1;
  animation: page-loading-sweep 1s ease-in-out infinite;
}

@keyframes page-loading-sweep {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(0.7); }
  100% { transform: scaleX(1); opacity: 0.4; }
}

/* A short length of rope: two-tone twist rendered as a striped bar. Used
   under the sidebar brand and on the login card — a signature, not wallpaper. */
.rope {
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    60deg,
    var(--saddle-300) 0 5px,
    var(--saddle-500) 5px 10px
  );
  opacity: 0.65;
}

/* ---- Surfaces ---------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgb(42 26 15 / 0.05);
}

.stat-tile {
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-top: 3px solid var(--saddle-500);
  border-radius: 0.625rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgb(42 26 15 / 0.05);
}

.stat-tile .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sand-500);
}

.stat-tile .value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0.125rem;
  color: var(--saddle-900);
}

.stat-tile .sub {
  font-size: 0.75rem;
  color: var(--sand-500);
  margin-top: 0.25rem;
}

.section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sand-700);
  border-bottom: 1px dashed var(--sand-300);
  padding-bottom: 0.375rem;
}

/* ---- Warehouse status: one continuous operational journey ------------- */

.warehouse-flow-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.625rem;
  border: 1px solid var(--sand-200);
  border-radius: 0.625rem;
  background: rgb(255 253 249 / 0.8);
}

.warehouse-flow-nav a {
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  color: var(--sand-700);
  font-size: 0.8125rem;
  font-weight: 600;
}

.warehouse-flow-nav a:hover {
  color: var(--saddle-900);
  background: var(--sand-100);
}

.warehouse-flow-anchor {
  scroll-margin-top: 5rem;
}

.warehouse-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.warehouse-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.warehouse-flow-step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  position: relative;
  scroll-margin-top: 1rem;
}

.warehouse-flow-rail {
  display: flex;
  justify-content: center;
  position: relative;
}

.warehouse-flow-rail::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: -0.25rem;
  width: 2px;
  background: linear-gradient(var(--saddle-300), var(--sand-300));
}

.warehouse-flow-step:last-child .warehouse-flow-rail::after {
  display: none;
}

.warehouse-flow-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 1rem;
  border: 2px solid var(--saddle-500);
  border-radius: 999px;
  background: var(--paper);
  color: var(--saddle-900);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
}

.warehouse-flow-card {
  margin-bottom: 1rem;
  padding: 1.25rem;
  overflow: hidden;
}

.warehouse-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sand-100);
}

.warehouse-flow-title {
  margin-top: 0.125rem;
  color: var(--saddle-900);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.warehouse-health-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--sand-50);
  color: var(--sand-600);
  font-size: 0.75rem;
}

.warehouse-flow-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1rem;
  padding-top: 1rem;
}

.warehouse-flow-metrics > div + div {
  padding-left: 1rem;
  border-left: 1px solid var(--sand-100);
}

.warehouse-metric-label {
  margin-bottom: 0.25rem;
  color: var(--sand-500);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-metric-value {
  color: var(--saddle-900);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
}

.warehouse-metric-value-small {
  font-size: 1.25rem;
}

.warehouse-enrichment-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--sand-200);
  border-radius: 0.5rem;
  background: var(--sand-50);
}

.warehouse-enrichment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.warehouse-enrichment-item {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--sand-200);
  border-radius: 0.375rem;
  background: var(--paper);
}

@media (max-width: 1023px) {
  .warehouse-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .warehouse-summary-grid,
  .warehouse-flow-metrics,
  .warehouse-enrichment-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-flow-step {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .warehouse-flow-card {
    padding: 1rem;
  }

  .warehouse-flow-metrics > div + div {
    padding-top: 0.75rem;
    padding-left: 0;
    border-top: 1px solid var(--sand-100);
    border-left: 0;
  }

  .warehouse-flow-header {
    display: block;
  }

  .warehouse-health-label {
    margin-top: 0.75rem;
  }
}

/* ---- Tables ------------------------------------------------------------ */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

table.data-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sand-700);
  background: var(--sand-50);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--sand-200);
  white-space: nowrap;
}

table.data-table td {
  padding: 0.5625rem 1rem;
  border-bottom: 1px solid var(--sand-100);
  vertical-align: middle;
}

table.data-table tbody tr:hover {
  background-color: var(--sand-50);
}

/* A card that scrolls vertically inside itself (long provenance feeds), with
   the table header pinned while it does. Sticky needs the card to be the
   vertical scroll container, which is why this is opt-in per card. */
.scroll-card {
  max-height: 70vh;
  overflow: auto;
}

.scroll-card table.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Dense variant for provenance-heavy pages (warehouse deep dive): same
   typography, tighter rhythm, so 40 rows read as a ledger not a wall. */
table.data-table-dense th {
  padding: 0.4375rem 0.75rem;
}

table.data-table-dense td {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

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

.app-sidebar {
  /* Saddle leather: a whisper of grain via layered gradients, no image. */
  background-image:
    linear-gradient(rgb(255 253 249 / 0.02), rgb(0 0 0 / 0.12)),
    radial-gradient(120% 60% at 0% 0%, rgb(204 171 127 / 0.08), transparent 60%);
  scrollbar-width: thin;
  scrollbar-color: var(--saddle-700) transparent;
}

/* Mobile slide-over: app.js toggles `sidebar-open` on <body>. */
body.sidebar-open #sidebar {
  display: flex;
}

body.sidebar-open #sidebar-scrim {
  display: block;
}

/* ---- Modals & HTMX ----------------------------------------------------- */

dialog.modal {
  border: 1px solid var(--sand-200);
  border-radius: 0.625rem;
  padding: 0;
  box-shadow: 0 20px 25px -5px rgb(42 26 15 / 0.25);
  max-width: 32rem;
  width: 90vw;
  background: var(--paper);
}

dialog.modal::backdrop {
  background: rgb(42 26 15 / 0.45);
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* ---- The login backdrop ------------------------------------------------ */

.desert-sky {
  /* Dusk over the flat: sand up to a leather horizon. Pure gradient, no image. */
  background:
    radial-gradient(90% 55% at 50% 108%, rgb(164 113 61 / 0.28), transparent 70%),
    linear-gradient(var(--sand-50), var(--sand-100) 55%, var(--saddle-100));
}

@media (prefers-color-scheme: dark) {
  body { background-color: #1c130c; }
}