/*
 * Omotenashi Style CSS - Modern Japanese Interior Design Theme
 * Colors:
 * - Primary Accent (Red): #EE1D23
 * - Secondary Cream/Beige: #E2E8F0
 * - Secondary Bronze/Gold: #957100
 * - Neutral Light BG: #FFFFFF
 * - Sidebar Washi BG: #F8F9FA
 * - Text Charcoal: #2D2A26
 */

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

:root {
  --primary-red: #EE1D23;
  --primary-red-hover: #D6151B;
  --primary-red-light: rgba(238, 29, 35, 0.05);
  --secondary-cream: #E2E8F0;
  --secondary-cream-light: #FFFFFF;
  --secondary-cream-sidebar: #FFFFFF;
  --secondary-gold: #957100;
  --secondary-gold-light: rgba(0, 0, 0, 0.08);
  --text-charcoal: #2D2A26;
  --border-light: rgba(0, 0, 0, 0.12);
  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);

  --dark-bg: #201C1A;
  --dark-card: #2A2522;
  --dark-border: rgba(235, 221, 172, 0.15);
  --dark-text: #F3ECE0;
}

/* ==========================================================================
   Global Styles & Typography (Japanese Modern Minimalist)
   ========================================================================== */
body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.015em;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6,
.card-title, .page-title,
.logo-header a, .navbar-brand,
.login-page h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Page load transition */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-panel .content .page-inner {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES & WHITE-ON-WHITE TEXT FIXES
   ========================================================================== */
body[data-background-color="white"],
body:not([data-background-color="dark"]) {
  background-color: var(--secondary-cream-light) !important;
  color: var(--text-charcoal) !important;
}

body:not([data-background-color="dark"]) .main-panel {
  background-color: var(--secondary-cream-light) !important;
}

/* Core white-on-white text fixes */
body:not([data-background-color="dark"]) .card,
body:not([data-background-color="dark"]) .card-body,
body:not([data-background-color="dark"]) .card-title,
body:not([data-background-color="dark"]) .card-category,
body:not([data-background-color="dark"]) .page-header,
body:not([data-background-color="dark"]) .page-title,
body:not([data-background-color="dark"]) label,
body:not([data-background-color="dark"]) .form-group label,
body:not([data-background-color="dark"]) p,
body:not([data-background-color="dark"]) span:not(.badge):not(.select2-selection__choice__remove):not(.caret),
body:not([data-background-color="dark"]) small,
body:not([data-background-color="dark"]) h1,
body:not([data-background-color="dark"]) h2,
body:not([data-background-color="dark"]) h3,
body:not([data-background-color="dark"]) h4,
body:not([data-background-color="dark"]) h5,
body:not([data-background-color="dark"]) h6,
body:not([data-background-color="dark"]) td,
body:not([data-background-color="dark"]) th,
body:not([data-background-color="dark"]) .numbers .card-title,
body:not([data-background-color="dark"]) .numbers .card-category,
body:not([data-background-color="dark"]) .numbers h4,
body:not([data-background-color="dark"]) .breadcrumb-item,
body:not([data-background-color="dark"]) .breadcrumb-item a,
body:not([data-background-color="dark"]) .form-check-label {
  color: var(--text-charcoal) !important;
}

/* Keep primary/secondary text accents untouched */
body:not([data-background-color="dark"]) .text-primary,
body:not([data-background-color="dark"]) .text-primary * {
  color: var(--primary-red) !important;
}

body:not([data-background-color="dark"]) .text-secondary,
body:not([data-background-color="dark"]) .text-secondary * {
  color: var(--secondary-gold) !important;
}

/* Header & Top Navbar */
body:not([data-background-color="dark"]) .logo-header {
  /* background-color: var(--secondary-cream) !important; */
  background-color: #fff !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body:not([data-background-color="dark"]) .navbar-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important;
}

body:not([data-background-color="dark"]) .navbar-header .navbar-nav .nav-link,
body:not([data-background-color="dark"]) .navbar-header .navbar-nav .nav-link i {
  color: var(--text-charcoal) !important;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not([data-background-color="dark"]) .navbar-header .navbar-nav .nav-link:hover,
body:not([data-background-color="dark"]) .navbar-header .navbar-nav .nav-link:hover i {
  color: var(--primary-red) !important;
}

body:not([data-background-color="dark"]) .navbar-header .u-text h4,
body:not([data-background-color="dark"]) .navbar-header .u-text p {
  color: var(--text-charcoal) !important;
}

/* ==========================================================================
   MINIMALIST JAPANESE SIDEBAR (OMOTENASHI THEME)
   ========================================================================== */
body:not([data-background-color="dark"]) .sidebar {
  background-color: var(--secondary-cream-sidebar) !important;
  border-right: 1px solid var(--border-light) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03) !important;
}

body:not([data-background-color="dark"]) .sidebar .user {
  border-bottom: 1px solid var(--border-light) !important;
  padding-bottom: 18px;
}

body:not([data-background-color="dark"]) .sidebar .user .info a span,
body:not([data-background-color="dark"]) .sidebar .user .info .caret {
  color: var(--text-charcoal) !important;
  font-weight: 600;
}

body:not([data-background-color="dark"]) .sidebar .user .info .user-level {
  color: var(--secondary-gold) !important;
  font-weight: 600;
}

/* Reset default Atlantis active card styles & background inheritance */
body:not([data-background-color="dark"]) .sidebar .nav .nav-item a,
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav .nav-item a,
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav .nav-item .active a,
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav .nav-item.active a {
  background-color: transparent !important;
  box-shadow: none !important;
  border-left: none !important;
}

/* General Link Items */
body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a {
  color: var(--text-charcoal) !important;
  font-weight: 500;
  padding: 10px 14px !important;
  /* margin: 4px 12px !important; */
  border-radius: 6px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sidebar Icons & Carets (Uniform gold color) */
body:not([data-background-color="dark"]) .sidebar .nav.nav-primary .nav-item a i,
body:not([data-background-color="dark"]) .sidebar .nav.nav-primary .nav-item.active a i,
body:not([data-background-color="dark"]) .sidebar .nav.nav-primary .nav-item.submenu a i,
body:not([data-background-color="dark"]) .sidebar .nav.nav-primary .nav-item a .caret,
body:not([data-background-color="dark"]) .sidebar .nav.nav-primary .nav-item.active a .caret {
  color: var(--secondary-gold) !important;
  font-size: 15px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important;
}

body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a p {
  color: var(--text-charcoal) !important;
}

/* Level 1 Parent Active Group (e.g. BOOKING SYSTEM) - Subtle, borderless blend instead of white card */
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a {
  background-color: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
  border-left: 3px solid var(--primary-red) !important;
  border-radius: 6px !important;
}

body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a i,
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a p,
body:not([data-background-color="dark"]) .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a .caret {
  color: var(--primary-red) !important;
}

/* Hover effects */
body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--primary-red) !important;
  transform: translateX(4px);
}

body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a:hover i,
body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a:hover .caret {
  color: var(--primary-red) !important;
  transform: scale(1.12);
}

body:not([data-background-color="dark"]) .sidebar .nav > .nav-item > a:hover p {
  color: var(--primary-red) !important;
}

/* ==========================================================================
   SUBMENU ARCHITECTURAL GRID GUIDELINES (TATAMI STYLE)
   ========================================================================== */
body:not([data-background-color="dark"]) .sidebar .nav-collapse {
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  margin-left: 10px !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
}

body:not([data-background-color="dark"]) .sidebar .nav-collapse .nav-collapse {
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  margin-left: 13px !important;
  margin-top: 1px !important;
  margin-bottom: 4px !important;
  padding: 2px 0 !important;
}
.form-group.mb-0.p-0 {
  margin-bottom: 0 !important;
}
/* Level 2 Sub-menu Links */
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li a {
  color: var(--text-charcoal) !important;
  font-weight: 500;
  padding: 8px 0px 8px 5px !important;
  margin: 2px 0 2px 0 !important;
  border-radius: 0 6px 6px 0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background-color: transparent !important;
}

body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li a i {
  margin-right: 10px !important;
  font-size: 13px !important;
  width: 16px !important;
  text-align: center !important;
}

/* Level 2 Sub-menu Link Active */
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse > li.active > a {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--primary-red) !important;
  border-left: 2px solid var(--primary-red) !important;
  margin-left: -1px !important;
}

body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse > li.active > a i,
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse > li.active > a p,
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse > li.active > a .caret {
  color: var(--primary-red) !important;
}

/* Level 3 Deep Sub-menu Links */
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li .nav-collapse li a {
  padding: 6px 16px 6px 18px !important;
  margin: 1px 0 !important;
  border-radius: 0 4px 4px 0 !important;
  background-color: transparent !important;
}

/* Level 3 Deep Sub-menu Link Active */
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li .nav-collapse > li.active > a {
  background-color: var(--primary-red-light) !important;
  color: var(--primary-red) !important;
  border-left: 2px solid var(--primary-red) !important;
  margin-left: -1px !important;
}

body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li .nav-collapse > li.active > a span.sub-item {
  color: var(--primary-red) !important;
  font-weight: 700 !important;
}

body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li a:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--primary-red) !important;
  transform: translateX(4px);
}

body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li a:hover span.sub-item,
body:not([data-background-color="dark"]) .sidebar .nav .nav-collapse li a:hover i {
  color: var(--primary-red) !important;
}

/* Hide default active borders from original theme */
.sidebar.sidebar-style-2 .nav .nav-item.active a:before,
.sidebar .nav.nav-primary>.nav-item.active a:before {
  background: transparent !important;
  display: none !important;
}

