/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --eth:        #215CAF;
  --eth-dark:   #1a4a8a;
  --eth-light:  #e8f0fb;
  --green:      #16a34a;
  --green-bg:   #dcfce7;
  --amber:      #d97706;
  --amber-bg:   #fef3c7;
  --violet:     #7c3aed;
  --violet-bg:  #ede9fe;
  --red:        #dc2626;
  --red-bg:     #fee2e2;

  /* ── Per-building colours ── */
  --c-hit:      #f97316;  --c-hit-bg: #fff7ed;  --c-hit-text: #c2410c;
  --c-hil:      #2563eb;  --c-hil-bg: #eff6ff;  --c-hil-text: #1e40af;
  --c-hci:      #16a34a;  --c-hci-bg: #f0fdf4;  --c-hci-text: #166534;
  --c-hpt:      #7c3aed;  --c-hpt-bg: #f5f3ff;  --c-hpt-text: #6d28d9;
  --c-hpf:      #e11d48;  --c-hpf-bg: #fff1f2;  --c-hpf-text: #9f1239;
  --c-hpp:      #0d9488;  --c-hpp-bg: #f0fdfa;  --c-hpp-text: #134e4a;

  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-400:   #94a3b8;
  --gray-600:   #475569;
  --gray-900:   #0f172a;

  --radius:     12px;
  --radius-sm:  6px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);

  --bar-h:      28px;
  --label-w:    200px;
}

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--gray-50);
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────── */
header {
  background: var(--eth);
  color: #fff;
  padding: 20px 0;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.header-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.header-sub {
  margin-top: 4px;
  font-size: 13px;
  opacity: .75;
}

/* ── Main ────────────────────────────────────────────────────── */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
}

/* ── Controls ────────────────────────────────────────────────── */
.controls-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.control-group--action {
  margin-left: auto;
}
.control-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .5px;
}

input[type="date"],
input[type="time"] {
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--gray-900);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
input[type="date"]:focus,
input[type="time"]:focus { border-color: var(--eth); }

input[type="date"] { min-width: 148px; }

.time-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.time-sep { color: var(--gray-400); font-size: 16px; }

.time-select {
  height: 38px;
  padding: 0 8px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-900);
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  width: 90px;
}
.time-select:focus { border-color: var(--eth); }

/* ── Building buttons ────────────────────────────────────────── */
.bldg-group {
  display: flex;
  gap: 6px;
}
.bldg-btn {
  height: 38px;
  padding: 0 16px;
  border: 2px solid var(--gray-200);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--gray-600);
  transition: all .15s;
  letter-spacing: .3px;
}
.bldg-btn:hover { border-color: var(--gray-400); }

/* Room type buttons */
.type-btn {
  height: 38px;
  padding: 0 16px;
  border: 2px solid var(--gray-200);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--gray-600);
  transition: all .15s;
  letter-spacing: .3px;
}
.type-btn:hover  { border-color: var(--gray-400); }
.type-btn.active { border-color: var(--eth); background: var(--eth-light); color: var(--eth-dark); }

.bldg-btn.hit.active  { border-color: var(--c-hit); background: var(--c-hit-bg); color: var(--c-hit-text); }
.bldg-btn.hil.active  { border-color: var(--c-hil); background: var(--c-hil-bg); color: var(--c-hil-text); }
.bldg-btn.hci.active  { border-color: var(--c-hci); background: var(--c-hci-bg); color: var(--c-hci-text); }
.bldg-btn.hpt.active  { border-color: var(--c-hpt); background: var(--c-hpt-bg); color: var(--c-hpt-text); }
.bldg-btn.hpf.active  { border-color: var(--c-hpf); background: var(--c-hpf-bg); color: var(--c-hpf-text); }
.bldg-btn.hpp.active  { border-color: var(--c-hpp); background: var(--c-hpp-bg); color: var(--c-hpp-text); }

/* ── Search button ───────────────────────────────────────────── */
.btn-primary {
  height: 38px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--eth);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}
.btn-primary:hover:not(:disabled) { background: var(--eth-dark); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; width: 16px; height: 16px; }

/* ── Error ───────────────────────────────────────────────────── */
.error-msg {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-weight: 500;
}

/* ── Summary strip ───────────────────────────────────────────── */
.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  font-size: 13px;
}
.summary-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
}
.summary-chip strong { color: var(--gray-900); }
.summary-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.summary-chip .dot.orange { background: var(--amber); }
.summary-chip .dot.gray   { background: var(--gray-400); }

