/**
 * dashboard.css — Hotel Wood Stone Dashboard Layout & Components
 * Internal Operating Platform · Phase 9A.2
 *
 * DEPENDS ON: main.css (loads first — provides all CSS variables)
 *
 * CONTENTS:
 *   1.  Dashboard Shell Layout
 *   2.  Sidebar — Dark Luxury Navigation
 *   3.  Top Header — Glass Effect
 *   4.  Page Content Area
 *   5.  KPI Cards — Champagne Accent
 *   6.  Module Grid & Module Cards
 *   7.  Section Headers
 *   8.  Data Tables — Warm Elegant
 *   9.  Modals & Overlay — Cinematic
 *  10.  Toast Notifications
 *  11.  Room Status Grid
 *  12.  Kanban / Cleaning Board
 *  13.  Empty States
 *  14.  Loading Skeleton
 *  15.  Login Page
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DASHBOARD SHELL LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.app-shell {
  display   : flex;
  min-height: 100vh;
  background: var(--surface-0);
}

.app-main {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  margin-left    : var(--sidebar-width);
  transition     : margin-left var(--transition-base);
  min-width      : 0; /* prevent flex blowout */
}

.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed);
}

.app-content {
  flex       : 1;
  padding    : var(--sp-8);
  overflow-y : auto;
  margin-top : var(--header-height);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SIDEBAR — DARK LUXURY NAVIGATION
   Deep, warm, perfectly proportioned.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  width          : var(--sidebar-width);
  height         : 100vh;
  position       : fixed;
  top            : 0;
  left           : 0;
  display        : flex;
  flex-direction : column;
  z-index        : var(--z-sidebar);
  overflow       : hidden;
  transition     : width var(--transition-base);

  /* Rich dark gradient — warm, not cold */
  background     : linear-gradient(
    180deg,
    #0D0505 0%,
    var(--hws-espresso) 30%,
    #130807 70%,
    #0A0202 100%
  );

  /* Subtle right-edge border */
  border-right   : 1px solid var(--border-subtle);
  box-shadow     : 4px 0 24px rgba(0,0,0,0.5);
}

/* ── Sidebar Logo / Brand ───────────────────────────────────────────────── */
.sidebar-brand {
  display        : flex;
  align-items    : center;
  gap            : var(--sp-3);
  padding        : var(--sp-6) var(--sp-5);
  border-bottom  : 1px solid var(--border-subtle);
  text-decoration: none;
  overflow       : hidden;
  flex-shrink    : 0;
}

.sidebar-brand-icon {
  width           : 38px;
  height          : 38px;
  border-radius   : var(--radius-sm);
  background      : linear-gradient(135deg, var(--hws-gold) 0%, var(--hws-bronze) 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--font-serif);
  font-size       : var(--text-lg);
  font-weight     : var(--weight-bold);
  color           : var(--hws-black);
  flex-shrink     : 0;
  box-shadow      : 0 2px 8px rgba(211,161,115,0.30);
  letter-spacing  : var(--tracking-tight);
}

.sidebar-brand-text {
  display         : flex;
  flex-direction  : column;
  overflow        : hidden;
}

.sidebar-brand-name {
  font-family    : var(--font-serif);
  font-size      : var(--text-sm);
  font-weight    : var(--weight-semibold);
  color          : var(--hws-ivory);
  letter-spacing : 0.01em;
  line-height    : 1.2;
  white-space    : nowrap;
}

.sidebar-brand-sub {
  font-size      : var(--text-3xs);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
  white-space    : nowrap;
  margin-top     : 2px;
}

/* ── Sidebar Navigation ──────────────────────────────────────────────────── */
.sidebar-nav {
  flex       : 1;
  overflow-y : auto;
  padding    : var(--sp-4) 0 var(--sp-4);
}

.nav-section {
  margin-bottom: var(--sp-2);
}

