/* ═══════════════════════════════════════════════════════════
   DUA Room Management System — styles.css
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --bg:       #060d1b;
  --surface:  #0b1829;
  --elevated: #111f35;
  --border:   #1a3050;
  --border2:  #263f60;

  --amber:     #f5a623;
  --amber-dim: rgba(245,166,35,0.12);
  --amber-glow:rgba(245,166,35,0.30);

  --cyan:      #0ea5e9;
  --cyan-dim:  rgba(14,165,233,0.13);
  --emerald:   #10b981;
  --emr-dim:   rgba(16,185,129,0.13);

  --text:      #e8f2ff;
  --muted:     #5c7a9e;
  --dim:       #263f5a;

  --font-h: 'Syne',    sans-serif;
  --font-b: 'Outfit',  sans-serif;
  --font-m: 'DM Mono', monospace;

  --r:   12px;
  --rsm:  8px;
  --shad: 0 4px 24px rgba(0,0,0,.4);
  --shad-lg: 0 8px 48px rgba(0,0,0,.6);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: var(--bg); }
::-webkit-scrollbar-thumb      { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--border2); }

a        { color: inherit; text-decoration: none; }
button   { font-family: var(--font-b); cursor: pointer; }
input, select, textarea { font-family: var(--font-b); color: var(--text); }

/* ── APP SHELL ────────────────────────────────────────────── */
#app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#tablet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#tablet-overlay.active { display: block; }

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sb-logo {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.logo-mark {
  display: block;
  font-family: var(--font-h);
  font-size: 26px;
  font-weight: 800;
  color: var(--amber);
  letter-spacing: -.5px;
}

.logo-sub {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
}

.sb-nav {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--rsm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.nav-item .icon {
  font-style: normal;
  font-size: 16px;
  width: 22px;
  text-align: center;
}

.nav-item:hover        { background: var(--elevated); color: var(--text); }
.nav-item.active       { background: var(--amber-dim); color: var(--amber); }

.sb-footer {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}

/* ── SIDEBAR DATA MANAGEMENT ──────────────────────────────── */
.sb-data {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--border);
}

.sb-data-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 10px;
}

.sb-data-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--rsm);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-b);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--muted);
  transition: all .15s;
  margin-bottom: 6px;
}

.sb-data-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-dim);
}

.sb-data-btn--import:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}

.sb-rooms-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 11px;
}

.room-ind {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.rdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}

.rdot.busy { animation: rpulse 1.8s ease-in-out infinite; }

@keyframes rpulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.8); }
}

/* ── PAGE CONTENT ─────────────────────────────────────────── */
.page-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

.page-header {
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ph-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.page-title {
  font-family: var(--font-h);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

.content { padding: 28px 40px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--rsm);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
  white-space: nowrap;
}

.btn-p    { background: var(--amber); color: #07111e; }
.btn-p:hover { background: #fbbf24; transform: translateY(-1px); box-shadow: 0 4px 16px var(--amber-glow); }

.btn-s    { background: var(--elevated); color: var(--text); border: 1px solid var(--border); }
.btn-s:hover { border-color: var(--border2); background: var(--border); }

.btn-g    { background: none; color: var(--muted); border: 1px solid transparent; }
.btn-g:hover { background: var(--elevated); color: var(--text); }

.btn-d    { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.btn-d:hover { background: rgba(239,68,68,.22); }

.btn-sm   { padding: 5px 12px; font-size: 12px; }
.btn-lg   { padding: 12px 24px; font-size: 14px; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ── ROOM CARD — CLICKABLE BODY + OCCUPANCY CHART ─────────── */
.rcard-body {
  cursor: pointer;
  transition: opacity .15s;
}

.rcard-body:hover { opacity: .88; }

.rcard-body:hover .rcard-name {
  color: var(--rc, var(--amber));
}

.rcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
}

.rcard-title-group { flex: 1; min-width: 0; }

/* Occupancy donut */
.occ-wrap {
  flex-shrink: 0;
  text-align: center;
  margin-top: 2px;
}

.occ-svg {
  width: 54px;
  height: 54px;
  display: block;
}

.occ-lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Subtle "view calendar" hint on hover */
.rcard-hint {
  font-size: 11px;
  color: var(--rc, var(--amber));
  opacity: 0;
  transition: opacity .2s;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: .3px;
}

.rcard-body:hover .rcard-hint { opacity: 1; }

/* ── CALENDAR ROOM FILTER BAR ─────────────────────────────── */
.cal-room-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.crf-btn {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}

.crf-btn:hover { border-color: var(--border2); color: var(--text); }

.crf-btn.crf-active {
  background: var(--crf-dim, var(--amber-dim));
  border-color: var(--crf-color, var(--amber));
  color: var(--crf-color, var(--amber));
}

.crf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Highlighted room headline in filtered calendar */
.cal-room-headline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-h);
  margin-bottom: 18px;
  background: rgba(255,255,255,.04);
}

.crh-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

.rcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}

.rcard:hover { border-color: var(--border2); transform: translateY(-2px); }

.rcard-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rc, var(--amber));
}

