/**
 * Altivy UI Upgrade Stylesheet
 * Modern/Bold design with Aviation Blue palette
 *
 * body.ui-modern is always applied (permanent).
 * Sidebar styles use .sidebar-wrap / .side-navbar selectors directly.
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
  /* === PRIMARY PALETTE === */
  --altivy-primary: #2563eb;
  --altivy-primary-hover: #1d4ed8;
  --altivy-primary-active: #1e40af;
  --altivy-primary-light: #dbeafe;
  --altivy-primary-rgb: 37, 99, 235;

  /* === ACCENT & SEMANTIC === */
  --altivy-accent: #0ea5e9;
  --altivy-success: #10b981;
  --altivy-warning: #f59e0b;
  --altivy-danger: #ef4444;
  --altivy-info: #0ea5e9;

  /* === NEUTRALS === */
  --altivy-gray-50: #f8fafc;
  --altivy-gray-100: #f1f5f9;
  --altivy-gray-200: #e2e8f0;
  --altivy-gray-300: #cbd5e1;
  --altivy-gray-400: #94a3b8;
  --altivy-gray-500: #64748b;
  --altivy-gray-600: #475569;
  --altivy-gray-700: #334155;
  --altivy-gray-800: #1e293b;
  --altivy-gray-900: #0f172a;

  /* === LAYOUT === */
  --altivy-navbar-bg: #0f172a;
  --altivy-sidebar-bg: #1e293b;
  --altivy-sidebar-bg-dark: #0f172a;
  --altivy-page-bg: #f1f5f9;
  --altivy-card-bg: #ffffff;

  /* === BORDERS & SHADOWS === */
  --altivy-border-radius: 0.5rem;
  --altivy-border-radius-lg: 0.75rem;
  --altivy-border-radius-xl: 1rem;
  --altivy-border-color: #e2e8f0;

  --altivy-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --altivy-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --altivy-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --altivy-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* === CURVED SIDEBAR === */
  --altivy-curve-radius: 20px;
  --altivy-curve-size: calc(2 * var(--altivy-curve-radius));
  --altivy-active-bg: var(--altivy-primary);

  /* === SUBMENU CURVES === */
  --altivy-submenu-band-width: 20px;
  --altivy-submenu-curve-radius: 8px;
  --altivy-submenu-curve-size: calc(2 * var(--altivy-submenu-curve-radius));
  --altivy-submenu-active-bg: #224693; /* solid composited blue – matches rgba(37,99,235,0.5) over sidebar bg */

  /* === TRANSITIONS === */
  --altivy-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --altivy-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* === TYPOGRAPHY === */
  --altivy-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --altivy-font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, monospace;

  /* === TYPOGRAPHY SCALE === */
  --altivy-font-size-xs: 0.75rem;   /* 12px */
  --altivy-font-size-sm: 0.875rem;  /* 14px */
  --altivy-font-size-base: 1rem;    /* 16px */
  --altivy-font-size-lg: 1.125rem;  /* 18px */

  /* === SPACING SCALE === */
  --altivy-space-1: 4px;
  --altivy-space-2: 8px;
  --altivy-space-3: 12px;
  --altivy-space-4: 16px;
  --altivy-space-5: 20px;
  --altivy-space-6: 24px;

  /* === BASE COLORS === */
  --altivy-white: #ffffff;
  --altivy-black: #000000;

  /* === TABLE VARIABLES === */
  --altivy-table-bg: #ffffff;
  --altivy-table-header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  --altivy-table-header-text: #ffffff;
  /* === SECTION HEADER (distinct from table header & buttons) === */
  --altivy-section-header-bg: linear-gradient(135deg, #475569 0%, #334155 100%);
  --altivy-table-border: var(--altivy-gray-200);
  --altivy-table-stripe-odd: #ffffff;
  --altivy-table-stripe-even: var(--altivy-gray-50);
  --altivy-table-hover: var(--altivy-primary-light);

  /* === STATUS BADGE COLORS === */
  --altivy-status-pending-bg: #fef3c7;
  --altivy-status-pending-text: #92400e;
  --altivy-status-approved-bg: #d1fae5;
  --altivy-status-approved-text: #065f46;
  --altivy-status-in-progress-bg: #dbeafe;
  --altivy-status-in-progress-text: #1e40af;
  --altivy-status-completed-bg: #ecfdf5;
  --altivy-status-completed-text: #047857;
  --altivy-status-cancelled-bg: var(--altivy-gray-100);
  --altivy-status-cancelled-text: var(--altivy-gray-600);
  --altivy-status-booked-bg: #f0f4ff;
  --altivy-status-booked-text: #3b5998;
  --altivy-status-ready-bg: #ecfdf5;
  --altivy-status-ready-text: #047857;
  --altivy-status-error-bg: #fef2f2;
  --altivy-status-error-text: #991b1b;
}

/* Dark mode: muted status colours that blend with dark background */
body.ui-modern:not(.ui-light) {
  --altivy-status-pending-bg: rgba(245, 158, 11, 0.12);
  --altivy-status-pending-text: #fcd34d;
  --altivy-status-approved-bg: rgba(16, 185, 129, 0.12);
  --altivy-status-approved-text: #6ee7b7;
  --altivy-status-in-progress-bg: rgba(59, 130, 246, 0.12);
  --altivy-status-in-progress-text: #93c5fd;
  --altivy-status-completed-bg: rgba(16, 185, 129, 0.12);
  --altivy-status-completed-text: #6ee7b7;
  --altivy-status-cancelled-bg: rgba(148, 163, 184, 0.12);
  --altivy-status-cancelled-text: #94a3b8;
  --altivy-status-booked-bg: rgba(99, 102, 241, 0.12);
  --altivy-status-booked-text: #a5b4fc;
  --altivy-status-ready-bg: rgba(16, 185, 129, 0.12);
  --altivy-status-ready-text: #6ee7b7;
  --altivy-status-error-bg: rgba(239, 68, 68, 0.12);
  --altivy-status-error-text: #fca5a5;
}


/* ============================================
   MODERN TYPOGRAPHY
   ============================================ */

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

/* Apply modern font to entire UI when toggle is on */
body.ui-modern {
  font-family: var(--altivy-font-family) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Sidebar typography */
body.ui-modern .side-navbar {
  font-family: var(--altivy-font-family) !important;
}

body.ui-modern .side-navbar li a {
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Bootstrap Icons in sidebar - consistent sizing and spacing */
body.ui-modern .side-navbar li a .bi {
  font-size: 1.1em;
  margin-right: 10px;
  width: 1.25em;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

body.ui-modern .side-navbar .collapse li a,
body.ui-modern .side-navbar .collapsing li a {
  font-weight: 400 !important;
}

/* Top navbar typography */
body.ui-modern nav.navbar {
  font-family: var(--altivy-font-family) !important;
  flex-wrap: wrap !important;
}

body.ui-modern nav.navbar .brand-text {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

body.ui-modern nav.navbar .nav-link {
  font-weight: 500 !important;
}

/* Navbar must wrap so the top row can be full-width */
nav.navbar {
  flex-wrap: wrap !important;
}

/* Top row: NOTAM centered + UI toggles on right */
.navbar-top-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 2px 0 !important;
}

.navbar-top-row .navbar-notam-bar {
  text-align: center !important;
  flex: 1 !important;
  line-height: 1.2 !important;
}

.navbar-top-row .navbar-top-toggles {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  gap: 8px !important;
}

.navbar-notam-message {
  color: #ffffff !important;
}

body.ui-modern .navbar-notam-message {
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  font-size: 1.1rem !important;
  color: var(--altivy-primary-light) !important;
}

/* Navbar time/date info */
body.ui-modern .navbar-time-info {
  margin-left: 12px !important;
}

/* Light theme: dark text for navbar info */
body.ui-modern.ui-light .navbar-time-info span {
  color: var(--altivy-gray-800) !important;
}

body.ui-modern.ui-light .navbar-notam-message {
  color: var(--altivy-primary) !important;
}


/* ============================================
   TOGGLE SWITCH COMPONENT
   Reusable toggle switch (e.g. "Today Only" on org bookings)
   ============================================ */
.ui-toggle {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  user-select: none;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ui-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ui-toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  transition: var(--altivy-transition);
  margin-right: 8px;
  flex-shrink: 0;
  flex-grow: 0;
}

.ui-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: var(--altivy-transition);
}

.ui-toggle input:checked + .ui-toggle-slider {
  background-color: var(--altivy-primary);
}

.ui-toggle input:checked + .ui-toggle-slider::before {
  transform: translateX(20px);
}

.ui-toggle-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--altivy-font-size-sm);
  font-weight: 500;
  line-height: 1 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.ui-toggle-label i,
.ui-toggle-label .bi {
  font-size: 14px;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  vertical-align: middle !important;
}

.ui-toggle input:checked ~ .ui-toggle-label {
  color: var(--altivy-primary-light);
}

/* Focus states for accessibility */
.ui-toggle input:focus-visible + .ui-toggle-slider {
  outline: 2px solid var(--altivy-primary);
  outline-offset: 2px;
}

/* Light theme overrides for toggle component */
body.ui-light .ui-toggle-slider {
  background-color: var(--altivy-gray-300);
}

body.ui-light .ui-toggle input:checked + .ui-toggle-slider {
  background-color: var(--altivy-primary);
}

body.ui-light .ui-toggle-label {
  color: var(--altivy-gray-600);
}

body.ui-light .ui-toggle input:checked ~ .ui-toggle-label {
  color: var(--altivy-primary);
}


/* ============================================
   SIDEBAR NAVIGATION - MODERN STYLES
   ============================================ */
body.ui-modern .side-navbar {
  background: var(--altivy-sidebar-bg) !important;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3) !important;
  border-left: var(--altivy-curve-radius) solid var(--altivy-active-bg) !important;
}

/* Organization name above logo in sidebar */
body.ui-modern .side-navbar .sidebar-org-name {
  color: var(--altivy-primary-light) !important;
  font-family: var(--altivy-font-family) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  word-wrap: break-word !important;
  max-width: 310px !important;
  margin-bottom: 8px !important;
}

/* Light theme - org name */
body.ui-light .side-navbar .sidebar-org-name {
  color: var(--altivy-primary) !important;
}

/* Logo area with subtle animation */
body.ui-modern .side-navbar .sidenav-header-inner {
  padding: 15px 10px !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .side-navbar .sidenav-header-inner img {
  transition: transform var(--altivy-transition), filter var(--altivy-transition) !important;
}

body.ui-modern .side-navbar .sidenav-header-inner:hover img {
  transform: scale(1.05) !important;
  filter: brightness(1.1) !important;
}

/* Navigation menu container */
body.ui-modern .side-navbar .main-menu {
  padding: 0 8px 0 0 !important;
}

/* All nav links */
body.ui-modern .side-navbar li a {
  border-radius: var(--altivy-border-radius) !important;
  margin: 2px 0 !important;
  padding: 10px 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  position: relative !important;
}

/* No pseudo-element highlight bars — curves use ::before/::after on <li> instead */
body.ui-modern .side-navbar li a::before {
  display: none !important;
}

/* Focus states for navigation accessibility */
body.ui-modern .side-navbar li a:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: -2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Hover effect — generic (submenu items etc.) */
body.ui-modern .side-navbar li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--altivy-white) !important;
}

/* Main band is now via border-left on .side-navbar (20px solid blue) */

/* === CURVED OUTSIDE CORNERS — Active + Hover === */
/* Top-level items need overflow visible for curve pseudo-elements */
body.ui-modern .side-navbar #side-main-menu > li {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Non-active items get higher z-index so they sit above the curve pseudo-elements of neighbors */
body.ui-modern .side-navbar #side-main-menu > li:not(.active):not(:hover) {
  z-index: 2 !important;
}

/* Active item, expanded parent, OR hovered main item: solid blue bg, rounded right side */
body.ui-modern .side-navbar #side-main-menu > li.active > a,
body.ui-modern .side-navbar #side-main-menu > li > a[aria-expanded="true"],
body.ui-modern .side-navbar #side-main-menu > li:hover > a {
  background: var(--altivy-active-bg) !important;
  color: var(--altivy-white) !important;
  border-radius: 0 var(--altivy-curve-radius) var(--altivy-curve-radius) 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ensure all text inside active/expanded/hovered menu is white */
body.ui-modern .side-navbar #side-main-menu > li.active > a,
body.ui-modern .side-navbar #side-main-menu > li.active > a span,
body.ui-modern .side-navbar #side-main-menu > li.active > a *:not(i),
body.ui-modern .side-navbar #side-main-menu > li > a[aria-expanded="true"],
body.ui-modern .side-navbar #side-main-menu > li > a[aria-expanded="true"] span,
body.ui-modern .side-navbar #side-main-menu > li > a[aria-expanded="true"] *:not(i),
body.ui-modern .side-navbar #side-main-menu > li:hover > a,
body.ui-modern .side-navbar #side-main-menu > li:hover > a span,
body.ui-modern .side-navbar #side-main-menu > li:hover > a *:not(i) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Curved concave corners — shared pseudo-element base (active + hover) */
body.ui-modern .side-navbar #side-main-menu > li.active::before,
body.ui-modern .side-navbar #side-main-menu > li.active::after,
body.ui-modern .side-navbar #side-main-menu > li:hover::before,
body.ui-modern .side-navbar #side-main-menu > li:hover::after {
  content: '' !important;
  width: var(--altivy-curve-size) !important;
  height: var(--altivy-curve-size) !important;
  background-color: var(--altivy-sidebar-bg) !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Top curve (active + hover) */
body.ui-modern .side-navbar #side-main-menu > li.active::before,
body.ui-modern .side-navbar #side-main-menu > li:hover::before {
  top: calc(-1 * var(--altivy-curve-size)) !important;
  box-shadow: calc(-1 * var(--altivy-curve-size) * 0.5) calc(var(--altivy-curve-size) * 0.5) var(--altivy-active-bg) !important;
}

/* Bottom curve (active + hover) */
body.ui-modern .side-navbar #side-main-menu > li.active::after,
body.ui-modern .side-navbar #side-main-menu > li:hover::after {
  bottom: calc(-1 * var(--altivy-curve-size)) !important;
  box-shadow: calc(-1 * var(--altivy-curve-size) * 0.5) calc(-1 * var(--altivy-curve-size) * 0.5) var(--altivy-active-bg) !important;
}

/* Expanded parent sections: show top curve only (bottom hidden since submenu extends the li) */
body.ui-modern .side-navbar #side-main-menu > li:has(> a[aria-expanded="true"])::before {
  content: '' !important;
  width: var(--altivy-curve-size) !important;
  height: var(--altivy-curve-size) !important;
  background-color: var(--altivy-sidebar-bg) !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(-1 * var(--altivy-curve-size)) !important;
  box-shadow: calc(-1 * var(--altivy-curve-size) * 0.5) calc(var(--altivy-curve-size) * 0.5) var(--altivy-active-bg) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body.ui-modern .side-navbar #side-main-menu > li:has(> a[aria-expanded="true"])::after {
  display: none !important;
}

/* First item: hide top curve to avoid orphan at menu top */
body.ui-modern .side-navbar #side-main-menu > li:first-child.active::before,
body.ui-modern .side-navbar #side-main-menu > li:first-child:hover::before {
  display: none !important;
}

/* Adjacent highlighted main menu items: suppress curves between them */
/* Hide bottom curve of first highlighted item when next is also highlighted */
body.ui-modern .side-navbar #side-main-menu > li:is(.active, :hover, :has(> a[aria-expanded="true"])):has(+ li:is(.active, :hover, :has(> a[aria-expanded="true"])))::after {
  display: none !important;
}
/* Hide top curve of second highlighted item when previous is also highlighted */
body.ui-modern .side-navbar #side-main-menu > li:is(.active, :hover, :has(> a[aria-expanded="true"])) + li:is(.active, :hover, :has(> a[aria-expanded="true"]))::before {
  display: none !important;
}