.nav-section-label {
  padding        : var(--sp-4) var(--sp-5) var(--sp-2);
  font-size      : var(--text-3xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : rgba(184,138,99,0.4);
  white-space    : nowrap;
  overflow       : hidden;
  user-select    : none;
}

.nav-item {
  display        : flex;
  align-items    : center;
  gap            : var(--sp-3);
  padding        : 10px var(--sp-5);
  color          : var(--hws-stone);
  font-family    : var(--font-ui);
  font-size      : var(--text-sm);
  font-weight    : var(--weight-medium);
  cursor         : pointer;
  text-decoration: none;
  white-space    : nowrap;
  overflow       : hidden;
  position       : relative;
  transition     :
    color      var(--transition-fast),
    background var(--transition-fast);

  /* Left accent bar — hidden by default */
  border-left    : 2px solid transparent;
  transition     : all var(--transition-fast);
}

.nav-item::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : transparent;
  transition : background var(--transition-fast);
}

.nav-item:hover {
  color        : var(--hws-beige);
  border-left-color: rgba(211,161,115,0.3);
}

.nav-item:hover::before {
  background: rgba(211,161,115,0.04);
}

/* Active state — champagne gold */
.nav-item.active {
  color           : var(--hws-gold);
  border-left-color: var(--hws-gold);
  font-weight     : var(--weight-semibold);
}