.rcard-name { font-family: var(--font-h); font-size: 17px; font-weight: 700; }
.rcard-sub  { font-size: 11.5px; color: var(--muted); margin-bottom: 14px; margin-top: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 14px;
}

.badge-avail { background: rgba(16,185,129,.14); color: #34d399; }
.badge-busy  { background: rgba(239,68,68,.14);  color: #f87171; }
.bdot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-busy .bdot { animation: rpulse 1.5s infinite; }

.curr-box   { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
.curr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 3px; }
.curr-title { font-size: 13.5px; font-weight: 600; }
.curr-meta  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.next-box   { margin-bottom: 10px; }
.next-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.next-title { font-size: 13px; font-weight: 600; }
.next-time  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.no-bookings { font-size: 12px; color: var(--dim); margin-bottom: 10px; }

.rcard-meta { font-size: 12px; color: var(--muted); display: flex; gap: 14px; margin-top: 8px; }
.rcard-btns { display: flex; gap: 8px; margin-top: 14px; }

/* ── SEATING BREAKDOWN ────────────────────────────────────── */
.seat-breakdown {
  margin-top: 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 10px 12px;
}

.seat-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 8px;
}

.seat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(26,48,80,.4);
  font-size: 12.5px;
}

.seat-row:last-child { border-bottom: none; }