/* Dropdown/submenu container — border-left band (same approach as main menu) + curve overflow */
body.ui-modern .side-navbar .collapse,
body.ui-modern .side-navbar .collapsing {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: var(--altivy-submenu-band-width) solid var(--altivy-submenu-active-bg) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Smooth collapse animation */
body.ui-modern .side-navbar .collapsing {
  transition: height var(--altivy-transition) !important;
}

/* Submenu items — flush with content edge (right of border-left band) */
body.ui-modern .side-navbar .collapse li,
body.ui-modern .side-navbar .collapsing li {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Non-active/non-hovered submenu items: higher z-index to cover neighbor curves */
body.ui-modern .side-navbar .collapse li:not(.active):not(:hover),
body.ui-modern .side-navbar .collapsing li:not(.active):not(:hover) {
  z-index: 2 !important;
}

/* Submenu link base styles */
body.ui-modern .side-navbar .collapse li a,
body.ui-modern .side-navbar .collapsing li a,
body.ui-modern .side-navbar li ul.collapse a,
body.ui-modern .side-navbar li ul.collapsing a {
  padding: 8px 12px 8px 14px !important;
  font-size: 0.9em !important;
  margin: 1px 4px !important;
  background: transparent !important;
  color: #ffffff !important;
  border-radius: var(--altivy-border-radius) !important;
  border-left: none !important;
}

body.ui-modern .side-navbar .collapse li a::before,
body.ui-modern .side-navbar .collapsing li a::before {
  display: none !important;
}

/* Submenu hover bubble — extends into band via negative margin */
body.ui-modern .side-navbar .collapse li:hover > a,
body.ui-modern .side-navbar .collapsing li:hover > a {
  background: var(--altivy-submenu-active-bg) !important;
  color: var(--altivy-white) !important;
  border-radius: 0 var(--altivy-submenu-curve-radius) var(--altivy-submenu-curve-radius) 0 !important;
  margin: 0 4px 0 calc(-1 * var(--altivy-submenu-band-width)) !important;
  padding: 10px 12px 10px calc(14px + var(--altivy-submenu-band-width)) !important;
  box-shadow: none !important;
}

/* Active submenu item — extends into band via negative margin */
body.ui-modern .side-navbar .collapse li.active > a,
body.ui-modern .side-navbar .collapsing li.active > a {
  background: var(--altivy-submenu-active-bg) !important;
  color: var(--altivy-white) !important;
  border-radius: 0 var(--altivy-submenu-curve-radius) var(--altivy-submenu-curve-radius) 0 !important;
  margin: 0 4px 0 calc(-1 * var(--altivy-submenu-band-width)) !important;
  padding: 10px 12px 10px calc(14px + var(--altivy-submenu-band-width)) !important;
  box-shadow: none !important;
}

/* Focus state for submenu items */
body.ui-modern .side-navbar .collapse li a:focus-visible,
body.ui-modern .side-navbar .collapsing li a:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: -2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* === SUBMENU CONCAVE CURVES === */
/* Curved concave corners — shared base (active + hover) */
body.ui-modern .side-navbar .collapse li.active::before,
body.ui-modern .side-navbar .collapse li.active::after,
body.ui-modern .side-navbar .collapse li:hover::before,
body.ui-modern .side-navbar .collapse li:hover::after {
  content: '' !important;
  width: var(--altivy-submenu-curve-size) !important;
  height: var(--altivy-submenu-curve-size) !important;
  background-color: var(--altivy-sidebar-bg) !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Submenu top curve */
body.ui-modern .side-navbar .collapse li.active::before,
body.ui-modern .side-navbar .collapse li:hover::before {
  top: calc(-1 * var(--altivy-submenu-curve-size)) !important;
  box-shadow: calc(-1 * var(--altivy-submenu-curve-size) * 0.5) calc(var(--altivy-submenu-curve-size) * 0.5) var(--altivy-submenu-active-bg) !important;
}

/* Submenu bottom curve */
body.ui-modern .side-navbar .collapse li.active::after,
body.ui-modern .side-navbar .collapse li:hover::after {
  bottom: calc(-1 * var(--altivy-submenu-curve-size)) !important;
  box-shadow: calc(-1 * var(--altivy-submenu-curve-size) * 0.5) calc(-1 * var(--altivy-submenu-curve-size) * 0.5) var(--altivy-submenu-active-bg) !important;
}

/* First submenu item: hide top curve */
body.ui-modern .side-navbar .collapse li:first-child.active::before,
body.ui-modern .side-navbar .collapse li:first-child:hover::before {
  display: none !important;
}

/* Last submenu item: hide bottom curve */
body.ui-modern .side-navbar .collapse li:last-child.active::after,
body.ui-modern .side-navbar .collapse li:last-child:hover::after {
  display: none !important;
}

/* First/last submenu items: flush background with band top/bottom edges */
body.ui-modern .side-navbar .collapse li:first-child > a {
  margin-top: 0 !important;
}
body.ui-modern .side-navbar .collapse li:last-child > a {
  margin-bottom: 0 !important;
}

/* Adjacent highlighted submenu items: suppress curves between them */
/* Hide bottom curve of first when next is also highlighted */
body.ui-modern .side-navbar .collapse li:is(.active, :hover):has(+ li:is(.active, :hover))::after {
  display: none !important;
}
/* Hide top curve of second when previous is also highlighted */
body.ui-modern .side-navbar .collapse li:is(.active, :hover) + li:is(.active, :hover)::before {
  display: none !important;
}

/* Section dividers with fade effect */
body.ui-modern .side-navbar hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.2) 80%,
    transparent 100%) !important;
  margin: 18px 10px !important;
}

/* Alert links (required actions) - pulsing effect */
body.ui-modern .side-navbar .alert_link {
  color: var(--altivy-warning) !important;
  animation: pulse-warning 2s ease-in-out infinite !important;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

body.ui-modern .side-navbar .alert_link:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  animation: none !important;
}

/* Ripple effect on click */
body.ui-modern .side-navbar li a:active {
  transform: scale(0.98) !important;
}

/* Icons in nav - modern styling */
body.ui-modern .side-navbar li a i {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  text-align: center !important;
  margin-right: 10px !important;
  font-size: 1.1em !important;
  opacity: 0.85 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .side-navbar li a:hover i {
  background: rgba(255, 255, 255, 0.15) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

body.ui-modern .side-navbar li.active > a i {
  background: rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

/* Submenu icons - smaller, fully white to match main headings */
body.ui-modern .side-navbar .collapse li a i,
body.ui-modern .side-navbar .collapsing li a i {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 0.9em !important;
  margin-right: 8px !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* ============================================
   SIDEBAR WRAPPER (aside.sidebar-wrap)
   Outer hover-trigger zone following reference pattern.
   ============================================ */
.sidebar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 999;
  pointer-events: auto;
}

/* ============================================
   COLLAPSED SIDEBAR — HOVER-TO-EXPAND OVERLAY
   Sidebar stays at shrink width, widens on hover overlaying page content.
   Text labels hidden by default, revealed on sidebar hover.
   ============================================ */

/* --- Base collapsed layout --- */
body.ui-modern .side-navbar.shrink {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 999 !important;
}

/* --- Collapsed sidebar: icons-only mode (click-to-toggle) --- */

body.ui-modern .side-navbar.shrink .main-menu {
  padding: 0 4px 0 0 !important;
}

/* Org name hidden when collapsed */
body.ui-modern .side-navbar.shrink .sidebar-org-name {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Full logo: hidden when collapsed */
body.ui-modern .side-navbar.shrink .sidenav-header-inner {
  display: none !important;
}

/* Small logo: visible when collapsed */
body.ui-modern .side-navbar.shrink .brand-small {
  transition: opacity 0.3s ease, max-height 0.3s ease !important;
}

/* Hide text in collapsed items — show icons only */
body.ui-modern .side-navbar.shrink li a {
  padding: 10px 6px !important;
  text-align: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Icons stay visible and centered when collapsed */
body.ui-modern .side-navbar.shrink li a i {
  display: flex !important;
  margin: 0 auto !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

/* Active/hovered item curves: use smaller radius when collapsed */
body.ui-modern .side-navbar.shrink #side-main-menu > li.active > a,
body.ui-modern .side-navbar.shrink #side-main-menu > li:hover > a {
  border-radius: 0 12px 12px 0 !important;
}

/* Collapsed submenu container — hide band */
body.ui-modern .side-navbar.shrink .collapse,
body.ui-modern .side-navbar.shrink .collapsing {
  margin: 0 !important;
  padding: 2px 0 !important;
  border-left: none !important;
}

/* Collapsed: disable submenu curves */
body.ui-modern .side-navbar.shrink .collapse li::before,
body.ui-modern .side-navbar.shrink .collapse li::after {
  display: none !important;
}

/* Submenu items — icons only when collapsed */
body.ui-modern .side-navbar.shrink .collapse li a,
body.ui-modern .side-navbar.shrink .collapsing li a {
  padding: 7px 4px !important;
  font-size: 0 !important;
  margin: 1px 2px !important;
  border-left: none !important;
  text-align: center !important;
}

/* Collapsed submenu active/hover — slightly wider background to the left */
body.ui-modern .side-navbar.shrink .collapse li.active > a,
body.ui-modern .side-navbar.shrink .collapse li:hover > a {
  margin-left: 0 !important;
  padding-left: 6px !important;
  border-radius: 0 12px 12px 0 !important;
}

/* Submenu item icons — centered when collapsed */
body.ui-modern .side-navbar.shrink .collapse li a i,
body.ui-modern .side-navbar.shrink .collapsing li a i {
  display: flex !important;
  margin: 0 auto !important;
  font-size: 1rem !important;
}

/* No transforms on collapsed items */
body.ui-modern .side-navbar.shrink li a:hover,
body.ui-modern .side-navbar.shrink li.active > a,
body.ui-modern .side-navbar.shrink li > a[aria-expanded="true"] {
  transform: none !important;
}


/* ============================================
   HOVER-TO-EXPAND OVERLAY (no header changes = no jumping)
   Sidebar expands on hover as overlay. Org name and logo stay hidden
   to prevent vertical shift. Use hamburger to "pin" sidebar open.
   ============================================ */

/* Expand sidebar width on hover — overlay, no page reflow */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink:not(.show-sm) {
  width: 250px !important;
}
.sidebar-wrap:not(.sidebar-open):hover {
  width: 250px;
}

/* NOTE: Org name, full logo, and small logo are NOT changed on hover.
   This prevents the "jumping" where menu items shift vertically. */

/* Reveal text labels on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink li a {
  font-size: 0.9em !important;
  text-align: left !important;
  padding: 10px 12px !important;
  gap: 10px !important;
}

.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink li a i {
  margin: 0 !important;
}

/* Restore full curve radius on hover expand */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink #side-main-menu > li.active > a,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink #side-main-menu > li > a[aria-expanded="true"],
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink #side-main-menu > li:hover > a {
  border-radius: 0 var(--altivy-curve-radius) var(--altivy-curve-radius) 0 !important;
}

/* Restore submenu band on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing {
  border-left: var(--altivy-submenu-band-width) solid var(--altivy-submenu-active-bg) !important;
}

/* Submenu text labels on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li a,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing li a {
  padding: 8px 12px 8px 14px !important;
  font-size: 0.9em !important;
  text-align: left !important;
}

/* Submenu active/hover items extend into band on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:hover > a,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing li:hover > a,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li.active > a,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing li.active > a {
  margin: 0 4px 0 calc(-1 * var(--altivy-submenu-band-width)) !important;
  padding: 10px 12px 10px calc(14px + var(--altivy-submenu-band-width)) !important;
}

/* Restore submenu curves on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li.active::before,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li.active::after,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:hover::before,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:hover::after {
  display: block !important;
}

/* First/last curve suppression on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:first-child.active::before,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:first-child:hover::before {
  display: none !important;
}
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:last-child.active::after,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:last-child:hover::after {
  display: none !important;
}

/* Adjacent highlighted submenu curve suppression on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:is(.active, :hover):has(+ li:is(.active, :hover))::after {
  display: none !important;
}
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li:is(.active, :hover) + li:is(.active, :hover)::before {
  display: none !important;
}

/* Submenu icons — left-aligned on hover */
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse li a i,
.sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing li a i {
  margin: 0 !important;
  margin-right: 8px !important;
}


/* ============================================
   TOP NAVBAR - MODERN STYLES
   ============================================ */
body.ui-modern nav.navbar {
  background: linear-gradient(90deg, var(--altivy-navbar-bg) 0%, var(--altivy-sidebar-bg) 100%) !important;
  box-shadow: var(--altivy-shadow-lg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Menu toggle button - visible on ALL sizes. "Pins" sidebar open on desktop, overlay on mobile */
body.ui-modern nav.navbar .menu-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: var(--altivy-border-radius) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
}

body.ui-modern nav.navbar .menu-btn:hover {
  background: var(--altivy-primary) !important;
  transform: scale(1.05) !important;
}

/* Replace bars icon with arrow using CSS */
body.ui-modern nav.navbar .menu-btn i.icon-bars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

body.ui-modern nav.navbar .menu-btn i.icon-bars::before {
  content: '\F479' !important; /* Bootstrap Icons list (hamburger menu) */
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-size: 20px !important;
  color: #ffffff !important;
  transition: transform 0.3s ease !important;
  display: inline-block !important;
}

/* Rotate arrow when sidebar is pinned open (no .active = expanded) */
body.ui-modern .page:not(.active) nav.navbar .menu-btn i.icon-bars::before {
  transform: rotate(180deg) !important;
}

/* Small screens: rotate when sidebar overlay is open */
body.ui-modern .page.active-sm nav.navbar .menu-btn i.icon-bars::before {
  transform: rotate(180deg) !important;
}

/* Light theme - arrow styling */
body.ui-modern.ui-light nav.navbar .menu-btn i.icon-bars::before {
  color: var(--altivy-gray-700) !important;
}

body.ui-modern.ui-light nav.navbar .menu-btn:hover i.icon-bars::before {
  color: #ffffff !important;
}

/* Brand text */
body.ui-modern nav.navbar .brand-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Nav menu items */
body.ui-modern nav.navbar .nav-link {
  border-radius: var(--altivy-border-radius) !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern nav.navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.ui-modern nav.navbar .nav-link:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
}

/* Account/Logout links in navbar */
body.ui-modern nav.navbar .nav-link.logout {
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

body.ui-modern nav.navbar .nav-link.logout:hover {
  color: var(--altivy-white) !important;
  background: rgba(var(--altivy-primary-rgb), 0.3) !important;
}


/* ============================================
   PAGE BACKGROUND
   ============================================ */
body.ui-modern .page {
  background-color: var(--altivy-page-bg) !important;
}


/* ============================================
   SCROLLBAR STYLING - Hide sidebar scrollbar
   ============================================ */

/* Override overflow to allow scroll but hide scrollbar */
body.ui-modern .side-navbar,
nav.side-navbar {
  overflow-y: auto !important; /* Allow scrolling when needed */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Menu container needs overflow visible for curve pseudo-elements */
body.ui-modern .side-navbar #side-main-menu {
  overflow: visible !important;
}

/* Hide webkit scrollbar */
body.ui-modern .side-navbar::-webkit-scrollbar,
nav.side-navbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Also target any nested scrollable elements */
body.ui-modern .side-navbar .scrolled-wrapper {
  overflow: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.ui-modern .side-navbar .scrolled-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}


/* ============================================
   LIGHT THEME (iOS-inspired)
   Applied when both ui-modern and ui-light classes are present
   ============================================ */

/* Light sidebar — solid bg required for curve circles to blend */
body.ui-light .side-navbar {
  background: #ffffff !important;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid var(--altivy-gray-200) !important;
  border-left-color: var(--altivy-active-bg) !important;
}

/* Logo area - Dark theme: no filter needed for new logo */
body:not(.ui-light) .side-navbar .sidenav-header-inner img {
  filter: none !important;
}

/* Logo area - Light theme: tint to match primary blue (#2563eb) */
body.ui-light .side-navbar .sidenav-header-inner img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(1700%) hue-rotate(215deg) brightness(96%) contrast(95%) !important;
}

body.ui-light .side-navbar .sidenav-header-inner:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(1700%) hue-rotate(215deg) brightness(86%) contrast(95%) !important;
}

/* Nav links - light theme */
body.ui-light .side-navbar li a {
  color: var(--altivy-gray-700) !important;
}

body.ui-light .side-navbar li a:hover {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-900) !important;
}

/* Active/hovered nav item - light theme: solid blue bg with curved corners */
body.ui-light .side-navbar #side-main-menu > li.active > a,
body.ui-light .side-navbar #side-main-menu > li > a[aria-expanded="true"],
body.ui-light .side-navbar #side-main-menu > li:hover > a {
  background: var(--altivy-active-bg) !important;
  color: var(--altivy-white) !important;
  box-shadow: none !important;
}

/* Light theme curve circles: white bg to match sidebar (active + hover) */
body.ui-light .side-navbar #side-main-menu > li.active::before,
body.ui-light .side-navbar #side-main-menu > li.active::after,
body.ui-light .side-navbar #side-main-menu > li:hover::before,
body.ui-light .side-navbar #side-main-menu > li:hover::after {
  background-color: #ffffff !important;
}

body.ui-light .side-navbar #side-main-menu > li:has(> a[aria-expanded="true"])::before {
  background-color: #ffffff !important;
}

/* Submenu container - light theme: solid color prevents alpha stacking with curve shadows */
body.ui-light .side-navbar .collapse,
body.ui-light .side-navbar .collapsing {
  background: transparent !important;
  border: none !important;
  border-left: var(--altivy-submenu-band-width) solid #BED0F9 !important;
}

/* Light theme: submenu curves — white circles (match white sidebar bg) */
body.ui-light .side-navbar .collapse li.active::before,
body.ui-light .side-navbar .collapse li.active::after,
body.ui-light .side-navbar .collapse li:hover::before,
body.ui-light .side-navbar .collapse li:hover::after {
  background-color: #ffffff !important;
}