.nav-item.active::before {
  background: linear-gradient(90deg, rgba(211,161,115,0.10) 0%, transparent 100%);
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-icon {
  font-size  : 15px;
  width      : 18px;
  text-align : center;
  flex-shrink: 0;
  opacity    : 0.6;
  transition : opacity var(--transition-fast);
}

.nav-item:hover .nav-icon { opacity: 0.85; }

.nav-label { flex: 1; }

.nav-badge { margin-left: auto; } /* uses .notif-dot from main.css */

/* ── Sidebar Footer ──────────────────────────────────────────────────────── */
.sidebar-footer {
  padding       : var(--sp-4) var(--sp-5);
  border-top    : 1px solid var(--border-subtle);
  flex-shrink   : 0;
}

.sidebar-version {
  font-size    : var(--text-3xs);
  color        : rgba(140,123,116,0.4);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  white-space  : nowrap;
  overflow     : hidden;
}

.btn-logout {
  display       : flex;
  align-items   : center;
  gap           : var(--sp-2);
  width         : 100%;
  padding       : 8px var(--sp-3);
  font-family   : var(--font-ui);
  font-size     : var(--text-xs);
  font-weight   : var(--weight-medium);
  color         : var(--hws-stone);
  background    : transparent;
  border        : 1px solid var(--border-subtle);
  border-radius : var(--radius-sm);
  cursor        : pointer;
  transition    : all var(--transition-fast);
  letter-spacing: var(--tracking-wide);
  white-space   : nowrap;
  overflow      : hidden;
}

.btn-logout:hover {
  color         : var(--hws-danger);
  border-color  : var(--hws-danger-border);
  background    : var(--hws-danger-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TOP HEADER — GLASS EFFECT
   Minimal. Warm dark glass. Never heavy.
   ═══════════════════════════════════════════════════════════════════════════ */
.app-header {
  height         : var(--header-height);
  position       : fixed;
  top            : 0;
  right          : 0;
  left           : var(--sidebar-width);
  z-index        : var(--z-header);
  display        : flex;
  align-items    : center;
  padding        : 0 var(--sp-8);
  gap            : var(--sp-5);
  transition     : left var(--transition-base);

  /* Glass dark gradient */
  background     : rgba(10,2,2,0.80);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom  : 1px solid var(--border-subtle);
  box-shadow     : 0 1px 0 rgba(211,161,115,0.06);
}

.sidebar-collapsed .app-header { left: var(--sidebar-collapsed); }

/* Header zones */
.header-left   { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.header-center { flex: 1; display: flex; flex-direction: column; align-items: center; }
.header-right  { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

/* Hamburger toggle */
.btn-sidebar-toggle {
  width           : 32px;
  height          : 32px;
  border-radius   : var(--radius-sm);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 4px;
  cursor          : pointer;
  background      : transparent;
  border          : none;
  transition      : background var(--transition-fast);
  padding         : var(--sp-2);
}
.btn-sidebar-toggle:hover { background: var(--surface-hover); }
.btn-sidebar-toggle span {
  display       : block;
  width         : 16px;
  height        : 1.5px;
  background    : var(--hws-stone);
  border-radius : var(--radius-full);
  transition    : background var(--transition-fast);
}
.btn-sidebar-toggle:hover span { background: var(--hws-beige); }

/* Breadcrumb */
.breadcrumb {
  display    : flex;
  align-items: center;
  gap        : var(--sp-2);
  font-size  : var(--text-xs);
  color      : var(--text-subtle);
}
.breadcrumb-sep { color: var(--hws-ash); font-size: 10px; }
.breadcrumb-current { color: var(--hws-beige); font-weight: var(--weight-medium); }

/* Hotel name in header center */
.header-hotel-name {
  font-family    : var(--font-serif);
  font-size      : var(--text-base);
  font-weight    : var(--weight-medium);
  color          : var(--hws-gold);
  letter-spacing : 0.02em;
  line-height    : 1;
}

.header-date {
  font-size      : var(--text-xs);
  color          : var(--text-subtle);
  letter-spacing : var(--tracking-wide);
  margin-top     : 3px;
}

/* Search bar */
.header-search {
  position   : relative;
  display    : flex;
  align-items: center;
}
.header-search input {
  width          : 200px;
  padding        : 6px var(--sp-4) 6px var(--sp-8);
  font-size      : var(--text-xs);
  color          : var(--hws-beige);
  background     : rgba(255,255,255,0.04);
  border         : 1px solid var(--border-input);
  border-radius  : var(--radius-full);
  outline        : none;
  transition     : all var(--transition-base);
}
.header-search input::placeholder { color: var(--hws-stone); }
.header-search input:focus {
  border-color : var(--border-focus);
  background   : rgba(255,255,255,0.07);
  width        : 260px;
  box-shadow   : 0 0 0 3px rgba(211,161,115,0.08);
}
.header-search-icon {
  position  : absolute;
  left      : var(--sp-3);
  color     : var(--hws-stone);
  font-size : 12px;
  pointer-events: none;
}

/* Notification bell */
.header-notif {
  position  : relative;
  width     : 34px;
  height    : 34px;
  display   : flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor    : pointer;
  color     : var(--hws-stone);
  transition: all var(--transition-fast);
  background: transparent;
  border    : none;
}
.header-notif:hover {
  background: var(--surface-hover);
  color     : var(--hws-beige);
}
.header-notif .notif-dot {
  position   : absolute;
  top        : 3px;
  right      : 3px;
  min-width  : 14px;
  height     : 14px;
  font-size  : 9px;
}

/* User pill */
.user-pill {
  display       : flex;
  align-items   : center;
  gap           : var(--sp-2);
  padding       : 5px var(--sp-3) 5px 5px;
  background    : rgba(255,255,255,0.04);
  border        : 1px solid var(--border-input);
  border-radius : var(--radius-full);
  cursor        : pointer;
  transition    : all var(--transition-fast);
}
.user-pill:hover {
  background   : var(--hws-gold-glow-soft);
  border-color : var(--border-soft);
}

.user-avatar {
  width           : 28px;
  height          : 28px;
  border-radius   : 50%;
  background      : linear-gradient(135deg, var(--hws-wine) 0%, var(--hws-burgundy) 100%);
  border          : 1px solid var(--hws-gold-border);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--font-serif);
  font-size       : var(--text-sm);
  font-weight     : var(--weight-semibold);
  color           : var(--hws-gold);
  flex-shrink     : 0;
  line-height     : 1;
}

.user-name {
  font-size  : var(--text-xs);
  font-weight: var(--weight-medium);
  color      : var(--hws-beige);
  white-space: nowrap;
}

.user-role {
  font-size      : var(--text-3xs);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PAGE CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════ */
.page-header {
  margin-bottom : var(--sp-8);
}

.page-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-2xl);
  font-weight    : var(--weight-semibold);
  color          : var(--hws-ivory);
  letter-spacing : var(--tracking-tight);
  line-height    : 1.2;
}

.page-subtitle {
  font-size    : var(--text-sm);
  color        : var(--text-muted);
  margin-top   : var(--sp-2);
  line-height  : var(--leading-base);
}

/* Ornamental gold underline below page title */
.page-title-line {
  width      : 40px;
  height     : 2px;
  background : linear-gradient(90deg, var(--hws-gold), transparent);
  margin-top : var(--sp-3);
}

/* Section heading within a page */
.section-heading {
  display        : flex;
  align-items    : center;
  gap            : var(--sp-3);
  margin-bottom  : var(--sp-5);
}

.section-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-lg);
  font-weight    : var(--weight-medium);
  color          : var(--hws-ivory);
  letter-spacing : var(--tracking-tight);
}

.section-rule {
  flex      : 1;
  height    : 1px;
  background: linear-gradient(90deg, var(--border-soft), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. KPI CARDS — CHAMPAGNE ACCENT
   Dark gradient surfaces. Gold typography. Warm glow.
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-row {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(210px, 1fr));
  gap                   : var(--sp-5);
  margin-bottom         : var(--sp-8);
}

.kpi-card {
  background    : linear-gradient(145deg, var(--hws-wine) 0%, var(--hws-espresso) 60%, var(--hws-black) 100%);
  border        : 1px solid var(--border-soft);
  border-radius : var(--radius-lg);
  padding       : var(--sp-6);
  position      : relative;
  overflow      : hidden;
  box-shadow    : var(--shadow-card);
  transition    : transform var(--transition-base), box-shadow var(--transition-base);
  cursor        : default;
}

.kpi-card:hover {
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-md), 0 0 0 1px var(--hws-gold-border);
}

/* Ambient gold glow in top-right corner */
.kpi-card::after {
  content    : '';
  position   : absolute;
  top        : -40px; right: -40px;
  width      : 100px; height: 100px;
  border-radius: 50%;
  background : radial-gradient(circle, rgba(211,161,115,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.kpi-label {
  font-family    : var(--font-ui);
  font-size      : var(--text-3xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
  margin-bottom  : var(--sp-2);
}

.kpi-value {
  font-family    : var(--font-serif);
  font-size      : var(--text-3xl);
  font-weight    : var(--weight-bold);
  color          : var(--hws-ivory);
  letter-spacing : var(--tracking-tight);
  line-height    : 1;
  margin-bottom  : var(--sp-3);
}

.kpi-value.kpi-currency::before {
  content   : '₹';
  font-size : 0.6em;
  font-weight: var(--weight-regular);
  color     : var(--hws-gold-muted);
  vertical-align: super;
  margin-right: 2px;
}

.kpi-delta {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
  font-size  : var(--text-xs);
  color      : var(--text-subtle);
  font-family: var(--font-ui);
}
.kpi-delta.up   { color: var(--hws-success); }
.kpi-delta.down { color: var(--hws-danger);  }

.kpi-icon {
  position   : absolute;
  bottom     : var(--sp-4);
  right      : var(--sp-5);
  font-size  : 28px;
  opacity    : 0.06;
  line-height: 1;
  color      : var(--hws-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MODULE GRID & MODULE CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.module-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(360px, 1fr));
  gap                   : var(--sp-6);
}

.module-card {
  background     : var(--surface-1);
  border         : 1px solid var(--border-soft);
  border-radius  : var(--radius-lg);
  box-shadow     : var(--shadow-card);
  overflow       : hidden;
  display        : flex;
  flex-direction : column;
  transition     : box-shadow var(--transition-base);
}

.module-card:hover {
  box-shadow: var(--shadow-md);
}

/* Hairline gold top accent */
.module-card::before {
  content    : '';
  display    : block;
  height     : 1px;
  background : linear-gradient(90deg, transparent 0%, var(--border-medium) 50%, transparent 100%);
  flex-shrink: 0;
}

.module-card-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : var(--sp-4) var(--sp-5);
  border-bottom   : 1px solid var(--border-subtle);
  background      : rgba(255,255,255,0.02);
}

.module-card-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-base);
  font-weight    : var(--weight-medium);
  color          : var(--hws-ivory);
  letter-spacing : 0.01em;
}

.module-card-actions {
  display    : flex;
  align-items: center;
  gap        : var(--sp-2);
}

.module-card-body {
  padding    : var(--sp-5);
  flex       : 1;
}

.module-card-footer {
  padding       : var(--sp-3) var(--sp-5);
  border-top    : 1px solid var(--border-subtle);
  background    : rgba(255,255,255,0.01);
  display       : flex;
  align-items   : center;
  justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SECTION HEADERS (within cards / pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.content-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : var(--sp-5);
  padding-bottom  : var(--sp-4);
  border-bottom   : 1px solid var(--border-subtle);
}

.content-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-md);
  font-weight    : var(--weight-medium);
  color          : var(--hws-ivory);
  letter-spacing : 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DATA TABLES — WARM ELEGANT
   Wide spacing. Whispered separators. Gold on hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x     : auto;
  border-radius  : var(--radius-md);
  border         : 1px solid var(--border-soft);
}

.data-table {
  width          : 100%;
  border-collapse: collapse;
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
}

/* Table head */
.data-table thead {
  background: linear-gradient(90deg, var(--hws-espresso), rgba(27,13,10,0.5));
}

.data-table th {
  padding        : 14px var(--sp-5);
  font-family    : var(--font-ui);
  font-size      : var(--text-3xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
  text-align     : left;
  border-bottom  : 1px solid var(--border-soft);
  white-space    : nowrap;
}

/* Table body */
.data-table tbody tr {
  border-bottom  : 1px solid var(--border-subtle);
  transition     : background var(--duration-fast) var(--ease-luxury);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(211,161,115,0.04);
}

.data-table td {
  padding     : 14px var(--sp-5);
  color       : var(--text-secondary);
  vertical-align: middle;
  line-height : var(--leading-snug);
}

/* Highlighted / primary column */
.data-table td.col-primary {
  color       : var(--hws-ivory);
  font-weight : var(--weight-medium);
}

.data-table td.col-mono {
  font-family : 'Courier New', monospace;
  font-size   : var(--text-xs);
  color       : var(--hws-gold-muted);
  letter-spacing: 0.05em;
}

/* Row action buttons */
.row-actions {
  display    : flex;
  align-items: center;
  gap        : var(--sp-1);
  opacity    : 0;
  transition : opacity var(--transition-fast);
}
.data-table tbody tr:hover .row-actions { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. MODALS & OVERLAY — CINEMATIC DARK
   Deep backdrop. Warm surface. Elegant transitions.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position           : fixed;
  inset              : 0;
  background         : rgba(5,1,1,0.75);
  backdrop-filter    : blur(4px) saturate(0.8);
  -webkit-backdrop-filter: blur(4px) saturate(0.8);
  z-index            : var(--z-modal);
  display            : flex;
  align-items        : center;
  justify-content    : center;
  padding            : var(--sp-5);
  animation          : overlayIn var(--duration-slow) var(--ease-out-soft);
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background     : linear-gradient(160deg, var(--hws-wine) 0%, var(--hws-espresso) 40%, var(--hws-black) 100%);
  border         : 1px solid var(--border-medium);
  border-radius  : var(--radius-xl);
  box-shadow     : var(--shadow-xl), 0 0 0 1px rgba(211,161,115,0.08);
  width          : 100%;
  max-width      : 580px;
  max-height     : 90vh;
  overflow       : hidden;
  display        : flex;
  flex-direction : column;
  z-index        : calc(var(--z-modal) + 1);
  animation      : modalIn var(--duration-slow) var(--ease-out-soft);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Hairline gold top accent on modal */
.modal::before {
  content    : '';
  display    : block;
  height     : 1px;
  background : linear-gradient(90deg, transparent, var(--border-strong), transparent);
  flex-shrink: 0;
}

.modal-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : var(--sp-5) var(--sp-6);
  border-bottom   : 1px solid var(--border-subtle);
  flex-shrink     : 0;
}

.modal-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-lg);
  font-weight    : var(--weight-medium);
  color          : var(--hws-ivory);
  letter-spacing : var(--tracking-tight);
}

