/* ==========================================================================
   HMS Pro — Global Design System
   One consistent system across every module: Blue #1677FF primary,
   dark-navy sidebar, light #F6F8FB canvas, white cards, Inter type.
   Class names are shared by all admin pages — restyle, never rename.
   ========================================================================== */
:root{
  --primary:#1677FF; --primary-600:#0F62D6; --primary-700:#0A4FB0;
  --primary-soft:rgba(22,119,255,.10); --primary-soft-2:rgba(22,119,255,.16);
  --navy:#0B1B2B; --navy-2:#102235; --navy-3:#16304a;
  --bg:#F6F8FB; --surface:#ffffff; --surface-2:#f9fafc;
  --text:#172033; --muted:#6B7280; --border:#E5EAF0;
  --success:#16A34A; --success-soft:#e7f6ec;
  --info:#1677FF;    --info-soft:#e6f0ff;
  --warning:#F59E0B; --warning-soft:#fff3e0;
  --danger:#EF4444;  --danger-soft:#fdeaea;
  --purple:#8B5CF6;  --purple-soft:#f0eafe;
  --gray:#6B7280;    --gray-soft:#eef1f5;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,32,53,.04),0 4px 16px rgba(16,32,53,.06);
  --shadow-sm:0 1px 2px rgba(16,32,53,.06);
  --sb-w:250px; --sb-collapsed:74px;
  /* Classic desktop chrome — SlateGray menu bar + green quick-action bar */
  --chrome:#5c6b7b; --chrome-2:#4a5764; --chrome-3:#3e4a56; --chrome-ink:#eef2f6;
  --qbar:#2e7d32; --qbar-2:#256628; --qbar-ink:#eafbea; --statusbar:#3e4a56;
  --bs-primary:#1677FF; --bs-primary-rgb:22,119,255;
  --bs-body-font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-link-color:#1677FF; --bs-link-hover-color:#0F62D6;
  /* Login/lock screen accents — the desktop build's gold on navy. */
  --lux-gold:#F7C442; --lux-gold-2:#B8860B; --lux-alert:#FF6E5A;
}
[data-theme="dark"]{
  --navy:#0a1622; --navy-2:#0f1d2b; --navy-3:#17304a;
  --bg:#0f141a; --surface:#161c24; --surface-2:#1b222b;
  --text:#e8ecf2; --muted:#93a0b0; --border:#28313d;
  --primary-soft:rgba(22,119,255,.16); --success-soft:#12241a; --info-soft:#122033;
  --warning-soft:#2a2110; --danger-soft:#2a1414; --purple-soft:#1e1830; --gray-soft:#20272f;
  --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --chrome:#2b343e; --chrome-2:#222a32; --chrome-3:#1b222a; --chrome-ink:#dbe3ec;
  --qbar:#1f6a24; --qbar-2:#17501b; --statusbar:#1b222a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600)}
h1,h2,h3,h4,h5{color:var(--text)}
::selection{background:var(--primary-soft-2)}
.text-muted{color:var(--muted)!important}
/* Legacy accent aliases (maroon/gold era) → on-palette primary blue */
.text-gold,.i-gold,.i-maroon,.text-maroon{color:var(--primary)!important}
/* ===== Buttons ===== */
.btn{min-height:40px;border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:34px;padding:5px 12px;font-size:.82rem}
.btn-lg{min-height:48px;padding:11px 22px}
.btn-primary,.btn-gold{background:var(--primary);border:1px solid var(--primary);color:#fff}
.btn-primary:hover,.btn-gold:hover,.btn-primary:focus,.btn-gold:focus{
  background:var(--primary-600);border-color:var(--primary-600);color:#fff}
.btn-maroon,.btn-navy{background:var(--navy-2);border:1px solid var(--navy-2);color:#fff}
.btn-maroon:hover,.btn-navy:hover{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
.btn-secondary,.btn-outline-secondary{background:var(--surface);border:1px solid var(--border);
  color:var(--text)}
.btn-secondary:hover,.btn-outline-secondary:hover{background:var(--surface-2);
  border-color:var(--muted);color:var(--text)}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-outline-primary{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);color:#fff}
/* Dark outline aliases to the neutral secondary button (kept on-palette) */
.btn-outline-dark{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.btn-outline-dark:hover{background:var(--surface-2);border-color:var(--muted);color:var(--text)}
.btn-outline-danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-outline-success{background:transparent;border:1px solid var(--success);color:var(--success)}
.btn-outline-success:hover{background:var(--success);border-color:var(--success);color:#fff}
.btn-light{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.btn:focus-visible,a:focus-visible,.form-control:focus-visible{
  outline:3px solid var(--primary-soft-2);outline-offset:1px}
/* Auth screens */
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);max-width:420px;margin:6vh auto;padding:30px}
.auth-card label{display:block;margin-top:14px;font-weight:600;font-size:.85rem}
.auth-title{color:var(--primary);font-weight:800;margin-bottom:.25rem}
.auth-sub{color:var(--muted);margin-bottom:1rem}
/* ===== Standalone screens: login, signup, recovery, screen lock and the
   subscription notice. Replica of the desktop build's login form — navy
   lobby backdrop, centred "HOTEL MANAGEMENT SOFTWARE" header band with the
   gold vendor line and tagline, the card in the middle, then the licence
   banner and the feature strip emitted by includes/footer.php. ===== */
.auth-body{min-height:100vh;color:#eef2f8;
  background:radial-gradient(1100px 560px at 50% -12%,#1d4166 0%,transparent 62%),
    radial-gradient(900px 500px at 88% 108%,#123354 0%,transparent 60%),
    linear-gradient(165deg,#06121f 0%,#0b1f36 48%,#050e1a 100%);
  background-attachment:fixed}
.auth-shell{min-height:100vh;display:flex;flex-direction:column;padding:0 16px 20px}
.auth-hero{text-align:center;padding:34px 6px 6px}
.auth-hero-title{margin:0;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(1.1rem,3.4vw,2rem);line-height:1.2;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.auth-hero-brand{margin-top:9px;color:var(--lux-gold);font-weight:700;letter-spacing:.15em;
  font-size:clamp(.7rem,1.6vw,.95rem)}
.auth-hero-sub{margin-top:6px;color:rgba(255,255,255,.8);font-size:clamp(.75rem,1.5vw,.95rem)}
.auth-main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:20px 0}
.auth-body .auth-card{width:100%;max-width:440px;margin:0;padding:26px;color:#eef2f8;
  background:rgba(10,25,43,.84);border:1px solid rgba(247,196,66,.3);border-radius:var(--radius-lg);
  box-shadow:0 26px 64px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.auth-logo{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.7rem;color:var(--lux-gold);
  background:rgba(247,196,66,.12);border:1px solid rgba(247,196,66,.4)}
.auth-body .auth-title{color:#fff;font-size:1.28rem;text-align:center}
.auth-body .auth-sub{color:rgba(255,255,255,.72);text-align:center}
.auth-body .auth-card label{color:rgba(255,255,255,.86)}
.auth-body .text-muted{color:rgba(255,255,255,.66)!important}
.auth-body .bg-secondary-subtle{background:rgba(247,196,66,.14)!important;color:#fff}
.auth-body a{color:var(--lux-gold)}
.auth-body a:hover{color:#ffd979}
.auth-body .form-control{min-height:44px;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2)}
.auth-body .form-control::placeholder{color:rgba(255,255,255,.42)}
.auth-body .form-control:focus{color:#fff;background:rgba(255,255,255,.11);
  border-color:var(--lux-gold);box-shadow:0 0 0 3px rgba(247,196,66,.2)}
.auth-body .btn-gold{min-height:46px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:linear-gradient(180deg,#d9a326 0%,var(--lux-gold-2) 100%);border:1px solid #a3711a;
  box-shadow:0 6px 18px rgba(184,134,11,.34)}
.auth-body .btn-gold:hover,.auth-body .btn-gold:focus{color:#fff;border-color:#a3711a;
  background:linear-gradient(180deg,#e5b02e 0%,#c2921a 100%)}
.auth-body .btn-link{color:var(--lux-gold)}
.auth-body .alert{border-width:1px;border-radius:var(--radius-sm)}
.auth-body .alert-danger{background:rgba(220,53,69,.18);border-color:rgba(255,110,90,.45);color:#ffd8d2}
.auth-body .alert-success{background:rgba(25,135,84,.18);border-color:rgba(80,220,150,.4);color:#d3f7e4}
.auth-body .alert-info{background:rgba(22,119,255,.18);border-color:rgba(120,180,255,.4);color:#d9e9ff}
.auth-body .alert-warning{background:rgba(255,193,7,.16);border-color:rgba(247,196,66,.5);color:#ffeec2}
/* Licence banner + feature strip below the card, both emitted by
   includes/footer.php. The banner keeps the desktop's high-contrast navy band
   with gold text, turning alert-red in its last five days. */
.auth-lic{width:100%;max-width:1050px;margin:0 auto;padding:12px 16px;text-align:center;
  border-radius:var(--radius-sm);background:rgba(5,18,32,.84);border:1px solid rgba(247,196,66,.34);
  color:var(--lux-gold);font-weight:700;font-size:.86rem;letter-spacing:.02em}
.auth-lic.is-alert{color:var(--lux-alert);border-color:rgba(255,110,90,.5)}
.auth-feat{margin:14px auto 0;max-width:1050px;text-align:center;color:rgba(235,235,235,.82);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
/* ===== App shell + Sidebar ===== */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);background:var(--navy);color:#cbd5e1;flex-shrink:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width .2s,margin-left .25s;scrollbar-width:thin;scrollbar-color:var(--navy-3) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--navy-3);border-radius:99px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;
  font-weight:800;color:#fff;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.sidebar .brand .brand-logo{width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem}
.sidebar .nav-sec{padding:4px 12px 2px}
.sidebar .nav-sec-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#5b6b7e;padding:12px 10px 5px}
.sidebar a,.sidebar .grp-toggle{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:1px 8px;
  color:#b7c4d3;text-decoration:none;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;
  border:0;background:none;width:calc(100% - 16px);cursor:pointer;text-align:left;white-space:nowrap}
.sidebar a i,.sidebar .grp-toggle i{font-size:1.05rem;flex-shrink:0;width:20px;text-align:center}
.sidebar a:hover,.sidebar .grp-toggle:hover{background:var(--navy-2);color:#fff}
.sidebar a.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(22,119,255,.35)}
.sidebar .grp-toggle .chev{margin-left:auto;font-size:.85rem;transition:transform .2s}
.sidebar .grp.open .grp-toggle .chev{transform:rotate(90deg)}
.sidebar .grp-body{display:none;padding:2px 0 4px}
.sidebar .grp.open .grp-body{display:block}
.sidebar .grp-body a{padding-left:30px;font-size:.84rem;margin-top:0;margin-bottom:0}
.sidebar .grp.has-active .grp-toggle{color:#fff}
.sidebar .logout{margin-top:auto;border-top:1px solid var(--navy-2);border-radius:0;
  margin:8px 0 0;padding:14px 20px;color:#94a3b8}
.sidebar .logout:hover{background:var(--navy-2);color:#fff}
/* Collapsed (desktop) */
.app-shell.sb-collapsed .sidebar{width:var(--sb-collapsed)}
.app-shell.sb-collapsed .sidebar .brand span,
.app-shell.sb-collapsed .sidebar .nav-sec-lbl,
.app-shell.sb-collapsed .sidebar a span,
.app-shell.sb-collapsed .sidebar .grp-toggle span,
.app-shell.sb-collapsed .sidebar .grp-toggle .chev,
.app-shell.sb-collapsed .sidebar .logout span{display:none}
.app-shell.sb-collapsed .sidebar .grp-body a{padding-left:12px}
.app-shell.sb-collapsed .sidebar a,.app-shell.sb-collapsed .sidebar .grp-toggle{justify-content:center}
/* ===== Main column + Top header ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 22px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1020;min-height:60px}
.topbar .tb-title{font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap}
.topbar .spacer{flex:1}
.menu-toggle,.sb-collapse-btn{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--muted);font-size:1.35rem;width:38px;height:38px;
  border-radius:var(--radius-sm);cursor:pointer}
.menu-toggle:hover,.sb-collapse-btn:hover{background:var(--surface-2);color:var(--text)}
.menu-toggle{display:none}
/* Global search */
.tb-search{position:relative;flex:1;max-width:420px}
.tb-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.95rem}
.tb-search input{width:100%;height:40px;border:1px solid var(--border);background:var(--surface-2);
  border-radius:99px;padding:0 14px 0 36px;color:var(--text);font-size:.86rem}
.tb-search input:focus{outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-soft)}
/* Icon buttons + badges */
.tb-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-sm);background:none;border:0;color:var(--muted);
  font-size:1.15rem;cursor:pointer}
.tb-ico:hover{background:var(--surface-2);color:var(--text)}
.tb-ico .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);border:2px solid var(--surface)}
.badge-plan{background:var(--primary-soft);color:var(--primary);border-radius:99px;
  padding:4px 12px;font-weight:700;font-size:.75rem}
/* User chip + dropdown */
.tb-user{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border:1px solid transparent;
  border-radius:99px;cursor:pointer;background:none}
.tb-user:hover{background:var(--surface-2);border-color:var(--border)}
.tb-user .ua{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.tb-user .un{line-height:1.15;text-align:left}
.tb-user .un b{font-size:.83rem;font-weight:600;color:var(--text);display:block}
.tb-user .un small{font-size:.72rem;color:var(--muted)}
.tb-menu{position:absolute;top:56px;right:16px;min-width:210px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:6px;z-index:1050;display:none}
.tb-menu.open{display:block}
.tb-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--text);font-size:.86rem}
.tb-menu a:hover{background:var(--surface-2)}
.tb-menu .sep{height:1px;background:var(--border);margin:5px 0}
/* ===== Content + Page header ===== */
.content{padding:24px;flex:1;width:100%}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:1.6rem;font-weight:700;margin:0;color:var(--text)}
.page-head .sub{color:var(--muted);font-size:.88rem;margin-top:3px}
.page-head .pg-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.breadcrumb-mini{font-size:.78rem;color:var(--muted);margin-bottom:4px;display:flex;gap:6px;align-items:center}
.breadcrumb-mini a{color:var(--muted)} .breadcrumb-mini a:hover{color:var(--primary)}
/* ===== Cards ===== */
.card,.sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card{border-radius:var(--radius)}
.sec{padding:18px 20px}
.card .card-header,.card-header{background:transparent;border-bottom:1px solid var(--border);font-weight:600}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.sec-head h3{font-size:1rem;font-weight:700;margin:0;color:var(--text);display:flex;align-items:center;gap:8px}
.sec-head h3 i{color:var(--primary);font-size:1.05rem}
.sec-head .link{font-size:.82rem;font-weight:600}
/* Alerts */
.alert{border:1px solid transparent;border-radius:var(--radius-sm);font-size:.88rem;padding:11px 15px}
.alert-success{background:var(--success-soft);border-color:transparent;color:#0f7a37}
.alert-warning{background:var(--warning-soft);color:#9a6200}
.alert-danger{background:var(--danger-soft);color:#c02626}
.alert-info{background:var(--info-soft);color:var(--primary-700)}
/* ===== Tables ===== */
.table{--bs-table-bg:transparent;color:var(--text);margin-bottom:0;font-size:.875rem}
.table>thead th{background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);
  padding:11px 12px;white-space:nowrap}
.table>tbody td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table>tbody tr:hover{background:var(--surface-2)}
.table>tbody tr:last-child td{border-bottom:0}
.table-responsive{border-radius:var(--radius);overflow:auto}
/* ===== Forms ===== */
.form-label,label{font-weight:600;font-size:.82rem;color:var(--text);margin-bottom:5px}
.form-control,.form-select{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);min-height:40px;font-size:.875rem;padding:8px 12px}
.form-control::placeholder{color:var(--muted)}
.form-control:focus,.form-select:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface);color:var(--text)}
.form-control:disabled,.form-select:disabled{background:var(--surface-2)}
.input-group-text{background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.req{color:var(--danger);font-weight:700}
/* ===== Bootstrap badges → status vocabulary ===== */
.badge{font-weight:600;font-size:.72rem;padding:.4em .7em;border-radius:99px}
.badge.bg-success{background:var(--success-soft)!important;color:#0f7a37}
.badge.bg-secondary{background:var(--gray-soft)!important;color:var(--gray)}
.badge.bg-primary{background:var(--info-soft)!important;color:var(--primary)}
.badge.bg-warning{background:var(--warning-soft)!important;color:#9a6200}
.badge.bg-danger{background:var(--danger-soft)!important;color:#c02626}
.badge.bg-info{background:var(--info-soft)!important;color:var(--primary)}
/* ===== Modals ===== */
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(16,32,53,.25)}
.modal-header,.modal-footer{border-color:var(--border)}
.modal-title{font-weight:700;font-size:1.05rem}
/* Nav tabs */
.nav-tabs{border-bottom:1px solid var(--border);gap:2px}
.nav-tabs .nav-link{border:0;color:var(--muted);font-weight:600;font-size:.86rem;border-radius:0;
  padding:9px 14px;border-bottom:2px solid transparent}
.nav-tabs .nav-link:hover{color:var(--text)}
.nav-tabs .nav-link.active{color:var(--primary);background:none;border-bottom-color:var(--primary)}
/* Pill tab strips (Gym, Masters, Bar, Purchase …). Every tab is a filled chip,
   not just the active one, so the whole strip reads as one control group
   instead of a row of loose links. */
.nav-pills{gap:8px}
.nav-pills .nav-link{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 15px;
  border-radius:var(--radius-sm);font-weight:600;font-size:.86rem;line-height:1.2;
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:background .15s ease,color .15s ease,border-color .15s ease}
.nav-pills .nav-link:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.nav-pills .nav-link.active{background:var(--primary);border-color:var(--primary);color:#fff}
.nav-pills .nav-link.disabled{background:var(--gray-soft);color:var(--muted);border-color:var(--border);box-shadow:none}
/* ===== Hero welcome card ===== */
.hero-card{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 60%,var(--primary-700) 130%);
  color:#fff;border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow)}
.hero-card h2{color:#fff;font-size:1.35rem;font-weight:700;margin:0 0 4px}
.hero-card p{color:#c9d6e5;margin:0;font-size:.9rem}
.hero-card .hero-date{background:rgba(255,255,255,.12);color:#fff;border-radius:99px;
  padding:7px 15px;font-size:.82rem;font-weight:600;white-space:nowrap}
/* ===== KPI cards ===== */
.kpi{display:flex;align-items:center;gap:14px;padding:18px}
.kpi-ico{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem}
.kpi-ico.i-blue,.kpi-ico.i-maroon{background:var(--info-soft);color:var(--primary)}
.kpi-ico.i-green{background:var(--success-soft);color:var(--success)}
.kpi-ico.i-gold,.kpi-ico.i-warning{background:var(--warning-soft);color:var(--warning)}
.kpi-ico.i-red{background:var(--danger-soft);color:var(--danger)}
.kpi-ico.i-purple{background:var(--purple-soft);color:var(--purple)}
.kpi-ico.i-gray{background:var(--gray-soft);color:var(--gray)}
.kpi-body{min-width:0}
.kpi-label{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi-val{font-size:1.55rem;font-weight:800;color:var(--text);line-height:1.15;margin:2px 0}
.kpi-val small{font-size:.9rem;font-weight:600;color:var(--muted)}
.kpi-trend{font-size:.76rem;font-weight:600;display:flex;align-items:center;gap:4px}
.kpi-trend.up{color:var(--success)} .kpi-trend.down{color:var(--danger)} .kpi-trend.flat{color:var(--muted)}
/* ===== Quick actions ===== */
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:16px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font-size:.8rem;font-weight:600;text-align:center;
  transition:border-color .15s,background .15s,transform .05s}
.qa i{font-size:1.35rem;color:var(--primary)}
.qa:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--text);transform:translateY(-1px)}
/* ===== Room status: legend + grid ===== */
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.76rem;color:var(--muted);font-weight:600}
.legend span{display:flex;align-items:center;gap:6px}
.legend i,[class^="dot-"]{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-available{background:var(--success)} .dot-occupied{background:var(--primary)}
.dot-reserved{background:var(--purple)}  .dot-inactive{background:var(--gray)}
.dot-cleaning{background:var(--warning)} .dot-maintenance{background:var(--danger)} .dot-ooo{background:var(--gray)}
.floor-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--border)}
.floor-row:last-child{border-bottom:0}
.floor-lbl{width:56px;flex-shrink:0;font-weight:700;font-size:.8rem;color:var(--muted);padding-top:8px}
.room-chips{display:flex;flex-wrap:wrap;gap:9px;flex:1}
.room-chip{width:74px;height:60px;border-radius:var(--radius-sm);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-weight:700;font-size:.92rem;color:#fff;
  border:1px solid transparent;cursor:default;box-shadow:var(--shadow-sm)}
.room-chip small{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.9;margin-top:2px}
.rc-available{background:var(--success)} .rc-occupied{background:var(--primary)}
.rc-reserved{background:var(--purple)}  .rc-inactive{background:var(--gray)}
.rc-cleaning{background:var(--warning)} .rc-maintenance{background:var(--danger)} .rc-ooo{background:var(--navy-3)}
/* ===== Guest lists (arrivals / departures) ===== */
.glist{display:flex;flex-direction:column;gap:2px}
.row-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}
.row-item:last-child{border-bottom:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.row-item .nm{font-weight:600;font-size:.86rem;color:var(--text)}
.row-item .mt{font-size:.76rem;color:var(--muted)}
.row-item .rt{margin-left:auto}
/* Booking status chips */
.st{font-weight:700;font-size:.68rem;padding:4px 9px;border-radius:99px;text-transform:capitalize;white-space:nowrap}
.st-reserved,.st-confirmed,.st-tentative{background:var(--purple-soft);color:var(--purple)}
.st-checked_in{background:var(--info-soft);color:var(--primary)}
.st-checked_out{background:var(--gray-soft);color:var(--gray)}
.st-cancelled,.st-no_show{background:var(--danger-soft);color:#c02626}
.st-paid{background:var(--success-soft);color:#0f7a37}
.st-partial,.st-pending,.st-unpaid{background:var(--warning-soft);color:#9a6200}
/* ===== Donut (occupancy) ===== */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{--pct:0;width:132px;height:132px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--primary) calc(var(--pct)*1%),var(--surface-2) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.donut::after{content:"";position:absolute;inset:16px;background:var(--surface);border-radius:50%}
.donut .dc{position:relative;z-index:1;text-align:center}
.donut .dc b{display:block;font-size:1.5rem;font-weight:800;color:var(--text)}
.donut .dc span{font-size:.72rem;color:var(--muted)}
.donut-legend{display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--text)}
.donut-legend b{color:var(--text)}
/* ===== Bars (room-type occupancy / collection by mode) ===== */
.bar-item{margin-bottom:14px}
.bar-item:last-child{margin-bottom:0}
.bl{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:6px}
.bl .mut{color:var(--muted);font-weight:600}
.bar-track{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-600));border-radius:99px;
  transition:width .5s ease}
/* ===== Revenue chart (svg) ===== */
.chart-svg{width:100%;height:150px;display:block;--gold:var(--primary)}
.chart-svg .area{fill:url(#revGrad)}
.chart-svg .line{fill:none;stroke:var(--primary);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.chart-svg .dot{fill:var(--surface);stroke:var(--primary);stroke-width:1.2;vector-effect:non-scaling-stroke}
.chart-x{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-top:6px;font-weight:600}
/* ===== Activity feed ===== */
.feed{display:flex;flex-direction:column}
.fi{display:flex;gap:12px;padding:9px 2px;position:relative}
.fi .fd{width:9px;height:9px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:5px;
  box-shadow:0 0 0 3px var(--primary-soft)}
.fi .ft{font-size:.84rem;font-weight:600;color:var(--text)}
.fi .fm{font-size:.74rem;color:var(--muted)}
/* Empty states */
.empty-note{padding:26px 12px;text-align:center;color:var(--muted);font-size:.86rem}
.empty-note a{font-weight:600}
/* ===== Page-head actions on mobile ===== */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(11,27,43,.5);z-index:1035}
.sb-backdrop.show{display:block}
/* ==========================================================================
   Classic desktop shell (body.classic) — MenuStrip1 + MenuStrip2 + StatusStrip
   Faithful replica of the HMS Pro WinForms chrome. Scoped to body.classic so
   the super-admin panel keeps its left-sidebar layout untouched.
   ========================================================================== */
body.classic .app-shell{display:block;min-height:100vh}
body.classic .main{display:block;flex:none;min-width:0;min-height:calc(100vh - 46px)}
/* MenuStrip1 — slate dropdown menu bar */
.menubar{display:flex;align-items:center;gap:4px;padding:0 12px;min-height:46px;
  background:linear-gradient(180deg,var(--chrome) 0%,var(--chrome-2) 100%);color:var(--chrome-ink);
  position:sticky;top:0;z-index:1040;box-shadow:0 2px 6px rgba(0,0,0,.22);border-bottom:1px solid rgba(0,0,0,.28)}
/* The brand is a link back to the dashboard. */
.mb-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:#fff;white-space:nowrap;
  text-decoration:none;
  padding-right:12px;margin-right:4px;border-right:1px solid rgba(255,255,255,.16)}
.mb-brand:hover{color:#fff}
.mb-brand:hover .mb-logo{background:var(--qbar-2)}
.mb-brand:hover .mb-name{text-decoration:underline;text-underline-offset:3px}
.mb-logo{width:30px;height:30px;border-radius:8px;background:var(--qbar);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.05rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);flex-shrink:0}
.mb-name{font-size:.92rem;letter-spacing:.01em;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.mb-burger{display:inline-flex;align-items:center;justify-content:center;order:-1;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);color:#fff;font-size:1.25rem;
  width:40px;height:40px;cursor:pointer;flex-shrink:0}
.mb-burger:hover{background:rgba(255,255,255,.2)}
/* MenuStrip1 lives in an off-canvas drawer at every width (opened by .mb-burger) */
.menustrip1{position:fixed;top:0;left:0;height:100vh;width:274px;display:flex;flex-direction:column;
  align-items:stretch;gap:0;background:var(--chrome-2);padding-top:52px;transform:translateX(-100%);
  transition:transform .25s;z-index:1045;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  box-shadow:10px 0 40px rgba(0,0,0,.35)}
.menustrip1.open{transform:translateX(0)}
.menustrip1::-webkit-scrollbar{width:6px}
.menustrip1::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
.mb-close{position:absolute;top:9px;right:9px;z-index:1046;display:none;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08);color:#fff;font-size:1rem;cursor:pointer}
.mb-close:hover{background:rgba(255,255,255,.2)}
.menustrip1.open .mb-close{display:inline-flex}
.m1{display:inline-flex;align-items:center;gap:7px;padding:0 12px;height:46px;color:var(--chrome-ink);
  background:none;border:0;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;
  text-decoration:none;border-bottom:3px solid transparent;font-family:inherit}
.m1 i{font-size:1rem}
.m1:hover{background:rgba(255,255,255,.12);color:#fff}
.m1.active,.m1-drop.has-active .m1-toggle{background:rgba(0,0,0,.20);color:#fff;border-bottom-color:var(--qbar)}
.m1 .caret{font-size:.6rem;opacity:.85;margin-left:1px}
.m1-drop{position:relative;display:flex}
.m1-menu{position:absolute;top:100%;left:0;min-width:236px;background:var(--surface);border:1px solid var(--border);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 14px 36px rgba(0,0,0,.28);padding:6px;
  z-index:1040;display:none;flex-direction:column}
.m1-drop.open .m1-menu{display:flex}
.m1-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--text);font-size:.85rem;font-weight:500;white-space:nowrap}
.m1-menu a i{font-size:1rem;color:var(--muted);width:18px;text-align:center}
.m1-menu a:hover{background:var(--primary-soft);color:var(--primary)}
.m1-menu a:hover i{color:var(--primary)}
.m1-menu a.active{background:var(--primary);color:#fff}
.m1-menu a.active i{color:#fff}
/* Nested submenu (one level) inside a MenuStrip1 dropdown panel */
.m1-sub{position:relative;display:flex;flex-direction:column}
.m1-sub-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border:0;background:none;border-radius:var(--radius-sm);color:var(--text);font-family:inherit;
  font-size:.85rem;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer;min-height:44px}
.m1-sub-toggle i{font-size:1rem;color:var(--muted);width:18px;text-align:center}
.m1-sub-toggle .caret{font-size:.6rem;width:auto;margin-left:auto;opacity:.75}
.m1-sub-toggle:hover{background:var(--primary-soft);color:var(--primary)}
.m1-sub-toggle:hover i{color:var(--primary)}
.m1-sub-toggle.active{background:var(--primary);color:#fff}
.m1-sub-toggle.active i{color:#fff}
.m1-sub>.m1-menu{top:-6px;left:calc(100% + 6px);border-radius:var(--radius-sm)}
.m1-sub.open>.m1-menu{display:flex}
.menubar .mb-spacer{flex:0 0 auto;min-width:4px}
.menubar .badge-plan{flex-shrink:0}
.menubar .tb-ico{color:var(--chrome-ink);flex-shrink:0}
.menubar .tb-ico:hover{background:rgba(255,255,255,.14);color:#fff}
.mb-userwrap{position:relative;flex-shrink:0}
.menubar .tb-user{color:#fff}
.menubar .tb-user .un b{color:#fff}
.menubar .tb-user .un small{color:rgba(255,255,255,.72)}
.menubar .tb-user:hover{background:rgba(255,255,255,.12);border-color:transparent}
.menubar .tb-menu{top:calc(100% + 6px);right:0}
/* Drawer item styling — MenuStrip1 is a vertical panel at every width, so the
   dropdown panels expand inline instead of floating. */
.m1{height:auto;padding:11px 16px;width:100%;min-height:44px;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0}
.m1.active,.m1-drop.has-active .m1-toggle{border-bottom-color:rgba(255,255,255,.06)}
.m1-drop{flex-direction:column;width:100%}
.m1-toggle{justify-content:space-between}
.m1-toggle .caret{margin-left:auto}
/* Scoped to the drawer: MenuStrip2's flyouts reuse the .m1-menu class but must
   keep floating as light panels. */
.menustrip1 .m1-menu{position:static;box-shadow:none;border:0;border-radius:0;padding:0;background:rgba(0,0,0,.20);min-width:0}
.menustrip1 .m1-menu a{color:var(--chrome-ink);padding:9px 16px 9px 42px;border-radius:0;min-height:44px}
.menustrip1 .m1-menu a i{color:rgba(255,255,255,.6)}
.menustrip1 .m1-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.menustrip1 .m1-menu a:hover i{color:#fff}
.menustrip1 .m1-menu a.active{background:var(--qbar)}
.m1-sub{width:100%}
.m1-sub-toggle{width:100%;padding:9px 16px 9px 42px;border-radius:0;color:var(--chrome-ink);min-height:44px}
.m1-sub-toggle i{color:rgba(255,255,255,.6)}
.m1-sub-toggle .caret{transform:rotate(90deg)}
.m1-sub-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.m1-sub-toggle:hover i{color:#fff}
.m1-sub-toggle.active{background:var(--qbar);color:#fff}
.m1-sub-toggle.active i{color:#fff}
.menustrip1 .m1-sub>.m1-menu{position:static;top:auto;left:auto;background:rgba(0,0,0,.16);border-radius:0}
.menustrip1 .m1-sub .m1-menu a{padding-left:60px}
/* MenuStrip2 — green quick-action bar. It renders only inside the MenuStrip1
   bar, inline right after the hotel name. Chips carry their name next to the
   icon; when the window is too narrow for one labelled row they collapse to
   icon-only (label kept for screen readers, shown as the title tooltip) so the
   strip still fits its position and never scrolls. */
.menustrip2{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;row-gap:4px;
  margin:4px 0;padding:4px 6px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--qbar) 0%,var(--qbar-2) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.m2{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;min-height:40px;
  border-radius:var(--radius-sm);
  color:var(--qbar-ink);font-size:.78rem;font-weight:600;white-space:nowrap;text-decoration:none;line-height:1.2;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)}
.m2 i{font-size:1rem}
.m2:hover{background:rgba(255,255,255,.22);color:#fff}
.m2.active{background:#fff;color:var(--qbar-2)}
.m2-logout{margin-left:auto;background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.2)}
.m2-logout:hover{background:rgba(0,0,0,.3);color:#fff}
/* Quick-bar dropdown group */
.m2-drop{position:relative;display:inline-flex}
button.m2{font-family:inherit;cursor:pointer;line-height:1.2}
.m2-toggle .caret{font-size:.6rem;opacity:.85}
.m2-drop.has-active .m2-toggle{background:#fff;color:var(--qbar-2)}
.m2-menu{top:calc(100% + 6px);left:0}
.m2-drop.open .m2-menu{display:flex}
/* The last group sits near the right edge, so its flyout opens leftwards. */
.m2-drop:last-of-type .m2-menu{left:auto;right:0}
/* Phones and small tablets: there is no room for eleven labelled chips, so the
   strip collapses to icons. The label is clipped rather than removed, so screen
   readers keep it and the title attribute still shows it on hover. */
@media (max-width:992px){
  .m2 span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .m2{gap:4px;padding:0 11px}
  .m2 i{font-size:1.05rem}
}
/* StatusStrip — footer bar */
.statusbar{display:flex;align-items:center;gap:10px;padding:5px 16px;font-size:.76rem;flex-wrap:wrap;
  background:var(--statusbar);color:#cdd6df;border-top:1px solid rgba(0,0,0,.32)}
.statusbar b{color:#fff;font-weight:600}
.statusbar .ss-item{display:flex;align-items:center;gap:6px}
.statusbar .ss-item i{opacity:.82}
.statusbar .ss-sep{width:1px;height:14px;background:rgba(255,255,255,.2)}
.statusbar .ss-spacer{flex:1}
/* ===== Responsive ===== */
@media (max-width:1100px){
  .qa-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .menu-toggle{display:inline-flex}
  .sb-collapse-btn{display:none}
  .sidebar{position:fixed;left:0;top:0;z-index:1040;height:100vh;margin-left:calc(-1 * var(--sb-w) - 8px);
    box-shadow:0 10px 40px rgba(0,0,0,.35)}
  .sidebar.open{margin-left:0}
  .content{padding:16px}
  .topbar{padding:10px 14px}
  .tb-search{max-width:none}
  .page-head h1{font-size:1.35rem}
}
@media (max-width:576px){
  .tb-search{display:none}
  /* Touch: full 44px target on the pill tab strips. */
  .nav-pills .nav-link{min-height:44px;padding:10px 14px}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .hero-card{padding:18px}
  .kpi{padding:14px;gap:11px}
  .kpi-ico{width:44px;height:44px;font-size:1.25rem}
  .kpi-val{font-size:1.3rem}
  .donut-wrap{justify-content:center}
  .floor-row{flex-wrap:wrap;gap:8px}
  .floor-lbl{width:100%;padding-top:0}
  .room-chips{gap:8px}
  .room-chip{width:calc((100% - 24px) / 4);min-width:64px;height:54px}
  .tb-user .un{display:none}
}
/* Classic shell — small-screen trims (the MenuStrip1 drawer itself is now global) */
@media (max-width:992px){
  .mb-name{max-width:150px}
  /* Too little room beside the brand: the green strip takes its own full-width
     line inside the sticky bar instead of being squeezed to a few pixels. */
  .menubar{flex-wrap:wrap;padding:0 10px}
  .menubar .menustrip2{order:9;flex:1 0 100%;margin:0 -10px;padding:5px 10px;border-radius:0;
    box-shadow:0 2px 5px rgba(0,0,0,.16)}
  /* Touch: each chip gets a full 44px target. */
  .menubar .m2{min-height:44px;padding:0 13px}
}
@media (max-width:640px){
  .mb-brand{padding-right:8px;margin-right:2px}
  .mb-name{max-width:110px;font-size:.85rem}
  .mb-logo{width:26px;height:26px;font-size:.95rem}
  .badge-plan{padding:3px 7px;font-size:.66rem}
  .tb-ico{width:34px;height:34px}
  .tb-user{padding:3px 6px}
  .tb-user .ua{width:28px;height:28px;font-size:.78rem}
  .menustrip1{width:min(88vw,300px)}
}
@media (max-width:576px){
  .menubar{gap:2px;padding:0 8px}
  .menustrip2{padding:6px 8px}
  .statusbar .ss-spacer{display:none}
}