/* Light theme: submenu curve box-shadows — solid color prevents alpha stacking with band */
body.ui-light .side-navbar .collapse li.active::before,
body.ui-light .side-navbar .collapse li:hover::before {
  box-shadow: calc(-1 * var(--altivy-submenu-curve-size) * 0.5) calc(var(--altivy-submenu-curve-size) * 0.5) #BED0F9 !important;
}
body.ui-light .side-navbar .collapse li.active::after,
body.ui-light .side-navbar .collapse li:hover::after {
  box-shadow: calc(-1 * var(--altivy-submenu-curve-size) * 0.5) calc(-1 * var(--altivy-submenu-curve-size) * 0.5) #BED0F9 !important;
}

/* Submenu items - light theme */
body.ui-light .side-navbar .collapse li a,
body.ui-light .side-navbar .collapsing li a {
  color: var(--altivy-gray-600) !important;
}

/* Light theme: submenu hover bubble — solid color + negative margin into band */
body.ui-light .side-navbar .collapse li:hover > a,
body.ui-light .side-navbar .collapsing li:hover > a {
  background: #BED0F9 !important;
  color: var(--altivy-primary) !important;
  box-shadow: none !important;
}

/* Active submenu - light theme — solid color + negative margin into band */
body.ui-light .side-navbar .collapse li.active > a,
body.ui-light .side-navbar .collapsing li.active > a {
  background: #BED0F9 !important;
  color: var(--altivy-primary) !important;
  box-shadow: none !important;
}

/* Light theme: hover-expand band restore — same solid color */
body.ui-light .sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapse,
body.ui-light .sidebar-wrap:not(.sidebar-open):hover .side-navbar.shrink .collapsing {
  border-left: var(--altivy-submenu-band-width) solid #BED0F9 !important;
}

/* Section dividers - light theme */
body.ui-light .side-navbar hr {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--altivy-gray-300) 20%,
    var(--altivy-gray-300) 80%,
    transparent 100%) !important;
}

/* Alert links - light theme */
body.ui-light .side-navbar .alert_link {
  color: var(--altivy-danger) !important;
}

body.ui-light .side-navbar .alert_link:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Icons - light theme */
body.ui-light .side-navbar li a i {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-600) !important;
}

body.ui-light .side-navbar li a:hover i {
  background: var(--altivy-gray-200) !important;
  color: var(--altivy-gray-800) !important;
}

body.ui-light .side-navbar li.active > a i,
body.ui-light .side-navbar #side-main-menu > li:hover > a i {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--altivy-white) !important;
}

/* Submenu icons - light theme */
body.ui-light .side-navbar .collapse li a i,
body.ui-light .side-navbar .collapsing li a i {
  background: transparent !important;
  color: var(--altivy-gray-500) !important;
}

/* Top navbar - light theme */
body.ui-modern.ui-light nav.navbar {
  background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid var(--altivy-gray-200) !important;
}

body.ui-modern.ui-light nav.navbar .menu-btn {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-700) !important;
}

body.ui-modern.ui-light nav.navbar .menu-btn:hover {
  background: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
}

body.ui-modern.ui-light nav.navbar .brand-text {
  color: var(--altivy-gray-800) !important;
}

body.ui-modern.ui-light nav.navbar .nav-link {
  color: var(--altivy-gray-700) !important;
}

body.ui-modern.ui-light nav.navbar .nav-link:hover {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-900) !important;
}

body.ui-modern.ui-light nav.navbar .nav-link.logout {
  color: var(--altivy-gray-700) !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
}

body.ui-modern.ui-light nav.navbar .nav-link.logout:hover {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
}

/* Page background - light theme */
body.ui-modern.ui-light .page {
  background-color: var(--altivy-gray-50) !important;
}

/* Scrollbar hidden in light theme too (inherited from main rule) */


/* ============================================
   FOOTER - HIDDEN IN MODERN UI
   ============================================ */

/* Hide footer in modern UI */
body.ui-modern footer.main-footer {
  display: none !important;
}


/* ============================================
   MODERN TABLES
   ============================================ */

/* Table container - rounded corners and shadow */
body.ui-modern .bootstrap-table {
  border-radius: var(--altivy-border-radius-lg) !important;
  overflow: visible !important;
  box-shadow: var(--altivy-shadow) !important;
  border: 1px solid var(--altivy-border-color) !important;
  background: var(--altivy-table-bg) !important;
  max-width: 100% !important;
}

body.ui-modern .fixed-table-container {
  border-radius: var(--altivy-border-radius-lg) !important;
  overflow: hidden !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
}

body.ui-modern .fixed-table-body,
body.ui-modern .fixed-table-header {
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Fixed columns overlay must allow dropdown to escape */
body.ui-modern .fixed-columns-right,
body.ui-modern .fixed-columns {
  overflow: visible !important;
}

/* Rounded corners on inner elements (since parent overflow is visible for dropdowns) */
body.ui-modern .bootstrap-table .fixed-table-toolbar {
  border-radius: var(--altivy-border-radius-lg) var(--altivy-border-radius-lg) 0 0 !important;
  overflow: hidden !important;
}

body.ui-modern .bootstrap-table .fixed-table-pagination {
  border-radius: 0 0 var(--altivy-border-radius-lg) var(--altivy-border-radius-lg) !important;
  overflow: hidden !important;
}

body.ui-modern .bootstrap-table .table {
  margin-bottom: 0 !important;
  border: none !important;
  width: 100% !important;
  table-layout: auto !important;
}

/* Aviation Blue gradient header */
body.ui-modern thead.altivy_hdr,
body.ui-modern .fixed-table-header thead,
body.ui-modern .bootstrap-table thead {
  background: var(--altivy-table-header-bg) !important;
}

body.ui-modern thead.altivy_hdr th,
body.ui-modern .fixed-table-header th,
body.ui-modern .bootstrap-table thead th {
  background: transparent !important;
  color: var(--altivy-table-header-text) !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 600 !important;
  font-size: var(--altivy-font-size-xs) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 8px !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  vertical-align: middle !important;
  white-space: normal !important;
}

/* Dark mode: header border creates a visible gap above
   status-coloured rows — use box-shadow instead so it
   stays inside the header and does not bleed into the
   body area */
body.ui-modern:not(.ui-light) thead.altivy_hdr th,
body.ui-modern:not(.ui-light) .fixed-table-header th,
body.ui-modern:not(.ui-light) .bootstrap-table thead th {
  border-bottom: none !important;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Override bootstrap-table's .th-inner padding/nowrap */
body.ui-modern .bootstrap-table .th-inner,
body.ui-modern .fixed-table-header .th-inner {
  padding: 4px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Sortable header hover */
body.ui-modern thead.altivy_hdr th[data-sortable="true"],
body.ui-modern .bootstrap-table thead th.sortable {
  cursor: pointer !important;
  transition: background var(--altivy-transition) !important;
}

body.ui-modern thead.altivy_hdr th[data-sortable="true"]:hover,
body.ui-modern .bootstrap-table thead th.sortable:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Sort direction indicators */
body.ui-modern .bootstrap-table thead th.asc .th-inner::after,
body.ui-modern .bootstrap-table thead th.desc .th-inner::after {
  color: var(--altivy-white) !important;
  opacity: 1 !important;
}

/* Base row styling */
body.ui-modern .bootstrap-table tbody tr {
  transition: all var(--altivy-transition) !important;
  border-bottom: 1px solid var(--altivy-gray-100) !important;
}

/* Subtle zebra striping */
body.ui-modern .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--altivy-table-stripe-odd) !important;
}

body.ui-modern .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--altivy-table-stripe-even) !important;
}

/* Modern hover effect with left accent bar */
body.ui-modern .bootstrap-table tbody tr:hover {
  background-color: var(--altivy-table-hover) !important;
  box-shadow: inset 4px 0 0 var(--altivy-primary) !important;
}

/* Cell styling */
body.ui-modern .bootstrap-table tbody td {
  padding: 8px !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-xs) !important;
  color: var(--altivy-gray-700) !important;
  vertical-align: middle !important;
  border: none !important;
  line-height: 1.5 !important;
}

/* First column emphasis */
body.ui-modern .bootstrap-table tbody td:first-child {
  font-weight: 500 !important;
  color: var(--altivy-gray-900) !important;
}

/* Status row styling - Error (red) */
body.ui-modern .bootstrap-table tbody tr[style*="color:red"],
body.ui-modern .bootstrap-table tbody tr[style*="color: red"] {
  background: var(--altivy-status-error-bg) !important;
  box-shadow: inset 4px 0 0 var(--altivy-danger) !important;
}

body.ui-modern .bootstrap-table tbody tr[style*="color:red"] td,
body.ui-modern .bootstrap-table tbody tr[style*="color: red"] td,
body.ui-modern tbody tr[style*="color:red"] td,
body.ui-modern tbody tr[style*="color: red"] td {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-status-error-text) !important;
}

/* Status row styling - Approved/Success (green) */
body.ui-modern .bootstrap-table tbody tr[style*="color:green"],
body.ui-modern .bootstrap-table tbody tr[style*="color: green"] {
  background: var(--altivy-status-approved-bg) !important;
  box-shadow: inset 4px 0 0 var(--altivy-success) !important;
}

body.ui-modern .bootstrap-table tbody tr[style*="color:green"] td,
body.ui-modern .bootstrap-table tbody tr[style*="color: green"] td,
body.ui-modern tbody tr[style*="color:green"] td,
body.ui-modern tbody tr[style*="color: green"] td {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-status-approved-text) !important;
}

/* Status row styling - Pending (orange) */
body.ui-modern .bootstrap-table tbody tr[style*="color:orange"],
body.ui-modern .bootstrap-table tbody tr[style*="color: orange"] {
  background: var(--altivy-status-pending-bg) !important;
  box-shadow: inset 4px 0 0 var(--altivy-warning) !important;
}

body.ui-modern .bootstrap-table tbody tr[style*="color:orange"] td,
body.ui-modern .bootstrap-table tbody tr[style*="color: orange"] td,
body.ui-modern tbody tr[style*="color:orange"] td,
body.ui-modern tbody tr[style*="color: orange"] td {
  background: var(--altivy-status-pending-bg) !important;
  color: var(--altivy-status-pending-text) !important;
}

/* Action column cell - ensure proper positioning context */
body.ui-modern .action-column-cell,
body.ui-modern .bootstrap-table td:last-child {
  position: relative !important;
  overflow: visible !important;
}

/* Dropdown container */
body.ui-modern .action-column-cell .dropdown,
body.ui-modern .action-column-cell .btn-group,
body.ui-modern .bootstrap-table .dropdown,
body.ui-modern .bootstrap-table .btn-group {
  position: static !important;
}

/* Modern action button */
body.ui-modern .action-column-cell .btn.btn-info,
body.ui-modern .action-column-cell .btn-info.dropdown-toggle,
body.ui-modern .bootstrap-table .btn.btn-info {
  background: var(--altivy-primary) !important;
  border: none !important;
  color: var(--altivy-white) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 4px 10px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-xs) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all var(--altivy-transition) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .action-column-cell .btn.btn-info:hover,
body.ui-modern .bootstrap-table .btn.btn-info:hover {
  background: var(--altivy-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--altivy-shadow) !important;
}

body.ui-modern .action-column-cell .btn.btn-info:active {
  transform: translateY(0) !important;
}

/* Modern dropdown menu - ensure it appears on top of everything */
body.ui-modern .action-column-cell .dropdown-menu,
body.ui-modern .bootstrap-table .dropdown-menu,
body.ui-modern .dropdown-menu.show {
  border: none !important;
  border-radius: var(--altivy-border-radius) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  padding: 8px 0 !important;
  min-width: 200px !important;
  background: var(--altivy-card-bg) !important;
  z-index: 99999 !important;
}

/* Dropdown animation for non-table dropdowns */
body.ui-modern .dropdown-menu.show {
  animation: altivy-dropdown-fade 0.15s ease-out !important;
}

/* Table action dropdowns: no animation (positioned by JS to prevent flash) */
body.ui-modern .action-column-cell .dropdown-menu {
  animation: none !important;
}

/* Dropdown parent needs proper stacking context */
body.ui-modern .dropdown.show,
body.ui-modern .btn-group.show {
  z-index: 99998 !important;
  position: relative !important;
}

/* Ensure dropdown opens upward if near bottom of viewport */
body.ui-modern .action-column-cell .dropdown-menu.dropdown-menu-right,
body.ui-modern .bootstrap-table .dropdown-menu.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}

/* Dark theme dropdown menu */
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu,
body.ui-modern:not(.ui-light) .bootstrap-table .dropdown-menu,
body.ui-modern:not(.ui-light) .dropdown-menu {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu .dropdown-item,
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu > li > a,
body.ui-modern:not(.ui-light) .bootstrap-table .dropdown-menu .dropdown-item,
body.ui-modern:not(.ui-light) .dropdown-menu .dropdown-item,
body.ui-modern:not(.ui-light) .dropdown-menu > li > a {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu .dropdown-item:hover,
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu > li > a:hover,
body.ui-modern:not(.ui-light) .bootstrap-table .dropdown-menu .dropdown-item:hover,
body.ui-modern:not(.ui-light) .dropdown-menu .dropdown-item:hover,
body.ui-modern:not(.ui-light) .dropdown-menu > li > a:hover {
  background: rgba(var(--altivy-primary-rgb), 0.2) !important;
  color: var(--altivy-primary-light) !important;
}

@keyframes altivy-dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown items */
body.ui-modern .action-column-cell .dropdown-menu .dropdown-item,
body.ui-modern .action-column-cell .dropdown-menu > li > a,
body.ui-modern .bootstrap-table .dropdown-menu .dropdown-item {
  padding: 10px 16px !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-gray-700) !important;
  transition: all var(--altivy-transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.ui-modern .action-column-cell .dropdown-menu .dropdown-item:hover,
body.ui-modern .action-column-cell .dropdown-menu > li > a:hover,
body.ui-modern .bootstrap-table .dropdown-menu .dropdown-item:hover {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
  padding-left: 20px !important;
}

/* Danger dropdown items */
body.ui-modern .action-column-cell .dropdown-menu .dropdown-item[style*="color:red"],
body.ui-modern .action-column-cell .dropdown-menu > li > a[style*="color:red"] {
  color: var(--altivy-danger) !important;
}

body.ui-modern.ui-light .action-column-cell .dropdown-menu .dropdown-item[style*="color:red"]:hover,
body.ui-modern.ui-light .action-column-cell .dropdown-menu > li > a[style*="color:red"]:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu .dropdown-item[style*="color:red"]:hover,
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu > li > a[style*="color:red"]:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* Success dropdown items */
body.ui-modern .action-column-cell .dropdown-menu .dropdown-item[style*="color:green"],
body.ui-modern .action-column-cell .dropdown-menu > li > a[style*="color:green"] {
  color: var(--altivy-success) !important;
}

body.ui-modern.ui-light .action-column-cell .dropdown-menu .dropdown-item[style*="color:green"]:hover,
body.ui-modern.ui-light .action-column-cell .dropdown-menu > li > a[style*="color:green"]:hover {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu .dropdown-item[style*="color:green"]:hover,
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu > li > a[style*="color:green"]:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

/* Warning dropdown items (orange) */
body.ui-modern .action-column-cell .dropdown-menu .dropdown-item[style*="color:orange"],
body.ui-modern .action-column-cell .dropdown-menu > li > a[style*="color:orange"] {
  color: var(--altivy-warning) !important;
}

body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu .dropdown-item[style*="color:orange"]:hover,
body.ui-modern:not(.ui-light) .action-column-cell .dropdown-menu > li > a[style*="color:orange"]:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
}

/* Search toolbar */
body.ui-modern .fixed-table-toolbar {
  padding: 16px !important;
  background: var(--altivy-gray-50) !important;
  border-bottom: 1px solid var(--altivy-border-color) !important;
  border-radius: var(--altivy-border-radius-lg) var(--altivy-border-radius-lg) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Modern search input */
body.ui-modern .fixed-table-toolbar .search input,
body.ui-modern .bootstrap-table .search input {
  border: 2px solid var(--altivy-gray-200) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 16px 10px 40px !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  min-width: 280px !important;
  transition: all var(--altivy-transition) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
}

body.ui-modern .fixed-table-toolbar .search input:focus,
body.ui-modern .bootstrap-table .search input:focus {
  outline: none !important;
  border-color: var(--altivy-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

body.ui-modern .fixed-table-toolbar .search input::placeholder {
  color: var(--altivy-gray-400) !important;
}

/* Search highlight */
body.ui-modern .bootstrap-table .search-highlight {
  background-color: #fef08a !important;
  padding: 2px 4px !important;
  border-radius: 2px !important;
}

/* Toolbar buttons */
body.ui-modern .fixed-table-toolbar .btn-group .btn,
body.ui-modern .fixed-table-toolbar .columns .btn {
  background: var(--altivy-card-bg) !important;
  border: 1px solid var(--altivy-gray-300) !important;
  color: var(--altivy-gray-600) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 12px !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .fixed-table-toolbar .btn-group .btn:hover {
  background: var(--altivy-gray-100) !important;
  border-color: var(--altivy-gray-400) !important;
  color: var(--altivy-gray-800) !important;
}

body.ui-modern .fixed-table-toolbar .btn-group .btn.active {
  background: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
}

/* Pagination container */
body.ui-modern .fixed-table-pagination {
  padding: 16px !important;
  background: var(--altivy-gray-50) !important;
  border-top: 1px solid var(--altivy-border-color) !important;
  border-radius: 0 0 var(--altivy-border-radius-lg) var(--altivy-border-radius-lg) !important;
}

/* Pagination info text */
body.ui-modern .pagination-info {
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-gray-600) !important;
}

/* Page size selector */
body.ui-modern .page-list .btn-group .btn {
  background: var(--altivy-card-bg) !important;
  border: 1px solid var(--altivy-gray-300) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 6px 12px !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-gray-700) !important;
}

/* Pagination buttons */
body.ui-modern .pagination {
  gap: 4px !important;
  margin: 0 !important;
}

body.ui-modern .pagination .page-item .page-link,
body.ui-modern .pagination > li > a {
  border: none !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 14px !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-gray-600) !important;
  background: var(--altivy-card-bg) !important;
  transition: all var(--altivy-transition-fast) !important;
  min-width: 40px !important;
  text-align: center !important;
}

body.ui-modern .pagination .page-item .page-link:hover,
body.ui-modern .pagination > li > a:hover {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
}

body.ui-modern .pagination .page-item.active .page-link,
body.ui-modern .pagination > li.active > a {
  background: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
  font-weight: 600 !important;
}

body.ui-modern .pagination .page-item.disabled .page-link,
body.ui-modern .pagination > li.disabled > a {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-400) !important;
  cursor: not-allowed !important;
}

/* Status badge classes */
body.ui-modern .altivy-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-family: var(--altivy-font-family) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  white-space: nowrap !important;
}

body.ui-modern .altivy-badge--pending {
  background: var(--altivy-status-pending-bg) !important;
  color: var(--altivy-status-pending-text) !important;
}

body.ui-modern .altivy-badge--approved {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-status-approved-text) !important;
}

body.ui-modern .altivy-badge--in-progress {
  background: var(--altivy-status-in-progress-bg) !important;
  color: var(--altivy-status-in-progress-text) !important;
}

body.ui-modern .altivy-badge--completed {
  background: var(--altivy-status-completed-bg) !important;
  color: var(--altivy-status-completed-text) !important;
}

body.ui-modern .altivy-badge--cancelled {
  background: var(--altivy-status-cancelled-bg) !important;
  color: var(--altivy-status-cancelled-text) !important;
}

body.ui-modern .altivy-badge--error {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-status-error-text) !important;
}