.modal-subtitle {
  font-size  : var(--text-xs);
  color      : var(--text-muted);
  margin-top : var(--sp-1);
}

.modal-close {
  width           : 30px;
  height          : 30px;
  border-radius   : var(--radius-sm);
  background      : transparent;
  border          : 1px solid var(--border-subtle);
  color           : var(--text-subtle);
  font-size       : 14px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  flex-shrink     : 0;
  transition      : all var(--transition-fast);
}
.modal-close:hover {
  background   : var(--hws-danger-bg);
  border-color : var(--hws-danger-border);
  color        : var(--hws-danger);
}

.modal-body {
  padding    : var(--sp-6);
  overflow-y : auto;
  flex       : 1;
}

.modal-footer {
  padding         : var(--sp-4) var(--sp-6);
  border-top      : 1px solid var(--border-subtle);
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
  gap             : var(--sp-3);
  flex-shrink     : 0;
  background      : rgba(255,255,255,0.01);
}

/* Wide modal variant */
.modal-lg  { max-width: 720px; }
.modal-xl  { max-width: 900px; }
.modal-sm  { max-width: 420px; }

/* Confirm dialog variant */
.modal-confirm .modal-body {
  text-align: center;
  padding   : var(--sp-8) var(--sp-6);
}

.modal-confirm-icon {
  font-size     : 40px;
  margin-bottom : var(--sp-4);
  display       : block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TOAST NOTIFICATIONS
   Bottom-right. Elegant fade-slide. Warm dark background.
   ═══════════════════════════════════════════════════════════════════════════ */
.toast-container {
  position  : fixed;
  bottom    : var(--sp-8);
  right     : var(--sp-8);
  z-index   : var(--z-toast);
  display   : flex;
  flex-direction: column;
  gap       : var(--sp-3);
  pointer-events: none;
}

.toast {
  display         : flex;
  align-items     : flex-start;
  gap             : var(--sp-3);
  min-width       : 300px;
  max-width       : 420px;
  padding         : var(--sp-4) var(--sp-5);
  background      : linear-gradient(135deg, var(--hws-wine) 0%, var(--hws-espresso) 100%);
  border          : 1px solid var(--border-medium);
  border-radius   : var(--radius-lg);
  box-shadow      : var(--shadow-lg);
  pointer-events  : all;
  animation       : toastIn var(--duration-base) var(--ease-out-soft);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.toast-icon {
  font-size  : 16px;
  flex-shrink: 0;
  margin-top : 1px;
}

.toast-content {
  flex      : 1;
  min-width : 0;
}

.toast-title {
  font-size  : var(--text-sm);
  font-weight: var(--weight-semibold);
  color      : var(--hws-ivory);
  line-height: 1.3;
}

.toast-msg {
  font-size  : var(--text-xs);
  color      : var(--text-muted);
  margin-top : 2px;
  line-height: var(--leading-base);
}

/* Semantic left-border accents */
.toast.success { border-left: 3px solid var(--hws-success); }
.toast.warning { border-left: 3px solid var(--hws-warning); }
.toast.error   { border-left: 3px solid var(--hws-danger);  }
.toast.info    { border-left: 3px solid var(--hws-gold);    }
.toast.success .toast-icon { color: var(--hws-success); }
.toast.warning .toast-icon { color: var(--hws-warning); }
.toast.error   .toast-icon { color: var(--hws-danger);  }
.toast.info    .toast-icon { color: var(--hws-gold);    }

/* ═══════════════════════════════════════════════════════════════════════════
   11. ROOM STATUS GRID
   Colour-coded squares. Understated, not neon.
   ═══════════════════════════════════════════════════════════════════════════ */
.room-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(90px, 1fr));
  gap                   : var(--sp-3);
}

