:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --surface: #faf8f2;
  --ink: #20211f;
  --muted: #6b6b63;
  --line: #d6d1c5;
  --used: #bc6a32;
  --used-dark: #7f3f1d;
  --open: #ded9cb;
  --restricted: #8d8c85;
  --focus: #98623d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(32, 33, 31, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 34px;
}

button, input, select { font: inherit; }
button, input, select, .matrix-cell { outline-offset: 3px; }
button:focus-visible, input:focus-visible, select:focus-visible, .matrix-cell:focus-visible { outline: 2px solid var(--focus); }

.app-header {
  min-height: 150px;
  padding: 34px clamp(22px, 5vw, 72px) 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.eyebrow, .section-number {
  margin: 0 0 8px;
  color: var(--used-dark);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -0.04em; }
h1 { font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: 0.92; }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; }

.freshness { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.84rem; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--used); box-shadow: 0 0 0 5px rgba(188, 106, 50, 0.12); }

main { padding: 0 clamp(22px, 5vw, 72px) 72px; }

.control-band {
  min-height: 86px;
  display: flex;
  align-items: end;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.control-band label { display: grid; gap: 5px; min-width: 150px; }
.control-band label span { font-size: 0.68rem; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.control-band select, .control-band input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--surface);
}
.control-band button {
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.control-band button:hover { transform: translateY(-1px); background: #373934; }

.metric-band {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(540px, 2fr);
  gap: clamp(30px, 7vw, 100px);
  padding: 38px 0 44px;
  border-bottom: 1px solid var(--ink);
}
.primary-metric { display: grid; align-content: start; }
.primary-metric > span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.primary-metric strong { font: 500 clamp(3.2rem, 8vw, 7rem)/0.95 Georgia, serif; letter-spacing: -0.07em; color: var(--used-dark); }
.primary-metric small { margin-top: 8px; color: var(--muted); }
.metric-list { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); align-items: end; }
.metric-list div { padding: 8px 20px 12px; border-left: 1px solid var(--line); }
.metric-list dt { color: var(--muted); font-size: 0.75rem; }
.metric-list dd { margin: 9px 0 0; font: 500 clamp(1.75rem, 3vw, 2.8rem)/1 Georgia, serif; }

.dashboard-section { padding: 58px 0 64px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 28px; }
.section-heading > p { max-width: 610px; margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.92rem; }

.matrix-wrap { overflow-x: auto; padding-bottom: 12px; }
.matrix { min-width: 800px; display: grid; gap: 8px; align-items: stretch; }
.matrix-date { min-width: 78px; padding: 0 4px 7px; color: var(--muted); font-size: 0.72rem; text-align: center; white-space: nowrap; }
.matrix-total-heading {
  position: sticky;
  right: 0;
  z-index: 3;
  min-width: 112px;
  color: var(--used-dark);
  font-weight: 760;
  background: var(--paper);
  box-shadow: -12px 0 18px rgba(243, 240, 232, 0.94);
}
.matrix-room { min-width: 160px; padding: 15px 12px 15px 0; font-weight: 650; font-size: 0.86rem; align-self: center; }
.matrix-cell {
  --cell-alpha: calc(0.08 + var(--fill, 0) * 0.78);
  min-height: 72px;
  border: 1px solid rgba(127, 63, 29, calc(0.15 + var(--fill, 0) * 0.42));
  border-radius: 12px;
  background: rgba(188, 106, 50, var(--cell-alpha));
  color: var(--ink);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  cursor: default;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 220ms ease;
}
.matrix-cell:hover, .matrix-cell:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(66, 45, 30, 0.12); }
.matrix-cell.live { border-style: dashed; }
.matrix-cell.missing { background: transparent; border-color: var(--line); color: #aaa79f; }
.matrix-cell strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.matrix-cell span { font-size: 0.66rem; color: rgba(32, 33, 31, 0.72); font-variant-numeric: tabular-nums; }
.matrix-total {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 112px;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
  box-shadow: -12px 0 18px rgba(243, 240, 232, 0.94);
}
.matrix-total:hover, .matrix-total:focus-visible { box-shadow: -12px 0 18px rgba(243, 240, 232, 0.94), 0 9px 20px rgba(32, 33, 31, 0.2); }
.matrix-total span { color: rgba(250, 248, 242, 0.82); }
.matrix-total em { color: rgba(250, 248, 242, 0.62); font-size: 0.58rem; font-style: normal; font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 0.78rem; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(32, 33, 31, 0.2); }
.legend-used { background: var(--used); }
.legend-open { background: var(--open); }
.legend-restricted { background: repeating-linear-gradient(135deg, var(--restricted), var(--restricted) 2px, transparent 2px, transparent 5px); }

.composition-chart { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(240px, 1fr) 90px; align-items: center; gap: 14px; }
.bar-date { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track { height: 30px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.bar-segment { min-width: 0; height: 100%; transition: width 380ms cubic-bezier(.2,.75,.28,1); }
.bar-segment.used { background: var(--used); }
.bar-segment.open { background: var(--open); }
.bar-segment.restricted { background: repeating-linear-gradient(135deg, var(--restricted), var(--restricted) 3px, #bcb9b0 3px, #bcb9b0 6px); }
.bar-total { text-align: right; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.bar-total strong { display: block; font-size: 0.92rem; }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; min-width: 840px; font-size: 0.82rem; }
th, td { padding: 13px 10px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.06em; }
th:first-child, th:nth-child(2), th:nth-child(3), td:first-child, td:nth-child(2), td:nth-child(3) { text-align: left; }
.state-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.state-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--used); }
.state-badge.live::before { background: transparent; border: 1px solid var(--used); }

.empty-state { padding: 56px 0; display: grid; gap: 7px; color: var(--muted); }
.empty-state[hidden] { display: none; }
.empty-state strong { color: var(--ink); font: 500 1.4rem Georgia, serif; }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 22px clamp(22px, 5vw, 72px) 32px; color: var(--muted); font-size: 0.74rem; background: var(--surface); border-top: 1px solid var(--ink); }

.loading { opacity: 0.45; pointer-events: none; }
.fade-in { animation: fade-in 360ms ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 850px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .metric-band { grid-template-columns: 1fr; gap: 30px; }
  .metric-list { grid-template-columns: repeat(2, 1fr); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .bar-row { grid-template-columns: 76px minmax(190px, 1fr) 78px; gap: 9px; }
  footer { flex-direction: column; gap: 5px; }
}

@media (max-width: 520px) {
  h1 { font-size: 2.75rem; }
  .metric-list div { padding-left: 12px; }
  .control-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    overflow: visible;
  }
  .control-band label { min-width: 0; }
  .control-band select, .control-band input { width: 100%; min-width: 0; }
  .control-band button { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}