body.ui-modern .altivy-badge--booked {
  background: var(--altivy-status-booked-bg) !important;
  color: var(--altivy-status-booked-text) !important;
}

body.ui-modern .altivy-badge--ready {
  background: var(--altivy-status-ready-bg) !important;
  color: var(--altivy-status-ready-text) !important;
}

/* --- Booking status badges: dark mode overrides --- */
body.ui-modern:not(.ui-light) .altivy-badge--pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--approved {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--in-progress {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--completed {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--cancelled {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--booked {
  background: rgba(59, 89, 152, 0.15) !important;
  color: #93c5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--ready {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

/* Financial column styling */
body.ui-modern .bootstrap-table td.balance,
body.ui-modern .balance {
  font-family: var(--altivy-font-family-mono) !important;
  font-weight: 600 !important;
  text-align: right !important;
}

body.ui-modern .bootstrap-table td.balance_negative,
body.ui-modern .balance_negative {
  color: var(--altivy-danger) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

body.ui-modern .bootstrap-table td.balance_positive,
body.ui-modern .balance_positive {
  color: var(--altivy-success) !important;
  background: rgba(16, 185, 129, 0.05) !important;
}

/* Loading overlay */
body.ui-modern .fixed-table-loading {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px) !important;
}

body.ui-modern .fixed-table-loading .loading-text {
  font-family: var(--altivy-font-family) !important;
  color: var(--altivy-gray-600) !important;
}

/* Table keyboard focus states */
body.ui-modern .bootstrap-table tbody tr:focus-within {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: -2px !important;
}

body.ui-modern .action-column-cell .btn:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
}

body.ui-modern .pagination .page-link:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
  body.ui-modern .bootstrap-table {
    border-radius: var(--altivy-border-radius) !important;
  }

  body.ui-modern .fixed-table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.ui-modern .fixed-table-toolbar .search input {
    min-width: 100% !important;
    width: 100% !important;
  }

  body.ui-modern .action-column-cell .btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  body.ui-modern .action-column-cell .dropdown-menu .dropdown-item,
  body.ui-modern .action-column-cell .dropdown-menu > li > a {
    min-height: 48px !important;
    padding: 14px 20px !important;
  }
}

/* Light theme table adjustments */
body.ui-modern.ui-light .bootstrap-table {
  background: var(--altivy-card-bg) !important;
}

body.ui-modern.ui-light .fixed-table-toolbar,
body.ui-modern.ui-light .fixed-table-pagination {
  background: var(--altivy-gray-50) !important;
}

/* Dark theme table adjustments */
body.ui-modern:not(.ui-light) .bootstrap-table {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: transparent !important;
}

body.ui-modern:not(.ui-light) .bootstrap-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.ui-modern:not(.ui-light) .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

body.ui-modern:not(.ui-light) .table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-table tbody tr:hover {
  background-color: rgba(var(--altivy-primary-rgb), 0.15) !important;
}

/* Status row backgrounds must survive dark-mode zebra stripes.
   Set on both tr AND td so nothing can paint over them. */
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color:red"],
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color: red"],
body.ui-modern:not(.ui-light) .table-striped tbody tr[style*="color:red"],
body.ui-modern:not(.ui-light) .table-striped tbody tr[style*="color: red"],
body.ui-modern:not(.ui-light) tbody tr[style*="color:red"],
body.ui-modern:not(.ui-light) tbody tr[style*="color: red"] {
  background: var(--altivy-status-error-bg) !important;
  border: none !important;
}

body.ui-modern:not(.ui-light) tbody tr[style*="color:green"],
body.ui-modern:not(.ui-light) tbody tr[style*="color: green"] {
  background: var(--altivy-status-approved-bg) !important;
  border: none !important;
}

body.ui-modern:not(.ui-light) tbody tr[style*="color:orange"],
body.ui-modern:not(.ui-light) tbody tr[style*="color: orange"] {
  background: var(--altivy-status-pending-bg) !important;
  border: none !important;
}

body.ui-modern:not(.ui-light) .bootstrap-table tbody td,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td a,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td a:link,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td a:visited {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-table tbody td:first-child,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td:first-child a,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td:first-child a:link,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td:first-child a:visited {
  color: #ffffff !important;
}

body.ui-modern:not(.ui-light) .fixed-table-toolbar,
body.ui-modern:not(.ui-light) .fixed-table-pagination {
  background: rgba(255, 255, 255, 0.03) !important;
}

body.ui-modern:not(.ui-light) .fixed-table-toolbar .btn-group .btn,
body.ui-modern:not(.ui-light) .fixed-table-toolbar .columns .btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.ui-modern:not(.ui-light) .fixed-table-toolbar .search input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body.ui-modern:not(.ui-light) .fixed-table-toolbar .search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.ui-modern:not(.ui-light) .pagination .page-link {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.ui-modern:not(.ui-light) .pagination .page-item.active .page-link {
  background: var(--altivy-primary) !important;
  color: #ffffff !important;
}

/* Dark theme - standard table styling (not bootstrap-table) */
body.ui-modern:not(.ui-light) .table {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.ui-modern:not(.ui-light) .table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.ui-modern:not(.ui-light) .table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

body.ui-modern:not(.ui-light) .table.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.ui-modern:not(.ui-light) .table tbody tr:hover {
  background-color: rgba(var(--altivy-primary-rgb), 0.15) !important;
}

body.ui-modern:not(.ui-light) .table td,
body.ui-modern:not(.ui-light) .table th {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark theme - action column cell background fix */
body.ui-modern:not(.ui-light) .action-column-cell,
body.ui-modern:not(.ui-light) td.action-column-cell,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td:last-child,
body.ui-modern:not(.ui-light) .table tbody td:last-child,
body.ui-modern:not(.ui-light) .bootstrap-table tbody td,
body.ui-modern:not(.ui-light) .table tbody td {
  background-color: transparent !important;
  background: transparent !important;
}

/* Dark theme - status rows override transparent td, first-child
   white text, AND action-column-cell backgrounds */
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color:red"] td,
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color: red"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:red"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color: red"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:red"] td.action-column-cell,
body.ui-modern:not(.ui-light) tbody tr[style*="color: red"] td.action-column-cell {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-bg) !important;
}
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color:green"] td,
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color: green"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:green"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color: green"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:green"] td.action-column-cell,
body.ui-modern:not(.ui-light) tbody tr[style*="color: green"] td.action-column-cell {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-status-approved-text) !important;
  border-color: var(--altivy-status-approved-bg) !important;
}
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color:orange"] td,
body.ui-modern:not(.ui-light) .bootstrap-table tbody tr[style*="color: orange"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:orange"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color: orange"] td,
body.ui-modern:not(.ui-light) tbody tr[style*="color:orange"] td.action-column-cell,
body.ui-modern:not(.ui-light) tbody tr[style*="color: orange"] td.action-column-cell {
  background: var(--altivy-status-pending-bg) !important;
  color: var(--altivy-status-pending-text) !important;
  border-color: var(--altivy-status-pending-bg) !important;
}

/* Dark theme - fixed column overlay background (bootstrap-table fixed-columns extension) */
body.ui-modern:not(.ui-light) .fixed-columns-right {
  background-color: var(--altivy-sidebar-bg-dark) !important;
}

body.ui-modern:not(.ui-light) .fixed-columns-right td,
body.ui-modern:not(.ui-light) .fixed-columns-right .action-column-cell {
  background-color: transparent !important;
}

/* Dark theme - booking detail view table */
body.ui-modern:not(.ui-light) .booking_view_table {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.ui-modern:not(.ui-light) .booking_orig_headline {
  background-color: rgba(0, 180, 180, 0.2) !important;
}

body.ui-modern:not(.ui-light) .booking_orig {
  background-color: rgba(0, 180, 180, 0.08) !important;
}

body.ui-modern:not(.ui-light) .booking_hi_headline {
  background-color: rgba(180, 180, 0, 0.2) !important;
}

body.ui-modern:not(.ui-light) .booking_hi {
  background-color: rgba(180, 180, 0, 0.08) !important;
}

body.ui-modern:not(.ui-light) .booking_end_headline {
  background-color: rgba(180, 0, 180, 0.2) !important;
}

body.ui-modern:not(.ui-light) .booking_end {
  background-color: rgba(180, 0, 180, 0.08) !important;
}

body.ui-modern:not(.ui-light) .booking_view_section_headline {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Dark theme - help icon (make it white) */
body.ui-modern:not(.ui-light) #link-admin-bookings-help img,
body.ui-modern:not(.ui-light) [id^="link-"][id$="-help"] img,
body.ui-modern:not(.ui-light) .local-help-modal + a img,
body.ui-modern:not(.ui-light) a[data-target*="help"] img,
body.ui-modern:not(.ui-light) .float-right[data-toggle="modal"] img {
  filter: brightness(0) invert(1) !important;
}


/* ============================================
   ACCORDION / COLLAPSIBLE SECTIONS
   ============================================ */

/* Panel/Card headers with collapsible content */
body.ui-modern .panel,
body.ui-modern .card {
  border-radius: var(--altivy-border-radius-lg) !important;
  border: 1px solid var(--altivy-border-color) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}

/* Panel header - matches table header style */
body.ui-modern .panel-heading,
body.ui-modern .card-header {
  background: var(--altivy-table-header-bg) !important;
  border: none !important;
  padding: 14px 16px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 600 !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-white) !important;
  letter-spacing: 0.025em !important;
}

body.ui-modern .panel-heading a,
body.ui-modern .card-header a {
  color: var(--altivy-white) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .panel-heading a:hover,
body.ui-modern .card-header a:hover {
  opacity: 0.9 !important;
}

/* Collapse toggle indicator */
body.ui-modern .panel-heading a[data-toggle="collapse"]::after,
body.ui-modern .card-header a[data-toggle="collapse"]::after {
  content: '\F282' !important; /* bi-chevron-down */
  font-family: 'bootstrap-icons' !important;
  font-size: 1rem !important;
  transition: transform var(--altivy-transition) !important;
}

body.ui-modern .panel-heading a[aria-expanded="true"]::after,
body.ui-modern .card-header a[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Panel body */
body.ui-modern .panel-body,
body.ui-modern .card-body {
  padding: 16px !important;
}

/* Dark theme - panel/card body */
body.ui-modern:not(.ui-light) .panel-body,
body.ui-modern:not(.ui-light) .card-body {
  background: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-100) !important;
}

body.ui-modern:not(.ui-light) .panel,
body.ui-modern:not(.ui-light) .card {
  background: var(--altivy-gray-900) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure all text inside cards is readable in dark mode */
body.ui-modern:not(.ui-light) .card-body p,
body.ui-modern:not(.ui-light) .card-body span,
body.ui-modern:not(.ui-light) .card-body td,
body.ui-modern:not(.ui-light) .card-body label,
body.ui-modern:not(.ui-light) .card-body .text-muted {
  color: var(--altivy-gray-200) !important;
}

/* Light theme - panel/card body */
body.ui-modern.ui-light .panel-body,
body.ui-modern.ui-light .card-body {
  background: var(--altivy-card-bg) !important;
  color: var(--altivy-gray-900) !important;
}

body.ui-modern.ui-light .panel,
body.ui-modern.ui-light .card {
  background: var(--altivy-card-bg) !important;
  border-color: var(--altivy-border-color) !important;
}


/* ============================================
   CONTENT CARD - FULL WIDTH LAYOUT
   Expands .a_form content card to fill space
   ============================================ */

/* Main content card - expand to full width while keeping responsive */
body.ui-modern .a_form {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Dark theme (default) - dark background for content */
body.ui-modern:not(.ui-light) .a_form {
  background: var(--altivy-sidebar-bg-dark) !important;
  color: var(--altivy-white) !important;
}

body.ui-modern:not(.ui-light) .page {
  background: var(--altivy-sidebar-bg-dark) !important;
}

/* Light theme - white background for content */
body.ui-modern.ui-light .a_form {
  background: var(--altivy-card-bg) !important;
  color: var(--altivy-gray-900) !important;
}

/* Remove page background padding when card is full width */
body.ui-modern .page {
  padding: 0 !important;
  padding-bottom: 110px !important; /* Keep bottom padding for footer */
}

/* Remove top gap - target the row container */
body.ui-modern .page > .row,
body.ui-modern .page > [class*="container"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive adjustments - add some padding on larger screens for readability */
@media (min-width: 1400px) {
  body.ui-modern .a_form {
    padding: 32px 48px !important;
  }
}

@media (min-width: 1800px) {
  body.ui-modern .a_form {
    padding: 32px 64px !important;
  }
}

/* Alert-style section headers (like "Future and upcoming bookings") */
body.ui-modern .alert {
  border-radius: var(--altivy-border-radius-lg) !important;
  border: none !important;
  padding: 14px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 600 !important;
  font-size: var(--altivy-font-size-sm) !important;
  margin-bottom: 16px !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

/* Success alert (green) - convert to Aviation Blue */
body.ui-modern .alert-success {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
  border-left: 4px solid var(--altivy-primary) !important;
}

/* Info alert */
body.ui-modern .alert-info {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-left: 4px solid var(--altivy-info) !important;
}

/* Warning alert */
body.ui-modern .alert-warning {
  background: var(--altivy-status-pending-bg) !important;
  color: var(--altivy-status-pending-text) !important;
  border-left: 4px solid var(--altivy-warning) !important;
}

/* Danger alert */
body.ui-modern .alert-danger {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-status-error-text) !important;
  border-left: 4px solid var(--altivy-danger) !important;
}

/* ============================================
   SLIDE-DOWN TOAST NOTIFICATIONS
   ============================================ */
#altivy-toast-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  pointer-events: none;
}

.altivy-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 520px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transform: translateY(-120%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.altivy-toast--visible {
  transform: translateY(0);
  opacity: 1;
}

.altivy-toast__text {
  flex: 1;
}

.altivy-toast__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  padding: 0 0 0 8px;
}

.altivy-toast__close:hover {
  opacity: 1;
}

/* Light mode toast colours */
.altivy-toast--info {
  background: #e0f2fe;
  color: #0369a1;
  border-left: 4px solid var(--altivy-info);
}

.altivy-toast--success {
  background: var(--altivy-primary-light);
  color: var(--altivy-primary);
  border-left: 4px solid var(--altivy-primary);
}

.altivy-toast--warning {
  background: var(--altivy-status-pending-bg);
  color: var(--altivy-status-pending-text);
  border-left: 4px solid var(--altivy-warning);
}

.altivy-toast--error,
.altivy-toast--danger {
  background: var(--altivy-status-error-bg);
  color: var(--altivy-status-error-text);
  border-left: 4px solid var(--altivy-danger);
}

/* Dark mode toast colours */
body.ui-modern:not(.ui-light) .altivy-toast--info {
  background: rgba(14, 165, 233, 0.2);
  color: #7dd3fc;
  border-left-color: var(--altivy-info);
}

body.ui-modern:not(.ui-light) .altivy-toast--success {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border-left-color: var(--altivy-primary);
}

body.ui-modern:not(.ui-light) .altivy-toast--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-left-color: var(--altivy-warning);
}

body.ui-modern:not(.ui-light) .altivy-toast--error,
body.ui-modern:not(.ui-light) .altivy-toast--danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-left-color: var(--altivy-danger);
}

body.ui-modern:not(.ui-light) .altivy-toast__close {
  color: rgba(255, 255, 255, 0.6);
}

body.ui-modern:not(.ui-light) .altivy-toast__close:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Alert dismiss button */
body.ui-modern .alert .close {
  color: inherit !important;
  opacity: 0.7 !important;
  transition: opacity var(--altivy-transition) !important;
}

body.ui-modern .alert .close:hover {
  opacity: 1 !important;
}


/* ============================================
   PRIMARY BUTTONS - AVIATION BLUE
   ============================================ */

/* Primary button (was green, now Aviation Blue) */
body.ui-modern .btn-primary,
body.ui-modern .btn-success {
  background: var(--altivy-primary) !important;
  border: none !important;
  color: var(--altivy-white) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-primary:hover,
body.ui-modern .btn-success:hover {
  background: var(--altivy-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--altivy-shadow) !important;
}

body.ui-modern .btn-primary:active,
body.ui-modern .btn-success:active {
  transform: translateY(0) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-primary:focus-visible,
body.ui-modern .btn-success:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
}

/* Secondary/Default button */
body.ui-modern .btn-default,
body.ui-modern .btn-secondary {
  background: var(--altivy-card-bg) !important;
  border: 1px solid var(--altivy-gray-300) !important;
  color: var(--altivy-gray-700) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-default:hover,
body.ui-modern .btn-secondary:hover {
  background: var(--altivy-gray-100) !important;
  border-color: var(--altivy-gray-400) !important;
  color: var(--altivy-gray-900) !important;
}

/* Danger button */
body.ui-modern .btn-danger {
  background: var(--altivy-danger) !important;
  border: none !important;
  color: var(--altivy-white) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-danger:hover {
  background: #dc2626 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--altivy-shadow) !important;
}

/* Warning button */
body.ui-modern .btn-warning {
  background: var(--altivy-warning) !important;
  border: none !important;
  color: var(--altivy-white) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-warning:hover {
  background: #d97706 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--altivy-shadow) !important;
}

/* Button sizes */
body.ui-modern .btn-lg {
  padding: 12px 24px !important;
  font-size: var(--altivy-font-size-base) !important;
}

body.ui-modern .btn-sm {
  padding: 6px 12px !important;
  font-size: var(--altivy-font-size-xs) !important;
}

/* Button group styling */
body.ui-modern .btn-group .btn {
  border-radius: 0 !important;
}

body.ui-modern .btn-group .btn:first-child {
  border-radius: var(--altivy-border-radius) 0 0 var(--altivy-border-radius) !important;
}

body.ui-modern .btn-group .btn:last-child {
  border-radius: 0 var(--altivy-border-radius) var(--altivy-border-radius) 0 !important;
}

body.ui-modern .btn-group .btn:only-child {
  border-radius: var(--altivy-border-radius) !important;
}

/* Light theme button adjustments */
body.ui-modern.ui-light .btn-default,
body.ui-modern.ui-light .btn-secondary {
  background: var(--altivy-white) !important;
  border-color: var(--altivy-gray-300) !important;
}

body.ui-modern.ui-light .btn-default:hover,
body.ui-modern.ui-light .btn-secondary:hover {
  background: var(--altivy-gray-50) !important;
}


/* ============================================
   OUTLINE BUTTONS - AVIATION BLUE THEME
   ============================================ */

/* Primary outline button */
body.ui-modern .btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--altivy-primary) !important;
  color: var(--altivy-primary) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-primary:hover,
body.ui-modern .btn-outline-primary:focus {
  background: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-outline-primary:active {
  transform: translateY(0) !important;
}

body.ui-modern .btn-outline-primary:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
}

/* Success outline button - convert green to Aviation Blue */
body.ui-modern .btn-outline-success {
  background: transparent !important;
  border: 2px solid var(--altivy-primary) !important;
  color: var(--altivy-primary) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-success:hover,
body.ui-modern .btn-outline-success:focus {
  background: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-outline-success:active {
  transform: translateY(0) !important;
}

/* Secondary outline button */
body.ui-modern .btn-outline-secondary {
  background: transparent !important;
  border: 2px solid var(--altivy-gray-400) !important;
  color: var(--altivy-gray-600) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-secondary:hover,
body.ui-modern .btn-outline-secondary:focus {
  background: var(--altivy-gray-100) !important;
  border-color: var(--altivy-gray-500) !important;
  color: var(--altivy-gray-800) !important;
}

/* Info outline button */
body.ui-modern .btn-outline-info {
  background: transparent !important;
  border: 2px solid var(--altivy-info) !important;
  color: var(--altivy-info) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-info:hover,
body.ui-modern .btn-outline-info:focus {
  background: var(--altivy-info) !important;
  color: var(--altivy-white) !important;
}

/* Warning outline button */
body.ui-modern .btn-outline-warning {
  background: transparent !important;
  border: 2px solid var(--altivy-warning) !important;
  color: var(--altivy-warning) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-warning:hover,
body.ui-modern .btn-outline-warning:focus {
  background: var(--altivy-warning) !important;
  color: var(--altivy-white) !important;
}

/* Danger outline button */
body.ui-modern .btn-outline-danger {
  background: transparent !important;
  border: 2px solid var(--altivy-danger) !important;
  color: var(--altivy-danger) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-danger:hover,
body.ui-modern .btn-outline-danger:focus {
  background: var(--altivy-danger) !important;
  color: var(--altivy-white) !important;
}

/* Light outline button */
body.ui-modern .btn-outline-light {
  background: transparent !important;
  border: 2px solid var(--altivy-gray-300) !important;
  color: var(--altivy-gray-600) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-light:hover,
body.ui-modern .btn-outline-light:focus {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-800) !important;
}

/* Dark outline button */
body.ui-modern .btn-outline-dark {
  background: transparent !important;
  border: 2px solid var(--altivy-gray-800) !important;
  color: var(--altivy-gray-800) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 8px 18px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-outline-dark:hover,
body.ui-modern .btn-outline-dark:focus {
  background: var(--altivy-gray-800) !important;
  color: var(--altivy-white) !important;
}


/* ============================================
   LINK BUTTONS
   ============================================ */

body.ui-modern .btn-link {
  background: transparent !important;
  border: none !important;
  color: var(--altivy-primary) !important;
  padding: 8px 16px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all var(--altivy-transition) !important;
}

body.ui-modern .btn-link:hover {
  color: var(--altivy-primary-hover) !important;
  text-decoration: underline !important;
}

body.ui-modern .btn-link:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--altivy-border-radius) !important;
}


/* ============================================
   TOGGLE BUTTON GROUPS (Calendar view/Off style)
   ============================================ */

/* Toggle button group container */
body.ui-modern .btn-group-toggle,
body.ui-modern .btn-group[data-toggle="buttons"] {
  border-radius: var(--altivy-border-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

/* Toggle buttons base style */
body.ui-modern .btn-group-toggle .btn,
body.ui-modern .btn-group[data-toggle="buttons"] .btn {
  border-radius: 0 !important;
  border: 2px solid var(--altivy-gray-300) !important;
  background: var(--altivy-card-bg) !important;
  color: var(--altivy-gray-600) !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: all var(--altivy-transition) !important;
  margin: 0 !important;
}

body.ui-modern .btn-group-toggle .btn:first-child,
body.ui-modern .btn-group[data-toggle="buttons"] .btn:first-child {
  border-radius: var(--altivy-border-radius) 0 0 var(--altivy-border-radius) !important;
}

body.ui-modern .btn-group-toggle .btn:last-child,
body.ui-modern .btn-group[data-toggle="buttons"] .btn:last-child {
  border-radius: 0 var(--altivy-border-radius) var(--altivy-border-radius) 0 !important;
  border-left: none !important;
}

/* Active/checked state */
body.ui-modern .btn-group-toggle .btn.active,
body.ui-modern .btn-group-toggle .btn:checked,
body.ui-modern .btn-group[data-toggle="buttons"] .btn.active {
  background: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover state for inactive buttons */
body.ui-modern .btn-group-toggle .btn:not(.active):hover,
body.ui-modern .btn-group[data-toggle="buttons"] .btn:not(.active):hover {
  background: var(--altivy-gray-100) !important;
  border-color: var(--altivy-primary) !important;
  color: var(--altivy-primary) !important;
}

/* Focus state */
body.ui-modern .btn-group-toggle .btn:focus-visible,
body.ui-modern .btn-group[data-toggle="buttons"] .btn:focus-visible {
  outline: 2px solid var(--altivy-primary) !important;
  outline-offset: 2px !important;
  z-index: 1 !important;
}

/* Info button style */
body.ui-modern .btn-info {
  background: var(--altivy-info) !important;
  border: none !important;
  color: var(--altivy-white) !important;
  border-radius: var(--altivy-border-radius) !important;
  padding: 10px 20px !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--altivy-font-size-sm) !important;
  transition: all var(--altivy-transition) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
}

body.ui-modern .btn-info:hover {
  background: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--altivy-shadow) !important;
}


/* ============================================
   TEXT COLOR UTILITIES - AVIATION BLUE
   ============================================ */

/* Convert green text to Aviation Blue */
body.ui-modern .text-success {
  color: var(--altivy-primary) !important;
}

body.ui-modern .text-primary {
  color: var(--altivy-primary) !important;
}

body.ui-modern .text-info {
  color: var(--altivy-info) !important;
}

body.ui-modern .text-warning {
  color: var(--altivy-warning) !important;
}

body.ui-modern .text-danger {
  color: var(--altivy-danger) !important;
}

body.ui-modern .text-muted {
  color: var(--altivy-gray-500) !important;
}


/* ============================================
   BORDER COLOR UTILITIES - AVIATION BLUE
   ============================================ */

/* Convert green borders to Aviation Blue */
body.ui-modern .border-success {
  border-color: var(--altivy-primary) !important;
}

body.ui-modern .border-primary {
  border-color: var(--altivy-primary) !important;
}

body.ui-modern .border-info {
  border-color: var(--altivy-info) !important;
}

body.ui-modern .border-warning {
  border-color: var(--altivy-warning) !important;
}

body.ui-modern .border-danger {
  border-color: var(--altivy-danger) !important;
}


/* ============================================
   LINK COLORS - AVIATION BLUE
   ============================================ */

/* Standard links */
body.ui-modern a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--altivy-primary) !important;
  text-decoration: none !important;
  transition: color var(--altivy-transition) !important;
}

body.ui-modern a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--altivy-primary-hover) !important;
  text-decoration: underline !important;
}

/* Sidebar links: override general link colors (higher specificity needed) */
body.ui-modern .side-navbar a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
}
body.ui-modern .side-navbar a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
body.ui-modern .side-navbar li.active > a:not(.btn):not(.nav-link):not(.dropdown-item),
body.ui-modern .side-navbar .collapse li.active > a:not(.btn):not(.nav-link):not(.dropdown-item),
body.ui-modern .side-navbar .collapse li:hover > a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #ffffff !important;
  text-decoration: none !important;
}
/* Light mode: sidebar links need same high specificity to override the dark mode rule above */
body.ui-modern.ui-light .side-navbar a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--altivy-gray-700) !important;
}
body.ui-modern.ui-light .side-navbar a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--altivy-gray-900) !important;
}
body.ui-modern.ui-light .side-navbar .collapse li.active > a:not(.btn):not(.nav-link):not(.dropdown-item),
body.ui-modern.ui-light .side-navbar .collapse li:hover > a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--altivy-primary) !important;
}

/* Breadcrumb links — muted gray, blue only on hover to reduce "sea of blue" */
body.ui-modern .breadcrumb a,
body.ui-modern .breadcrumb-item a {
  color: var(--altivy-gray-500) !important;
  font-weight: 500 !important;
}

body.ui-modern .breadcrumb a:hover,
body.ui-modern .breadcrumb-item a:hover {
  color: var(--altivy-primary) !important;
}

/* Page header links */
body.ui-modern h1 a,
body.ui-modern h2 a,
body.ui-modern h3 a,
body.ui-modern h4 a,
body.ui-modern .page-header a {
  color: var(--altivy-primary) !important;
}

body.ui-modern h1 a:hover,
body.ui-modern h2 a:hover,
body.ui-modern h3 a:hover,
body.ui-modern h4 a:hover,
body.ui-modern .page-header a:hover {
  color: var(--altivy-primary-hover) !important;
}


/* ============================================
   iOS-STYLE TOGGLE IN CONTENT AREA
   (Same style as theme toggle, but for content)
   ============================================ */

/* Toggle in content area (outside navbar) - uses same .ui-toggle class */
body.ui-modern .a_form .ui-toggle,
body.ui-modern .card .ui-toggle,
body.ui-modern .panel .ui-toggle,
body.ui-modern main .ui-toggle {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  user-select: none;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Space between a button and an adjacent toggle (e.g. Calendar view + Today Only) */
body.ui-modern .a_form .btn + .ui-toggle {
  margin-left: 16px !important;
}

/* Slider in content area - same as navbar but with adjusted colors for light bg */
body.ui-modern .a_form .ui-toggle-slider,
body.ui-modern .card .ui-toggle-slider,
body.ui-modern .panel .ui-toggle-slider,
body.ui-modern main .ui-toggle-slider {
  background-color: var(--altivy-gray-300) !important;
}

body.ui-modern .a_form .ui-toggle input:checked + .ui-toggle-slider,
body.ui-modern .card .ui-toggle input:checked + .ui-toggle-slider,
body.ui-modern .panel .ui-toggle input:checked + .ui-toggle-slider,
body.ui-modern main .ui-toggle input:checked + .ui-toggle-slider {
  background-color: var(--altivy-primary) !important;
}

/* Label text in content area - Aviation Blue */
body.ui-modern .a_form .ui-toggle-label,
body.ui-modern .card .ui-toggle-label,
body.ui-modern .panel .ui-toggle-label,
body.ui-modern main .ui-toggle-label {
  color: var(--altivy-gray-600) !important;
  font-size: var(--altivy-font-size-sm) !important;
  font-weight: 500 !important;
  font-family: var(--altivy-font-family) !important;
}

body.ui-modern .a_form .ui-toggle input:checked ~ .ui-toggle-label,
body.ui-modern .card .ui-toggle input:checked ~ .ui-toggle-label,
body.ui-modern .panel .ui-toggle input:checked ~ .ui-toggle-label,
body.ui-modern main .ui-toggle input:checked ~ .ui-toggle-label {
  color: var(--altivy-primary) !important;
}


/* ============================================
   DARK MODE - FORM SECTIONS & ALERTS
   ============================================ */

/* --- Alerts --- */
/* Catch-all: ensure ALL alerts are readable in dark mode */
body.ui-modern:not(.ui-light) .alert {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--altivy-gray-200) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.ui-modern:not(.ui-light) .alert-success {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
  border-left: 4px solid var(--altivy-primary) !important;
}

body.ui-modern:not(.ui-light) .alert-info {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #7dd3fc !important;
  border-left: 4px solid var(--altivy-info) !important;
}

body.ui-modern:not(.ui-light) .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-left: 4px solid var(--altivy-warning) !important;
}

body.ui-modern:not(.ui-light) .alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-left: 4px solid var(--altivy-danger) !important;
}

/* Django uses "error" message tag → alert-error class (not alert-danger) */
body.ui-modern:not(.ui-light) .alert-error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-left: 4px solid var(--altivy-danger) !important;
}