.seat-icon  { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.seat-label { flex: 1; color: var(--muted); }
.seat-count { font-family: var(--font-m); font-size: 13px; font-weight: 700; }

/* ── TODAY SCHEDULE ───────────────────────────────────────── */
.section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.section-title { font-family: var(--font-h); font-size: 16px; font-weight: 700; }

.schedule-list { display: flex; flex-direction: column; gap: 8px; }

.sched-item {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 12px 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sched-item.current {
  border-color: var(--rc, var(--amber));
  background: var(--rc-dim, var(--amber-dim));
}

.sched-time  { font-family: var(--font-m); font-size: 11.5px; color: var(--muted); min-width: 95px; margin-top: 1px; }
.sched-body  { flex: 1; }
.sched-title { font-size: 13.5px; font-weight: 600; }
.sched-meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }

.room-tag {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  align-self: flex-start;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* ── CALENDAR ─────────────────────────────────────────────── */
.cal-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.week-lbl { font-family: var(--font-h); font-size: 17px; font-weight: 700; }

.room-legend  { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.rl-item      { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.rl-dot       { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.cal-outer    { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }

.cal-hdr-row  { display: flex; border-bottom: 2px solid var(--border); background: var(--surface); }

.cal-corner   { width: 58px; min-width: 58px; border-right: 1px solid var(--border); }

.cal-day-hdr  {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}

.cal-day-hdr:last-child { border-right: none; }
.cal-day-hdr:hover      { background: var(--elevated); }
.cal-day-hdr.today      { background: var(--amber-dim); }

.cal-dn { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.cal-dd { font-family: var(--font-h); font-size: 22px; font-weight: 700; margin-top: 1px; }
.cal-day-hdr.today .cal-dd { color: var(--amber); }

.cal-body-row {
  display: flex;
  overflow-y: auto;
  max-height: 620px;
}

.cal-time-col {
  width: 58px;
  min-width: 58px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cal-tl {
  position: absolute;
  right: 6px;
  font-family: var(--font-m);
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  pointer-events: none;
}

.cal-days-wrap { display: flex; flex: 1; }

.cal-day {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;    /* booking blocks cannot escape the grid */
}

.cal-day:last-child { border-right: none; }
.cal-day.today      { background: rgba(245,166,35,.025); }
.cal-day:hover      { background: rgba(255,255,255,.01); }

.cal-gl {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid rgba(26,48,80,.4);
  pointer-events: none;
}

.cal-bk {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  overflow: hidden;
  cursor: default;
  transition: opacity .15s;
  pointer-events: all;
}

.cal-bk:hover          { opacity: .8; }
.cal-bk-time           { font-family: var(--font-m); font-size: 10px; opacity: .8; }
.cal-bk-title          { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bk-room           { font-size: 10px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── BOOKING FORM ─────────────────────────────────────────── */
.form-wrap { max-width: 820px; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 20px;
}

.form-sec {
  font-family: var(--font-h);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.fg      { display: flex; flex-direction: column; gap: 5px; }
.fg.full { grid-column: 1 / -1; }

label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .2px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
select,
textarea {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  color: var(--text);
  font-size: 13.5px;
  padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(.5);
  cursor: pointer;
}

select option { background: var(--surface); }
textarea      { resize: vertical; min-height: 80px; }

.room-sel-grid { display: flex; gap: 10px; }

.room-sel-btn {
  flex: 1;
  padding: 13px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--elevated);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-b);
  transition: all .15s;
  text-align: left;
}

.room-sel-btn:hover        { border-color: var(--border2); color: var(--text); }
.room-sel-btn[data-sel="true"]  { border-color: var(--rc, var(--amber)); background: var(--rc-dim, var(--amber-dim)); color: var(--rc, var(--amber)); }

.rsb-name { font-size: 13px; font-weight: 700; display: block; }
.rsb-cap  { font-size: 11px; margin-top: 2px; opacity: .7; display: block; }

.chk-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }

.chk-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--rsm);
  border: 1px solid var(--border);
  background: var(--elevated);
  cursor: pointer;
  font-size: 12.5px;
  transition: all .15s;
  user-select: none;
}

.chk-item:hover           { border-color: var(--border2); }
.chk-item[data-on="true"] { border-color: var(--amber); background: var(--amber-dim); }

.chk-box {
  width: 16px; height: 16px; min-width: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  transition: all .15s;
}

.chk-item[data-on="true"] .chk-box { background: var(--amber); border-color: var(--amber); color: #07111e; }

/* ── CONFLICT REQUEST SECTION ─────────────────────────────── */
.conflict-section {
  display: none;
  border: 1px solid rgba(245,166,35,.35);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 20px;
  background: rgba(245,166,35,.05);
}

.conflict-section.show { display: block; }

.cs-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(245,166,35,.10);
  border-bottom: 1px solid rgba(245,166,35,.2);
}

.cs-icon   { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.cs-title  { font-size: 14px; font-weight: 700; color: #fbbf24; }
.cs-sub    { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Conflicting booking details */
.cs-booking {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(245,166,35,.15);
}

.cd-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}

.cd-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  min-width: 110px;
}

.cd-val   { color: var(--text); }
.cd-name  { font-weight: 700; font-size: 14px; }
.cd-mono  { font-family: var(--font-m); color: var(--amber); font-size: 13px; }
.cd-email { font-family: var(--font-m); font-size: 12.5px; color: var(--cyan); }
.cd-warn-sm { font-size: 12px; color: #f87171; }

/* Divider label */
.cs-divider {
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  border-bottom: 1px solid rgba(245,166,35,.15);
  background: rgba(0,0,0,.15);
}

/* Request form */
.cs-request {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-request label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.req-star { color: var(--amber); margin-left: 2px; }

.cs-request textarea {
  background: var(--elevated);
  border: 1px solid var(--border2);
  border-radius: var(--rsm);
  color: var(--text);
  font-size: 13.5px;
  padding: 10px 13px;
  resize: vertical;
  min-height: 80px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.cs-request textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
}

.btn-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--rsm);
  background: rgba(245,166,35,.15);
  border: 1.5px solid var(--amber);
  color: var(--amber);
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-b);
  cursor: pointer;
  transition: all .15s;
  align-self: flex-start;
}

.btn-email:hover {
  background: rgba(245,166,35,.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--amber-glow);
}

.cs-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 4px; }

/* ── BOOKINGS TABLE ───────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.bk-count { margin-left: auto; font-size: 13px; color: var(--muted); }

.bk-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

thead tr { background: var(--elevated); border-bottom: 1px solid var(--border); }

th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 700;
}

td {
  padding: 13px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(26,48,80,.5);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td      { background: rgba(11,24,41,.8); }

.tag { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; }

.td-bold  { font-weight: 600; }
.td-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.td-tiny  { font-size: 11px; color: var(--dim); margin-top: 3px; }
.td-mono  { font-family: var(--font-m); font-size: 13px; }
.td-mono2 { font-family: var(--font-m); font-size: 13px; color: var(--muted); }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}

.empty-icon  { font-size: 44px; margin-bottom: 14px; }
.empty-title { font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-p     { font-size: 13px; }

/* ── CARD WRAPPER ─────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
}

/* ── TOAST ────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shad-lg);
  animation: toast-in .3s ease;
  pointer-events: all;
}

.toast.success { border-color: rgba(16,185,129,.5); }
.toast.info    { border-color: rgba(14,165,233,.5); }
.toast.error   { border-color: rgba(239,68,68,.5); }
.toast-icon    { font-size: 16px; }

@keyframes toast-in {
  from { transform: translateY(16px) translateX(8px); opacity: 0; }
  to   { transform: translateY(0) translateX(0); opacity: 1; }
}

/* ── TABLET VIEW ──────────────────────────────────────────── */
.tablet {
  height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.tb-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tablet > *:not(.tb-glow) { position: relative; z-index: 1; }

.tb-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 36px 48px 0;
}

.tb-room-name { font-family: var(--font-h); font-size: 40px; font-weight: 800; letter-spacing: -1.5px; }
.tb-room-sub  { font-size: 13px; color: var(--muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 2px; }

.tb-clock { text-align: right; }
.tb-time  { font-family: var(--font-m); font-size: 60px; font-weight: 500; letter-spacing: -3px; line-height: 1; }
.tb-date  { font-size: 13px; color: var(--muted); margin-top: 5px; }

.tb-body {
  flex: 1;
  padding: 26px 48px;
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 26px;
  min-height: 0;
}

.tb-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
}

.tb-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--rc, var(--amber));
}

.tb-status-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--muted);
  font-weight: 700;
}