.room-cell {
  aspect-ratio    : 1;
  border-radius   : var(--radius-md);
  border          : 1px solid transparent;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-1);
  cursor          : pointer;
  transition      :
    transform  var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  position        : relative;
  overflow        : hidden;
}

.room-cell:hover {
  transform : translateY(-2px);
  box-shadow: var(--shadow-md);
}

.room-no {
  font-family    : var(--font-serif);
  font-size      : var(--text-md);
  font-weight    : var(--weight-semibold);
  line-height    : 1;
}

.room-type-label {
  font-size      : var(--text-3xs);
  letter-spacing : var(--tracking-wider);
  text-transform : uppercase;
  opacity        : 0.7;
}

/* Room status variants */
.room-cell.available {
  background   : rgba(125,175,122,0.12);
  border-color : rgba(125,175,122,0.25);
  color        : var(--hws-success);
}
.room-cell.occupied {
  background   : rgba(194,89,89,0.12);
  border-color : rgba(194,89,89,0.25);
  color        : var(--hws-danger);
}
.room-cell.dirty {
  background   : rgba(212,149,74,0.12);
  border-color : rgba(212,149,74,0.25);
  color        : var(--hws-warning);
}
.room-cell.maintenance {
  background   : rgba(74,59,56,0.40);
  border-color : rgba(140,123,116,0.20);
  color        : var(--hws-stone);
}
.room-cell.blocked {
  background   : rgba(27,13,10,0.80);
  border-color : rgba(74,59,56,0.30);
  color        : var(--hws-ash);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. KANBAN / CLEANING BOARD
   Understated columns. Warm card surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */
.kanban-board {
  display    : grid;
  grid-template-columns: repeat(4, 1fr);
  gap        : var(--sp-5);
  align-items: start;
}

.kanban-col {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-2);
  min-height     : 120px;
}