body.ui-modern:not(.ui-light) .alert a {
  color: var(--altivy-primary) !important;
}

/* --- Form section groups (dashed borders with light backgrounds) --- */
body.ui-modern:not(.ui-light) .form_field_group,
body.ui-modern:not(.ui-light) .custom_attributes,
body.ui-modern:not(.ui-light) .sub_form_group_section {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--altivy-gray-600) !important;
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .on_demand_form_section {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: var(--altivy-gray-600) !important;
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .altivy_tos {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: var(--altivy-gray-600) !important;
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .altivy_formset {
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .invoice_item_table {
  border-color: var(--altivy-gray-600) !important;
}

/* --- In-form warnings and notes --- */
body.ui-modern:not(.ui-light) .in_form_warning {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: var(--altivy-gray-600) !important;
  color: #fca5a5 !important;
}

body.ui-modern:not(.ui-light) .in_form_note {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: var(--altivy-gray-600) !important;
  color: #fcd34d !important;
}

/* --- Superuser section (inline style bg:#fdd) --- */
body.ui-modern:not(.ui-light) div[style*="background-color: #fdd"] {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border-color: var(--altivy-gray-500) !important;
  color: var(--altivy-gray-200) !important;
}

/* --- Main form container (a_form) --- */
body.ui-modern:not(.ui-light) .a_form {
  background: var(--altivy-sidebar-bg-dark) !important;
  border-color: var(--altivy-gray-700) !important;
}

/* --- Form select/input elements in dark mode --- */
body.ui-modern:not(.ui-light) .form-control,
body.ui-modern:not(.ui-light) textarea.form-control {
  background-color: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
}

/* select.form-control: override the padding rule from .form-control above.
   Native <select> elements already reserve right-side space for the browser's
   dropdown arrow; the extra 1rem right padding from the .form-control rule
   stacks on top of that and shrinks the visible text area, causing truncation.
   Use Bootstrap 4 default padding so the browser manages arrow space itself. */
body.ui-modern:not(.ui-light) select.form-control {
  background-color: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
  border-radius: 10px !important;
  padding: 0.375rem 0.75rem !important;
}

/* --- Input group addons (e.g. "NZD" prefix) --- */
body.ui-modern:not(.ui-light) .input-group-text {
  background-color: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-300) !important;
  border-color: var(--altivy-gray-600) !important;
}

/* --- Bootstrap-Select dropdowns --- */
body.ui-modern:not(.ui-light) .bootstrap-select > .dropdown-toggle {
  background-color: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-select .dropdown-menu {
  background-color: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-select .dropdown-menu .dropdown-item {
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-select .dropdown-menu .dropdown-item:hover,
body.ui-modern:not(.ui-light) .bootstrap-select .dropdown-menu .dropdown-item.active {
  background-color: var(--altivy-gray-700) !important;
  color: var(--altivy-white) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-select .filter-option-inner-inner {
  color: var(--altivy-gray-200) !important;
}

/* --- Select2 dropdowns (default, classic, and bootstrap themes) --- */
body.ui-modern:not(.ui-light) .select2-container--default .select2-selection--single,
body.ui-modern:not(.ui-light) .select2-container--default .select2-selection--multiple,
body.ui-modern:not(.ui-light) .select2-container--classic .select2-selection--single,
body.ui-modern:not(.ui-light) .select2-container--classic .select2-selection--multiple,
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection--single,
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection--multiple {
  background-color: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .select2-container--default .select2-selection--single .select2-selection__rendered,
body.ui-modern:not(.ui-light) .select2-container--classic .select2-selection--single .select2-selection__rendered,
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .select2-container--default .select2-selection--single .select2-selection__arrow,
body.ui-modern:not(.ui-light) .select2-container--classic .select2-selection--single .select2-selection__arrow,
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
  background-color: var(--altivy-gray-700) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .select2-dropdown {
  background-color: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .select2-search--dropdown .select2-search__field {
  background-color: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .select2-results__option {
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .select2-container--default .select2-results__option--highlighted[aria-selected],
body.ui-modern:not(.ui-light) .select2-container--classic .select2-results__option--highlighted[aria-selected],
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--altivy-primary) !important;
  color: var(--altivy-white) !important;
}

body.ui-modern:not(.ui-light) .select2-container--default .select2-selection--multiple .select2-selection__choice,
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  background-color: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
}

/* Select2 bootstrap theme: clear button and placeholder */
body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection__placeholder {
  color: var(--altivy-gray-500) !important;
}

body.ui-modern:not(.ui-light) .select2-container--bootstrap .select2-selection__clear {
  color: var(--altivy-gray-400) !important;
}

/* --- Standard HTML select elements (non-widget) --- */
body.ui-modern:not(.ui-light) select,
body.ui-modern:not(.ui-light) input[type="text"],
body.ui-modern:not(.ui-light) input[type="number"],
body.ui-modern:not(.ui-light) input[type="email"],
body.ui-modern:not(.ui-light) input[type="password"],
body.ui-modern:not(.ui-light) input[type="url"],
body.ui-modern:not(.ui-light) input[type="tel"],
body.ui-modern:not(.ui-light) input[type="date"],
body.ui-modern:not(.ui-light) input[type="time"],
body.ui-modern:not(.ui-light) input[type="datetime-local"],
body.ui-modern:not(.ui-light) textarea {
  background-color: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-200) !important;
  border-color: var(--altivy-gray-600) !important;
}

/* Placeholder text in dark mode */
body.ui-modern:not(.ui-light) ::placeholder {
  color: var(--altivy-gray-500) !important;
  opacity: 1 !important;
}


/* ============================================
   BOOKINGS TABLE — QUICK ACTION BUTTONS
   ============================================ */

body.ui-modern .altivy-quick-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

body.ui-modern .altivy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: var(--altivy-border-radius) !important;
  border: 1.5px solid var(--altivy-gray-300) !important;
  background: #fff !important;
  color: var(--altivy-gray-500) !important;
  font-size: 15px !important;
  transition: all var(--altivy-transition) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
}

/* Ensure links styled as action buttons stay styled */
body.ui-modern a.altivy-action-btn,
body.ui-modern a.altivy-action-btn:link,
body.ui-modern a.altivy-action-btn:visited {
  border: 1.5px solid var(--altivy-gray-300) !important;
  background: #fff !important;
  color: var(--altivy-gray-500) !important;
  text-decoration: none !important;
}

body.ui-modern .altivy-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--altivy-shadow-sm) !important;
  text-decoration: none !important;
}

/* Contextual primary action — default colored state */
body.ui-modern a.altivy-action-btn--view:link,
body.ui-modern a.altivy-action-btn--view:visited,
body.ui-modern .altivy-action-btn--view {
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

body.ui-modern a.altivy-action-btn--start:link,
body.ui-modern a.altivy-action-btn--start:visited,
body.ui-modern a.altivy-action-btn--approve:link,
body.ui-modern a.altivy-action-btn--approve:visited,
body.ui-modern .altivy-action-btn--start,
body.ui-modern .altivy-action-btn--approve {
  color: var(--altivy-success) !important;
  border-color: var(--altivy-success) !important;
}

body.ui-modern a.altivy-action-btn--end:link,
body.ui-modern a.altivy-action-btn--end:visited,
body.ui-modern .altivy-action-btn--end {
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

/* Contextual primary action — hover state */
body.ui-modern .altivy-action-btn--view:hover {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

body.ui-modern .altivy-action-btn--start:hover,
body.ui-modern .altivy-action-btn--approve:hover {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-success) !important;
  border-color: var(--altivy-success) !important;
}

body.ui-modern .altivy-action-btn--end:hover {
  background: var(--altivy-status-in-progress-bg) !important;
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

body.ui-modern .altivy-action-btn--cancel:hover {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-danger) !important;
  border-color: var(--altivy-danger) !important;
}

body.ui-modern .altivy-action-btn--more {
  border: 1.5px solid var(--altivy-gray-300) !important;
  background: #fff !important;
}

/* Hide Bootstrap dropdown caret on the more button */
body.ui-modern .altivy-action-btn--more.dropdown-toggle::after {
  display: none !important;
}

body.ui-modern .altivy-action-btn--more:hover {
  background: var(--altivy-gray-100) !important;
  color: var(--altivy-gray-700) !important;
  border-color: var(--altivy-gray-400) !important;
}

/* Dark theme action buttons */
body.ui-modern:not(.ui-light) .altivy-action-btn,
body.ui-modern:not(.ui-light) a.altivy-action-btn,
body.ui-modern:not(.ui-light) a.altivy-action-btn:link,
body.ui-modern:not(.ui-light) a.altivy-action-btn:visited {
  border-color: var(--altivy-gray-600) !important;
  background: var(--altivy-gray-800) !important;
  color: var(--altivy-gray-400) !important;
}

/* Dark theme — preserve contextual colors on primary action */
body.ui-modern:not(.ui-light) .altivy-action-btn--view,
body.ui-modern:not(.ui-light) a.altivy-action-btn--view,
body.ui-modern:not(.ui-light) a.altivy-action-btn--view:link,
body.ui-modern:not(.ui-light) a.altivy-action-btn--view:visited {
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

body.ui-modern:not(.ui-light) .altivy-action-btn--start,
body.ui-modern:not(.ui-light) .altivy-action-btn--approve {
  color: var(--altivy-success) !important;
  border-color: var(--altivy-success) !important;
}

body.ui-modern:not(.ui-light) .altivy-action-btn--end {
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
}

body.ui-modern:not(.ui-light) .altivy-action-btn--more {
  background: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .altivy-action-btn--more:hover {
  background: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-200) !important;
}


/* Action column cell needs enough width for the buttons */
body.ui-modern td.action-column-cell {
  white-space: nowrap !important;
}

/* Ensure action buttons work in fixed-columns overlay */
body.ui-modern .fixed-columns-right .altivy-action-btn,
body.ui-modern .fixed-columns .altivy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 1.5px solid var(--altivy-gray-300) !important;
  background: #fff !important;
  border-radius: var(--altivy-border-radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body.ui-modern .fixed-columns-right .altivy-action-btn--more.dropdown-toggle::after,
body.ui-modern .fixed-columns .altivy-action-btn--more.dropdown-toggle::after {
  display: none !important;
}


/* ============================================
   BOOKING CALENDAR SLOTS — DARK MODE
   booking_cal_slots.html (Select time slot page)
   ============================================ */

/* Container wrapper has inline style="background-color:#eee" */
body.ui-modern:not(.ui-light) div[style*="background-color:#eee"] {
  background-color: var(--altivy-gray-900) !important;
  color: var(--altivy-gray-200) !important;
}

/* Grid cells — dark background instead of light blue #eef */
body.ui-modern:not(.ui-light) .cal_view td {
  background-color: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

/* Time label and header cells — darker background */
body.ui-modern:not(.ui-light) .cal_view .cal_legend {
  background-color: var(--altivy-gray-900) !important;
  color: var(--altivy-gray-300) !important;
}

/* Day header cells (Wed 18, Thu 19, etc.) */
body.ui-modern:not(.ui-light) .cal_view .cal_header_cell {
  color: var(--altivy-white) !important;
}

/* Header borders */
body.ui-modern:not(.ui-light) .cal_view .cal_header {
  border-color: var(--altivy-gray-600) !important;
}

/* Half-hour row border */
body.ui-modern:not(.ui-light) .cal_view .not_full_hour {
  border-bottom-color: var(--altivy-gray-600) !important;
}

/* Today column highlight — muted yellow for dark mode */
body.ui-modern:not(.ui-light) .cal_view .cal_header_today {
  background-color: rgba(255, 255, 153, 0.15) !important;
}

/* Booking slot boxes — keep dynamic colors, ensure text readability */
body.ui-modern:not(.ui-light) .cal_view .cal_slot_value {
  color: #1a1a2e !important;
  border-color: var(--altivy-gray-500) !important;
  font-weight: 600;
}

body.ui-modern:not(.ui-light) .cal_slot_value:hover {
  filter: saturate(190%) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)) !important;
}

/* Unavailable slots — dark styling (overrides inline styles) */
body.ui-modern:not(.ui-light) .cal_slot_unavailable {
  background-color: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-400) !important;
}

/* Legend section */
body.ui-modern:not(.ui-light) .legend-table td {
  border-right-color: var(--altivy-gray-600) !important;
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .legend-table tr {
  border-top-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .legend-circle {
  border-color: var(--altivy-gray-400) !important;
}

/* Headings and text inside the calendar container */
body.ui-modern:not(.ui-light) div[style*="background-color:#eee"] h3,
body.ui-modern:not(.ui-light) div[style*="background-color:#eee"] h4 {
  color: var(--altivy-white) !important;
}

body.ui-modern:not(.ui-light) div[style*="background-color:#eee"] hr {
  border-top-color: var(--altivy-gray-600) !important;
}

/* Popover dark mode (for slot detail popovers) */
body.ui-modern:not(.ui-light) .popover {
  background-color: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .popover-body {
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .popover .arrow::after {
  border-bottom-color: var(--altivy-gray-800) !important;
}

body.ui-modern:not(.ui-light) .popover .arrow::before {
  border-bottom-color: var(--altivy-gray-600) !important;
}


/* ============================================
   BOOKINGS TABLE — SECTION HEADERS (Accordion)
   ============================================ */

body.ui-modern .altivy-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--altivy-section-header-bg) !important;
  border: none !important;
  padding: 14px 20px !important;
  cursor: pointer !important;
  transition: all var(--altivy-transition) !important;
  border-radius: var(--altivy-border-radius-lg) var(--altivy-border-radius-lg) 0 0 !important;
  text-align: left !important;
}

body.ui-modern .altivy-section-header:hover {
  filter: brightness(1.1) !important;
}

body.ui-modern .altivy-section-header__content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.ui-modern .altivy-section-header__title {
  color: white !important;
  font-family: var(--altivy-font-family) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.ui-modern .altivy-section-header__count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  font-family: var(--altivy-font-family) !important;
}

body.ui-modern .altivy-section-header__chevron {
  color: white !important;
  font-size: 1.1rem !important;
  transition: transform 0.3s ease !important;
}

body.ui-modern .altivy-section-header.collapsed .altivy-section-header__chevron {
  transform: rotate(-90deg) !important;
}

/* When the collapse is not shown, the header gets bottom radius */
body.ui-modern .altivy-section-header.collapsed {
  border-radius: var(--altivy-border-radius-lg) !important;
}


/* ============================================
   BOOKINGS TABLE — EMPTY STATES
   ============================================ */

body.ui-modern .altivy-empty-state {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--altivy-gray-400) !important;
}

body.ui-modern .altivy-empty-state__icon {
  font-size: 3rem !important;
  margin-bottom: 12px !important;
  display: block !important;
  opacity: 0.5 !important;
}

body.ui-modern .altivy-empty-state__text {
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-base) !important;
  color: var(--altivy-gray-500) !important;
  margin: 0 !important;
}

body.ui-modern:not(.ui-light) .altivy-empty-state__text {
  color: var(--altivy-gray-400) !important;
}


/* ============================================
   BOOKINGS TABLE — FILTER CHIPS
   ============================================ */

body.ui-modern .altivy-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 0 16px !important;
  flex-wrap: wrap !important;
}

body.ui-modern .altivy-filter-label {
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  font-weight: 500 !important;
  color: var(--altivy-gray-500) !important;
  margin-right: 4px !important;
}

body.ui-modern .altivy-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  border: 1.5px solid var(--altivy-gray-300) !important;
  background: var(--altivy-surface, #fff) !important;
  color: var(--altivy-gray-600) !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--altivy-transition) !important;
  white-space: nowrap !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}

/* --- Filter chip: default hover/active (for "All" and unmatched) --- */
body.ui-modern .altivy-filter-chip:hover {
  border-color: var(--altivy-primary) !important;
  color: var(--altivy-primary) !important;
  background: var(--altivy-primary-light) !important;
}

body.ui-modern .altivy-filter-chip.active {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3) !important;
}

/* --- Filter chips: status-matched idle colors (light mode) --- */
body.ui-modern .altivy-filter-chip[data-filter="in-progress"] {
  color: var(--altivy-status-in-progress-text) !important;
  border-color: var(--altivy-status-in-progress-text) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="pending"] {
  color: var(--altivy-status-pending-text) !important;
  border-color: var(--altivy-status-pending-text) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="ready"] {
  color: var(--altivy-status-ready-text) !important;
  border-color: var(--altivy-status-ready-text) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="booked"] {
  color: var(--altivy-status-booked-text) !important;
  border-color: var(--altivy-status-booked-text) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="issues"] {
  color: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-text) !important;
}

/* --- Filter chips: status-matched hover colors --- */
body.ui-modern .altivy-filter-chip[data-filter="in-progress"]:hover {
  background: var(--altivy-status-in-progress-bg) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="pending"]:hover {
  background: var(--altivy-status-pending-bg) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="ready"]:hover {
  background: var(--altivy-status-ready-bg) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="booked"]:hover {
  background: var(--altivy-status-booked-bg) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="issues"]:hover {
  background: var(--altivy-status-error-bg) !important;
}

/* --- Filter chips: status-matched active (selected) state --- */
body.ui-modern .altivy-filter-chip[data-filter="in-progress"].active {
  background: var(--altivy-status-in-progress-text) !important;
  border-color: var(--altivy-status-in-progress-text) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="pending"].active {
  background: var(--altivy-status-pending-text) !important;
  border-color: var(--altivy-status-pending-text) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(146, 64, 14, 0.3) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="ready"].active {
  background: var(--altivy-status-ready-text) !important;
  border-color: var(--altivy-status-ready-text) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(4, 120, 87, 0.3) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="booked"].active {
  background: var(--altivy-status-booked-text) !important;
  border-color: var(--altivy-status-booked-text) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(59, 89, 152, 0.3) !important;
}

body.ui-modern .altivy-filter-chip[data-filter="issues"].active {
  background: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-text) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(153, 27, 27, 0.3) !important;
}

