/*
 * ═══════════════════════════════════════════════════════════════════════
 *  HOTEL MANAGEMENT SYSTEM — GLOBAL DESIGN SYSTEM v2.0
 *  Applied to ALL master pages, dashboards & login pages
 *  File: /asset/css/hms-global.css
 * ═══════════════════════════════════════════════════════════════════════
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */
:root {
  /* Gold Palette */
  --hms-gold:           #c9a84c;
  --hms-gold-light:     #e8c96a;
  --hms-gold-dim:       rgba(201,168,76,0.12);
  --hms-gold-border:    rgba(201,168,76,0.25);
  --hms-gold-glow:      rgba(201,168,76,0.35);

  /* Dark Backgrounds */
  --hms-sidebar-bg:     #0b0d10;
  --hms-navbar-bg:      rgba(13,15,18,0.95);
  --hms-body-bg:        #0f1114;
  --hms-card-bg:        #161920;
  --hms-card-bg-hover:  #1b1e26;
  --hms-card-border:    rgba(255,255,255,0.07);
  --hms-panel-bg:       #13161c;
  --hms-input-bg:       rgba(255,255,255,0.04);

  /* Text */
  --hms-text:           #dde1ed;
  --hms-text-muted:     #6b7280;
  --hms-text-sub:       #9499a8;
  --hms-text-bright:    #ffffff;

  /* Accent Colors */
  --hms-green:          #22c55e;
  --hms-green-dim:      rgba(34,197,94,0.12);
  --hms-blue:           #3b82f6;
  --hms-blue-dim:       rgba(59,130,246,0.12);
  --hms-red:            #ef4444;
  --hms-red-dim:        rgba(239,68,68,0.12);
  --hms-purple:         #a855f7;
  --hms-purple-dim:     rgba(168,85,247,0.12);
  --hms-teal:           #14b8a6;
  --hms-teal-dim:       rgba(20,184,166,0.12);
  --hms-orange:         #f97316;
  --hms-orange-dim:     rgba(249,115,22,0.12);

  /* Layout */
  --hms-sidebar-w:      256px;
  --hms-navbar-h:       64px;
  --hms-radius:         14px;
  --hms-radius-sm:      9px;
  --hms-radius-xs:      6px;
  --hms-transition:     0.2s cubic-bezier(.4,0,.2,1);
  --hms-shadow-sm:      0 2px 8px rgba(0,0,0,0.25);
  --hms-shadow-md:      0 4px 20px rgba(0,0,0,0.35);
  --hms-shadow-lg:      0 8px 40px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════
   GLOBAL RESETS
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--hms-body-bg) !important;
  color: var(--hms-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--hms-text-bright) !important;
  line-height: 1.3 !important;
}

p { color: var(--hms-text) !important; }

a { transition: color var(--hms-transition) !important; }
a:hover { text-decoration: none !important; }

