@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Prompt:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN TOKENS: SOFT UI / NEUMORPHISM SYSTEM
   Derived from Reference Images (Login Card, Control Hub, Weather, Calendar, Controls)
   ========================================================================== */
:root {
  color-scheme: light dark;
  --font-sans: 'Plus Jakarta Sans', 'Prompt', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Neumorphic Palette - Light Mode (Soft Slate Gray with Balanced Contrast) */
  --bg: #DEE3EC;
  --surface: #E5EAF3;
  --surface-raised: #EDF1F8;
  --surface-elevated: #F2F5FB;
  --surface-inset: #D5DBE5;
  --surface-inset-deep: #CAD1DE;

  /* Typography */
  --text-main: #2D3748;
  --text-sub: #64748B;
  --text-dim: #94A3B8;

  /* Accents & Brand */
  --accent-purple: #6C7CF5;
  --accent-indigo: #8B7CF6;
  --accent-gradient: linear-gradient(135deg, #6C7CF5 0%, #8B7CF6 100%);
  --accent-glow: 0 6px 20px rgba(108, 124, 245, 0.35);

  --brand-primary: #B81D1D;
  --brand-primary-hover: #C92A2A;
  --brand-primary-dark: #991B1B;
  --brand-primary-soft: #FDE8E8;
  --brand-gradient: linear-gradient(135deg, #C92A2A 0%, #991B1B 100%);
  --brand-glow: 0 6px 20px rgba(184, 29, 29, 0.30);

  /* Status Colors (Soft Pastel with High Legibility) */
  --status-success: #059669;
  --status-success-bg: rgba(5, 150, 105, 0.12);
  --status-success-border: rgba(5, 150, 105, 0.25);

  --status-warning: #D97706;
  --status-warning-bg: rgba(217, 119, 6, 0.12);
  --status-warning-border: rgba(217, 119, 6, 0.25);

  --status-error: #E11D48;
  --status-error-bg: rgba(225, 29, 72, 0.12);
  --status-error-border: rgba(225, 29, 72, 0.25);

  --status-info: #2563EB;
  --status-info-bg: rgba(37, 99, 235, 0.12);
  --status-info-border: rgba(37, 99, 235, 0.25);

  /* Dual-Directional Soft Shadows (Light Source: Top-Left) */
  --shadow-raised: 8px 8px 18px rgba(166, 175, 195, 0.45), -8px -8px 18px rgba(255, 255, 255, 0.90);
  --shadow-raised-sm: 4px 4px 10px rgba(166, 175, 195, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.90);
  --shadow-raised-lg: 12px 12px 28px rgba(166, 175, 195, 0.50), -12px -12px 28px rgba(255, 255, 255, 0.95);
  --shadow-raised-hover: 10px 10px 22px rgba(166, 175, 195, 0.55), -10px -10px 22px rgba(255, 255, 255, 0.95);
  
  --shadow-inset: inset 4px 4px 8px rgba(166, 175, 195, 0.42), inset -4px -4px 8px rgba(255, 255, 255, 0.85);
  --shadow-inset-sm: inset 2px 2px 5px rgba(166, 175, 195, 0.35), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
  --shadow-inset-deep: inset 5px 5px 10px rgba(166, 175, 195, 0.50), inset -5px -5px 10px rgba(255, 255, 255, 0.90);

  /* Radius Tokens */
  --radius-pill: 9999px;
  --radius-card: 26px;
  --radius-panel: 28px;
  --radius-input: 16px;
  --radius-button: 16px;
}

html.dark, .dark {
  color-scheme: dark;

  /* Neumorphic Palette - Dark Mode (Soft Dark Navy / Charcoal Slate from Control Hub) */
  --bg: #131626;
  --surface: #181B2F;
  --surface-raised: #1F233B;
  --surface-elevated: #252A47;
  --surface-inset: #111322;
  --surface-inset-deep: #0C0E1A;

  /* Typography */
  --text-main: #F1F5F9;
  --text-sub: #94A3B8;
  --text-dim: #64748B;

  /* Status Colors in Dark Mode */
  --status-success: #10B981;
  --status-success-bg: rgba(16, 185, 129, 0.15);
  --status-success-border: rgba(16, 185, 129, 0.30);

  --status-warning: #F59E0B;
  --status-warning-bg: rgba(245, 158, 11, 0.15);
  --status-warning-border: rgba(245, 158, 11, 0.30);

  --status-error: #FB7185;
  --status-error-bg: rgba(251, 113, 133, 0.15);
  --status-error-border: rgba(251, 113, 133, 0.30);

  --status-info: #60A5FA;
  --status-info-bg: rgba(96, 165, 250, 0.15);
  --status-info-border: rgba(96, 165, 250, 0.30);

  /* Dual-Directional Soft Shadows in Dark Mode */
  --shadow-raised: 8px 8px 20px rgba(10, 11, 20, 0.70), -8px -8px 20px rgba(35, 38, 64, 0.35);
  --shadow-raised-sm: 4px 4px 10px rgba(10, 11, 20, 0.60), -4px -4px 10px rgba(35, 38, 64, 0.30);
  --shadow-raised-lg: 12px 12px 30px rgba(8, 9, 16, 0.85), -12px -12px 30px rgba(40, 44, 75, 0.40);
  --shadow-raised-hover: 10px 10px 24px rgba(10, 11, 20, 0.80), -10px -10px 24px rgba(35, 38, 64, 0.45);

  --shadow-inset: inset 4px 4px 8px rgba(10, 11, 20, 0.75), inset -4px -4px 8px rgba(35, 38, 64, 0.25);
  --shadow-inset-sm: inset 2px 2px 5px rgba(10, 11, 20, 0.65), inset -2px -2px 5px rgba(35, 38, 64, 0.20);
  --shadow-inset-deep: inset 5px 5px 12px rgba(8, 9, 16, 0.85), inset -5px -5px 12px rgba(35, 38, 64, 0.25);
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--bg) !important;
  color: var(--text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Neutralize traditional flat SaaS backgrounds and harsh solid borders */
.bg-white,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200,
.bg-slate-900,
.bg-slate-950,
.dark .bg-white,
.dark .bg-slate-900,
.dark .bg-slate-950 {
  background-color: var(--surface) !important;
}

.border,
.border-2,
.border-t,
.border-b,
.border-l,
.border-r,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-slate-700,
.border-slate-800 {
  border-color: transparent !important;
}

/* ==========================================================================
   NEUMORPHIC CARDS & SURFACES (EMBOSSED FLOATING MODULES)
   ========================================================================== */
.glass-card,
.neu-card,
#form-booking,
.kpi-card {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-raised) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .glass-card,
html.dark .neu-card,
html.dark #form-booking,
html.dark .kpi-card {
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.glass-card:hover,
.neu-card:hover {
  box-shadow: var(--shadow-raised-hover) !important;
}

/* ==========================================================================
   NAVIGATION & HEADER (SEGMENTED PILL CONTROLS)
   ========================================================================== */
header {
  background-color: var(--surface) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 20px rgba(166, 175, 195, 0.25) !important;
}

html.dark header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 4px 24px rgba(10, 11, 20, 0.6) !important;
}

/* Brand Logo Container */
header .w-14.h-14,
header .w-20.h-20 {
  background: var(--surface-raised) !important;
  border: none !important;
  box-shadow: var(--shadow-raised-sm) !important;
  border-radius: 20px !important;
}

/* Segmented Desktop Navigation Bar */
header nav {
  background: var(--surface-inset) !important;
  box-shadow: var(--shadow-inset-sm) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 6px !important;
  gap: 4px;
}

.nav-tab-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-sub) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.5rem 1.15rem !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.nav-tab-btn:hover {
  color: var(--text-main) !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

html.dark .nav-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Active Nav Tab: Embossed Raised Tactile Pill */
.nav-tab-btn.active,
.nav-tab-btn[data-active="true"] {
  background: var(--surface-raised) !important;
  color: var(--brand-primary) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  font-weight: 700 !important;
  transform: translateY(-1px);
}

html.dark .nav-tab-btn.active,
html.dark .nav-tab-btn[data-active="true"] {
  background: var(--surface-raised) !important;
  color: #FF7B7B !important;
  box-shadow: var(--shadow-raised-sm) !important;
}

.nav-tab-btn:active {
  box-shadow: var(--shadow-inset-sm) !important;
  transform: translateY(1px);
}

/* Header Action Controls (Notification, Profile) */
#btn-notif-toggle,
#auth-user-btn > div {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  border-radius: 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark #btn-notif-toggle,
html.dark #auth-user-btn > div {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

#btn-notif-toggle:active {
  box-shadow: var(--shadow-inset-sm) !important;
  transform: translateY(1px);
}

/* ==========================================================================
   INPUTS & FORM CONTROLS (DEEP RECESSED WELLS)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
#status-search-input,
#search-input {
  background-color: var(--surface-inset) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: var(--shadow-inset) !important;
  color: var(--text-main) !important;
  font-size: 13.5px !important;
  padding: 0.75rem 1.15rem !important;
  outline: none !important;
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
}

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark select,
html.dark textarea,
html.dark #status-search-input,
html.dark #search-input {
  border-color: rgba(255, 255, 255, 0.03) !important;
}

input:focus,
select:focus,
textarea:focus,
#status-search-input:focus,
#search-input:focus {
  border-color: rgba(108, 124, 245, 0.45) !important;
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(108, 124, 245, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 0.75;
}

/* Custom Dropdown Styling */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 38px !important;
}

html.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   UNIFIED GLOBAL BUTTON SYSTEM (ALL BUTTONS ACROSS THE ENTIRE APPLICATION)
   Consistent geometry, border radius, tactile elevation, and micro-interactions
   ========================================================================== */
/* Precise hiding for elements managed via JavaScript without breaking Tailwind responsive classes */
#auth-login-btn.hidden,
#auth-user-btn.hidden,
#nav-staff-portal.hidden,
#mobile-nav-staff-portal.hidden,
#btn-admin-chart-colors.hidden,
#modal-chart-colors.hidden,
#modal-neu-calendar.hidden,
#modal-auth-login.hidden,
#modal-add-building.hidden,
#modal-edit-building.hidden,
#modal-room-details.hidden,
#modal-alpha-test-info.hidden,
#modal-edit-booking.hidden,
#modal-inventory-item.hidden,
#modal-stock-in.hidden,
#modal-stock-out.hidden,
#modal-item-history.hidden,
#modal-notification-detail.hidden {
  display: none !important;
}