body.ui-modern .altivy-filter-chip .altivy-filter-count {
  font-size: 0.65rem !important;
  background: rgba(0, 0, 0, 0.1) !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
}

body.ui-modern .altivy-filter-chip.active .altivy-filter-count {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* --- Dark theme filter chips --- */
body.ui-modern:not(.ui-light) .altivy-filter-chip {
  border-color: var(--altivy-gray-500) !important;
  color: #e2e8f0 !important;
  background: var(--altivy-gray-800, #1e293b) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Dark theme: status-matched idle colors */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="in-progress"] {
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="pending"] {
  color: #fcd34d !important;
  border-color: #fcd34d !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="ready"] {
  color: #6ee7b7 !important;
  border-color: #6ee7b7 !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="booked"] {
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="issues"] {
  color: #fca5a5 !important;
  border-color: #fca5a5 !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip:hover {
  border-color: var(--altivy-primary) !important;
  color: var(--altivy-primary-light) !important;
  background: rgba(37, 99, 235, 0.2) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip.active {
  background: var(--altivy-primary) !important;
  color: #fff !important;
  border-color: var(--altivy-primary) !important;
}

/* Dark theme: status-matched active state */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="in-progress"].active {
  background: var(--altivy-status-in-progress-text) !important;
  border-color: var(--altivy-status-in-progress-text) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="pending"].active {
  background: var(--altivy-status-pending-text) !important;
  border-color: var(--altivy-status-pending-text) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="ready"].active {
  background: var(--altivy-status-ready-text) !important;
  border-color: var(--altivy-status-ready-text) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="booked"].active {
  background: var(--altivy-status-booked-text) !important;
  border-color: var(--altivy-status-booked-text) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="issues"].active {
  background: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-text) !important;
}

body.ui-modern:not(.ui-light) .altivy-filter-label {
  color: var(--altivy-gray-300) !important;
}


/* ============================================
   BOOKINGS TABLE — EXPANDABLE ROW DETAILS
   ============================================ */

body.ui-modern .altivy-booking-detail {
  padding: 20px !important;
  background: var(--altivy-gray-50) !important;
  border-top: 2px solid var(--altivy-primary-light) !important;
}

body.ui-modern .altivy-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

@media (max-width: 768px) {
  body.ui-modern .altivy-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

body.ui-modern .altivy-detail-section {
  padding: 0 !important;
}

body.ui-modern .altivy-detail-section__title {
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--altivy-gray-400) !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--altivy-gray-200) !important;
}