hr {
  border-color: var(--hms-card-border) !important;
  margin: 1rem 0 !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.main-sidebar,
.main-sidebar.sidebar-style-2 {
  background: var(--hms-sidebar-bg) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 6px 0 32px rgba(0,0,0,0.4) !important;
  width: var(--hms-sidebar-w) !important;
}

/* Sidebar brand */
.sidebar-brand,
.main-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 0 18px !important;
  height: var(--hms-navbar-h) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.sidebar-brand a { display: flex !important; align-items: center !important; gap: 10px !important; }
.sidebar-brand img,
.aside-header img,
.header-logo {
  border-radius: 8px !important;
  max-height: 40px !important;
  max-width: 130px !important;
  object-fit: contain !important;
}

/* Sidebar nav */
.sidebar-menu { padding: 10px 12px !important; }
.sidebar-menu > li { margin-bottom: 2px !important; }

.sidebar-menu > li > a,
.sidebar-menu > li > a.btn,
.sidebar-menu > li > a.btn-outline-info,
.sidebar-menu > li > a.btn-sm {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 13px !important;
  border-radius: var(--hms-radius-sm) !important;
  color: var(--hms-text-sub) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: all var(--hms-transition) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a.btn:hover {
  background: rgba(201,168,76,0.08) !important;
  color: var(--hms-gold-light) !important;
}
.sidebar-menu > li > a i,
.sidebar-menu > li > a .fa,
.sidebar-menu > li > a [class*="fa-"] {
  width: 20px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--hms-text-muted) !important;
  transition: color var(--hms-transition) !important;
  flex-shrink: 0 !important;
}
.sidebar-menu > li > a:hover i,
.sidebar-menu > li > a:hover .fa { color: var(--hms-gold) !important; }

/* active sidebar item */
.sidebar-menu > li.active > a,
.sidebar-menu > li > a.active {
  background: var(--hms-gold-dim) !important;
  color: var(--hms-gold-light) !important;
  border-left: 3px solid var(--hms-gold) !important;
}

.menu-header,
.sidebar-menu .header {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--hms-text-muted) !important;
  padding: 18px 13px 6px !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════
   TOP NAVBAR
══════════════════════════════════════════════ */
.navbar.main-navbar,
nav.main-navbar {
  background: var(--hms-navbar-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  height: var(--hms-navbar-h) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.3) !important;
}
.navbar-bg { background: transparent !important; }

.main-navbar .nav-link,
.main-navbar .nav-link-lg {
  color: var(--hms-text-muted) !important;
  transition: color var(--hms-transition) !important;
}
.main-navbar .nav-link:hover { color: var(--hms-text) !important; }

/* Navbar user avatar */
.user-img-radious-style,
.main-navbar img.user-img-radious-style {
  border-radius: 50% !important;
  border: 2px solid var(--hms-gold-border) !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: cover !important;
}

/* Navbar user name */
.main-navbar .nav-link .d-sm-none { color: var(--hms-text) !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════════
   DROPDOWN MENUS
══════════════════════════════════════════════ */
.dropdown-menu {
  background: #1a1d25 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--hms-radius) !important;
  box-shadow: var(--hms-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-title {
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 4px !important;
}
.dropdown-item {
  color: var(--hms-text-sub) !important;
  border-radius: var(--hms-radius-xs) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  transition: all var(--hms-transition) !important;
}
.dropdown-item:hover {
  background: rgba(201,168,76,0.08) !important;
  color: var(--hms-gold-light) !important;
}
.dropdown-item.btn-outline-danger,
.dropdown-item.btn-lg { border: none !important; }

/* ══════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════ */
.main-content,
.main-wrapper-body {
  background: var(--hms-body-bg) !important;
  padding: 28px !important;
  min-height: calc(100vh - var(--hms-navbar-h)) !important;
}

/* Section heading */
.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}
.section-header h1,
.section-header h2,
.section-header .section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--hms-text-bright) !important;
  margin: 0 !important;
}
.section-title { color: var(--hms-text-bright) !important; font-weight: 700 !important; font-size: 18px !important; }

/* ══════════════════════════════════════════════
   DASHBOARD WELCOME BANNER
══════════════════════════════════════════════ */
.hms-welcome-banner {
  background: linear-gradient(135deg, #1a1d25 0%, #0f1218 60%, #131a12 100%) !important;
  border: 1px solid var(--hms-gold-border) !important;
  border-radius: var(--hms-radius) !important;
  padding: 28px 32px !important;
  margin-bottom: 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--hms-shadow-md) !important;
  animation: hmsSlideUp 0.5s cubic-bezier(.16,1,.3,1) both !important;
}
.hms-welcome-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.hms-welcome-banner::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important;
  left: 220px !important;
  width: 140px !important;
  height: 140px !important;
  background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.hms-welcome-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--hms-text-bright) !important;
  margin: 0 0 6px !important;
}
.hms-welcome-title span { color: var(--hms-gold-light) !important; }
.hms-welcome-subtitle {
  color: var(--hms-text-sub) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}
.hms-welcome-date {
  font-size: 12px !important;
  color: var(--hms-text-muted) !important;
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.hms-welcome-date i { color: var(--hms-gold) !important; }

/* ══════════════════════════════════════════════
   DASHBOARD STAT CARDS
══════════════════════════════════════════════ */
.hms-stat-card {
  background: var(--hms-card-bg) !important;
  border: 1px solid var(--hms-card-border) !important;
  border-radius: var(--hms-radius) !important;
  padding: 22px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  box-shadow: var(--hms-shadow-sm) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  animation: hmsSlideUp 0.5s cubic-bezier(.16,1,.3,1) both !important;
}
.hms-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hms-shadow-md) !important;
  border-color: var(--hms-gold-border) !important;
}
.hms-stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 80px !important; height: 80px !important;
  border-radius: 0 var(--hms-radius) 0 80px !important;
  opacity: 0.08 !important;
}
.hms-stat-card.gold::before  { background: var(--hms-gold) !important; }
.hms-stat-card.green::before { background: var(--hms-green) !important; }
.hms-stat-card.blue::before  { background: var(--hms-blue) !important; }
.hms-stat-card.red::before   { background: var(--hms-red) !important; }
.hms-stat-card.purple::before { background: var(--hms-purple) !important; }
.hms-stat-card.teal::before  { background: var(--hms-teal) !important; }
.hms-stat-card.orange::before { background: var(--hms-orange) !important; }