.tb-status-big {
  font-family: var(--font-h);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
}

.tb-status-big.avail { color: #34d399; }
.tb-status-big.busy  { color: #f87171; }

.tb-bk-title { font-family: var(--font-h); font-size: 26px; font-weight: 700; line-height: 1.2; }
.tb-bk-meta  { font-size: 13px; color: var(--muted); margin-top: 3px; }
.tb-bk-time  { font-family: var(--font-m); font-size: 30px; font-weight: 500; margin-top: 8px; }
.tb-pax      { font-size: 14px; color: var(--muted); margin-top: 8px; }

.tb-next-wrap { border-top: 1px solid var(--border); padding-top: 20px; margin-top: auto; }
.tb-next-lbl  { font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); font-weight: 600; }
.tb-next-title{ font-size: 17px; font-weight: 700; margin-top: 5px; }
.tb-next-org  { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tb-next-time { font-family: var(--font-m); font-size: 18px; margin-top: 5px; }
.tb-free-msg  { font-size: 20px; color: #34d399; font-family: var(--font-h); font-weight: 600; }
.tb-free-sub  { font-size: 15px; color: var(--muted); margin-top: 8px; }

.tb-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  overflow-y: auto;
}

.tb-tl-title {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 14px;
}

.tl-ev             { padding: 11px 0; border-bottom: 1px solid var(--border); }
.tl-ev:last-child  { border-bottom: none; }
.tl-ev.past        { opacity: .35; }

.tl-now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 0;
}

.tl-line   { flex: 1; height: 1px; background: var(--amber); opacity: .6; }
.tl-ev-time  { font-family: var(--font-m); font-size: 12px; color: var(--muted); }
.tl-ev-title { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.tl-ev-org   { font-size: 12px; color: var(--muted); margin-top: 2px; }

.tb-footer {
  padding: 17px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tb-logo { font-family: var(--font-h); font-weight: 800; font-size: 17px; color: var(--amber); }

.tb-room-sw { display: flex; gap: 7px; }

.tb-rsw {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-b);
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  transition: all .15s;
}

.tb-rsw:hover        { border-color: var(--border2); color: var(--text); }
.tb-rsw[data-on="true"] { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rooms-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  /* ── App shell ── */
  #app-shell { flex-direction: column; height: auto; min-height: 100vh; }

  /* ── Sidebar becomes a top nav bar ── */
  .sidebar {
    width: 100% !important;
    min-width: 100% !important;
    flex-direction: row;
    align-items: center;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .sb-logo {
    padding: 0 14px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .logo-mark { font-size: 18px; }
  .logo-sub  { display: none; }

  .sb-nav {
    flex-direction: row;
    padding: 0 6px;
    gap: 0;
    height: 100%;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .nav-item {
    flex-direction: column;
    padding: 6px 10px;
    font-size: 10px;
    gap: 2px;
    height: 100%;
    border-radius: 0;
    white-space: nowrap;
  }

  .nav-item .icon { font-size: 14px; width: auto; }

  /* Hide data + footer in mobile top bar */
  .sb-data, .sb-footer { display: none; }

  /* ── Page content ── */
  .page-content { overflow-y: auto; height: calc(100vh - 54px); }

  .page-header { padding: 16px 16px 12px; position: sticky; top: 0; z-index: 10; }
  .ph-row { flex-wrap: wrap; gap: 10px; }
  .content { padding: 14px 16px; }

  /* ── Room cards ── */
  .rooms-grid { grid-template-columns: 1fr; gap: 12px; }
  .rcard-top  { flex-direction: row; }

  /* ── Schedule ── */
  .sched-item { flex-wrap: wrap; gap: 6px; }
  .room-tag   { margin-left: 0; align-self: flex-start; flex-shrink: 0; }
  .sched-time { min-width: 80px; font-size: 11px; }

  /* ── Form ── */
  .form-grid { grid-template-columns: 1fr; }
  .fg.full   { grid-column: 1; }
  .form-wrap { max-width: 100%; }
  .room-sel-grid { flex-direction: column; }
  .chk-grid  { grid-template-columns: 1fr; }

  /* ── Calendar ── */
  .cal-ctrl  { flex-wrap: wrap; gap: 6px; }
  .week-lbl  { font-size: 14px; width: 100%; order: -1; }
  .room-legend { margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .cal-room-filter { flex-wrap: wrap; }

  /* ── Table ── */
  .bk-table-wrap { overflow-x: auto; }
  table { min-width: 600px; }

  /* ── Filter bar ── */
  .filter-bar { flex-wrap: wrap; }
  .bk-count   { width: 100%; text-align: right; }
}

/* ── TABLET VIEW — MOBILE SPECIFIC ───────────────────────── */
@media (max-width: 820px) {
  .tablet { height: 100dvh; overflow-y: auto; }

  .tb-hdr {
    flex-direction: column;
    padding: 20px 20px 0;
    gap: 10px;
  }

  .tb-room-name { font-size: 28px; letter-spacing: -1px; }
  .tb-room-sub  { font-size: 11px; }

  .tb-clock { text-align: left; }
  .tb-time  { font-size: 38px; letter-spacing: -2px; }
  .tb-date  { font-size: 12px; }

  .tb-body {
    grid-template-columns: 1fr;
    padding: 16px 20px;
    gap: 14px;
    height: auto;
  }

  .tb-main { padding: 22px; gap: 14px; border-radius: 14px; }
  .tb-status-big { font-size: 38px; }
  .tb-bk-title   { font-size: 18px; }
  .tb-bk-time    { font-size: 22px; }

  .tb-timeline { border-radius: 14px; max-height: 280px; }

  .tb-footer {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
  }

  .tb-room-sw {
    flex-wrap: wrap;
    gap: 5px;
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .tb-rsw { padding: 6px 12px; font-size: 11.5px; flex: 1; text-align: center; }

  .tb-logo { font-size: 14px; }

  .btn-end-early { width: 100%; justify-content: center; margin-top: 14px; }
}

/* ── VERY SMALL SCREENS (≤ 480px) ────────────────────────── */
@media (max-width: 480px) {
  .nav-item span { display: none; }
  .nav-item      { padding: 0 14px; }
  .page-title    { font-size: 20px; }
  .occ-svg       { width: 44px; height: 44px; }
  .tb-status-big { font-size: 32px; }
  .tb-time       { font-size: 32px; }
  .tb-room-name  { font-size: 24px; }
}


/* ── END MEETING EARLY ────────────────────────────────────── */
.btn-end-early {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: var(--rsm);
  background: rgba(239,68,68,.12);
  border: 1.5px solid rgba(239,68,68,.45);
  color: #fca5a5;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-b);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .3px;
}

.btn-end-early:hover {
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.7);
  color: #fecaca;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(239,68,68,.2);
}

/* Early-end indicator in tablet */
.tb-early-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.35);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Early-end indicator in calendar blocks */
.cal-bk-early {
  font-size: 9px;
  font-weight: 700;
  opacity: .85;
  margin-top: 2px;
  letter-spacing: .5px;
}

/* Early-end tag in bookings list */
.tag-early {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}

/* ── USERS PAGE ───────────────────────────────────────────── */
.u-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: 14px; font-weight: 700; flex-shrink: 0;
}

.tag-me {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: var(--amber-dim); color: var(--amber);
  font-size: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle;
}

.tag-active   { background: rgba(16,185,129,.14); color: #34d399; font-size: 11px; padding: 3px 9px; border-radius: 5px; font-weight: 700; }
.tag-inactive { background: rgba(92,122,158,.14);  color: #5c7a9e; font-size: 11px; padding: 3px 9px; border-radius: 5px; font-weight: 700; }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(4,9,20,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in .2s ease;
}

@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 580px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: slide-up .25s ease;
}

@keyframes slide-up { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }

.modal-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--border);
}

.modal-title { font-family: var(--font-h); font-size: 18px; font-weight: 700; }

.modal-close {
  background: none; border: none; color: var(--muted); font-size: 18px;
  cursor: pointer; padding: 4px; border-radius: 6px; transition: color .15s;
}
.modal-close:hover { color: var(--text); }

.modal-body   { padding: 24px 26px; }
.modal-footer { padding: 18px 26px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* Role picker */
.role-grid { display: flex; gap: 8px; margin-top: 4px; }

.role-btn {
  flex: 1; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--elevated); cursor: pointer; transition: all .15s; text-align: left;
}
.role-btn:hover { border-color: var(--border2); }
.role-btn--sel  { border-color: var(--rc, var(--amber)); background: var(--rc-dim, var(--amber-dim)); }

.role-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.role-btn--sel .role-name { color: var(--rc, var(--amber)); }
.role-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════ */
#login-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}

.login-bg {
  position: absolute; inset: 0;
  background: var(--bg);
}
.login-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(245,166,35,0.09) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 80%, rgba(14,165,233,0.06) 0%, transparent 50%);
}

