:root {
  --bg: #0f0f10;
  --panel: #18181a;
  --panel-2: #212123;
  --border: #2c2c2f;
  --text: #eee;
  --muted: #9a9a9f;
  --gold: #c9a63f;
  --gold-soft: #3a331c;

  --vacant-clean: #1f5c3a;
  --vacant-dirty: #6b5a1a;
  --occupied-clean: #1f4a6b;
  --occupied-dirty: #7a3b1a;
  --ooo: #5a1f1f;
  --oos: #3a3a3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.brand { font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; }
.brand .accent { color: var(--gold); }

/* ---- Coral wordmark / logo ---- */
.brand-block { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-icon { color: var(--gold); flex-shrink: 0; }
.brand-word { font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; color: var(--gold); white-space: nowrap; }
.brand-tagline { font-size: .66rem; color: var(--muted); letter-spacing: .02em; margin-left: 1px; white-space: nowrap; }
body.rtl .brand-tagline { margin-left: 0; margin-right: 1px; }

.login-card .brand-block { align-items: center; margin-bottom: 4px; }
.login-card .brand-icon { width: 40px; height: 40px; }
.login-card .brand-word { font-size: 1.4rem; white-space: normal; text-align: center; }
.login-card .brand-tagline { font-size: .74rem; margin: 2px 0 10px; }

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
  font-size: .86rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--gold); border-bottom-color: var(--gold); }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; }
.subtitle { color: var(--muted); font-size: .88rem; margin-bottom: 20px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; font-size: .82rem; color: var(--muted); }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.room-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: transform .08s ease;
  border-left: 5px solid var(--vacant-clean);
}
.room-card:hover { transform: translateY(-2px); }
.room-card .room-number { font-size: 1.05rem; font-weight: 700; }
.room-card .room-type { color: var(--muted); font-size: .78rem; margin-bottom: 8px; }
.room-card .guest { font-size: .82rem; margin-top: 6px; }
.room-card .badge {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 6px;
}

.room-card.status-vacant_clean { border-left-color: var(--vacant-clean); }
.room-card.status-vacant_dirty { border-left-color: var(--vacant-dirty); }
.room-card.status-occupied_clean { border-left-color: var(--occupied-clean); }
.room-card.status-occupied_dirty { border-left-color: var(--occupied-dirty); }
.room-card.status-out_of_order { border-left-color: var(--ooo); }
.room-card.status-out_of_service { border-left-color: var(--oos); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

.btn {
  background: var(--gold); color: #1a1608; border: none; border-radius: 6px;
  padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.btn:hover { opacity: .9; }
.btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.btn.small { padding: 4px 9px; font-size: .76rem; }

input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 8px 10px; font-size: .88rem; width: 100%;
}
label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; margin-top: 10px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 420px; max-width: 92vw; max-height: 86vh; overflow-y: auto; }
.modal h2 { margin-top: 0; font-size: 1.05rem; }
.modal .close { float: right; cursor: pointer; color: var(--muted); }
[hidden] { display: none !important; }