.hms-stat-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 22px !important;
}
.hms-stat-icon.gold   { background: var(--hms-gold-dim) !important;   color: var(--hms-gold) !important; }
.hms-stat-icon.green  { background: var(--hms-green-dim) !important;  color: var(--hms-green) !important; }
.hms-stat-icon.blue   { background: var(--hms-blue-dim) !important;   color: var(--hms-blue) !important; }
.hms-stat-icon.red    { background: var(--hms-red-dim) !important;    color: var(--hms-red) !important; }
.hms-stat-icon.purple { background: var(--hms-purple-dim) !important; color: var(--hms-purple) !important; }
.hms-stat-icon.teal   { background: var(--hms-teal-dim) !important;   color: var(--hms-teal) !important; }
.hms-stat-icon.orange { background: var(--hms-orange-dim) !important; color: var(--hms-orange) !important; }

.hms-stat-body { flex: 1 !important; min-width: 0 !important; }
.hms-stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--hms-text-muted) !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hms-stat-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--hms-text-bright) !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}
.hms-stat-caption {
  font-size: 11.5px !important;
  color: var(--hms-text-muted) !important;
}
.hms-stat-caption.up   { color: var(--hms-green) !important; }
.hms-stat-caption.down { color: var(--hms-red) !important; }

/* Legacy stat cards from original template */
.card.card-statistic-1,
.card.card-statistic-2 {
  background: var(--hms-card-bg) !important;
  border: 1px solid var(--hms-card-border) !important;
  border-radius: var(--hms-radius) !important;
  box-shadow: var(--hms-shadow-sm) !important;
  transition: all 0.25s ease !important;
}
.card.card-statistic-1:hover,
.card.card-statistic-2:hover {
  transform: translateY(-3px) !important;
  border-color: var(--hms-gold-border) !important;
  box-shadow: var(--hms-shadow-md) !important;
}
.card-statistic-1 .card-icon,
.card-statistic-2 .card-icon {
  border-radius: 12px !important;
  background: var(--hms-gold-dim) !important;
  color: var(--hms-gold) !important;
}
.card-statistic-1 .card-wrap .card-content .card-title,
.card-statistic-2 .card-wrap .card-content .card-title {
  color: var(--hms-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
}
.card-statistic-1 .card-wrap .card-content h4,
.card-statistic-2 .card-wrap .card-content h4 {
  color: var(--hms-text-bright) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════
   CARDS (general)
══════════════════════════════════════════════ */
.card {
  background: var(--hms-card-bg) !important;
  border: 1px solid var(--hms-card-border) !important;
  border-radius: var(--hms-radius) !important;
  box-shadow: var(--hms-shadow-sm) !important;
  transition: box-shadow 0.25s ease !important;
  animation: hmsSlideUp 0.5s cubic-bezier(.16,1,.3,1) both !important;
}
.card:hover { box-shadow: var(--hms-shadow-md) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hms-card-border) !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.card-title { margin: 0 !important; }
.card-title,
.card-header h4,
.card-header h5 {
  color: var(--hms-text-bright) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.card-header .card-header-action a,
.card-header .card-header-action .btn { font-size: 12px !important; }
.card-body  { padding: 22px !important; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--hms-card-border) !important;
  padding: 13px 22px !important;
}

/* ══════════════════════════════════════════════
   PANELS (legacy Bootstrap 3 panels used in dashboards)
══════════════════════════════════════════════ */
.panel {
  background: var(--hms-card-bg) !important;
  border: 1px solid var(--hms-card-border) !important;
  border-radius: var(--hms-radius) !important;
  box-shadow: var(--hms-shadow-sm) !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}
.panel.panel-default { border-color: var(--hms-card-border) !important; }
.panel-heading,
.panel-heading.panel-heading-divider {
  background: transparent !important;
  border-bottom: 1px solid var(--hms-card-border) !important;
  padding: 16px 20px 14px !important;
  color: var(--hms-text-bright) !important;
}
.panel-heading .title,
.panel-heading > .title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--hms-text-bright) !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.panel-heading .panel-subtitle {
  font-size: 11.5px !important;
  color: var(--hms-text-muted) !important;
  font-weight: 400 !important;
}
.panel-heading > hr { margin: 10px 0 8px !important; border-color: var(--hms-card-border) !important; }
.panel-heading .tools { float: right !important; }
.panel-heading .tools span { color: var(--hms-text-muted) !important; margin-left: 6px !important; cursor: pointer !important; }
.panel-body { padding: 16px 20px !important; }
.panel-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--hms-card-border) !important;
  padding: 12px 20px !important;
  color: var(--hms-text-muted) !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════════════
   HIGHCHARTS THEMING (global override)
══════════════════════════════════════════════ */
/* Make chart containers fully fluid */
[id="EmailClient"],
[id="MonthlyReport"],
[id="YearlyReport"],
[id="PreviousYearReport"],
.hms-chart-container {
  width: 100% !important;
  height: 320px !important;
  min-height: 280px !important;
}