.login-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.login-brand { text-align: center; }
.login-logo  { font-family: var(--font-h); font-size: 40px; font-weight: 800; color: var(--amber); letter-spacing: -1.5px; }
.login-sub   { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 3px; margin-top: 4px; }

.login-card {
  width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 36px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.login-title { font-family: var(--font-h); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-desc  { font-size: 13px; color: var(--muted); margin-bottom: 24px; }

.login-err {
  display: none;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #fca5a5;
  margin-bottom: 16px;
}

.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.login-field input {
  background: var(--elevated); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-b); font-size: 14px; padding: 11px 14px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 4px; border-radius: 4px;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--text); }

.login-btn {
  width: 100%; padding: 13px; margin-top: 8px;
  border-radius: 9px; background: var(--amber); color: #07111e;
  font-family: var(--font-h); font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
}
.login-btn:hover { background: #fbbf24; transform: translateY(-1px); box-shadow: 0 4px 20px var(--amber-glow); }
.login-btn:disabled { opacity: .55; pointer-events: none; }

.login-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(7,17,30,.25); border-top-color: #07111e;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.login-btn.loading .login-btn-text { display: none; }
.login-btn.loading .login-spinner  { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-hint {
  margin-top: 18px; padding: 12px 14px;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; color: var(--muted);
  line-height: 1.7;
}
.login-hint strong { color: var(--text); display: block; margin-bottom: 3px; }
.login-hint code   { font-family: var(--font-m); color: var(--amber); }

.login-footer { font-size: 12px; color: var(--dim); text-align: center; }

/* ── SIDEBAR USER ────────────────────────────────────────── */
.sb-user {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sb-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--amber-dim); border: 1.5px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: 13px; font-weight: 700;
  color: var(--amber); flex-shrink: 0;
}
.sb-user-info  { flex: 1; min-width: 0; }
.sb-user-name  { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-role  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.sb-logout {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 4px; border-radius: 4px; transition: color .15s; flex-shrink: 0;
}
.sb-logout:hover { color: #f87171; }

/* ══════════════════════════════════════════════════════════
   ROOM INFO MODAL
   ══════════════════════════════════════════════════════════ */
#info-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(4,9,20,.8);
  align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}

.info-modal-backdrop {
  width: 100%; max-width: 600px;
  animation: slide-up .25s ease;
}

@keyframes slide-up { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.info-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.info-modal-hdr {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--border);
  background: var(--elevated);
}
.info-modal-name { font-family: var(--font-h); font-size: 22px; font-weight: 800; }
.info-modal-sub  { font-size: 12px; color: var(--muted); margin-top: 3px; }
.info-close {
  background: none; border: none; color: var(--muted); font-size: 18px;
  cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: color .15s; flex-shrink: 0;
}
.info-close:hover { color: var(--text); }

.info-modal-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; }

.info-section {}
.info-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--muted); margin-bottom: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Seating rows */
.info-seat-row   { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(26,48,80,.4); font-size: 13.5px; }
.info-seat-row:last-child { border-bottom: none; }
.info-seat-icon  { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.info-seat-label { flex: 1; color: var(--muted); }
.info-seat-count { font-family: var(--font-m); font-size: 15px; font-weight: 700; }

/* Rules */
.info-rule   { display: flex; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid rgba(26,48,80,.3); align-items: flex-start; }
.info-rule:last-child { border-bottom: none; }
.info-rule-n { font-family: var(--font-m); font-size: 12px; font-weight: 700; min-width: 18px; margin-top: 1px; flex-shrink: 0; }

/* Equipment grid */
.info-equip-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.info-equip-item { font-size: 12.5px; color: var(--muted); padding: 6px 10px; background: var(--elevated); border-radius: 6px; border: 1px solid var(--border); }

/* Contact */
.info-contact { font-size: 13.5px; padding: 10px 14px; background: var(--elevated); border-radius: 8px; border: 1px solid var(--border); }

.info-modal-footer {
  padding: 18px 26px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--elevated);
}