@media (max-width: 639px) {
  #desktop-nav-tabs {
    display: none !important;
  }
}
@media (min-width: 640px) {
  #desktop-nav-tabs {
    display: flex !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:grid {
    display: grid !important;
  }
}

button,
.btn,
.neu-btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  border-radius: var(--radius-button) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.22s ease, 
              border-color 0.22s ease, 
              color 0.22s ease !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

button:active,
.btn:active,
.neu-btn:active {
  transform: translateY(1px) scale(0.985) !important;
}

/* 1. Primary Action Buttons (Crimson Gradient Brand Theme) */
.btn-primary,
button[type="submit"],
.btn-primary-glow,
button.bg-red-700,
button.bg-red-600,
button.bg-amber-600,
button.bg-sky-600,
[id^="modal-"] form button[type="submit"] {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-button) !important;
  box-shadow: 0 4px 14px rgba(184, 29, 29, 0.32), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em;
  padding: 0.65rem 1.35rem !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
button.bg-red-700:hover,
button.bg-red-600:hover,
button.bg-amber-600:hover,
button.bg-sky-600:hover,
[id^="modal-"] form button[type="submit"]:hover {
  background: linear-gradient(135deg, #D92B2B 0%, #A81E1E 100%) !important;
  box-shadow: 0 8px 22px rgba(184, 29, 29, 0.45), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1.5px) !important;
  color: #ffffff !important;
}