/* Highcharts dark skin */
.highcharts-background { fill: transparent !important; }
.highcharts-title, .highcharts-subtitle {
  fill: var(--hms-text-bright) !important;
  font-family: 'Inter', sans-serif !important;
}
.highcharts-axis-labels text,
.highcharts-legend-item text {
  fill: var(--hms-text-sub) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
}
.highcharts-grid-line { stroke: rgba(255,255,255,0.05) !important; }
.highcharts-tooltip-box { fill: #1a1d25 !important; stroke: var(--hms-gold-border) !important; }

/* Dashboard chart grid row spacing */
.hms-chart-row { margin-bottom: 24px !important; }
.hms-chart-row .col-md-6,
.hms-chart-row .col-md-12 { padding: 8px !important; }

/* ══════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════ */
.table {
  color: var(--hms-text) !important;
  border-color: var(--hms-card-border) !important;
  font-size: 13.5px !important;
}
.table thead th {
  color: var(--hms-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border-color: var(--hms-card-border) !important;
  background: rgba(255,255,255,0.025) !important;
  padding: 13px 15px !important;
  white-space: nowrap !important;
}
.table tbody td {
  border-color: var(--hms-card-border) !important;
  padding: 12px 15px !important;
  vertical-align: middle !important;
  color: var(--hms-text) !important;
}
.table tbody tr:hover td { background: rgba(201,168,76,0.04) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.015) !important; }
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--hms-card-border) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
  background: var(--hms-input-bg) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--hms-radius-sm) !important;
  color: var(--hms-text) !important;
  padding: 7px 13px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  margin-left: 8px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--hms-gold-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--hms-gold-dim) !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
  color: var(--hms-text-muted) !important;
  font-size: 13px !important;
}
.dataTables_wrapper .dataTables_length select {
  background: var(--hms-input-bg) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--hms-radius-sm) !important;
  color: var(--hms-text) !important;
  padding: 5px 9px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--hms-radius-sm) !important;
  color: var(--hms-text-sub) !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--hms-gold-dim) !important;
  border-color: var(--hms-gold-border) !important;
  color: var(--hms-gold) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  border-radius: var(--hms-radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all var(--hms-transition) !important;
  letter-spacing: 0.2px !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--hms-gold) 0%, var(--hms-gold-light) 100%) !important;
  border: none !important;
  color: #0d0d0d !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px var(--hms-gold-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
  box-shadow: 0 6px 28px var(--hms-gold-glow) !important;
  transform: translateY(-1px) !important;
  color: #0d0d0d !important;
  background: linear-gradient(135deg, var(--hms-gold-light) 0%, var(--hms-gold) 100%) !important;
}

.btn-success {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(34,197,94,0.3) !important;
}
.btn-success:hover { box-shadow: 0 6px 20px rgba(34,197,94,0.45) !important; transform: translateY(-1px) !important; }

.btn-danger {
  background: rgba(239,68,68,0.12) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.2) !important; color: #fca5a5 !important; }

.btn-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.3) !important;
}
.btn-warning:hover { transform: translateY(-1px) !important; }