/* ── Section titles ──────────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.section-title svg { width: 17px; height: 17px; color: var(--eth); flex-shrink: 0; }

/* ── Picks (best match) ──────────────────────────────────────── */
.picks-empty {
  color: var(--gray-400);
  font-style: italic;
  padding: 8px 0;
}
.pick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--green-bg);
  background: var(--green-bg);
  margin-bottom: 8px;
}
.pick-card:last-child { margin-bottom: 0; }
.pick-badge {
  font-size: 18px;
  font-weight: 800;
  color: var(--green);
  min-width: 28px;
  text-align: center;
}
.pick-info { flex: 1; }
.pick-room { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.pick-meta { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.pick-window {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-align: right;
  white-space: nowrap;
}

/* ── Plan bar ────────────────────────────────────────────────── */
.plan-bar {
  position: relative;
  height: 44px;
  background: var(--gray-100);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.plan-seg {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,.4);
}
.plan-seg:last-child { border-right: none; }
.plan-seg-label { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.plan-seg-time  { font-size: 10px; color: rgba(255,255,255,.8); white-space: nowrap; }
.plan-seg-gap   { background: #fca5a5 !important; }

.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.plan-item-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plan-item-time { font-weight: 600; min-width: 110px; font-size: 13px; }
.plan-item-room { font-weight: 700; flex: 1; }
.plan-item-seats { font-size: 12px; color: var(--gray-400); }
.plan-item-gap { color: var(--red); font-style: italic; }

/* ── Timeline ────────────────────────────────────────────────── */
.timeline-wrap { overflow-x: auto; }

.axis-row,
.room-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 600px;
}

.room-label-col {
  width: var(--label-w);
  flex-shrink: 0;
}
.bar-col {
  flex: 1;
  position: relative;
  min-width: 300px;
}

/* Time axis */
#time-axis {
  height: 24px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 4px;
}
.tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tick-line {
  width: 1px;
  height: 6px;
  background: var(--gray-200);
}

/* Room rows */
.room-row {
  padding: 3px 0;
}
.room-row:hover .room-bar-wrap { outline: 1px solid var(--gray-300, #cbd5e1); }

.room-label {
  width: var(--label-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.room-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-seats {
  font-size: 11px;
  color: var(--gray-400);
}

/* Building badge */
.bldg-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .4px;
}
.bldg-tag.HIT { background: var(--c-hit-bg); color: var(--c-hit-text); }
.bldg-tag.HIL { background: var(--c-hil-bg); color: var(--c-hil-text); }
.bldg-tag.HCI { background: var(--c-hci-bg); color: var(--c-hci-text); }
.bldg-tag.HPT { background: var(--c-hpt-bg); color: var(--c-hpt-text); }
.bldg-tag.HPF { background: var(--c-hpf-bg); color: var(--c-hpf-text); }
.bldg-tag.HPP { background: var(--c-hpp-bg); color: var(--c-hpp-text); }

/* Plan visit-order badge */
.plan-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* Bar */
.room-bar-wrap {
  flex: 1;
  position: relative;
  height: var(--bar-h);
  background-color: var(--gray-200);
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(7.1428% - 1px),
    rgba(0,0,0,.1) calc(7.1428% - 1px),
    rgba(0,0,0,.1) 7.1428%
  );
  border-radius: 4px;
  overflow: hidden;
}
.free-seg {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
  opacity: .75;
}
/* Free segment colour by building */
.room-row[data-building="HIT"] .free-seg { background: var(--c-hit); }
.room-row[data-building="HIL"] .free-seg { background: var(--c-hil); }
.room-row[data-building="HCI"] .free-seg { background: var(--c-hci); }
.room-row[data-building="HPT"] .free-seg { background: var(--c-hpt); }
.room-row[data-building="HPF"] .free-seg { background: var(--c-hpf); }
.room-row[data-building="HPP"] .free-seg { background: var(--c-hpp); }

/* Rooms fully free in the selected window → full opacity */
.room-row[data-in-range="full"] .free-seg { opacity: 1; }
.room-row[data-in-range="full"] .room-name { font-weight: 800; }

/* Range-highlight band (CSS custom props updated by JS) */
.room-bar-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  left: var(--range-left, 0%);
  width: var(--range-width, 0%);
  background: rgba(33, 92, 175, .13);
  border-left: 1.5px solid rgba(33, 92, 175, .35);
  border-right: 1.5px solid rgba(33, 92, 175, .35);
  pointer-events: none;
  z-index: 2;
}
#time-axis::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 6px;
  left: var(--range-left, 0%);
  width: var(--range-width, 0%);
  background: rgba(33, 92, 175, .25);
  border-radius: 2px;
}

/* Plan rooms: colored left border + slightly elevated background */
.room-row[data-in-plan="true"] {
  border-left: 3px solid transparent;
  padding-left: 4px;
  background: var(--gray-50);
  border-radius: 4px;
  margin-bottom: 1px;
}
.room-row[data-building="HIT"][data-in-plan="true"] { border-left-color: var(--c-hit); }
.room-row[data-building="HIL"][data-in-plan="true"] { border-left-color: var(--c-hil); }
.room-row[data-building="HCI"][data-in-plan="true"] { border-left-color: var(--c-hci); }
.room-row[data-building="HPT"][data-in-plan="true"] { border-left-color: var(--c-hpt); }
.room-row[data-building="HPF"][data-in-plan="true"] { border-left-color: var(--c-hpf); }
.room-row[data-building="HPP"][data-in-plan="true"] { border-left-color: var(--c-hpp); }

/* ── Route overview row ──────────────────────────────────────── */
.route-row {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
}
.route-label-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-400);
  line-height: 1.4;
}
.route-wrap {
  height: 36px !important;   /* slightly taller than room bars */
  border-radius: 6px !important;
}
.route-seg {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,.35);
}
.route-seg:last-child { border-right: none; }
.route-seg-lbl {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.route-gap {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(220,38,38,.15) 4px,
    rgba(220,38,38,.15) 8px
  );
  border: 1px dashed rgba(220,38,38,.3);
}

/* ── Separator between plan rooms and other rooms ────────────── */
.timeline-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.timeline-sep::before,
.timeline-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}