.btn-primary:active,
button[type="submit"]:active,
button.bg-red-700:active,
[id^="modal-"] form button[type="submit"]:active {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(1px) scale(0.985) !important;
}

/* Restored Guest Login / Register Button (Authentic Previous Style) */
#auth-login-btn {
  background: var(--brand-cta-gradient, linear-gradient(135deg, #B81D1D 0%, #991B1B 100%)) !important;
  box-shadow: 0 4px 14px rgba(184, 29, 29, 0.28), var(--shadow-raised-sm) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--radius-md, 12px) !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

#auth-login-btn:hover {
  background: linear-gradient(135deg, #C52222 0%, #A81E1E 100%) !important;
  box-shadow: 0 6px 18px rgba(184, 29, 29, 0.4), var(--shadow-raised) !important;
  transform: translateY(-1px);
}

#auth-login-btn:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(1px);
}

#auth-login-btn.hidden {
  display: none !important;
}

/* 2. Secondary / Cancel / Neutral Buttons */
.btn-secondary,
.neu-btn,
button.neu-btn,
button.btn-secondary-graphite,
#btn-export-excel,
#btn-export-csv,
button[onclick*="exportExcel"],
button[onclick*="exportCSV"],
.modal-btn-cancel,
button.modal-cancel-btn,
[id^="modal-"] button[onclick*="classList.add('hidden')"]:not(.btn-icon-close) {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-button) !important;
  padding: 0.65rem 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

html.dark .btn-secondary,
html.dark .neu-btn,
html.dark button.neu-btn,
html.dark button.btn-secondary-graphite,
html.dark #btn-export-excel,
html.dark #btn-export-csv,
html.dark .modal-btn-cancel,
html.dark button.modal-cancel-btn,
html.dark [id^="modal-"] button[onclick*="classList.add('hidden')"]:not(.btn-icon-close) {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  color: var(--text-main) !important;
}

.btn-secondary:hover,
.neu-btn:hover,
button.neu-btn:hover,
button.btn-secondary-graphite:hover,
#btn-export-excel:hover,
#btn-export-csv:hover,
.modal-btn-cancel:hover,
button.modal-cancel-btn:hover,
[id^="modal-"] button[onclick*="classList.add('hidden')"]:not(.btn-icon-close):hover {
  background: var(--surface-elevated) !important;
  border-color: rgba(184, 29, 29, 0.35) !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1.5px) !important;
}