.btn-info    { background: rgba(59,130,246,0.12) !important; border: 1px solid rgba(59,130,246,0.3) !important; color: #60a5fa !important; }
.btn-info:hover { background: rgba(59,130,246,0.22) !important; }

.btn-secondary { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: var(--hms-text-sub) !important; }
.btn-secondary:hover { background: rgba(255,255,255,0.13) !important; color: #fff !important; }

.btn-outline-primary { border: 1px solid var(--hms-gold-border) !important; color: var(--hms-gold) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--hms-gold-dim) !important; color: var(--hms-gold-light) !important; }
.btn-outline-danger  { border: 1px solid rgba(239,68,68,0.4) !important; color: #f87171 !important; background: transparent !important; }
.btn-outline-info    { border: 1px solid rgba(59,130,246,0.3) !important; color: #60a5fa !important; background: transparent !important; }
.btn-outline-info:hover { background: rgba(59,130,246,0.1) !important; }
.btn-outline-success { border: 1px solid rgba(34,197,94,0.35) !important; color: var(--hms-green) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--hms-green-dim) !important; }

.btn-round { border-radius: 999px !important; padding: 6px 18px !important; }
.btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 24px !important; font-size: 14px !important; }

/* ══════════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════════ */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
select,
textarea {
  background: var(--hms-input-bg) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--hms-radius-sm) !important;
  color: var(--hms-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  transition: border-color var(--hms-transition), box-shadow var(--hms-transition) !important;
  height: auto !important;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  background: rgba(201,168,76,0.05) !important;
  border-color: var(--hms-gold-border) !important;
  box-shadow: 0 0 0 3px var(--hms-gold-dim) !important;
  outline: none !important;
  color: var(--hms-text) !important;
}
.form-control::placeholder, input::placeholder { color: rgba(255,255,255,0.22) !important; }
select option { background: #1a1d25 !important; color: var(--hms-text) !important; }

label, .form-label, .col-form-label {
  color: var(--hms-text-sub) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}
.input-group-prepend,
.input-group-text {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--hms-text-muted) !important;
  border-radius: var(--hms-radius-sm) 0 0 var(--hms-radius-sm) !important;
}
.form-group { margin-bottom: 20px !important; }

/* Select2 */
.select2-container--default .select2-selection--single {
  background: var(--hms-input-bg) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--hms-radius-sm) !important;
  height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--hms-text) !important; line-height: 38px !important; padding-left: 14px !important;
}
.select2-dropdown {
  background: #1a1d25 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--hms-radius) !important;
  box-shadow: var(--hms-shadow-lg) !important;
}
.select2-container--default .select2-results__option { color: var(--hms-text-sub) !important; padding: 9px 13px !important; font-size: 13px !important; }
.select2-container--default .select2-results__option--highlighted { background: var(--hms-gold-dim) !important; color: var(--hms-gold) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--hms-text) !important;
  border-radius: var(--hms-radius-sm) !important;
  padding: 8px 11px !important;
}

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge {
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
.badge-primary, .badge-info { background: var(--hms-blue-dim) !important; color: #60a5fa !important; }
.badge-success               { background: var(--hms-green-dim) !important; color: #4ade80 !important; }
.badge-danger                { background: var(--hms-red-dim) !important;   color: #f87171 !important; }
.badge-warning               { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
.badge-secondary             { background: rgba(255,255,255,0.08) !important; color: var(--hms-text-sub) !important; }
.badge-gold                  { background: var(--hms-gold-dim) !important; color: var(--hms-gold-light) !important; }

/* ══════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════ */
.alert {
  border-radius: var(--hms-radius) !important;
  font-size: 13.5px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.alert-danger  { background: var(--hms-red-dim)  !important; border: 1px solid rgba(239,68,68,0.25) !important;  color: #f87171 !important; }
.alert-success { background: var(--hms-green-dim) !important; border: 1px solid rgba(34,197,94,0.25) !important;  color: #4ade80 !important; }
.alert-warning { background: rgba(245,158,11,0.1) !important; border: 1px solid rgba(245,158,11,0.25) !important; color: #fbbf24 !important; }
.alert-info    { background: var(--hms-blue-dim) !important;  border: 1px solid rgba(59,130,246,0.25) !important; color: #60a5fa !important; }
.alert-theme   { background: var(--hms-gold-dim) !important;  border: 1px solid var(--hms-gold-border) !important; color: var(--hms-gold-light) !important; }

/* ══════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════ */
.modal-content {
  background: #1a1d25 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 20px 26px !important;
  background: transparent !important;
}
.modal-title { color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
.modal-body  { padding: 22px 26px !important; color: var(--hms-text) !important; }
.modal-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 16px 26px !important;
  background: rgba(255,255,255,0.025) !important;
}
.close { color: var(--hms-text-muted) !important; opacity: 1 !important; font-size: 22px !important; }
.close:hover { color: #fff !important; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer.main-footer,
.main-footer {
  background: var(--hms-sidebar-bg) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--hms-text-muted) !important;
  font-size: 12px !important;
  padding: 16px 28px !important;
}
.main-footer a { color: var(--hms-gold) !important; text-decoration: none !important; }

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.4) !important; }

/* ══════════════════════════════════════════════
   LOGIN PAGES
══════════════════════════════════════════════ */
body.mai-splash-screen,
.mai-login,
.mai-wrapper.mai-login {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background: var(--hms-body-bg) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.mai-splash-screen::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(201,168,76,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(201,168,76,0.10) 0%, transparent 50%),
    var(--hms-body-bg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.splash-container { position: relative; z-index: 10; }
.form-message,
.splash-container .form-message {
  background: rgba(18,20,28,0.92) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: 22px !important;
  padding: 48px 44px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7) !important;
  width: 100% !important;
  animation: hmsSlideUp 0.6s cubic-bezier(.16,1,.3,1) both !important;
}
.splash-container .logo-img { max-height: 72px !important; max-width: 180px !important; object-fit: contain !important; margin-bottom: 10px !important; }
.splash-description {
  display: block !important;
  color: var(--hms-text-muted) !important;
  font-size: 13px !important;
  margin-bottom: 28px !important;
}
.splash-container .form-control,
.mai-login .form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--hms-text) !important;
  border-radius: var(--hms-radius-sm) !important;
  padding: 12px 14px !important;
}
.splash-container .form-control:focus { border-color: var(--hms-gold-border) !important; box-shadow: 0 0 0 3px var(--hms-gold-dim) !important; }
.splash-container .btn-primary,
.mai-login .btn-primary {
  background: linear-gradient(135deg, var(--hms-gold), var(--hms-gold-light)) !important;
  border: none !important;
  color: #0d0d0d !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px !important;
  border-radius: var(--hms-radius-sm) !important;
  box-shadow: 0 4px 24px var(--hms-gold-glow) !important;
}
.splash-container .btn-primary:hover { box-shadow: 0 8px 32px var(--hms-gold-glow) !important; transform: translateY(-2px) !important; }
.out-links { text-align: center !important; margin-top: 22px !important; }
.out-links a { color: var(--hms-text-muted) !important; font-size: 12px !important; text-decoration: none !important; }
.out-links a:hover { color: var(--hms-gold) !important; }
.splash-container .input-group-prepend i,
.mai-login .input-group-prepend i { color: var(--hms-text-muted) !important; font-size: 16px !important; }

/* ══════════════════════════════════════════════
   NAV TABS
══════════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.nav-tabs .nav-link {
  color: var(--hms-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color var(--hms-transition) !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link:hover { color: var(--hms-text) !important; }
.nav-tabs .nav-link.active { color: var(--hms-gold) !important; border-bottom-color: var(--hms-gold) !important; background: transparent !important; }

/* ══════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════ */
.pagination .page-item .page-link {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--hms-text-sub) !important;
  border-radius: var(--hms-radius-sm) !important;
  margin: 0 2px !important;
  font-size: 13px !important;
}
.pagination .page-item.active .page-link { background: var(--hms-gold-dim) !important; border-color: var(--hms-gold-border) !important; color: var(--hms-gold) !important; }
.pagination .page-item .page-link:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* ══════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════ */
.breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 16px !important; }
.breadcrumb-item a { color: var(--hms-gold) !important; font-size: 13px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hms-text-muted) !important; }
.breadcrumb-item.active { color: var(--hms-text-muted) !important; font-size: 13px !important; }

/* ══════════════════════════════════════════════
   PROGRESS BARS
══════════════════════════════════════════════ */
.progress { background: rgba(255,255,255,0.06) !important; border-radius: 999px !important; height: 7px !important; }
.progress-bar { background: linear-gradient(90deg, var(--hms-gold), var(--hms-gold-light)) !important; border-radius: 999px !important; }

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes hmsSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hmsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes himsPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Stagger cards on load */
.row .col-md-3:nth-child(1) .hms-stat-card,
.row .col-md-4:nth-child(1) .hms-stat-card { animation-delay: 0.05s !important; }
.row .col-md-3:nth-child(2) .hms-stat-card,
.row .col-md-4:nth-child(2) .hms-stat-card { animation-delay: 0.10s !important; }
.row .col-md-3:nth-child(3) .hms-stat-card,
.row .col-md-4:nth-child(3) .hms-stat-card { animation-delay: 0.15s !important; }
.row .col-md-3:nth-child(4) .hms-stat-card,
.row .col-md-4:nth-child(4) .hms-stat-card { animation-delay: 0.20s !important; }

/* ══════════════════════════════════════════════
   MISC
══════════════════════════════════════════════ */
/* Remove inline overflow:auto from dashboard panels — we use proper scrolling */
.col-md-6[style*="overflow"],
.col-md-12[style*="overflow"] { overflow: visible !important; }

/* Kill hardcoded 35em chart widths */
[style*="width: 35em"],
[style*="width:35em"] { width: 100% !important; }

/* Highlight chips / tags */
.hms-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: var(--hms-gold-dim) !important;
  color: var(--hms-gold-light) !important;
  border: 1px solid var(--hms-gold-border) !important;
}

/* Empty state */
.hms-empty {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--hms-text-muted) !important;
}
.hms-empty i { font-size: 40px !important; margin-bottom: 14px !important; display: block !important; color: var(--hms-text-muted) !important; opacity: 0.5 !important; }
.hms-empty p { font-size: 14px !important; }

/* Page header row */
.hms-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.hms-page-header h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--hms-text-bright) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVENESS
══════════════════════════════════════════════ */
@media (max-width: 1199px) {
  :root { --hms-sidebar-w: 240px; }
}

@media (max-width: 991px) {
  .main-content,
  .main-wrapper-body { padding: 18px !important; }

  .hms-welcome-banner { padding: 22px 22px !important; }
  .hms-welcome-title  { font-size: 18px !important; }

  .hms-stat-card { padding: 18px 18px !important; }
  .hms-stat-value { font-size: 22px !important; }

  .form-message, .splash-container .form-message {
    padding: 34px 26px !important;
    margin: 20px auto !important;
    max-width: 420px !important;
  }

  [id="EmailClient"],
  [id="MonthlyReport"],
  [id="YearlyReport"],
  [id="PreviousYearReport"],
  .hms-chart-container { height: 280px !important; }
}

@media (max-width: 767px) {
  .hms-stat-card { padding: 16px !important; gap: 14px !important; }
  .hms-stat-icon { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .hms-stat-value { font-size: 20px !important; }

  [id="EmailClient"],
  [id="MonthlyReport"],
  [id="YearlyReport"],
  [id="PreviousYearReport"],
  .hms-chart-container { height: 240px !important; }

  .card-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .card-body { padding: 16px !important; }
  .card-header { padding: 14px 16px !important; }
}

@media (max-width: 576px) {
  .main-content,
  .main-wrapper-body { padding: 12px !important; }

  .hms-welcome-banner { padding: 18px !important; border-radius: 10px !important; }
  .hms-welcome-title { font-size: 16px !important; }

  .btn { font-size: 12px !important; padding: 8px 13px !important; }

  .table thead { display: none !important; }
  .table tbody td {
    display: block !important;
    text-align: right !important;
    padding-left: 50% !important;
    position: relative !important;
  }
  .table tbody td::before {
    content: attr(data-label) !important;
    position: absolute !important;
    left: 14px !important;
    font-weight: 600 !important;
    color: var(--hms-text-muted) !important;
  }

  .form-message, .splash-container .form-message {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HMS MODERN SIDEBAR LAYOUT SYSTEM v2
   Used by: FrontDesk, Account, Bar, Restaurant, Inventory masters
   ══════════════════════════════════════════════════════════ */

:root {
  --hms-sidebar-w: 260px;
  --hms-sidebar-mini-w: 72px;
  --hms-navbar-h: 64px;
  --hms-transition: 0.25s cubic-bezier(.4, 0, .2, 1);
  --hms-sidebar-bg: #0e1014;
  --hms-body-bg: #12141a;
}

/* Standard Icon & Font Sizes */
.hms-sidebar-nav i        { font-size: 16px !important; }
.card-header i            { font-size: 15px !important; margin-right: 8px; }
.stat-icon-wrap i         { font-size: 20px !important; }
.hms-topbar i             { font-size: 16px !important; }
.hms-btn-back i           { font-size: 12px !important; }

/* === Sidebar === */
.hms-sidebar {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: var(--hms-sidebar-w) !important;
  height: 100vh !important;
  background: var(--hms-sidebar-bg) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000 !important;
  transition: width var(--hms-transition), transform var(--hms-transition) !important;
  overflow: hidden !important;
}
/* Mini mode visibility */
body.hms-sidebar-collapsed .hms-brand-text,
body.hms-sidebar-collapsed .hms-brand-sub,
body.hms-sidebar-collapsed .hms-nav-section-label,
body.hms-sidebar-collapsed .hms-nav-text,
body.hms-sidebar-collapsed .hms-user-info,
body.hms-sidebar-collapsed .hms-chevron {
  display: none !important;
}

body.hms-sidebar-collapsed .hms-sidebar-nav a {
  justify-content: center !important;
  padding: 10px !important;
  gap: 0 !important;
}

body.hms-sidebar-collapsed .hms-nav-icon {
  margin: 0 !important;
  width: auto !important;
  font-size: 16px !important;
}

body.hms-sidebar-collapsed .hms-user-card {
  justify-content: center !important;
  padding: 10px !important;
}

.hms-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  height: var(--hms-navbar-h); min-height: var(--hms-navbar-h);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0; overflow: hidden;
}
.hms-brand-logo {
  width: 36px; height: 36px; border-radius: 9px;
  object-fit: contain; flex-shrink: 0;
  background: var(--hms-gold-dim); padding: 3px;
}
.hms-brand-text { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-brand-sub  { font-size: 11px; color: var(--hms-gold); font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; }
.hms-nav-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--hms-text-muted); padding: 16px 18px 6px; margin: 0;
  white-space: nowrap; overflow: hidden;
}
.hms-sidebar-nav { list-style: none; padding: 6px 10px; margin: 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.hms-sidebar-nav li { margin-bottom: 2px; }
.hms-sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--hms-radius-sm);
  color: var(--hms-text-sub); font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: all var(--hms-transition); overflow: hidden;
}
.hms-sidebar-nav a:hover { background: rgba(201,168,76,0.08); color: var(--hms-gold-light); }
.hms-sidebar-nav a.active {
  background: var(--hms-gold-dim); color: var(--hms-gold-light);
  border-left: 3px solid var(--hms-gold); padding-left: 9px;
}
.hms-nav-icon { width: 20px; text-align: center; font-size: 14px; color: var(--hms-text-muted); flex-shrink: 0; transition: color var(--hms-transition); }
.hms-sidebar-nav a:hover .hms-nav-icon,
.hms-sidebar-nav a.active .hms-nav-icon { color: var(--hms-gold); }
.hms-sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.hms-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--hms-radius-sm);
  background: rgba(255,255,255,0.04); cursor: pointer;
  transition: background var(--hms-transition); overflow: hidden;
}
.hms-user-card:hover { background: rgba(201,168,76,0.07); }
.hms-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--hms-gold-border); flex-shrink: 0; }
.hms-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-user-role { font-size: 11px; color: var(--hms-gold); white-space: nowrap; }