/* Mobile info modal */
@media (max-width: 820px) {
  #info-modal-overlay { padding: 16px; align-items: flex-start; }
  .info-modal-body    { padding: 16px 18px; }
  .info-modal-hdr     { padding: 16px 18px 14px; }
  .info-modal-footer  { padding: 14px 18px; }
  .info-equip-grid    { grid-template-columns: 1fr; }
  .sb-user-info       { display: none; }
}

/* ══════════════════════════════════════════════════════════
   TABBED INFO MODAL
   ══════════════════════════════════════════════════════════ */
.im-backdrop {
  width:100%; max-width:640px;
  animation: slide-up .25s ease;
}
@keyframes slide-up { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.im-modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  display:flex; flex-direction:column; max-height:88vh;
}

.im-hdr {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:20px 24px; background:var(--elevated);
  border-bottom:1px solid var(--border);
  padding-left:20px;
}
.im-hdr-name { font-family:var(--font-h); font-size:22px; font-weight:800; letter-spacing:-.5px; }
.im-hdr-sub  { font-size:10.5px; color:var(--muted); letter-spacing:1.5px; margin-top:4px; }
.im-close {
  background:none; border:none; color:var(--muted); font-size:18px;
  cursor:pointer; padding:4px 6px; border-radius:6px; transition:color .15s;
  flex-shrink:0; margin-left:10px;
}
.im-close:hover { color:var(--text); }