.status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.status-reserved, .status-vacant { background: #2a3a52; color: #8fb8ff; }
.status-checked_in, .status-occupied { background: #1f4a30; color: #7fd99a; }
.status-checked_out { background: #333; color: #aaa; }
.status-cancelled { background: #4a1f1f; color: #ff9a9a; }
.status-no_show, .status-maintenance { background: #4a3a1f; color: #ffcf7f; }

.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--panel-2);
  border: 1px solid var(--gold); color: var(--text); padding: 10px 16px; border-radius: 8px;
  font-size: .85rem; z-index: 100;
}
.toast.error { border-color: #c0392b; }

/* Task / guest-service blocks — colored, click-to-advance status */
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.task-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
  border-left: 5px solid var(--border);
}
.task-card:hover { transform: translateY(-2px); }
.task-card .task-title { font-weight: 700; font-size: .92rem; text-transform: capitalize; }
.task-card .task-sub { color: var(--muted); font-size: .78rem; margin: 3px 0 8px; }
.task-card .task-desc { font-size: .82rem; margin-bottom: 8px; }
.task-card .status-tag {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.08);
}
.task-card.status-in_progress { box-shadow: inset 0 0 0 2px var(--gold); }
.task-card.status-done { opacity: .45; }
.task-card .hint { font-size: .68rem; color: var(--muted); margin-top: 8px; }
.task-card select.hk-assign-select {
  font-size: .76rem; padding: 5px 7px; margin-bottom: 8px; cursor: pointer;
  background: var(--panel); border-color: var(--border);
}
.task-card select.hk-assign-select:hover { border-color: var(--gold); }

.hk-photos { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.hk-photo-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--border); display: block;
}
.hk-photo-row { margin-bottom: 8px; }
.hk-photo-row .btn.small { font-size: .72rem; padding: 4px 8px; }

/* Guest-service categories */
.task-card.cat-luggage { border-left-color: #6a4fb3; }
.task-card.cat-laundry { border-left-color: #1f7a7a; }
.task-card.cat-car_wash { border-left-color: #8a6a1f; }
.task-card.cat-room_service { border-left-color: #c9a63f; }
.task-card.cat-orientation { border-left-color: #1f5c3a; }
.task-card.cat-maintenance { border-left-color: #b3402f; }
.task-card.cat-other { border-left-color: #6a6a6a; }

/* Housekeeping — colored by status instead of category */
.task-card.hk-pending { border-left-color: var(--vacant-dirty); }
.task-card.hk-in_progress { border-left-color: var(--occupied-clean); }
.task-card.hk-done { border-left-color: var(--vacant-clean); }

/* Tape chart */
.tape-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.tape-grid { display: grid; }
.tape-row-label {
  position: sticky; left: 0; background: var(--panel); z-index: 2;
  padding: 8px 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: .8rem; white-space: nowrap;
}
.tape-header-cell {
  padding: 8px 4px; text-align: center; font-size: .72rem; color: var(--muted);
  border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,.03);
}
.tape-day-cell { border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,.03); min-height: 40px; }
.tape-bar {
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--text);
  border-radius: 5px; font-size: .72rem; padding: 3px 6px; margin: 3px 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.tape-bar.status-checked_in { background: #1f4a30; border-color: #4a9a6a; }
.tape-bar.status-checked_out { background: #2a2a2a; border-color: #555; }

/* ---- Auth / nav additions ---- */
.tiny-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font-size: .8rem; cursor: pointer; margin-left: 14px;
}
.tiny-btn:hover { border-color: var(--gold); }
.staff-chip { color: var(--muted); font-size: .8rem; margin-left: 14px; white-space: nowrap; }
.property-switcher { margin: 0 0 0 10px; max-width: 160px; padding: 5px 8px; font-size: .8rem; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; }

/* ---- Login page ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px; width: 360px; max-width: 100%; text-align: center;
}
.login-card .subtitle { margin-bottom: 22px; }
.login-card .btn { width: 100%; margin-top: 14px; }
.login-hint { font-size: .74rem; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.login-error { color: #ff9a9a; font-size: .82rem; margin-top: 10px; min-height: 1.2em; }

.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: .78rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.biometric-btn { display: flex; align-items: center; justify-content: center; margin-top: 8px; }

/* ---- Forms / misc ---- */
.form-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.form-row label { margin: 0; }
.badge-vip {
  display: inline-block; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold);
  border-radius: 4px; padding: 1px 7px; font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}
.charge-voided { text-decoration: line-through; opacity: .5; }
.table-wrap { overflow-x: auto; }
.qr-box { background: #fff; padding: 10px; border-radius: 8px; display: inline-block; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.stat-card .stat-label { color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
.stat-card .stat-value { font-size: 1.3rem; font-weight: 700; color: var(--gold); }

/* ---- Back office: inventory / purchasing / petty cash / accounting ---- */
.tab-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 16px; font-size: .85rem; cursor: pointer;
}
.tab-btn.active { color: var(--gold); border-color: var(--gold); background: var(--panel); }
.status-pending_approval, .status-pending, .status-draft, .status-open, .status-unpaid, .status-new { background: #2a3a52; color: #8fb8ff; }
.status-approved, .status-received, .status-inspected, .status-active, .status-completed, .status-done, .status-paid, .status-closed, .status-won, .status-accepted { background: #1f4a30; color: #7fd99a; }
.status-rejected, .status-cancelled, .status-terminated, .status-expired, .status-overdue, .status-void, .status-voided, .status-lost, .status-declined { background: #4a1f1f; color: #ff9a9a; }
.status-sent, .status-partially_received, .status-assigned, .status-in_progress, .status-partially_paid, .status-contacted, .status-viewing_scheduled, .status-quoted { background: #4a3a1f; color: #ffcf7f; }
.status-converted_to_po { background: #333; color: #aaa; }
.low-stock-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #4a1f1f; color: #ff9a9a; margin-left: 6px; }
.line-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.line-row input, .line-row select { margin: 0; }
.balance-ok { color: #7fd99a; }
.balance-bad { color: #ff9a9a; }

/* ---- RTL ---- */
body.rtl { direction: rtl; }
body.rtl .topbar nav a { margin-left: 0; margin-right: 16px; }
body.rtl .tiny-btn { margin-left: 0; margin-right: 14px; }
body.rtl .staff-chip { margin-left: 0; margin-right: 14px; }
body.rtl th, body.rtl td { text-align: right; }
body.rtl .room-card, body.rtl .task-card { border-left: none; border-right: 5px solid var(--border); }
body.rtl .room-card.status-vacant_clean, body.rtl .task-card.hk-pending { border-right-color: var(--vacant-clean); }
body.rtl .legend .swatch { margin-right: 0; margin-left: 6px; }
body.rtl .tape-row-label { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
body.rtl[dir="rtl"] * { font-family: "Tajawal", "Segoe UI", system-ui, sans-serif; }

/* ---- POS ---- */
.pos-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } }
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.pos-tile {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 10px; cursor: pointer; text-align: left; transition: transform .08s ease;
}
.pos-tile:hover { transform: translateY(-2px); border-color: var(--gold); }
.pos-tile .pos-tile-name { font-size: .88rem; font-weight: 600; }
.pos-tile .pos-tile-price { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.pos-cart-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.pos-cart-line .pos-cart-line-desc { flex: 1; }
.pos-cart-line .pos-cart-line-remove { color: #ff9a9a; cursor: pointer; font-weight: 700; }
.pos-cart-totals { margin-top: 10px; font-size: .88rem; }
.pos-cart-totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.pos-cart-totals .pos-cart-grand-total { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.pos-open-order-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }

/* ---- AI ---- */
.ai-chat-log { max-height: 360px; overflow-y: auto; margin-bottom: 12px; }
.ai-chat-msg { padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: .88rem; max-width: 80%; }
.ai-chat-msg.user { background: var(--gold); color: #1a1608; margin-left: auto; }
.ai-chat-msg.assistant { background: var(--panel-2); border: 1px solid var(--border); }
.ai-chat-input-row { display: flex; gap: 8px; }
.ai-chat-input-row input { flex: 1; }
.loyalty-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; text-transform: capitalize; }
.loyalty-bronze { background: #4a3a2a; color: #d9a066; }
.loyalty-silver { background: #3a3f4a; color: #c8d0dc; }
.loyalty-gold { background: #4a3f1a; color: #ffd76a; }
.loyalty-platinum { background: #2a3a4a; color: #a6e3ff; }

.ai-summary-box {
  background: var(--panel-2); border: 1px solid var(--gold); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px; font-size: .88rem; line-height: 1.5;
}
.severity-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.severity-low { background: #2a3a52; color: #8fb8ff; }
.severity-medium { background: #4a3a1f; color: #ffcf7f; }
.severity-high { background: #4a1f1f; color: #ff9a9a; }
body.rtl .ai-chat-msg.user { margin-left: 0; margin-right: auto; }

/* ---- Coral organized role-aware navigation ---- */
.coral-topbar { position:sticky; top:0; z-index:45; gap:22px; padding:11px 20px; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.coral-brand-link { color:inherit; text-decoration:none; flex-shrink:0; }
.coral-topbar .brand-word { text-transform:uppercase; letter-spacing:.1em; }
.coral-nav { display:flex; align-items:center; gap:5px; margin-left:auto; min-width:0; }
.coral-nav > a, .nav-menu-trigger { color:var(--muted); text-decoration:none; font:inherit; font-size:.81rem; padding:8px 10px; border:0; border-radius:8px; background:transparent; cursor:pointer; white-space:nowrap; }
.coral-nav > a:hover, .nav-menu-trigger:hover, .coral-nav > a.active { color:var(--text); background:var(--panel-2); }
.coral-nav > a.active { color:var(--gold); }
.nav-menu { position:relative; }
.nav-menu-trigger { display:flex; align-items:center; gap:5px; }
.nav-menu-trigger span { font-size:.7rem; opacity:.65; }
.nav-menu-panel { display:none; position:absolute; top:calc(100% + 7px); left:0; min-width:195px; padding:7px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 45px rgba(0,0,0,.38); }
.nav-menu:hover .nav-menu-panel, .nav-menu:focus-within .nav-menu-panel { display:grid; }
.nav-menu-panel a { color:var(--muted); text-decoration:none; padding:9px 10px; border-radius:7px; font-size:.81rem; }
.nav-menu-panel a:hover { color:var(--text); background:var(--panel-2); }
.nav-mobile-toggle { display:none; margin-left:auto; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:1.05rem; cursor:pointer; }
.nav-logout { margin-left:2px; }
.coral-nav .lang-toggle { margin-left:0; }
@media (max-width: 1050px) {
  .coral-topbar { flex-wrap:wrap; }
  .nav-mobile-toggle { display:block; }
  .coral-nav { display:none; width:100%; order:3; margin:0; padding-top:8px; border-top:1px solid var(--border); align-items:stretch; flex-direction:column; }
  .coral-nav.open { display:flex; }
  .coral-nav > a, .nav-menu-trigger { width:100%; text-align:left; justify-content:space-between; padding:10px 11px; }
  .nav-menu { width:100%; }
  .nav-menu-panel { display:grid; position:static; min-width:0; margin:2px 0 7px 10px; padding:4px 0 4px 10px; border:0; border-left:1px solid var(--border); border-radius:0; box-shadow:none; background:transparent; }
  .nav-menu-panel a { padding:8px 10px; }
  .coral-nav .property-switcher { max-width:100%; margin:5px 0; }
  .coral-nav .staff-chip { margin:7px 10px; }
  .coral-nav .tiny-btn { margin:3px 0; width:100%; }
}
@media (max-width: 560px) {
  .coral-topbar { padding:10px 14px; }
  .coral-topbar .brand-tagline { display:none; }
}

/* Override legacy topbar link spacing for the compact grouped navigation. */
.coral-topbar .coral-nav > a { margin-left:0; padding:8px 10px; border-bottom:0; }
.coral-topbar .coral-nav > a.active { border-bottom:0; }
.coral-topbar .nav-menu-panel a { margin-left:0; padding:9px 10px; border-bottom:0; }

/* ---- Mobile navigation hardening ---- */
.coral-topbar > .coral-brand-link,
.coral-topbar > .coral-brand-link:hover,
.coral-topbar > .coral-brand-link:visited { text-decoration:none !important; color:inherit !important; }
.coral-topbar > .coral-brand-link * { text-decoration:none !important; }
.coral-nav-backdrop { display:none; }

@media (max-width: 1050px) {
  .coral-topbar {
    flex-wrap:nowrap !important;
    min-height:64px;
    padding:10px 14px;
    gap:12px;
    align-items:center;
  }
  .coral-topbar .brand-block { min-width:0; }
  .coral-topbar .brand-row { gap:7px; }
  .coral-topbar .brand-word { font-size:1rem; }
  .coral-topbar .brand-tagline { font-size:.61rem; }
  .coral-topbar .nav-mobile-toggle {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    margin-left:auto;
    flex:0 0 42px;
    position:relative;
    z-index:103;
    font-size:0;
  }
  .coral-topbar .nav-mobile-toggle::before {
    content:"";
    width:19px;
    height:13px;
    border-top:2px solid currentColor;
    border-bottom:2px solid currentColor;
  }
  .coral-topbar .nav-mobile-toggle::after {
    content:"";
    position:absolute;
    width:19px;
    border-top:2px solid currentColor;
  }
  .topbar .coral-nav {
    display:flex !important;
    position:fixed !important;
    top:0;
    right:0;
    bottom:0;
    width:min(340px, 88vw) !important;
    height:100dvh;
    margin:0 !important;
    padding:76px 16px 24px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    overflow-y:auto;
    background:#141416;
    border:0 !important;
    border-left:1px solid var(--border) !important;
    box-shadow:-18px 0 50px rgba(0,0,0,.48);
    transform:translateX(105%);
    transition:transform .22s ease;
    z-index:102;
  }
  .topbar .coral-nav.open { transform:translateX(0); }
  .coral-nav-backdrop {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.58);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
    z-index:101;
  }
  .coral-nav-backdrop.open { opacity:1; visibility:visible; }
  body.coral-nav-open { overflow:hidden; }
  .topbar .coral-nav > a,
  .topbar .coral-nav .nav-menu-trigger {
    width:100%;
    margin:0 !important;
    padding:12px 13px !important;
    text-align:left;
    justify-content:space-between;
    border-radius:10px;
    font-size:.92rem;
  }
  .topbar .coral-nav > a.active { background:var(--gold-soft); color:var(--gold); }
  .topbar .coral-nav .nav-menu { width:100%; }
  .topbar .coral-nav .nav-menu-panel {
    display:none !important;
    position:static !important;
    min-width:0;
    margin:2px 0 8px 12px;
    padding:4px 0 4px 10px;
    border:0;
    border-left:1px solid var(--border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .topbar .coral-nav .nav-menu.expanded .nav-menu-panel { display:grid !important; }
  .topbar .coral-nav .nav-menu-panel a {
    margin:0 !important;
    padding:10px 11px !important;
    font-size:.87rem;
    border:0 !important;
  }
  .topbar .coral-nav .property-switcher { width:100%; max-width:none; margin:10px 0 3px; }
  .topbar .coral-nav .staff-chip {
    display:block;
    margin:13px 2px 5px !important;
    padding-top:13px;
    border-top:1px solid var(--border);
    white-space:normal;
  }
  .topbar .coral-nav .tiny-btn { width:100%; margin:2px 0 !important; min-height:44px; }
}

@media (max-width: 560px) {
  .coral-topbar .brand-tagline { display:block !important; max-width:190px; overflow:hidden; text-overflow:ellipsis; }
  main { padding-left:16px; padding-right:16px; }
}