/* Mobile overlay */
.hms-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 999;
}
body.hms-sidebar-open .hms-sidebar-overlay { display: block; }

/* === Topbar === */
.hms-topbar {
  position: fixed !important; top: 0 !important;
  left: var(--hms-sidebar-w) !important; right: 0 !important;
  height: var(--hms-navbar-h) !important;
  background: rgba(13,15,18,0.96) !important; backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 0 22px !important; z-index: 900 !important;
  transition: left var(--hms-transition) !important;
  gap: 16px !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
body.hms-sidebar-collapsed .hms-topbar {
  left: var(--hms-sidebar-mini-w) !important;
}
.hms-topbar-left, .hms-topbar-right { display: flex; align-items: center; gap: 10px; }
.hms-page-title { font-size: 16px; font-weight: 700; color: #fff; }
.hms-sidebar-toggle {
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color: var(--hms-text-sub);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--hms-transition);
}
.hms-sidebar-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.hms-tb-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07); background: transparent;
  color: var(--hms-text-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--hms-transition); font-size: 14px;
}
.hms-tb-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* User menu dropdown */
.hms-user-menu { position: relative; }
.hms-user-menu-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 5px 12px 5px 5px; cursor: pointer;
  transition: all var(--hms-transition);
}
.hms-user-menu-btn:hover { background: rgba(255,255,255,0.1); }
.hms-user-menu-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--hms-gold-border); }
.hms-uname { font-size: 13px; font-weight: 600; color: #fff; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hms-chevron { font-size: 10px; color: var(--hms-text-muted); transition: transform 0.2s; }
.hms-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 220px;
  background: #1a1d25; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  overflow: hidden; display: none; z-index: 9999; animation: hmsFadeIn 0.15s ease;
}
.hms-user-dropdown.open { display: block; }
.hms-dropdown-header { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.hms-dh-name { font-size: 13px; font-weight: 700; color: #fff; }
.hms-dh-role { font-size: 11px; color: var(--hms-gold); }
.hms-dropdown-body { padding: 6px; }
.hms-dropdown-body a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color: var(--hms-text-sub);
  font-size: 13px; text-decoration: none; transition: all var(--hms-transition);
}
.hms-dropdown-body a i { width: 16px; text-align: center; }
.hms-dropdown-body a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.hms-dropdown-body a.hms-danger { color: #f87171; }
.hms-dropdown-body a.hms-danger:hover { background: rgba(239,68,68,0.1); }
.hms-dropdown-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 8px; }

/* === Main content + footer === */
.hms-main-content {
  margin-left: var(--hms-sidebar-w) !important;
  margin-top: var(--hms-navbar-h) !important;
  padding: 28px !important;
  min-height: calc(100vh - var(--hms-navbar-h)) !important;
  transition: margin-left var(--hms-transition) !important;
  float: none !important;
  width: auto !important;
}
body.hms-sidebar-collapsed .hms-main-content {
  margin-left: var(--hms-sidebar-mini-w) !important;
}
.hms-content-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; border-radius: var(--hms-radius); margin-bottom: 20px; font-size: 13.5px;
}
.hms-danger-alert { background: var(--hms-red-dim); border: 1px solid rgba(239,68,68,0.25); color: #f87171; }
.hms-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--hms-radius-sm);
  border: 1px solid rgba(255,255,255,0.1); color: var(--hms-text-sub);
  font-size: 13px; font-weight: 500; text-decoration: none;
  background: rgba(255,255,255,0.04); transition: all var(--hms-transition);
}
.hms-btn-back:hover { background: rgba(255,255,255,0.09); color: #fff; }
body.hms-sidebar-collapsed .hms-main-footer {
  margin-left: var(--hms-sidebar-mini-w) !important;
}

/* === Collapsed (desktop) === */
body.hms-sidebar-collapsed .hms-sidebar       { width: var(--hms-sidebar-mini-w) !important; }
body.hms-sidebar-collapsed .hms-topbar        { left: var(--hms-sidebar-mini-w) !important; }
body.hms-sidebar-collapsed .hms-main-content  { margin-left: var(--hms-sidebar-mini-w) !important; }
body.hms-sidebar-collapsed .hms-main-footer   { margin-left: var(--hms-sidebar-mini-w) !important; }

/* === Mobile === */
@media (max-width: 768px) {
  .hms-sidebar { transform: translateX(-100%) !important; width: var(--hms-sidebar-w) !important; }
  body.hms-sidebar-open .hms-sidebar { transform: translateX(0) !important; }
  .hms-topbar        { left: 0 !important; }
  .hms-main-content  { margin-left: 0 !important; padding: 18px !important; }
  .hms-main-footer   { margin-left: 0 !important; padding: 12px 18px !important; }
  .hms-uname         { display: none !important; }
}
@media (max-width: 480px) {
  .hms-main-content { padding: 12px !important; }
  .hms-page-title { font-size: 14px !important; max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}