.kanban-col-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : var(--sp-3) var(--sp-4);
  border-radius   : var(--radius-sm);
  margin-bottom   : var(--sp-1);
  font-size       : var(--text-2xs);
  font-weight     : var(--weight-semibold);
  letter-spacing  : var(--tracking-widest);
  text-transform  : uppercase;
  background      : rgba(255,255,255,0.03);
  border          : 1px solid var(--border-subtle);
  color           : var(--text-muted);
}

.kanban-col-header .col-count {
  background   : rgba(255,255,255,0.08);
  color        : var(--text-subtle);
  padding      : 1px 7px;
  border-radius: var(--radius-full);
  font-size    : var(--text-xs);
}

.kanban-card {
  background    : var(--surface-1);
  border        : 1px solid var(--border-soft);
  border-radius : var(--radius-md);
  padding       : var(--sp-4);
  cursor        : pointer;
  transition    : all var(--transition-fast);
}

.kanban-card:hover {
  border-color : var(--border-medium);
  box-shadow   : var(--shadow-sm);
  transform    : translateY(-1px);
}

.kanban-card-room {
  font-family    : var(--font-serif);
  font-size      : var(--text-md);
  font-weight    : var(--weight-semibold);
  color          : var(--hws-ivory);
  margin-bottom  : var(--sp-1);
}