/* ==========================================================================
   STEP-NAV OVERRIDES (Vertical Stepper Menu Fixes)
   ========================================================================== */
body:not([data-background-color="dark"]) .step-nav {
  position: relative !important;
}

body:not([data-background-color="dark"]) .step-nav li {
  padding-left: 0 !important;
}

/* Redesign the Stepper Dot */
body:not([data-background-color="dark"]) .step-nav li::before {
  content: '' !important;
  position: absolute !important;
  top: 15px !important;
  left: 11px !important;
  width: 7px !important;
  height: 7px !important;
  background-color: var(--secondary-gold) !important;
  opacity: 0.6 !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: none !important;
}

body:not([data-background-color="dark"]) .step-nav li.active::before {
  background-color: var(--primary-red) !important;
  opacity: 1 !important;
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 3px rgba(238, 29, 35, 0.2) !important;
}

/* Redesign the Vertical Connector Line */
body:not([data-background-color="dark"]) .step-nav li:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  top: 20px !important;
  left: 14px !important;
  width: 1px !important;
  height: auto !important; /* Disable default 48px height */
  bottom: -15px !important;
  background-color: rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  border: none !important;
}

body:not([data-background-color="dark"]) .step-nav li.active:not(:last-child)::after {
  background-color: var(--primary-red) !important;
  opacity: 0.5 !important;
}

/* Hide the ugly dropdown triangles (▼) completely */
body:not([data-background-color="dark"]) .step-nav li:not(:last-child) .sub-item::after {
  display: none !important;
  content: '' !important;
  opacity: 0 !important;
}

/* Hide original list bullets inside step-nav to avoid duplicates */
body:not([data-background-color="dark"]) .step-nav.nav-collapse li a .sub-item:before {
  display: none !important;
}


/* ==========================================================================
   CARDS & PAGINATION & CONTENT HARMONY
   ========================================================================== */
body:not([data-background-color="dark"]) .card {
  background-color: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow) !important;
  /* transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important; */
}

body:not([data-background-color="dark"]) .card:hover {
  /* transform: translateY(-4px); */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
  /* border-color: rgba(0, 0, 0, 0.25) !important; */
}

.card-body {
  padding: 24px 28px !important;
}

.card-header {
  padding: 18px 28px !important;
  border-bottom: 1px solid var(--border-light) !important;
  background-color: #ffffff !important;
}

.page-inner {
  padding: 28px 35px !important;
}

@media (max-width: 768px) {
  .page-inner {
    padding: 15px 20px !important;
  }
  .card-body {
    padding: 15px 20px !important;
  }
}
/* ==========================================================================
   PAGE HEADER & BREADCRUMBS (OMOTENASHI MINIMALIST ANCHORS)
   ========================================================================== */
.page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 0 0 16px 0 !important;
  margin-bottom: 30px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important; /* Thin sand-gold bottom divider line */
  position: relative !important;
}

body[data-background-color="dark"] .page-header {
  border-bottom: 1px solid rgba(235, 221, 172, 0.15) !important;
}

/* Beautiful solid brand red accent bar resting on the bottom-left edge of the gold line */
.page-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 50px !important;
  height: 2px !important;
  background-color: var(--primary-red) !important;
  z-index: 2 !important;
}

.page-header .page-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--text-charcoal) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  text-transform: capitalize !important;
  border-left: none !important;
}

body[data-background-color="dark"] .page-header .page-title {
  color: var(--dark-text) !important;
}
.btn-info i {
  color: #fff !important;
}
.text-right {
text-align: right;
}
.page-header .breadcrumbs {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  padding-left: 20px !important;
  margin: 0 0 0 20px !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.25) !important; /* Elegant gold vertical divider line */
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 20px !important;
}

body[data-background-color="dark"] .page-header .breadcrumbs {
  border-left-color: rgba(235, 221, 172, 0.2) !important;
  background-color: transparent !important;
}

.page-header .breadcrumbs li {
  display: flex !important;
  align-items: center !important;
}

.page-header .breadcrumbs a {
  color: #8E8A83 !important;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
}

body[data-background-color="dark"] .page-header .breadcrumbs a {
  color: #AFAAA2 !important;
}

.page-header .breadcrumbs a:hover {
  color: var(--primary-red) !important;
  text-decoration: none !important;
}

.page-header .breadcrumbs .nav-home a i {
  font-size: 15px !important;
  color: var(--secondary-gold) !important;
  margin-top: -2px !important;
}

body[data-background-color="dark"] .page-header .breadcrumbs .nav-home a i {
  color: #C59B27 !important;
}

.page-header .breadcrumbs .separator i {
  display: none !important; /* Hide default arrow icon */
}

.page-header .breadcrumbs .separator::after {
  content: '/' !important; /* Clean slash separator */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: rgba(0, 0, 0, 0.35) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
}

body[data-background-color="dark"] .page-header .breadcrumbs .separator::after {
  color: rgba(235, 221, 172, 0.3) !important;
}

/* Responsive adjustment for clean mobile layout */
@media (max-width: 991px) {
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .page-header .breadcrumbs {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    height: auto !important;
  }
}


/* ==========================================================================
   FORM CONTROLS & LAYOUT (OMOTENASHI PREMIUM FIELDS)
   ========================================================================== */
body:not([data-background-color="dark"]) .form-control {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: rgba(250, 248, 243, 0.6) !important;
  color: var(--text-charcoal) !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not([data-background-color="dark"]) .form-control:focus {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
  background-color: #ffffff !important;
}

body[data-background-color="dark"] .form-control {
  border: 1px solid var(--dark-border) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--dark-text) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-background-color="dark"] .form-control:focus {
  border-color: #C59B27 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(197, 155, 39, 0.15) !important;
  background-color: var(--dark-bg) !important;
}

.form-group {
  margin-bottom: 24px !important;
  padding: 0 !important;
}