body.ui-modern .altivy-detail-info {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 16px !important;
  font-size: var(--altivy-font-size-sm) !important;
}

body.ui-modern .altivy-detail-label {
  font-weight: 500 !important;
  color: var(--altivy-gray-500) !important;
}

body.ui-modern .altivy-detail-value {
  color: var(--altivy-gray-700) !important;
}

body.ui-modern .altivy-detail-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.ui-modern .altivy-detail-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: var(--altivy-border-radius) !important;
  border: 1px solid var(--altivy-gray-200) !important;
  background: var(--altivy-card-bg) !important;
  color: var(--altivy-gray-600) !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-xs) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all var(--altivy-transition) !important;
  cursor: pointer !important;
}

body.ui-modern .altivy-detail-action:hover {
  background: var(--altivy-primary-light) !important;
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
  text-decoration: none !important;
}

body.ui-modern .altivy-detail-action--danger {
  color: var(--altivy-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

body.ui-modern .altivy-detail-action--danger:hover {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-danger) !important;
  border-color: var(--altivy-danger) !important;
}

body.ui-modern .altivy-detail-action--success {
  color: var(--altivy-success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

body.ui-modern .altivy-detail-action--success:hover {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-success) !important;
  border-color: var(--altivy-success) !important;
}

/* Dark theme detail panel */
body.ui-modern:not(.ui-light) .altivy-booking-detail {
  background: var(--altivy-gray-800) !important;
  border-top-color: rgba(37, 99, 235, 0.3) !important;
}

body.ui-modern:not(.ui-light) .altivy-detail-section__title {
  color: var(--altivy-gray-500) !important;
  border-bottom-color: var(--altivy-gray-700) !important;
}

body.ui-modern:not(.ui-light) .altivy-detail-value {
  color: var(--altivy-gray-200) !important;
}

body.ui-modern:not(.ui-light) .altivy-detail-action,
body.ui-modern:not(.ui-light) a.altivy-detail-action,
body.ui-modern:not(.ui-light) a.altivy-detail-action:link,
body.ui-modern:not(.ui-light) a.altivy-detail-action:visited {
  background: var(--altivy-gray-700) !important;
  color: var(--altivy-gray-300) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .altivy-detail-action:hover,
body.ui-modern:not(.ui-light) a.altivy-detail-action:hover {
  background: rgba(37, 99, 235, 0.15) !important;
  color: var(--altivy-primary-light) !important;
}


/* ============================================
   BOOKINGS TABLE — HOVER PREVIEW CARD
   ============================================ */

body.ui-modern .altivy-hover-preview {
  position: absolute !important;
  z-index: 9999 !important;
  max-width: 320px !important;
  padding: 14px 18px !important;
  background: var(--altivy-card-bg) !important;
  border-radius: var(--altivy-border-radius-lg) !important;
  box-shadow: var(--altivy-shadow-xl) !important;
  border: 1px solid var(--altivy-gray-200) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  font-family: var(--altivy-font-family) !important;
}

body.ui-modern .altivy-hover-preview.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.ui-modern .altivy-hover-preview__header {
  font-weight: 600 !important;
  font-size: var(--altivy-font-size-sm) !important;
  color: var(--altivy-gray-900) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.ui-modern .altivy-hover-preview__row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--altivy-font-size-xs) !important;
  color: var(--altivy-gray-500) !important;
  margin-top: 4px !important;
}

body.ui-modern .altivy-hover-preview__row .bi {
  font-size: 12px !important;
  color: var(--altivy-gray-400) !important;
  width: 14px !important;
  text-align: center !important;
}

body.ui-modern .altivy-hover-preview__notes {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--altivy-gray-100) !important;
  font-size: var(--altivy-font-size-xs) !important;
  color: var(--altivy-gray-400) !important;
  font-style: italic !important;
}

/* Dark theme hover preview */
body.ui-modern:not(.ui-light) .altivy-hover-preview {
  background: var(--altivy-gray-800) !important;
  border-color: var(--altivy-gray-600) !important;
}

body.ui-modern:not(.ui-light) .altivy-hover-preview__header {
  color: var(--altivy-gray-100) !important;
}

body.ui-modern:not(.ui-light) .altivy-hover-preview__notes {
  border-top-color: var(--altivy-gray-700) !important;
}


/* ============================================
   BOOKINGS TABLE — TOAST NOTIFICATION
   ============================================ */

body.ui-modern .altivy-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 10000 !important;
  min-width: 280px !important;
  max-width: 400px !important;
  padding: 14px 20px !important;
  border-radius: var(--altivy-border-radius-lg) !important;
  background: var(--altivy-gray-900) !important;
  color: white !important;
  font-family: var(--altivy-font-family) !important;
  font-size: var(--altivy-font-size-sm) !important;
  font-weight: 500 !important;
  box-shadow: var(--altivy-shadow-xl) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

body.ui-modern .altivy-toast.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.ui-modern .altivy-toast--success {
  border-left: 4px solid var(--altivy-success) !important;
}

body.ui-modern .altivy-toast--error {
  border-left: 4px solid var(--altivy-danger) !important;
}

body.ui-modern .altivy-toast__icon {
  font-size: 1.2rem !important;
}

body.ui-modern .altivy-toast--success .altivy-toast__icon {
  color: var(--altivy-success) !important;
}

body.ui-modern .altivy-toast--error .altivy-toast__icon {
  color: var(--altivy-danger) !important;
}


/* ============================================
   BOOKINGS TABLE — DETAIL VIEW EXPAND ICON
   ============================================ */

body.ui-modern .bootstrap-table .detail-icon {
  cursor: pointer !important;
  color: var(--altivy-gray-400) !important;
  transition: color var(--altivy-transition), transform var(--altivy-transition) !important;
}

body.ui-modern .bootstrap-table .detail-icon:hover {
  color: var(--altivy-primary) !important;
}

body.ui-modern .bootstrap-table tr.detail-view td {
  padding: 0 !important;
  background: var(--altivy-gray-50) !important;
}

body.ui-modern:not(.ui-light) .bootstrap-table tr.detail-view td {
  background: var(--altivy-gray-800) !important;
}


/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  body.ui-modern *,
  body.ui-modern *::before,
  body.ui-modern *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================
   LIGHT MODE — Outer pages (Login, Signup, etc.)
   ============================================ */

body.ui-modern.ui-light {
  background: #f0f4f8 !important;
}

/* Section headers — light neutral in light mode */
body.ui-modern.ui-light .altivy-section-header {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
}
body.ui-modern.ui-light .altivy-section-header__title {
  color: var(--altivy-gray-800) !important;
}
body.ui-modern.ui-light .altivy-section-header__count {
  background: rgba(0, 0, 0, 0.1) !important;
  color: var(--altivy-gray-700) !important;
}
body.ui-modern.ui-light .altivy-section-header__chevron {
  color: var(--altivy-gray-600) !important;
}

/* Table headers — dark slate in light mode (distinct from section headers) */
body.ui-modern.ui-light thead.altivy_hdr,
body.ui-modern.ui-light .fixed-table-header thead,
body.ui-modern.ui-light .bootstrap-table thead {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}

/* Filter chips active — outlined in light mode, not solid blue */
body.ui-modern.ui-light .altivy-filter-chip.active {
  background: #dbeafe !important;
  color: var(--altivy-primary) !important;
  border-color: var(--altivy-primary) !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15) !important;
}

/* Breadcrumbs — muted in light mode */
body.ui-modern.ui-light .breadcrumb a,
body.ui-modern.ui-light .breadcrumb-item a {
  color: var(--altivy-gray-600) !important;
}