/* Quick cards 2x2 */
.im-quick {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border);
  border-bottom:1px solid var(--border);
}
.im-quick-card {
  background:var(--elevated); padding:14px 18px;
}
.im-quick-label { font-size:9.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:5px; }
.im-quick-value { font-family:var(--font-m); font-size:13.5px; color:var(--text); font-weight:500; }

/* Tab bar */
.im-tabs {
  display:flex; border-bottom:1px solid var(--border);
  background:var(--surface); padding:0 18px; gap:0;
  flex-shrink:0;
}
.im-tab {
  padding:12px 18px; font-size:13.5px; font-weight:600; font-family:var(--font-b);
  border:none; background:none; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.im-tab:hover  { color:var(--text); }
.im-tab.active { color:var(--amber); border-bottom-color:var(--amber); }

/* Tab panels */
.im-tab-body  { overflow-y:auto; flex:1; padding:20px 24px; }
.im-tab-panel { display:none; }
.im-tab-panel.active { display:block; }
.im-empty { font-size:13px; color:var(--dim); padding:20px 0; }

/* Equipment rows */
.im-eq-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(26,48,80,.4); }
.im-eq-row:last-child { border-bottom:none; }
.im-eq-icon  { font-size:18px; width:26px; text-align:center; flex-shrink:0; }
.im-eq-label { font-size:13.5px; color:var(--text); line-height:1.4; }

/* Rules */
.im-rule { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(26,48,80,.3); align-items:flex-start; }
.im-rule:last-child { border-bottom:none; }
.im-rule-n { font-family:var(--font-m); font-size:12px; font-weight:700; min-width:18px; margin-top:2px; flex-shrink:0; }

/* Contacts */
.im-contact-row { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(26,48,80,.3); }
.im-contact-row:last-child { border-bottom:none; }
.im-contact-icon  { font-size:18px; width:26px; text-align:center; flex-shrink:0; margin-top:1px; }
.im-contact-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:2px; }
.im-contact-value { font-family:var(--font-m); font-size:13.5px; color:var(--text); }

/* Policies */
.im-policy { padding:14px 0; border-bottom:1px solid rgba(26,48,80,.3); }
.im-policy:last-child { border-bottom:none; }
.im-policy-title { font-size:13px; font-weight:700; margin-bottom:6px; }
.im-policy-body  { font-size:13px; color:var(--muted); line-height:1.6; }

/* Footer */
.im-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:10px;
  background:var(--elevated); flex-shrink:0;
}