.form-group label {
  margin-bottom: 8px !important;
  font-weight: 700 !important;
  color: rgba(45, 42, 38, 0.65) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body[data-background-color="dark"] .form-group label {
  color: rgba(243, 236, 224, 0.6) !important;
}

/* ==========================================================================
   SELECT2 CONTAINER & ANIMATIONS (PREMIUM ZEN DROPDOWN)
   ========================================================================== */

/* The dropdown container animation */
@keyframes select2-dropdown-in-below {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes select2-dropdown-in-above {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Base Dropdown styling */
.select2-container--open .select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background-color: #ffffff !important;
  z-index: 99999;
}

body[data-background-color="dark"] .select2-container--open .select2-dropdown {
  background-color: var(--dark-card) !important;
  border-color: rgba(235, 221, 172, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Dynamic Animation Trigger */
.select2-container--open .select2-dropdown--below {
  animation: select2-dropdown-in-below 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.select2-container--open .select2-dropdown--above {
  animation: select2-dropdown-in-above 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Option Search Field */
.select2-container--default .select2-search--dropdown {
  padding: 10px 12px !important;
  background-color: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body[data-background-color="dark"] .select2-container--default .select2-search--dropdown {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(235, 221, 172, 0.1) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  outline: none !important;
  background-color: #ffffff !important;
  color: var(--text-charcoal) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body[data-background-color="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(235, 221, 172, 0.15) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: var(--dark-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 0 0 3px rgba(149, 113, 0, 0.1) !important;
}

body[data-background-color="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #C59B27 !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15) !important;
}

/* Results & Options styling */
.select2-results__options {
  padding: 6px !important;
  max-height: 220px !important;
}

/* Custom Scrollbar for Select2 options */
.select2-results__options::-webkit-scrollbar {
  width: 6px;
}
.select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}
.select2-results__options::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
body[data-background-color="dark"] .select2-results__options::-webkit-scrollbar-thumb {
  background: rgba(235, 221, 172, 0.2);
}

.select2-container--default .select2-results__option--selectable {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--text-charcoal) !important;
  margin-bottom: 2px;
  background-color: transparent !important;
  transition: all 0.15s ease !important;
}

body[data-background-color="dark"] .select2-container--default .select2-results__option--selectable {
  color: var(--dark-text) !important;
}

/* Hover and Highlighted Option styling */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selectable:hover {
  background-color: rgba(238, 29, 35, 0.05) !important; /* Light accent primary red */
  color: var(--primary-red) !important;
  font-weight: 500;
}

body[data-background-color="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
body[data-background-color="dark"] .select2-container--default .select2-results__option--selectable:hover {
  background-color: rgba(238, 29, 35, 0.15) !important;
  color: #ff595e !important;
}

/* Selected Option styling */
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(149, 113, 0, 0.08) !important; /* Gold accent background */
  color: var(--secondary-gold) !important;
  font-weight: 600 !important;
}

body[data-background-color="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(197, 155, 39, 0.15) !important;
  color: #C59B27 !important;
}

/* Single Selection Box */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1px solid rgb(0 0 0 / 10%) !important;
  background-color: rgba(250, 248, 243, 0.6) !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
  position: relative !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--single {
  border-color: var(--dark-border) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  padding-left: 0 !important;
  color: var(--text-charcoal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--dark-text) !important;
}

/* Custom animated chevron arrow */
.select2-container .select2-selection--single:after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  transform-origin: center !important;
  font-size: 11px !important;
  opacity: 0.5 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  border: none !important;
}

.select2-container--open .select2-selection--single:after {
  transform: translateY(-50%) rotate(180deg) !important;
  opacity: 0.8 !important;
  color: var(--secondary-gold) !important;
}

body[data-background-color="dark"] .select2-container--open .select2-selection--single:after {
  color: #C59B27 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none !important; /* Hide original arrow */
}

/* Focused State */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 0 0 3px rgba(149, 113, 0, 0.12) !important;
  background-color: #ffffff !important;
}

body[data-background-color="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
body[data-background-color="dark"] .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #C59B27 !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.18) !important;
  background-color: var(--dark-bg) !important;
}

/* Multiple Selection Box (Bubbles) */
.select2-container--default .select2-selection--multiple {
  min-height: 42px !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: rgba(250, 248, 243, 0.6) !important;
  border-radius: 8px !important;
  padding: 3px 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--multiple {
  border-color: var(--dark-border) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 0 0 3px rgba(149, 113, 0, 0.12) !important;
  background-color: #ffffff !important;
}

body[data-background-color="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #C59B27 !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.18) !important;
  background-color: var(--dark-bg) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(149, 113, 0, 0.08) !important;
  border: 1px solid rgba(149, 113, 0, 0.15) !important;
  border-radius: 6px !important;
  color: var(--secondary-gold) !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 2px 0 !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(197, 155, 39, 0.15) !important;
  border: 1px solid rgba(197, 155, 39, 0.2) !important;
  color: #C59B27 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-red) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  order: 2 !important; /* Move close icon to right */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  transform: scale(1.2) !important;
  color: var(--primary-red-hover) !important;
  background-color: transparent !important;
}

/* Form Helper text */
.form-text, .text-muted {
  font-size: 12px !important;
  color: #8E8A83 !important;
  margin-top: 6px !important;
}

/* Custom checkmark & radio styling */
.form-check {
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.form-check-input {
  margin: 0 !important;
  cursor: pointer !important;
}

.form-check-label {
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Custom Form Button styling */
.card-action {
  padding: 20px 28px !important;
  background-color: transparent !important;
  border-top: 1px solid var(--border-light) !important;
}

body[data-background-color="dark"] .card-action {
  border-top: 1px solid var(--dark-border) !important;
}

.btn-success {
  background-color: var(--secondary-gold) !important;
  border-color: var(--secondary-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #7b5d00 !important;
  border-color: #7b5d00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25) !important;
}

.btn-danger {
  background-color: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(238, 29, 35, 0.15) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: var(--primary-red-hover) !important;
  border-color: var(--primary-red-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(238, 29, 35, 0.25) !important;
}

/* Tables and Headers */
body:not([data-background-color="dark"]) .table {
  color: var(--text-charcoal) !important;
}

body:not([data-background-color="dark"]) .table thead th {
  background-color: var(--secondary-cream-light) !important;
  color: var(--secondary-gold) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--border-light) !important;
  padding: 12px 18px !important;
}

body:not([data-background-color="dark"]) .table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 14px 18px !important;
}

body:not([data-background-color="dark"]) .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(235, 221, 172, 0.1) !important;
}
/* ==========================================================================
   PAGINATION OVERRIDES (OMOTENASHI ELEGANT NAVIGATION)
   ========================================================================== */
.pagination {
  display: flex !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 24px 0 !important;
  list-style: none !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Style all standard pagination links & spans (including Datatable pagination) */
.pagination > li > a,
.pagination > li > span,
.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: transparent !important;
  color: var(--text-charcoal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body[data-background-color="dark"] .pagination > li > a,
body[data-background-color="dark"] .pagination > li > span,
body[data-background-color="dark"] .page-link,
body[data-background-color="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {
  background-color: transparent !important;
  color: var(--dark-text) !important;
}

/* Next / Prev Buttons (Arrows) */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.previous a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.next a {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  background-color: #ffffff !important;
  color: var(--secondary-gold) !important;
}

body[data-background-color="dark"] .pagination > li:first-child > a,
body[data-background-color="dark"] .pagination > li:first-child > span,
body[data-background-color="dark"] .pagination > li:last-child > a,
body[data-background-color="dark"] .pagination > li:last-child > span,
body[data-background-color="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination li.previous a,
body[data-background-color="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination li.next a {
  border: 1px solid rgba(235, 221, 172, 0.2) !important;
  background-color: var(--dark-bg) !important;
  color: #C59B27 !important;
}

/* Active page overrides (Brand Gold) */
.pagination > li.active > a,
.pagination > li.active > span,
.pagination .page-item.active .page-link,
.pagination .page-item.active > a,
.pagination li.active .page-link,
.page-item.active .page-link,
.pagination.pg-primary > li.active > a,
.pagination.pg-primary > li.active > span,
.pagination.pg-secondary > li.active > a,
.pagination.pg-secondary > li.active > span,
.pagination.pg-default > li.active > a,
.pagination.pg-default > li.active > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active .page-link,
body:not([data-background-color="dark"]) .pagination > li.active > a,
body:not([data-background-color="dark"]) .pagination .page-item.active .page-link,
body[data-background-color="dark"] .pagination > li.active > a,
body[data-background-color="dark"] .pagination .page-item.active .page-link {
  background-color: var(--secondary-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
}

/* Hover state overrides */
.pagination > li > a:hover,
.pagination .page-item:not(.active) .page-link:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li:not(.active) a:hover {
  color: var(--secondary-gold) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-2px) !important;
}

.pagination > li:first-child > a:hover,
.pagination > li:last-child > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.previous a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.next a:hover {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body[data-background-color="dark"] .pagination > li > a:hover,
body[data-background-color="dark"] .pagination .page-item:not(.active) .page-link:hover,
body[data-background-color="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination li:not(.active) a:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Disabled state overrides */
.pagination > li.disabled > a,
.pagination > li.disabled > span,
.pagination .page-item.disabled .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.disabled a {
  opacity: 0.4 !important;
  color: #8E8A83 !important;
  background-color: transparent !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

body[data-background-color="dark"] .pagination > li.disabled > a,
body[data-background-color="dark"] .pagination > li.disabled > span,
body[data-background-color="dark"] .page-item.disabled .page-link {
  color: #6E6A63 !important;
  border-color: rgba(235, 221, 172, 0.1) !important;
}

/* Select2 & Custom Dropdown Harmony */

body:not([data-background-color="dark"]) select.form-control,
body:not([data-background-color="dark"]) .select2-container--default .select2-selection--single,
body:not([data-background-color="dark"]) .select2-dropdown,
body:not([data-background-color="dark"]) .select2-results__option {
  background-color: #ffffff !important;
  color: var(--text-charcoal) !important;
  /* border: 1px solid #E0D5C1 !important; */
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body:not([data-background-color="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-charcoal) !important;
}


/* ==========================================================================
   DARK MODE OVERRIDES (LUXURY HOTEL LOUNGE THEME)
   ========================================================================== */
body[data-background-color="dark"] {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .main-panel {
  background-color: var(--dark-bg) !important;
}

/* Core dark-on-dark text/color overrides */
body[data-background-color="dark"] .card,
body[data-background-color="dark"] .card-body,
body[data-background-color="dark"] .card-title,
body[data-background-color="dark"] .card-category,
body[data-background-color="dark"] .page-header,
body[data-background-color="dark"] .page-title,
body[data-background-color="dark"] label,
body[data-background-color="dark"] .form-group label,
body[data-background-color="dark"] p,
body[data-background-color="dark"] span:not(.badge):not(.select2-selection__choice__remove):not(.caret),
body[data-background-color="dark"] small,
body[data-background-color="dark"] h1,
body[data-background-color="dark"] h2,
body[data-background-color="dark"] h3,
body[data-background-color="dark"] h4,
body[data-background-color="dark"] h5,
body[data-background-color="dark"] h6,
body[data-background-color="dark"] td,
body[data-background-color="dark"] th,
body[data-background-color="dark"] .numbers .card-title,
body[data-background-color="dark"] .numbers .card-category,
body[data-background-color="dark"] .numbers h4,
body[data-background-color="dark"] .breadcrumb-item,
body[data-background-color="dark"] .breadcrumb-item a,
body[data-background-color="dark"] .form-check-label {
  color: var(--dark-text) !important;
}

/* Header & Top Navbar */
body[data-background-color="dark"] .logo-header {
  background-color: var(--dark-card) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

body[data-background-color="dark"] .navbar-header {
  background-color: var(--dark-card) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* Sidebar Styling */
body[data-background-color="dark"] .sidebar {
  background-color: var(--dark-card) !important;
  border-right: 1px solid var(--dark-border) !important;
}

body[data-background-color="dark"] .sidebar .user {
  border-bottom: 1px solid var(--dark-border) !important;
}

body[data-background-color="dark"] .sidebar .user .info a span,
body[data-background-color="dark"] .sidebar .user .info .caret {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .sidebar .user .info .user-level {
  color: #C59B27 !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item > a {
  color: var(--dark-text) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item > a i {
  color: #C59B27 !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item > a:hover {
  background-color: rgba(235, 221, 172, 0.05) !important;
  color: var(--primary-red) !important;
  transform: translateX(4px);
}

body[data-background-color="dark"] .sidebar .nav > .nav-item.active > a,
body[data-background-color="dark"] .sidebar.sidebar-style-2[data-background-color=dark2] .nav .nav-item.active>a,
body[data-background-color="dark"] .sidebar.sidebar-style-2[data-background-color=dark] .nav .nav-item.active>a {
  background-color: var(--dark-bg) !important;
  color: var(--primary-red) !important;
  border-left: 4px solid var(--primary-red) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item.active > a i,
body[data-background-color="dark"] .sidebar .nav > .nav-item.active > a p,
body[data-background-color="dark"] .sidebar .nav > .nav-item.active > a .caret {
  color: var(--primary-red) !important;
}

body[data-background-color="dark"] .sidebar .nav .nav-collapse li a {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .sidebar .nav .nav-collapse li.active a span.sub-item {
  color: var(--primary-red) !important;
}

/* Cards & Content Elements */
body[data-background-color="dark"] .card {
  background-color: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3) !important;
}

body[data-background-color="dark"] .card-header {
  border-bottom: 1px solid var(--dark-border) !important;
  background-color: var(--dark-card) !important;
}

body[data-background-color="dark"] .card-title {
  color: #C59B27 !important;
}

/* Form inputs */
body[data-background-color="dark"] .form-control {
  border: 1px solid var(--dark-border) !important;
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .form-control:focus {
  border-color: #C59B27 !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.1) !important;
}

/* Tables */
body[data-background-color="dark"] .table {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .table thead th {
  background-color: var(--dark-bg) !important;
  color: #C59B27 !important;
  border-bottom: 2px solid var(--dark-border) !important;
}

body[data-background-color="dark"] .table td {
  border-bottom: 1px solid var(--dark-border) !important;
}


/* ==========================================================================
   BUTTONS AND ACCENTS (UNIFIED)
   ========================================================================== */
.btn {
  padding: 11px 15px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: -0.015em;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
}
.btn .btn-label i {
  color: #fff !important;
}
.btn-primary {
 background-color: var(--secondary-gold) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px !important;
    border-color: var(--secondary-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-red-hover) !important;
  border-color: var(--primary-red-hover) !important;
  box-shadow: 0 6px 15px rgba(238, 29, 35, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary {
  background-color: var(--secondary-gold) !important;
  border-color: var(--secondary-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #7b5d00 !important;
  border-color: #7b5d00 !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-info {
  background-color: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(238, 29, 35, 0.2) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--primary-red-hover) !important;
  border-color: var(--primary-red-hover) !important;
  box-shadow: 0 6px 15px rgba(238, 29, 35, 0.3) !important;
  transform: translateY(-2px) !important;
}



.btn-outline-primary {
  color: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-red) !important;
  color: #ffffff !important;
}

.btn-outline-secondary {
  color: var(--secondary-gold) !important;
  border-color: var(--secondary-gold) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--secondary-gold) !important;
  color: #ffffff !important;
}

/* Badges & Accents */
.badge-primary {
  background-color: var(--primary-red) !important;
  color: #ffffff !important;
}

.badge-secondary {
  background-color: var(--secondary-gold) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   LOGIN PAGE OVERRIDES (OMOTENASHI WELCOME ENTRANCE)
   ========================================================================== */
body:has(.login-page),
.login-body-wrapper {
  background:
    radial-gradient(at 0% 0%, rgba(238, 29, 35, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(238, 29, 35, 0.03) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(238, 29, 35, 0.02) 0px, transparent 70%),
    #fafafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

.login-page {
  width: 400px !important;
  padding: 0 !important;
  animation: premiumEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes premiumEntry {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.login-page .form {
  background-color: #ffffff !important;
  border: none !important;
  border-top: 4px solid #ee1d23 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(238, 29, 35, 0.02) !important;
  padding: 45px 35px !important;
  margin: 0 auto !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-page .form:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(238, 29, 35, 0.04) !important;
}

.login-page .form input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 3px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 14.5px !important;
  margin-bottom: 20px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-page .form input::placeholder {
  color: #94a3b8 !important;
}

.login-page .form input:focus {
  border-color: #ee1d23 !important;
  border-left-color: #ee1d23 !important;
  box-shadow: 0 0 0 4px #fff1f2, 0 4px 12px rgba(238, 29, 35, 0.03) !important;
  background-color: #ffffff !important;
}

.login-page .form .icon-eye {
  color: #94a3b8 !important;
  top: 24px !important;
  right: 16px !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
}

.login-page .form .icon-eye:hover {
  color: #ee1d23 !important;
}

.login-page .form button[type="submit"] {
  position: relative;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: linear-gradient(135deg, #ee1d23 0%, #c11217 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 15px !important;
  box-shadow: 0 4px 14px rgba(238, 29, 35, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-page .form button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-page .form button[type="submit"]:hover::after {
  left: 100%;
}

.login-page .form button[type="submit"]:hover {
  background: linear-gradient(135deg, #ff333a 0%, #ee1d23 100%) !important;
  box-shadow: 0 6px 20px rgba(238, 29, 35, 0.35) !important;
  transform: translateY(-1.5px) !important;
}

.login-page a.forget-link,
.login-page a.back-to-login {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: 24px !important;
  text-decoration: none !important;
  display: block !important;
}

.login-page a.forget-link:hover {
  color: #ee1d23 !important;
  transform: translateX(4px);
}

.login-page a.back-to-login:hover {
  color: #ee1d23 !important;
  transform: translateX(-4px);
}

.login-logo {
  /* max-width: 140px !important; */
  margin-bottom: 10px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: logoEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logoEntrance {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.login-logo:hover {
  transform: scale(1.05);
}

/* Cookie Consent Box */
#cookie-consent {
  background-color: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  color: var(--text-charcoal) !important;
  border-radius: 12px !important;
}

#cookie-consent .bg-white {
  background-color: #ffffff !important;
  color: var(--text-charcoal) !important;
}

#cookie-consent h2 {
  color: var(--secondary-gold) !important;
  font-weight: 700 !important;
}

#cookie-consent p {
  color: var(--text-charcoal) !important;
  font-size: 14px !important;
}

#cookie-consent button {
  background-color: var(--primary-red) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(238, 29, 35, 0.2) !important;
  transition: all 0.2s ease !important;
}

#cookie-consent button:hover {
  background-color: var(--primary-red-hover) !important;
  box-shadow: 0 6px 15px rgba(238, 29, 35, 0.3) !important;
}

/* ==========================================================================
   TOPBAR NAVIGATION ELEMENTS (OMOTENASHI ELEGANT HEADER)
   ========================================================================== */
.navbar-nav.topbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.navbar-nav.topbar-nav .nav-item {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.navbar-header .container-fluid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}


/* Language Dropdown Selectbox styling (native fallback) */
.navbar-nav.topbar-nav select.form-control {
  height: 36px !important;
  width: 130px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-charcoal) !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23957100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav select.form-control {
  background-color: var(--dark-bg) !important;
  border-color: rgba(235, 221, 172, 0.25) !important;
  color: var(--dark-text) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C59B27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.navbar-nav.topbar-nav select.form-control:hover,
.navbar-nav.topbar-nav select.form-control:focus {
  border-color: var(--primary-red) !important;
  box-shadow: 0 2px 8px rgba(238, 29, 35, 0.05) !important;
}

/* Select2 Container Overrides for Topbar */
.navbar-nav.topbar-nav .select2-container {
  width: 130px !important;
  margin: 0 !important;
}

.navbar-nav.topbar-nav .select2-container .select2-selection--single {
  height: 36px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .select2-container .select2-selection--single {
  background-color: var(--dark-bg) !important;
  border-color: rgba(235, 221, 172, 0.25) !important;
}

.navbar-nav.topbar-nav .select2-container .select2-selection--single:hover {
  border-color: var(--primary-red) !important;
  box-shadow: 0 2px 8px rgba(238, 29, 35, 0.05) !important;
}

.navbar-nav.topbar-nav .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--text-charcoal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: 34px !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--dark-text) !important;
}

.navbar-nav.topbar-nav .select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 12px !important;
}

.navbar-nav.topbar-nav .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--secondary-gold) transparent transparent transparent !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: #C59B27 transparent transparent transparent !important;
}

/* Theme Switcher Selectgroup Overrides */
.navbar-nav.topbar-nav .selectgroup {
  display: flex !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  padding: 3px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  gap: 2px !important;
  margin: 0 !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .selectgroup {
  background-color: rgba(235, 221, 172, 0.05) !important;
  border-color: rgba(235, 221, 172, 0.15) !important;
}

.navbar-nav.topbar-nav .selectgroup-item {
  margin: 0 !important;
}

.navbar-nav.topbar-nav .selectgroup-button {
  background-color: transparent !important;
  border: none !important;
  color: var(--text-charcoal) !important;
  opacity: 0.6 !important;
  border-radius: 16px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .selectgroup-button {
  color: var(--dark-text) !important;
}

.navbar-nav.topbar-nav .selectgroup-input:checked + .selectgroup-button {
  background-color: var(--primary-red) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 3px 8px rgba(238, 29, 35, 0.25) !important;
}

.navbar-nav.topbar-nav .selectgroup-button i {
  font-size: 13px !important;
  margin: 0 !important;
}

.navbar-nav.topbar-nav .selectgroup-button:hover {
  opacity: 0.9 !important;
  color: var(--primary-red) !important;
}

.navbar-nav.topbar-nav .selectgroup-input:checked + .selectgroup-button:hover {
  color: #ffffff !important;
}

/* Profile / Avatar Overrides */
.navbar-nav.topbar-nav .profile-pic {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.navbar-nav.topbar-nav .avatar-sm {
  width: 36px !important;
  height: 36px !important;
  position: relative !important;
}

.navbar-nav.topbar-nav .avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 2px solid rgba(0, 0, 0, 0.25) !important;
  padding: 2px !important;
  background-color: #ffffff !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .avatar-img {
  border-color: rgba(235, 221, 172, 0.35) !important;
  background-color: var(--dark-bg) !important;
}

.navbar-nav.topbar-nav .profile-pic:hover .avatar-img {
  border-color: var(--primary-red) !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(238, 29, 35, 0.15) !important;
}

/* User Dropdown Menu Overrides */
.navbar-nav.topbar-nav .dropdown-menu.dropdown-user {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
  min-width: 240px !important;
  transform-origin: top right !important;
  margin-top: 10px !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-menu.dropdown-user {
  background-color: var(--dark-card) !important;
  border-color: rgba(235, 221, 172, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.navbar-nav.topbar-nav .dropdown-user .user-box {
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.navbar-nav.topbar-nav .dropdown-user .user-box .avatar-lg {
  width: 48px !important;
  height: 48px !important;
}

.navbar-nav.topbar-nav .dropdown-user .user-box .avatar-lg .avatar-img {
  width: 100% !important;
  height: 100% !important;
  padding: 1px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-user .user-box .avatar-lg .avatar-img {
  border-color: rgba(235, 221, 172, 0.25) !important;
}

.navbar-nav.topbar-nav .dropdown-user .u-text {
  padding: 0 !important;
}

.navbar-nav.topbar-nav .dropdown-user .u-text h4 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  margin: 0 0 2px 0 !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-user .u-text h4 {
  color: var(--dark-text) !important;
}

.navbar-nav.topbar-nav .dropdown-user .u-text p.text-muted {
  font-size: 12px !important;
  color: #8E8A83 !important;
  margin: 0 !important;
}

.navbar-nav.topbar-nav .dropdown-user .dropdown-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin: 6px 0 !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-user .dropdown-divider {
  border-top: 1px solid rgba(235, 221, 172, 0.1) !important;
}

.navbar-nav.topbar-nav .dropdown-user .dropdown-item {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-charcoal) !important;
  padding: 10px 20px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background-color: transparent !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-user .dropdown-item {
  color: var(--dark-text) !important;
}

.navbar-nav.topbar-nav .dropdown-user .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--primary-red) !important;
  padding-left: 24px !important;
}

body[data-background-color="dark"] .navbar-nav.topbar-nav .dropdown-user .dropdown-item:hover {
  background-color: rgba(235, 221, 172, 0.06) !important;
  color: var(--primary-red) !important;
}

/* ==========================================================================
   MULTILINGUAL VERSION ACCORDIONS (OMOTENASHI GRID TABS)
   ========================================================================== */
.version {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-background-color="dark"] .version {
  border-color: rgba(235, 221, 172, 0.12) !important;
  background-color: var(--dark-card) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.version:hover {
  border-color: rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

body[data-background-color="dark"] .version:hover {
  border-color: rgba(235, 221, 172, 0.22) !important;
}

.version-header {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.version-header button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.03) !important; /* Soft collapsed background */
  color: var(--text-charcoal) !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-background-color="dark"] .version-header button {
  background-color: rgba(235, 221, 172, 0.03) !important;
  color: var(--dark-text) !important;
}

/* Expanded state button styling (Logo Red highlight) */
.version-header button[aria-expanded="true"],
.version-header button[aria-expanded="true"]:hover {
  background-color: var(--primary-red) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(238, 29, 35, 0.2) !important;
}

/* Collapsed hover state styling */
.version-header button[aria-expanded="false"]:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--primary-red) !important;
}

body[data-background-color="dark"] .version-header button[aria-expanded="false"]:hover {
  background-color: rgba(235, 221, 172, 0.06) !important;
  color: var(--primary-red) !important;
}

/* Add custom accordion caret indicator (drawn natively with CSS borders for perfect rendering) */
.version-header button::after {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  transform: rotate(45deg) !important; /* Points down */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0.7 !important;
}

.version-header button[aria-expanded="true"]::after {
  transform: rotate(-135deg) !important; /* Points up */
  opacity: 1 !important;
}


.version-body {
  padding: 24px !important;
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body[data-background-color="dark"] .version-body {
  background-color: var(--dark-card) !important;
  border-top-color: rgba(235, 221, 172, 0.1) !important;
}

.version-body .list-group-item {
  background-color: transparent !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-charcoal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body[data-background-color="dark"] .version-body .list-group-item {
  border-color: rgba(235, 221, 172, 0.08) !important;
  color: var(--dark-text) !important;
}
.card.card-stats.card-warning.card-round:hover .icon-big.text-center i, .card.card-stats.card-info.card-round:hover .icon-big.text-center i {
      color: #fff !important;
}
.icon-big.text-center i {
      color: var(--primary-red) !important;
}
/* ==========================================================================
   DASHBOARD STATS CARDS (AUTHENTIC JAPANESE ZEN / WABI-SABI)
   ========================================================================== */
.dashboard-items .card.card-stats {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(149, 113, 0, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
  position: relative !important;
  border-left: 5px solid !important;
  overflow: hidden !important;
}

/* Card Body Layout */
.dashboard-items .card.card-stats .card-body {
  padding: 24px 24px !important;
  z-index: 2 !important;
  position: relative !important;
}

body[data-background-color="dark"] .dashboard-items .card.card-stats {
  background-color: var(--dark-card) !important;
  border-color: rgba(235, 221, 172, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
}

/* Shoji Left-Border Colors */
.dashboard-items .card.card-stats.card-success { border-left-color: #957100 !important; } /* Kin (Gold) */
.dashboard-items .card.card-stats.card-warning { border-left-color: #EE1D23 !important; } /* Aka (Red) */
.dashboard-items .card.card-stats.card-info { border-left-color: #109b77 !important; } /* Kuro (Charcoal) */
.dashboard-items .card.card-stats.card-secondary { border-left-color: #A3967C !important; } /* Suna (Sand Beige) */

/* Modern Floating & Colored Glow Shadow Hover Effect */
.dashboard-items .card.card-stats:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(149, 113, 0, 0.22) !important;
}

.dashboard-items .card.card-stats.card-success:hover {
  box-shadow: 0 20px 40px -15px rgba(149, 113, 0, 0.18), 0 4px 12px -4px rgba(149, 113, 0, 0.08) !important;
}
.dashboard-items .card.card-stats.card-warning:hover {
  box-shadow: 0 20px 40px -15px rgba(238, 29, 35, 0.15), 0 4px 12px -4px rgba(238, 29, 35, 0.06) !important;
}
.dashboard-items .card.card-stats.card-info:hover {
  box-shadow: 0 20px 40px -15px rgba(16, 155, 119, 0.15), 0 4px 12px -4px rgba(16, 155, 119, 0.06) !important;
}
.dashboard-items .card.card-stats.card-secondary:hover {
  box-shadow: 0 20px 40px -15px rgba(163, 150, 124, 0.18), 0 4px 12px -4px rgba(163, 150, 124, 0.08) !important;
}

body[data-background-color="dark"] .dashboard-items .card.card-stats:hover {
  border-color: rgba(235, 221, 172, 0.25) !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-stats.card-success:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(197, 155, 39, 0.2) !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-stats.card-warning:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(238, 29, 35, 0.2) !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-stats.card-info:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(16, 155, 119, 0.2) !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-stats.card-secondary:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(163, 150, 124, 0.2) !important;
}

/* Luxurious Floating Glowing Icon Design */
.dashboard-items .card-stats .icon-big {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  margin: 0 !important;
  border: none !important;
}

/* Specific Stat Icon Colors */
.dashboard-items .card.card-success .icon-big {
  background: rgba(149, 113, 0, 0.08) !important;
  color: #957100 !important;
}
.dashboard-items .card.card-warning .icon-big {
  background: rgba(238, 29, 35, 0.06) !important;
  color: #EE1D23 !important;
}
.dashboard-items .card.card-info .icon-big {
  background: rgba(16, 155, 119, 0.08) !important;
  color: #109b77 !important;
}
.dashboard-items .card.card-secondary .icon-big {
  background: rgba(163, 150, 124, 0.1) !important;
  color: #A3967C !important;
}

body[data-background-color="dark"] .dashboard-items .card.card-success .icon-big {
  background: rgba(197, 155, 39, 0.15) !important;
  color: #c59b27 !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-warning .icon-big {
  background: rgba(238, 29, 35, 0.15) !important;
  color: #ff4d4d !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-info .icon-big {
  background: rgba(46, 204, 113, 0.15) !important;
  color: #2ecc71 !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-secondary .icon-big {
  background: rgba(163, 150, 124, 0.18) !important;
  color: #A3967C !important;
}

/* Elegant Scale Up & Slight Rotation on Hover */
.dashboard-items .card.card-stats:hover .icon-big {
  transform: scale(1.12) rotate(8deg) !important;
}

.dashboard-items .card.card-success:hover .icon-big {
  background: #957100 !important;
  color: #ffffff !important;
}
.dashboard-items .card.card-warning:hover .icon-big {
  background: #EE1D23 !important;
  color: #ffffff !important;
}
.dashboard-items .card.card-info:hover .icon-big {
  background: #109b77 !important;
  color: #ffffff !important;
}
.dashboard-items .card.card-secondary:hover .icon-big {
  background: #A3967C !important;
  color: #ffffff !important;
}

body[data-background-color="dark"] .dashboard-items .card.card-success:hover .icon-big {
  background: #c59b27 !important;
  color: #201c1a !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-warning:hover .icon-big {
  background: #ff4d4d !important;
  color: #201c1a !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-info:hover .icon-big {
  background: #2ecc71 !important;
  color: #201c1a !important;
}
body[data-background-color="dark"] .dashboard-items .card.card-secondary:hover .icon-big {
  background: #A3967C !important;
  color: #201c1a !important;
}

/* Card Layout Overrides (Packed Flexbox) */
.dashboard-items .card-stats .card-body .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.dashboard-items .card-stats .col-4,
.dashboard-items .card-stats .col-5 {
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  padding-right: 20px !important;
}

.dashboard-items .card-stats .col-8.col-stats,
.dashboard-items .card-stats .col-7.col-stats {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Zen Typography Styling */
.dashboard-items .card-stats .numbers {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dashboard-items .card-stats .card-category {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: #8E8A83 !important;
  margin-bottom: 6px !important;
}

body[data-background-color="dark"] .dashboard-items .card-stats .card-category {
  color: rgba(243, 236, 224, 0.5) !important;
}

.dashboard-items .card-stats .card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

body[data-background-color="dark"] .dashboard-items .card-stats .card-title {
  color: var(--dark-text) !important;
}

/* Japanese Cherry Blossom (Sakura) Branch Watermark */
.dashboard-items .card.card-stats::before {
  content: '' !important;
  position: absolute !important;
  right: -30px !important;
  bottom: -30px !important;
  width: 180px !important;
  height: 180px !important;
  background-image: url("../img/lush_sakura_branch.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.22 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
  mix-blend-mode: multiply !important;
}

body[data-background-color="dark"] .dashboard-items .card.card-stats::before {
  opacity: 0.18 !important;
  mix-blend-mode: screen !important;
  filter: grayscale(1) invert(1) sepia(1) hue-rotate(300deg) saturate(4) !important;
}

.dashboard-items .card.card-stats:hover::before {
  transform: scale(1.12) translate(-8px, -8px) !important;
  opacity: 0.38 !important;
}


/* ==========================================================================
   PREMIUM AESTHETICS & MICRO-ANIMATIONS (WOW FACTOR)
   ========================================================================== */

/* 1. Dynamic Cards with Smooth Lift & Glow */
.card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
}

body[data-background-color="dark"] .card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 2. Stunning Info Buttons (Takashimaya Red Gradient) */
.btn-info {
  background: linear-gradient(135deg, #FF3B30 0%, #D6151B 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(238, 29, 35, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-info:hover, .btn-info:focus {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(238, 29, 35, 0.4) !important;
  background: linear-gradient(135deg, #D6151B 0%, #B80F15 100%) !important;
}

/* 3. Stunning Primary/Secondary Buttons (Gold Gradient) */
.btn-primary, .btn-secondary {
  background: linear-gradient(135deg, #C59B27 0%, #957100 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(149, 113, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover, .btn-secondary:hover, .btn-primary:focus, .btn-secondary:focus {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(149, 113, 0, 0.35) !important;
  background: linear-gradient(135deg, #957100 0%, #7b5d00 100%) !important;
}

/* 4. Glassmorphism for Navbar (Sleek Header) */
.navbar-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}

body[data-background-color="dark"] .navbar-header {
  background: rgba(32, 28, 26, 0.85) !important;
}

/* 5. Inputs & Form Controls Polish */
.form-control {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.form-control:focus {
  border-color: var(--primary-red) !important;
  box-shadow: 0 0 0 4px rgba(238, 29, 35, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* 6. Sidebar Menu Items Hover Effect */
.sidebar .nav-item a {
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

.sidebar .nav-item a:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  transform: translateX(4px) !important;
}

body[data-background-color="dark"] .sidebar .nav-item a:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Fix checkbox checkmark icon rendering by using the correct loaded Font Awesome family */
.form-check [type="checkbox"] + .form-check-sign:after {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   UNIFIED SELECT DROPDOWN ARROW STYLING (FONT AWESOME 5 PRO \f078)
   ========================================================================== */

/* 1. Select2 single dropdown styling */
.select2-container .select2-selection--single {
  position: relative !important;
  padding-right: 35px !important;
}

.select2-container .select2-selection__arrow {
  display: none !important;
}
span.flatpickr-day.selected {
  color: #fff !important;
}
.select2-container .select2-selection--single:after {
  content: "\f078" !important;
  display: inline-block !important;
  opacity: 0.5 !important;
  font-family: 'Font Awesome 5 Pro' !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 15px !important;
  pointer-events: none !important;
  transition: transform 0.2s ease !important;
}
.col-sm-6.col-md-4.col-lg-3 .card.card-stats.card-warning.card-round:hover .icon-big.text-center i, .card.card-stats.card-info.card-round:hover .icon-big.text-center i {
    color: var(--primary-red) !important;
}
.row {
    margin-right: -7.5px !important;
    margin-left: -7.5px !important;
}
.row>* {
    padding-right: 7.5px !important;
    padding-left: 7.5px !important;
}
/* Rotate icon when select2 is open */
.select2-container--open .select2-selection--single:after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* 2. Native Select elements styling (select, .form-control, .form-select) */
select,
select.form-control,
select.form-select,
.select-wrapper select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 12px !important;
  padding-right: 35px !important;
}

/* Native select arrow for light theme backgrounds (darker chevron) */
body:not([data-background-color="dark"]) select,
body:not([data-background-color="dark"]) select.form-control,
body:not([data-background-color="dark"]) select.form-select,
body:not([data-background-color="dark"]) .select-wrapper select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%232d2a26' opacity='0.5'%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") !important;
}

/* Native select arrow for dark theme backgrounds (lighter chevron) */
body[data-background-color="dark"] select,
body[data-background-color="dark"] select.form-control,
body[data-background-color="dark"] select.form-select,
body[data-background-color="dark"] .select-wrapper select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff' opacity='0.5'%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   PREMIUM UX POLISH & LUXURY COSMETIC TOUCHES ("SANG XỊN MỊN")
   ========================================================================== */

/* 1. Elegant Card Enhancements */
body:not([data-background-color="dark"]) .card {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), 0 1px 8px rgba(0, 0, 0, 0.01) !important;
  background-color: #ffffff !important;
  /* transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; */
}

body[data-background-color="dark"] .card {
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--dark-card) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Sleek Button Hover Micro-interactions */
.btn {
  border-radius: 8px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; */
}

.btn:hover {
  transform: translateY(-2px) !important;
  /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;  */
}
.logo-header .nav-toggle {
  top: 18px !important;
}
.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
.mr-2 {
  margin-right: 0.75rem;
}
/* Primary Button Elegant Gradient (Bronze Gold) */
body:not([data-background-color="dark"]) .btn-primary {
  background: linear-gradient(135deg, #b0881c, #957100) !important;
  border: none !important;
  color: #ffffff !important;
}

body:not([data-background-color="dark"]) .btn-primary:hover {
  background: linear-gradient(135deg, #957100, #7b5d00) !important;
  box-shadow: 0 6px 20px rgba(149, 113, 0, 0.3) !important;
}

/* Success Button (Green Accent) */
.btn-success {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  border: none !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #27ae60, #219653) !important;
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3) !important;
}

/* Danger Button (Takashimaya Crimson Red Accent) */
.btn-danger {
  background: linear-gradient(135deg, #ff4d4d, #ee1d23) !important;
  border: none !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #ee1d23, #c81015) !important;
  box-shadow: 0 6px 20px rgba(238, 29, 35, 0.3) !important;
}

/* 3. Modern Glassmorphism Input Focus State */
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 0 0 3px rgba(149, 113, 0, 0.12) !important;
  outline: none !important;
}

body[data-background-color="dark"] .form-control:focus,
body[data-background-color="dark"] .form-select:focus,
body[data-background-color="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
body[data-background-color="dark"] .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #c59b27 !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.12) !important;
  outline: none !important;
}

/* 4. Luxury Soft Badge Overrides */
.badge {
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  padding: 6px 12px !important;
  border-radius: 20px !important;
}

.badge-primary {
  background-color: rgba(149, 113, 0, 0.1) !important;
  color: var(--secondary-gold) !important;
  border: 1px solid rgba(149, 113, 0, 0.15) !important;
}

.badge-success {
  background-color: rgba(39, 174, 96, 0.1) !important;
  color: #27ae60 !important;
  border: 1px solid rgba(39, 174, 96, 0.15) !important;
}

.badge-danger {
  background-color: rgba(238, 29, 35, 0.08) !important;
  color: var(--primary-red) !important;
  border: 1px solid rgba(238, 29, 35, 0.12) !important;
}

.badge-warning {
  background-color: rgba(243, 156, 18, 0.1) !important;
  color: #d35400 !important;
  border: 1px solid rgba(243, 156, 18, 0.15) !important;
}

/* Dark mode soft badges */
body[data-background-color="dark"] .badge-primary {
  background-color: rgba(197, 155, 39, 0.15) !important;
  color: #c59b27 !important;
  border-color: rgba(197, 155, 39, 0.25) !important;
}

body[data-background-color="dark"] .badge-success {
  background-color: rgba(46, 204, 113, 0.15) !important;
  color: #2ecc71 !important;
  border-color: rgba(46, 204, 113, 0.25) !important;
}

body[data-background-color="dark"] .badge-danger {
  background-color: rgba(238, 29, 35, 0.15) !important;
  color: #ff4d4d !important;
  border-color: rgba(238, 29, 35, 0.25) !important;
}

/* 5. Minimalist Elegant Table Tweaks */
.table th {
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}

.table td {
  font-size: 13px !important;
  vertical-align: middle !important;
}

body:not([data-background-color="dark"]) .table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.015) !important;
  transition: background-color 0.2s ease !important;
}

body[data-background-color="dark"] .table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.015) !important;
  transition: background-color 0.2s ease !important;
}

/* ==========================================
   6. Global Bootstrap Modal Stacking Context Fix
   ========================================== */
body.modal-open .modal-backdrop {
  display: none !important;
}

.modal.show {
  background: rgba(20, 15, 12, 0.65) !important; /* Premium warm dark overlay matching Zen style, lag-free */
  transition: background-color 0.3s ease;
  z-index: 1060 !important;
}

/* Fix: Stacking Context when Modal is open (preventing overlap by Header, Sidebar, and Footer) */
body.modal-open .main-panel {
  z-index: 1040 !important;
}

body.modal-open .main-header {
  z-index: 1000 !important;
}

body.modal-open .sidebar {
  z-index: 999 !important;
}

body.modal-open .main-panel .content {
  position: relative !important;
  z-index: 1041 !important;
}

body.modal-open .footer {
  z-index: 999 !important;
}

/* ==========================================================================
   7. Global Elegant Japanese (Omotenashi) Flatpickr Datepicker Theme
   ========================================================================== */

/* Date Range selector input (#daterange-bookings) - Left-aligned icon to prevent overlapping with clear button */
#daterange-bookings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23957100'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px 50% !important;
  background-size: 14px !important;
  padding-left: 36px !important;
  padding-right: 32px !important;
  cursor: pointer;
  background-color: #FFFFFF !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-background-color="dark"] #daterange-bookings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23C59B27'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important;
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
.navbar.navbar-header.navbar-expand-lg #notifDropdown span.notif-bell-count, nav.navbar.navbar-header.navbar-expand-lg ul.dropdown-menu li .notif-header-title span.notif-badge-count {
  color: #fff !important;
}

#daterange-bookings:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23EE1D23'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important;
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(149, 113, 0, 0.15) !important;
}

/* Clear button alignment */
#clear-daterange {
  position: absolute;
  right: 12px;
  top: 44%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 18px;
  color: #8E8A83;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

#clear-daterange:hover {
  color: var(--primary-red);
  transform: translateY(-50%) scale(1.15);
}

body[data-background-color="dark"] #clear-daterange {
  color: #AFAAA2;
}

body[data-background-color="dark"] #clear-daterange:hover {
  color: var(--primary-red);
}

/* Add calendar icon to other inputs via background image (placed on the LEFT) */
input.datepicker,
input.visit-datepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23957100'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px 50% !important;
  background-size: 14px !important;
  padding-left: 36px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}
span.flatpickr-day.selected {
  color: #fff !important;
}
body[data-background-color="dark"] input.datepicker,
body[data-background-color="dark"] input.visit-datepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23C59B27'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important;
}

input.datepicker:focus,
input.visit-datepicker:focus {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23EE1D23'%3E%3Cpath d='M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z'/%3E%3C/svg%3E") !important; */
  border-color: var(--secondary-gold) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(149, 113, 0, 0.15) !important;
}

/* Base Calendar container */
.flatpickr-calendar {
  background: #FFFFFF !important;
  border: 1px solid rgba(149, 113, 0, 0.2) !important;
  box-shadow: 0 12px 36px rgba(45, 42, 38, 0.08) !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 4px !important;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Smooth pop-down open animation */
.flatpickr-calendar.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  z-index: 99999 !important;
}
body:not([data-background-color="dark"]) .col-sm-6.col-md-4.col-lg-3 .card.card-stats.card-info.card-round {
      margin-bottom: 15px !important;
}
/* Dark Mode support */
body[data-background-color="dark"] .flatpickr-calendar {
  background: var(--dark-card) !important;
  border: 1px solid rgba(235, 221, 172, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Month and Year navigation bar */
.flatpickr-months {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(250, 248, 243, 0.85) !important;
  border-bottom: 1px solid rgba(149, 113, 0, 0.1) !important;
  padding: 10px 12px !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  position: relative;
}
body:not([data-background-color="dark"]) .csat-score-card.csat-score-good .stars-row span.on {
  color: #f9ff00 !important;
}
body[data-background-color="dark"] .flatpickr-months {
  background: rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid rgba(235, 221, 172, 0.1) !important;
}

.flatpickr-months .flatpickr-month {
  flex: 1 !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.flatpickr-current-month {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  font-weight: 600 !important;
  color: var(--text-charcoal) !important;
  font-size: 14px !important;
}

body[data-background-color="dark"] .flatpickr-current-month {
  color: var(--dark-text) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 2px 6px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
  height: auto !important;
  line-height: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  color: var(--primary-red) !important;
  background: rgba(149, 113, 0, 0.05) !important;
}

body[data-background-color="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  color: var(--primary-red) !important;
  background: rgba(235, 221, 172, 0.08) !important;
}

.flatpickr-current-month input.numInput.cur-year {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  height: auto !important;
  line-height: inherit !important;
  width: 50px !important;
  transition: all 0.2s ease;
}

.flatpickr-current-month input.numInput.cur-year:hover,
.flatpickr-current-month input.numInput.cur-year:focus {
  background: rgba(149, 113, 0, 0.05) !important;
}

body[data-background-color="dark"] .flatpickr-current-month input.numInput.cur-year {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .flatpickr-current-month input.numInput.cur-year:hover,
body[data-background-color="dark"] .flatpickr-current-month input.numInput.cur-year:focus {
  background: rgba(235, 221, 172, 0.08) !important;
}

/* Hide year dropdown arrow spinners */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

/* Previous/Next Month control buttons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--secondary-gold) !important;
  fill: var(--secondary-gold) !important;
  cursor: pointer;
  z-index: 3 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--primary-red) !important;
  fill: var(--primary-red) !important;
  background: rgba(149, 113, 0, 0.08) !important;
}

body[data-background-color="dark"] .flatpickr-months .flatpickr-prev-month:hover,
body[data-background-color="dark"] .flatpickr-months .flatpickr-next-month:hover {
  background: rgba(235, 221, 172, 0.12) !important;
}

.flatpickr-months .flatpickr-prev-month:hover {
  transform: translateX(-2px) scale(1.05) !important;
}

.flatpickr-months .flatpickr-next-month:hover {
  transform: translateX(2px) scale(1.05) !important;
}

/* Weekdays columns */
.flatpickr-weekdays {
  padding: 8px 0 2px 0 !important;
}

span.flatpickr-weekday {
  color: #8E8A83 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-background-color="dark"] span.flatpickr-weekday {
  color: #AFAAA2 !important;
}

/* Day grid cell styling (Forced equal dimensions using flex for perfect circles) */
.flatpickr-day {
  border-radius: 50% !important;
  border: 1px solid transparent !important;
  color: var(--text-charcoal) !important;
  font-weight: 500;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

  /* Force perfect circular dimensions */
  width: 38px !important;
  height: 38px !important;
  line-height: 36px !important;
  max-width: 38px !important;
  flex-basis: 38px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-background-color="dark"] .flatpickr-day {
  color: var(--dark-text) !important;
}

/* Hover effects for days (charcoal text on soft gold tint for high contrast readability) */
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(149, 113, 0, 0.08) !important;
  border-color: transparent !important;
  color: var(--text-charcoal) !important;
}

body[data-background-color="dark"] .flatpickr-day:hover,
body[data-background-color="dark"] .flatpickr-day:focus {
  background: rgba(235, 221, 172, 0.1) !important;
  border-color: transparent !important;
  color: var(--dark-text) !important;
}

/* Non-current month days & disabled days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #D1C7BD !important;
  background: transparent !important;
  border-color: transparent !important;
  opacity: 0.45;
}

body[data-background-color="dark"] .flatpickr-day.prevMonthDay,
body[data-background-color="dark"] .flatpickr-day.nextMonthDay,
body[data-background-color="dark"] .flatpickr-day.flatpickr-disabled {
  color: #7A7269 !important;
}

/* Today (Minimalist Zen circle / Enso) */
.flatpickr-day.today {
  border: 1.5px solid var(--secondary-gold) !important;
  color: var(--secondary-gold) !important;
  background: transparent !important;
}

body[data-background-color="dark"] .flatpickr-day.today {
  border-color: #C59B27 !important;
  color: #C59B27 !important;
}

/* Today & Selected combined override to ensure solid background takes precedence */
.flatpickr-day.today.selected,
.flatpickr-day.today.startRange,
.flatpickr-day.today.endRange {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Selection and range styling (Hinomaru Red theme) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  transform: scale(1.05);
  z-index: 2;
}

/* Clear box shadow for active selections to override any default values, except the connector shadow */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  box-shadow: 0 4px 12px rgba(238, 29, 35, 0.25) !important;
}

/* Middle in-range days (soft gold ribbon style - keeping text charcoal for contrast) */
.flatpickr-day.inRange {
  background: #FAF6F0 !important;
  border-color: transparent !important;
  border-radius: 0 !important; /* Continuous linear block */
  color: var(--text-charcoal) !important;
  box-shadow: -5px 0 0 #FAF6F0, 5px 0 0 #FAF6F0 !important;
}

body[data-background-color="dark"] .flatpickr-day.inRange {
  background: #2D281E !important;
  color: var(--dark-text) !important;
  box-shadow: -5px 0 0 #2D281E, 5px 0 0 #2D281E !important;
}

.flatpickr-day.inRange:hover {
  border-radius: 50% !important;
}

/* Capsule rounded borders for Range limits & box-shadow override to hide default grey connecting shadow */
.flatpickr-day.startRange {
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 5px 0 0 #FAF6F0 !important;
}

body[data-background-color="dark"] .flatpickr-day.startRange {
  box-shadow: 5px 0 0 #2D281E !important;
}

.flatpickr-day.endRange {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: -5px 0 0 #FAF6F0 !important;
}

body[data-background-color="dark"] .flatpickr-day.endRange {
  box-shadow: -5px 0 0 #2D281E !important;
}

.flatpickr-day.startRange.endRange {
  border-radius: 50% !important; /* Normal circle if only 1 day selected in range mode */
  box-shadow: none !important;
}

/* Clean micro-animation when selected */
.flatpickr-day.selected {
  animation: selectDayPop 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

@keyframes selectDayPop {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1.05);
  }
}

/* ==========================================================================
   8. Global Elegant Japanese (Omotenashi) Bootstrap Datepicker Theme
   ========================================================================== */

/* Datepicker Dropdown Container */
.datepicker.datepicker-dropdown {
  padding: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(149, 113, 0, 0.2) !important;
  box-shadow: 0 12px 36px rgba(45, 42, 38, 0.08) !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  z-index: 99999 !important;
  margin-top: 4px !important;
}

body[data-background-color="dark"] .datepicker.datepicker-dropdown {
  background: var(--dark-card) !important;
  border: 1px solid rgba(235, 221, 172, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Arrow position cleanup */
.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after,
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after {
  display: none !important; /* Hide default triangles as they can look misaligned */
}

/* Header / Navigation Row */
.datepicker table {
  border-collapse: separate !important;
  border-spacing: 2px !important;
  width: 100% !important;
  table-layout: fixed !important;
}

.datepicker table tr th {
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  text-align: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

body[data-background-color="dark"] .datepicker table tr th {
  color: var(--dark-text) !important;
}

/* Month navigation button styling */
.datepicker table tr th.prev,
.datepicker table tr th.next {
  color: var(--secondary-gold) !important;
  font-size: 15px !important;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover {
  color: var(--primary-red) !important;
  background: rgba(149, 113, 0, 0.08) !important;
}

body[data-background-color="dark"] .datepicker table tr th.prev:hover,
body[data-background-color="dark"] .datepicker table tr th.next:hover {
  background: rgba(235, 221, 172, 0.12) !important;
}

/* Month title selector button */
.datepicker table tr th.datepicker-switch {
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  cursor: pointer !important;
  transition: color 0.2s ease;
}

.datepicker table tr th.datepicker-switch:hover {
  color: var(--primary-red) !important;
  background: transparent !important;
}

body[data-background-color="dark"] .datepicker table tr th.datepicker-switch {
  color: var(--dark-text) !important;
}

body[data-background-color="dark"] .datepicker table tr th.datepicker-switch:hover {
  color: var(--primary-red) !important;
}

/* Weekday Row styling */
.datepicker table tr th.dow {
  color: #8E8A83 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(149, 113, 0, 0.08) !important;
  padding-bottom: 6px !important;
}

body[data-background-color="dark"] .datepicker table tr th.dow {
  color: #AFAAA2 !important;
  border-bottom-color: rgba(235, 221, 172, 0.08) !important;
}

/* Day grid styling (Strict equal dimensions for perfect circles) */
.datepicker table tr td.day {
  border-radius: 50% !important;
  color: var(--text-charcoal) !important;
  font-weight: 500;
  font-size: 13px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  max-width: 36px !important;
  min-width: 36px !important;
  text-align: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body[data-background-color="dark"] .datepicker table tr td.day {
  color: var(--dark-text) !important;
}

/* Hover effect on day cells (charcoal text on soft gold tint for contrast) */
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: rgba(149, 113, 0, 0.08) !important;
  border-color: transparent !important;
  color: var(--text-charcoal) !important;
  transform: scale(1.08) !important;
}

body[data-background-color="dark"] .datepicker table tr td.day:hover,
body[data-background-color="dark"] .datepicker table tr td.day.focused {
  background: rgba(235, 221, 172, 0.1) !important;
  border-color: transparent !important;
  color: var(--dark-text) !important;
}

/* Old and new days (outside current month range) */
.datepicker table tr td.day.old,
.datepicker table tr td.day.new,
.datepicker table tr td.day.disabled,
.datepicker table tr td.day.disabled:hover {
  color: #D1C7BD !important;
  opacity: 0.45;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

body[data-background-color="dark"] .datepicker table tr td.day.old,
body[data-background-color="dark"] .datepicker table tr td.day.new,
body[data-background-color="dark"] .datepicker table tr td.day.disabled {
  color: #7A7269 !important;
}

/* Today (Zen Enso circle style) */
.datepicker table tr td.day.today {
  border: 1.5px solid var(--secondary-gold) !important;
  color: var(--secondary-gold) !important;
  background: transparent !important;
}

body[data-background-color="dark"] .datepicker table tr td.day.today {
  border-color: #C59B27 !important;
  color: #C59B27 !important;
}

/* Today & Selected combined override to ensure solid background takes precedence */
.datepicker table tr td.day.today.active,
.datepicker table tr td.day.today.active:hover {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Selected Date cell */
.datepicker table tr td.day.active,
.datepicker table tr td.day.active:hover,
.datepicker table tr td.day.active.focused {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(238, 29, 35, 0.25) !important;
}

/* Support range selection highlights (if range bootstrap datepicker is used) */
.datepicker table tr td.day.range,
.datepicker table tr td.day.range:hover {
  background: rgba(149, 113, 0, 0.06) !important;
  border-radius: 0 !important;
  color: var(--text-charcoal) !important;
}

body[data-background-color="dark"] .datepicker table tr td.day.range,
body[data-background-color="dark"] .datepicker table tr td.day.range:hover {
  background: rgba(235, 221, 172, 0.08) !important;
  color: var(--dark-text) !important;
}


/* ==========================================================================
   9. Global Elegant Japanese (Omotenashi) jQuery UI Datepicker Theme
   ========================================================================== */
#ui-datepicker-div.ui-datepicker {
  padding: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(149, 113, 0, 0.2) !important;
  box-shadow: 0 12px 36px rgba(45, 42, 38, 0.08) !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  z-index: 99999 !important;
  width: auto !important;
  display: none;
}

body[data-background-color="dark"] #ui-datepicker-div.ui-datepicker {
  background: var(--dark-card) !important;
  border: 1px solid rgba(235, 221, 172, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

#ui-datepicker-div .ui-datepicker-header {
  background: rgba(250, 248, 243, 0.85) !important;
  border: none !important;
  border-bottom: 1px solid rgba(149, 113, 0, 0.1) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 6px 0 !important;
  position: relative;
}

body[data-background-color="dark"] #ui-datepicker-div .ui-datepicker-header {
  background: rgba(0, 0, 0, 0.15) !important;
  border-bottom-color: rgba(235, 221, 172, 0.1) !important;
}

#ui-datepicker-div .ui-datepicker-title {
  font-weight: 700 !important;
  color: var(--text-charcoal) !important;
  text-align: center !important;
  line-height: 24px;
}

body[data-background-color="dark"] #ui-datepicker-div .ui-datepicker-title {
  color: var(--dark-text) !important;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#ui-datepicker-div .ui-datepicker-prev { left: 8px; }
#ui-datepicker-div .ui-datepicker-next { right: 8px; }

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  background: rgba(149, 113, 0, 0.08) !important;
}

#ui-datepicker-div .ui-icon {
  display: none !important; /* Hide default icons */
}

/* Custom CSS Arrow Icons for jQuery UI */
#ui-datepicker-div .ui-datepicker-prev::after {
  content: '‹';
  font-size: 20px;
  color: var(--secondary-gold);
  font-weight: bold;
}
#ui-datepicker-div .ui-datepicker-next::after {
  content: '›';
  font-size: 20px;
  color: var(--secondary-gold);
  font-weight: bold;
}

#ui-datepicker-div .ui-datepicker-prev:hover::after,
#ui-datepicker-div .ui-datepicker-next:hover::after {
  color: var(--primary-red) !important;
}

/* Weekday header row */
#ui-datepicker-div table.ui-datepicker-calendar th {
  color: #8E8A83 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none !important;
  padding: 8px 0 4px 0 !important;
}

body[data-background-color="dark"] #ui-datepicker-div table.ui-datepicker-calendar th {
  color: #AFAAA2 !important;
}

/* Day cell styling */
#ui-datepicker-div table.ui-datepicker-calendar td {
  border: none !important;
  padding: 1px !important;
}

#ui-datepicker-div table.ui-datepicker-calendar td a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-charcoal) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

body[data-background-color="dark"] #ui-datepicker-div table.ui-datepicker-calendar td a {
  color: var(--dark-text) !important;
}

#ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-hover {
  background: rgba(149, 113, 0, 0.08) !important;
  border-color: transparent !important;
  color: var(--text-charcoal) !important;
}

body[data-background-color="dark"] #ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-hover {
  background: rgba(235, 221, 172, 0.1) !important;
  border-color: transparent !important;
  color: var(--dark-text) !important;
}

/* Selected Day in jQuery UI */
#ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-active {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(238, 29, 35, 0.25) !important;
}

/* Today (Zen Enso circle style) */
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-today a {
  border: 1.5px solid var(--secondary-gold) !important;
  color: var(--secondary-gold) !important;
  background: transparent !important;
}

body[data-background-color="dark"] #ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-today a {
  border-color: #C59B27 !important;
  color: #C59B27 !important;
}

/* Today & Active combined override */
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active {
  background: var(--primary-red) !important;
  border-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}