html.dark .btn-secondary:hover,
html.dark .neu-btn:hover,
html.dark [id^="modal-"] button[onclick*="classList.add('hidden')"]:not(.btn-icon-close):hover {
  color: #FF7B7B !important;
  border-color: rgba(255, 123, 123, 0.35) !important;
}

.btn-secondary:active,
.neu-btn:active,
button.neu-btn:active,
[id^="modal-"] button[onclick*="classList.add('hidden')"]:not(.btn-icon-close):active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(1px) scale(0.985) !important;
}

/* 3. Action Status Buttons (Approve / Success & Reject / Danger) */
.btn-success,
button.bg-emerald-600 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.32) !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: var(--radius-button) !important;
}
.btn-success:hover,
button.bg-emerald-600:hover {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.45) !important;
  transform: translateY(-1.5px) !important;
}

.btn-danger,
button.bg-rose-600 {
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.32) !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: var(--radius-button) !important;
}
.btn-danger:hover,
button.bg-rose-600:hover {
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%) !important;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.45) !important;
  transform: translateY(-1.5px) !important;
}

/* 4. Sleek Circular Close Button */
.btn-icon-close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--text-sub) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
}
.btn-icon-close:hover {
  color: var(--brand-primary) !important;
  background: var(--surface-elevated) !important;
  transform: rotate(90deg) scale(1.05) !important;
}
html.dark .btn-icon-close {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
/* ==========================================================================
   RADIO & CHECKBOX CHIPS (SELECTABLE TACTILE TILES)
   ========================================================================== */
/* Hide native circular radio button dot on role selections */
input[name="bf-status"] {
  display: none !important;
  appearance: none !important;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  border-radius: 16px !important;
  padding: 0.65rem 0.95rem !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.dark label:has(input[type="radio"]),
html.dark label:has(input[type="checkbox"]) {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

label:has(input[type="radio"]):hover,
label:has(input[type="checkbox"]):hover {
  box-shadow: var(--shadow-raised) !important;
  transform: translateY(-1px);
}

/* Checked State: Inset with Tactile Scale and Crimson Red Tone */
label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
  background: var(--surface-inset) !important;
  box-shadow: var(--shadow-inset) !important;
  color: var(--brand-primary) !important;
  border-color: rgba(184, 29, 29, 0.45) !important;
  transform: translateY(0);
}

label:has(input[name="bf-status"]:checked) span {
  transform: scale(1.12) !important;
  display: inline-block !important;
  font-weight: 800 !important;
  color: #B81D1D !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.dark label:has(input[type="radio"]:checked),
html.dark label:has(input[type="checkbox"]:checked) {
  color: #FF7B7B !important;
  border-color: rgba(184, 29, 29, 0.5) !important;
}

html.dark label:has(input[name="bf-status"]:checked) span {
  color: #FF7B7B !important;
}

/* Tool & Machine Chips (.chip-tool) */
.chip-tool {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  border-radius: 14px !important;
  color: var(--text-main) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

html.dark .chip-tool {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

.chip-tool:hover {
  box-shadow: var(--shadow-raised) !important;
  transform: translateY(-1px);
}

.chip-tool.selected {
  background: var(--surface-inset) !important;
  box-shadow: var(--shadow-inset) !important;
  color: var(--brand-primary) !important;
  border-color: rgba(184, 29, 29, 0.25) !important;
  font-weight: 700 !important;
  transform: translateY(0);
}

html.dark .chip-tool.selected {
  color: #FF7B7B !important;
}

/* ==========================================================================
   SECTION BADGES & STEP HEADERS (FORM TAB 1)
   ========================================================================== */
.section-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  border-bottom: 2px solid rgba(184, 29, 29, 0.14) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1rem !important;
}

html.dark .section-title-wrap {
  border-bottom-color: rgba(184, 29, 29, 0.25) !important;
}

.section-badge-header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.45rem 1.15rem !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, #B81D1D 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(184, 29, 29, 0.4), var(--shadow-raised-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.02em !important;
  width: auto !important;
  height: auto !important;
  white-space: nowrap !important;
}

.section-badge-header i,
.section-badge-header svg {
  width: 1.15rem !important;
  height: 1.15rem !important;
  color: #FFFFFF !important;
}

.section-title-wrap h3 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #B81D1D !important;
}

html.dark .section-title-wrap h3 {
  color: #FF7B7B !important;
}

#form-booking h2 span:first-child {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #B81D1D 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(184, 29, 29, 0.4), var(--shadow-raised-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   BOOK-SPINE CARD STYLING (TAB 2)
   ========================================================================== */
.book-spine-card {
  position: relative !important;
  border-left: 9px solid #94A3B8 !important;
  overflow: hidden !important;
  box-shadow: inset 5px 0 8px -3px rgba(0, 0, 0, 0.22), inset -2px 0 5px -2px rgba(255, 255, 255, 0.75), var(--shadow-raised) !important;
}

.book-spine-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 7px !important;
  width: 2px !important;
  border-right: 1.5px dashed rgba(0, 0, 0, 0.18) !important;
  pointer-events: none !important;
}

html.dark .book-spine-card::before {
  border-right-color: rgba(255, 255, 255, 0.15) !important;
}

.book-spine-card.spine-approved {
  border-left-color: #10B981 !important;
}

.book-spine-card.spine-pending {
  border-left-color: #F59E0B !important;
}

.book-spine-card.spine-rejected {
  border-left-color: #EF4444 !important;
}

/* Brand Logo Frame with Dark Mode Glowing Contrast */
.header-brand-logo-wrap {
  border-radius: 20px !important;
  background: #FFFFFF !important;
  padding: 6px !important;
  box-shadow: 0 8px 20px rgba(184, 29, 29, 0.18), var(--shadow-raised) !important;
  border: 2px solid rgba(184, 29, 29, 0.25) !important;
  transition: all 0.3s ease !important;
}

html.dark .header-brand-logo-wrap {
  background: #FFFFFF !important;
  border: 2.5px solid #B81D1D !important;
  box-shadow: 0 0 24px rgba(184, 29, 29, 0.65), 0 0 45px rgba(184, 29, 29, 0.25), var(--shadow-raised) !important;
}

/* ==========================================================================
   GLOBAL ROUNDED SELECT & CHOICE DROPDOWNS
   ========================================================================== */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--surface-inset) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B81D1D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 1.1rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(166, 175, 195, 0.25) !important;
  box-shadow: var(--shadow-inset-sm) !important;
  padding-right: 2.5rem !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