/* ── USER MANAGEMENT ─────────────────────────────────────── */
.u-av {
  width:34px; height:34px; border-radius:50%; border:1.5px solid;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-size:14px; font-weight:700; flex-shrink:0;
}
.tag-me { display:inline-block; padding:1px 7px; border-radius:4px; background:var(--amber-dim); color:var(--amber); font-size:10px; font-weight:700; margin-left:6px; vertical-align:middle; }
.tag-active   { background:rgba(16,185,129,.14); color:#34d399; font-size:11px; padding:3px 9px; border-radius:5px; font-weight:700; }
.tag-inactive { background:rgba(92,122,158,.14);  color:#5c7a9e; font-size:11px; padding:3px 9px; border-radius:5px; font-weight:700; }

/* User modal */
.um-backdrop {
  position:fixed; inset:0; z-index:700;
  background:rgba(4,9,20,.8);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fade-in .2s ease;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.um-modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; width:100%; max-width:560px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:slide-up .25s ease;
}
.um-hdr { display:flex; justify-content:space-between; align-items:center; padding:20px 26px 16px; border-bottom:1px solid var(--border); }
.um-title { font-family:var(--font-h); font-size:18px; font-weight:700; }
.um-body  { padding:22px 26px; }
.um-footer{ padding:16px 26px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* Role picker */
.role-grid { display:flex; gap:8px; margin-top:6px; }
.role-btn  { flex:1; padding:11px 13px; border-radius:10px; border:2px solid var(--border); background:var(--elevated); cursor:pointer; transition:all .15s; text-align:left; }
.role-btn:hover { border-color:var(--border2); }
.role-btn--sel  { border-color:var(--rc, var(--amber)); background:var(--rc-dim, var(--amber-dim)); }
.role-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.role-btn--sel .role-name { color:var(--rc, var(--amber)); }
.role-desc { font-size:11px; color:var(--muted); line-height:1.4; }

@media (max-width:820px) {
  .im-quick { grid-template-columns:1fr; }
  .im-tabs  { overflow-x:auto; }
  .im-tab   { padding:10px 14px; font-size:12.5px; white-space:nowrap; }
  .im-tab-body { padding:16px 18px; }
  .role-grid { flex-direction:column; }
}

/* ── CALENDAR CLICK POPUP ─────────────────────────────────── */
.cal-popup {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-width: 180px;
  animation: pop-in .15s ease;
  pointer-events: all;
}
@keyframes pop-in { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.cal-popup-time {
  font-family: var(--font-m);
  font-size: 13px;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cal-popup-room {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.cal-popup-btns { display: flex; gap: 7px; }
.cal-popup-btns .btn { flex: 1; justify-content: center; }

/* ── CALENDAR ORGANIZER IN BOOKING BLOCK ──────────────────── */
.cal-bk-org {
  font-size: 10px;
  opacity: .75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ── CALENDAR 30-MIN DASHED LINE ──────────────────────────── */
.cal-gl-half {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed rgba(26,48,80,0.55);
  pointer-events: none;
}

/* ── CALENDAR HOVER SLOT HIGHLIGHT ───────────────────────── */
.cal-hover-slot {
  position: absolute;
  left: 0; right: 0;
  background: rgba(245,166,35,0.07);
  border-top: 1px solid rgba(245,166,35,0.18);
  pointer-events: none;
  z-index: 0;
  transition: top .05s;
}

/* ── CALENDAR TIME LABEL COLOR FORCE ─────────────────────── */
.cal-tl {
  color: var(--muted) !important;
}

/* ── LOGO IMAGE ───────────────────────────────────────────── */
.sb-logo-img {
  display: block;
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-bottom: 2px;
  /* The logo has a white background — invert it for dark theme */
  filter: none;
}

.login-logo-img {
  display: block;
  width: 160px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 8px;
}

.tb-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* On mobile top-bar, shrink the logo */
@media (max-width: 820px) {
  .sb-logo-img { width: 80px; }
}

/* ══════════════════════════════════════════════════════════
   PERMISSIONS PAGE
   ══════════════════════════════════════════════════════════ */
.perm-note-box {
  background: var(--amber-dim);
  border: 1px solid rgba(245,166,35,.3);
  border-radius: var(--rsm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 20px;
}

.perm-table { width: 100%; border-collapse: collapse; }

.perm-group-row td {
  padding: 0;
  border-bottom: none;
}

.perm-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  padding: 18px 16px 8px;
  background: var(--elevated);
  border-top: 1px solid var(--border);
}

.perm-row { transition: background .15s; }
.perm-row:hover td { background: rgba(11,24,41,.6); }

.perm-label {
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid rgba(26,48,80,.4);
}

.perm-admin-note {
  font-size: 10px;
  color: var(--amber);
  margin-top: 4px;
  font-weight: 600;
}

/* Toggle switch */
.perm-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
}

.perm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.perm-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background .2s;
  cursor: pointer;
}

.perm-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}

.perm-toggle input:checked + .perm-slider {
  background: rgba(16,185,129,.25);
  border: 1px solid #10b981;
}

.perm-toggle input:checked + .perm-slider::before {
  transform: translateX(18px);
  background: #10b981;
}

/* ── REMEMBER ME ──────────────────────────────────────────── */
.login-remember {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 2px;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}

.remember-label:hover { color: var(--text); }

.remember-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.remember-box {
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border2);
  background: var(--elevated);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-size: 11px; font-weight: 900;
}

.remember-label input:checked ~ .remember-box {
  background: var(--amber);
  border-color: var(--amber);
  color: #07111e;
}

.remember-label input:checked ~ .remember-box::after {
  content: '✓';
}

/* ── LOCKED FORM FIELDS ───────────────────────────────────── */
.field-locked {
  font-size: 10px;
  font-weight: 600;
  color: var(--dim);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 5px;
}

input[readonly] {
  opacity: .6;
  cursor: not-allowed;
}