/* Form inputs */
body.ui-modern.ui-light .form-control {
  background-color: #f8fafc !important;
  border: 1.5px solid var(--altivy-gray-300) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  color: var(--altivy-gray-800) !important;
  height: auto !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.ui-modern.ui-light .form-control:focus {
  border-color: var(--altivy-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  background-color: #fff !important;
  outline: none !important;
}

body.ui-modern.ui-light .form-control::placeholder,
body.ui-modern.ui-light .form-control::-webkit-input-placeholder,
body.ui-modern.ui-light .form-control::-moz-placeholder {
  color: var(--altivy-gray-400) !important;
  font-size: 0.9rem !important;
}

/* Form labels */
body.ui-modern.ui-light label {
  font-weight: 500 !important;
  color: var(--altivy-gray-700) !important;
  margin-bottom: 0.35rem !important;
}

/* Submit buttons — no light-mode-only overrides, prevents layout shift between modes */

/* Display heading */
body.ui-modern.ui-light .display-4 {
  font-weight: 600 !important;
  color: var(--altivy-gray-900) !important;
  font-size: 2.2rem !important;
}

/* Links */
body.ui-modern.ui-light a:not(.btn) {
  color: var(--altivy-primary) !important;
}

body.ui-modern.ui-light a:not(.btn):hover {
  color: var(--altivy-primary-dark) !important;
}


/* ============================================
   USERS TABLE — ROLE BADGE COLORS
   ============================================ */

:root {
  --altivy-role-admin-bg: #dbeafe;
  --altivy-role-admin-text: #1e40af;
  --altivy-role-instructor-bg: #d1fae5;
  --altivy-role-instructor-text: #065f46;
  --altivy-role-member-bg: #f0f4ff;
  --altivy-role-member-text: #3b5998;
  --altivy-role-crew-bg: #fef3c7;
  --altivy-role-crew-text: #92400e;
  --altivy-role-observer-bg: #f1f5f9;
  --altivy-role-observer-text: #64748b;
}

body.ui-modern .altivy-permission-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

body.ui-modern .altivy-badge--role-admin {
  background: var(--altivy-role-admin-bg) !important;
  color: var(--altivy-role-admin-text) !important;
}

body.ui-modern .altivy-badge--role-instructor {
  background: var(--altivy-role-instructor-bg) !important;
  color: var(--altivy-role-instructor-text) !important;
}

body.ui-modern .altivy-badge--role-member {
  background: var(--altivy-role-member-bg) !important;
  color: var(--altivy-role-member-text) !important;
}

body.ui-modern .altivy-badge--role-crew {
  background: var(--altivy-role-crew-bg) !important;
  color: var(--altivy-role-crew-text) !important;
}

body.ui-modern .altivy-badge--role-observer {
  background: var(--altivy-role-observer-bg) !important;
  color: var(--altivy-role-observer-text) !important;
}

/* Dark theme role badges */
body.ui-modern:not(.ui-light) .altivy-badge--role-admin {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--role-instructor {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--role-member {
  background: rgba(59, 89, 152, 0.15) !important;
  color: #93c5fd !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--role-crew {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--role-observer {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}


/* ============================================
   USERS TABLE — FILTER CHIP COLORS
   ============================================ */

/* Admin filter — blue */
body.ui-modern .altivy-filter-chip[data-filter="admin"] {
  color: var(--altivy-status-in-progress-text) !important;
  border-color: var(--altivy-status-in-progress-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="admin"]:hover {
  background: var(--altivy-status-in-progress-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="admin"].active {
  background: var(--altivy-status-in-progress-text) !important;
  border-color: var(--altivy-status-in-progress-text) !important;
  color: #fff !important;
}

/* Instructor filter — green */
body.ui-modern .altivy-filter-chip[data-filter="instructor"] {
  color: var(--altivy-status-approved-text) !important;
  border-color: var(--altivy-status-approved-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="instructor"]:hover {
  background: var(--altivy-status-approved-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="instructor"].active {
  background: var(--altivy-status-approved-text) !important;
  border-color: var(--altivy-status-approved-text) !important;
  color: #fff !important;
}

/* Member filter — slate */
body.ui-modern .altivy-filter-chip[data-filter="member"] {
  color: var(--altivy-status-booked-text) !important;
  border-color: var(--altivy-status-booked-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="member"]:hover {
  background: var(--altivy-status-booked-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="member"].active {
  background: var(--altivy-status-booked-text) !important;
  border-color: var(--altivy-status-booked-text) !important;
  color: #fff !important;
}

/* Dark theme filter chip overrides */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="admin"] {
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="instructor"] {
  color: #6ee7b7 !important;
  border-color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="member"] {
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}


/* ============================================
   AIRCRAFT TABLE — STATUS BADGES
   ============================================ */

body.ui-modern .altivy-badge--aircraft-available {
  background: var(--altivy-status-approved-bg) !important;
  color: var(--altivy-status-approved-text) !important;
}

body.ui-modern .altivy-badge--aircraft-offline {
  background: var(--altivy-status-error-bg) !important;
  color: var(--altivy-status-error-text) !important;
}

body.ui-modern .altivy-badge--aircraft-removed {
  background: var(--altivy-status-cancelled-bg) !important;
  color: var(--altivy-status-cancelled-text) !important;
}

/* Dark theme aircraft badges */
body.ui-modern:not(.ui-light) .altivy-badge--aircraft-available {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--aircraft-offline {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

body.ui-modern:not(.ui-light) .altivy-badge--aircraft-removed {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}


/* ============================================
   AIRCRAFT TABLE — FILTER CHIP COLORS
   ============================================ */

/* Available filter — green */
body.ui-modern .altivy-filter-chip[data-filter="available"] {
  color: var(--altivy-status-approved-text) !important;
  border-color: var(--altivy-status-approved-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="available"]:hover {
  background: var(--altivy-status-approved-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="available"].active {
  background: var(--altivy-status-approved-text) !important;
  border-color: var(--altivy-status-approved-text) !important;
  color: #fff !important;
}

/* Offline filter — red */
body.ui-modern .altivy-filter-chip[data-filter="offline"] {
  color: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="offline"]:hover {
  background: var(--altivy-status-error-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="offline"].active {
  background: var(--altivy-status-error-text) !important;
  border-color: var(--altivy-status-error-text) !important;
  color: #fff !important;
}

/* Removed filter — gray */
body.ui-modern .altivy-filter-chip[data-filter="removed"] {
  color: var(--altivy-status-cancelled-text) !important;
  border-color: var(--altivy-status-cancelled-text) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="removed"]:hover {
  background: var(--altivy-status-cancelled-bg) !important;
}
body.ui-modern .altivy-filter-chip[data-filter="removed"].active {
  background: var(--altivy-status-cancelled-text) !important;
  border-color: var(--altivy-status-cancelled-text) !important;
  color: #fff !important;
}

/* Dark theme aircraft filter chips */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="available"] {
  color: #6ee7b7 !important;
  border-color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="offline"] {
  color: #fca5a5 !important;
  border-color: #fca5a5 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="removed"] {
  color: #94a3b8 !important;
  border-color: #94a3b8 !important;
}


/* ============================================
   BILLABLE ITEMS — SECTION BADGE COLORS
   ============================================ */

body.ui-modern .altivy-badge--section-landing {
  background: #dbeafe !important;
  color: #1e40af !important;
}
body.ui-modern .altivy-badge--section-equipment {
  background: #fef3c7 !important;
  color: #92400e !important;
}
body.ui-modern .altivy-badge--section-consumable {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
body.ui-modern .altivy-badge--section-instructor {
  background: #ede9fe !important;
  color: #5b21b6 !important;
}
body.ui-modern .altivy-badge--section-mission {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
body.ui-modern .altivy-badge--section-other {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

/* Dark theme section badges */
body.ui-modern:not(.ui-light) .altivy-badge--section-landing {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--section-equipment {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--section-consumable {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--section-instructor {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #c4b5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--section-mission {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}
body.ui-modern:not(.ui-light) .altivy-badge--section-other {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}


/* ============================================
   BILLABLE ITEMS — FILTER CHIP COLORS
   ============================================ */

/* Landing fee — blue */
body.ui-modern .altivy-filter-chip[data-filter="landing_fee"] {
  color: #1e40af !important;
  border-color: #1e40af !important;
}
body.ui-modern .altivy-filter-chip[data-filter="landing_fee"]:hover {
  background: #dbeafe !important;
}
body.ui-modern .altivy-filter-chip[data-filter="landing_fee"].active {
  background: #1e40af !important;
  border-color: #1e40af !important;
  color: #fff !important;
}

/* Equipment — amber */
body.ui-modern .altivy-filter-chip[data-filter="equipment"] {
  color: #92400e !important;
  border-color: #92400e !important;
}
body.ui-modern .altivy-filter-chip[data-filter="equipment"]:hover {
  background: #fef3c7 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="equipment"].active {
  background: #92400e !important;
  border-color: #92400e !important;
  color: #fff !important;
}

/* Consumable — green */
body.ui-modern .altivy-filter-chip[data-filter="consumable"] {
  color: #065f46 !important;
  border-color: #065f46 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="consumable"]:hover {
  background: #d1fae5 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="consumable"].active {
  background: #065f46 !important;
  border-color: #065f46 !important;
  color: #fff !important;
}

/* Instructor — purple */
body.ui-modern .altivy-filter-chip[data-filter="instructor"] {
  color: #5b21b6 !important;
  border-color: #5b21b6 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="instructor"]:hover {
  background: #ede9fe !important;
}
body.ui-modern .altivy-filter-chip[data-filter="instructor"].active {
  background: #5b21b6 !important;
  border-color: #5b21b6 !important;
  color: #fff !important;
}

/* Mission — red */
body.ui-modern .altivy-filter-chip[data-filter="mission"] {
  color: #991b1b !important;
  border-color: #991b1b !important;
}
body.ui-modern .altivy-filter-chip[data-filter="mission"]:hover {
  background: #fee2e2 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="mission"].active {
  background: #991b1b !important;
  border-color: #991b1b !important;
  color: #fff !important;
}

/* Other — gray */
body.ui-modern .altivy-filter-chip[data-filter="other"] {
  color: #64748b !important;
  border-color: #64748b !important;
}
body.ui-modern .altivy-filter-chip[data-filter="other"]:hover {
  background: #f1f5f9 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="other"].active {
  background: #64748b !important;
  border-color: #64748b !important;
  color: #fff !important;
}

/* Dark theme billable filter chips */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="landing_fee"] {
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="equipment"] {
  color: #fcd34d !important;
  border-color: #fcd34d !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="consumable"] {
  color: #6ee7b7 !important;
  border-color: #6ee7b7 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="instructor"] {
  color: #c4b5fd !important;
  border-color: #c4b5fd !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="mission"] {
  color: #fca5a5 !important;
  border-color: #fca5a5 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="other"] {
  color: #94a3b8 !important;
  border-color: #94a3b8 !important;
}

/* =============================================
   Dashboard: KPI Stat Cards
   ============================================= */
.altivy-kpi-card .card-body {
  padding: 1.25rem 1.5rem;
}
.altivy-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
  font-size: 1.25rem;
}
.altivy-kpi-icon--primary {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.altivy-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.altivy-kpi-icon--success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.altivy-kpi-icon--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.altivy-kpi-label {
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}
.altivy-kpi-value {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
}
.altivy-kpi-value a {
  color: inherit;
  text-decoration: none;
}
.altivy-kpi-value a:hover {
  color: #3b82f6;
  text-decoration: none;
}

/* Dark theme KPI */
body.ui-modern:not(.ui-light) .altivy-kpi-icon--primary {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
body.ui-modern:not(.ui-light) .altivy-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
body.ui-modern:not(.ui-light) .altivy-kpi-icon--success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
body.ui-modern:not(.ui-light) .altivy-kpi-icon--danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
body.ui-modern:not(.ui-light) .altivy-kpi-label {
  color: #94a3b8;
}
body.ui-modern:not(.ui-light) .altivy-kpi-value a:hover {
  color: #60a5fa;
}

/* =============================================
   Dashboard: Chart Cards
   ============================================= */
.altivy-chart-card .card-header {
  background: transparent;
  border-bottom: none;
  padding-bottom: 0;
}
.altivy-chart-card__icon {
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* Loading spinner */
.altivy-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}
.altivy-chart-loading .spinner-border {
  width: 2rem;
  height: 2rem;
}

/* =============================================
   Invoice: Status Badges
   ============================================= */
.altivy-badge--invoice-draft {
  background: #f1f5f9;
  color: #64748b;
}
.altivy-badge--invoice-pending {
  background: #fef3c7;
  color: #92400e;
}
.altivy-badge--invoice-approved {
  background: #dbeafe;
  color: #1e40af;
}
.altivy-badge--invoice-paid {
  background: #d1fae5;
  color: #065f46;
}
.altivy-badge--invoice-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Due date badges (reuse badge base) */
.altivy-badge--invoice-overdue {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 600;
}
.altivy-badge--invoice-due-soon {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}

/* Dark theme invoice badges */
body.ui-modern:not(.ui-light) .altivy-badge--invoice-draft {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-approved {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-paid {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-overdue {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
body.ui-modern:not(.ui-light) .altivy-badge--invoice-due-soon {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* =============================================
   Invoice: Filter Chip Colors
   ============================================= */
/* Pending — amber */
body.ui-modern .altivy-filter-chip[data-filter="pending"] {
  color: #92400e !important;
  border-color: #92400e !important;
}
body.ui-modern .altivy-filter-chip[data-filter="pending"]:hover {
  background: #fef3c7 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="pending"].active {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
}

/* Approved — blue */
body.ui-modern .altivy-filter-chip[data-filter="approved"] {
  color: #1e40af !important;
  border-color: #1e40af !important;
}
body.ui-modern .altivy-filter-chip[data-filter="approved"]:hover {
  background: #dbeafe !important;
}
body.ui-modern .altivy-filter-chip[data-filter="approved"].active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}

/* Paid — green */
body.ui-modern .altivy-filter-chip[data-filter="paid"] {
  color: #065f46 !important;
  border-color: #065f46 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="paid"]:hover {
  background: #d1fae5 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="paid"].active {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

/* Cancelled — red */
body.ui-modern .altivy-filter-chip[data-filter="cancelled"] {
  color: #991b1b !important;
  border-color: #991b1b !important;
}
body.ui-modern .altivy-filter-chip[data-filter="cancelled"]:hover {
  background: #fee2e2 !important;
}
body.ui-modern .altivy-filter-chip[data-filter="cancelled"].active {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

/* Dark theme invoice filter chips */
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="pending"] {
  color: #fbbf24 !important;
  border-color: #fbbf24 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="approved"] {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="paid"] {
  color: #34d399 !important;
  border-color: #34d399 !important;
}
body.ui-modern:not(.ui-light) .altivy-filter-chip[data-filter="cancelled"] {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

/* =============================================
   Transactions: Amount Styling
   ============================================= */
.altivy-amount-debit {
  color: #dc2626;
  font-weight: 600;
}
.altivy-amount-credit {
  color: #16a34a;
  font-weight: 600;
}

/* Dark theme transaction amounts */
body.ui-modern:not(.ui-light) .altivy-amount-debit {
  color: #f87171;
}
body.ui-modern:not(.ui-light) .altivy-amount-credit {
  color: #34d399;
}

/* Transaction cash-sale tag */
.altivy-badge--cash-sale {
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.7rem;
}
body.ui-modern:not(.ui-light) .altivy-badge--cash-sale {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

/* ============================================
   MOBILE SIDEBAR — overlay + backdrop
   ============================================ */
@media (max-width: 1199px) {
  /* Sidebar overlays page content when open */
  .side-navbar.show-sm {
    width: 260px !important;
    left: 0 !important;
    z-index: 1050 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  /* Page stays full-width — overlay, not push */
  .page.active-sm {
    width: 100% !important;
  }

  /* Sidebar wrapper doesn't block content when sidebar hidden */
  .sidebar-wrap {
    width: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* Restore when sidebar IS open — must overlay everything */
  .sidebar-wrap.sidebar-open {
    pointer-events: auto !important;
    width: 260px !important;
    z-index: 1050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* --- Mobile sidebar: show text labels + compact layout --- */
  /* Override .shrink text hiding — show full nav with labels */
  .side-navbar.shrink.show-sm,
  .side-navbar.shrink.show-sm * {
    overflow-x: hidden !important;
  }

  .side-navbar.shrink.show-sm li a {
    font-size: 0.85rem !important;
    text-align: left !important;
    padding: 8px 14px !important;
    gap: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .side-navbar.shrink.show-sm li a i {
    margin: 0 !important;
    font-size: 1rem !important;
    width: 1.25em !important;
    min-width: 1.25em !important;
    flex-shrink: 0 !important;
  }

  /* Show org name and full header when open */
  .side-navbar.shrink.show-sm .sidenav-header-inner {
    display: block !important;
  }

  .side-navbar.shrink.show-sm .brand-small {
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  .side-navbar.shrink.show-sm .sidebar-org-name {
    max-height: 50px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
  }

  /* Active item curve — match expanded style */
  .side-navbar.shrink.show-sm #side-main-menu > li.active > a,
  .side-navbar.shrink.show-sm #side-main-menu > li:hover > a {
    border-radius: 0 var(--altivy-curve-radius) var(--altivy-curve-radius) 0 !important;
  }

  /* Compact overall sidebar padding */
  .side-navbar.shrink.show-sm .main-menu {
    padding: 0 6px 0 0 !important;
  }

  /* Submenus: show text labels — must override .shrink li a { font-size: 0 } */
  .side-navbar.shrink.show-sm .collapse li a,
  .side-navbar.shrink.show-sm .collapsing li a,
  .side-navbar.shrink.show-sm ul.list-unstyled li a {
    font-size: 0.8rem !important;
    text-align: left !important;
    padding: 6px 14px 6px 38px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Submenu icons stay compact */
  .side-navbar.shrink.show-sm .collapse li a i,
  .side-navbar.shrink.show-sm .collapsing li a i,
  .side-navbar.shrink.show-sm ul.list-unstyled li a i {
    margin: 0 !important;
    font-size: 0.9rem !important;
    width: 1.1em !important;
    min-width: 1.1em !important;
    flex-shrink: 0 !important;
  }

  /* Top-level items need higher specificity to override .shrink li a */
  .side-navbar.shrink.show-sm #side-main-menu > li > a {
    font-size: 0.85rem !important;
    text-align: left !important;
    padding: 8px 14px !important;
    gap: 10px !important;
  }
}

/* Backdrop overlay for dismissing mobile sidebar */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

/* ============================================
   MOBILE FORM BUTTONS — stacked + centered
   ============================================ */
@media (max-width: 576px) {
  /* Flex containers → column layout so buttons stack centered */
  body.ui-modern .a_form > .d-flex,
  body.ui-modern .a_form .d-flex > .d-flex {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Stack ALL form buttons: block, centered, capped width */
  /* Use explicit longhand margins to override Bootstrap's mr-5/ml-5 utilities */
  body.ui-modern .a_form .btn {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* Restore inline buttons inside tables, dropdowns, modals, filter bars */
  body.ui-modern .a_form table .btn,
  body.ui-modern .a_form .bootstrap-table .btn,
  body.ui-modern .a_form .dropdown-menu .btn,
  body.ui-modern .a_form .modal .btn,
  body.ui-modern .a_form .btn-group .btn,
  body.ui-modern .a_form .input-group .btn {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 2px !important;
    float: none !important;
  }

  /* Accordion headers have .btn class but must stay full-width flex */
  body.ui-modern .a_form .altivy-section-header.btn,
  body.ui-modern .a_form .card-header.btn {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ============================================
   MOBILE NOTAM BAR — compact
   ============================================ */
@media (max-width: 767px) {
  .navbar-top-row {
    padding: 2px 8px !important;
  }
  .navbar-notam-message {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ============================================
   MOBILE FILTER CHIPS — compact + scroll
   ============================================ */
@media (max-width: 768px) {
  body.ui-modern .altivy-filter-bar {
    gap: 6px !important;
    padding: 8px 0 12px !important;
  }

  body.ui-modern .altivy-filter-chip {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
  }

  body.ui-modern .altivy-filter-label {
    font-size: 0.8rem !important;
  }
}

/* Filter chips — wrap on phone */
@media (max-width: 576px) {
  body.ui-modern .altivy-filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
  }

  body.ui-modern .altivy-filter-chip {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================
   MESSAGE RECORD (EMAIL LOG) TABLE
   ============================================ */
body.ui-modern .message-record-container {
  padding: 1rem;
  border: 2px dashed var(--altivy-gray-500);
  border-radius: var(--altivy-border-radius);
}

/* Dark mode (default) */
body.ui-modern:not(.ui-light) .message-record-container {
  background-color: var(--altivy-gray-800);
  color: var(--altivy-gray-100);
}

/* Light mode */
body.ui-modern.ui-light .message-record-container {
  background-color: var(--altivy-gray-100);
  color: var(--altivy-gray-900);
}

/* ============================================
   MOBILE COMPACT SPACING — tighten containers
   ============================================ */
@media (max-width: 576px) {
  /* Outer content container: minimal padding */
  body.ui-modern .a_form {
    padding: 6px !important;
  }

  /* Cards: flush with container edges */
  body.ui-modern .a_form .card {
    margin-bottom: 8px !important;
    border-radius: var(--altivy-border-radius) !important;
  }

  /* Section header: full-width, match card radius */
  body.ui-modern .altivy-section-header {
    padding: 10px 14px !important;
    border-radius: var(--altivy-border-radius) var(--altivy-border-radius) 0 0 !important;
  }

  /* Accordion card body: tighten padding */
  body.ui-modern .a_form .card-body {
    padding: 8px !important;
  }

  /* Bootstrap Table card-view: center action buttons */
  body.ui-modern .bootstrap-table .fixed-table-body td:last-child,
  body.ui-modern .bootstrap-table .fixed-table-body .card-views .card-view:last-child {
    text-align: center !important;
  }

  /* Action button row in card view: center */
  body.ui-modern .altivy-action-cell {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}



/* ============================================================
   Dark theme overrides for help modals
   (.help-modal, .local-help-modal)
   ============================================================ */

body.ui-modern:not(.ui-light) .help-modal .modal-content,
body.ui-modern:not(.ui-light) .local-help-modal .modal-content {
  background: #0f172a;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .help-modal .modal-header,
body.ui-modern:not(.ui-light) .local-help-modal .modal-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.ui-modern:not(.ui-light) .help-modal .modal-header .modal-title,
body.ui-modern:not(.ui-light) .help-modal .modal-header .close,
body.ui-modern:not(.ui-light) .local-help-modal .modal-header .modal-title,
body.ui-modern:not(.ui-light) .local-help-modal .modal-header .close {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .help-modal .modal-body {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .help-modal .modal-footer,
body.ui-modern:not(.ui-light) .local-help-modal .modal-footer {
  background: #1e293b;
  border-top-color: #334155;
}

body.ui-modern:not(.ui-light) .help-content {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-bar {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-input {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-section,
body.ui-modern:not(.ui-light) .local-help-modal .help-section.collapsed {
  border-color: #334155;
  background: #1e293b;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-section .section-content,
body.ui-modern:not(.ui-light) .local-help-modal .help-section.collapsed .section-content {
  border-top-color: #334155;
  background: #0f172a;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-section .section-header {
  background-color: #1e293b;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-section .section-header:hover {
  background-color: #334155;
}

body.ui-modern:not(.ui-light) .local-help-modal .local-help-section {
  border-color: #334155;
  background: #1e293b;
}

body.ui-modern:not(.ui-light) .local-help-modal .local-section-header {
  background-color: #1e293b;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .local-section-header:hover {
  background-color: #334155;
}

body.ui-modern:not(.ui-light) .local-help-modal .local-section-content {
  border-top-color: #334155;
  background: #0f172a;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal h4 {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal th,
body.ui-modern:not(.ui-light) .local-help-modal td {
  border-color: #334155;
}

body.ui-modern:not(.ui-light) .local-help-modal th {
  background-color: #1e293b;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal td {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-results {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-result {
  border-bottom-color: #334155;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-result:hover,
body.ui-modern:not(.ui-light) .local-help-modal .help-search-result.highlighted {
  background-color: #334155;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-result-title {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-result-category,
body.ui-modern:not(.ui-light) .local-help-modal .help-search-result-description {
  color: #94a3b8;
}

body.ui-modern:not(.ui-light) .local-help-modal .help-search-no-results,
body.ui-modern:not(.ui-light) .local-help-modal .help-search-loading {
  color: #94a3b8;
}

body.ui-modern:not(.ui-light) .local-help-modal .local-help-content,
body.ui-modern:not(.ui-light) .local-help-modal .help-content {
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .alert-info {
  background-color: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #e2e8f0;
}

body.ui-modern:not(.ui-light) .local-help-modal .lead.text-muted {
  color: #94a3b8 !important;
}