select:focus {
  border-color: #B81D1D !important;
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(184, 29, 29, 0.15) !important;
  outline: none !important;
}

select option {
  background: var(--surface) !important;
  color: var(--text-main) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
}

html.dark select {
  background-color: var(--surface-inset) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FF7B7B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark select option {
  background: #181B2F !important;
  color: #F1F5F9 !important;
}

/* Search input icon padding fix */
#status-search-input,
#search-input,
#inv-search-input {
  padding-left: 2.85rem !important;
}

/* ==========================================================================
   NEUMORPHIC CALENDAR (REFERENCE IMAGE 4)
   ========================================================================== */
.neu-calendar-card {
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), var(--shadow-raised) !important;
  padding: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

html.dark .neu-calendar-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181B2F !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), var(--shadow-raised) !important;
}

.neu-cal-nav-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface-raised) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

html.dark .neu-cal-nav-btn {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.neu-cal-nav-btn:hover {
  box-shadow: var(--shadow-raised) !important;
  color: #B81D1D !important;
}

.neu-cal-nav-btn:active {
  box-shadow: var(--shadow-inset-sm) !important;
  transform: translateY(1px) !important;
}

.neu-cal-day-cell {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: auto !important;
  background: transparent;
  color: var(--text-main);
  border: 1px solid transparent;
}

.neu-cal-day-cell:hover:not(.other-month) {
  background: var(--surface-raised) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  color: #B81D1D !important;
}

.neu-cal-day-cell.selected {
  background: linear-gradient(135deg, #B81D1D, #991B1B) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(184, 29, 29, 0.4), var(--shadow-raised-sm) !important;
  transform: scale(1.05) !important;
}

.neu-cal-day-cell.today:not(.selected) {
  border: 2px solid #B81D1D !important;
  font-weight: 800 !important;
}

.neu-cal-day-cell.other-month {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* ==========================================================================
   STATUS FILTERS & LIST ITEMS (TAB 2)
   ========================================================================== */
.status-filter-btn {
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  color: var(--text-sub) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.45rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

html.dark .status-filter-btn {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

.status-filter-btn:hover {
  color: var(--text-main) !important;
  box-shadow: var(--shadow-raised) !important;
  transform: translateY(-1px);
}

.status-filter-btn.active,
.status-filter-btn[data-active="true"] {
  background: var(--surface-inset) !important;
  box-shadow: var(--shadow-inset-sm) !important;
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
  border-color: rgba(184, 29, 29, 0.2) !important;
  transform: translateY(0);
}

html.dark .status-filter-btn.active,
html.dark .status-filter-btn[data-active="true"] {
  color: #FF7B7B !important;
  border-color: rgba(184, 29, 29, 0.4) !important;
}

/* Soft Pastel Status Badges */
.badge-pending {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 1px solid var(--status-warning-border) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

.badge-approved {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 1px solid var(--status-success-border) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

.badge-rejected {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border: 1px solid var(--status-error-border) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

.badge-req-number {
  background: var(--surface-inset) !important;
  color: var(--text-sub) !important;
  box-shadow: var(--shadow-inset-sm) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 600 !important;
}

html.dark .badge-req-number {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Booking Cards (Inspired by Today's Events in Calendar Reference) */
#booking-list-container > div,
.booking-item-card {
  position: relative;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding: 1.25rem 1.5rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

html.dark #booking-list-container > div,
html.dark .booking-item-card {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Left Status Color Accent Bar */
#booking-list-container > div::before,
.booking-item-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--accent-purple);
  opacity: 0.9;
}

#booking-list-container > div:has(.badge-approved)::before {
  background: var(--status-success);
}

#booking-list-container > div:has(.badge-pending)::before {
  background: var(--status-warning);
}

#booking-list-container > div:has(.badge-rejected)::before {
  background: var(--status-error);
}

#booking-list-container > div:hover,
.booking-item-card:hover {
  box-shadow: var(--shadow-raised-hover) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   CIRCULAR STAT DIALS & DASHBOARD (TAB 3 - DERIVED FROM CONTROL HUB)
   ========================================================================== */
.neu-dial-card {
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding: 1.25rem !important;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .neu-dial-card {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

.neu-dial-card:hover {
  box-shadow: var(--shadow-raised-hover) !important;
  transform: translateY(-2px);
}

/* Circular Embossed Dial Ring */
.neu-dial-ring {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.neu-dial-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-inset);
  box-shadow: var(--shadow-inset-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--accent-purple);
}

/* SVG Progress Ring on Dial */
.neu-dial-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.neu-dial-svg circle.track {
  fill: transparent;
  stroke: var(--surface-inset);
  stroke-width: 4;
}

.neu-dial-svg circle.fill {
  fill: transparent;
  stroke: url(#accent-grad-svg);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

/* ==========================================================================
   STAFF PORTAL & TABLES (TAB 4)
   ========================================================================== */
table {
  border-collapse: separate;
  border-spacing: 0 8px !important;
}

table thead tr th {
  background: transparent !important;
  color: var(--text-dim) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none !important;
  padding: 0.75rem 1rem !important;
}

table tbody tr {
  background: var(--surface-raised) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  border-radius: 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

table tbody tr td:first-child {
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

table tbody tr td:last-child {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

table tbody tr:hover {
  box-shadow: var(--shadow-raised) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   MODALS: CLEAN, CRISP CINEMATIC FLOATING DIALOGS (ZERO WHITE GLOW / NO HALO)
   ========================================================================== */
.modal,
[id^="modal-"] {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.25s ease !important;
}

html.dark .modal,
html.dark [id^="modal-"] {
  background-color: rgba(5, 7, 15, 0.82) !important;
}

/* Eliminate ANY white negative shadow / backlight glow completely from modal cards */
.modal > div,
[id^="modal-"] > div,
[id^="modal-"] > div:last-child,
.modal .glass-card,
[id^="modal-"] .glass-card,
.modal-card {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--radius-panel) !important;
  /* Deep, natural cinematic drop shadow - completely dark with zero white glow */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55), 0 8px 24px -4px rgba(0, 0, 0, 0.35) !important;
  animation: modalEnter 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

html.dark .modal > div,
html.dark [id^="modal-"] > div,
html.dark [id^="modal-"] > div:last-child,
html.dark .modal .glass-card,
html.dark [id^="modal-"] .glass-card,
html.dark .modal-card {
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.85), 0 10px 25px -5px rgba(0, 0, 0, 0.65) !important;
}

@keyframes modalEnter {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   THEMED FLOATING DROPDOWN MENU (NO MORE UGLY OS RECTANGLE)
   ========================================================================== */
.theme-dropdown-menu {
  position: fixed;
  z-index: 999999;
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 6px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  animation: dropdownPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transform-origin: top center;
}

html.dark .theme-dropdown-menu {
  background: var(--surface-elevated) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

@keyframes dropdownPopIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.theme-dropdown-item {
  padding: 9px 14px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.theme-dropdown-item:hover {
  background: rgba(184, 29, 29, 0.08) !important;
  color: var(--brand-primary) !important;
  transform: translateX(2px) !important;
}

html.dark .theme-dropdown-item:hover {
  background: rgba(255, 123, 123, 0.12) !important;
  color: #FF7B7B !important;
}

.theme-dropdown-item.selected {
  background: linear-gradient(135deg, rgba(184, 29, 29, 0.15), rgba(184, 29, 29, 0.08)) !important;
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

html.dark .theme-dropdown-item.selected {
  background: linear-gradient(135deg, rgba(255, 123, 123, 0.2), rgba(255, 123, 123, 0.08)) !important;
  color: #FF7B7B !important;
}

.theme-dropdown-item.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Custom scrollbar for dropdown */
.theme-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.theme-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(166, 175, 195, 0.5);
  border-radius: 10px;
}
html.dark .theme-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* Active select state when dropdown is open */
select.dropdown-open {
  border-color: #B81D1D !important;
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(184, 29, 29, 0.2) !important;
}

/* Smooth micro-transitions for all interactive form actions */
input, select, textarea {
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s ease !important;
}

/* ==========================================================================
   MOBILE STICKY BOTTOM NAV
   ========================================================================== */
#mobile-bottom-nav {
  background: var(--surface) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 -8px 24px rgba(166, 175, 195, 0.25) !important;
}

html.dark #mobile-bottom-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 -8px 28px rgba(10, 11, 20, 0.7) !important;
}

.mobile-nav-tab-btn.text-red-700,
.mobile-nav-tab-btn[class*="text-red-700"] {
  background: var(--surface-inset) !important;
  box-shadow: var(--shadow-inset-sm) !important;
  border-radius: 12px;
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   SCROLLBAR & UTILITIES
   ========================================================================== */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb {
  background: #A5ABB5;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: #626A78;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #3A4266;
}

/* ==========================================================================
   THEME TOGGLE BUTTON & SMOOTH SUN/MOON TRANSITION (ISSUE 7)
   ========================================================================== */
.theme-toggle-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px !important;
  background: var(--surface-raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--shadow-raised-sm) !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark .theme-toggle-btn {
  background: var(--surface-raised) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.theme-toggle-btn:hover {
  box-shadow: var(--shadow-raised) !important;
  transform: translateY(-1.5px) !important;
}

.theme-toggle-btn:active {
  box-shadow: var(--shadow-inset-sm) !important;
  transform: translateY(1px) scale(0.95) !important;
}

.theme-toggle-icon-wrap {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-icon-sun,
.theme-icon-moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.35s ease,
              filter 0.35s ease;
}

.theme-icon-sun svg,
.theme-icon-moon svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

/* Light Mode: Sun is visible, Moon is tucked away rotated */
.theme-icon-sun {
  color: #D97706; /* Warm amber-gold */
  transform: rotate(0deg) scale(1);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}

.theme-icon-moon {
  color: #93C5FD; /* Soft night blue */
  transform: rotate(-90deg) scale(0);
  opacity: 0;
  filter: none;
}

/* Dark Mode: Sun rotates out and shrinks, Moon rotates in and scales up */
html.dark .theme-icon-sun {
  transform: rotate(90deg) scale(0);
  opacity: 0;
  filter: none;
}

html.dark .theme-icon-moon {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.45));
}

/* ==========================================================================
   NOTIFICATION DROPDOWN: VIBRANT, PROMINENT CALENDAR-LIKE ELEVATION (ISSUE 3)
   ========================================================================== */
#notif-dropdown {
  background: var(--surface) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.25), var(--shadow-raised) !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html.dark #notif-dropdown {
  background: #181B2F !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.notif-dropdown-header {
  background: linear-gradient(135deg, #B81D1D 0%, #991B1B 100%) !important;
  color: #ffffff !important;
  padding: 0.9rem 1.15rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.notif-dropdown-header .notif-title-text,
.notif-dropdown-header span,
.notif-dropdown-header h4 {
  color: #ffffff !important;
}

.notif-enable-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
  font-weight: 700 !important;
}

.notif-enable-btn:hover {
  background: rgba(255, 255, 255, 0.30) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Individual Notification Cards (Clear separation, shadow, high contrast) */
.notif-card {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.notif-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

.notif-card.unread {
  background: #FFF9F9 !important;
  border-color: #FECDD3 !important;
}

html.dark .notif-card {
  background: #1A1E36 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .notif-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark .notif-card.unread {
  background: #241A25 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   TAB 4: BUILDING, ROOM & MACHINERY LIST ITEMS (ISSUE 5)
   Light Mode: High contrast white card (#FFFFFF) with crisp border & accent
   Dark Mode: Deep #151829 with zero white glow / halo
   ========================================================================== */
#buildings-management-container > div,
#rooms-hierarchy-container > div,
.room-hierarchy-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-left: 5px solid #B81D1D !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#buildings-management-container > div:hover,
#rooms-hierarchy-container > div:hover,
.room-hierarchy-card:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1.5px) !important;
}

html.dark #buildings-management-container > div,
html.dark #rooms-hierarchy-container > div,
html.dark .room-hierarchy-card {
  background: #151829 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 5px solid #EF4444 !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

html.dark #buildings-management-container > div:hover,
html.dark #rooms-hierarchy-container > div:hover,
html.dark .room-hierarchy-card:hover {
  box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.55) !important;
}

/* Equipment chips */
#rooms-hierarchy-container .inline-flex.items-center,
.equipment-chip {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
}

html.dark #rooms-hierarchy-container .inline-flex.items-center,
html.dark .equipment-chip {
  background: #1C2036 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Mobile Header Safety & Zero-Overlap Constraint (< 640px) */
@media (max-width: 639px) {
  .header-brand-logo-wrap {
    width: 38px !important;
    height: 38px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  .theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    flex-shrink: 0 !important;
  }
  #btn-notif-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px !important;
    border-radius: 11px !important;
    flex-shrink: 0 !important;
  }
  #auth-user-btn > div {
    padding: 3px 6px !important;
    border-radius: 11px !important;
    gap: 4px !important;
  }
  #user-display-name {
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  #user-role-badge {
    display: none !important;
  }
}

/* ==================================================== */
/* TIMETABLE MATRIX TABLE & GRID BORDER SYSTEM (HALF INTENSITY) */
/* ==================================================== */
#timetable-matrix-container {
  border: 1.5px solid #94a3b8 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  overflow-x: auto !important;
}
html.dark #timetable-matrix-container {
  border-color: #334155 !important;
  background-color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

table.tt-matrix-table {
  width: 100% !important;
  min-width: 1230px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border: 2px solid #94a3b8 !important; /* กรอบตารางรอบด้านลดความเข้มลงครึ่งนึง */
  background-color: #ffffff !important;
}
html.dark table.tt-matrix-table {
  border-color: #475569 !important;
  background-color: #0f172a !important;
}

/* เส้นกริดทุกช่อง (Grid lines for every cell - Soft Slate 300) */
table.tt-matrix-table th,
table.tt-matrix-table td {
  border: 1px solid #cbd5e1 !important; /* เส้นกริดนุ่มนวล สบายตา ลดความเข้มลงครึ่งนึง */
  vertical-align: middle !important;
}
html.dark table.tt-matrix-table th,
html.dark table.tt-matrix-table td {
  border: 1px solid #334155 !important;
}

/* เส้นขอบใต้หัวตาราง */
table.tt-matrix-table thead th {
  border-bottom: 2px solid #94a3b8 !important;
  background-color: #f8fafc !important;
}
html.dark table.tt-matrix-table thead th {
  border-bottom: 2px solid #475569 !important;
  background-color: #1e293b !important;
}

/* คอลัมน์หัวข้อวัน (Column 1) - เส้นแบ่ง 2px ทั้งขวาและล่าง */
table.tt-matrix-table .tt-day-badge-col {
  border-right: 2px solid #94a3b8 !important;
  border-bottom: 2px solid #94a3b8 !important;
}
html.dark table.tt-matrix-table .tt-day-badge-col {
  border-right: 2px solid #475569 !important;
  border-bottom: 2px solid #475569 !important;
}

/* เส้นแบ่งระหว่างวัน (แถวสุดท้ายของแต่ละวัน) หนา 2px */
table.tt-matrix-table tr.tt-day-last-row td {
  border-bottom: 2px solid #94a3b8 !important;
}
html.dark table.tt-matrix-table tr.tt-day-last-row td {
  border-bottom: 2px solid #475569 !important;
}

/* ช่องพักเที่ยง (12:00) */
table.tt-matrix-table .tt-lunch-header {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-left: 1.5px solid #f59e0b !important;
  border-right: 1.5px solid #f59e0b !important;
}
html.dark table.tt-matrix-table .tt-lunch-header {
  background-color: #451a03 !important;
  color: #fef3c7 !important;
  border-color: #92400e !important;
}

table.tt-matrix-table .tt-lunch-cell {
  background-color: #fffbeb !important;
  border-left: 1.5px solid #f59e0b !important;
  border-right: 1.5px solid #f59e0b !important;
}
html.dark table.tt-matrix-table .tt-lunch-cell {
  background-color: #2e1005 !important;
  border-color: #92400e !important;
}

/* ช่องตารางว่าง แสดงเวลาชัดเจน */
.tt-free-cell-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 56px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  user-select: none !important;
}
html.dark .tt-free-cell-label {
  color: #64748b !important;
}

/* การ์ดวิชา โดดเด่น ชัดเจน ลอยเด่น ไม่กลืนกับพื้นหลังแถวสีพาสเทล */
.tt-subject-card {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 6px solid #d97706 !important; /* Golden-amber high-contrast bar */
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}
.tt-subject-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.1) !important;
  border-color: #94a3b8 !important;
  border-left-color: #b45309 !important;
}
html.dark .tt-subject-card {
  background-color: #1e293b !important;
  border: 1.5px solid #334155 !important;
  border-left: 6px solid #f59e0b !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
html.dark .tt-subject-card:hover {
  border-color: #475569 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}