/* =========================================================
   Texco × Cadence shared concierge panel
   Portrait 1080 × 1872 (IAdea XMP-6250)
   Brand tokens follow:
     - Texco Brand Pack 2026 (brand-95 #191919, brand orange #fc4d0f)
     - Cadence Brand Book v1 (021 Orange #FF5200, Titanium #434343)
   Both brands restrict orange to accents only — never for body text.
   ========================================================= */

:root {
  /* shared neutrals (both brands' dark/light) */
  --bg:            #0f0f0f;           /* slightly deeper than brand-95 so brand-95 panels read above it */
  --bg-soft:       #191919;           /* Texco brand-95 */
  --bg-elevated:   #232323;           /* card surface */
  --line:          #2c2c2c;
  --text:          #ffffff;
  --text-soft:     #c8c8c8;
  --text-mute:     #8a8a8a;
  --titanium:      #434343;           /* CPG titanium */

  /* status palette — modernised, faithful to the device's CustomConfig
     (available #259925, occupied #992525, soon #9b8325, offline #256d9a)
     softened for screen-on-wall readability while keeping semantics */
  --status-free:        #6fc36f;       /* refined green */
  --status-free-glow:   #6fc36f33;
  --status-busy:        #d35454;       /* refined red */
  --status-busy-glow:   #d3545433;
  --status-soon:        #fc4d0f;       /* Texco brand orange — used here as the high-alert accent */
  --status-soon-glow:   #fc4d0f33;
  --status-offline:     #5b7fb2;       /* refined blue */
  --status-offline-glow:#5b7fb233;

  /* typography */
  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* spacing rhythm — 8-pt scale, generous for portrait wall display */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;

  --page-margin-x: 48px;
  --page-margin-y: 40px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }

/* ---------- panel frame (locked to the native portrait ratio) --------
   Device viewport on the IAdea XMP-6250 is 1080 × 1872 (per deviceInfo
   displayMetrics). We lock the panel to that exact aspect so it cannot
   overflow on the kiosk — header / clock / footer take their natural
   size, the rooms region (1fr) absorbs whatever's left. */
.panel {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  background: var(--bg);
  padding: 0;
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
}

/* ===================== HEADER ============================ */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--s-4);
  padding: var(--s-5) var(--page-margin-x) var(--s-3);
}
.header__logo { height: 56px; width: auto; opacity: 0.96; }
.header__logo--left  { justify-self: start; }
.header__logo--right { justify-self: end;   height: 44px; }

.header__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.header__eyebrow-label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.header__eyebrow-sub {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ===================== CLOCK ============================= */
.clock {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 22px;
}
.clock__time {
  font-size: 108px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.clock__meridiem {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.clock__temp {
  position: absolute;
  right: 40px;
  bottom: 22px;
  font-size: 44px;
  font-weight: 300;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ===================== ROOMS ============================= */
.rooms {
  display: flex;
  flex-direction: column;
  padding: 4px var(--page-margin-x) 14px;
  gap: 8px;
  min-height: 0;          /* allow grid track to shrink so overflow:hidden bites */
  overflow: hidden;
}

.rooms__loading {
  color: var(--text-mute);
  text-align: center;
  padding: var(--s-6) 0;
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* a single room row */
.room {
  --status-colour: var(--status-offline);
  --status-glow:   var(--status-offline-glow);
  display: grid;
  grid-template-columns: 12px 112px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 22px;
  background: var(--bg-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
  height: 100px;          /* fixed — every row is the same regardless of how many bookings */
  flex-shrink: 0;
  position: relative;
  transition: background 280ms ease, border-color 280ms ease;
}
.room[data-status='free']    { --status-colour: var(--status-free);    --status-glow: var(--status-free-glow); }
.room[data-status='busy']    { --status-colour: var(--status-busy);    --status-glow: var(--status-busy-glow); }
.room[data-status='soon']    { --status-colour: var(--status-soon);    --status-glow: var(--status-soon-glow); }
.room[data-status='offline'] { --status-colour: var(--status-offline); --status-glow: var(--status-offline-glow); }

/* status LED bar — vertical strip at the left edge */
.room__led {
  align-self: stretch;
  border-radius: 4px;
  background: var(--status-colour);
  box-shadow: 0 0 18px var(--status-glow);
}

/* room title (large room code, e.g. G1, F8) */
.room__title {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* status + meeting info column */
.room__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.room__status {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--status-colour);
  line-height: 1.1;
}
/* booking lines — up to 2, current first, then upcoming */
.room__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.room__line {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: baseline;
  gap: 14px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.15;
}
.room__line--lead {
  color: var(--text);
}
.room__line--muted {
  display: block;
  font-style: italic;
  color: var(--text-mute);
  font-size: 22px;
}
.room__line-when {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.room__line--lead .room__line-when { color: var(--status-colour); font-weight: 600; }
.room__line-who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room__line-who-muted { color: var(--text-mute); font-style: italic; }


/* features rail (icons) */
.room__features {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
}
.feature {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}
.feature svg { width: 100%; height: 100%; fill: currentColor; }
.feature[data-on='false'] { opacity: 0.18; }

/* gentle pulse for SOON to draw the eye */
@keyframes pulse-soon {
  0%, 100% { box-shadow: 0 0 18px var(--status-glow); }
  50%      { box-shadow: 0 0 32px var(--status-soon); }
}
.room[data-status='soon'] .room__led { animation: pulse-soon 1800ms ease-in-out infinite; }

/* stale state — if data is older than 2 mins fade the row slightly */
.room[data-stale='true'] { opacity: 0.55; }

/* ===================== FOOTER ============================ */
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  padding: var(--s-3) var(--page-margin-x) var(--s-4);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.footer__zone--centre { text-align: center; text-transform: none; letter-spacing: 0.04em; font-weight: 400; }
.footer__zone--right  { text-align: right; }

/* ===================== AFTER-HOURS ======================= */
.afterhours {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  text-align: center;
  padding: var(--s-7) var(--page-margin-x);
  min-height: 60vh;
}
body.is-afterhours .clock,
body.is-afterhours .rooms { display: none; }
body.is-afterhours .afterhours { display: flex; }
.afterhours__time {
  font-size: 180px;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.afterhours__msg {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--status-soon);
}
.afterhours__sub {
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ===================== ERROR / EMPTY ===================== */
.rooms__empty {
  text-align: center;
  padding: var(--s-6) 0;
  color: var(--text-mute);
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===================== RESPONSIVE PREVIEW ================
   When viewing in a desktop browser we render at the *native*
   1080 × 1872 frame and scale it down via transform. This keeps
   every pixel proportional to what the IAdea kiosk will see —
   no separate tuning per element.
========================================================== */
@media (max-width: 1079px) {
  html, body { height: auto; }
  body {
    display: block;
    padding: 16px;
    overflow-x: hidden;
  }
  .panel {
    width: 1080px;
    height: 1872px;
    max-width: none;
    transform: scale(0.5);
    transform-origin: top left;
    margin: 0;
  }
  /* take back the layout space we just scaled away */
  body::after {
    content: '';
    display: block;
    width: 540px;
    height: 936px;
  }
}
@media (max-width: 599px) {
  .panel { transform: scale(0.33); }
  body::after { width: 357px; height: 619px; }
}