.kanban-card-staff {
  font-size   : var(--text-xs);
  color       : var(--text-muted);
}

/* Priority indicator — left border */
.kanban-card.priority-urgent { border-left: 3px solid var(--hws-danger);  }
.kanban-card.priority-high   { border-left: 3px solid var(--hws-warning); }
.kanban-card.priority-normal { border-left: 3px solid var(--border-soft); }
.kanban-card.priority-low    { border-left: 3px solid var(--hws-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : var(--sp-16) var(--sp-8);
  text-align     : center;
  gap            : var(--sp-4);
}

.empty-state-icon {
  font-size   : 40px;
  opacity     : 0.18;
  color       : var(--hws-gold);
  line-height : 1;
}

.empty-state-title {
  font-family    : var(--font-serif);
  font-size      : var(--text-lg);
  font-weight    : var(--weight-medium);
  color          : var(--hws-stone);
  letter-spacing : var(--tracking-tight);
}

.empty-state-text {
  font-size   : var(--text-sm);
  color       : var(--text-subtle);
  max-width   : 280px;
  line-height : var(--leading-loose);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. LOADING SKELETON
   Warm shimmer. Never cold grey.
   ═══════════════════════════════════════════════════════════════════════════ */
.skeleton {
  border-radius : var(--radius-sm);
  background    : linear-gradient(
    90deg,
    rgba(61,43,41,0.4) 25%,
    rgba(90,5,7,0.2)  50%,
    rgba(61,43,41,0.4) 75%
  );
  background-size: 200% 100%;
  animation      : shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text  { height: 14px; width: 60%;  margin-bottom: var(--sp-2); }
.skeleton-title { height: 24px; width: 40%;  margin-bottom: var(--sp-4); }
.skeleton-card  { height: 120px; width: 100%; border-radius: var(--radius-lg); }
.skeleton-kpi   { height: 96px; border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. LOGIN PAGE
   Full-screen cinematic luxury entrance.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-page {
  min-height      : 100vh;
  display         : flex;
  align-items     : center;
  justify-content : center;
  position        : relative;
  overflow        : hidden;

  /* Cinematic dark gradient — matches website hero */
  background      : radial-gradient(ellipse at 30% 40%, var(--hws-burgundy) 0%, transparent 55%),
                    radial-gradient(ellipse at 80% 70%, var(--hws-wine) 0%, transparent 50%),
                    var(--hws-black);
}

/* Background texture overlay */
.login-page::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.008) 2px,
    rgba(255,255,255,0.008) 4px
  );
  pointer-events: none;
}

/* Ambient gold glow orb */
.login-page::after {
  content       : '';
  position      : absolute;
  top           : 20%; left: 50%;
  transform     : translateX(-50%);
  width         : 600px; height: 300px;
  border-radius : 50%;
  background    : radial-gradient(ellipse, rgba(211,161,115,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.login-container {
  position  : relative;
  z-index   : 1;
  width     : 100%;
  max-width : 440px;
  padding   : var(--sp-5);
}

.login-card {
  background      : rgba(27,13,10,0.85);
  backdrop-filter : blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border          : 1px solid var(--border-medium);
  border-radius   : var(--radius-2xl);
  padding         : var(--sp-10) var(--sp-8);
  box-shadow      : var(--shadow-xl),
                    0 0 0 1px rgba(211,161,115,0.06),
                    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Gold top accent line on login card */
.login-card::before {
  content    : '';
  position   : absolute;
  top        : 0; left: 20%; right: 20%;
  height     : 1px;
  background : linear-gradient(90deg, transparent, var(--hws-gold-border), transparent);
  top        : -1px;
}

.login-logo-wrap {
  text-align    : center;
  margin-bottom : var(--sp-7);
}

.login-logo {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 64px;
  height          : 64px;
  background      : linear-gradient(135deg, var(--hws-gold) 0%, var(--hws-bronze) 100%);
  border-radius   : var(--radius-lg);
  font-family     : var(--font-serif);
  font-size       : 28px;
  font-weight     : var(--weight-bold);
  color           : var(--hws-black);
  box-shadow      : 0 8px 24px rgba(211,161,115,0.30);
  margin-bottom   : var(--sp-5);
}

.login-hotel-name {
  font-family    : var(--font-serif);
  font-size      : var(--text-2xl);
  font-weight    : var(--weight-semibold);
  color          : var(--hws-ivory);
  letter-spacing : var(--tracking-tight);
  line-height    : 1.2;
}

.login-tagline {
  font-size      : var(--text-xs);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
  margin-top     : var(--sp-2);
}

.login-form { display: flex; flex-direction: column; gap: var(--sp-5); }

.login-submit {
  width       : 100%;
  margin-top  : var(--sp-2);
  padding     : 13px;
  font-size   : var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.login-error {
  background   : var(--hws-danger-bg);
  border       : 1px solid var(--hws-danger-border);
  border-radius: var(--radius-sm);
  padding      : var(--sp-3) var(--sp-4);
  font-size    : var(--text-sm);
  color        : var(--hws-danger);
  text-align   : center;
  animation    : fadeIn var(--duration-base) var(--ease-out-soft);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-footer {
  text-align     : center;
  margin-top     : var(--sp-8);
  font-size      : var(--text-xs);
  color          : rgba(140,123,116,0.4);
  letter-spacing : var(--tracking-wide);
}