:root {
      --primary-blue: #1a3d5c;
      --gold: #c9a962;
      --white: #ffffff;
      --off-white: #f8f9fa;
      --gray-50: #f9fafb;
      --gray-100: #f1f3f5;
      --gray-200: #e9ecef;
      --gray-300: #dee2e6;
      --gray-400: #adb5bd;
      --gray-500: #6c757d;
      --gray-600: #868e96;
      --gray-700: #495057;
      --gray-800: #343a40;
      --success: #28a745;
      --warning: #ffc107;
      --danger: #dc3545;
      --text-primary: #1a1a2e;
      --surface: #ffffff;
      --border: #e9ecef;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
      scroll-behavior: auto;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--primary-blue);
      color: var(--gray-700);
      min-height: 100vh;
    }

    /* ── Global Select Styling ───────────────────────────────── */
    select {
      appearance: none;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      background-size: 11px 7px;
      padding: 8px 32px 8px 11px;
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      font-family: inherit;
      font-size: .85rem;
      color: var(--gray-700);
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
      outline: none;
      line-height: 1.4;
    }
    select:focus {
      border-color: var(--primary-blue);
      box-shadow: 0 0 0 3px rgba(26,61,92,.09);
    }
    select:hover {
      border-color: var(--gray-400);
    }
    select option        { color: var(--gray-700); background: #fff; padding: 6px 10px; }
    select optgroup      { color: var(--primary-blue); font-weight: 700; font-size: .78rem; }
    select option:checked { background: #eff6ff; color: var(--primary-blue); font-weight: 600; }
    
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 60px;
      height: 100vh;
      background: var(--primary-blue);
      padding: 20px 0;
      z-index: 200;
      transition: width 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      will-change: width;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .sidebar:hover {
      width: 250px;
      box-shadow: 4px 0 24px rgba(0,0,0,.22);
    }
    /* Modules with no real nav items yet ("coming soon" — see switchMode() toggling
       this class) stay at the icon rail width even on hover; nothing to reveal. */
    .sidebar.no-expand:hover {
      width: 60px;
      box-shadow: none;
    }
    /* Sidebar overlays content — no margin animation, no layout reflow */
    .sidebar.collapsed {
      transform: translateX(-60px);
    }
    
    .sidebar-logo { display: none; }
    
    .sidebar-logo h2 {
      color: #ffffff;
      font-size: 1.5rem;
    }
    
    .sidebar-logo p {
      color: var(--gold);
      font-size: 0.8rem;
      margin-top: 5px;
    }

    /* ── Icon Rail: hide text when collapsed, show on hover ── */
    /* Nav items */
    .sidebar .sidebar-nav li a {
      padding: 13px 0; justify-content: center; gap: 0;
      transition: padding .2s ease, justify-content .2s ease, gap .2s ease, background .3s, color .3s, border-color .3s;
    }
    .sidebar:hover .sidebar-nav li a { padding: 15px 25px; justify-content: flex-start; gap: 12px; }
    .sidebar .sidebar-nav li a span:not(.chat-badge):not(.sidebar-nav-icon-wrap):not(.sidebar-nav-badge) {
      max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
      transition: max-width .2s ease, opacity .18s ease;
    }
    .sidebar:hover .sidebar-nav li a span:not(.chat-badge):not(.sidebar-nav-icon-wrap):not(.sidebar-nav-badge) { max-width: 220px; opacity: 1; }
    /* Nav group labels: collapse to thin divider */
    .sidebar .nav-group-label {
      font-size: 0; padding: 0; height: 1px; opacity: .25;
      background: rgba(255,255,255,.18); margin: 5px 10px;
      pointer-events: none;
      transition: font-size .2s ease, padding .2s ease, height .2s ease, opacity .2s ease, background .2s ease, margin .2s ease;
    }
    .sidebar:hover .nav-group-label {
      font-size: .65rem; padding: 10px 25px 6px; height: auto; opacity: 1;
      background: transparent; margin: 0; pointer-events: auto;
    }
    .sidebar .nav-group-label i.chevron { font-size: 0; transition: font-size .2s ease, transform .25s; }
    .sidebar:hover .nav-group-label i.chevron { font-size: .55rem; }
    /* SOS button text */
    .sidebar .sos-label {
      max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
      transition: max-width .2s ease, opacity .18s ease;
    }
    .sidebar:hover .sos-label { max-width: 200px; opacity: 1; }
    .sidebar .sos-btn { justify-content: center; }
    /* Sync badge */
    .sidebar .sidebar-sync-badge { padding: 8px; margin: 6px 8px 4px; gap: 0; justify-content: center; transition: padding .2s, margin .2s, gap .2s; }
    .sidebar:hover .sidebar-sync-badge { padding: 10px 14px; margin: 10px 12px 4px; gap: 8px; justify-content: flex-start; }
    .sidebar #hmsSyncBadgeText,
    .sidebar .sync-badge-tap {
      max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
      transition: max-width .2s ease, opacity .18s ease;
    }
    .sidebar:hover #hmsSyncBadgeText,
    .sidebar:hover .sync-badge-tap { max-width: 160px; opacity: 1; }

    /* ── Offline / Online status pills (now in tab bar) ── */
    .sidebar-offline-pill, .sidebar-online-pill {
      display:inline-flex; align-items:center; gap:4px;
      padding:3px 8px; border-radius:20px;
      font-size:.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
    }
    .sidebar-offline-pill {
      background:rgba(220,38,38,.2); border:1.5px solid rgba(220,38,38,.5); color:#fca5a5;
      animation:offlinePillPulse 2s ease-in-out infinite;
    }
    .sidebar-offline-pill i { animation:offlineIconShake 2.5s ease-in-out infinite; }
    .sidebar-online-pill {
      background:rgba(16,185,129,.15); border:1.5px solid rgba(16,185,129,.35); color:#6ee7b7;
    }
    /* Signal bars */
    .signal-bars { display:inline-flex; align-items:flex-end; gap:2px; height:13px; margin-right:2px; }
    .sb { display:inline-block; width:3px; border-radius:1px; background:rgba(255,255,255,.18); transition:background .3s; }
    .sb.sb1 { height:25%; } .sb.sb2 { height:50%; } .sb.sb3 { height:75%; } .sb.sb4 { height:100%; }
    .sig-great .sb { background:#6ee7b7; }
    .sig-good .sb1,.sig-good .sb2,.sig-good .sb3 { background:#fcd34d; }
    .sig-good .sb4 { background:rgba(255,255,255,.18); }
    .sig-weak .sb1 { background:#fca5a5; }
    .sig-weak .sb2,.sig-weak .sb3,.sig-weak .sb4 { background:rgba(255,255,255,.18); }
    .sidebar-online-pill.sig-great { background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.35); color:#6ee7b7; }
    .sidebar-online-pill.sig-good  { background:rgba(245,158,11,.15);  border-color:rgba(245,158,11,.35);  color:#fcd34d; }
    .sidebar-online-pill.sig-weak  { background:rgba(220,38,38,.15);   border-color:rgba(220,38,38,.35);   color:#fca5a5; }
    @keyframes offlinePillPulse {
      0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.4); }
      50%      { box-shadow:0 0 0 6px rgba(220,38,38,0); }
    }
    @keyframes offlineIconShake {
      0%,100% { transform:none; }
      20%      { transform:rotate(-15deg); }
      40%      { transform:rotate(15deg); }
      60%      { transform:rotate(-10deg); }
      80%      { transform:rotate(10deg); }
    }

    /* ── Offline banner pulse ── */
    #hmsOfflineBanner { animation:bannerSlideIn .35s ease; }
    @keyframes bannerSlideIn {
      from { transform:translateY(-100%); opacity:0; }
      to   { transform:translateY(0);     opacity:1; }
    }
    #hmsOfflineBanner::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
      animation:bannerShimmer 2.5s ease-in-out infinite;
    }
    @keyframes bannerShimmer {
      0%   { transform:translateX(-100%); }
      100% { transform:translateX(100%); }
    }

    /* ── Sync queue badge at sidebar bottom ── */
    .sidebar-sync-badge {
      margin:10px 12px 4px; padding:10px 14px; border-radius:10px;
      background:linear-gradient(135deg,rgba(217,119,6,.2),rgba(180,83,9,.25));
      border:1.5px solid rgba(217,119,6,.4);
      display:flex; align-items:center; gap:8px;
      animation:syncBadgePulse 2s ease-in-out infinite;
    }
    .sidebar-sync-badge i { color:#fbbf24; font-size:.85rem; }
    #hmsSyncBadgeText { color:#fde68a; font-size:.75rem; font-weight:700; flex:1; }
    .sync-badge-tap { font-size:.6rem; color:rgba(253,230,138,.6); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
    .sidebar-sync-badge:hover { background:linear-gradient(135deg,rgba(217,119,6,.35),rgba(180,83,9,.4)); }
    @keyframes syncBadgePulse {
      0%,100% { box-shadow:0 0 0 0 rgba(217,119,6,.4); }
      50%      { box-shadow:0 0 0 5px rgba(217,119,6,0); }
    }

    .sidebar-nav {
      list-style: none;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .sidebar-nav::-webkit-scrollbar { width: 5px; }
    .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
    .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

    .nav-group-label {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 25px 6px; color: var(--gold); font-size: .65rem;
      font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
      cursor: pointer; user-select: none; transition: color .2s;
    }
    .nav-group-label:hover { color: #fff; }
    .nav-group-label i.chevron { font-size: .55rem; transition: transform .25s; }
    .nav-group-label i.chevron.collapsed { transform: rotate(-90deg); }
    .nav-group-items { overflow: hidden; max-height: 600px; transition: max-height .3s ease; }
    .nav-group-items.collapsed { max-height: 0; }
    
    .sidebar-nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 25px;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .sidebar-nav li a:hover,
    .sidebar-nav li a.active {
      background: rgba(255,255,255,0.1);
      color: var(--white);
      border-left-color: var(--gold);
    }
    
    /* Notification count badges (Orders/Restock/Debts etc.) — overlaid on the icon's
       own corner rather than positioned via flex margin-left:auto against the link row.
       The old approach only made sense once the sidebar's text row was visible on
       hover; collapsed to the 60px icon rail there's no text row to anchor against,
       so the badge landed in the wrong place. Anchoring to the icon itself keeps the
       badge correctly placed in both the collapsed and expanded sidebar states. */
    .sidebar-nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sidebar-nav-badge {
      position: absolute; top: -6px; right: -8px;
      background: #dc2626; color: #fff;
      font-size: .6rem; font-weight: 700; line-height: 1;
      min-width: 16px; height: 16px; border-radius: 8px;
      padding: 0 4px;
      align-items: center; justify-content: center;
      box-shadow: 0 0 0 2px var(--primary-blue);
      z-index: 1;
      pointer-events: none;
    }
    .sidebar-nav li a i {
      width: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), color 0.2s, filter 0.2s;
      will-change: transform;
    }
    .sidebar-nav li a:hover i {
      transform: scale(1.28) translateY(-1px);
      color: var(--gold);
      filter: drop-shadow(0 0 5px rgba(201,169,98,0.55));
    }
    .sidebar-nav li a.active i {
      color: var(--gold);
      animation: sbIconPulse 2.4s ease-in-out infinite;
      filter: drop-shadow(0 0 4px rgba(201,169,98,0.45));
    }
    @keyframes sbIconPulse {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.18); }
    }
    
    .main-content {
      margin-left: 60px;
      padding: 20px;
      min-height: 100vh;
      overflow-anchor: none;
      overflow-x: clip;
      background: #f0f2f5;
    }
    .main-content.fullscreen {
      margin-left: 0;
    }

    .fullscreen-toggle {
      background: var(--gray-100); border: 1px solid var(--gray-200);
      border-radius: 8px; padding: 8px 12px; cursor: pointer;
      font-size: 0.9rem; color: var(--gray-700); transition: all 0.2s;
      display: flex; align-items: center; gap: 6px;
    }
    .fullscreen-toggle:hover {
      background: var(--gold); color: #fff; border-color: var(--gold);
    }

    .sos-btn {
      background: #dc2626; border: 1px solid #b91c1c;
      border-radius: 8px; padding: 8px 14px; cursor: pointer;
      font-size: 0.8rem; font-weight: 700; color: #fff; transition: all 0.2s;
      display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;
      animation: sosPulse 2s ease-in-out infinite;
    }
    .sos-btn:hover {
      background: #991b1b; border-color: #7f1d1d; transform: scale(1.05);
    }
    .sos-btn:disabled {
      opacity: 0.7; cursor: not-allowed; animation: none;
    }
    @keyframes sosPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
      50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
    }

    /* Theme Preset Buttons */
    .theme-preset-btn {
      display: flex; gap: 3px; padding: 8px 10px; border: 2px solid var(--gray-200);
      border-radius: 10px; background: var(--gray-100); cursor: pointer;
      transition: all 0.2s; align-items: center; position: relative;
    }
    .theme-preset-btn:hover { border-color: var(--gold); transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    .theme-preset-btn:active { transform: scale(0.95); }
    .theme-preset-btn span {
      display: block; width: 20px; height: 20px; border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.12); pointer-events: none;
    }
    body.dark-mode .theme-preset-btn { background: #21262d; border-color: #30363d; }
    body.dark-mode .theme-preset-btn:hover { border-color: var(--gold); }

    /* QR Code Generator */
    .qr-generator-card { padding: 28px; }
    .qr-gen-layout {
      display: flex; gap: 32px; align-items: flex-start;
    }
    .qr-preview-side {
      flex: 0 0 280px; display: flex; flex-direction: column; align-items: center;
    }
    .qr-preview-frame {
      width: 260px; height: 260px; border: 2px dashed var(--gray-300);
      border-radius: 12px; display: flex; align-items: center; justify-content: center;
      background: #fff; overflow: hidden;
    }
    .qr-preview-frame canvas { border-radius: 8px; }
    .qr-preview-placeholder { text-align: center; padding: 20px; }
    .qr-hotel-id-label {
      margin-top: 10px; font-size: .82rem; font-weight: 600;
      color: var(--gray-600); font-family: monospace;
      background: var(--gray-100); padding: 4px 14px; border-radius: 6px;
    }
    .qr-controls-side { flex: 1; min-width: 0; }
    @media (max-width: 768px) {
      .qr-gen-layout { flex-direction: column; align-items: center; }
      .qr-preview-side { flex: none; }
      .qr-controls-side { width: 100%; }
    }

    /* Manual Booking Modal */
    .mb-overlay {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); z-index: 2000; align-items: flex-start; justify-content: center;
      padding: 30px 15px; overflow-y: auto;
    }
    .mb-overlay.open { display: flex; }
    .mb-modal {
      background: #fff; border-radius: 12px; width: 100%; max-width: 840px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.25); animation: mbSlide 0.25s ease;
    }
    /* Room grid booking layout */
    .mb-cal-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px; }
    .mb-cal-left { border:1px solid var(--gray-200); border-radius:10px; padding:10px; background:var(--gray-50); }
    .mb-room-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; }
    .mb-grid-tile { border-radius:8px; padding:10px 8px; text-align:center; cursor:pointer; border:2px solid transparent; transition:all 0.15s; }
    .mb-grid-tile:hover { transform:scale(1.03); }
    .mb-grid-tile.available { background:#dcfce7; border-color:#86efac; }
    .mb-grid-tile.available:hover { border-color:#22c55e; box-shadow:0 2px 8px rgba(34,197,94,0.2); }
    .mb-grid-tile.booked { background:#fee2e2; border-color:#fca5a5; cursor:default; opacity:0.7; }
    .mb-grid-tile-name { font-weight:700; font-size:.78rem; color:#1a1a2e; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mb-grid-tile-price { font-size:.68rem; color:var(--gold); font-weight:600; }
    .mb-grid-tile-units { font-size:.6rem; font-weight:600; margin-top:2px; }
    .mb-grid-tile.available .mb-grid-tile-units { color:#15803d; }
    .mb-grid-tile.booked .mb-grid-tile-units { color:#dc2626; }
    .mb-cal-legend { display:flex; gap:10px; justify-content:center; margin-top:8px; font-size:.6rem; color:var(--gray-500); }
    .mb-cal-legend span { display:flex; align-items:center; gap:3px; }
    .mb-cal-legend i { width:8px; height:8px; border-radius:2px; display:inline-block; }
    .mb-cal-right { display:flex; flex-direction:column; }
    .mb-rooms-list { flex:1; overflow-y:auto; max-height:280px; display:flex; flex-direction:column; gap:6px; }
    .mb-room-card { border:1px solid rgba(201,169,98,0.3); border-radius:10px; padding:10px 12px; background:linear-gradient(135deg,#fefdf8,#fff9ec); position:relative; box-shadow:0 2px 8px rgba(201,169,98,0.1); transition:all 0.2s; }
    .mb-room-card:hover { box-shadow:0 4px 14px rgba(201,169,98,0.18); border-color:var(--gold); }
    .mb-room-card .mb-room-remove { position:absolute; top:6px; right:8px; background:none; border:none; color:var(--gray-400); cursor:pointer; font-size:.72rem; padding:3px 5px; border-radius:5px; transition:all 0.15s; }
    .mb-room-card .mb-room-remove:hover { color:#fff; background:#dc3545; }
    .mb-rc-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .mb-rc-icon { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--primary-blue),var(--gold)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; flex-shrink:0; }
    .mb-rc-info { flex:1; min-width:0; }
    .mb-room-label { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--gold); margin-bottom:1px; }
    .mb-rc-name { font-weight:700; font-size:.85rem; color:var(--primary-blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mb-rc-price { font-size:.72rem; font-weight:600; color:var(--gold); }
    .mb-rc-price span { font-weight:400; color:var(--gray-400); font-size:.62rem; }
    .mb-rc-controls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; background:rgba(26,26,46,0.03); border-radius:7px; padding:6px; }
    .mb-rc-ctrl { text-align:center; }
    .mb-rc-ctrl label { display:block; font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-400); margin-bottom:2px; }
    .mb-rc-ctrl select, .mb-rc-ctrl input { width:100%; padding:4px 3px; border:1px solid var(--gray-200); border-radius:5px; font-size:.78rem; text-align:center; font-weight:600; background:#fff; }
    .mb-rc-ctrl select:focus, .mb-rc-ctrl input:focus { border-color:var(--gold); outline:none; }
    @keyframes mbSlide { from { opacity:0; transform:translateY(-28px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

    /* ── Modal shell ── */
    .mb-overlay {
      display:none; position:fixed; inset:0;
      background:rgba(8,14,26,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      z-index:2000; align-items:flex-start; justify-content:center;
      padding:24px 16px; overflow-y:auto;
    }
    .mb-overlay.open { display:flex; }
    .mb-modal {
      background:#fff; border-radius:20px; width:100%; max-width:880px;
      box-shadow:0 32px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06);
      animation:mbSlide 0.28s cubic-bezier(.22,.68,0,1.2);
      overflow:hidden; display:flex; flex-direction:column;
    }

    /* ── Header ── */
    .mb-header {
      background:linear-gradient(135deg,#0d2137 0%,#1a3d5c 60%,#1e4d72 100%);
      padding:22px 26px 20px;
      display:flex; justify-content:space-between; align-items:center;
      border-bottom:none; position:relative; overflow:hidden;
    }
    .mb-header::after {
      content:''; position:absolute; bottom:-30px; right:-30px;
      width:130px; height:130px; border-radius:50%;
      background:rgba(201,169,98,.08); pointer-events:none;
    }
    .mb-header-left { display:flex; align-items:center; gap:14px; }
    .mb-header-icon {
      width:46px; height:46px; border-radius:13px; flex-shrink:0;
      background:linear-gradient(135deg,rgba(201,169,98,.25),rgba(201,169,98,.12));
      border:1.5px solid rgba(201,169,98,.35);
      display:flex; align-items:center; justify-content:center;
    }
    .mb-header-icon i { color:#c9a962; font-size:1.1rem; }
    .mb-header h2 { font-size:1.08rem; color:#fff; margin:0; font-weight:700; letter-spacing:.2px; }
    .mb-header-sub { font-size:.72rem; color:rgba(255,255,255,.45); margin-top:3px; }
    .mb-close {
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
      color:rgba(255,255,255,.7); width:34px; height:34px; border-radius:9px;
      font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all .15s; flex-shrink:0;
    }
    .mb-close:hover { background:rgba(255,255,255,.2); color:#fff; }

    /* ── Body + scrollable area ── */
    .mb-body { padding:22px 26px; overflow-y:auto; max-height:calc(100vh - 220px); }

    /* ── Section titles ── */
    .mb-section {
      display:flex; align-items:center; gap:9px;
      font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.9px;
      color:#1a3d5c; margin:18px 0 12px; padding-bottom:8px;
      border-bottom:2px solid #f0f4f8;
    }
    .mb-section i { color:#c9a962; font-size:.72rem; }
    .mb-section:first-child { margin-top:0; }

    /* ── Form rows + fields ── */
    .mb-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
    .mb-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:0; }
    .mb-field { margin-bottom:14px; }
    .mb-field label {
      display:block; font-size:.72rem; font-weight:700;
      color:#5a6370; margin-bottom:5px; text-transform:uppercase; letter-spacing:.6px;
    }
    .mb-field input, .mb-field select, .mb-field textarea {
      width:100%; padding:10px 13px; border:1.5px solid #e2e8f0;
      border-radius:10px; font-family:inherit; font-size:.9rem; color:#1a1a2e;
      background:#fff; transition:border-color .2s, box-shadow .2s; box-sizing:border-box;
    }
    .mb-field input:focus, .mb-field select:focus, .mb-field textarea:focus {
      border-color:#c9a962; outline:none; box-shadow:0 0 0 3px rgba(201,169,98,.15);
    }
    .mb-field textarea { resize:vertical; min-height:66px; }

    /* ── Date field with calendar icon ── */
    .mb-date-wrapper {
      display:flex; align-items:center;
      background:linear-gradient(135deg,#fffdf5,#fffbee);
      border:1.5px solid #e0d4b0; border-radius:12px;
      overflow:hidden; transition:border-color .2s, box-shadow .2s;
      height:46px;
    }
    .mb-date-wrapper:focus-within {
      border-color:#c9a962;
      box-shadow:0 0 0 3px rgba(201,169,98,.2);
    }
    .mb-date-icon-wrap {
      width:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(160deg,#c9a962,#a8893e);
      height:100%; border-right:1px solid rgba(201,169,98,.4);
    }
    .mb-date-icon-wrap i { color:#fff; font-size:.88rem; }
    .mb-date-wrapper input[type="date"] {
      flex:1; border:none !important; outline:none !important;
      background:transparent !important;
      padding:0 12px !important;
      color:#1a1a2e !important; font-weight:600; font-size:.88rem;
      height:100%; width:100%;
      box-shadow:none !important;
    }
    .mb-date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
      cursor:pointer; width:18px; height:18px; margin-right:6px;
      filter:invert(60%) sepia(50%) saturate(500%) hue-rotate(5deg) brightness(90%);
      opacity:.75; transition:opacity .15s, transform .15s;
    }
    .mb-date-wrapper input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; transform:scale(1.15); }
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-fields-wrapper { color:#1a1a2e; }
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-month-field,
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-day-field,
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-year-field { color:#1a3d5c; font-weight:700; padding:1px 2px; border-radius:3px; }
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-month-field:focus,
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-day-field:focus,
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-year-field:focus { background:#c9a962; color:#fff; }
    .mb-date-wrapper input[type="date"]::-webkit-datetime-edit-text { color:#c9a962; font-weight:800; }

    /* Date range visual bar */
    .mb-date-range-bar {
      display:flex; align-items:stretch; margin-top:12px;
      background:linear-gradient(135deg,#0d2137,#1a3d5c);
      border:none; border-radius:14px; overflow:hidden;
      box-shadow:0 4px 18px rgba(13,33,55,.25);
    }
    .mb-drb-side {
      flex:1; padding:12px 16px; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:3px;
    }
    .mb-drb-side:first-child { border-right:1px solid rgba(255,255,255,.1); }
    .mb-drb-label {
      font-size:.55rem; font-weight:800; text-transform:uppercase; letter-spacing:.9px;
      color:#c9a962; margin-bottom:2px; display:flex; align-items:center; justify-content:center; gap:4px;
    }
    .mb-drb-val { font-size:.82rem; font-weight:700; color:#fff; line-height:1.2; }
    .mb-drb-nights-block {
      width:72px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:rgba(201,169,98,.18); border-left:1px solid rgba(201,169,98,.25); border-right:1px solid rgba(201,169,98,.25);
      padding:10px 8px; gap:2px;
    }
    .mb-drb-nights-label { font-size:.52rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:#c9a962; }
    .mb-drb-nights-val { font-size:1.4rem; font-weight:900; color:#fff; line-height:1; }
    .mb-drb-nights-sub { font-size:.52rem; color:rgba(255,255,255,.55); font-weight:500; }

    /* ── Room grid ── */
    .mb-cal-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
    .mb-cal-left {
      border:1.5px solid #e8f0fb; border-radius:14px; padding:14px;
      background:linear-gradient(135deg,#f8faff,#f0f4fb);
    }
    .mb-room-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
    .mb-grid-tile {
      border-radius:11px; padding:11px 8px; text-align:center; cursor:pointer;
      border:2px solid transparent; transition:all .18s; position:relative;
    }
    .mb-grid-tile:hover { transform:translateY(-2px); }
    .mb-grid-tile.available {
      background:linear-gradient(135deg,#f0fdf4,#dcfce7);
      border-color:#86efac; box-shadow:0 2px 6px rgba(34,197,94,.1);
    }
    .mb-grid-tile.available:hover { border-color:#22c55e; box-shadow:0 4px 14px rgba(34,197,94,.22); }
    .mb-grid-tile.booked {
      background:linear-gradient(135deg,#fff0f0,#fee2e2);
      border-color:#fca5a5; cursor:default; opacity:.75;
    }
    .mb-grid-tile.selected-tile {
      background:linear-gradient(135deg,#fff9ec,#fef3c7) !important;
      border-color:#c9a962 !important; box-shadow:0 4px 14px rgba(201,169,98,.25) !important;
    }
    .mb-grid-tile-name { font-weight:800; font-size:.8rem; color:#1a1a2e; margin-bottom:3px; }
    .mb-grid-tile-price { font-size:.66rem; color:#c9a962; font-weight:700; }
    .mb-grid-tile-units { font-size:.6rem; font-weight:700; margin-top:3px; }
    .mb-grid-tile.available .mb-grid-tile-units { color:#15803d; }
    .mb-grid-tile.booked .mb-grid-tile-units { color:#dc2626; }

    .mb-cal-legend { display:flex; gap:12px; margin-top:10px; font-size:.62rem; color:#888; }
    .mb-cal-legend span { display:flex; align-items:center; gap:4px; }
    .mb-cal-legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }

    /* ── Selected rooms list ── */
    .mb-cal-right { display:flex; flex-direction:column; }
    .mb-rooms-list { flex:1; overflow-y:auto; max-height:300px; display:flex; flex-direction:column; gap:8px; }
    .mb-room-card {
      border:1.5px solid rgba(201,169,98,.25); border-radius:13px;
      padding:12px 14px; position:relative;
      background:linear-gradient(135deg,#fefdf8,#fffbf0);
      box-shadow:0 2px 10px rgba(201,169,98,.1); transition:all .2s;
    }
    .mb-room-card:hover { border-color:#c9a962; box-shadow:0 4px 16px rgba(201,169,98,.2); }
    .mb-room-card .mb-room-remove {
      position:absolute; top:8px; right:9px; background:none; border:none;
      color:#ccc; cursor:pointer; font-size:.75rem; padding:4px 6px;
      border-radius:6px; transition:all .15s;
    }
    .mb-room-card .mb-room-remove:hover { color:#fff; background:#dc3545; }
    .mb-rc-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .mb-rc-icon {
      width:36px; height:36px; border-radius:9px; flex-shrink:0;
      background:linear-gradient(135deg,#1a3d5c,#2d6a9f);
      display:flex; align-items:center; justify-content:center;
      color:#fff; font-size:.82rem; box-shadow:0 3px 8px rgba(26,61,92,.2);
    }
    .mb-rc-info { flex:1; min-width:0; }
    .mb-room-label { font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:#c9a962; margin-bottom:2px; }
    .mb-rc-name { font-weight:800; font-size:.88rem; color:#1a3d5c; }
    .mb-rc-price { font-size:.72rem; font-weight:700; color:#c9a962; }
    .mb-rc-price span { font-weight:400; color:#aaa; font-size:.62rem; }
    .mb-rc-controls {
      display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
      background:rgba(26,26,46,.03); border-radius:9px; padding:8px;
    }
    .mb-rc-ctrl { text-align:center; }
    .mb-rc-ctrl label { display:block; font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#aaa; margin-bottom:3px; }
    .mb-rc-ctrl select, .mb-rc-ctrl input {
      width:100%; padding:5px 3px; border:1.5px solid #e2e8f0;
      border-radius:7px; font-size:.78rem; text-align:center; font-weight:700;
      background:#fff; color:#1a1a2e; transition:border-color .15s;
    }
    .mb-rc-ctrl select:focus, .mb-rc-ctrl input:focus { border-color:#c9a962; outline:none; }

    /* ── Add-ons ── */
    .mb-addons { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .mb-addons label {
      display:flex; align-items:center; gap:10px; cursor:pointer;
      font-size:.85rem; font-weight:500; color:#374151;
      background:#fafafa; padding:11px 14px;
      border:1.5px solid #e2e8f0; border-radius:10px;
      text-transform:none; letter-spacing:0; transition:all .18s;
    }
    .mb-addons label:hover { border-color:#c9a962; background:#fffbf0; }
    .mb-addons input[type="checkbox"] { accent-color:#c9a962; width:16px; height:16px; flex-shrink:0; }

    /* ── Mark-paid toggles ── */
    .mb-toggles {
      display:flex; gap:20px; align-items:center; margin-bottom:14px;
      padding:12px 16px; background:#f8faff; border-radius:10px;
      border:1.5px solid #e8f0fb;
    }
    .mb-toggles label {
      display:inline-flex; align-items:center; gap:8px;
      font-size:.85rem; font-weight:600; color:#374151; cursor:pointer;
    }
    .mb-toggles input[type="checkbox"] { accent-color:#c9a962; width:16px; height:16px; }

    /* ── Booking summary ── */
    .mb-summary {
      background:linear-gradient(135deg,#f8faff,#eef4ff);
      border:1.5px solid #d4e3f8; border-radius:12px;
      padding:14px 18px; margin-bottom:14px;
      font-size:.85rem; color:#374151; line-height:1.7;
    }
    .mb-summary strong { color:#1a3d5c; }

    /* ── Footer ── */
    .mb-footer {
      padding:16px 26px; border-top:1px solid #f0f4f8;
      display:flex; justify-content:flex-end; gap:10px;
      background:#fafbfd;
    }
    .mb-footer .btn { padding:11px 24px; border-radius:10px; font-weight:700; font-size:.9rem; }
    .mb-footer .btn-primary { background:linear-gradient(135deg,#1a3d5c,#2d6a9f); color:#fff; border:none; box-shadow:0 4px 14px rgba(26,61,92,.25); }
    .mb-footer .btn-primary:hover { background:linear-gradient(135deg,#152f47,#245988); box-shadow:0 6px 18px rgba(26,61,92,.32); }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .header h1 {
      font-size: 1.5rem;
      color: var(--primary-blue);
    }
    
    .header-date {
      color: var(--gray-500);
      font-size: 0.9rem;
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }
    
    .stat-card {
      background: var(--white);
      padding: 14px 18px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .stat-card.active-filter {
      border: 2px solid var(--gold);
      background: rgba(212, 175, 55, 0.06);
    }
    
    .stat-card h3 {
      font-size: 0.75rem;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }
    
    .stat-card .value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-blue);
    }
    
    .stat-card .value.revenue {
      color: var(--success);
    }

    /* Calendar */
    .calendar-card { margin-bottom: 16px; }
    .calendar-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 18px; border-bottom: 1px solid var(--gray-200);
    }
    .calendar-header h2 { font-size: 1rem; color: var(--primary-blue); margin: 0; }
    .calendar-nav { display: flex; gap: 8px; align-items: center; }
    .calendar-nav button {
      background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 6px;
      padding: 4px 10px; cursor: pointer; font-size: 0.85rem; color: var(--gray-700);
      transition: background 0.2s;
    }
    .calendar-nav button:hover { background: var(--gray-200); }
    .calendar-nav span { font-weight: 600; font-size: 0.95rem; min-width: 140px; text-align: center; }
    .calendar-grid {
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 2px; padding: 12px 18px;
    }
    .calendar-grid .cal-day-header {
      text-align: center; font-size: 0.7rem; font-weight: 700;
      color: var(--gray-500); text-transform: uppercase; padding: 4px 0;
    }
    .calendar-grid .cal-day {
      text-align: center; padding: 8px 4px; border-radius: 6px;
      font-size: 0.82rem; cursor: default; position: relative;
      transition: background 0.15s;
    }
    .calendar-grid .cal-day.has-bookings {
      background: rgba(212, 175, 55, 0.15); color: var(--primary-blue);
      font-weight: 600; cursor: pointer;
    }
    .calendar-grid .cal-day.has-bookings:hover {
      background: rgba(212, 175, 55, 0.35);
    }
    .calendar-grid .cal-day.today {
      border: 2px solid var(--gold);
    }
    .calendar-grid .cal-day.selected {
      background: var(--gold) !important; color: #fff !important;
    }
    .calendar-grid .cal-day.other-month { color: var(--gray-300); }
    .cal-day .booking-dot {
      display: block; width: 5px; height: 5px; background: var(--gold);
      border-radius: 50%; margin: 2px auto 0;
    }
    .cal-day .booking-count {
      font-size: 0.6rem; color: var(--gold); font-weight: 700;
    }
    #calendarBookings { margin-top: 0; }
    .cal-booking-card {
      background: var(--gray-50, #f8f9fa); border-radius: 8px; padding: 10px 14px;
      margin-bottom: 8px; border-left: 3px solid var(--gold);
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
    }
    .cal-booking-card .cb-guest { font-weight: 600; color: var(--primary-blue); font-size: 0.88rem; }
    .cal-booking-card .cb-room { color: var(--gold); font-weight: 600; font-size: 0.82rem; }
    .cal-booking-card .cb-dates { font-size: 0.78rem; color: var(--gray-500); }
    .cal-booking-card .cb-status { font-size: 0.75rem; }

    /* Filter bar */
    .filter-bar {
      display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;
    }
    .filter-bar .filter-label {
      font-size: 0.82rem; color: var(--gray-500); font-weight: 600;
    }
    .filter-bar .filter-chip {
      padding: 5px 14px; border-radius: 20px; font-size: 0.78rem;
      font-weight: 600; cursor: pointer; border: 1px solid var(--gray-200);
      background: var(--white); color: var(--gray-700); transition: all 0.2s;
    }
    .filter-bar .filter-chip:hover { border-color: var(--gold); color: var(--gold); }
    .filter-bar .filter-chip.active {
      background: var(--gold); color: #fff; border-color: var(--gold);
    }
    
    .card {
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 16px;
      min-width: 0;
      overflow: hidden;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid var(--gray-200);
    }
    
    .card-header h2 {
      font-size: 1rem;
      color: var(--primary-blue);
    }
    
    .card-body {
      padding: 14px 18px;
    }
    
    .table-wrapper {
      overflow-x: auto;
      border-radius: 8px;
      -webkit-overflow-scrolling: touch;
      background: var(--white);
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
      font-size: 0.82rem;
    }
    
    th, td {
      padding: 8px 8px;
      text-align: left;
      border-bottom: 1px solid var(--gray-200);
      vertical-align: middle;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    
    th {
      background: var(--primary-blue);
      font-weight: 700;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--white);
      padding: 10px 8px;
      white-space: nowrap;
    }
    
    tr:hover {
      background: var(--off-white);
    }
    
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      word-wrap: break-word;
    }
    
    .badge-pending {
      background: rgba(255, 193, 7, 0.2);
      color: #856404;
    }
    
    .badge-confirmed {
      background: rgba(40, 167, 69, 0.2);
      color: #155724;
    }
    
    .badge-cancelled {
      background: rgba(220, 53, 69, 0.2);
      color: #721c24;
    }
    
    .badge-completed {
      background: rgba(40, 167, 69, 0.2);
      color: #155724;
    }
    
    .badge-active {
      background: rgba(40, 167, 69, 0.2);
      color: #155724;
    }
    
    .badge-inactive {
      background: rgba(108, 117, 125, 0.2);
      color: #495057;
    }

    .badge-paid {
      background: rgba(40, 167, 69, 0.2);
      color: #155724;
    }

    .badge-unpaid {
      background: rgba(220, 53, 69, 0.2);
      color: #721c24;
    }

    /* Guest ticked "I have made this payment" during booking -- not yet verified
       by staff (amount_paid is still 0), distinct from both unpaid and confirmed
       paid so it's visually obvious someone needs to check the bank statement. */
    .badge-claimed {
      background: rgba(201, 169, 98, 0.25);
      color: #8a6d1f;
    }

    .btn-confirm-pay {
      background: var(--gold);
      color: #1a1a2e;
      border: none;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 4px;
      transition: background 0.2s;
    }
    .btn-confirm-pay:hover {
      background: #d4a843;
    }
    .btn-confirm-pay:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      border-radius: 5px;
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .btn-primary {
      background: var(--primary-blue);
      color: var(--white);
    }
    
    .btn-primary:hover {
      background: #0d2a3f;
    }
    
    .btn-success {
      background: var(--success);
      color: var(--white);
    }
    
    .btn-danger {
      background: var(--danger);
      color: var(--white);
    }
    
    .btn-sm {
      padding: 5px 10px;
      font-size: 0.75rem;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--gray-700);
    }
    
    .form-control {
      width: 100%;
      padding: 10px 15px;
      border: 2px solid var(--gray-200);
      border-radius: 5px;
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color 0.3s;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary-blue);
    }
    
    .room-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    
    .room-card {
      background: var(--white);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      position: relative;
      border: 1px solid var(--gray-200);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .room-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }
    
    .room-card-image {
      position: relative;
      overflow: hidden;
    }
    
    .room-card-image img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }
    
    .room-card:hover .room-card-image img {
      transform: scale(1.05);
    }
    
    .room-card-image .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(26, 61, 92, 0.85));
      padding: 20px 18px 14px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    
    .room-card-image .overlay h3 {
      color: #fff;
      font-size: 1.15rem;
      font-weight: 700;
      margin: 0;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    
    .room-card-image .overlay .price-tag {
      background: var(--gold);
      color: var(--primary-blue);
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
      white-space: nowrap;
    }
    
    .room-status-ribbon {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      z-index: 2;
      backdrop-filter: blur(4px);
    }
    
    .ribbon-available {
      background: rgba(40, 167, 69, 0.9);
      color: #fff;
    }
    
    .ribbon-low {
      background: rgba(255, 193, 7, 0.9);
      color: #333;
    }
    
    .ribbon-soldout {
      background: rgba(220, 53, 69, 0.9);
      color: #fff;
    }

    .ribbon-inactive {
      background: rgba(108, 117, 125, 0.9);
      color: #fff;
    }

    .room-card-body {
      padding: 20px;
    }
    
    .room-availability-section {
      background: var(--gray-100);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 16px;
    }
    
    .room-availability-section .avail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .room-availability-section .avail-header span {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .room-availability-section .avail-header strong {
      font-size: 1rem;
    }
    
    .avail-bar {
      height: 8px;
      background: var(--gray-200);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .avail-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.5s ease;
    }
    
    .room-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }
    
    .room-control-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .room-control-group label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .room-control-group input {
      width: 100%;
      padding: 9px 12px;
      border: 2px solid var(--gray-200);
      border-radius: 8px;
      text-align: center;
      font-weight: 600;
      font-size: 0.95rem;
      font-family: inherit;
      color: var(--primary-blue);
      transition: border-color 0.2s;
    }
    
    .room-control-group input:focus {
      outline: none;
      border-color: var(--primary-blue);
    }
    
    .room-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      border-top: 1px solid var(--gray-200);
    }
    
    .room-card-footer .badge {
      font-size: 0.78rem;
      padding: 5px 14px;
      border-radius: 20px;
    }
    
    .room-card-footer .btn {
      border-radius: 8px;
      font-size: 0.8rem;
      padding: 7px 16px;
      font-weight: 600;
    }
    
    .room-computed-note {
      font-size: 0.72rem;
      color: var(--gray-500);
      text-align: center;
      margin-top: 6px;
      font-style: italic;
    }
    
    .rooms-summary-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .rooms-summary-item {
      background: var(--white);
      padding: 16px 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 14px;
      border-left: 4px solid var(--primary-blue);
    }
    
    .rooms-summary-item .icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }
    
    .rooms-summary-item .info h4 {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--gray-500);
      margin-bottom: 2px;
    }
    
    .rooms-summary-item .info .val {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary-blue);
    }
    
    .section {
      display: none;
    }
    
    .section.active {
      display: block;
      min-height: calc(100vh - 80px);
    }
    
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--gray-200);
      border-top-color: var(--primary-blue);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    #alertContainer {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9200;
      width: min(380px, calc(100% - 40px));
      pointer-events: none;
    }
    .alert {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      pointer-events: auto;
    }
    .alert-icon { flex-shrink: 0; width: 26px; height: 26px; }
    .alert-icon .alert-icon-fallback { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; }
    .alert-msg { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; }

    .alert-success {
      background: rgba(40, 167, 69, 0.14);
      color: #155724;
      border: 1px solid rgba(40, 167, 69, 0.3);
    }
    .alert-success .alert-icon-fallback { background: #2e7d32; }

    .alert-danger {
      background: rgba(220, 53, 69, 0.14);
      color: #721c24;
      border: 1px solid rgba(220, 53, 69, 0.3);
    }
    .alert-danger .alert-icon-fallback { background: #dc3545; }

    .alert-warning {
      background: rgba(180, 83, 9, 0.12);
      color: #7d4e00;
      border: 1px solid rgba(180, 83, 9, 0.3);
    }
    .alert-warning .alert-icon-fallback { background: #b45309; }

    .alert-info {
      background: rgba(26, 61, 92, 0.1);
      color: var(--primary-blue);
      border: 1px solid rgba(26, 61, 92, 0.25);
    }
    .alert-info .alert-icon-fallback { background: var(--primary-blue); }

    body.dark-mode .alert-warning { background: rgba(180,83,9,0.18) !important; color: #fdba74 !important; border-color: rgba(180,83,9,0.3) !important; }
    body.dark-mode .alert-info { background: rgba(127,176,221,0.14) !important; color: #7fb0dd !important; border-color: rgba(127,176,221,0.3) !important; }

    @media (max-width: 480px) {
      #alertContainer { top: 12px; left: 12px; right: 12px; width: auto; transform: none; }
    }
    
    .select-status {
      padding: 5px 8px;
      border: 2px solid var(--primary-blue);
      border-radius: 5px;
      font-size: 0.78rem;
      font-weight: 500;
      cursor: pointer;
      width: auto;
      min-width: 90px;
      transition: all 0.2s ease;
      background: white;
      font-family: inherit;
      min-height: auto;
      color: var(--primary-blue);
    }
    
    .select-status:hover {
      border-color: var(--primary-blue);
      background: var(--gray-100);
    }
    
    .select-status:focus {
      outline: none;
      border-color: var(--primary-blue);
      box-shadow: 0 0 3px rgba(26, 61, 92, 0.2);
    }
    
    .addon-badge {
      display: inline-block;
      margin: 1px 2px 1px 0;
      padding: 3px 7px;
      border-radius: 10px;
      font-size: 0.72rem;
      font-weight: 600;
      background: rgba(201, 169, 98, 0.15);
      color: var(--primary-blue);
      border: 1px solid var(--gold);
      cursor: help;
      position: relative;
      transition: all 0.2s ease;
      word-wrap: break-word;
    }
    
    .addon-badge:hover {
      background: rgba(201, 169, 98, 0.3);
      border-color: var(--gold);
      box-shadow: 0 2px 8px rgba(201, 169, 98, 0.2);
    }
    
    .pricing-row {
      font-size: 0.82rem;
      line-height: 1.3;
    }
    
    .pricing-row strong {
      color: var(--primary-blue);
      font-weight: 700;
      display: inline;
    }
    
    .pricing-label {
      font-size: 0.72rem;
      color: var(--gray-500);
      display: block;
      margin-top: 1px;
    }
    
    @media (max-width: 1200px) {
      .stats-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .room-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .rooms-summary-bar {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* 768px responsive rules moved to comprehensive mobile block at bottom of styles */

    /* Notification Bell */
    .notif-bar {
      display: flex; align-items: center; justify-content: flex-end;
      padding: 12px 25px; margin-bottom: 0; gap: 14px;
    }
    .notif-bell {
      position: relative; cursor: pointer; font-size: 1.35rem; color: var(--gray-700);
      padding: 8px; border-radius: 50%; transition: background 0.2s;
    }
    .notif-bell:hover { background: var(--gray-200); }
    .notif-bell .badge-count {
      position: absolute; top: 2px; right: 2px; background: #dc3545; color: #fff;
      font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px;
      border-radius: 9px; display: flex; align-items: center; justify-content: center;
      padding: 0 5px; line-height: 1;
    }
    .notif-bell .badge-count.hidden { display: none; }
    .notif-dropdown {
      position: absolute; top: 44px; right: 0; width: 370px; max-height: 420px;
      background: var(--white); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
      z-index: 1000; display: none; overflow: hidden;
    }
    .notif-dropdown.show { display: block; }
    .notif-dropdown-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px; border-bottom: 1px solid var(--gray-200); font-weight: 700;
    }
    .notif-dropdown-header .clear-btn {
      font-size: 0.78rem; color: var(--primary-blue); cursor: pointer; border: none;
      background: none; font-weight: 600;
    }
    .notif-dropdown-header .clear-btn:hover { text-decoration: underline; }
    .notif-list {
      max-height: 360px; overflow-y: auto; padding: 6px 0;
    }
    .notif-item {
      display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px;
      border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background 0.15s;
    }
    .notif-item:hover { background: var(--gray-100); }
    .notif-item.unread { background: #f0f7ff; }
    .notif-item .notif-icon {
      width: 36px; height: 36px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
      background: linear-gradient(135deg, #1a3d5c, #2a5a8c); color: #fff; font-size: 0.85rem;
    }
    .notif-item .notif-body { flex: 1; }
    .notif-item .notif-body .notif-title { font-weight: 600; font-size: 0.88rem; color: var(--gray-800); }
    .notif-item .notif-body .notif-desc { font-size: 0.8rem; color: var(--gray-500); margin-top: 2px; }
    .notif-item .notif-body .notif-time { font-size: 0.72rem; color: var(--gray-400); margin-top: 4px; }
    .notif-empty { text-align: center; padding: 30px 18px; color: var(--gray-400); font-size: 0.9rem; }

    @keyframes notifPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
    .notif-bell.has-new { animation: notifPulse 0.6s ease 2; }

    /* Chat toast animation */
    @keyframes chatToastSlideIn {
      from { transform: translateX(120%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes chatToastSlideOut {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(120%); opacity: 0; }
    }

    .new-tag {
      display: inline-block; background: linear-gradient(135deg, #ff6b35, #ff8c42); color: #fff;
      font-size: 0.6rem; font-weight: 800; padding: 2px 7px; border-radius: 4px;
      text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle;
      animation: newTagPulse 1.5s ease infinite;
    }
    @keyframes newTagPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .sidebar-nav a { display: flex; align-items: center; }
    .chat-badge { display: none !important; }
    .chat-badge.show { display: flex !important; }
    @keyframes chatBadgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    /* ===== Top Bar Action Icons ===== */
    .tb-icon-btn {
      width:38px; height:38px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      background:none; border:none; cursor:pointer;
      color:var(--gray-400); font-size:1.05rem;
      transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, color .15s, background .15s;
      position:relative; flex-shrink:0;
    }
    .tb-icon-btn:hover { transform:translateY(-2px); }
    .tb-icon-btn:active { transform:scale(.88) translateY(0) !important; transition:transform .1s; }
    .tb-icon-btn.tb-switch:hover  { color:#2563eb; background:rgba(37,99,235,.1);  box-shadow:0 4px 16px rgba(37,99,235,.28); }
    .tb-icon-btn.tb-screen:hover  { color:#7c3aed; background:rgba(124,58,237,.1); box-shadow:0 4px 16px rgba(124,58,237,.28); }
    .tb-icon-btn.tb-logout:hover  { color:#dc2626; background:rgba(220,38,38,.1);  box-shadow:0 4px 16px rgba(220,38,38,.28); }
    .tb-icon-btn.tb-support:hover { color:#0891b2; background:rgba(8,145,178,.1);  box-shadow:0 4px 16px rgba(8,145,178,.28); }
    .tb-icon-btn.tb-chat:hover    { color:#16a34a; background:rgba(22,163,74,.1);  box-shadow:0 4px 16px rgba(22,163,74,.28); }
    .tb-icon-btn.tb-bell:hover    { color:#d97706; background:rgba(217,119,6,.1);  box-shadow:0 4px 16px rgba(217,119,6,.28); }
    .tb-icon-btn.tb-settings:hover{ color:#4f46e5; background:rgba(79,70,229,.1);  box-shadow:0 4px 16px rgba(79,70,229,.28); }
    .tb-icon-btn.tb-bell:hover i      { animation:tbBellRing .55s ease; }
    .tb-icon-btn.tb-settings:hover i  { animation:tbCogSpin .5s ease forwards; }
    .tb-icon-btn.tb-chat:hover i      { animation:tbChatBounce .42s cubic-bezier(.34,1.56,.64,1); }
    .tb-icon-btn.tb-support:hover i   { animation:tbSupportPop .42s cubic-bezier(.34,1.56,.64,1); }
    .tb-icon-btn.tb-switch:hover i    { animation:tbSwitchFlip .45s ease; }
    .tb-icon-btn.tb-logout:hover i    { animation:tbLogoutSlide .38s ease; }
    .tb-icon-btn.tb-screen:hover i    { animation:tbExpandPop .38s cubic-bezier(.34,1.56,.64,1); }
    @keyframes tbBellRing {
      0%,100% { transform:rotate(0) }
      15% { transform:rotate(22deg) }
      35% { transform:rotate(-18deg) }
      55% { transform:rotate(12deg) }
      75% { transform:rotate(-7deg) }
    }
    @keyframes tbCogSpin { to { transform:rotate(180deg) } }
    @keyframes tbChatBounce {
      0%,100% { transform:scale(1) } 50% { transform:scale(1.28) }
    }
    @keyframes tbSupportPop {
      0%,100% { transform:scale(1) } 55% { transform:scale(1.22) }
    }
    @keyframes tbSwitchFlip {
      0% { transform:rotateY(0) }
      50% { transform:rotateY(180deg) }
      100% { transform:rotateY(360deg) }
    }
    @keyframes tbLogoutSlide {
      0%,100% { transform:translateX(0) }
      50% { transform:translateX(5px) }
    }
    @keyframes tbExpandPop {
      0%,100% { transform:scale(1) } 55% { transform:scale(1.3) }
    }

    /* ===== Horizontal Mode Tab Bar ===== */
    .mode-tab-bar { display:flex; align-items:center; flex-wrap:nowrap; background:#fff; border-bottom:2px solid #f3f4f6; padding:0 20px; margin:-20px -20px 20px; position:sticky; top:0; z-index:100; overflow:visible; }
    .mode-tab-group { display:flex; align-items:center; }
    .mode-tab { display:flex; align-items:center; gap:6px; padding:15px 16px; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; color:var(--gray-500); background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .18s,border-color .18s,background .18s; font-family:inherit; white-space:nowrap; flex-shrink:0; }
    .mode-tab i { font-size:.9rem; }
    .mode-tab.active { color:var(--primary-blue); border-bottom-color:var(--gold); }
    .mode-tab:hover:not(.active) { color:var(--gray-700); background:var(--gray-50,#f9fafb); }
    .sidebar-divider { height:1px; background:rgba(255,255,255,.08); margin:8px 20px; }
    .hms-nav { display:none; }
    .hms-nav.active { display:block; }
    .booking-nav.active { display:block; }
    .booking-nav { display:block; }

    /* ===== HMS Sections ===== */
    .hms-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:20px; min-width:0; overflow:hidden; }
    
    /* Reserve scrollbar space for all containers with overflow to prevent blinking during load */
    #staffTableWrap,
    #invTableWrap,
    #guestsTableWrap,
    #hkTableWrap,
    #paymentsTableWrap,
    #logsTableWrap,
    #folioTableWrap,
    #naHistoryWrap,
    #shiftTableWrap,
    #gsTableWrap,
    #lfTableWrap,
    .sidebar-nav,
    .modal-body,
    .lp-tabs,
    .hms-modal-overlay,
    .analytics-detail-overlay,
    .analytics-detail-body,
    .fd-panel-body,
    .s-room-list-scroll {
        scrollbar-gutter: stable;
    }
    .hms-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
    .hms-header h1 { font-size:1.4rem; color:var(--primary-blue); display:flex; align-items:center; gap:10px; }
    .hms-header h1 i { color:var(--gold); }
    .hms-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .hms-table { width:100%; border-collapse:collapse; font-size:.85rem; }
    .pmt-table { min-width:900px; }
    .hms-table thead { background:var(--primary-blue); color:#fff; }
    .hms-table th { padding:10px 14px; text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
    .hms-table td { padding:10px 14px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
    .hms-table tbody tr:hover { background:var(--gray-100); }
    .hms-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:.72rem; font-weight:600; }
    .hms-badge.green { background:#d4edda; color:#155724; }
    .hms-badge.yellow { background:#fff3cd; color:#856404; }
    .hms-badge.red { background:#f8d7da; color:#721c24; }
    .hms-badge.blue { background:#d1ecf1; color:#0c5460; }
    .hms-badge.gray { background:var(--gray-200); color:var(--gray-700); }
    .hms-badge.purple { background:#e8daef; color:#6c3483; }
    .hms-badge.gold { background:#f7ecd3; color:#8a6d1f; }
    .hms-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:3000; align-items:flex-start; justify-content:center; padding:30px 15px; overflow-y:auto; }
    .hms-modal-overlay.open { display:flex; }
    .hms-modal { background:#fff; border-radius:14px; width:100%; max-width:520px; margin:auto; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.15); display:flex; flex-direction:column; max-height:calc(100vh - 60px); }
    .hms-modal-head { background:var(--primary-blue); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    .hms-modal-head h3 { font-size:1rem; }
    .hms-modal-head .close-btn { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.3rem; cursor:pointer; }
    .hms-modal-head .close-btn:hover { color:#fff; }
    .hms-modal-body { padding:20px; overflow-y:auto; flex:1; }
    .hms-modal-body .field { margin-bottom:14px; }
    .hms-modal-body .field label { display:block; font-size:.8rem; font-weight:600; color:var(--gray-700); margin-bottom:4px; }
    .hms-modal-body .field input, .hms-modal-body .field select, .hms-modal-body .field textarea { width:100%; padding:9px 12px; border:1px solid var(--gray-200); border-radius:6px; font-family:inherit; font-size:.88rem; color:var(--gray-800); background:#fff; }
    .hms-modal-body .field textarea { min-height:60px; resize:vertical; }
    .hms-modal-body .field select {
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      cursor:pointer;
      padding-right:36px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23718096'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 10px center;
      background-size:16px;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .hms-modal-body .field select:hover { border-color:var(--gray-300); }
    .hms-modal-body .field select option { color:var(--gray-800); background:#fff; padding:8px 10px; font-size:.88rem; }
    .hms-modal-foot { padding:14px 20px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

    /* ── Room Status Modal — redesign ── */
    .rs-modal { max-width:560px; }
    .rs-modal-head { background:linear-gradient(135deg, var(--primary-blue) 0%, #0f2d47 100%); }
    .rs-room-card { display:flex; gap:14px; background:linear-gradient(135deg, var(--gray-100) 0%, #f3f1ec 100%); border:1px solid var(--gray-200); padding:14px 16px; border-radius:12px; margin-bottom:20px; }
    .rs-room-icon { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:rgba(26,61,92,.08); color:var(--primary-blue); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
    .rs-room-info { flex:1; min-width:0; }
    .rs-room-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .rs-room-number { font-size:1.05rem; font-weight:800; color:var(--gray-800); }
    .rs-rename-btn { background:none; border:1px solid var(--gray-300); color:var(--gray-600); border-radius:20px; padding:3px 10px; font-size:.7rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s ease; }
    .rs-rename-btn:hover { border-color:var(--gold); color:var(--primary-blue); background:rgba(201,169,98,.08); }
    .rs-room-meta { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:.78rem; color:var(--gray-500); }
    .rs-room-meta span i { margin-right:4px; opacity:.6; }
    .rs-rename-row { display:none; gap:6px; align-items:center; margin-top:10px; }
    .rs-rename-row input { flex:1; padding:6px 10px; border:1px solid var(--gray-300); border-radius:6px; font-size:.85rem; font-family:inherit; }
    .rs-rename-row .btn { padding:6px 12px; font-size:.8rem; }
    .rs-rename-hint { font-size:.78rem; margin-top:6px; display:none; }
    .rs-status-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:6px; }
    .rs-status-chip { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px; border:2px solid var(--gray-200); border-radius:12px; cursor:pointer; transition:all .15s ease; text-align:center; background:#fff; }
    .rs-status-chip:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.06); }
    .rs-status-chip.active { border-color:var(--gold); background:rgba(201,169,98,.07); box-shadow:0 0 0 3px rgba(201,169,98,.15); }
    .rs-chip-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
    .rs-chip-label { font-size:.76rem; font-weight:700; color:var(--gray-700); }
    body.dark-mode .rs-room-card { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.08) !important; }
    body.dark-mode .rs-room-icon { background:rgba(201,169,98,.12) !important; color:var(--gold) !important; }
    body.dark-mode .rs-room-number { color:#e6edf3 !important; }
    body.dark-mode .rs-room-meta { color:rgba(255,255,255,.5) !important; }
    body.dark-mode .rs-rename-btn { border-color:rgba(255,255,255,.15) !important; color:rgba(255,255,255,.6) !important; }
    body.dark-mode .rs-status-chip { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .rs-chip-label { color:rgba(255,255,255,.75) !important; }
    body.dark-mode .rs-status-chip.active { background:rgba(201,169,98,.1) !important; }
    @media (max-width:420px) {
      .rs-status-grid { grid-template-columns:repeat(2, 1fr); }
      .rs-room-card { flex-direction:column; }
    }

    .hms-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .inv-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
    .inv-filters select, .inv-filters input { padding:8px 12px; border:1px solid var(--gray-200); border-radius:8px; font-family:inherit; font-size:.85rem; }
    .inv-filters select { min-width:140px; }
    .inv-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
    .inv-stat { background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 1px 6px rgba(0,0,0,.05); text-align:center; }
    .inv-stat h4 { font-size:.7rem; text-transform:uppercase; letter-spacing:.3px; color:var(--gray-500); margin-bottom:4px; }
    .inv-stat .val { font-size:1.3rem; font-weight:800; color:var(--primary-blue); }
    .inv-stat .val.red { color:var(--danger); }
    .inv-room-group { margin-bottom:20px; }
    .inv-room-group-head { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:10px 10px 0 0; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
    .inv-room-group-head h3 { font-size:.9rem; font-weight:700; color:var(--primary-blue); }
    .inv-room-group-head .room-count { font-size:.75rem; color:var(--gray-500); background:var(--gray-200); padding:2px 10px; border-radius:20px; }
    .inv-room-group-body { border:1px solid var(--gray-200); border-top:none; border-radius:0 0 10px 10px; overflow:hidden; }
    .inv-room-tabs { display:flex; gap:8px; overflow-x:auto; padding:4px 0 14px; margin-bottom:4px; scrollbar-width:thin; }
    .inv-room-tabs::-webkit-scrollbar { height:3px; }
    .inv-room-tabs::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:3px; }
    .inv-room-tab { flex-shrink:0; background:#fff; border:1.5px solid var(--gray-200); border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .18s; min-width:78px; text-align:center; }
    .inv-room-tab:hover { border-color:var(--primary-blue); box-shadow:0 2px 8px rgba(26,61,92,.1); }
    .inv-room-tab.active { background:var(--primary-blue); border-color:var(--primary-blue); color:#fff; }
    .inv-room-tab-label { font-size:.78rem; font-weight:700; white-space:nowrap; }
    .inv-room-tab-sub { font-size:.62rem; opacity:.65; margin-top:1px; white-space:nowrap; }
    .inv-room-tab-count { font-size:.68rem; background:rgba(0,0,0,.08); border-radius:20px; padding:1px 7px; display:inline-block; margin-top:5px; font-weight:600; }
    .inv-room-tab.active .inv-room-tab-count { background:rgba(255,255,255,.25); }
    .inv-view-tabs { display:flex; gap:4px; background:var(--gray-100); padding:3px; border-radius:8px; }
    .inv-view-tabs button { border:none; background:none; padding:6px 14px; border-radius:6px; font-family:inherit; font-size:.8rem; font-weight:600; color:var(--gray-500); cursor:pointer; transition:all .2s; }
    .inv-view-tabs button.active { background:#fff; color:var(--primary-blue); box-shadow:0 1px 4px rgba(0,0,0,.08); }
    @keyframes pmSegIn { from { opacity:0; transform:scale(0); } to { opacity:0.9; transform:scale(1); } }
    .hms-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:24px; }
    .hms-stats-grid > *, .fd-panels > *, .na-grid > *, .stats-grid > * { min-width:0; }
    .hms-stat { background:#fff; border-radius:12px; padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,.05); text-align:center; cursor:pointer; transition:all .2s; position:relative; }
    .hms-stat:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
    /* ── Analytics tooltip ── */
    [data-tooltip] { position:relative; }
    [data-tooltip]::before { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:rgba(15,23,42,.92); color:#fff; font-size:.72rem; font-weight:500; line-height:1.45; padding:8px 12px; border-radius:8px; white-space:normal; width:220px; text-align:left; pointer-events:none; opacity:0; transition:opacity .18s,transform .18s; transform:translateX(-50%) translateY(4px); z-index:9999; box-shadow:0 4px 16px rgba(0,0,0,.25); }
    [data-tooltip]:hover::before { opacity:1; transform:translateX(-50%) translateY(0); }
    .ri-kpi[data-tooltip]::before { width:240px; }
    .hms-stat::after { content:'\f054'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:8px; right:10px; font-size:.55rem; color:var(--gray-200); transition:color .2s; }
    .hms-stat:hover::after { color:var(--gold); }
    .hms-stat h4 { font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; color:var(--gray-500); margin-bottom:6px; }
    .hms-stat .val { font-size:1.6rem; font-weight:800; }
    /* Analytics Detail Modal */
    .analytics-detail-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:4000; align-items:flex-start; justify-content:center; padding:40px 15px; overflow-y:auto; }
    .analytics-detail-overlay.open { display:flex; }
    .analytics-detail-modal { background:#fff; border-radius:14px; width:100%; max-width:960px; margin:auto; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.15); }
    .analytics-detail-head { background:var(--primary-blue); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
    .analytics-detail-head h3 { font-size:1rem; }
    .analytics-detail-head .close-btn { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.3rem; cursor:pointer; }
    .analytics-detail-head .close-btn:hover { color:#fff; }
    .analytics-detail-body { padding:20px; max-height:60vh; overflow-y:auto; }
    .analytics-detail-body table { width:100%; border-collapse:collapse; table-layout:auto; }
    .analytics-detail-body th { background:var(--gray-100); padding:10px 10px; text-align:left; font-size:.76rem; text-transform:uppercase; color:var(--gray-700); font-weight:600; white-space:nowrap; }
    .analytics-detail-body td { padding:10px 10px; border-bottom:1px solid var(--gray-100); font-size:.85rem; }
    .analytics-detail-body tr:hover { background:var(--gray-100); }
    /* Global Loading Overlay */
    .global-loading { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.7); z-index:5000; align-items:center; justify-content:center; flex-direction:column; gap:12px; overflow:hidden; }
    .global-loading.show { display:flex; overflow:hidden; }
    .global-loading .spinner-ring { width:44px; height:44px; border:4px solid var(--gray-200); border-top:4px solid var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
    .global-loading .lottie-loading-icon { display:none; width:64px; height:64px; }
    .global-loading .spinner-text { font-size:.88rem; color:var(--gray-700); font-weight:500; }
    @keyframes spin { to { transform:rotate(360deg); } }
    /* Inline btn spinner */
    .btn.loading { pointer-events:none; opacity:.7; }
    .hms-empty { text-align:center; padding:40px 20px; color:var(--gray-500); }
    .hms-empty i { font-size:2rem; display:block; margin-bottom:10px; opacity:.3; }
    .hms-actions .btn { font-size:.82rem; padding:8px 16px; }

    /* ── Payments filter bar ── */
    .pmt-filter-bar { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px 20px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
    .pmt-filter-row { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
    .pmt-filter-group { display:flex; flex-direction:column; gap:4px; }
    .pmt-filter-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--gray-500); }
    .pmt-filter-select { padding:8px 32px 8px 12px; border:1.5px solid var(--gray-300); border-radius:8px; font-size:.88rem; color:var(--gray-700); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; cursor:pointer; min-width:130px; transition:border-color .2s; }
    .pmt-filter-select:focus { outline:none; border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(26,61,91,.1); }
    .pmt-filter-select.active { border-color:var(--primary-blue); background-color:#f0f6ff; color:var(--primary-blue); font-weight:600; }
    .pmt-filter-clear { padding:8px 14px; border:1.5px solid var(--gray-300); border-radius:8px; background:#fff; color:var(--gray-500); font-size:.82rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; align-self:flex-end; }
    .pmt-filter-clear:hover { border-color:#c62828; color:#c62828; background:#fff5f5; }
    /* Guest action buttons */
    .guest-action-btns { display:flex; gap:8px; align-items:center; justify-content:center; }
    .guest-btn-edit { padding:6px 14px; border-radius:7px; border:none; background:var(--primary-blue); color:#fff; font-size:.78rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background .15s; white-space:nowrap; }
    .guest-btn-edit:hover { background:#1a527a; }
    .guest-btn-delete { padding:6px 10px; border-radius:7px; border:none; background:#fff0f0; color:#c62828; font-size:.78rem; cursor:pointer; display:flex; align-items:center; border:1.5px solid #f5c6cb; transition:all .15s; }
    .guest-btn-delete:hover { background:#c62828; color:#fff; border-color:#c62828; }

    .pmt-filter-sep { width:1px; height:36px; background:var(--gray-200); align-self:flex-end; margin:0 4px; flex-shrink:0; }
    .pmt-filter-pdf-btn { padding:8px 14px; border:1.5px solid #c62828; border-radius:8px; background:#fff; color:#c62828; font-size:.82rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; align-self:flex-end; white-space:nowrap; }
    .pmt-filter-pdf-btn:hover { background:#c62828; color:#fff; }
    .pmt-filter-pdf-btn:disabled { opacity:.6; cursor:wait; }
    .pmt-filter-summary { margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-100); display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
    .pmt-stat-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:.78rem; font-weight:700; }
    .pmt-stat-chip.total  { background:#e3f2fd; color:#1565c0; }
    .pmt-stat-chip.count  { background:#f3e5f5; color:#6a1b9a; }
    .pmt-stat-chip.method { background:#e8f5e9; color:#2e7d32; }
    .pmt-stat-chip.warn   { background:#fff3e0; color:#e65100; }
    @media(max-width:900px) { .hms-stats-grid { grid-template-columns:repeat(2, 1fr); } .hms-row { grid-template-columns:1fr; } }
    @media(max-width:600px) { .hms-stats-grid { grid-template-columns:1fr; } }

    /* Front Desk */
    .fd-panels { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px; }
    .fd-panel { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.05); overflow:hidden; }
    .fd-panel-head { padding:14px 20px; font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--gray-200); }
    .fd-panel-head.arrivals { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); color:#2e7d32; }
    .fd-panel-head.departures { background:linear-gradient(135deg,#fff3e0,#ffe0b2); color:#e65100; }
    .fd-panel-body { padding:12px; max-height:380px; overflow-y:auto; }
    .fd-card { border:1px solid var(--gray-200); border-radius:8px; padding:12px 14px; margin-bottom:8px; transition:all .2s; }
    .fd-card:hover { border-color:var(--primary-blue); box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .fd-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
    .fd-card-name { font-weight:700; font-size:.92rem; }
    .fd-card-meta { font-size:.78rem; color:var(--gray-500); display:flex; gap:12px; flex-wrap:wrap; }
    .fd-card-meta span { display:flex; align-items:center; gap:3px; }
    .fd-card-actions { margin-top:8px; display:flex; gap:6px; }
    .fd-card-actions .btn { font-size:.78rem; padding:5px 12px; }
    .fd-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.7rem; font-weight:600; }
    .fd-badge.done { background:#e8f5e9; color:#2e7d32; }
    .fd-badge.pending { background:#fff3e0; color:#e65100; }

    /* ── Front Desk v2 — tabbed layout ───────────────────────────── */
    .fd2-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
    .fd2-title { font-size:1.25rem; font-weight:800; color:var(--primary-blue); display:flex; align-items:center; gap:10px; }
    .fd2-title i { color:var(--gold); }
    .fd2-refresh { background:var(--gray-100); border:1px solid var(--gray-200); border-radius:8px; padding:7px 14px; font-size:.82rem; font-weight:600; color:var(--gray-700); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .2s; font-family:inherit; }
    .fd2-refresh:hover { background:var(--gray-200); }

    .fd2-kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
    .fd2-kpi { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px 18px; text-align:center; cursor:pointer; transition:all .2s; box-shadow:0 1px 4px rgba(0,0,0,.04); }
    .fd2-kpi:hover { border-color:var(--gold); box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }
    .fd2-kpi-val { font-size:2rem; font-weight:800; line-height:1; margin-bottom:6px; }
    .fd2-kpi-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-500); display:flex; align-items:center; justify-content:center; gap:5px; }
    .fd2-kpi-warn .fd2-kpi-val { color:#e65100; }

    .fd2-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:0; }
    .fd2-tab { background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; padding:11px 22px; font-size:.85rem; font-weight:600; color:var(--gray-500); cursor:pointer; display:flex; align-items:center; gap:7px; transition:all .2s; font-family:inherit; white-space:nowrap; }
    .fd2-tab:hover { color:var(--primary-blue); }
    .fd2-tab.fd2-tab-active { color:var(--primary-blue); border-bottom-color:var(--gold); }
    .fd2-badge { background:var(--gray-200); color:var(--gray-600); border-radius:10px; padding:1px 7px; font-size:.68rem; font-weight:700; min-width:18px; text-align:center; }
    .fd2-badge-blue { background:#e3f2fd; color:#1565c0; }
    .fd2-badge-orange { background:#fff3e0; color:#e65100; }

    .fd2-content { background:#fff; border:1px solid var(--gray-200); border-top:none; border-radius:0 0 12px 12px; }
    .fd2-pane { padding:4px 0; }
    .fd2-pane .fd-panel-body { max-height:520px; padding:14px 16px; }

    @media(max-width:900px) { .fd2-kpi-strip { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:520px) {
      .fd2-kpi-strip { grid-template-columns:repeat(2,1fr); gap:8px; }
      .fd2-kpi { padding:12px 10px; }
      .fd2-kpi-val { font-size:1.5rem; }
      .fd2-tab { padding:9px 12px; font-size:.78rem; }
    }

    /* Room Status Grid */
    .rs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin-top:16px; }
    .rs-room { border-radius:10px; padding:14px 10px; text-align:center; cursor:pointer; transition:all .2s; border:2px solid transparent; position:relative; }
    .rs-room:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
    .rs-room .room-num { font-weight:800; font-size:.95rem; margin-bottom:4px; }
    .rs-room .room-type { font-size:.7rem; text-transform:uppercase; letter-spacing:.3px; opacity:.7; }
    .rs-room .room-guest { font-size:.68rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rs-room.st-vacant { background:#e8f5e9; border-color:#a5d6a7; color:#2e7d32; }
    .rs-room.st-occupied { background:#e3f2fd; border-color:#90caf9; color:#1565c0; }
    .rs-room.st-dirty { background:#fff3e0; border-color:#ffcc80; color:#e65100; }
    .rs-room.st-clean { background:#f1f8e9; border-color:#aed581; color:#558b2f; }
    .rs-room.st-inspected { background:#e8eaf6; border-color:#9fa8da; color:#283593; }
    .rs-room.st-ooo { background:#fce4ec; border-color:#ef9a9a; color:#c62828; }
    .rs-room.st-maint { background:#f3e5f5; border-color:#ce93d8; color:#6a1b9a; }
    .rs-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--gray-200, #e5e7eb); }
    .rs-legend span { display:flex; align-items:center; gap:4px; font-size:.75rem; color:var(--gray-600); }
    .rs-legend .dot { width:12px; height:12px; border-radius:3px; }

    /* Folio */
    .folio-detail { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
    .folio-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
    .folio-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:16px; }
    .folio-summary .fs-item { text-align:center; padding:10px; background:var(--gray-100); border-radius:8px; }
    .folio-summary .fs-item .fs-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.3px; color:var(--gray-500); }
    .folio-summary .fs-item .fs-val { font-size:1.1rem; font-weight:800; margin-top:2px; }
    .folio-summary .fs-item .fs-val.danger { color:#c62828; }
    .folio-summary .fs-item .fs-val.success { color:#2e7d32; }

    /* Night Audit */
    .na-result { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-top:16px; }
    .na-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
    .na-item { padding:14px; border-radius:8px; background:var(--gray-100); }
    .na-item .na-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; color:var(--gray-500); margin-bottom:4px; }
    .na-item .na-val { font-size:1.2rem; font-weight:800; }
    .na-item.warn .na-val { color:#e65100; }
    .na-item.good .na-val { color:#2e7d32; }
    .na-item.cash .na-val { color:#2e7d32; }
    .na-item.bank .na-val { color:#1565c0; }
    #naTriggerToggle:checked + span { background:#2e7d32; }
    #naTriggerToggle:checked + span + .na-toggle-dot { transform:translateX(24px); }
    .na-item.bad .na-val { color:#c62828; }

    /* Daily Report — date bar + history header */
    .dr-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .dr-field { display:flex; align-items:center; gap:8px; }
    .dr-field-date { flex:1; min-width:200px; }
    .dr-btn-row { display:flex; gap:8px; flex-wrap:wrap; }
    .dr-autosend { margin-left:auto; }
    .dr-history-head { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--gray-200); }
    @media(max-width:700px) {
      .dr-toolbar { flex-direction:column; align-items:stretch; }
      .dr-field-date { width:100%; min-width:0; }
      .dr-field-date input[type="date"] { flex:1; max-width:none !important; width:100%; }
      .dr-btn-row { width:100%; }
      .dr-btn-row .btn { flex:1; justify-content:center; }
      .dr-autosend { margin-left:0; width:100%; justify-content:space-between; padding-top:8px; border-top:1px dashed var(--gray-200); }
      .dr-history-head { flex-direction:column; align-items:stretch; }
      .dr-history-head > div { justify-content:space-between; }
    }

    /* Tax Config — redesign */
    .tax-subtitle { font-size:.84rem; color:var(--gray-500); margin-top:2px; }
    .tax-card { padding:20px; }
    @media(max-width:700px) {
      .tax-subtitle { margin-top:8px; line-height:1.5; }
      #hms-tax .hms-header { gap:16px; }
      #hms-tax .hms-actions { width:100%; margin-top:2px; }
      #hms-tax .hms-actions .btn { flex:1; justify-content:center; }
      #hms-loyalty .hms-header { gap:16px; }
      .lyl-header-actions { margin-top:4px; }
    }
    .tax-row { display:grid; grid-template-columns:2fr 1fr 1.5fr auto auto; gap:14px; align-items:center; }
    .tax-row input, .tax-row select { padding:9px 12px; border:1px solid var(--gray-200); border-radius:8px; font-size:.85rem; font-family:inherit; color:var(--gray-800); background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
    .tax-row input:focus, .tax-row select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,98,.14); outline:none; }
    .tax-thead { padding:0 4px 10px; margin-bottom:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500); border-bottom:2px solid var(--gray-200); }
    .tax-row-card { background:var(--gray-100); border:1px solid var(--gray-200); border-radius:12px; padding:12px 14px; margin-bottom:10px; transition:border-color .15s ease, box-shadow .15s ease; }
    .tax-row-card:hover { border-color:var(--gold); box-shadow:0 4px 12px rgba(0,0,0,.05); }
    .tax-name-cell { display:flex; align-items:center; gap:10px; }
    .tax-name-icon { flex-shrink:0; width:30px; height:30px; border-radius:8px; background:rgba(201,169,98,.14); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
    .tax-name-cell input { flex:1; min-width:0; }
    .tax-rate-cell { position:relative; }
    .tax-rate-cell input { width:100%; padding-right:28px; }
    .tax-rate-suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:.82rem; font-weight:600; pointer-events:none; }
    .tax-apply-select {
      appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:32px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23718096'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 8px center; background-size:15px;
    }
    .tax-switch { position:relative; display:inline-block; width:40px; height:23px; cursor:pointer; }
    .tax-switch input { opacity:0; width:0; height:0; position:absolute; }
    .tax-switch-track { position:absolute; inset:0; background:var(--gray-300); border-radius:23px; transition:background .18s ease; }
    .tax-switch-track::before { content:''; position:absolute; height:17px; width:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); }
    .tax-switch input:checked + .tax-switch-track { background:#2e7d32; }
    .tax-switch input:checked + .tax-switch-track::before { transform:translateX(17px); }
    .tax-del-btn { flex-shrink:0; width:34px; height:34px; border-radius:9px; border:1px solid var(--gray-200); background:#fff; color:var(--gray-500); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:all .15s ease; }
    .tax-del-btn:hover { background:#c62828; border-color:#c62828; color:#fff; }
    .tax-empty { text-align:center; padding:44px 20px; }
    .tax-empty-icon { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:rgba(201,169,98,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
    .tax-empty p { color:var(--gray-500); margin-bottom:16px; font-size:.9rem; }
    body.dark-mode .tax-row-card { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.08) !important; }
    body.dark-mode .tax-thead { border-bottom-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.5) !important; }
    body.dark-mode .tax-row input, body.dark-mode .tax-row select { background:#0d1117 !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .tax-del-btn { background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.5) !important; }
    body.dark-mode .tax-subtitle { color:rgba(255,255,255,.45) !important; }

    /* ── Staff Shift Scheduling — redesign ── */
    .sh-subtitle { font-size:.84rem; color:var(--gray-500); margin-top:2px; }
    .sh-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
    .sh-date-nav { display:flex; align-items:center; gap:2px; background:#fff; border:1px solid var(--gray-200); border-radius:10px; padding:4px; }
    .sh-nav-btn { width:32px; height:32px; border:none; background:transparent; border-radius:7px; color:var(--gray-600); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:all .15s ease; }
    .sh-nav-btn:hover { background:var(--gray-100); color:var(--primary-blue); }
    .sh-date-nav input[type=date] { border:none; padding:6px 8px; font-family:inherit; font-size:.85rem; color:var(--gray-800); background:transparent; }
    .sh-date-nav input[type=date]:focus { outline:none; }
    .sh-all-btn { border:none; background:var(--gray-100); color:var(--gray-600); font-size:.78rem; font-weight:600; padding:6px 14px; border-radius:7px; cursor:pointer; margin-left:4px; transition:all .15s ease; }
    .sh-all-btn:hover { background:var(--gray-200); color:var(--primary-blue); }
    .sh-view-toggle { display:flex; background:var(--gray-100); border-radius:10px; padding:4px; gap:2px; }
    .sh-view-toggle button { border:none; background:transparent; padding:7px 14px; border-radius:7px; font-size:.8rem; font-weight:600; color:var(--gray-600); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s ease; }
    .sh-view-toggle button.active { background:#fff; color:var(--primary-blue); box-shadow:0 1px 4px rgba(0,0,0,.1); }
    .sh-stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
    .sh-stat { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:12px 18px; min-width:140px; }
    .sh-stat-icon { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
    .sh-stat-val { display:block; font-size:1.3rem; font-weight:800; color:var(--primary-blue); line-height:1.1; }
    .sh-stat-label { display:block; font-size:.74rem; color:var(--gray-500); font-weight:600; }
    .sh-stat-active { border-color:#a5d6a7; background:#f3faf3; }
    .sh-top-staff { font-size:.8rem; color:var(--gray-600); margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .sh-staff-chip { background:var(--gray-100); border-radius:6px; padding:3px 9px; margin-right:6px; }
    .sh-avatar { width:26px; height:26px; border-radius:50%; background:rgba(26,61,92,.1); color:var(--primary-blue); font-size:.68rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
    .sh-staff-cell { display:flex; align-items:center; gap:8px; }
    .sh-actions { display:flex; gap:5px; white-space:nowrap; }
    .sh-action-btn { width:28px; height:28px; border:none; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; color:#fff; transition:transform .12s ease, opacity .12s ease; }
    .sh-action-btn:hover { transform:translateY(-1px); opacity:.9; }
    .sh-act-start { background:#1976d2; }
    .sh-act-note { background:#ff9800; }
    .sh-act-complete { background:#2e7d32; }
    .sh-act-delete { background:#e53935; }
    .sh-empty { text-align:center; padding:44px 20px; }
    .sh-empty-icon { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:rgba(201,169,98,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
    .sh-empty p { color:var(--gray-500); margin-bottom:16px; font-size:.9rem; }
    /* Week calendar */
    .sh-cal-wrap { overflow-x:auto; border-radius:10px; }
    .sh-cal { width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }
    .sh-cal-corner { background:var(--gray-100); color:var(--gray-500); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:10px 14px; text-align:left; border-bottom:2px solid var(--gray-200); min-width:140px; }
    .sh-cal-day { background:var(--primary-blue); color:#fff; text-align:center; padding:9px 6px; }
    .sh-cal-dayname { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.75; }
    .sh-cal-daynum { display:block; font-size:1.05rem; font-weight:800; margin-top:1px; }
    .sh-cal-today { background:var(--gold); }
    .sh-cal-staff { padding:10px 14px; font-weight:700; font-size:.85rem; color:var(--gray-800); border-bottom:1px solid var(--gray-100); border-right:1px solid var(--gray-100); background:#fff; white-space:nowrap; }
    .sh-cal-staff .sh-avatar { margin-right:8px; }
    .sh-cal-cell { padding:6px; vertical-align:top; border-bottom:1px solid var(--gray-100); border-right:1px solid var(--gray-100); min-width:96px; background:#fff; }
    .sh-cal-today-col { background:rgba(201,169,98,.05); }
    .sh-cal-off { display:block; text-align:center; padding:6px; color:var(--gray-200); font-size:.8rem; }
    .sh-cal-chip { display:flex; align-items:center; gap:5px; border:1px solid; border-radius:7px; padding:4px 7px; font-size:.72rem; font-weight:700; margin-bottom:3px; white-space:nowrap; cursor:default; }
    .sh-cal-chip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .sh-cal-empty { padding:40px 20px; text-align:center; color:var(--gray-400); }
    .sh-cal-empty i { font-size:1.6rem; display:block; margin-bottom:8px; opacity:.4; }
    body.dark-mode .sh-date-nav { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .sh-date-nav input[type=date] { color:#e6edf3 !important; }
    body.dark-mode .sh-nav-btn { color:rgba(255,255,255,.6) !important; }
    body.dark-mode .sh-nav-btn:hover { background:rgba(255,255,255,.08) !important; }
    body.dark-mode .sh-all-btn { background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.6) !important; }
    body.dark-mode .sh-view-toggle { background:rgba(255,255,255,.05) !important; }
    body.dark-mode .sh-view-toggle button { color:rgba(255,255,255,.55) !important; }
    body.dark-mode .sh-view-toggle button.active { background:#21262d !important; color:#e6edf3 !important; }
    body.dark-mode .sh-stat { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .sh-stat-val { color:#e6edf3 !important; }
    body.dark-mode .sh-stat-active { background:rgba(46,125,50,.1) !important; border-color:rgba(46,125,50,.35) !important; }
    body.dark-mode .sh-staff-chip { background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.75) !important; }
    body.dark-mode .sh-subtitle { color:rgba(255,255,255,.45) !important; }
    body.dark-mode .sh-cal-corner { background:#161b22 !important; color:rgba(255,255,255,.5) !important; border-bottom-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .sh-cal-staff, body.dark-mode .sh-cal-cell { background:#0d1117 !important; border-color:rgba(255,255,255,.06) !important; color:#e6edf3 !important; }
    body.dark-mode .sh-cal-today-col { background:rgba(201,169,98,.08) !important; }
    body.dark-mode .sh-empty p { color:rgba(255,255,255,.5) !important; }
    @media(max-width:600px) {
      .sh-toolbar { flex-direction:column; align-items:stretch; }
      .sh-view-toggle { justify-content:center; }
    }

    /* ── Document Storage — redesign ── */
    .doc-subtitle { font-size:.84rem; color:var(--gray-500); margin-top:2px; }
    .doc-filter-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
    .doc-filter-bar label { font-size:.85rem; font-weight:600; color:var(--gray-700); }
    .doc-filter-select {
      padding:8px 34px 8px 12px; border:1px solid var(--gray-200); border-radius:8px; font-family:inherit; font-size:.85rem;
      appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; color:var(--gray-800); background-color:#fff;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23718096'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 10px center; background-size:15px;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .doc-filter-select:hover { border-color:var(--gray-300); }
    .doc-filter-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,98,.14); outline:none; }
    .doc-filter-select option { color:var(--gray-800); background:#fff; padding:8px 10px; font-size:.85rem; }
    .doc-count { font-size:.78rem; font-weight:600; color:var(--gray-500); margin-bottom:12px; }
    .doc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
    .doc-card { display:flex; flex-direction:column; border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; background:#fff; transition:all .15s ease; }
    .doc-card:hover { border-color:var(--gold); box-shadow:0 8px 20px rgba(0,0,0,.07); transform:translateY(-2px); }
    .doc-card-thumb { height:84px; display:flex; align-items:center; justify-content:center; font-size:2rem; }
    .doc-card-body { padding:12px 14px; flex:1; }
    .doc-card-name { font-weight:700; font-size:.86rem; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .doc-card-meta { font-size:.72rem; color:var(--gray-400); margin-top:2px; }
    .doc-card-tags { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
    .doc-card-guest { font-size:.76rem; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .doc-card-guest i { margin-right:3px; opacity:.6; }
    .doc-card-date { font-size:.7rem; color:var(--gray-400); margin-top:8px; }
    .doc-card-actions { display:flex; gap:6px; padding:10px 14px; border-top:1px solid var(--gray-100); }
    .doc-act-btn { flex:1; height:30px; border:none; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; color:#fff; text-decoration:none; transition:opacity .12s ease, transform .12s ease; }
    .doc-act-btn:hover { opacity:.88; transform:translateY(-1px); }
    .doc-act-view { background:var(--primary-blue); }
    .doc-act-dl { background:#059669; }
    .doc-act-del { background:#e53935; flex:0 0 30px; }
    .doc-empty { text-align:center; padding:44px 20px; }
    .doc-empty-icon { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:rgba(201,169,98,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
    .doc-empty p { color:var(--gray-500); margin-bottom:16px; font-size:.9rem; }
    body.dark-mode .doc-subtitle { color:rgba(255,255,255,.45) !important; }
    body.dark-mode .doc-filter-bar label { color:rgba(255,255,255,.7) !important; }
    body.dark-mode .doc-filter-select { background-color:#0d1117 !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .doc-count { color:rgba(255,255,255,.5) !important; }
    body.dark-mode .doc-card { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
    body.dark-mode .doc-card-name { color:#e6edf3 !important; }
    body.dark-mode .doc-card-actions { border-top-color:rgba(255,255,255,.08) !important; }
    body.dark-mode .doc-empty p { color:rgba(255,255,255,.5) !important; }

    @media(max-width:900px) { .fd-panels { grid-template-columns:1fr; } .rs-grid { grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); } }

    /* ====== MAINTENANCE BROADCAST TICKER ====== */
    .maintenance-ticker {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      height: 40px;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      background: #1a3d5c;
      border-bottom: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 2px 12px rgba(0,0,0,.22);
      animation: bannerSlideDown .3s cubic-bezier(.34,1.2,.64,1);
    }
    .maintenance-ticker.feature-broadcast {
      background: linear-gradient(90deg, #1a3d5c 0%, #1e4976 50%, #1a3d5c 100%);
    }
    @keyframes bannerSlideDown {
      from { transform: translateY(-100%); opacity: 0; }
      to   { transform: translateY(0);     opacity: 1; }
    }
    .ticker-badge {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px 0 12px;
      background: rgba(255,255,255,.07);
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .ticker-icon {
      flex-shrink: 0;
      font-size: .78rem;
      color: #f9d472;
    }
    .maintenance-ticker.feature-broadcast .ticker-icon { color: #93c5fd; }
    .ticker-label {
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .7px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 20px;
      background: rgba(249,212,114,.18);
      color: #f9d472;
      white-space: nowrap;
    }
    .maintenance-ticker.feature-broadcast .ticker-label {
      background: rgba(147,197,253,.18);
      color: #93c5fd;
    }
    .ticker-track {
      flex: 1;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .ticker-inner {
      display: inline-block;
      white-space: nowrap;
      animation: marqueeScroll 24s linear infinite;
      will-change: transform;
    }
    @keyframes marqueeScroll {
      from { transform: translateX(100vw); }
      to   { transform: translateX(-100%); }
    }
    .ticker-text {
      display: inline-block;
      font-size: .85rem;
      font-weight: 600;
      color: rgba(255,255,255,.92);
      white-space: nowrap;
    }
    #tickerText2 { display: none; }
    .maintenance-ticker.feature-broadcast .ticker-text { color: #e0f2ff; }

    /* Fix layout: sidebar/content/btn are INSIDE #adminPanel, use descendant selectors */
    #adminPanel.maintenance-ticker-active .sidebar { top: 40px !important; height: calc(100vh - 40px) !important; }
    #adminPanel.maintenance-ticker-active .main-content { padding-top: 40px; }
    #adminPanel.maintenance-ticker-active .mode-tab-bar { top: 40px; }
    #adminPanel.maintenance-ticker-active .mobile-menu-btn { top: 52px !important; }

    body.dark-mode .maintenance-ticker { background: #0f1f2e; border-bottom-color: rgba(255,255,255,.07); }
    body.dark-mode .maintenance-ticker.feature-broadcast { background: linear-gradient(90deg, #0d1f2d 0%, #0f2a3f 50%, #0d1f2d 100%); }
    body.dark-mode .maintenance-ticker .ticker-text { color: #f9d472; }
    body.dark-mode .maintenance-ticker.feature-broadcast .ticker-text { color: #93c5fd; }
    body.dark-mode .maintenance-ticker .ticker-label { background: rgba(201,169,98,.18); color: #f9d472; }
    body.dark-mode .maintenance-ticker .ticker-icon { color: #f9d472; }
    body.dark-mode .maintenance-ticker.feature-broadcast .ticker-icon { color: #93c5fd; }

    @media (max-width: 768px) {
      #adminPanel.maintenance-ticker-active .mobile-menu-btn { top: 54px !important; }
    }

    /* ====== MOBILE HAMBURGER BUTTON ====== */
    .mobile-menu-btn {
      display:none; position:fixed; top:12px; left:12px; z-index:201;
      width:42px; height:42px; border-radius:10px; border:none;
      background:var(--primary-blue); color:#fff; font-size:1.2rem;
      cursor:pointer; align-items:center; justify-content:center;
      box-shadow:0 2px 10px rgba(0,0,0,.2); transition:background .2s;
    }
    .mobile-menu-btn:hover { background:#0d2a3f; }

    /* ====== MOBILE OVERLAY ====== */
    .sidebar-overlay {
      position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,.55); z-index:190;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .28s ease, visibility .28s ease;
    }
    .sidebar-overlay.active { opacity:1; visibility:visible; pointer-events:auto; }

    /* Sidebar mobile-only header (hidden on desktop) */
    .sb-mobile-hdr {
      display:none; align-items:center; justify-content:space-between;
      padding:13px 14px 11px; border-bottom:1px solid rgba(255,255,255,.1);
      flex-shrink:0; min-width:0; gap:10px;
    }
    .sb-mobile-close {
      width:34px; height:34px; border-radius:9px; flex-shrink:0;
      border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);
      color:#fff; font-size:.95rem; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .15s;
    }
    .sb-mobile-close:hover { background:rgba(255,255,255,.2); }

    /* Sidebar module + settings switcher (mobile only, above hotel header) */
    .sb-mode-switcher {
      display:none; align-items:center; gap:3px;
      padding:9px 10px; flex-shrink:0;
      background:rgba(0,0,0,.18); border-bottom:1px solid rgba(255,255,255,.08);
    }
    .sb-mode-btn {
      width:36px; height:36px; border-radius:9px; border:none; flex-shrink:0;
      background:transparent; color:rgba(255,255,255,.5); font-size:.88rem;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background .15s, color .15s;
    }
    .sb-mode-btn:hover  { background:rgba(255,255,255,.12); color:#fff; }
    .sb-mode-btn.active { background:rgba(201,169,98,.22); color:var(--gold); }

    /* ====== COMPREHENSIVE MOBILE RESPONSIVE ====== */
    @media (max-width: 768px) {
      /* Hamburger: inline inside the tab bar (not fixed) */
      .mobile-menu-btn {
        display:flex;
        position:static !important;
        top:auto !important; left:auto !important;
        z-index:1 !important;
        width:38px; height:38px;
        flex-shrink:0;
        box-shadow:none !important;
        margin-right:2px;
      }

      /* Sidebar: full overlay drawer on mobile */
      .sb-mobile-hdr { display:flex; }
      .sidebar {
        width:85vw !important; max-width:320px !important;
        overflow-x:hidden !important; overflow-y:auto !important;
        will-change:transform !important;
        transform:translateX(-110%) !important; z-index:200;
        padding-top:0;
        transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease !important;
        box-shadow:none !important;
        left:0 !important; top:0 !important;
      }
      .sidebar:hover { width:85vw !important; max-width:320px !important; box-shadow:none !important; }
      .sidebar.mobile-open {
        transform:translateX(0) !important;
        box-shadow:6px 0 32px rgba(0,0,0,.4) !important;
      }
      .sidebar.mobile-open:hover { box-shadow:6px 0 32px rgba(0,0,0,.4) !important; }
      .sidebar.collapsed { transform:translateX(-110%) !important; }
      .sidebar-logo h2, .sidebar-logo p { display:block; }

      /* Force full-text expanded state — override desktop icon-only rules */
      .sidebar .sidebar-nav li a span:not(.chat-badge) {
        max-width:200px !important; opacity:1 !important; overflow:visible !important;
      }
      .sidebar .sidebar-nav li a {
        padding:14px 20px !important; justify-content:flex-start !important; gap:14px !important;
      }
      .sidebar .nav-group-label {
        font-size:.65rem !important; padding:10px 20px 6px !important;
        height:auto !important; opacity:1 !important;
        background:transparent !important; margin:0 !important;
        pointer-events:auto !important;
      }
      .sidebar .nav-group-label i.chevron { font-size:.52rem !important; }
      .sidebar .sos-label { max-width:200px !important; opacity:1 !important; }
      .sidebar .sos-btn { justify-content:flex-start !important; padding:8px 20px !important; }

      /* Main content full width */
      .main-content { margin-left:0 !important; padding:54px 12px 20px 12px; }
      .main-content.fullscreen { margin-left:0; }

      /* Mode tab bar: fixed at top so it always stays there regardless of parent layout */
      .mode-tab-bar {
        position:fixed !important;
        top:0 !important; left:0 !important; right:0 !important;
        width:100% !important; margin:0 !important;
        padding:0 4px 0 6px !important;
        min-height:52px; height:52px;
        z-index:150;
        overflow-x:hidden;
        gap:2px;
      }
      /* The top bar above being a fixed, height-capped, overflow-clipped box
         traps the "More" dropdown (an absolutely-positioned descendant) inside
         its own 52px-tall clipping box -- found 2026-08-29 investigating why
         Switch Hotel/Staff Messages were unreachable on mobile even after
         re-enabling the trigger. Escape that ancestor entirely with a fixed,
         viewport-anchored position instead of relying on the bar's box. */
      .tb-overflow-panel {
        position: fixed !important;
        top: 54px !important;
        right: 6px !important;
      }
      /* Hide hotel branding from top bar (lives in sidebar on mobile) */
      #modeTabBar #sidebarLogo,
      #modeTabBar #sidebarHotelName { display:none !important; }
      /* ── Mode tab pill group: frosted pill container ── */
      .mode-tab-group {
        background:rgba(0,0,0,.07);
        border-radius:12px;
        padding:3px;
        gap:1px;
        flex-shrink:0;
      }
      body.dark-mode .mode-tab-group { background:rgba(255,255,255,.1); }

      /* Mode tabs inside pill: icon-only, compact.
         No !important on display so inline style="display:none" still hides inactive module tabs. */
      .mode-tab {
        display:flex;
        padding:0 !important;
        width:34px; height:34px;
        border-radius:9px;
        border-bottom:none !important;
        margin-bottom:0 !important;
        font-size:.9rem !important;
        gap:0 !important;
        justify-content:center;
        flex-shrink:0;
        transition:background .18s, color .18s !important;
      }
      .mode-tab span { display:none !important; }
      /* Active tab: gold-tinted chip inside the pill */
      .mode-tab.active {
        background:rgba(201,169,98,.28) !important;
        color:var(--primary-blue) !important;
        border-radius:9px !important;
        box-shadow:0 1px 4px rgba(0,0,0,.12) !important;
      }
      body.dark-mode .mode-tab.active {
        background:rgba(201,169,98,.3) !important;
        color:var(--gold) !important;
      }
      .mode-tab:hover:not(.active) { background:rgba(0,0,0,.06) !important; }
      /* Hide action buttons that move to sidebar. NOTE: #hotelSwitcherWrap was
         removed from this list 2026-08-29 -- unlike Support/Chat, Switch Hotel
         has no sidebar equivalent at all, so hiding it here left it completely
         unreachable on mobile. It now lives in the "More" overflow menu
         instead (re-enabled on mobile the same day, see the .tb-overflow-*
         rules above) -- the one place it's actually still reachable. */
      .tb-screen,
      #topBarSupportIndicator,
      #topBarChatIndicator { display:none !important; }
      /* Hide network signal entirely on mobile */
      #hmsOnlinePill,
      #hmsOfflinePill { display:none !important; }
      /* Collapse the left logo/signal container (logo+name already hidden) */
      #modeTabBar > div:first-child { display:none !important; }

      /* Notification bar */
      .notif-bar { padding:0 2px; gap:1px; }

      /* Stats grids */
      .stats-grid { grid-template-columns:repeat(2, 1fr) !important; gap:10px; }
      .hms-stats-grid { grid-template-columns:repeat(2, 1fr) !important; }
      .inv-stats { grid-template-columns:repeat(2, 1fr) !important; }

      /* Stat cards smaller */
      .stat-card { padding:14px; }
      .stat-card h3 { font-size:1.2rem; }
      .stat-card p { font-size:.7rem; }

      /* Cards */
      .card { border-radius:10px; }
      .card-header { padding:12px 14px; font-size:.85rem; flex-wrap:wrap; gap:8px; }
      .card-body { padding:14px; }

      /* HMS Cards */
      .hms-card { border-radius:10px; }

      /* Room grid */
      .room-grid { grid-template-columns:1fr !important; }

      /* Buttons — larger touch targets */
      .btn { padding:10px 16px; font-size:.85rem; min-height:42px; }
      .btn-sm { padding:8px 12px; font-size:.8rem; min-height:36px; }
      .hms-actions .btn { padding:8px 14px; font-size:.8rem; }

      /* Mode tab bar — compact on tablet */
      .mode-tab { padding:9px 12px; font-size:.76rem; }

      /* Tables — ensure horizontal scroll */
      .hms-table { font-size:.78rem; min-width:0 !important; }
      .hms-table th, .hms-table td { padding:8px 10px; }

      /* Room controls */
      .room-controls { grid-template-columns:1fr; }
      .rooms-summary-bar { grid-template-columns:1fr; }

      /* Tax rows stack */
      .tax-row { grid-template-columns:1fr 1fr; gap:8px; }

      /* HMS row stack */
      .hms-row { grid-template-columns:1fr !important; }

      /* ═══ Responsive Table → Card Layout ═══ */
      .table-wrapper table,
      .hms-table {
        border: 0;
      }
      .table-wrapper thead,
      .hms-table thead {
        display: none;
      }
      .table-wrapper tbody tr,
      .hms-table tbody tr {
        display: block;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 1px 6px rgba(0,0,0,.05);
      }
      body.dark-mode .table-wrapper tbody tr,
      body.dark-mode .hms-table tbody tr {
        background: #161b22 !important;
        border-color: rgba(255,255,255,.08) !important;
      }
      .table-wrapper tbody td,
      .hms-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0 !important;
        border-bottom: 1px solid var(--gray-100) !important;
        font-size: .82rem;
        text-align: right;
      }
      body.dark-mode .table-wrapper tbody td,
      body.dark-mode .hms-table tbody td {
        border-bottom-color: rgba(255,255,255,.06) !important;
      }
      .table-wrapper tbody td:last-child,
      .hms-table tbody td:last-child {
        border-bottom: none !important;
      }
      .table-wrapper tbody td::before,
      .hms-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-600);
        text-align: left;
        padding-right: 12px;
        flex-shrink: 0;
        font-size: .78rem;
      }
      body.dark-mode .table-wrapper tbody td::before,
      body.dark-mode .hms-table tbody td::before {
        color: rgba(255,255,255,.5) !important;
      }

      /* Section headers */
      .hms-header h1 { font-size:1.1rem; }

      /* Front desk panels */
      .fd-panels { grid-template-columns:1fr; }

      /* Manual booking modal */
      .mb-modal { width:95% !important; padding:16px !important; max-height:90vh; }
      .mb-row-3 { grid-template-columns:repeat(2,1fr) !important; }
      .mb-cal-layout { grid-template-columns:1fr !important; }
      .mb-rooms-list { max-height:200px !important; }

      /* HMS modal */
      .hms-modal { width:95% !important; max-width:95% !important; padding:16px !important; }

      /* Search / filter inputs */
      input[type="text"], input[type="email"], input[type="number"], input[type="date"], 
      input[type="search"], select, textarea {
        font-size:16px !important; /* prevents iOS zoom */
      }

      /* Fullscreen toggle hide on mobile */
      .fullscreen-toggle { display:none; }

      /* Night audit stats */
      .na-grid { grid-template-columns:repeat(2, 1fr) !important; }

      /* ═══ Notification dropdown — fit mobile ═══ */
      .notif-dropdown { width:calc(100vw - 24px); max-width:370px; right:-60px; }
      .notif-item { padding:10px 14px; gap:10px; }

      /* ═══ Chat — stack conversation list above chat window ═══ */
      #chatContainer { flex-direction:column !important; height:auto !important; min-height:unset !important; max-height:none !important; }
      #chatConvoList { width:100% !important; max-height:280px !important; border-right:none !important; border-bottom:1px solid #e5e7eb !important; }
      #chatWindow { min-height:400px; }
      #chatReplyArea { padding:10px 12px !important; }
      #chatReplyArea input { font-size:16px !important; }

      /* ═══ Calendar — tighter on mobile ═══ */
      .calendar-grid { padding:8px 6px; gap:1px; }
      .calendar-grid .cal-day { padding:6px 2px; font-size:.75rem; }
      .calendar-grid .cal-day-header { font-size:.6rem; }
      .calendar-header { flex-wrap:wrap; gap:8px; }
      .calendar-nav button { padding:6px 10px; font-size:.78rem; }
      .cal-booking-card { flex-direction:column; align-items:flex-start; padding:10px 12px; }

      /* ═══ Analytics detail modal ═══ */
      .analytics-detail-overlay { padding:10px 8px; }
      .analytics-detail-modal { max-width:100%; border-radius:10px; }
      .analytics-detail-body { padding:12px; }
      .analytics-detail-body th, .analytics-detail-body td { padding:8px 8px; font-size:.78rem; }
      .analytics-detail-body table { display:block; overflow-x:auto; }

      /* ═══ Folio summary ═══ */
      .folio-summary { grid-template-columns:repeat(2, 1fr) !important; gap:8px; }
      .folio-header { flex-direction:column; }
      .folio-detail { padding:14px; }

      /* ═══ Inventory stats ═══ */
      .inv-stats { grid-template-columns:repeat(2, 1fr) !important; }
      .inv-filters { flex-direction:column; align-items:stretch; }
      .inv-filters select, .inv-filters input { min-width:unset; width:100%; }

      /* ═══ HMS stats grid (dashboard) ═══ */
      .hms-stats-grid { grid-template-columns:repeat(2, 1fr) !important; gap:10px; }
      .hms-stat { padding:14px; }
      .hms-stat .val { font-size:1.2rem; }

      /* ═══ Section headers ═══ */
      .header { flex-wrap:wrap; gap:8px; }
      .header h1 { font-size:1.1rem; }
      .header .btn { font-size:.8rem; padding:8px 14px; }

      /* ═══ Rooms summary bar ═══ */
      .rooms-summary-bar { grid-template-columns:1fr !important; }

      /* ═══ Modal body form rows ═══ */
      .hms-modal-body .hms-row { grid-template-columns:1fr !important; }
      .mb-body .mb-field { margin-bottom:10px; }
      .mb-row, .mb-row-3 { grid-template-columns:1fr !important; gap:10px !important; }

      /* ═══ Emoji picker on mobile ═══ */
      #adminEmojiPicker { width:calc(100vw - 60px) !important; max-width:280px; left:-20px !important; }
    }

    /* Extra small phones */
    @media (max-width: 480px) {
      .stats-grid { grid-template-columns:1fr !important; }
      .hms-stats-grid { grid-template-columns:1fr !important; }
      .na-grid { grid-template-columns:1fr !important; }

      /* Super admin buttons stack */
      #hms-settings .hms-card div[style*="grid-template-columns"] {
        grid-template-columns:1fr !important;
      }

      .sidebar { width:240px; transform:translateX(-240px); }
      .sidebar.mobile-open { transform:translateX(0); }

      .main-content { padding:56px 8px 16px 8px; }

      .card-header { flex-direction:column; align-items:flex-start; }

      .mode-tab { padding:8px 10px; font-size:.72rem; }

      /* HMS card padding reduce */
      .hms-card { padding:14px; }
      .hms-card > div[style*="padding"] { padding:12px !important; }

      .tax-row { grid-template-columns:1fr; }

      /* Folio summary 1-col on tiny screens */
      .folio-summary { grid-template-columns:1fr !important; }

      /* Notification dropdown full width */
      .notif-dropdown { right:-100px; width:calc(100vw - 16px); }

      /* Chat convo list shorter */
      #chatConvoList { max-height:220px !important; }

      /* HMS stat vals smaller */
      .hms-stat .val { font-size:1rem; }
      .hms-stat h4 { font-size:.65rem; }

      /* Analytics modal body scroll */
      .analytics-detail-body { max-height:50vh; }

      /* Calendar even tighter */
      .calendar-grid .cal-day { padding:4px 1px; font-size:.68rem; }
      .calendar-grid .cal-day-header { font-size:.55rem; }

      /* Header stack */
      .header { flex-direction:column; align-items:flex-start; }
    }

    /* ══════════ FUTURISTIC SETTINGS UI ══════════ */
    @keyframes settingsGradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes settingsPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,98,0.25); }
      50% { box-shadow: 0 0 20px 4px rgba(201,169,98,0.12); }
    }
    @keyframes settingsFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes settingsSlideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .settings-page {
      background: transparent; border-radius: 0; padding: 0; margin: 0; position: relative; overflow: visible;
    }
    .settings-page::before { content: ''; }
    .settings-title-bar {
      display: flex; align-items: center; gap: 12px; margin-bottom: 24px; position: relative; z-index: 1;
    }
    .settings-title-icon {
      width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
      background: var(--primary-blue); box-shadow: none;
    }
    .settings-title-icon i { font-size: 1.1rem; color: var(--gold); }
    .settings-title-text h1 {
      font-size: 1.3rem; font-weight: 700; color: var(--primary-blue); margin: 0; letter-spacing: 0;
    }
    .settings-title-text p { font-size: 0.75rem; color: var(--gray-500); margin: 3px 0 0; }

    /* ── Settings Search ── */
    .settings-search-wrap { margin-left: auto; position: relative; width: 280px; max-width: 42vw; }
    .settings-search-wrap i.fa-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.76rem; color: var(--gray-400); pointer-events: none; }
    .settings-search-input {
      width: 100%; padding: 9px 30px 9px 32px; border: 1px solid var(--gray-200); border-radius: 20px;
      font-size: 0.8rem; font-family: 'Montserrat', sans-serif; background: var(--white); color: var(--gray-700);
      box-sizing: border-box; transition: all 0.15s;
    }
    .settings-search-input::placeholder { color: var(--gray-400); }
    .settings-search-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,169,98,0.15); }
    .settings-search-clear {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent;
      color: var(--gray-400); cursor: pointer; font-size: 0.72rem; padding: 6px; display: none;
    }
    .settings-search-clear:hover { color: var(--gray-600); }
    /* position: fixed (not absolute) — .main-content sets overflow-x:clip, which per spec
       forces its unset overflow-y to compute as "auto", turning it into a clipping box that
       silently truncated this dropdown once it had enough results to run past that box's
       bottom edge. Fixed positioning escapes that ancestor entirely (nothing between here
       and <body> has a transform/filter, which is the only thing that would trap it); exact
       top/right/max-height are computed in JS from the search input's live position so it
       still lands directly under the box and never runs off the bottom of the viewport.  */
    .settings-search-results {
      position: fixed; width: 340px; max-width: 85vw; max-height: 380px;
      overflow-y: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.16); z-index: 9999; padding: 6px;
    }
    .settings-search-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
      text-align: left; width: 100%; border: none; background: transparent; font-family: 'Montserrat', sans-serif;
    }
    .settings-search-item:hover, .settings-search-item.ssi-active { background: var(--gray-100); }
    .settings-search-item i { width: 16px; text-align: center; font-size: 0.8rem; color: var(--gold); flex-shrink: 0; }
    .settings-search-item-title { font-size: 0.8rem; font-weight: 700; color: var(--primary-blue); }
    .settings-search-item-sub { font-size: 0.68rem; color: var(--gray-500); margin-top: 1px; }
    .settings-search-empty { padding: 16px 10px; text-align: center; font-size: 0.78rem; color: var(--gray-400); }
    .s-search-highlight { animation: sSearchPulse 1.6s ease; }
    @keyframes sSearchPulse {
      0% { box-shadow: 0 0 0 4px rgba(201,169,98,0.55); border-color: var(--gold); }
      100% { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    }
    @media (max-width: 640px) {
      .settings-title-bar { flex-wrap: wrap; }
      .settings-search-wrap { width: 100%; max-width: 100%; margin-left: 0; margin-top: 4px; }
      .settings-search-results { width: 100%; right: 0; left: 0; }
    }

    /* ── Settings Layout: Sidebar + Content ── */
    .settings-layout { display: flex; gap: 20px; align-items: flex-start; }
    .settings-nav {
      width: 205px; min-width: 205px; flex-shrink: 0; background: var(--white);
      border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 8px;
      position: sticky; top: 72px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .s-nav-section-label {
      font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
      color: var(--gray-400); padding: 0 10px 5px; margin-bottom: 2px; display: block;
    }
    .s-nav-item {
      display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px;
      border: none; background: transparent; border-radius: 7px;
      font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 500;
      color: var(--gray-600); cursor: pointer; text-align: left; transition: all 0.15s;
    }
    .s-nav-item i { font-size: 0.8rem; width: 15px; text-align: center; flex-shrink: 0; color: var(--gray-400); }
    .s-nav-item:hover { background: var(--gray-100); color: var(--primary-blue); }
    .s-nav-item:hover i { color: var(--gold); }
    .s-nav-active { background: rgba(26,61,92,0.08) !important; color: var(--primary-blue) !important; font-weight: 700 !important; }
    .s-nav-active i { color: var(--gold) !important; }
    .settings-content { flex: 1; min-width: 0; }
    .s-tab-pane { display: block; animation: tabFadeIn 0.18s ease; }
    .s-tab-hidden { display: none !important; }
    .s-section-label {
      font-size: 0.68rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase;
      letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
    }
    @keyframes tabFadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
    @media (max-width: 860px) {
      .settings-layout { flex-direction: column; }
      .settings-nav { width: 100%; min-width: unset; position: static; display: flex; flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; }
      .s-nav-section-label { display: none; }
      .s-nav-item { white-space: nowrap; flex-shrink: 0; font-size: 0.72rem; padding: 8px 12px; }
    }

    .settings-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
      align-items: start;
      position: relative; z-index: 1;
    }
    .s-collapse-warn {
      background: #fff8ed; border: 1.5px solid #f6c05a; border-radius: 10px; overflow: hidden;
    }
    .s-collapse-warn summary {
      cursor: pointer; padding: 10px 14px; font-size: .75rem; font-weight: 600; color: #92550a;
      display: flex; align-items: center; gap: 8px; list-style: none;
    }
    .s-collapse-warn summary::-webkit-details-marker { display: none; }
    .s-collapse-chevron { margin-left: auto; font-size: .68rem; transition: transform 0.15s; }
    .s-collapse-warn[open] .s-collapse-chevron { transform: rotate(180deg); }
    .s-collapse-warn .s-collapse-body { padding: 0 14px 12px; }
    .s-card {
      background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px;
      padding: 0; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .s-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--gold); }
    .s-card-fullwidth { grid-column: 1 / -1; }
    .s-card-header {
      padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px;
    }
    .s-card-icon {
      width: 36px; height: 36px; min-width: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; color: #fff; position: relative; flex-shrink: 0;
    }
    .s-card-icon::after { content: ''; }
    .s-card-icon.gold { background: var(--gold); }
    .s-card-icon.blue { background: #3a7bd5; }
    .s-card-icon.green { background: #11998e; }
    .s-card-icon.purple { background: #667eea; }
    .s-card-icon.red { background: #ff416c; }
    .s-card-icon.teal { background: #1565c0; }
    .s-card-title { font-size: 0.9rem; font-weight: 700; color: var(--primary-blue); margin: 0; }
    .s-card-subtitle { font-size: 0.7rem; color: var(--gray-500); margin: 2px 0 0; }
    .s-card-body { padding: 12px 16px 16px; }
    .s-card-section {
      background: transparent; border: none;
      border-radius: 0; padding: 0; margin-bottom: 12px;
    }
    .s-card-section:last-child { margin-bottom: 0; }
    .s-card-section-title {
      display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
      font-weight: 600; font-size: 0.8rem; color: var(--primary-blue);
    }
    .s-card-section-title i { font-size: 0.75rem; color: var(--gold); }

    /* ── General tab: Quick Stats tiles ── */
    .gs-tile { background: var(--gray-50); border-radius: 10px; padding: 12px 14px; }
    .gs-tile-icon { width: 30px; height: 30px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; margin-bottom: 8px; }
    .gs-tile-val { font-size: 1.25rem; font-weight: 800; color: var(--primary-blue); line-height: 1.1; }
    .gs-tile-label { font-size: .68rem; color: var(--gray-500); margin-top: 2px; }

    .s-input {
      width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200);
      border-radius: 6px; font-size: 0.8rem; font-family: 'Montserrat', sans-serif;
      background: var(--white); color: var(--gray-700); transition: all 0.15s; box-sizing: border-box;
    }
    .s-input::placeholder { color: var(--gray-400); }
    .s-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,169,98,0.1); background: #fafafa; }
    select.s-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
    select.s-input option { background: #fff; color: var(--gray-700); }

    .s-btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
      border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer;
      font-family: 'Montserrat', sans-serif; transition: all 0.15s; position: relative; overflow: hidden;
    }
    .s-btn:active { transform: scale(0.97); }
    .s-btn-gold { background: var(--gold); color: #1a3d5c; }
    .s-btn-gold:hover { box-shadow: 0 2px 8px rgba(201,169,98,0.35); transform: translateY(-1px); }
    .text-case-opt { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px 10px; border:1.5px solid var(--gray-200); border-radius:10px; background:#fff; color:var(--gray-500); cursor:pointer; font-family:inherit; transition:all .15s; flex:1 1 calc(33% - 8px); min-width:80px; }
    .text-case-opt:hover { border-color:var(--primary-blue); color:var(--primary-blue); background:#f0f7ff; }
    .text-case-opt.active { border-color:var(--primary-blue); background:var(--primary-blue); color:#fff; box-shadow:0 2px 8px rgba(26,61,92,.2); }
    .tco-sample { font-size:1.25rem; font-weight:800; line-height:1; }
    .tco-label { font-size:.58rem; font-weight:700; letter-spacing:.3px; text-align:center; white-space:nowrap; }
    /* Branding logo drop zone hover */
    #brandingDropZone.dz-hover { background: rgba(201,169,98,0.1) !important; border-color: #b8951e !important; }
    .s-btn-blue { background: #3a7bd5; color: #fff; }
    .s-btn-blue:hover { box-shadow: 0 2px 8px rgba(58,123,213,0.35); transform: translateY(-1px); }
    .s-btn-green { background: #11998e; color: #fff; }
    .s-btn-green:hover { box-shadow: 0 2px 8px rgba(17,153,142,0.35); transform: translateY(-1px); }
    .s-btn-red { background: #ff416c; color: #fff; }
    .s-btn-red:hover { box-shadow: 0 2px 8px rgba(255,65,108,0.35); transform: translateY(-1px); }
    .s-btn-outline {
      background: transparent; border: 1px solid var(--gray-300); color: var(--gray-600);
    }
    .s-btn-outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,169,98,0.04); }

    .s-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
    .s-alert { margin-top: 8px; font-size: 0.8rem; }
    .s-display-box {
      background: var(--gray-100); border: 1px solid var(--gray-200);
      border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
      color: var(--gray-700); font-size: 0.8rem;
    }
    .s-divider { border: none; border-top: 1px solid var(--gray-200); margin: 10px 0; }

    /* Full-width cards */
    .s-card-full {
      grid-column: 1 / -1; background: var(--white);
      border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .s-card-full:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--gold); }
    .s-card-full.danger { border-color: #ff6b6b; background: #fff9f9; }
    .s-card-full.info { border-color: #3a7bd5; background: #f8fafd; }

    .s-danger-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
    }
    .s-danger-grid .s-btn { width: 100%; justify-content: center; padding: 10px 12px; font-size: 0.75rem; }

    /* Danger Zone Portrait Cards */
    .s-danger-portrait-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .s-danger-card {
      background: #fff; border: 1px solid #ffe0e0; border-radius: 12px;
      padding: 20px 16px; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      transition: all 0.25s; min-height: 200px; justify-content: center;
    }
    .s-danger-card:hover {
      transform: translateY(-3px); box-shadow: 0 8px 24px rgba(220,53,69,0.1);
      border-color: #ff9999;
    }
    .s-danger-card-icon {
      width: 48px; height: 48px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; font-size: 1.1rem;
    }
    .s-danger-card-icon.blue { background: rgba(58,123,213,0.1); color: #3a7bd5; }
    .s-danger-card-icon.green { background: rgba(34,197,94,0.1); color: #22c55e; }
    .s-danger-card-icon.gold { background: rgba(201,169,98,0.1); color: #c9a962; }
    .s-danger-card-icon.red { background: rgba(220,53,69,0.1); color: #dc3545; }
    .s-danger-card-title { font-size: 0.82rem; font-weight: 700; color: var(--primary-blue); }
    .s-danger-card-desc { font-size: 0.68rem; color: var(--gray-500); line-height: 1.5; }
    .s-danger-card .s-btn { margin-top: auto; font-size: 0.7rem; padding: 8px 12px; }

    /* Currency preview badge */
    .s-currency-badge {
      display: inline-flex; align-items: center; gap: 10px; background: #fafbfc;
      border: 1px solid var(--gold); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
    }
    .s-currency-badge .symbol {
      font-size: 1.4rem; font-weight: 800; color: var(--gold);
    }
    .s-currency-badge .name { font-weight: 600; font-size: 0.8rem; color: var(--primary-blue); }
    .s-currency-badge .code { font-size: 0.7rem; color: var(--gray-500); }

    .s-custom-grid { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; }

    /* Room types list for settings - Horizontal/Landscape */
    .settings-page .hms-empty { color: var(--gray-400) !important; }
    
    /* Room Table - Full Width Layout */
    .s-room-list-scroll {
      width: 100%; max-height: 600px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--gray-200);
      border-radius: 8px; background: var(--white); box-sizing: border-box; margin: 0; padding: 0;
    }
    .s-room-table {
      width: 100%; border-collapse: collapse; font-size: 0.74rem; table-layout: auto;
    }
    .s-room-table thead {
      background: var(--primary-blue); color: #fff; position: sticky; top: 0; z-index: 10;
    }
    .s-room-table th {
      padding: 7px 5px; text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--primary-blue);
      font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis;
    }
    .s-room-table tbody tr {
      border-bottom: 1px solid var(--gray-200); transition: background 0.2s;
    }
    .s-room-row {
      cursor: pointer; background: var(--white);
    }
    .s-room-row:hover { background: rgba(58,123,213,0.04); }
    .s-room-row-expanded { background: rgba(58,123,213,0.08); }
    .s-room-table td {
      padding: 5px 4px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; word-break: break-word;
    }
    .s-room-desc-row { background: rgba(0,0,0,0.02); }
    .s-room-desc-cell {
      padding: 8px 4px; font-size: 0.7rem; color: var(--gray-600); line-height: 1.4;
    }
    
    .status-badge {
      display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px;
      border-radius: 4px; font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    }
    .status-badge.status-active {
      background: rgba(17,153,142,0.1); color: #11998e;
    }
    .status-badge.status-inactive {
      background: rgba(255,107,107,0.1); color: #ff6b6b;
    }
    
    .s-room-edit-btn, .s-room-delete-btn {
      padding: 4px 6px; border: none; border-radius: 3px; cursor: pointer;
      font-size: 0.7rem; transition: all 0.15s; display: inline-flex; align-items: center; gap: 2px;
    }
    .s-room-edit-btn {
      background: rgba(58,123,213,0.1); color: var(--primary-blue);
    }
    .s-room-edit-btn:hover { background: var(--primary-blue); color: #fff; }
    .s-room-delete-btn {
      background: rgba(255,107,107,0.1); color: #ff6b6b;
    }
    .s-room-delete-btn:hover { background: #ff6b6b; color: #fff; }

    /* Dark Mode - Room Table */
    .dark-mode .s-room-list-scroll { background: var(--dark-surface); border-color: var(--dark-border); }
    .dark-mode .s-room-table thead { background: var(--primary-blue); }
    .dark-mode .s-room-row { background: var(--dark-surface); }
    .dark-mode .s-room-row:hover { background: rgba(58,123,213,0.15); }
    .dark-mode .s-room-row-expanded { background: rgba(58,123,213,0.2); }
    .dark-mode .s-room-table td { color: var(--dark-text); }
    .dark-mode .s-room-table tbody tr { border-bottom-color: var(--dark-border); }
    .dark-mode .s-room-desc-row { background: rgba(58,123,213,0.08); }
    .dark-mode .s-room-desc-cell { color: var(--dark-text-secondary); }
    .dark-mode .status-badge.status-active { background: rgba(17,153,142,0.2); }
    .dark-mode .status-badge.status-inactive { background: rgba(255,107,107,0.2); }

    /* Legacy styles (keep for backward compatibility) */
    
    .s-room-delete:hover { background: rgba(255,65,108,0.08); border-color: #ff6b6b; }
    @media (max-width: 500px) {
      .s-room-pills { display: none; }
      .s-room-meta::after { content: attr(data-price); margin-left: 6px; color: var(--gold); font-weight: 600; }
    }

    /* Dark mode toggle switch */
    .s-toggle-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .s-toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--primary-blue); }
    .s-toggle-desc { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }
    .s-toggle {
      position: relative; width: 50px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; cursor: pointer;
    }
    .s-toggle input { 
      opacity: 0; position: absolute; width: 100%; height: 100%; cursor: pointer; margin: 0; padding: 0; z-index: 2;
    }
    .s-toggle-slider {
      position: absolute; inset: 0; z-index: 1;
      background: #d1d5db; cursor: pointer;
      border-radius: 999px; transition: background 0.3s cubic-bezier(.4,0,.2,1);
    }
    .s-toggle-slider::before {
      content: ''; position: absolute; top: 3px; left: 3px;
      height: 22px; width: 22px; background: #fff; border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
      transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    }
    .s-toggle input:checked + .s-toggle-slider {
      background: var(--primary-blue);
    }
    .s-toggle input:checked + .s-toggle-slider::before {
      transform: translateX(22px);
    }
    .s-toggle:hover .s-toggle-slider { background: #bcc0c4; }
    .s-toggle:hover input:checked + .s-toggle-slider { background: #153350; }
    .s-toggle:active .s-toggle-slider::before { width: 26px; }
    .s-toggle:active input:checked + .s-toggle-slider::before { transform: translateX(18px); width: 26px; }
    body.dark-mode .s-toggle-label { color: #e6edf3 !important; }
    body.dark-mode .s-toggle-slider { background: rgba(255,255,255,0.18); }
    body.dark-mode .s-toggle:hover .s-toggle-slider { background: rgba(255,255,255,0.25); }
    body.dark-mode .s-toggle input:checked + .s-toggle-slider { background: var(--gold); }
    body.dark-mode .s-toggle:hover input:checked + .s-toggle-slider { background: #b8983f; }
    body.dark-mode .s-card-section-title { color: #e6edf3 !important; }
    body.dark-mode .s-card-full.danger .s-card-title { color: #e6edf3 !important; }

    /* Dark mode styles */
    body.dark-mode {
      --primary-blue: #8bb3d9;
      --white: #161b22;
      --off-white: #161b22;
      --gray-50: #161b22;
      --gray-100: #21262d;
      --gray-200: #30363d;
      --gray-300: #484f58;
      --gray-400: #6e7681;
      --gray-500: #8b949e;
      --gray-600: #b1bac4;
      --gray-700: #c9d1d9;
      --gray-800: #e6edf3;
      --success: #3fb950;
      --warning: #d29922;
      --danger: #f85149;
      --text-primary: #e6edf3;
      --surface: #161b22;
      --border: rgba(255,255,255,0.1);
    }
    body.dark-mode { background: #0d1117 !important; color: #e6edf3 !important; }
    body.dark-mode .sidebar { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .sidebar a, body.dark-mode .sidebar .nav-link { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .sidebar a:hover, body.dark-mode .sidebar a.active, body.dark-mode .sidebar .nav-link:hover, body.dark-mode .sidebar .nav-link.active { color: #fff !important; background: rgba(201,169,98,0.12) !important; }
    body.dark-mode .topbar { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .main-content { background: #0d1117 !important; }
    /* ── Mode Tab Bar dark mode ── */
    body.dark-mode .mode-tab-bar { background: #161b22 !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
    body.dark-mode .mode-tab { color: rgba(255,255,255,0.45) !important; }
    body.dark-mode .mode-tab:hover:not(.active) { color: rgba(255,255,255,0.75) !important; background: rgba(255,255,255,0.05) !important; }
    body.dark-mode .mode-tab.active { color: #e6edf3 !important; border-bottom-color: var(--gold) !important; }
    body.dark-mode #sidebarHotelName { color: rgba(255,255,255,0.85) !important; }
    body.dark-mode .tb-icon-btn { color: rgba(255,255,255,0.55) !important; }
    body.dark-mode .tb-icon-btn:hover { color: #fff !important; }
    body.dark-mode #hotelSwitcherDropdown { background: #1c2333 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .settings-page { background: transparent; }
    body.dark-mode .settings-nav { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .s-nav-item { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-nav-item i { color: rgba(255,255,255,0.35) !important; }
    body.dark-mode .s-nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .s-nav-item:hover i { color: var(--gold) !important; }
    body.dark-mode .settings-search-input { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .settings-search-input::placeholder { color: rgba(255,255,255,0.3) !important; }
    body.dark-mode .settings-search-results { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .settings-search-item:hover, body.dark-mode .settings-search-item.ssi-active { background: rgba(255,255,255,0.06) !important; }
    body.dark-mode .settings-search-item-title { color: #e6edf3 !important; }
    body.dark-mode .settings-search-item-sub { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .settings-search-empty { color: rgba(255,255,255,0.35) !important; }
    body.dark-mode .gs-tile { background: rgba(255,255,255,0.05) !important; }
    body.dark-mode .gs-tile-val { color: #e6edf3 !important; }
    body.dark-mode .gs-tile-label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .s-nav-active { background: rgba(201,169,98,0.12) !important; color: var(--gold) !important; font-weight: 700 !important; }
    body.dark-mode .s-nav-active i { color: var(--gold) !important; }
    body.dark-mode .s-nav-section-label { color: rgba(255,255,255,0.25) !important; }
    body.dark-mode .s-section-label { color: rgba(255,255,255,0.3) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .s-card { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; color: #e6edf3 !important; }
    body.dark-mode .s-card:hover { border-color: var(--gold) !important; }
    body.dark-mode .s-card-title { color: #e6edf3 !important; }
    body.dark-mode .s-card-subtitle { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-input { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .s-input::placeholder { color: rgba(255,255,255,0.3) !important; }
    body.dark-mode select.s-input option { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .s-label { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-display-box { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-card-full { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .s-card-full.danger { background: rgba(255,65,108,0.08) !important; }
    body.dark-mode .s-danger-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,65,108,0.15) !important; }
    body.dark-mode .s-danger-card:hover { box-shadow: 0 8px 24px rgba(220,53,69,0.2); border-color: rgba(255,65,108,0.35) !important; }
    body.dark-mode .s-danger-card-title { color: #e6edf3 !important; }
    body.dark-mode .s-danger-card-desc { color: rgba(255,255,255,0.45) !important; }
    body.dark-mode .s-card-full.info { background: rgba(58,123,213,0.08) !important; }
    body.dark-mode .s-currency-badge { background: rgba(201,169,98,0.1) !important; border-color: rgba(201,169,98,0.3) !important; }
    body.dark-mode .s-room-item { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: #e6edf3 !important; }
    body.dark-mode .s-room-name { color: #e6edf3 !important; }
    body.dark-mode .s-room-meta { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .s-room-img-placeholder { background: rgba(58,123,213,0.15) !important; color: #6cb4ee !important; }
    
    /* Dark Mode - Room Table Styles */
    body.dark-mode .s-room-list-scroll { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .s-room-table thead { background: var(--primary-blue) !important; }
    body.dark-mode .s-room-table th { border-bottom-color: rgba(58,123,213,0.4) !important; color: #e6edf3 !important; }
    body.dark-mode .s-room-row { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .s-room-row:hover { background: rgba(58,123,213,0.15) !important; }
    body.dark-mode .s-room-row-expanded { background: rgba(58,123,213,0.2) !important; }
    body.dark-mode .s-room-table tbody tr { border-bottom-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .s-room-desc-row { background: rgba(58,123,213,0.08) !important; }
    body.dark-mode .s-room-desc-cell { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-room-table td { color: #e6edf3 !important; }
    body.dark-mode .status-badge.status-active { background: rgba(17,153,142,0.2) !important; color: #4dd9cc !important; }
    body.dark-mode .status-badge.status-inactive { background: rgba(255,107,107,0.2) !important; color: #ff9999 !important; }
    body.dark-mode .s-room-edit-btn { background: rgba(58,123,213,0.15) !important; color: #6cb4ee !important; }
    body.dark-mode .s-room-edit-btn:hover { background: #3a7bd5 !important; color: #fff !important; }
    body.dark-mode .s-room-delete-btn { background: rgba(255,107,107,0.15) !important; color: #ff9999 !important; }
    body.dark-mode .s-room-delete-btn:hover { background: #ff5555 !important; color: #fff !important; }
    
    /* Keep legacy for backward compatibility */
    body.dark-mode .s-room-meta-item { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .s-room-feature { background: rgba(58,123,213,0.15) !important; color: #6cb4ee !important; }
    body.dark-mode .s-room-promo-badge { background: rgba(255,152,0,0.15) !important; color: #ffb74d !important; }
    body.dark-mode .s-room-edit { background: rgba(58,123,213,0.15) !important; color: #6cb4ee !important; }
    body.dark-mode .s-room-edit:hover { background: #3a7bd5 !important; color: #fff !important; }
    body.dark-mode .s-room-delete { background: rgba(255,65,108,0.15) !important; color: #ff9999 !important; }
    body.dark-mode .s-room-delete:hover { background: #ff6b6b !important; color: #fff !important; }
    body.dark-mode .hms-card { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .hms-header h2 { color: #e6edf3 !important; }
    body.dark-mode .hms-stat { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .hms-stat h4 { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .hms-stat .val { color: #e6edf3 !important; }
    body.dark-mode .hms-table td { color: #e6edf3 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .hms-table thead { background: #21262d !important; }
    body.dark-mode .hms-table th { color: rgba(255,255,255,0.7) !important; }
    body.dark-mode .hms-table tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
    body.dark-mode .filter-chip { background: #21262d !important; color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .filter-chip.active { background: var(--gold) !important; color: #1a3d5c !important; }
    body.dark-mode .btn { border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .section h2, body.dark-mode .section h3, body.dark-mode .section h4 { color: #e6edf3 !important; }
    body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .hms-empty { color: rgba(255,255,255,0.3) !important; }

    /* ── Dark mode: Cards, Stat Cards, Table wrappers ── */
    body.dark-mode .card { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .card-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .card-header h2 { color: #e6edf3 !important; }
    body.dark-mode .table-wrapper { background: #161b22 !important; }
    body.dark-mode .stat-card { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .stat-card h3 { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .stat-card .value { color: #e6edf3 !important; }

    /* ── Dark mode: Tables ── */
    body.dark-mode th { background: #21262d !important; color: rgba(255,255,255,0.7) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode td { color: #e6edf3 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode tr:hover { background: rgba(255,255,255,0.04) !important; }

    /* ── Dark mode: Modals ── */
    body.dark-mode .mb-modal { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .mb-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .mb-header h2 { color: #e6edf3 !important; }
    body.dark-mode .mb-close { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .mb-field label { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .mb-addons label { color: #e6edf3 !important; background: #0d1117 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .mb-toggles label { color: #e6edf3 !important; }
    body.dark-mode .mb-summary { background: #0d1117 !important; color: #e6edf3 !important; }
    body.dark-mode .mb-cal-left { background: #0d1117 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .mb-grid-tile.available { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.3) !important; }
    body.dark-mode .mb-grid-tile.booked { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.3) !important; }
    body.dark-mode .mb-grid-tile-name { color: #e6edf3 !important; }
    body.dark-mode .mb-grid-tile.available .mb-grid-tile-units { color: #4ade80 !important; }
    body.dark-mode .mb-grid-tile.booked .mb-grid-tile-units { color: #f87171 !important; }
    body.dark-mode .mb-room-card { background: linear-gradient(135deg,#161b22,#1c2333) !important; border-color: rgba(201,169,98,0.2) !important; box-shadow:0 2px 8px rgba(0,0,0,0.3) !important; }
    body.dark-mode .mb-rc-name { color: #e6edf3 !important; }
    body.dark-mode .mb-rc-controls { background: rgba(255,255,255,0.04) !important; }
    body.dark-mode .mb-rc-ctrl select, body.dark-mode .mb-rc-ctrl input { background: #0d1117 !important; border-color: rgba(255,255,255,0.1) !important; color: #e6edf3 !important; }
    body.dark-mode .hms-modal { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .hms-modal-body .field label { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .hms-modal-foot { border-top-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .inv-stat { background: #161b22 !important; box-shadow: 0 1px 6px rgba(0,0,0,.2) !important; }
    body.dark-mode .inv-stat h4 { color: rgba(255,255,255,0.4) !important; }
    body.dark-mode .inv-stat .val { color: #58a6ff !important; }
    body.dark-mode .inv-stat .val.red { color: #f85149 !important; }
    body.dark-mode .inv-filters select, body.dark-mode .inv-filters input { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .inv-view-tabs { background: rgba(255,255,255,0.06) !important; }
    body.dark-mode .inv-view-tabs button { color: rgba(255,255,255,0.4) !important; }
    body.dark-mode .inv-view-tabs button.active { background: #161b22 !important; color: #58a6ff !important; }
    body.dark-mode .inv-room-group-head { background: #0d1117 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .inv-room-group-head h3 { color: #58a6ff !important; }
    body.dark-mode .inv-room-group-body { border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .inv-room-tab { background: #161b22 !important; border-color: rgba(255,255,255,.1) !important; color: #e6edf3 !important; }
    body.dark-mode .inv-room-tab:hover { border-color: #58a6ff !important; }
    body.dark-mode .inv-room-tab.active { background: #1f6feb !important; border-color: #1f6feb !important; color: #fff !important; }
    body.dark-mode .inv-room-tab-count { background: rgba(255,255,255,.1) !important; }
    body.dark-mode .analytics-detail-modal { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .analytics-detail-body th { background: #21262d !important; color: rgba(255,255,255,0.7) !important; }
    body.dark-mode .analytics-detail-body td { color: #e6edf3 !important; }
    body.dark-mode .analytics-detail-body tr:hover { background: rgba(255,255,255,0.04) !important; }

    /* ── Dark mode: Notifications ── */
    body.dark-mode .notif-bell { color: #e6edf3 !important; }
    body.dark-mode .notif-bell:hover { background: rgba(255,255,255,0.1) !important; }
    body.dark-mode .notif-dropdown { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .notif-dropdown-header { border-bottom-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .notif-dropdown-header .clear-btn { color: var(--gold) !important; }
    body.dark-mode .notif-item { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .notif-item:hover { background: rgba(255,255,255,0.04) !important; }
    body.dark-mode .notif-item.unread { background: rgba(58,123,213,0.1) !important; }
    body.dark-mode .notif-item .notif-body .notif-title { color: #e6edf3 !important; }
    body.dark-mode .notif-item .notif-body .notif-desc { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .notif-item .notif-body .notif-time { color: rgba(255,255,255,0.35) !important; }
    body.dark-mode .notif-empty { color: rgba(255,255,255,0.3) !important; }

    /* ── Dark mode: Calendar ── */
    body.dark-mode .calendar-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .calendar-header h2 { color: #e6edf3 !important; }
    body.dark-mode .calendar-nav button { background: #21262d !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .calendar-nav button:hover { background: #30363d !important; }
    body.dark-mode .calendar-grid .cal-day-header { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .calendar-grid .cal-day.other-month { color: rgba(255,255,255,0.2) !important; }
    body.dark-mode .cal-booking-card { background: #21262d !important; }
    body.dark-mode .cal-booking-card .cb-guest { color: #e6edf3 !important; }
    body.dark-mode .cal-booking-card .cb-dates { color: rgba(255,255,255,0.5) !important; }

    /* ── Dark mode: Room Cards ── */
    body.dark-mode .room-card { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
    body.dark-mode .room-availability-section { background: #0d1117 !important; }
    body.dark-mode .room-availability-section .avail-header span { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .room-control-group label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .room-control-group input { border-color: rgba(255,255,255,0.1) !important; color: #e6edf3 !important; background: #0d1117 !important; }
    body.dark-mode .room-card-footer { border-top-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .avail-bar { background: rgba(255,255,255,0.1) !important; }
    body.dark-mode .rooms-summary-item { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .rooms-summary-item .info h4 { color: rgba(255,255,255,0.5) !important; }

    /* ── Dark mode: Unified Room Management cards ── */
    body.dark-mode .rm-card { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .rm-card__top { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .rm-card__name { color: #e6edf3 !important; }
    body.dark-mode .rm-tabs { background: #0d1117 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .rm-tab-btn { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .rm-tab-btn.active { color: #58a6ff !important; border-bottom-color: #58a6ff !important; }
    body.dark-mode .rm-field label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .rm-visibility-row { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .rm-visibility-row__label { color: #e6edf3 !important; }
    body.dark-mode .rm-media-group h5 { color: #e6edf3 !important; }
    body.dark-mode .cms-toggle { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .rooms-summary-item .info .val { color: #e6edf3 !important; }

    /* ── Dark mode: Front Desk ── */
    body.dark-mode .fd2-kpi { background:#161b22 !important; border-color:rgba(255,255,255,0.08) !important; color:#e6edf3 !important; }
    body.dark-mode .fd2-kpi-label { color:rgba(255,255,255,0.4) !important; }
    body.dark-mode .fd2-tabs { border-bottom-color:rgba(255,255,255,0.1) !important; }
    body.dark-mode .fd2-tab { color:rgba(255,255,255,0.4) !important; }
    body.dark-mode .fd2-tab.fd2-tab-active { color:#e6edf3 !important; }
    body.dark-mode .fd2-content { background:#161b22 !important; border-color:rgba(255,255,255,0.08) !important; }
    body.dark-mode .fd2-refresh { background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.1) !important; color:#e6edf3 !important; }
    body.dark-mode .fd-panel { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .fd-panel-head { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .fd-panel-head.arrivals { background: rgba(46,125,50,0.12) !important; color: #66bb6a !important; }
    body.dark-mode .fd-panel-head.departures { background: rgba(230,81,0,0.12) !important; color: #ffa726 !important; }
    body.dark-mode .fd-card { border-color: rgba(255,255,255,0.08) !important; background: #0d1117 !important; color: #e6edf3 !important; }
    body.dark-mode .fd-card-meta { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .fd-badge.done { background: rgba(46,125,50,0.15) !important; color: #66bb6a !important; }
    body.dark-mode .fd-badge.pending { background: rgba(230,81,0,0.15) !important; color: #ffa726 !important; }

    /* ── Dark mode: Room Status Grid ── */
    body.dark-mode .rs-room.st-vacant { background: rgba(46,125,50,0.12) !important; border-color: rgba(102,187,106,0.3) !important; color: #66bb6a !important; }
    body.dark-mode .rs-room.st-occupied { background: rgba(21,101,192,0.12) !important; border-color: rgba(66,165,245,0.3) !important; color: #42a5f5 !important; }
    body.dark-mode .rs-room.st-dirty { background: rgba(230,81,0,0.12) !important; border-color: rgba(255,167,38,0.3) !important; color: #ffa726 !important; }
    body.dark-mode .rs-room.st-clean { background: rgba(85,139,47,0.12) !important; border-color: rgba(174,213,129,0.3) !important; color: #aed581 !important; }
    body.dark-mode .rs-room.st-inspected { background: rgba(40,53,147,0.15) !important; border-color: rgba(159,168,218,0.3) !important; color: #9fa8da !important; }
    body.dark-mode .rs-room.st-ooo { background: rgba(198,40,40,0.12) !important; border-color: rgba(239,154,154,0.3) !important; color: #ef9a9a !important; }
    body.dark-mode .rs-room.st-maint { background: rgba(106,27,154,0.14) !important; border-color: rgba(206,147,216,0.3) !important; color: #ce93d8 !important; }
    body.dark-mode .rs-legend span { color: rgba(255,255,255,0.6) !important; }

    /* ── Dark mode: Folio & Night Audit ── */
    body.dark-mode .folio-detail { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .folio-summary .fs-item { background: #0d1117 !important; }
    body.dark-mode .folio-summary .fs-item .fs-label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .na-result { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .na-item { background: #0d1117 !important; }
    body.dark-mode .na-item .na-label { color: rgba(255,255,255,0.5) !important; }

    /* ── Dark mode: Badges ── */
    body.dark-mode .hms-badge.green { background: rgba(46,125,50,0.15) !important; color: #66bb6a !important; }
    body.dark-mode .hms-badge.yellow { background: rgba(255,193,7,0.15) !important; color: #ffd54f !important; }
    body.dark-mode .hms-badge.red { background: rgba(220,53,69,0.15) !important; color: #ef5350 !important; }
    body.dark-mode .hms-badge.blue { background: rgba(13,202,240,0.15) !important; color: #4fc3f7 !important; }
    body.dark-mode .hms-badge.gray { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .hms-badge.purple { background: rgba(108,52,131,0.2) !important; color: #ce93d8 !important; }
    body.dark-mode .hms-badge.gold { background: rgba(201,169,98,0.18) !important; color: #e8d5a3 !important; }
    body.dark-mode .addon-badge { background: rgba(201,169,98,0.12) !important; color: var(--gold) !important; border-color: rgba(201,169,98,0.3) !important; }
    body.dark-mode .badge-inactive { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.5) !important; }

    /* ── Dark mode: Form Controls & Misc ── */
    body.dark-mode .form-group label { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .form-control { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .select-status { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.1) !important; }
    body.dark-mode .fullscreen-toggle { background: #21262d !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .sos-btn { background: #dc2626 !important; border-color: #991b1b !important; color: #fff !important; }
    body.dark-mode .filter-bar .filter-label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .global-loading { background: rgba(13,17,23,0.7) !important; }
    body.dark-mode .global-loading .spinner-text { color: #e6edf3 !important; }
    body.dark-mode .header h1 { color: #e6edf3 !important; }
    body.dark-mode .header-date { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .pricing-row strong { color: #e6edf3 !important; }
    body.dark-mode .pricing-label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .settings-title-text h1 { color: #e6edf3 !important; }
    body.dark-mode .s-btn-outline { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-currency-badge .symbol { color: #e6edf3 !important; }
    body.dark-mode .s-currency-badge .name { color: rgba(255,255,255,0.7) !important; }
    body.dark-mode .s-currency-badge .code { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode select option { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode .alert-success { background: rgba(40,167,69,0.15) !important; color: #66bb6a !important; border-color: rgba(40,167,69,0.25) !important; }
    body.dark-mode .alert-danger { background: rgba(220,53,69,0.15) !important; color: #ef5350 !important; border-color: rgba(220,53,69,0.25) !important; }

    /* Feature Request Banner — always light, never inverted by dark mode */
    body.dark-mode .fr-settings-banner { background: linear-gradient(135deg,#f3f0ff 0%,#ede8ff 50%,#e8e0ff 100%) !important; border-color: rgba(124,58,237,0.2) !important; }
    body.dark-mode .fr-banner-icon { background: rgba(124,58,237,0.1) !important; border-color: rgba(124,58,237,0.2) !important; }
    body.dark-mode .fr-banner-title { color: #3b1a7a !important; }
    body.dark-mode .fr-banner-sub { color: rgba(60,30,100,0.6) !important; }
    body.dark-mode .fr-banner-pill { background: rgba(124,58,237,0.1) !important; border-color: rgba(124,58,237,0.2) !important; color: #6d28d9 !important; }

    @media (max-width: 768px) {
      .settings-page { padding: 0; margin: 0; }
      .settings-grid { grid-template-columns: 1fr; gap: 12px; }
      .s-custom-grid { grid-template-columns: 1fr; }
      .s-danger-grid { grid-template-columns: 1fr 1fr; }
      .s-danger-portrait-grid { grid-template-columns: 1fr 1fr; }
      .settings-title-bar { gap: 12px; }
      .settings-title-text h1 { font-size: 1.2rem; }
    }
    @media (max-width: 480px) {
      .s-danger-portrait-grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       COMPREHENSIVE UI ANIMATIONS
       ============================================================ */

    /* ── 1. Section page entrance ─────────────────────────────── */
    @keyframes sectionFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .section.active { animation: sectionFadeIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }

    /* ── 2. Modal panel entrances ──────────────────────────────── */
    @keyframes modalSlideUp {
      from { opacity: 0; transform: translateY(-18px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .hms-modal { animation: modalSlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
    .analytics-detail-modal { animation: modalSlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1); }

    /* ── 3. Modal overlay backdrop fade ───────────────────────── */
    @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .hms-modal-overlay.open        { animation: overlayFadeIn 0.2s ease forwards; }
    .analytics-detail-overlay.open { animation: overlayFadeIn 0.2s ease forwards; }
    .mb-overlay.open               { animation: overlayFadeIn 0.2s ease forwards; }

    /* ── 4. Alert messages slide in ───────────────────────────── */
    @keyframes alertSlideDown {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .alert { animation: alertSlideDown 0.18s ease; }
    .s-alert:not(:empty) { animation: alertSlideDown 0.18s ease; }

    /* ── 5. Table row hover transition ────────────────────────── */
    tbody tr { transition: background 0.12s; }
    .hms-table tbody tr { transition: background 0.12s; }

    /* ── 6. Button press micro-interactions ───────────────────── */
    .btn:active { transform: scale(0.97); transition: transform 0.07s; }
    .btn-confirm-pay:active { transform: scale(0.96); }
    .filter-chip:active  { transform: scale(0.94); }
    /* Staff modal: section/master toggle pills — reflects checked state via CSS so it
       stays correct whether toggled by the user or set programmatically (role presets) */
    .sf-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; font-size:.78rem; font-weight:600; cursor:pointer; border:1.5px solid #e5e7eb; background:#fff; color:#374151; transition:all .15s; }
    .sf-pill:has(input:checked) { border-color:#7c3aed; background:#7c3aed; color:#fff; }
    .sf-pill input { display:none; }
    .disc-preset:active  { transform: scale(0.94); }
    .calendar-nav button:active { transform: scale(0.93); }
    .mode-tab:active { transform: scale(0.95); }
    .hms-stat:active { transform: scale(0.98); }

    /* ── Revenue Intelligence KPI tiles ──────────────────────── */
    .ri-kpi { background:#fff; border-radius:10px; padding:14px 16px; border:1px solid var(--gray-200); transition:box-shadow .2s,transform .2s; position:relative; cursor:pointer; user-select:none; }
    .ri-kpi:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-1px); }
    .ri-kpi.kpi-open { box-shadow:0 4px 20px rgba(0,0,0,.12); transform:translateY(-1px); }
    .ri-kpi-detail { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s; opacity:0; }
    .ri-kpi-detail.open { max-height:280px; opacity:1; }
    .ri-kpi-detail-inner { border-top:1px dashed var(--gray-200); margin-top:10px; padding-top:10px; }
    .rikd-row { display:flex; justify-content:space-between; align-items:center; font-size:.65rem; margin-bottom:5px; color:var(--gray-600); }
    .rikd-val { font-weight:800; color:var(--primary-blue); white-space:nowrap; }
    .rikd-bar-wrap { background:var(--gray-200); border-radius:4px; height:5px; overflow:hidden; margin:5px 0 3px; }
    .rikd-bar-fill { height:100%; border-radius:4px; width:0; transition:width .9s cubic-bezier(.4,0,.2,1); }
    .rikd-sub-bars .rikd-mini-row { margin-bottom:6px; }
    .rikd-mini-row .rikd-bar-wrap { height:4px; margin:2px 0; }
    .ri-kpi-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:10px; }
    .ri-kpi-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; color:var(--gray-500); margin-bottom:4px; font-weight:600; }
    .ri-kpi-val { font-size:1.35rem; font-weight:800; color:var(--primary-blue); line-height:1.1; margin-bottom:4px; }
    .ri-kpi-sub { font-size:.62rem; color:var(--gray-400); line-height:1.3; }
    @media(max-width:900px) { #riKPIGrid { grid-template-columns:repeat(2,1fr) !important; } }

    /* ── Command Panel (analytics Option 2) ──────────────────────── */
    .cp-panel { background:#1a3d5c; border-radius:16px; padding:20px 26px 22px; margin-bottom:18px; position:relative; overflow:hidden; animation:cpCardIn .5s ease both; }
    .cp-panel::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; background:rgba(201,169,98,.06); border-radius:50%; pointer-events:none; }
    .cp-panel::after { content:''; position:absolute; bottom:-80px; left:15%; width:320px; height:320px; background:rgba(255,255,255,.025); border-radius:50%; pointer-events:none; }
    .cp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .cp-hotel { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.2px; }
    .cp-date { font-size:.65rem; color:rgba(255,255,255,.45); margin-top:3px; text-transform:uppercase; letter-spacing:.8px; }
    .cp-clock-row { display:flex; justify-content:center; margin-bottom:14px; }
    .cp-clock { font-size:.85rem; font-weight:700; color:var(--gold); font-family:'Montserrat',sans-serif; letter-spacing:.3px; padding:5px 16px; border:1px solid rgba(201,169,98,.3); border-radius:20px; background:rgba(201,169,98,.08); }
    .cp-ops-wrap { position:relative; }
    .cp-ops-grid { display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .cp-ops-grid::-webkit-scrollbar { display:none; }
    .cp-ops-scroll-hint {
      position:absolute; top:0; right:0; bottom:0; width:44px;
      display:flex; align-items:center; justify-content:flex-end;
      padding-right:4px; pointer-events:none;
      background:linear-gradient(to right, rgba(26,61,92,0), #1a3d5c 70%);
      opacity:0; transition:opacity .3s ease;
    }
    .cp-ops-scroll-hint.visible { opacity:1; }
    .cp-ops-scroll-hint i { color:var(--gold); font-size:.8rem; animation:cpScrollHintNudge 1.3s ease-in-out infinite; }
    @keyframes cpScrollHintNudge { 0%,100% { transform:translateX(-2px); opacity:.55; } 50% { transform:translateX(4px); opacity:1; } }
    .cp-ops-scroll-hint-left {
      position:absolute; top:0; left:0; bottom:0; width:44px;
      display:flex; align-items:center; justify-content:flex-start;
      padding-left:4px; pointer-events:none;
      background:linear-gradient(to left, rgba(26,61,92,0), #1a3d5c 70%);
      opacity:0; transition:opacity .3s ease;
    }
    .cp-ops-scroll-hint-left.visible { opacity:1; }
    .cp-ops-scroll-hint-left i { color:var(--gold); font-size:.8rem; animation:cpScrollHintNudgeLeft 1.3s ease-in-out infinite; }
    @keyframes cpScrollHintNudgeLeft { 0%,100% { transform:translateX(2px); opacity:.55; } 50% { transform:translateX(-4px); opacity:1; } }
    .cp-ops-stat { display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; border-radius:10px; transition:background .18s; position:relative; flex:1 1 0; min-width:158px; }
    .cp-ops-stat:not(:last-child)::after { content:''; position:absolute; right:0; top:10%; height:80%; width:1px; background:rgba(255,255,255,.13); }
    .cp-ops-stat:hover { background:rgba(255,255,255,.07); }
    .cp-ops-icon { width:42px; height:42px; background:rgba(201,169,98,.18); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--gold); flex-shrink:0; transition:background .2s; }
    .cp-ops-stat:hover .cp-ops-icon { background:rgba(201,169,98,.3); }
    .cp-ops-val { font-size:1.9rem; font-weight:800; color:#fff; line-height:1; letter-spacing:-.5px; overflow:hidden; display:block; }
    .cp-ops-label { font-size:.6rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.7px; margin-top:4px; font-weight:600; }
    .cp-metrics-row { display:flex; gap:16px; margin-bottom:20px; }
    .cp-metrics-group { display:flex; flex-direction:column; gap:8px; }
    .cp-metrics-group.g-revenue { flex:3; }
    .cp-metrics-group.g-guests  { flex:2; }
    .cp-mg-label { font-size:.58rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray-400); font-weight:800; padding-left:2px; }
    .cp-metrics-cards { display:flex; gap:12px; flex:1; }
    .cp-metric-card { flex:1; background:#fff; border-radius:12px; padding:16px 14px; box-shadow:0 2px 12px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:transform .2s,box-shadow .2s; position:relative; overflow:hidden; border-top:3px solid transparent; }
    .cp-metric-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.11); }
    .cp-mc-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
    .cp-mc-label { font-size:.63rem; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-500); font-weight:700; }
    .cp-metric-card .val { font-size:1.3rem; font-weight:800; line-height:1; overflow:hidden; display:block; }
    .cp-mc-green  { border-top-color:#28a745; } .cp-mc-green .cp-mc-icon  { background:#e8f5e9; color:#28a745; } .cp-mc-green .val  { color:#28a745; }
    .cp-mc-blue   { border-top-color:#1a3d5c; } .cp-mc-blue .cp-mc-icon   { background:#e3f0f8; color:#1a3d5c; } .cp-mc-blue .val   { color:#1a3d5c; }
    .cp-mc-gold   { border-top-color:var(--gold); } .cp-mc-gold .cp-mc-icon { background:#fdf5e4; color:var(--gold); } .cp-mc-gold .val { color:var(--gold); }
    .cp-mc-teal   { border-top-color:#00695c; } .cp-mc-teal .cp-mc-icon   { background:#e0f2f1; color:#00695c; } .cp-mc-teal .val   { color:#00695c; }
    .cp-mc-purple { border-top-color:#7b1fa2; } .cp-mc-purple .cp-mc-icon { background:#f3e5f5; color:#7b1fa2; } .cp-mc-purple .val { color:#7b1fa2; }
    /* Animations */
    @keyframes hsvShimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
    @keyframes cpRollIn { from{transform:translateY(40%);opacity:0;} to{transform:translateY(0);opacity:1;} }
    @keyframes cpCardIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
    .cp-ops-val.rolling { animation:cpRollIn .5s cubic-bezier(.34,1.56,.64,1) both; }
    .cp-metric-card .val.rolling { animation:cpRollIn .45s cubic-bezier(.34,1.56,.64,1) both; }
    .cp-metric-card:nth-child(1) { animation:cpCardIn .4s .05s ease both; }
    .cp-metric-card:nth-child(2) { animation:cpCardIn .4s .10s ease both; }
    .cp-metric-card:nth-child(3) { animation:cpCardIn .4s .15s ease both; }
    .cp-metric-card:nth-child(4) { animation:cpCardIn .4s .20s ease both; }
    .cp-metric-card:nth-child(5) { animation:cpCardIn .4s .25s ease both; }
    /* Shimmer loading skeleton */
    .cp-ops-val.hsv-loading { width:70px; height:1.7rem; background:linear-gradient(90deg,rgba(255,255,255,.12) 25%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.12) 75%); background-size:800px 100%; animation:hsvShimmer 1.4s infinite; border-radius:6px; }
    .cp-metric-card .val.hsv-loading { width:65%; height:1.2rem; background:linear-gradient(90deg,var(--gray-200) 25%,#f8f9fa 50%,var(--gray-200) 75%); background-size:800px 100%; animation:hsvShimmer 1.4s infinite; border-radius:6px; }
    @media(max-width:900px) { .cp-metrics-row { flex-direction:column; } .cp-metrics-group.g-revenue,.cp-metrics-group.g-guests { flex:none; } }
    @media(max-width:600px) { .cp-ops-val { font-size:1.5rem; } .cp-hotel { font-size:1rem; } .cp-metrics-cards { flex-wrap:wrap; } .cp-metric-card { min-width:calc(50% - 6px); } }
    @media(max-width:480px) { .cp-ops-stat { padding:10px 12px; gap:10px; } .cp-ops-icon { width:36px; height:36px; font-size:.85rem; } }

    /* ── 7. Form input focus glow ─────────────────────────────── */
    .mb-field input:focus,
    .mb-field select:focus,
    .mb-field textarea:focus {
      box-shadow: 0 0 0 3px rgba(201,169,98,0.16);
    }
    .hms-modal-body .field input:focus,
    .hms-modal-body .field select:focus,
    .hms-modal-body .field textarea:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 3px rgba(201,169,98,0.13);
      outline: none;
    }
    .form-control:focus { box-shadow: 0 0 0 3px rgba(26,61,92,0.1); }

    /* ── 8. Sidebar nav: smooth border-left indicator ─────────── */
    .sidebar-nav li a { border-left: 3px solid transparent; }
    .sidebar-nav li a:hover,
    .sidebar-nav li a.active { border-left-color: var(--gold); }

    /* ── 9. Calendar booking cards slide in ───────────────────── */
    @keyframes cardSlideIn {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .cal-booking-card { animation: cardSlideIn 0.18s ease; }

    /* ── 10. Shimmer loading utility ──────────────────────────── */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position:  600px 0; }
    }
    .shimmer {
      background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: 4px;
    }

    /* ── 11. Keyboard focus rings ─────────────────────────────── */
    button:focus-visible,
    a:focus-visible,
    select:focus-visible,
    input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* ── 12. Prefers reduced motion ───────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1ms !important;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       COMPREHENSIVE DARK MODE FIXES
       ══════════════════════════════════════════════════════════════ */

    /* ── Chat section ── */
    body.dark-mode #chatContainer { box-shadow: 0 2px 16px rgba(0,0,0,.3) !important; }
    body.dark-mode #chatConvoList { background: #161b22 !important; border-right-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode #chatConvoList > div:first-child { border-bottom-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode #chatWindow { background: #161b22 !important; }
    body.dark-mode #chatWindowHeader { background: #161b22 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode #chatWindowName { color: #e6edf3 !important; }
    body.dark-mode #chatWindowMeta { color: rgba(255,255,255,0.4) !important; }
    body.dark-mode #chatWindowMessages { background: #0d1117 !important; }
    body.dark-mode #chatReplyArea { background: #161b22 !important; border-top-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode #chatReplyInput { background: #0d1117 !important; border-color: rgba(255,255,255,0.12) !important; color: #e6edf3 !important; }
    body.dark-mode #adminEmojiPicker { background: #161b22 !important; border: 1px solid rgba(255,255,255,0.1) !important; }
    body.dark-mode #chatConvoItems > div { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .chat-msg-user { background: #21262d !important; color: #e6edf3 !important; border-color: rgba(255,255,255,0.08) !important; }

    /* ── Revenue Intelligence KPIs ── */
    body.dark-mode .ri-kpi { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .ri-kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; }
    body.dark-mode .ri-kpi-label { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .ri-kpi-val { color: #e6edf3 !important; }
    body.dark-mode .ri-kpi-sub { color: rgba(255,255,255,0.35) !important; }

    /* ── Command Panel (dark) ── */
    body.dark-mode .cp-panel { background:#0d1f2d !important; }
    body.dark-mode .cp-metric-card { background:#161b22 !important; }
    body.dark-mode .cp-metric-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.4) !important; }
    body.dark-mode .cp-mc-label { color:rgba(255,255,255,.5) !important; }
    body.dark-mode .cp-mc-green .val  { color:#a5d6a7 !important; }
    body.dark-mode .cp-mc-blue .val   { color:#90caf9 !important; }
    body.dark-mode .cp-mc-gold .val   { color:var(--gold) !important; }
    body.dark-mode .cp-mc-purple .val { color:#ce93d8 !important; }
    body.dark-mode .cp-mc-teal .val   { color:#80cbc4 !important; }
    body.dark-mode .cp-mc-green .cp-mc-icon  { background:rgba(40,167,69,.2) !important; }
    body.dark-mode .cp-mc-blue .cp-mc-icon   { background:rgba(26,61,92,.4) !important; }
    body.dark-mode .cp-mc-gold .cp-mc-icon   { background:rgba(201,169,98,.15) !important; }
    body.dark-mode .cp-mc-purple .cp-mc-icon { background:rgba(123,31,162,.2) !important; }
    body.dark-mode .cp-mc-teal .cp-mc-icon   { background:rgba(0,105,92,.2) !important; }
    body.dark-mode .cp-mg-label { color:rgba(255,255,255,.35) !important; }
    body.dark-mode .cp-metric-card .val.hsv-loading { background:linear-gradient(90deg,#21262d 25%,#2d333b 50%,#21262d 75%) !important; background-size:800px 100% !important; }

    /* ── Welcome banner, section headings ── */
    body.dark-mode #welcomeBanner,
    body.dark-mode #welcomeBannerHMS { color: #e6edf3 !important; }
    body.dark-mode .hms-card h3 { color: #e6edf3 !important; }
    body.dark-mode .hms-card h3 span { color: rgba(255,255,255,0.45) !important; }

    /* ── Topbar icons (logout, chat) ── */
    body.dark-mode .topbar button[onclick="doAdminLogout()"] { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode #topBarChatIndicator { color: rgba(255,255,255,0.6) !important; }

    /* ── Stat card values with inline colors ── */
    body.dark-mode #hmsRetainedCount { color: #ce93d8 !important; }
    body.dark-mode #riDiscount { color: #ef5350 !important; }

    /* ── Trial lockout overlay ── */
    body.dark-mode .tl-card { background: #161b22 !important; }
    body.dark-mode .tl-title { color: #e6edf3 !important; }
    body.dark-mode .tl-desc { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .tl-features { background: #0d1117 !important; border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode .tl-feature { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .tl-btn-logout { color: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.12) !important; }
    body.dark-mode .tl-btn-logout:hover { color: #e6edf3 !important; background: rgba(255,255,255,0.06) !important; }

    /* ── Emoji button ── */
    body.dark-mode .chat-emoji-btn { border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.5) !important; }
    body.dark-mode .chat-emoji-btn:hover { background: rgba(255,255,255,0.06) !important; }
    .chat-emoji-btn:hover { background: #f3f4f6; }

    /* ── Scrollbar in dark mode ── */
    body.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
    body.dark-mode ::-webkit-scrollbar-track { background: #0d1117; }
    body.dark-mode ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
    body.dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

    /* ── Refresh / outline buttons in cards ── */
    body.dark-mode .hms-card > div > button.btn[style*="background:var(--gray-100)"] { background: #21262d !important; color: rgba(255,255,255,0.7) !important; }

    /* ── Shimmer loading placeholder ── */
    body.dark-mode .shimmer { background: linear-gradient(90deg, #161b22 25%, #21262d 50%, #161b22 75%) !important; }

    /* ── Manual booking overlay ── */
    body.dark-mode .mb-overlay { background: rgba(0,0,0,0.7) !important; }
    body.dark-mode .mb-summary { border-color: rgba(255,255,255,0.08) !important; }

    /* ── Analytics detail overlay ── */
    body.dark-mode .analytics-detail-overlay { background: rgba(0,0,0,0.7) !important; }
    body.dark-mode .analytics-detail-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .analytics-detail-header h2 { color: #e6edf3 !important; }
    body.dark-mode .analytics-detail-close { color: rgba(255,255,255,0.6) !important; }

    /* ── Modal header close buttons ── */
    body.dark-mode .hms-modal-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
    body.dark-mode .hms-modal-header h2 { color: #e6edf3 !important; }
    body.dark-mode .hms-modal-close { color: rgba(255,255,255,0.6) !important; }

    /* ── Hardcoded color overrides for inline styles ── */
    body.dark-mode [style*="color:#1f2937"] { color: #e6edf3 !important; }
    body.dark-mode [style*="color:#374151"] { color: rgba(255,255,255,0.7) !important; }
    body.dark-mode [style*="color:#6b7280"] { color: rgba(255,255,255,0.5) !important; }
    body.dark-mode [style*="color:#9ca3af"] { color: rgba(255,255,255,0.4) !important; }
    body.dark-mode [style*="color:#856404"] { color: #ffd54f !important; }
    body.dark-mode [style*="color:#0c5460"] { color: #4fc3f7 !important; }
    body.dark-mode [style*="color:#155724"] { color: #66bb6a !important; }
    body.dark-mode [style*="color:#1a3d5c"] { color: #8bb3d9 !important; }
    body.dark-mode [style*="color:#475569"] { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode [style*="color:#333"] { color: #e6edf3 !important; }

    body.dark-mode [style*="background:#fff;"],
    body.dark-mode [style*="background:#fff "],
    body.dark-mode [style*="background: #fff;"],
    body.dark-mode [style*="background: #fff "] { background: #161b22 !important; }
    body.dark-mode [style*="background:#f9fafb"] { background: #0d1117 !important; }
    body.dark-mode [style*="background:#f3f4f6"] { background: #21262d !important; }
    body.dark-mode [style*="background:#fff3cd"] { background: rgba(133,100,4,0.2) !important; }
    body.dark-mode [style*="background:#d1ecf1"] { background: rgba(12,84,96,0.2) !important; }
    body.dark-mode [style*="background:#d4edda"] { background: rgba(21,87,36,0.2) !important; }
    body.dark-mode [style*="background:#fff8e6"] { background: rgba(201,169,98,0.15) !important; }
    body.dark-mode [style*="background:#e8f5e9"] { background: rgba(46,125,50,0.15) !important; }
    body.dark-mode [style*="background:#fef2f2"] { background: rgba(198,40,40,0.15) !important; }
    body.dark-mode [style*="background:#f3e5f5"] { background: rgba(123,31,162,0.15) !important; }
    body.dark-mode [style*="background:#f8fafc"] { background: #0d1117 !important; }
    body.dark-mode [style*="background:#e2e8f0"] { background: rgba(255,255,255,0.08) !important; }

    /* ── Borders with hardcoded light colors ── */
    body.dark-mode [style*="border:1px solid #e5e7eb"],
    body.dark-mode [style*="border-bottom:1px solid #e5e7eb"],
    body.dark-mode [style*="border-right:1px solid #e5e7eb"],
    body.dark-mode [style*="border-top:1px solid #e5e7eb"] { border-color: rgba(255,255,255,0.08) !important; }
    body.dark-mode [style*="border-bottom:1px solid #f3f4f6"] { border-color: rgba(255,255,255,0.06) !important; }

    /* ── Tooltip dark mode ── */
    body.dark-mode [data-tooltip]::before { background: #21262d !important; color: #e6edf3 !important; border: 1px solid rgba(255,255,255,0.1) !important; }
    body.dark-mode [data-tooltip]::after { border-top-color: #21262d !important; }

    /* ── JS-rendered overlay dialogs (confirm pay, delete, edit room, add room) ── */
    body.dark-mode #confirmPayOverlay > div,
    body.dark-mode #delResOverlay > div,
    body.dark-mode #editRoomOverlay > div,
    body.dark-mode #addRoomOverlay > div,
    body.dark-mode #deleteProgressDiv { background: #161b22 !important; color: #e6edf3 !important; }
    body.dark-mode #confirmPayOverlay h3,
    body.dark-mode #delResOverlay h3,
    body.dark-mode #editRoomOverlay h3,
    body.dark-mode #addRoomOverlay h3 { color: #e6edf3 !important; }
    body.dark-mode #confirmPayOverlay p,
    body.dark-mode #delResOverlay p,
    body.dark-mode #editRoomOverlay p,
    body.dark-mode #addRoomOverlay p { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode #confirmPayOverlay label,
    body.dark-mode #editRoomOverlay label,
    body.dark-mode #addRoomOverlay label { color: rgba(255,255,255,0.6) !important; }

    /* ── Chat toast notification ── */
    body.dark-mode #chatToastNotif { background: #161b22 !important; box-shadow: 0 8px 32px rgba(0,0,0,.4) !important; }
    body.dark-mode #chatToastNotif div[style*="font-weight:600"] { color: #e6edf3 !important; }
    body.dark-mode #chatToastNotif div[style*="font-size:.78rem"] { color: rgba(255,255,255,0.5) !important; }

    /* ── Subscription/plan info in settings ── */
    body.dark-mode .s-card span[style*="color:#1a3d5c"] { color: #e6edf3 !important; }
    body.dark-mode .s-card span[style*="color:#475569"] { color: rgba(255,255,255,0.6) !important; }
    body.dark-mode .s-card span[style*="color:#333"] { color: #e6edf3 !important; }
    body.dark-mode .s-card div[style*="color:#1a3d5c"] { color: #e6edf3 !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE 10/10 — Bottom Nav · Sheet Modals · Touch · A11y
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottom Navigation Bar ────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--primary-blue);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bn-inner {
  display: flex;
  height: 60px;
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,0.5);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 6px 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s;
  text-decoration: none;
}
.bn-item i {
  font-size: 1.15rem;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), color 0.18s;
}
.bn-item.active { color: var(--gold); }
.bn-item.active i { transform: translateY(-3px); }
.bn-item:active i { transform: scale(0.82); }
.bn-item.bn-menu.active { color: rgba(255,255,255,0.9); }

/* ── Sheet-style modals on mobile ─────────────────────────────── */
@keyframes hmsSheetUp {
  from { transform: translateY(48px); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1;   }
}
@keyframes hmsSheetDown {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(64px); opacity: 0; }
}

/* ── Skeleton loader ──────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skel-line { height: 13px; border-radius: 4px; margin-bottom: 6px; }
.skel-val  { height: 30px; border-radius: 6px; }
.skel-card { height: 82px; border-radius: 12px; }

/* ══ 768px — Tablet / Phone (primary mobile breakpoint) ══════════ */
@media (max-width: 768px) {

  /* Keep hamburger; bottom nav off — nothing is hidden */
  .mobile-bottom-nav { display: none; }

  /* Sidebar stays full-height, slides in via hamburger */
  .sidebar { padding-top: 20px; width: 240px; }

  /* ── Sheet modals: slide up from bottom ──── */
  .hms-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .hms-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 92dvh;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: hmsSheetUp 0.28s cubic-bezier(.32,1.25,.64,1) both;
  }
  /* Drag handle bar */
  .hms-modal::before {
    content: '';
    display: block;
    width: 44px; height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    margin: 12px auto 4px;
    flex-shrink: 0;
  }

  /* ── Touch targets: 44px minimum everywhere ──── */
  .btn                  { min-height: 44px; }
  .btn-sm               { min-height: 40px; }
  .hms-table td .btn,
  .hms-table td button  { min-height: 36px; } /* table rows stay compact */
  .close-btn            { min-width: 44px; min-height: 44px; }
  .nav-group-label      { min-height: 44px; display: flex; align-items: center; }
  .sidebar-nav li a     { min-height: 44px; display: flex; align-items: center; }
  .mode-tab             { min-height: 48px; }

  /* ── Fix sub-12px font sizes ──── */
  .sidebar-offline-pill,
  .sidebar-online-pill  { font-size: 0.72rem !important; }
  .nav-group-label      { font-size: 0.72rem !important; }
  .sync-badge-tap       { font-size: 0.7rem  !important; }
  .ri-kpi-label         { font-size: 0.72rem !important; }
  .fd2-badge, .fd-badge { font-size: 0.72rem !important; }
  .calendar-grid .cal-day,
  .cal-day              { font-size: 0.75rem !important; }
  .cal-day-header       { font-size: 0.72rem !important; }
  .hms-table            { font-size: 0.82rem; }

  /* ── Inputs: 16px prevents iOS zoom, 44px touch target ──── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  /* But keep table cell inputs compact */
  .hms-table input,
  .hms-table select { min-height: 32px; font-size: 0.82rem !important; }

  /* ── Settings nav: horizontal scrollable tabs ──── */
  .settings-layout   { flex-direction: column !important; }
  .settings-nav {
    flex-direction: row !important;
    min-width: unset !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    border-right: none !important;
    border-bottom: 2px solid var(--gray-200) !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav .s-nav-item {
    display: inline-flex !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-size: 0.82rem !important;
    min-height: 48px;
  }
  .settings-nav .s-nav-item.active {
    border-bottom-color: var(--primary-blue) !important;
    background: rgba(26,61,92,0.06) !important;
  }

  /* ── Notification dropdown full width ──── */
  .notif-dropdown {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: 78vh;
    overflow-y: auto;
  }

  /* ── Analytics command panel: single scrollable row on mobile too ──── */
  .cp-ops-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
  }
  .cp-ops-stat { min-width: 132px !important; }

  /* ── Stats grid: always 2 col on mobile ──── */
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px; }

  /* ── Calendar: min tap target ──── */
  .calendar-grid .cal-day { min-height: 44px !important; }
  .calendar-nav button    { min-height: 44px; min-width: 44px; }

  /* ── Dashboard grids: collapse to single column on mobile ──── */
  .bp-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bp-grid + .bp-grid { margin-top: 16px !important; }
  /* 4-KPI row: 2×2 grid on mobile instead of 4 across */
  .ri-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ── Settings: all tabs responsive ──── */

  /* Room table: allow horizontal scroll, give min-width so it doesn't squish */
  .s-room-list-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .s-room-table { min-width: 520px; }

  /* General: color picker grid → single column */
  .theme-color-grid { grid-template-columns: 1fr !important; }

  /* Add-ons: stack name on its own line, price+type+delete on next */
  .addon-config-row { flex-wrap: wrap !important; gap: 6px !important; }
  .addon-config-row input[type="text"]   { flex: 1 1 100% !important; width: 100% !important; }
  .addon-config-row input[type="number"] { flex: 1 !important; min-width: 70px !important; width: auto !important; }
  .addon-config-row select               { flex: 1 !important; min-width: 90px !important; }

  /* Danger zone: 2×2 already at 860px, keep it */

  /* s-card-header: wrap when actions overflow */
  .s-card-header { flex-wrap: wrap; }
  .s-card-header .s-btn { margin-top: 4px; }

  /* Settings title bar stack */
  .settings-title-bar { flex-wrap: wrap; }

  /* ── Settings nav: icon grid — all tabs visible at once ──── */
  .settings-layout { flex-direction: column; }
  .settings-nav {
    width: 100% !important;
    min-width: unset !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
  }
  .s-nav-section-label { display: none !important; }
  .s-nav-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 6px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--gray-200) !important;
    background: var(--white) !important;
    min-height: 68px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 0 !important; /* hide the span text until set below */
  }
  .s-nav-item i {
    font-size: 1.25rem !important;
    width: auto !important;
    color: var(--gray-500) !important;
  }
  .s-nav-item span {
    font-size: 0.6rem !important;
    line-height: 1.25 !important;
    color: var(--gray-600) !important;
    display: block !important;
  }
  .s-nav-active {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
  }
  .s-nav-active i  { color: var(--gold) !important; }
  .s-nav-active span { color: #fff !important; font-weight: 700 !important; }
  .settings-content { padding-top: 0; }

  /* ── Front desk search bar: input full-width, Search/Clear share a row ── */
  .fd-search-bar { padding: 14px 16px !important; }
  .fd-search-row { flex-direction: column; gap: 10px; }
  .fd-search-inputs { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .fd-search-inputs input[type="text"] { width: 100%; min-width: 0; font-size: 16px; }
  .fd-search-btns { display: flex; gap: 8px; width: 100%; }
  .fd-search-btns .btn { flex: 1; justify-content: center; }
  .fd-manual-book-btn { width: 100%; justify-content: center; white-space: normal !important; }
  .fd-btn-label { display: inline; }

  /* Bar POS toolbar: the search box's fixed width:190px left only ~74px for
     the category filter row (which needs ~580px to show all chips) -- nearly
     the whole category strip was invisible, with no visible peek/scroll hint
     that anything but "All" existed (found 2026-08-30). Stack search above
     categories instead, giving the scrollable chip strip the full width. */
  #barPosSearchFilterRow { flex-wrap: wrap; }
  #barPosSearchFilterRow #barDrinkSearch { width: 100% !important; box-sizing: border-box; }
  #barPosSearchFilterRow #barCatFilters { flex: 1 1 100% !important; }
  /* Grid/list choice is moot on mobile (always forced to list -- see
     _barPosView() in app.v122.js), so hide the now-nonfunctional toggle. */
  #barPosViewToggle { display: none !important; }

  /* Drink Menu list-view row: rigid `1fr 130px auto` grid had no mobile
     fallback -- the auto-sized action column (Active badge + Edit Price +
     delete) needed more room than was left, clipping "Edit Price" at the
     screen edge (found 2026-08-30). Stack into one column instead. */
  .bar-menu-list-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .bar-menu-list-row > div:nth-child(2),
  .bar-menu-list-row > div:nth-child(2) > div { text-align: left !important; }

  /* Staff Messages header: icon-only Refresh on mobile -- the section already
     auto-polls (staff list every 10s, active thread every 2s), so the text
     label is just noise at this width; kept as an icon-only button rather
     than removed since it's still a useful "force it now" escape hatch. */
  #scRefreshBtn { padding: 10px 12px !important; }
  #scRefreshBtn .sc-refresh-label { display: none; }
}

/* ══ 480px — Small phones ════════════════════════════════════════ */
@media (max-width: 480px) {
  .sidebar { width: 220px; }
  .bn-item { font-size: 0.58rem; }
  .bn-item i { font-size: 1.05rem; }

  /* Single column on tiny phones for dense grids */
  .cp-metrics-row { flex-direction: column; gap: 10px; }
  .cp-metrics-group.g-revenue,
  .cp-metrics-group.g-guests { flex: none; width: 100%; }
  .cp-metrics-cards { grid-template-columns: 1fr 1fr !important; }

  /* HMS header: stack title and actions */
  .hms-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hms-header > div:last-child { width: 100%; }
  .hms-header > div:last-child .btn { flex: 1; }

  /* Modals full height on tiny screens */
  .hms-modal { max-height: 96dvh; max-height: 96vh; }
}

/* ── Safe area (iPhone notch / Dynamic Island) ────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Swipe-to-dismiss hint on sheet modals ────────────────────── */
@media (max-width: 768px) {
  .hms-modal-overlay.open { cursor: default; }
}

/* ── Staff modal: top-aligned on mobile so dropdowns open downward ── */
@media (max-width: 768px) {
  #staffModal {
    align-items: flex-start !important;
    padding: 20px 10px !important;
  }
  #staffModal .hms-modal {
    border-radius: 14px !important;
    max-height: calc(100dvh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    animation: modalSlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  #staffModal .hms-modal::before { display: none !important; }
}

/* ══ LIVE REVENUE GROWTH CHART ══════════════════════════════════ */
.rg-card {
  background: #0d1421;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.rg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rg-left { display: flex; align-items: center; gap: 14px; }
.rg-live-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(14,203,129,.12); border: 1px solid rgba(14,203,129,.25);
  color: #0ecb81; font-size: .58rem; font-weight: 900;
  letter-spacing: 1.2px; padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
}
.rg-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #0ecb81;
  display: inline-block; animation: rgPulse 1.6s ease-in-out infinite;
}
@keyframes rgPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}
.rg-symbol { font-size: .62rem; font-weight: 800; letter-spacing: 1px; color: rgba(255,255,255,.35); text-transform: uppercase; margin-bottom: 2px; }
.rg-month-label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.7); }
.rg-right { text-align: right; }
.rg-total { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rg-change { font-size: .75rem; font-weight: 700; margin-top: 3px; color: rgba(255,255,255,.45); }
.rg-change.up   { color: #0ecb81; }
.rg-change.down { color: #f6465d; }

/* Stats row */
.rg-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rg-stat {
  padding: 14px 20px; border-right: 1px solid rgba(255,255,255,.05);
}
.rg-stat:last-child { border-right: none; }
.rg-stat-label { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.rg-stat-label i { margin-right: 4px; }
.rg-stat-val { font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rg-stat-sub { font-size: .68rem; color: rgba(255,255,255,.35); margin-top: 2px; }

/* Controls row */
.rg-controls-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.rg-zoom-group { display: flex; gap: 4px; }
.rg-zoom-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: .7rem; font-weight: 700;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: all .15s;
}
.rg-zoom-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.rg-zoom-btn.active { background: rgba(14,203,129,.15); border-color: rgba(14,203,129,.4); color: #0ecb81; }
.rg-export-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4); font-size: .75rem; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.rg-export-btn:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.25); }
.rg-legend { display: flex; align-items: center; gap: 14px; }
.rg-leg-item { display: flex; align-items: center; gap: 5px; font-size: .67rem; color: rgba(255,255,255,.4); font-weight: 600; cursor: pointer; transition: opacity .15s, color .15s; user-select: none; }
.rg-leg-item:hover { color: rgba(255,255,255,.75); }
.rg-leg-dot { width: 8px; height: 3px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.rg-leg-dash { background: repeating-linear-gradient(90deg,#f0b90b 0,#f0b90b 3px,transparent 3px,transparent 6px) !important; }

/* Canvas */
.rg-canvas-wrap { position: relative; height: 285px; }
.rg-canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* Tooltip */
.rg-tooltip {
  position: absolute; background: rgba(8,14,28,.96); border: 1px solid rgba(14,203,129,.25);
  border-radius: 10px; padding: 10px 14px; pointer-events: none; display: none;
  white-space: nowrap; backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transform: translate(-50%, calc(-100% - 12px)); z-index: 20; min-width: 185px;
}
.rg-tt-label { font-size: .63rem; color: rgba(255,255,255,.4); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.rg-tt-val   { font-size: 1rem; color: #0ecb81; font-weight: 800; margin-bottom: 4px; line-height: 1.2; }
.rg-tt-row   { font-size: .7rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.rg-tt-hint  { font-size: .62rem; color: rgba(14,203,129,.55); margin-top: 6px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 5px; }

/* Drill-down panel */
.rg-drilldown {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  max-height: 280px; overflow-y: auto;
}
.rg-dd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.8);
  position: sticky; top: 0; background: #0d1421; z-index: 2;
}
.rg-dd-close { background: none; border: none; color: rgba(255,255,255,.4); font-size: .95rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rg-dd-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.rg-dd-body { padding: 8px 20px 14px; }
.rg-dd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04);
  font-size: .8rem;
}
.rg-dd-row:hover { background: rgba(255,255,255,.06); }
.rg-dd-guest { font-weight: 700; color: rgba(255,255,255,.85); }
.rg-dd-meta { font-size: .68rem; color: rgba(255,255,255,.35); margin-top: 2px; }
.rg-dd-amt { font-weight: 800; color: #0ecb81; font-size: .88rem; }
.rg-dd-method { font-size: .65rem; background: rgba(14,203,129,.12); color: #0ecb81; padding: 2px 7px; border-radius: 10px; font-weight: 700; }
.rg-dd-empty { text-align: center; color: rgba(255,255,255,.25); padding: 20px; font-size: .8rem; }

/* Footer */
.rg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px; font-size: .7rem;
  color: rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.05); font-weight: 600;
}

@media (max-width: 768px) {
  .rg-stats-row { grid-template-columns: repeat(2,1fr); }
  .rg-legend { display: none; }
  .rg-total { font-size: 1.35rem; }
}

/* ── Book Now FAB ────────────────────────────────────────────── */
.book-now-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: linear-gradient(135deg, var(--gold) 0%, #e6a800 100%);
  color: #1a1a2e;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,169,98,.5), 0 2px 8px rgba(0,0,0,.15);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, opacity .2s ease;
  letter-spacing: .2px;
  animation: fabEntrance .4s cubic-bezier(.34,1.56,.64,1) both;
}
.book-now-fab.fab-scroll-faded { opacity: .25; pointer-events: none; }
.book-now-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 32px rgba(201,169,98,.6), 0 4px 12px rgba(0,0,0,.18);
}
.book-now-fab:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 2px 10px rgba(201,169,98,.4);
}
.fab-icon {
  width: 26px;
  height: 26px;
  background: rgba(26,26,46,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  flex-shrink: 0;
}
.fab-label { white-space: nowrap; }
@keyframes fabEntrance {
  from { opacity: 0; transform: translateY(20px) scale(.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Mobile: sit above the bottom nav */
@media (max-width: 768px) {
  .book-now-fab {
    bottom: 76px;
    right: 16px;
    padding: 13px 18px 13px 14px;
    font-size: .85rem;
  }
  .fab-icon { width: 22px; height: 22px; font-size: .78rem; }
}

/* ── Dark mode: bottom nav ────────────────────────────────────── */
body.dark-mode .mobile-bottom-nav {
  background: #0d1f2d;
  border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .bn-item { color: rgba(255,255,255,0.4); }
body.dark-mode .bn-item.active { color: var(--gold); }
    body.dark-mode .s-card strong[style*="color:#1a3d5c"] { color: #e6edf3 !important; }

/* ── Audit Log Activity Feed ─────────────────────────────────── */
.al-stat-card {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.al-stat-icon { font-size: 1.3rem; width: 38px; text-align: center; flex-shrink: 0; }
.al-stat-val  { font-size: 1.5rem; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.al-stat-label { font-size: .71rem; color: var(--gray-500); font-weight: 500; }
.al-feed { display: flex; flex-direction: column; }
.al-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-400);
}
.al-date-header::before,
.al-date-header::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.al-date-header:first-child { margin-top: 4px; }
.al-group { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.al-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  transition: background .12s;
}
.al-entry:last-child  { border-bottom: none; }
.al-entry:hover       { background: var(--gray-50); }
.al-entry-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.al-entry-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0;
}
.al-entry-body { flex: 1; min-width: 0; }
.al-entry-top  { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; overflow: hidden; }
.al-action-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.al-entry-module  { font-size: .78rem; font-weight: 600; color: var(--gray-700); flex-shrink: 0; white-space: nowrap; }
.al-entry-details { font-size: .78rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.al-entry-meta    { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--gray-400); }
.al-entry-time    { margin-left: auto; font-size: .7rem; color: var(--gray-400); flex-shrink: 0; white-space: nowrap; }

/* ── Audit Log Filter Bar ────────────────────────────────────── */
.al-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Search */
.al-filter-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  transition: border-color .2s;
  background: #f9fafb;
}
.al-filter-search.focused { border-color: var(--primary-blue); background: #fff; }
.al-filter-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: .78rem;
  pointer-events: none;
}
.al-filter-search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: .82rem;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
}

/* Select dropdowns */
.al-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: #f9fafb;
  min-width: 148px;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.al-filter-select-wrap:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,.08);
  background: #fff;
}
.al-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 0 11px;
  color: var(--gray-400);
  font-size: .78rem;
  pointer-events: none;
  flex-shrink: 0;
}
.al-filter-select {
  flex: 1;
  padding: 9px 28px 9px 4px;
  border: none;
  background: transparent;
  font-size: .82rem;
  font-family: inherit;
  color: var(--gray-700, #374151);
  font-weight: 500;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 0;
}
.al-filter-select option { font-weight: 400; }
.al-filter-chevron {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .65rem;
  color: var(--gray-400);
  pointer-events: none;
  transition: transform .2s;
}
.al-filter-select-wrap:focus-within .al-filter-chevron { transform: translateY(-50%) rotate(180deg); color: var(--primary-blue); }

/* Colored state when an action is selected */
.al-filter-select-wrap.al-sel-active {
  border-color: var(--primary-blue);
  background: #eff6ff;
}
.al-filter-select-wrap.al-sel-active .al-filter-icon,
.al-filter-select-wrap.al-sel-active .al-filter-chevron { color: var(--primary-blue); }
.al-filter-select-wrap.al-sel-active .al-filter-select { color: var(--primary-blue); font-weight: 600; }

/* Date range */
.al-filter-date-group {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: #f9fafb;
  padding: 0 10px;
  transition: border-color .2s;
}
.al-filter-date-group:focus-within { border-color: var(--primary-blue); background: #fff; }
.al-filter-date-wrap { display: flex; align-items: center; gap: 5px; }
.al-filter-date-icon { font-size: .72rem; color: var(--gray-400); }
.al-filter-date {
  border: none;
  background: transparent;
  font-size: .82rem;
  font-family: inherit;
  padding: 9px 2px;
  outline: none;
  color: var(--gray-700, #374151);
  width: 120px;
}
.al-filter-date-sep { font-size: .78rem; color: var(--gray-400); font-weight: 600; flex-shrink: 0; }

/* ── Audit log responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  #alStatsStrip  { grid-template-columns: 1fr 1fr !important; }
  .al-entry-top  { flex-wrap: wrap; }
  .al-filter-bar { gap: 8px; }
  .al-filter-search { min-width: 100%; }
  .al-filter-date-group { flex-wrap: wrap; }

/* ── Staff Card Grid ─────────────────────────────────────────── */
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.staff-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .15s;
  display: flex;
  flex-direction: column;
}
.staff-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.staff-card-top {
  position: relative;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.staff-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  margin-bottom: 0;
}
.staff-card-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
}
.staff-card-body {
  padding: 14px 16px 10px;
  flex: 1;
}
.staff-card-name { font-size: .96rem; font-weight: 700; color: #1e293b; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-card-role { font-size: .76rem; color: var(--primary-blue); font-weight: 600; margin-bottom: 2px; }
.staff-card-dept { font-size: .73rem; color: var(--gray-500); margin-bottom: 6px; }
.staff-card-id   { font-size: .7rem; color: var(--gray-400); margin-bottom: 6px; }
.staff-card-id code { font-size: .72rem; background: #f3f4f6; padding: 1px 5px; border-radius: 4px; color: var(--gray-600); }
.staff-card-contact { font-size: .73rem; color: var(--gray-500); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-card-socials { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.staff-card-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--gray-100);
  background: #fafafa;
}
.staff-card-btn {
  flex: 1;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: opacity .15s;
}
.staff-card-btn:hover { opacity: .85; }
.staff-card-btn.view { background: #eff6ff; color: var(--primary-blue); }
.staff-card-btn.edit { background: var(--primary-blue); color: #fff; }
.staff-card-btn.del  { background: #fee2e2; color: #dc2626; flex: 0 0 auto; padding: 6px 10px; }

/* ── Staff Photo Upload Buttons ─────────────────────────────── */
.sf-photo-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px dashed var(--gray-300);
  border-radius: 10px;
  background: #f9fafb;
  color: var(--gray-600);
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.sf-photo-btn:hover {
  border-color: var(--primary-blue);
  background: #eff6ff;
  color: var(--primary-blue);
}
.sf-photo-btn i { font-size: .82rem; }

/* ── Staff Modal Tabs ────────────────────────────────────────── */
.sf-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  padding: 0 20px;
  background: #fafafa;
  gap: 2px;
}
.sf-tab {
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.sf-tab:hover { color: var(--primary-blue); }
.sf-tab.sf-tab-active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); background: transparent; }
.sf-tab-pane { display: block; }
.sf-tab-hidden { display: none !important; }

/* ── HMS Custom Dropdown — always opens downward ───────────── */
.hms-dd { position: relative; width: 100%; user-select: none; }

.hms-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, background .18s;
  outline: none;
  min-height: 42px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.hms-dd-btn:hover {
  border-color: #93c5fd;
  background: #fafcff;
  box-shadow: 0 2px 8px rgba(59,130,246,.12);
}
.hms-dd.open .hms-dd-btn {
  border-color: var(--primary-blue);
  background: #f0f7ff;
  box-shadow: 0 0 0 3.5px rgba(26,61,92,.11), 0 2px 8px rgba(26,61,92,.08);
}
.hms-dd-val {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-weight: 500;
}
.hms-dd-val.ph { color: #9ca3af; font-weight: 400; }
.hms-dd-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .18s;
}
.hms-dd.open .hms-dd-chevron {
  transform: rotate(180deg);
  color: var(--primary-blue);
}

.hms-dd-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 99999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--primary-blue);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.07);
  max-height: 248px;
  overflow-y: auto;
  padding: 4px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}
.hms-dd-list::-webkit-scrollbar { width: 4px; }
.hms-dd-list::-webkit-scrollbar-track { background: transparent; margin: 4px; }
.hms-dd-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

.hms-dd.open .hms-dd-list {
  display: block;
  animation: ddDrop .18s cubic-bezier(.16,1,.3,1);
}
@keyframes ddDrop {
  from { opacity:0; transform:translateY(-6px) scaleY(.97); }
  to   { opacity:1; transform:translateY(0) scaleY(1); }
}

.hms-dd-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 4px;
  font-size: .64rem;
  font-weight: 800;
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: .7px;
  opacity: .75;
}
.hms-dd-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #e5e7eb, transparent);
}

.hms-dd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 9px 16px;
  font-size: .875rem;
  color: #374151;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.hms-dd-opt:hover {
  background: #f0f9ff;
  color: var(--primary-blue);
  border-left-color: #93c5fd;
}
.hms-dd-opt.sel {
  background: #eff6ff;
  color: var(--primary-blue);
  font-weight: 600;
  border-left-color: var(--primary-blue);
}
.hms-dd-opt.sel::after {
  content: '✓';
  font-size: .8rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin-left: 6px;
}

/* ── Reservations Table ─────────────────────────────────────── */
}
.res-table-wrap { overflow-x: auto; width: 100%; }
.res-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.res-table thead tr { background: #f9fafb; border-bottom: 2px solid #e5e7eb; }
.res-table th { padding: 11px 16px; font-size: .72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; text-align: left; white-space: nowrap; }
.res-table td { padding: 15px 16px; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
.res-table tbody tr { transition: background .15s; }
.res-table tbody tr:nth-child(odd)  { background: #fff; }
.res-table tbody tr:nth-child(even) { background: #fafafa; }
.res-table tbody tr:hover { background: #f0f7ff; }
.res-table tbody tr[data-status="Pending"]     > td:first-child { border-left: 4px solid #d97706; }
.res-table tbody tr[data-status="Confirmed"]   > td:first-child { border-left: 4px solid #059669; }
.res-table tbody tr[data-status="Cancelled"]   > td:first-child { border-left: 4px solid #dc2626; }
.res-table tbody tr[data-status="Completed"]   > td:first-child { border-left: 4px solid #2563eb; }
.res-table tbody tr[data-status="Checked In"]  > td:first-child { border-left: 4px solid #7c3aed; }
.res-table tbody tr[data-status="Checked Out"] > td:first-child { border-left: 4px solid #0891b2; }
.res-row-name { font-size: .95rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.res-row-id   { font-size: .74rem; color: #9ca3af; font-family: monospace; margin-bottom: 3px; }
.res-row-contact { font-size: .82rem; color: #6b7280; }
.res-row-contact i { color: #9ca3af; margin-right: 4px; font-size: .7rem; width: 12px; }
.res-row-room-name { font-size: .9rem; font-weight: 600; color: #1f2937; margin-bottom: 5px; }
.res-row-dates-pill { display: inline-flex; align-items: center; gap: 5px; background: #f3f4f6; border-radius: 6px; padding: 4px 9px; }
.res-row-dates-pill span { font-size: .81rem; color: #374151; font-weight: 500; }
.res-row-dates-pill i { color: #9ca3af; font-size: .72rem; }
.res-row-addon { margin-top: 4px; font-size: .77rem; color: #d97706; }
.res-nights-num { font-size: 1.5rem; font-weight: 800; color: #1e3a5f; line-height: 1; }
.res-nights-label { font-size: .73rem; color: #9ca3af; margin-top: 2px; }
.res-pax { font-size: .73rem; color: #6b7280; margin-top: 3px; }
.res-amount { font-size: 1.05rem; font-weight: 800; color: #1e3a5f; margin-bottom: 4px; }
.res-paid-tag { font-size: .78rem; font-weight: 600; color: #059669; }
.res-balance-tag { font-size: .78rem; font-weight: 600; color: #dc2626; }
.res-status-badge { display: inline-block; font-size: .73rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; border: 1px solid; margin-bottom: 3px; }
.res-status-badge[data-status="Pending"]     { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.res-status-badge[data-status="Confirmed"]   { background: #ecfdf5; color: #059669; border-color: #6ee7b7; }
.res-status-badge[data-status="Cancelled"]   { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.res-status-badge[data-status="No Show"]     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.res-status-badge[data-status="Completed"]   { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.res-status-badge[data-status="Checked In"]  { background: #f5f3ff; color: #7c3aed; border-color: #c4b5fd; }
.res-status-badge[data-status="Checked Out"] { background: #ecfeff; color: #0891b2; border-color: #67e8f9; }
.res-actions { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.res-select-status { font-size: .79rem; padding: 6px 7px; border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; cursor: pointer; }
.res-btn-pay { background: #059669; color: #fff; border: none; border-radius: 8px; font-size: .79rem; font-weight: 600; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.res-btn-receipt { background: #eff6ff; border: 1.5px solid #bfdbfe; color: #1d4ed8; border-radius: 8px; font-size: .79rem; padding: 6px 9px; cursor: pointer; }
.res-btn-delete { background: #fef2f2; border: 1.5px solid #fecaca; color: #dc2626; border-radius: 8px; font-size: .79rem; padding: 6px 9px; cursor: pointer; }
.res-btn-reschedule { background: #f0fdf4; border: 1.5px solid #86efac; color: #16a34a; border-radius: 8px; font-size: .79rem; padding: 6px 9px; cursor: pointer; }
.res-paid-label { font-size: .79rem; color: #059669; font-weight: 600; white-space: nowrap; padding: 6px 4px; }

/* Dark mode – Reservations Table */
body.dark-mode .res-table thead tr { background: #21262d !important; border-bottom-color: rgba(255,255,255,.08) !important; }
body.dark-mode .res-table th { color: rgba(255,255,255,.5) !important; }
body.dark-mode .res-table td { border-bottom-color: rgba(255,255,255,.06) !important; }
body.dark-mode .res-table tbody tr:nth-child(odd)  { background: #161b22 !important; }
body.dark-mode .res-table tbody tr:nth-child(even) { background: #1c2128 !important; }
body.dark-mode .res-table tbody tr:hover { background: rgba(58,123,213,.12) !important; }
body.dark-mode .res-row-name { color: #e6edf3 !important; }
body.dark-mode .res-row-id   { color: rgba(255,255,255,.35) !important; }
body.dark-mode .res-row-contact { color: rgba(255,255,255,.5) !important; }
body.dark-mode .res-row-room-name { color: #e6edf3 !important; }
body.dark-mode .res-row-dates-pill { background: rgba(255,255,255,.07) !important; }
body.dark-mode .res-row-dates-pill span { color: #e6edf3 !important; }
body.dark-mode .res-nights-num { color: #8bb3d9 !important; }
body.dark-mode .res-pax { color: rgba(255,255,255,.5) !important; }
body.dark-mode .res-amount { color: #8bb3d9 !important; }
body.dark-mode .res-status-badge[data-status="Pending"]     { background: rgba(217,119,6,.15) !important;  color: #fbbf24 !important; border-color: rgba(217,119,6,.3) !important; }
body.dark-mode .res-status-badge[data-status="Confirmed"]   { background: rgba(5,150,105,.15) !important;  color: #4ade80 !important; border-color: rgba(5,150,105,.3) !important; }
body.dark-mode .res-status-badge[data-status="Cancelled"]   { background: rgba(220,38,38,.15) !important;  color: #f87171 !important; border-color: rgba(220,38,38,.3) !important; }
body.dark-mode .res-status-badge[data-status="No Show"]     { background: rgba(194,65,12,.15) !important;   color: #fb923c !important; border-color: rgba(194,65,12,.3) !important; }
body.dark-mode .res-status-badge[data-status="Completed"]   { background: rgba(37,99,235,.15) !important;  color: #60a5fa !important; border-color: rgba(37,99,235,.3) !important; }
body.dark-mode .res-status-badge[data-status="Checked In"]  { background: rgba(124,58,237,.15) !important; color: #a78bfa !important; border-color: rgba(124,58,237,.3) !important; }
body.dark-mode .res-status-badge[data-status="Checked Out"] { background: rgba(8,145,178,.15) !important;  color: #22d3ee !important; border-color: rgba(8,145,178,.3) !important; }
body.dark-mode .res-select-status { background: #0d1117 !important; color: #e6edf3 !important; border-color: rgba(255,255,255,.15) !important; }
body.dark-mode .res-btn-receipt { background: rgba(58,123,213,.15) !important; border-color: rgba(58,123,213,.3) !important; color: #6cb4ee !important; }
body.dark-mode .res-btn-delete  { background: rgba(255,65,108,.12) !important; border-color: rgba(255,65,108,.25) !important; color: #ff9999 !important; }
body.dark-mode .res-btn-reschedule { background: rgba(22,163,74,.15) !important; border-color: rgba(22,163,74,.3) !important; color: #4ade80 !important; }
body.dark-mode .res-paid-label  { color: #4ade80 !important; }
body.dark-mode .res-paid-tag    { color: #4ade80 !important; }
body.dark-mode .res-balance-tag { color: #f87171 !important; }
body.dark-mode .res-pax-inline  { color: rgba(255,255,255,.5) !important; }

/* ══════════════════════════════════════════════════════════════
   Dark mode — Kitchen Module
   ══════════════════════════════════════════════════════════════ */

/* Tab buttons (sidebar handles nav; .k-tab used in sub-views) */
body.dark-mode .k-tab { color: rgba(255,255,255,0.6) !important; }
body.dark-mode .k-tab.active,
body.dark-mode .k-tab:hover { background: #21262d !important; color: #e6edf3 !important; box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important; }

/* Dashboard KPI cards (.k-dc injected via JS style tag) */
body.dark-mode .k-dc { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode .k-dc:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.5) !important; }
body.dark-mode .k-dc-icon { opacity: 0.85; }

/* Stat cards */
body.dark-mode .k-stat { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; }
body.dark-mode .k-stat-lbl { color: rgba(255,255,255,0.45) !important; }

/* Inventory mini-stats */
body.dark-mode .k-inv-stat { background: #161b22 !important; border-color: rgba(255,255,255,0.06) !important; }
body.dark-mode .k-inv-stat-lbl { color: rgba(255,255,255,0.45) !important; }

/* Recipe cards */
body.dark-mode .k-recipe-card { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; color: #e6edf3 !important; }
body.dark-mode .k-recipe-card:hover { border-color: #8bb3d9 !important; box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important; }

/* Supplier cards */
body.dark-mode .k-sup-card { background: #161b22 !important; border-color: rgba(255,255,255,0.08) !important; color: #e6edf3 !important; }

/* P&L value text */
body.dark-mode .k-pnl-val { color: #e6edf3 !important; }

/* Stock status pills */
body.dark-mode .k-stock-out { background: rgba(248,113,113,0.15) !important; color: #fca5a5 !important; }
body.dark-mode .k-stock-low { background: rgba(251,191,36,0.15) !important; color: #fcd34d !important; }
body.dark-mode .k-stock-ok  { background: rgba(74,222,128,0.15) !important; color: #86efac !important; }

/* Kitchen action buttons */
body.dark-mode .k-act-green { background: rgba(46,125,50,0.2) !important; color: #86efac !important; border-color: rgba(46,125,50,0.4) !important; }
body.dark-mode .k-act-red   { background: rgba(198,40,40,0.2) !important; color: #fca5a5 !important; border-color: rgba(198,40,40,0.4) !important; }

/* Menu engineering badges */
body.dark-mode .k-badge-star   { background: rgba(133,77,14,0.25) !important;  color: #fde68a !important; }
body.dark-mode .k-badge-puzzle { background: rgba(107,33,168,0.25) !important; color: #d8b4fe !important; }
body.dark-mode .k-badge-plow   { background: rgba(30,64,175,0.25) !important;  color: #93c5fd !important; }
body.dark-mode .k-badge-dog    { background: rgba(153,27,27,0.25) !important;  color: #fca5a5 !important; }

/* Add Stock modal — per-location qty container */
body.dark-mode #kAsLocQtyContainer { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; }

/* ── Dashboard alert boxes (JS inline styles) ── */
body.dark-mode #hms-kitchen [style*="background:#fff3e0"] { background: rgba(199,94,0,0.15) !important; border-color: rgba(199,94,0,0.35) !important; color: #fcd34d !important; }

/* ── SOS Floating Action Button (mobile only) ── */
.sos-fab { display: none; }

@media (max-width: 768px) {
  .sos-fab {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    /* Was bottom:22px, which actually overlapped .mobile-bottom-nav itself
       (a fixed 60px-tall bar) as well as page content -- moved to sit just
       above the bottom nav instead, matching .book-now-fab's own mobile
       offset (bottom:76px) on the opposite corner (found 2026-08-29/30). */
    bottom: 76px !important;
    left: 16px !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    box-shadow: 0 4px 18px rgba(220,38,38,.55), 0 2px 6px rgba(0,0,0,.25);
    cursor: pointer;
    z-index: 9999;
    transition: background .18s, transform .15s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .sos-fab:active   { background: #b91c1c; transform: scale(.93); }
  .sos-fab:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; }
  .sos-fab-label    { display: none; }
}

/* ── SOS Top-bar button (desktop) ── */
.tb-sos {
  background: rgba(220,38,38,.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220,38,38,.25) !important;
}
.tb-sos:hover {
  background: rgba(220,38,38,.22) !important;
  color: #b91c1c !important;
}
@media (max-width: 768px) {
  .tb-sos { display: none !important; }
}

/* ── SOS Confirmation Popup ── */
.sos-fab-confirm {
  position: fixed;
  background: #0f172a;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(220,38,38,.25);
  z-index: 10000;
  width: 252px;
  flex-direction: column;
  animation: sosFabIn .22s cubic-bezier(.34,1.4,.64,1);
}
.sos-fab-confirm::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #f87171, #dc2626);
}
.sos-fab-confirm.from-fab    { bottom: 138px; right: 12px; } /* button moved to bottom:76px, keep the same ~10px gap above its new top edge */
.sos-fab-confirm.from-topbar { top: 58px;    right: 12px; }

@keyframes sosFabIn {
  from { opacity:0; transform:translateY(10px) scale(.92); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

.sos-fc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
}
.sos-fc-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(220,38,38,.15);
  border: 1.5px solid rgba(220,38,38,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: #f87171;
}
.sos-fc-title {
  font-size: .88rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}
.sos-fc-sub {
  font-size: .72rem;
  color: #475569;
  margin-top: 3px;
  line-height: 1.3;
}
.sos-fc-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 14px;
}
.sos-fc-confirm {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 14px rgba(220,38,38,.45);
  transition: filter .15s, transform .12s;
}
.sos-fc-confirm:hover  { filter: brightness(1.1); }
.sos-fc-confirm:active { transform: scale(.97); }
.sos-fc-cancel {
  width: 100%;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: #475569;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sos-fc-cancel:hover { background: rgba(255,255,255,.05); color: #64748b; }
body.dark-mode #hms-kitchen [style*="background:#fce4ec"] { background: rgba(194,24,91,0.15) !important; border-color: rgba(194,24,91,0.3) !important; color: #f9a8d4 !important; }
body.dark-mode #hms-kitchen [style*="background:#e3f2fd"] { background: rgba(25,118,210,0.15) !important; border-color: rgba(25,118,210,0.3) !important; color: #93c5fd !important; }
body.dark-mode #hms-kitchen [style*="background:#f3e5f5"] { background: rgba(106,27,154,0.15) !important; border-color: rgba(106,27,154,0.3) !important; color: #d8b4fe !important; }

/* Low-stock table row highlight */
body.dark-mode #hms-kitchen [style*="background:#fff8f0"] { background: rgba(199,94,0,0.1) !important; }
/* Inventory & stock-control row highlights (out-of-stock / low-stock) */
body.dark-mode #hms-kitchen [style*="background:#fff5f5"] { background: rgba(248,113,113,0.1) !important; }
body.dark-mode #hms-kitchen [style*="background:#fffbf0"] { background: rgba(251,191,36,0.1) !important; }
/* Restock history button (inline light-blue) */
body.dark-mode #hms-kitchen [style*="background:#f0f4ff"] { background: rgba(55,48,163,0.25) !important; color: #a5b4fc !important; border-color: rgba(55,48,163,0.4) !important; }

/* Restock / summary stat boxes */
body.dark-mode #hms-kitchen [style*="background:#f8fafc"],
body.dark-mode #kRestockHistoryModal [style*="background:#f8fafc"] { background: rgba(255,255,255,0.04) !important; }
body.dark-mode #hms-kitchen [style*="background:#f0fdf4"],
body.dark-mode #kRestockHistoryModal [style*="background:#f0fdf4"] { background: rgba(21,128,61,0.1) !important; }
body.dark-mode #hms-kitchen [style*="background:#f0f9ff"] { background: rgba(25,118,210,0.08) !important; }
body.dark-mode #hms-kitchen [style*="background:#f8f9fa"],
body.dark-mode #kRestockHistoryModal [style*="background:#f8f9fa"] { background: rgba(255,255,255,0.04) !important; }

/* Top-sellers progress bar track */
body.dark-mode #hms-kitchen [style*="background:#f1f3f5"] { background: rgba(255,255,255,0.08) !important; }

/* Dark text overrides for hardcoded dark-on-white colors used in kitchen JS */
body.dark-mode #hms-kitchen [style*="color:#1a237e"]   { color: #93c5fd !important; }
body.dark-mode #hms-kitchen [style*="color:#1565c0"]   { color: #6cb4ee !important; }
body.dark-mode #hms-kitchen [style*="color:#0277bd"]   { color: #60a5fa !important; }
body.dark-mode #hms-kitchen [style*="color:#1a3d5c"]   { color: #e6edf3 !important; }

/* Danger zone border */
body.dark-mode #hms-kitchen [style*="border-top:1px solid #fee2e2"] { border-top-color: rgba(248,113,113,0.25) !important; }

@media (max-width: 768px) {
  /* ── Bar: welcome banner ── */
  #barWelcomeBanner { border-radius:10px !important; padding:12px 14px !important; }
  #barWelcomeClock { font-size:1.15rem !important; }

  /* ── Bar dashboard: stack 2-col → 1-col ── */
  #barDashGrid { grid-template-columns:1fr !important; }

  /* ── Bar POS: stats row — keep 3 cols but compact ── */
  #barPosStatsGrid { gap:6px !important; }
  #barPosStatsGrid > div { padding:10px 8px !important; gap:7px !important; }
  #barPosStatsGrid > div > div:first-child { width:30px !important; height:30px !important; flex-shrink:0; }

  /* ── Bar POS: main layout — stack drink grid on top, order panel below ── */
  #barPosLayout {
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:unset !important;
    gap:12px !important;
  }

  /* Drink column: fixed height so it doesn't push order panel off screen */
  #barPosDrinkCol { gap:8px !important; max-height:48vh; }
  #barDrinkGrid {
    grid-template-columns:repeat(auto-fill,minmax(88px,1fr)) !important;
    max-height:calc(48vh - 52px) !important;
    min-height:160px !important;
  }
  #barDrinkSearch { width:100% !important; }

  /* Order panel: auto height when stacked */
  #barPosOrderCol { height:auto !important; max-height:none !important; }
  #barOrderItems { min-height:100px !important; max-height:28vh !important; }
  #barOpenTabsStrip { max-height:100px !important; }

  /* ── Bar: sub-tab strip — horizontal scroll ── */
  #bar-coming-soon .bar-sub-tab { padding:8px 12px !important; font-size:.72rem !important; }

  /* ── Bar: inventory search card — full width ── */
  #barInvSearchCard { border-radius:14px !important; }

  /* ── Bar: section overview grid ── */
  #barSectionOverviewGrid { grid-template-columns:1fr !important; }

  /* ── Bar: modal inner divs — full width on mobile ── */
  #barTransferModal > div,
  #barSec2SecModal > div,
  #barImportModal > div { border-radius:14px !important; width:calc(100vw - 32px) !important; margin:auto !important; }

  /* ── Bar: report range panel — full width ── */
  #barRptRangePanel { min-width:unset !important; width:calc(100vw - 40px) !important; right:auto !important; left:0 !important; }

  /* ── Bar: history export buttons ── */
  #barTab-history > div:first-child { flex-wrap:wrap !important; }
}

/* ══ BAR POS ══════════════════════════════════════════════════════ */
.bar-sub-tab { padding:10px 18px;border:none;background:none;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;color:var(--gray-500);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .18s;font-family:inherit;white-space:nowrap; }
.bar-sub-tab.active { color:var(--primary-blue);border-bottom-color:var(--gold); }
.bar-sub-tab:hover:not(.active) { color:var(--gray-700);background:var(--gray-50,#f9fafb); }
.bar-tab-panel { animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

.bar-drink-card { background:#fff;border:1px solid #e9ecf1;border-radius:14px;padding:13px 11px;cursor:pointer;transition:all .18s;text-align:center;position:relative;user-select:none;box-shadow:0 1px 3px rgba(15,23,42,.04);overflow:hidden; }
.bar-drink-card:hover { border-color:var(--primary-blue);transform:translateY(-3px);box-shadow:0 8px 20px rgba(26,61,92,.14); }
.bar-drink-card.unavailable { opacity:.45;cursor:not-allowed; }
.bar-drink-card.out-of-stock { opacity:.55; }
.bar-drink-card.out-of-stock:hover { transform:none;box-shadow:0 1px 3px rgba(15,23,42,.04); }
.bar-drink-card .bar-drink-cat { font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-400);margin-bottom:4px; }
.bar-drink-card .bar-drink-name { font-size:.82rem;font-weight:700;color:#1e293b;margin-bottom:4px;line-height:1.3; }
.bar-drink-card .bar-drink-price { font-size:.92rem;font-weight:800;color:var(--primary-blue); }

.bar-order-item { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f3f4f6; }
.bar-order-item:last-child { border-bottom:none; }
.bar-order-item-name { flex:1;font-size:.82rem;font-weight:600;color:#1e293b; }
.bar-order-item-notes { font-size:.7rem;color:var(--gray-400); }
.bar-qty-btn { width:26px;height:26px;border-radius:6px;border:1px solid #e5e7eb;background:#f9fafb;cursor:pointer;font-size:.88rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:.15s; }
.bar-qty-btn:hover { background:var(--primary-blue);color:#fff;border-color:var(--primary-blue); }
.bar-qty-num { font-size:.82rem;font-weight:700;min-width:18px;text-align:center; }
.bar-order-item-total { font-size:.82rem;font-weight:700;color:var(--primary-blue);min-width:60px;text-align:right; }

.bar-tab-chip { padding:5px 12px;border-radius:20px;border:1.5px solid #e5e7eb;background:#fff;font-size:.75rem;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap; }
.bar-tab-chip.active-tab { background:var(--primary-blue);color:#fff;border-color:var(--primary-blue); }
.bar-tab-chip:hover:not(.active-tab) { border-color:var(--primary-blue);color:var(--primary-blue); }

.bar-pay-method { padding:10px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;font-size:.8rem;font-weight:700;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit; }
.bar-pay-method.active { border-color:var(--primary-blue);background:#eff6ff;color:var(--primary-blue); }
.bar-pay-method:hover:not(.active) { border-color:var(--gray-400); }

.bar-stock-row { display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:10px;border:1px solid #e5e7eb;margin-bottom:8px; }
.bar-stock-status { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.bar-stock-status.good { background:#22c55e; }
.bar-stock-status.warning { background:#f59e0b; }
.bar-stock-status.low { background:#ef4444; }
.bar-stock-status.critical { background:#7f1d1d; }

/* Receipt print styles */
@media print {
  body > *:not(#barReceiptPrintArea) { display:none !important; }
  #barReceiptPrintArea { display:block !important; }
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — GAP FIXES
   Covers: Bar module, Kitchen inline classes, autocomplete,
   staff filters, inline white cards across all sections
   ══════════════════════════════════════════════════════════════════ */

/* ── Bar POS: tab strip ── */
body.dark-mode .bar-sub-tab { color:rgba(255,255,255,.5); }
body.dark-mode .bar-sub-tab.active { color:#e6edf3; border-bottom-color:var(--gold); }
body.dark-mode .bar-sub-tab:hover:not(.active) { color:#e6edf3; background:rgba(255,255,255,.06); }

/* ── Bar POS: drink cards ── */
body.dark-mode .bar-drink-card { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; box-shadow:0 1px 3px rgba(0,0,0,.4) !important; }
body.dark-mode .bar-drink-card:hover { border-color:var(--gold) !important; box-shadow:0 8px 20px rgba(0,0,0,.5) !important; }
body.dark-mode .bar-drink-card .bar-drink-name { color:#e6edf3 !important; }
body.dark-mode .bar-drink-card .bar-drink-cat { color:rgba(255,255,255,.4) !important; }

/* ── Bar POS: order panel ── */
body.dark-mode .bar-order-item { border-bottom-color:rgba(255,255,255,.08) !important; }
body.dark-mode .bar-order-item-name { color:#e6edf3 !important; }
body.dark-mode .bar-order-item-notes { color:rgba(255,255,255,.4) !important; }
body.dark-mode .bar-order-item-total { color:var(--gold) !important; }
body.dark-mode .bar-qty-btn { background:#21262d !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }
body.dark-mode .bar-qty-btn:hover { background:var(--primary-blue) !important; color:#fff !important; border-color:var(--primary-blue) !important; }
body.dark-mode .bar-qty-num { color:#e6edf3; }

/* ── Bar POS: tab chips & payment methods ── */
body.dark-mode .bar-tab-chip { background:#21262d !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }
body.dark-mode .bar-tab-chip.active-tab { background:var(--primary-blue) !important; border-color:var(--primary-blue) !important; color:#fff !important; }
body.dark-mode .bar-tab-chip:hover:not(.active-tab) { border-color:var(--gold) !important; color:var(--gold) !important; }
body.dark-mode .bar-pay-method { background:#21262d !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }
body.dark-mode .bar-pay-method.active { background:rgba(30,58,92,.35) !important; border-color:var(--primary-blue) !important; color:#93c5fd !important; }

/* ── Bar POS: stock rows ── */
body.dark-mode .bar-stock-row { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; color:#e6edf3 !important; }

/* ── Bar: named element overrides (inline background:#fff) ── */
body.dark-mode #barSectionSalesCard,
body.dark-mode #barHistoryList,
body.dark-mode #barImportColPicker { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; color:#e6edf3 !important; }

body.dark-mode #barInvSearchCard { background:#1c2333 !important; box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) !important; }

/* ── Bar: modals (inner div has inline background:#fff) ── */
body.dark-mode #barTransferModal > div,
body.dark-mode #barSec2SecModal > div,
body.dark-mode #barImportModal > div { background:#161b22 !important; color:#e6edf3 !important; }

/* ── Bar: report range button & picker panel ── */
body.dark-mode #barRptRangeBtn { background:#21262d !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.15) !important; }
body.dark-mode #barRptRangePanel { background:#1c2333 !important; border-color:rgba(255,255,255,.1) !important; box-shadow:0 10px 30px rgba(0,0,0,.5) !important; }
body.dark-mode #barRptRangePanel input[type="date"] { background:#21262d !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.15) !important; }
body.dark-mode #barRptFullBtn { background:#21262d !important; border-color:var(--primary-blue) !important; color:#93c5fd !important; }

/* ── Bar: broad inline-style sweep inside the bar section ── */
body.dark-mode #bar-coming-soon [style*="background:#fff"] { background:#161b22 !important; }
body.dark-mode #bar-coming-soon [style*="background: #fff"] { background:#161b22 !important; }
body.dark-mode #bar-coming-soon [style*="border:1px solid #e5e7eb"],
body.dark-mode #bar-coming-soon [style*="border: 1px solid #e5e7eb"],
body.dark-mode #bar-coming-soon [style*="border:1px solid #e9ecf1"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode #bar-coming-soon [style*="color:#1e293b"],
body.dark-mode #bar-coming-soon [style*="color: #1e293b"] { color:#e6edf3 !important; }
body.dark-mode #bar-coming-soon [style*="color:#374151"],
body.dark-mode #bar-coming-soon [style*="color: #374151"] { color:#e6edf3 !important; }
body.dark-mode #bar-coming-soon [style*="color:#64748b"] { color:rgba(255,255,255,.5) !important; }
body.dark-mode #bar-coming-soon [style*="color:#6b7280"] { color:rgba(255,255,255,.5) !important; }
body.dark-mode #bar-coming-soon [style*="background:#f9fafb"],
body.dark-mode #bar-coming-soon [style*="background: #f9fafb"] { background:#21262d !important; }
body.dark-mode #bar-coming-soon [style*="background:#f0fdf4"] { background:rgba(21,128,61,.12) !important; }
body.dark-mode #bar-coming-soon [style*="background:#fffbeb"] { background:rgba(133,77,14,.18) !important; color:#fde68a !important; }
body.dark-mode #bar-coming-soon button[style*="background:#fff"] { background:#21262d !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }

/* ── Bar: import modal internals ── */
body.dark-mode #barImportDropZone { border-color:rgba(255,255,255,.2) !important; background:rgba(255,255,255,.03) !important; color:rgba(255,255,255,.6) !important; }
body.dark-mode #barImportCatSel,
body.dark-mode #barImportUnitSel { background:#21262d !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.15) !important; }
body.dark-mode #barImportPreview { color:#e6edf3; }

/* ── Bar: sales detail modal (dark header, but check body) ── */
body.dark-mode #barSalesDetailModal .hms-card { background:#161b22 !important; border-color:rgba(255,255,255,.08) !important; }
body.dark-mode #barSalesDetailList [style*="background:#fff"],
body.dark-mode #barSalesDetailList [style*="background: #fff"] { background:#21262d !important; border-color:rgba(255,255,255,.1) !important; }
body.dark-mode #barSalesDetailList [style*="color:#374151"],
body.dark-mode #barSalesDetailList [style*="color:#1e293b"] { color:#e6edf3 !important; }

/* ── Bar: Payment Modal (reachable from POS Mode -- gets zero dark-mode
   coverage otherwise since it lives outside #bar-coming-soon's subtree) ── */
body.dark-mode #barPaymentModal .field label { color: rgba(255,255,255,.55) !important; }
body.dark-mode #barPaymentModal input,
body.dark-mode #barPaymentModal select { background:#0d1117 !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }
body.dark-mode #barPaySummary { background:#0d1117 !important; border-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.8) !important; }
body.dark-mode #barSplitFields { background:rgba(99,102,241,.1) !important; border-color:rgba(99,102,241,.35) !important; }
body.dark-mode #barSplitFields label { color:#a5b4fc !important; }
body.dark-mode #barCreditPayWrap > div { background:rgba(210,153,34,.1) !important; border-color:rgba(210,153,34,.35) !important; }
body.dark-mode #barPaymentModal button[onclick="barToggleCreditMode(true)"] { background:rgba(210,153,34,.12) !important; color:#fde68a !important; border-color:rgba(210,153,34,.4) !important; }
body.dark-mode #barPaymentModal button[onclick="barToggleCreditMode(false)"] { color:rgba(255,255,255,.55) !important; }

/* ── Kitchen: inline <style> class overrides ── */
body.dark-mode .k-tab.active,
body.dark-mode .k-tab:hover { background:#21262d !important; color:var(--primary-blue) !important; }
body.dark-mode .k-stat { background:#161b22 !important; border-color:rgba(255,255,255,.08) !important; }
body.dark-mode .k-inv-stat { background:#161b22 !important; border-color:rgba(255,255,255,.08) !important; }
body.dark-mode .k-recipe-card { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
body.dark-mode .k-sup-card { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
body.dark-mode .kim-price-card { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }

/* ── Kitchen: remaining inline #fff sweeps ── */
body.dark-mode #hms-kitchen [style*="background:#fff"] { background:#161b22 !important; }
body.dark-mode #hms-kitchen [style*="background: #fff"] { background:#161b22 !important; }
body.dark-mode #hms-kitchen [style*="border:1px solid #e5e7eb"],
body.dark-mode #hms-kitchen [style*="border: 1px solid #e5e7eb"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode #hms-kitchen [style*="color:#1e293b"],
body.dark-mode #hms-kitchen [style*="color:#374151"] { color:#e6edf3 !important; }
body.dark-mode #hms-kitchen [style*="color:#6b7280"],
body.dark-mode #hms-kitchen [style*="color:#64748b"],
body.dark-mode #hms-kitchen [style*="color:#9ca3af"] { color:rgba(255,255,255,.5) !important; }
body.dark-mode #hms-kitchen [style*="background:#f9fafb"],
body.dark-mode #hms-kitchen [style*="background: #f9fafb"] { background:#21262d !important; }
body.dark-mode #hms-kitchen [style*="background:#fff8e6"] { background:rgba(199,94,0,.14) !important; }
body.dark-mode #hms-kitchen [style*="background:#fff3cd"] { background:rgba(133,77,14,.2) !important; }
body.dark-mode #hms-kitchen [style*="background:#fff0f0"] { background:rgba(198,40,40,.15) !important; }

/* ── Autocomplete / name suggestions ── */
body.dark-mode #resNameSuggestions { background:#1c2333 !important; border-color:rgba(255,255,255,.1) !important; box-shadow:0 4px 20px rgba(0,0,0,.5) !important; }
body.dark-mode #resNameSuggestions > div { background:transparent !important; color:#e6edf3 !important; border-bottom-color:rgba(255,255,255,.06) !important; }
body.dark-mode #resNameSuggestions > div:hover { background:rgba(255,255,255,.07) !important; }

/* ── Staff section: filter bar & view toggles ── */
body.dark-mode #hms-staff [style*="background:#fff"] { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
body.dark-mode #staffDeptFilter,
body.dark-mode #staffStatusFilter { background:#21262d !important; color:#e6edf3 !important; border-color:rgba(255,255,255,.15) !important; }
body.dark-mode #staffViewList,
body.dark-mode #staffViewGrid { background:#21262d !important; border-color:rgba(255,255,255,.15) !important; color:#e6edf3 !important; }

/* ── Porter section inline cards ── */
body.dark-mode #hms-porter [style*="background:#fff"],
body.dark-mode #hms-porter [style*="background: #fff"] { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }
body.dark-mode #hms-porter [style*="color:#1e293b"],
body.dark-mode #hms-porter [style*="color:#374151"] { color:#e6edf3 !important; }
body.dark-mode #hms-porter [style*="color:#6b7280"],
body.dark-mode #hms-porter [style*="color:#64748b"] { color:rgba(255,255,255,.5) !important; }

/* ── Shifts, OTA, Waitlist, Loyalty, Group Bookings, Guest Services, Documents ── */
body.dark-mode #hms-shifts [style*="background:#fff"],
body.dark-mode #hms-ota [style*="background:#fff"],
body.dark-mode #hms-waitlist [style*="background:#fff"],
body.dark-mode #hms-loyalty [style*="background:#fff"],
body.dark-mode #hms-groupbookings [style*="background:#fff"],
body.dark-mode #hms-guestservices [style*="background:#fff"],
body.dark-mode #hms-documents [style*="background:#fff"],
body.dark-mode #hms-maintenance [style*="background:#fff"],
body.dark-mode #hms-qrcode [style*="background:#fff"] { background:#161b22 !important; border-color:rgba(255,255,255,.1) !important; }

body.dark-mode #hms-shifts [style*="color:#1e293b"],
body.dark-mode #hms-ota [style*="color:#1e293b"],
body.dark-mode #hms-waitlist [style*="color:#1e293b"],
body.dark-mode #hms-loyalty [style*="color:#1e293b"],
body.dark-mode #hms-groupbookings [style*="color:#1e293b"],
body.dark-mode #hms-guestservices [style*="color:#1e293b"],
body.dark-mode #hms-documents [style*="color:#1e293b"] { color:#e6edf3 !important; }

/* ── Housekeeping: pending badge color (#fff3cd → dark amber) ── */
body.dark-mode [style*="background:#fff3cd"] { background:rgba(133,77,14,.2) !important; color:#fde68a !important; }
body.dark-mode [style*="background:#fff8e6"] { background:rgba(199,94,0,.14) !important; color:#fdba74 !important; }
body.dark-mode [style*="background:#fff0f0"] { background:rgba(198,40,40,.15) !important; color:#fca5a5 !important; }
body.dark-mode [style*="background:#f0f4ff"] { background:rgba(55,48,163,.22) !important; color:#a5b4fc !important; }

/* ── Dropdown panels (range pickers, floating search, etc.) ── */
body.dark-mode [style*="background:#fff"][style*="border-radius"][style*="box-shadow"][style*="z-index"] { background:#1c2333 !important; border-color:rgba(255,255,255,.1) !important; color:#e6edf3 !important; }

/* ── Generic border cleanup: light gray borders visible on dark bg ── */
body.dark-mode [style*="border:1px solid #e5e7eb"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode [style*="border: 1px solid #e5e7eb"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode [style*="border:1px solid #e9ecf1"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode [style*="border-bottom:1px solid #e5e7eb"] { border-bottom-color:rgba(255,255,255,.1) !important; }
body.dark-mode [style*="border-top:1px solid #e5e7eb"] { border-top-color:rgba(255,255,255,.1) !important; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE AUDIT — INTERMEDIATE BREAKPOINT COVERAGE
   Fills gaps between desktop (769px+) and mobile (≤768px)
   ════════════════════════════════════════════════════════════════════ */

/* ── Top bar overflow group ──────────────────────────────────────── */
/* Desktop: panel contents flow inline; trigger hidden */
.tb-overflow-group   { display: flex; align-items: center; gap: 1px; position: relative; }
.tb-overflow-panel   { display: contents; }
.tb-overflow-trigger { display: none !important; }
.tb-overflow-label   { display: none !important; }

/* Tablet ≤1024px: trigger appears, panel becomes dropdown */
@media (max-width: 1024px) {
  .tb-overflow-trigger {
    display: flex !important;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: none; border: none;
    color: var(--gray-600);
    font-size: 1rem; cursor: pointer;
    align-items: center; justify-content: center;
    transition: background .15s; flex-shrink: 0;
  }
  .tb-overflow-trigger:hover { background: var(--gray-100); }

  .tb-overflow-panel {
    display: none !important;
    position: absolute;
    top: calc(100% + 8px); right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06);
    padding: 6px;
    flex-direction: column; gap: 2px;
    min-width: 190px; z-index: 600; overflow: visible;
  }
  .tb-overflow-panel.open { display: flex !important; animation: tbOverflowIn .18s ease; }
  @keyframes tbOverflowIn {
    from { opacity:0; transform:translateY(6px) scale(.96); }
    to   { opacity:1; transform:translateY(0)   scale(1); }
  }

  /* Items in dropdown: row with icon + label */
  .tb-overflow-panel .tb-icon-btn {
    width: 100% !important; justify-content: flex-start !important;
    gap: 10px !important; padding: 9px 12px !important;
    border-radius: 9px !important; height: auto !important;
    min-height: 40px !important; font-size: .82rem !important;
  }
  .tb-overflow-panel .tb-icon-btn i:first-child { width: 16px; text-align: center; flex-shrink: 0; }
  .tb-overflow-label { display: inline !important; font-size: .82rem; font-weight: 600; color: var(--gray-700); }

  /* Hotel switcher inside the dropdown */
  .tb-overflow-panel #hotelSwitcherWrap { position: static !important; width: 100% !important; }
  .tb-overflow-panel #hotelSwitcherBtn  { width: 100% !important; }
  .tb-overflow-panel #hotelSwitcherDropdown { left: 0 !important; right: auto !important; }

  /* Hotel name: truncate instead of pushing tabs off-screen */
  #modeTabBar #sidebarHotelName {
    max-width: 110px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
  }

  /* Notification dropdown: don't hang off viewport edge */
  .notif-dropdown { right: 0; left: auto; }

  /* Dark mode */
  body.dark-mode .tb-overflow-trigger { color: rgba(255,255,255,.55) !important; }
  body.dark-mode .tb-overflow-trigger:hover { background: rgba(255,255,255,.08) !important; }
  body.dark-mode .tb-overflow-panel { background: #1c2333 !important; box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) !important; }
  body.dark-mode .tb-overflow-label { color: rgba(255,255,255,.7) !important; }
  body.dark-mode .tb-overflow-panel .tb-icon-btn:hover { background: rgba(255,255,255,.06) !important; }
}

/* ── 900px: tablet / narrow desktop ────────────────────────────── */
@media (max-width: 900px) {
  /* Bar POS: 1fr+360px grid is too cramped — collapse to single column */
  #barPosLayout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: unset !important;
    gap: 12px !important;
  }
  #barPosDrinkCol { max-height: unset !important; overflow-y: visible !important; }
  #barDrinkGrid   { max-height: 46vh !important; overflow-y: auto !important; }
  #barPosOrderCol { height: auto !important; }
  #barOrderItems  { max-height: 32vh !important; }
  #barDashGrid    { grid-template-columns: 1fr !important; }
  #barPosStatsGrid { gap: 8px !important; }

  /* Revenue growth chart: 4-col stats strip → 2-col */
  .rg-stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Manual booking modal: stack the calendar and room list */
  .mb-cal-layout { grid-template-columns: 1fr !important; }
  .mb-rooms-list { max-height: 200px !important; }

  /* Tax config: 5-col row is unworkable below 900px */
  .tax-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Hotel stats grid: drop from 3 → 2 columns */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Room summary bar: 2 cols */
  .rooms-summary-bar { grid-template-columns: repeat(2, 1fr) !important; }

  /* Front desk panels already collapse at 900px but reaffirm here */
  .fd-panels { grid-template-columns: 1fr !important; }
}

/* ── Mode-tab pill: prevent 48px touch-target rule inflating the 34px pill ── */
@media (max-width: 768px) {
  .mode-tab-group .mode-tab {
    min-height: 34px !important;
    height: 34px !important;
    width: 34px !important;
  }
}

/* ── Book Now FAB: stack above SOS FAB on mobile (bottom nav is hidden) ─── */
@media (max-width: 768px) {
  .book-now-fab { bottom: 84px !important; right: 16px !important; }
}

/* ── Tables: global horizontal-scroll protection at any viewport ─────── */
.hms-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.hms-card > .hms-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 600px: small tablet / large phone (landscape) ────────────────── */
@media (max-width: 600px) {
  /* Notif dropdown: full-width on small tablets */
  .notif-dropdown {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
  }

  /* Any 2-col that's still tight at 600px */
  .rooms-summary-bar { grid-template-columns: 1fr 1fr !important; }

  /* cp (analytics) metrics cards: 2-col */
  .cp-metrics-cards { grid-template-columns: 1fr 1fr !important; }
}

/* ── 360px: extra-small phones (iPhone SE 1st gen, older Androids) ─── */
@media (max-width: 360px) {
  /* Tighten card padding */
  .hms-card { padding: 10px !important; }
  .hms-header { gap: 6px !important; padding: 10px !important; }

  /* Hotel stats: single column */
  .stats-grid,
  .hms-stats-grid { grid-template-columns: 1fr !important; }

  /* Top bar: keep only essentials */
  #hotelSwitcherWrap,
  .tb-screen { display: none !important; }

  /* Mode-tab pill: allow horizontal scroll if many tabs visible */
  .mode-tab-group { overflow-x: auto; scrollbar-width: none; }
  .mode-tab-group::-webkit-scrollbar { display: none; }

  /* Section headers: wrap title and action button */
  .hms-header { flex-wrap: wrap; }
  .hms-header > *:last-child { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Reservations Tab
   ════════════════════════════════════════════════════════════════ */

/* Base helpers for JS-generated elements */
.res-booked-at  { font-size: .68rem; color: #9ca3af; margin-top: 4px; white-space: nowrap; }
.res-pax-inline { display: none; font-size: .72rem; color: #6b7280; margin-top: 3px; }
.res-pay-status { margin-top: 3px; }
body.dark-mode .res-booked-at { color: rgba(255,255,255,.35) !important; }

/* ── ≤ 1024px: begin condensing ── */
@media (max-width: 1024px) {
  .res-table th { padding: 9px 10px; }
  .res-table td { padding: 12px 10px; }
  .res-actions  { flex-wrap: wrap; gap: 5px; }
  .res-booked-at { display: none; }
}

/* ── ≤ 900px: hide Nights column, restructure actions ── */
@media (max-width: 900px) {
  .res-table         { min-width: 520px; }
  .res-table th      { padding: 8px 8px; font-size: .67rem; letter-spacing: .3px; }
  .res-table td      { padding: 10px 8px; }

  /* Hide the standalone Nights column — dates imply duration */
  .res-th-nights,
  .res-td-nights     { display: none !important; }

  /* Show pax inline inside Amount cell instead */
  .res-pax-inline    { display: block; }

  /* Amount cell: left-align so content doesn't feel detached */
  .res-td-amount     { text-align: left !important; }
  .res-th-amount     { text-align: left !important; }

  /* Typography scale-down */
  .res-row-name      { font-size: .88rem; }
  .res-row-contact   { font-size: .76rem; }
  .res-row-room-name { font-size: .85rem; }
  .res-amount        { font-size: .95rem; }
  .res-nights-num    { font-size: 1.1rem; }

  /* Actions: select takes full width first row, buttons wrap below */
  .res-td-actions    { white-space: normal !important; }
  .res-actions       { flex-wrap: wrap; gap: 4px; }
  .res-select-status { flex: 1 1 100%; margin-bottom: 2px; }
}

/* ── Fix: global ≤768px gives selects/buttons min-height:44px — keep table compact ── */
@media (max-width: 768px) {
  .res-select-status          { min-height: 36px !important; font-size: .82rem !important; }
  .res-actions .res-btn-pay,
  .res-actions .res-btn-receipt,
  .res-actions .res-btn-reschedule,
  .res-actions .res-btn-delete { min-height: 36px !important; }
}

/* ── 641px–768px table mode (no sidebar offset): tightest table ── */
@media (min-width: 641px) and (max-width: 768px) {
  .res-table       { min-width: 420px; }
  .res-table th    { padding: 7px 6px; font-size: .64rem; }
  .res-table td    { padding: 9px 6px; }
  .res-row-id      { font-size: .7rem; }
  .res-row-dates-pill { flex-wrap: wrap; gap: 3px; }
  .res-row-dates-pill span { font-size: .76rem; }
  /* Amount col: show only amount + badge stacked */
  .res-td-amount   { min-width: 90px; }
  /* Actions col: icon buttons smaller */
  .res-btn-receipt,
  .res-btn-reschedule,
  .res-btn-delete  { padding: 5px 8px !important; }
  .res-btn-pay     { padding: 5px 9px !important; }
}

/* ── Mobile (≤ 640px): one card per reservation ── */
@media (max-width: 640px) {
  /* Reduce outer card padding so cards use more horizontal space */
  #reservations .card-body { padding: 10px 8px; }

  /* Header: stack title */
  #reservations .header { flex-direction: column; align-items: flex-start; gap: 6px; }
  #reservations .header h1 { font-size: 1.25rem; }

  /* Filter bar: hide "Filter:" label, wrap chips */
  .filter-bar .filter-label { display: none; }
  .filter-bar { gap: 6px; }

  /* Search bar: full width */
  #reservations > div[style*="max-width"] { max-width: 100% !important; }

  /* ── Table → card layout ── */
  .res-table-wrap { overflow-x: visible; }
  .res-table      { min-width: 0; }
  .res-table thead { display: none; }
  .res-table,
  .res-table tbody { display: block; }

  .res-table tbody tr {
    display: block;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    margin-bottom: 12px;
    /* Status colour stripe applied below via data-status */
    border-left-width: 4px;
    border-left-style: solid;
  }

  /* Status stripe colour (was td:first-child; now on tr) */
  .res-table tbody tr[data-status="Pending"]     { border-left-color: #d97706; }
  .res-table tbody tr[data-status="Confirmed"]   { border-left-color: #059669; }
  .res-table tbody tr[data-status="Cancelled"]   { border-left-color: #dc2626; }
  .res-table tbody tr[data-status="Completed"]   { border-left-color: #2563eb; }
  .res-table tbody tr[data-status="Checked In"]  { border-left-color: #7c3aed; }
  .res-table tbody tr[data-status="Checked Out"] { border-left-color: #0891b2; }

  /* Kill old td:first-child stripe (now on tr) */
  .res-table tbody tr[data-status] > td:first-child { border-left: none !important; }

  /* Alternating row background → all white (card bg handles it) */
  .res-table tbody tr:nth-child(odd),
  .res-table tbody tr:nth-child(even) { background: #fff; }
  .res-table tbody tr:hover            { background: #f0f7ff; }

  /* Each td: full-width block row */
  .res-table tbody td {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left !important;
    white-space: normal !important;
  }
  .res-table tbody td:last-child { border-bottom: none; }

  /* Checkbox: always hidden on mobile */
  .res-check-td { display: none !important; }

  /* ── Guest cell ── */
  .res-row-name    { font-size: .92rem; }
  .res-row-contact { font-size: .8rem; }

  /* ── Nights cell: inline layout ── */
  .res-nights-num   { font-size: 1rem;  display: inline; }
  .res-nights-label { font-size: .72rem; display: inline; margin-left: 3px; }
  .res-pax          { font-size: .72rem; display: inline; margin-left: 10px; }

  /* ── Actions cell ── */
  .res-actions       { flex-wrap: wrap; gap: 7px; }
  .res-select-status { flex: 1 1 100% !important; font-size: 15px !important; min-height: 42px !important; }
  .res-btn-pay       { flex: 1 1 auto; justify-content: center; padding: 9px 10px !important; min-height: 40px !important; font-size: .82rem; }
  .res-btn-receipt,
  .res-btn-reschedule,
  .res-btn-delete    { padding: 9px 12px !important; min-height: 40px !important; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; }
  .res-paid-label    { padding: 9px 4px; font-size: .82rem; }
}

/* ── Dark mode cards on mobile ── */
@media (max-width: 640px) {
  body.dark-mode .res-table tbody tr {
    background: #161b22 !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
  }
  body.dark-mode .res-table tbody tr:nth-child(odd),
  body.dark-mode .res-table tbody tr:nth-child(even)  { background: #161b22 !important; }
  body.dark-mode .res-table tbody tr:hover             { background: rgba(58,123,213,.12) !important; }
  body.dark-mode .res-table tbody td                   { border-bottom-color: rgba(255,255,255,.06) !important; }
}

/* ── Extra-small (≤ 400px): tighten spacing further ── */
@media (max-width: 400px) {
  #reservations .card-body       { padding: 8px 4px; }
  .res-table tbody td            { padding: 8px 10px; }
  .filter-bar .filter-chip       { font-size: .72rem; padding: 4px 10px; }
  .res-row-name                  { font-size: .85rem; }
  .res-row-dates-pill span       { font-size: .75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GUEST SERVICE REQUEST MODAL
   ══════════════════════════════════════════════════════════════════════════ */
/* #hkModal is a static (always-in-DOM) overlay toggled via an .open class
   (like the older .hms-modal-overlay pattern), unlike the other .gs-overlay
   modals which are created/destroyed by JS and so need no hidden-by-default
   state. Gate it explicitly so it doesn't render full-screen at all times. */
#hkModal.gs-overlay, #invModal.gs-overlay { display: none; }
#hkModal.gs-overlay.open, #invModal.gs-overlay.open { display: flex; }
.gs-overlay {
  position: fixed; inset: 0; background: rgba(8,14,26,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 2200; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.gs-modal-box {
  background: #fff; border-radius: 20px;
  width: 100%; max-width: 820px; max-height: 96vh;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
  animation: mbSlide .28s cubic-bezier(.22,.68,0,1.2);
}
.gs-modal-head {
  background: linear-gradient(135deg,#0d2137 0%,#1a3d5c 60%,#1e4d72 100%);
  padding: 22px 26px 20px; border-radius: 20px 20px 0 0;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.gs-modal-head::after {
  content: ''; position: absolute; bottom: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(201,169,98,.08); pointer-events: none;
}
.gs-head-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg,rgba(201,169,98,.25),rgba(201,169,98,.12));
  border: 1.5px solid rgba(201,169,98,.35);
  display: flex; align-items: center; justify-content: center;
}
.gs-head-icon i { color: #c9a962; font-size: 1.1rem; }
.gs-head-text   { flex: 1; min-width: 0; }
.gs-head-title  { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.gs-head-sub    { color: rgba(255,255,255,.45); font-size: .72rem; margin-top: 3px; }
.gs-head-close  {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7); width: 34px; height: 34px; border-radius: 9px;
  cursor: pointer; font-size: 1.15rem; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: background .15s; line-height: 1;
}
.gs-head-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.gs-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.gs-two-col { display: grid; grid-template-columns: 270px 1fr; gap: 0; }
.gs-left {
  padding-right: 22px; border-right: 1.5px solid #f0f4f8;
  display: flex; flex-direction: column; gap: 0;
}
.gs-right {
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.gs-section {
  font-size: .67rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: #94a3b8; padding-bottom: 6px;
  border-bottom: 1.5px solid #f0f4f8; display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.gs-section i { color: #c9a962; font-size: .7rem; }
.gs-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 0; }
.gs-type-pill {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: 1.5px solid #e2e8f0; border-radius: 0;
  cursor: pointer; background: #f8fafc; transition: all .18s; font-family: inherit;
}
.gs-type-pill i    { font-size: .9rem; color: #94a3b8; transition: color .18s; }
.gs-type-pill span { font-size: .65rem; font-weight: 700; color: #64748b; text-align: center; line-height: 1.2; }
.gs-type-pill.active             { background: linear-gradient(135deg,#eef6ff,#e0ecff); border-color: #1a3d5c; }
.gs-type-pill.active i           { color: #1a3d5c; }
.gs-type-pill.active span        { color: #1a3d5c; }
.gs-type-pill:hover:not(.active) { border-color: #cbd5e1; background: #f1f5f9; }
.gs-priority-row { display: flex; gap: 8px; }
.gs-priority-col { display: flex; flex-direction: column; gap: 6px; }
.gs-pri-pill {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; background: #f8fafc; font-size: .78rem; font-weight: 700;
  color: #64748b; transition: all .18s; font-family: inherit; width: 100%;
}
.gs-pri-pill.p-normal.active    { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }
.gs-pri-pill.p-urgent.active    { background: #fef2f2; border-color: #ef4444; color: #dc2626; }
.gs-pri-pill.p-low.active       { background: #f0fdf4; border-color: #22c55e; color: #16a34a; }
.gs-pri-pill:hover:not(.active) { background: #f1f5f9; border-color: #cbd5e1; }
.gs-field { display: flex; flex-direction: column; gap: 5px; }
.gs-label {
  font-size: .74rem; font-weight: 700; color: #334155;
  display: flex; align-items: center; gap: 5px;
}
.gs-label i { color: #c9a962; font-size: .7rem; width: 13px; text-align: center; }
.gs-input, .gs-select, .gs-textarea {
  width: 100%; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-family: inherit; font-size: .88rem; color: #1a1a2e; background: #fff;
  outline: none; transition: border-color .18s, box-shadow .18s; box-sizing: border-box;
}
.gs-input::placeholder, .gs-textarea::placeholder { color: #9ca3af; }
.gs-input:focus, .gs-select:focus, .gs-textarea:focus {
  border-color: #1a3d5c; box-shadow: 0 0 0 3px rgba(26,61,92,.1);
}
.gs-select {
  appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.gs-textarea { resize: vertical; min-height: 82px; }
.gs-combo { position: relative; }
.gs-combo .gs-input { padding-right: 34px; }
.gs-combo-arrow {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; border: none; background: none; color: #94a3b8;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .72rem; transition: background .15s, color .15s;
}
.gs-combo-arrow:hover { background: #f1f5f9; color: #475569; }
.gs-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px;
  overflow-y: auto; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 50; display: none;
}
.gs-combo-list.open { display: block; }
.gs-combo-item { padding: 9px 14px; font-size: .84rem; color: #334155; cursor: pointer; }
.gs-combo-item:hover { background: #f1f5f9; }
body.dark-mode .gs-combo-arrow { color: rgba(255,255,255,.4); }
body.dark-mode .gs-combo-arrow:hover { background: rgba(255,255,255,.08); color: #e6edf3; }
body.dark-mode .gs-combo-list { background: #0d1117 !important; border-color: rgba(255,255,255,.14) !important; }
body.dark-mode .gs-combo-item { color: #e6edf3; }
body.dark-mode .gs-combo-item:hover { background: rgba(255,255,255,.06); }
.gs-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 26px 22px;
}
.gs-btn-cancel {
  padding: 10px 22px; background: #f1f5f9; color: #64748b;
  border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: .85rem;
  font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s;
}
.gs-btn-cancel:hover { background: #e2e8f0; }
.gs-btn-save {
  padding: 10px 22px; background: linear-gradient(135deg,#1a3d5c,#2d6a9f);
  color: #fff; border: none; border-radius: 10px; font-size: .85rem;
  font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 7px; transition: opacity .15s;
}
.gs-btn-save:hover { opacity: .88; }
@media (max-width: 700px) {
  .gs-overlay    { padding: 0; align-items: flex-end; }
  .gs-modal-box  { border-radius: 20px 20px 0 0; max-height: 94vh; }
  .gs-modal-head { border-radius: 20px 20px 0 0; padding: 16px 18px 14px; }
  .gs-body       { padding: 14px 16px; }
  .gs-two-col    { grid-template-columns: 1fr; }
  .gs-left       { border-right: none; padding-right: 0; border-bottom: 1.5px solid #f0f4f8; padding-bottom: 14px; margin-bottom: 14px; }
  .gs-right      { padding-left: 0; gap: 12px; }
  .gs-priority-col { flex-direction: row; }
  .gs-row-2      { grid-template-columns: 1fr 1fr; }
  .gs-footer     { padding: 14px 18px 20px; }
  .gs-btn-cancel, .gs-btn-save { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .gs-row-2      { grid-template-columns: 1fr; gap: 10px; }
}
body.dark-mode .gs-modal-box  { background: #161b22 !important; }
body.dark-mode .gs-body       { background: #161b22 !important; }
body.dark-mode .gs-left       { border-right-color: rgba(255,255,255,.07) !important; }
body.dark-mode .gs-right      { background: #161b22 !important; }
body.dark-mode .gs-section    { color: rgba(255,255,255,.3) !important; border-bottom-color: rgba(255,255,255,.07) !important; }
body.dark-mode .gs-label      { color: rgba(255,255,255,.75) !important; }
body.dark-mode .gs-input, body.dark-mode .gs-select, body.dark-mode .gs-textarea {
  background: #0d1117 !important; border-color: rgba(255,255,255,.14) !important; color: #e6edf3 !important;
}
body.dark-mode .gs-input:focus, body.dark-mode .gs-select:focus, body.dark-mode .gs-textarea:focus {
  border-color: #8bb3d9 !important; box-shadow: 0 0 0 3px rgba(139,179,217,.12) !important;
}
body.dark-mode .gs-type-pill  { background: #21262d !important; border-color: rgba(255,255,255,.1) !important; }
body.dark-mode .gs-type-pill span { color: rgba(255,255,255,.45) !important; }
body.dark-mode .gs-type-pill.active { background: rgba(26,61,92,.6) !important; border-color: #8bb3d9 !important; }
body.dark-mode .gs-type-pill.active i, body.dark-mode .gs-type-pill.active span { color: #8bb3d9 !important; }
body.dark-mode .gs-pri-pill   { background: #21262d !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.45) !important; }
body.dark-mode .gs-footer     { border-top: 1px solid rgba(255,255,255,.07); }

/* ── Staff Messages — mobile single-pane layout ─────────────────────────
   The desktop view is a fixed two-pane layout (320px staff list + flexible
   thread window). On a narrow screen that leaves almost no room for the
   thread pane, so below 768px we show one pane at a time instead: the list
   full-width until a staff member is picked, then the thread full-width
   with a back arrow (#scBackToListBtn) to return — driven by the
   .sc-mobile-thread class toggled in scSelectStaffThread()/scBackToStaffList(). */
@media (max-width: 768px) {
  #scStaffList { width: 100% !important; }
  #scBackToListBtn { display: flex !important; }
  #scContainer:not(.sc-mobile-thread) #scWindow { display: none !important; }
  #scContainer.sc-mobile-thread #scStaffList { display: none !important; }
}
body.dark-mode .gs-btn-cancel { background: #21262d !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.55) !important; }