/* ============================================================
   Nova One Design System — HashMeet Theme Bridge
   Load AFTER tabler.min.css to override defaults
   ============================================================ */

/* === 1. DESIGN TOKENS — Light Mode === */
:root {
  --sl-primary: #4F46E5;
  --sl-primary-rgb: 79, 70, 229;
  --sl-primary-light: color-mix(in srgb, var(--sl-primary) 10%, #ffffff);
  --sl-primary-lighter: color-mix(in srgb, var(--sl-primary) 6%, #ffffff);
  --sl-primary-hover: color-mix(in srgb, var(--sl-primary) 85%, #000000);
  --sl-wonder: #6366f1;
  --sl-wonder-light: #eef2ff;
  --sl-wonder-lighter: #e0e7ff;
  --sl-success: #23a974;
  --sl-success-rgb: 35, 169, 116;
  --sl-success-dark: #146243;
  --sl-success-light: #ddf8ed;
  --sl-danger: #d42511;
  --sl-danger-rgb: 212, 37, 17;
  --sl-danger-light: #fde5e3;
  --sl-warning: #f2870d;
  --sl-warning-rgb: 242, 135, 13;
  --sl-warning-dark: #c2660a;
  --sl-warning-light: #fff0e0;
  --sl-info: #0ea5e9;
  --sl-info-rgb: 14, 165, 233;
  --sl-neutral-10: #fafbfc;
  --sl-neutral-30: #f1f5f9;
  --sl-neutral-50: #e2e8f0;
  --sl-neutral-60: #e2e5ea;
  --sl-neutral-70: #cbd5e1;
  --sl-neutral-80: #94a3b8;
  --sl-dark-60: #585959;
  --sl-dark-70: #3d3d3d;
  --sl-dark-80: #2b2b2b;
  --sl-dark-90: #19191a;
  --sl-dark-100: #030303;
  --sl-text-primary: #1e1e1e;
  --sl-text-secondary: #64748b;
  --sl-text-tertiary: #94a3b8;
  --sl-border: #e2e8f0;
  --sl-surface: #ffffff;
  --sl-surface-rgb: 255, 255, 255;
  --sl-page: #f8fafc;
  --sl-elevated: #ffffff;
  --sl-glass-bg: rgba(255, 255, 255, 0.96);
  --sl-glass-border: rgba(226, 232, 240, 0.6);
  --sl-shadow-1: 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 3px 0 rgba(0,0,0,0.06);
  --sl-shadow-2: 0 2px 4px -1px rgba(0,0,0,0.04), 0 4px 8px -1px rgba(0,0,0,0.08);
  --sl-shadow-3: 0 4px 12px -2px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.1);
  --sl-font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --sl-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* === 2. BRIDGE — sl to tblr === */
:root {
  --tblr-body-bg: var(--sl-page) !important;
  --tblr-body-color: var(--sl-text-primary) !important;
  --tblr-font-sans-serif: var(--sl-font-body) !important;
  --tblr-primary: var(--sl-primary) !important;
  --tblr-primary-rgb: var(--sl-primary-rgb) !important;
  --tblr-success: var(--sl-success) !important;
  --tblr-success-rgb: var(--sl-success-rgb) !important;
  --tblr-danger: var(--sl-danger) !important;
  --tblr-danger-rgb: var(--sl-danger-rgb) !important;
  --tblr-warning: var(--sl-warning) !important;
  --tblr-warning-rgb: var(--sl-warning-rgb) !important;
  --tblr-info: var(--sl-info) !important;
  --tblr-info-rgb: var(--sl-info-rgb) !important;
  --tblr-border-color: var(--sl-border) !important;
  --tblr-card-bg: var(--sl-surface) !important;
  --tblr-card-border-color: var(--sl-border) !important;
  --tblr-card-cap-bg: var(--sl-neutral-10) !important;
  --tblr-secondary-bg: var(--sl-neutral-30) !important;
  --tblr-tertiary-bg: var(--sl-neutral-50) !important;
  --tblr-emphasis-color: var(--sl-text-primary) !important;
  --tblr-link-color: var(--sl-primary) !important;
  --tblr-link-hover-color: var(--sl-primary-hover) !important;
  --tblr-gray-50: var(--sl-neutral-10);
  --tblr-gray-100: var(--sl-neutral-30);
  --tblr-gray-200: var(--sl-neutral-50);
  --tblr-gray-300: var(--sl-neutral-70);
  --tblr-gray-400: var(--sl-neutral-80);
  --tblr-gray-500: var(--sl-dark-60);
  --tblr-gray-600: var(--sl-dark-70);
  --tblr-gray-700: var(--sl-dark-80);
  --tblr-gray-800: var(--sl-dark-90);
  --tblr-gray-900: var(--sl-dark-100);
}

/* === 3. DARK MODE === */
[data-bs-theme="dark"] {
  --sl-primary: #818cf8; --sl-primary-rgb: 129, 140, 248;
  --sl-primary-light: rgba(129,140,248,0.12); --sl-primary-lighter: rgba(129,140,248,0.06);
  --sl-primary-hover: #a5b4fc;
  --sl-wonder: #4338ca; --sl-wonder-light: #15132c; --sl-wonder-lighter: #100e22;
  --sl-success: #34d399; --sl-success-rgb: 52, 211, 153; --sl-success-dark: #6ee7b7; --sl-success-light: #0d2a1f;
  --sl-danger: #ef4444; --sl-danger-rgb: 239, 68, 68; --sl-danger-light: #3b1515;
  --sl-warning: #e07020; --sl-warning-rgb: 224, 112, 32; --sl-warning-dark: #f08030; --sl-warning-light: #3b2010;
  --sl-info: #38bdf8; --sl-info-rgb: 56, 189, 248;
  --sl-neutral-10: #2a2a2a; --sl-neutral-30: #383838; --sl-neutral-50: #424242;
  --sl-neutral-60: #4e4e4e; --sl-neutral-70: #666666; --sl-neutral-80: #8e8e8e;
  --sl-dark-60: #8e8e8e; --sl-dark-70: #b4b4b4; --sl-dark-80: #d1d1d1;
  --sl-dark-90: #ececec; --sl-dark-100: #f5f5f5;
  --sl-text-primary: #ececec; --sl-text-secondary: #b4b4b4; --sl-text-tertiary: #8e8e8e;
  --sl-border: #383838; --sl-surface: #171717; --sl-surface-rgb: 23, 23, 23;
  --sl-page: #212121; --sl-elevated: #262626;
  --sl-glass-bg: rgba(23,23,23,0.96); --sl-glass-border: rgba(56,56,56,0.5);
  --sl-shadow-1: 0 1px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
  --sl-shadow-2: 0 2px 4px -1px rgba(0,0,0,0.16), 0 4px 8px -1px rgba(0,0,0,0.24);
  --sl-shadow-3: 0 4px 12px -2px rgba(0,0,0,0.2), 0 8px 24px -4px rgba(0,0,0,0.32);
  --tblr-body-bg: var(--sl-page) !important; --tblr-body-color: var(--sl-text-primary) !important;
  --tblr-primary: var(--sl-primary) !important; --tblr-primary-rgb: var(--sl-primary-rgb) !important;
  --tblr-success: var(--sl-success) !important; --tblr-danger: var(--sl-danger) !important;
  --tblr-warning: var(--sl-warning) !important; --tblr-info: var(--sl-info) !important;
  --tblr-border-color: var(--sl-border) !important;
  --tblr-card-bg: var(--sl-surface) !important; --tblr-card-border-color: var(--sl-border) !important;
  --tblr-card-cap-bg: var(--sl-elevated) !important;
  --tblr-secondary-bg: var(--sl-elevated) !important; --tblr-tertiary-bg: var(--sl-neutral-30) !important;
  --tblr-emphasis-color: #ffffff !important;
  --tblr-link-color: var(--sl-primary) !important; --tblr-link-hover-color: var(--sl-primary-hover) !important;
}

/* === 4. TYPOGRAPHY === */
body { font-family: var(--sl-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.page-title,.card-title,.modal-title,.navbar-brand,.hero-title {
  font-family: var(--sl-font-display) !important; letter-spacing: -0.01em;
}

/* === 5. GLASSMORPHISM === */
.glass-overlay { background: var(--sl-glass-bg) !important; border: 1px solid var(--sl-glass-border) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass-overlay-opaque { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[data-bs-theme="dark"] .glass-overlay-opaque { background: rgba(23,23,23,0.95) !important; }
.glass-header { background: var(--sl-glass-bg) !important; border-bottom: 1px solid var(--sl-glass-border) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal-backdrop { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }

/* === 6. ELEVATION === */
.elevation-1 { box-shadow: var(--sl-shadow-1); }
.elevation-2 { box-shadow: var(--sl-shadow-2); }
.elevation-3 { box-shadow: var(--sl-shadow-3); }

/* === 7. SCROLLBAR === */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--sl-text-tertiary) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
*:hover::-webkit-scrollbar-thumb { background: var(--sl-text-tertiary); }
*:hover::-webkit-scrollbar-thumb:hover { background: var(--sl-text-secondary); }
*::-webkit-scrollbar-corner { background: transparent; }
[data-bs-theme="dark"] *:hover { scrollbar-color: #4e4e4e transparent; }
[data-bs-theme="dark"] *:hover::-webkit-scrollbar-thumb { background: #4e4e4e; }
[data-bs-theme="dark"] *:hover::-webkit-scrollbar-thumb:hover { background: #666; }

/* === 8. SMOOTH TRANSITIONS === */
*,*::before,*::after {
  transition-property: color, background-color, border-color, opacity, box-shadow, filter, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
body { transition: background-color 0.3s ease, color 0.3s ease !important; }
.card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 0.3s ease !important; }
.btn { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important; }
.form-control,.form-select { transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease !important; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out !important; }
.dropdown-menu { transition: opacity 200ms ease, transform 200ms ease !important; }
tr { transition: background-color 150ms ease !important; }
.chat-show,.chat-hide { transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important; }
.toast { transition: opacity 0.3s ease, transform 0.3s ease !important; }
.page,.page-wrapper,.page-body { transition: background-color 0.3s ease !important; }
button:not(:disabled) { cursor: pointer; }

/* === 9. COMPONENT OVERRIDES === */

/* Sidebar */
.navbar.navbar-vertical { background: var(--sl-glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right: 1px solid var(--sl-glass-border) !important; box-shadow: none !important; }
.navbar-vertical .nav-link { border-radius: 8px !important; margin: 1px 0; color: var(--sl-text-secondary) !important; font-weight: 500; position: relative; transition: background-color 200ms ease, color 200ms ease !important; }
.navbar-vertical .nav-link:hover { background-color: var(--sl-neutral-30) !important; color: var(--sl-text-primary) !important; }
.navbar-vertical .nav-link::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 0 3px 3px 0; background: var(--sl-primary); transform: scaleY(0); transition: transform 200ms ease; }
.navbar-vertical .nav-link:hover::before { transform: scaleY(1); }
.navbar-vertical .nav-item.active .nav-link,.navbar-vertical .nav-link.active { background-color: var(--sl-primary) !important; color: #fff !important; }
.navbar-vertical .nav-item.active .nav-link::before,.navbar-vertical .nav-link.active::before { transform: scaleY(0) !important; }
.navbar-vertical .nav-item.active .nav-link .nav-link-icon,.navbar-vertical .nav-link.active .nav-link-icon { color: #fff !important; }
.navbar-vertical .nav-link-icon { color: var(--sl-text-tertiary) !important; transition: color 200ms ease; }
.navbar-vertical .nav-link:hover .nav-link-icon { color: var(--sl-text-primary) !important; }
.navbar-vertical .dropdown-menu { background: var(--sl-surface) !important; border: 1px solid var(--sl-border) !important; border-radius: 8px !important; box-shadow: var(--sl-shadow-2) !important; }
.navbar-vertical .dropdown-item { border-radius: 6px; margin: 2px 4px; color: var(--sl-text-secondary) !important; }
.navbar-vertical .dropdown-item:hover { background-color: var(--sl-neutral-30) !important; color: var(--sl-text-primary) !important; }
.navbar-vertical .dropdown-item.active { background-color: var(--sl-primary-light) !important; color: var(--sl-primary) !important; }

/* All non-vertical navbars: gradient, white text, both modes */
.navbar:not(.navbar-vertical) { background-color: var(--sl-primary-base, #4F46E5) !important; background-image: linear-gradient(135deg, var(--sl-primary-base, #4F46E5), color-mix(in srgb, var(--sl-primary-base, #4F46E5) 60%, #1a1a2e)) !important; box-shadow: none !important; border-bottom: none !important; }
.navbar:not(.navbar-vertical) .nav-link { color: rgba(255,255,255,0.85) !important; font-weight: 500; }
.navbar:not(.navbar-vertical) .nav-link:hover { color: #fff !important; }
.navbar:not(.navbar-vertical) .nav-link.active,
.navbar:not(.navbar-vertical) .nav-item.active .nav-link { color: #fff !important; font-weight: 600; }
.navbar:not(.navbar-vertical) .nav-link-icon { color: rgba(255,255,255,0.85) !important; }
.navbar:not(.navbar-vertical) .nav-item.active .nav-link .nav-link-icon { color: #fff !important; }
.navbar:not(.navbar-vertical) .nav-item.active:after { border-color: #fff !important; }
.dark-theme-setting { color: rgba(255,255,255,0.85) !important; border: none !important; background: transparent !important; }
.dark-theme-setting:hover { color: #fff !important; }

/* Cards */
.card { border: 1px solid var(--sl-border) !important; border-radius: 12px !important; box-shadow: var(--sl-shadow-1) !important; background: var(--sl-surface) !important; overflow: hidden; }
.card-header { background: var(--sl-neutral-10) !important; border-bottom: 1px solid var(--sl-border) !important; }
[data-bs-theme="dark"] .card-header { background: var(--sl-elevated) !important; }
/* Card hover: subtle border glow only, no transform shift */
.card:hover { border-color: color-mix(in srgb, var(--sl-primary) 15%, var(--sl-border)) !important; box-shadow: var(--sl-shadow-2) !important; }

/* Buttons */
.btn { border-radius: 8px !important; font-weight: 500; }
.btn-primary { background-image: linear-gradient(to right, color-mix(in srgb, var(--sl-primary) 78%, white) 0%, var(--sl-primary) 50%, var(--sl-primary) 100%) !important; background-size: 200% 100% !important; background-position: 0% 0% !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-weight: 600; font-family: var(--sl-font-display); transition: background-position 0.35s ease, transform 0.1s ease, box-shadow 0.25s ease !important; }
.btn-primary:hover { background-position: 100% 0% !important; box-shadow: none !important; color: #fff !important; background-color: var(--sl-primary) !important; }
.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active { background-position: 60% 0% !important; filter: brightness(0.85); transform: scale(0.98); color: #fff !important; }
.btn-primary:focus,.btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(var(--sl-primary-rgb), 0.25) !important; color: #fff !important; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
[data-bs-theme="dark"] .btn-primary { background-image: linear-gradient(to right, color-mix(in srgb, var(--sl-primary) 85%, white) 0%, var(--sl-primary) 50%, var(--sl-primary) 100%) !important; }
.btn-outline-primary { border: 1px solid var(--sl-border) !important; color: var(--sl-text-primary) !important; background: var(--sl-surface) !important; border-radius: 8px !important; }
.btn-outline-primary:hover { background: var(--sl-neutral-30) !important; color: var(--sl-primary) !important; border-color: var(--sl-primary) !important; }
.btn-icon:hover,.btn-action:hover { transform: scale(1.08); }
.btn-icon:active,.btn-action:active { transform: scale(0.95); }

/* Forms */
.form-control,.form-select { border: 1px solid var(--sl-border) !important; border-radius: 8px !important; background: var(--sl-surface) !important; color: var(--sl-text-primary) !important; }
.form-control::placeholder { color: var(--sl-text-tertiary) !important; }
.form-control:focus,.form-select:focus { border-color: var(--sl-primary) !important; box-shadow: 0 0 0 3px rgba(var(--sl-primary-rgb), 0.12) !important; }
.form-label { font-weight: 500; color: var(--sl-text-primary); }
.input-group { box-shadow: none !important; }

/* Tables */
.table { --tblr-table-bg: var(--sl-surface); --tblr-table-hover-bg: var(--sl-neutral-30); }
.table thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sl-text-secondary); border-bottom: 1px solid var(--sl-border); }
.table tbody td { color: var(--sl-text-primary); border-bottom: 1px solid var(--sl-border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background-color: var(--sl-neutral-30) !important; }
.table-responsive { border-radius: 12px; border: 1px solid var(--sl-border); overflow: hidden; }

/* Modals */
.modal-content { border-radius: 16px !important; border: 1px solid var(--sl-glass-border) !important; background: var(--sl-surface) !important; box-shadow: var(--sl-shadow-3) !important; overflow: hidden; }
[data-bs-theme="dark"] .modal-content { background: rgba(23,23,23,0.95) !important; }
.modal-header { border-bottom: 1px solid var(--sl-border) !important; }
.modal-footer { border-top: 1px solid var(--sl-border) !important; }

/* Dropdowns */
.dropdown-menu { background: var(--sl-glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--sl-glass-border) !important; border-radius: 10px !important; box-shadow: var(--sl-shadow-2) !important; padding: 4px !important; }
.dropdown-item { border-radius: 6px; color: var(--sl-text-primary) !important; padding: 0.5rem 0.75rem; }
.dropdown-item:hover,.dropdown-item:focus { background-color: var(--sl-neutral-30) !important; }
.dropdown-item.active,.dropdown-item:active { background-color: var(--sl-primary) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--sl-border) !important; }

/* Badges, Alerts, List Groups */
.badge { border-radius: 9999px !important; font-weight: 600; }
.alert { border-radius: 12px !important; }
.list-group-item { border-color: var(--sl-border) !important; background: var(--sl-surface); }
.list-group-item:hover { background-color: var(--sl-neutral-30) !important; }
.list-group-item.active { background-color: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: #fff !important; }

/* Pagination */
.page-link { border-color: var(--sl-border) !important; color: var(--sl-text-primary) !important; border-radius: 8px !important; margin: 0 2px; }
.page-link:hover { background-color: var(--sl-neutral-30) !important; color: var(--sl-primary) !important; }
.page-item.active .page-link { background-color: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: #fff !important; }

/* Toast */
.toast { background: var(--sl-glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--sl-glass-border) !important; border-radius: 12px !important; box-shadow: var(--sl-shadow-3) !important; }
.toast-header { background: transparent !important; border-bottom: 1px solid var(--sl-border) !important; color: var(--sl-text-primary) !important; }

/* Loading Spinner */
#cover-spin { background-color: var(--sl-glass-bg) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#cover-spin::after { border-color: var(--sl-primary) !important; border-top-color: transparent !important; }

/* Avatars */
.avatar { border-radius: 10px !important; }
.avatar-sm { border-radius: 8px !important; }
.avatar-rounded { border-radius: 50% !important; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--sl-border); }
.nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; color: var(--sl-text-secondary) !important; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--sl-text-primary) !important; border-bottom-color: var(--sl-neutral-70) !important; }
.nav-tabs .nav-link.active { color: var(--sl-primary) !important; border-bottom-color: var(--sl-primary) !important; background: transparent !important; }
.nav-pills { background: var(--sl-neutral-30); border-radius: 10px; padding: 3px; }
.nav-pills .nav-link { border-radius: 8px !important; color: var(--sl-text-secondary) !important; font-weight: 500; }
.nav-pills .nav-link.active { background: var(--sl-surface) !important; color: var(--sl-text-primary) !important; box-shadow: var(--sl-shadow-1); }

/* Page */
.page-wrapper { background: var(--sl-page); }
.page-body { background: var(--sl-page); }
.footer { border-top: 1px solid var(--sl-border); background: var(--sl-surface) !important; }
*:focus-visible { outline: 2px solid var(--sl-primary); outline-offset: 2px; }
[data-bs-theme="dark"] .dark-logo,[data-bs-theme="dark"] .logo-image { filter: brightness(1.3); }
.navbar-expand-md .nav-item.active:after { border-color: currentColor !important; }

/* === 10. REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .glass-overlay,.glass-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .card:hover { box-shadow: var(--sl-shadow-1) !important; }
}

/* === 11. THIRD-PARTY === */
/* --- Generic btn-group: glassmorphic, matching FullCalendar style --- */
.btn-group > .btn-outline-primary { background: var(--sl-glass-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--sl-glass-border) !important; color: var(--sl-text-primary) !important; border-radius: 0 !important; font-weight: 500; box-shadow: none !important; transition: all 200ms ease !important; }
.btn-group > .btn-outline-primary:hover { background: var(--sl-neutral-30) !important; color: var(--sl-text-primary) !important; border-color: var(--sl-border) !important; }
.btn-group > .btn-outline-primary.active, .btn-group > .btn-outline-primary:active { background: var(--sl-primary) !important; color: #fff !important; border-color: var(--sl-primary) !important; }
.btn-group > .btn-outline-primary:focus { box-shadow: 0 0 0 2px rgba(var(--sl-primary-rgb), 0.2) !important; }
.btn-group > .btn:first-child { border-radius: 6px 0 0 6px !important; }
.btn-group > .btn:last-child { border-radius: 0 6px 6px 0 !important; }
.btn-group > .btn:only-child { border-radius: 6px !important; }
.btn-group > .btn + .btn { margin-left: -1px; }

.fc { --fc-border-color: var(--sl-border); --fc-today-bg-color: var(--sl-primary-light); --fc-page-bg-color: var(--sl-surface); --fc-neutral-bg-color: var(--sl-neutral-10); }
/* FullCalendar buttons — glassmorphic outline style, proper button-group corners */
.fc .fc-button-primary { background: var(--sl-glass-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--sl-glass-border) !important; color: var(--sl-text-primary) !important; border-radius: 0 !important; font-weight: 500; box-shadow: none !important; transition: all 200ms ease !important; }
.fc .fc-button-primary:hover { background: var(--sl-neutral-30) !important; color: var(--sl-text-primary) !important; border-color: var(--sl-border) !important; }
.fc .fc-button-primary:active, .fc .fc-button-primary.fc-button-active { background: var(--sl-primary) !important; color: #fff !important; border-color: var(--sl-primary) !important; }
.fc .fc-button-primary:disabled { opacity: 0.5; }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 2px rgba(var(--sl-primary-rgb), 0.2) !important; }
/* Button group rounding — only outer corners */
.fc .fc-button-group > .fc-button:first-child { border-radius: 6px 0 0 6px !important; }
.fc .fc-button-group > .fc-button:last-child { border-radius: 0 6px 6px 0 !important; }
.fc .fc-button-group > .fc-button:only-child { border-radius: 6px !important; }
/* Standalone buttons (prev/next when not grouped) */
.fc .fc-toolbar-chunk > .fc-button { border-radius: 6px !important; }
/* Remove double borders between grouped buttons */
.fc .fc-button-group > .fc-button + .fc-button { margin-left: -1px; }
.ts-wrapper .ts-control { background: var(--sl-surface) !important; border-color: var(--sl-border) !important; border-radius: 8px !important; }
.ts-wrapper.focus .ts-control { border-color: var(--sl-primary) !important; box-shadow: 0 0 0 3px rgba(var(--sl-primary-rgb), 0.12) !important; }
.ts-dropdown { background: var(--sl-glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--sl-glass-border) !important; border-radius: 10px !important; box-shadow: var(--sl-shadow-2) !important; z-index: 1056; }
.ts-dropdown .option { border-radius: 6px; margin: 2px 4px; }
.ts-dropdown .option:hover,.ts-dropdown .option.active { background-color: var(--sl-neutral-30) !important; }
.select2-container--default .select2-selection--single { border-color: var(--sl-border) !important; border-radius: 8px !important; background: var(--sl-surface) !important; }
.select2-dropdown { border-color: var(--sl-border) !important; border-radius: 10px !important; box-shadow: var(--sl-shadow-2) !important; }
#toast-container > div { background: var(--sl-glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--sl-glass-border) !important; border-radius: 12px !important; box-shadow: var(--sl-shadow-3) !important; color: var(--sl-text-primary) !important; opacity: 1 !important; }
#toast-container > .toast-success { border-left: 4px solid var(--sl-success) !important; }
#toast-container > .toast-error { border-left: 4px solid var(--sl-danger) !important; }
#toast-container > .toast-warning { border-left: 4px solid var(--sl-warning) !important; }
#toast-container > .toast-info { border-left: 4px solid var(--sl-info) !important; }
.ql-toolbar.ql-snow { border-color: var(--sl-border) !important; border-radius: 8px 8px 0 0 !important; background: var(--sl-neutral-10) !important; }
.ql-container.ql-snow { border-color: var(--sl-border) !important; border-radius: 0 0 8px 8px !important; background: var(--sl-surface) !important; }

/* === 12. AUTH, MEETING, HOME === */
/* === Auth Split Layout === */
.auth-split-page {
  display: flex; min-height: 100vh; height: 100vh; background: var(--sl-page); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; overflow: hidden;
}
.auth-gradient-panel {
  position: relative; width: 45%; min-height: 100vh; overflow: hidden;
  background-color: var(--sl-primary-base, #4F46E5);
  background-image: linear-gradient(135deg, var(--sl-primary-base, #4F46E5), color-mix(in srgb, var(--sl-primary-base, #4F46E5) 60%, #1a1a2e));
}
.auth-gradient-content {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 3rem; height: 100%; color: #fff;
}
.auth-gradient-content h2 {
  font-family: var(--sl-font-display) !important; font-size: 2rem; font-weight: 700;
  margin: 2rem 0 0.5rem; color: #fff !important;
}
.auth-gradient-content p {
  font-size: 1rem; opacity: 0.85; margin: 0; color: rgba(255,255,255,0.8);
}
.auth-form-panel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: var(--sl-page); overflow-y: auto;
}
.auth-form-panel .card { border-radius: 16px !important; box-shadow: var(--sl-shadow-2) !important; }
[data-bs-theme="dark"] .auth-form-panel .card { background: rgba(23,23,23,0.95) !important; }
/* Dark mode gradient: same as light */
[data-bs-theme="dark"] .auth-gradient-panel {
  background-color: var(--sl-primary-base, #4F46E5);
  background-image: linear-gradient(135deg, var(--sl-primary-base, #4F46E5), color-mix(in srgb, var(--sl-primary-base, #4F46E5) 60%, #1a1a2e));
}

/* Lava lamp blobs */
.lava-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6;
  mix-blend-mode: screen;
}
.lava-blob-1 {
  width: 400px; height: 400px; top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  animation: lava-float-1 18s ease-in-out infinite;
}
.lava-blob-2 {
  width: 350px; height: 350px; bottom: -5%; right: -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  animation: lava-float-2 22s ease-in-out infinite;
}
.lava-blob-3 {
  width: 250px; height: 250px; top: 40%; left: 30%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation: lava-float-3 25s ease-in-out infinite;
}
.lava-blob-4 {
  width: 300px; height: 300px; top: 20%; right: 20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sl-wonder) 40%, transparent) 0%, transparent 70%);
  animation: lava-float-4 20s ease-in-out infinite;
}
[data-bs-theme="dark"] .lava-blob { mix-blend-mode: soft-light; opacity: 0.4; }
[data-bs-theme="dark"] .lava-blob-4 {
  background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%);
}

@keyframes lava-float-1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(60px, 80px) scale(1.15); }
  50%  { transform: translate(30px, 120px) scale(0.95); }
  75%  { transform: translate(-40px, 50px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-50px, -70px) scale(1.1); }
  50%  { transform: translate(-80px, -30px) scale(1.2); }
  75%  { transform: translate(-20px, -90px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(70px, -60px) scale(1.2); }
  66%  { transform: translate(-50px, 40px) scale(0.85); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-4 {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(-60px, 50px) scale(1.1); }
  40%  { transform: translate(30px, 80px) scale(1.25); }
  60%  { transform: translate(70px, -20px) scale(0.9); }
  80%  { transform: translate(-30px, -60px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Mobile: hide gradient panel, show form-panel logo instead */
@media (max-width: 767px) {
  .auth-split-page { flex-direction: column; }
  .auth-gradient-panel { display: none; }
  .auth-form-panel { padding: 1rem; }
  /* Landing page sections disabled via DB setting */
}

/* Fallback for plain page-center auth pages (register, reset, etc.) */
.page.page-center { background: var(--sl-page); }
.page.page-center .card { border-radius: 16px !important; box-shadow: var(--sl-shadow-2) !important; }
[data-bs-theme="dark"] .page.page-center .card { background: rgba(23,23,23,0.95) !important; }
.page.jm-meeting { background: var(--sl-page) !important; }
.jm-start-call-mobile-header .btn-action { background: var(--sl-glass-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--sl-glass-border) !important; border-radius: 10px !important; }
.videoContainer .btn.btn-outline-light,.videoContainer .btn-action { background: rgba(23,23,23,0.5) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; }
.videoContainer .btn.btn-outline-light:hover,.videoContainer .btn-action:hover { background: rgba(23,23,23,0.7) !important; }
.videoContainer { background: var(--sl-dark-90) !important; border-radius: 12px !important; }
.chat-bubble-me { background-color: var(--sl-primary) !important; border-radius: 16px 16px 4px 16px !important; }
[dir="rtl"] .chat-bubble-me { border-radius: 16px 16px 16px 4px !important; }
.chat-bubble { border-radius: 16px !important; }
.card.jm-start-call-sidepanel { border-radius: 12px !important; }
.jm-start-call-username .tag { background: rgba(23,23,23,0.5) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 8px !important; border: none !important; }
/* Hero + navbar gradient with idle animation */
.jm-home-bg.bg-cover { background-color: var(--sl-primary-base, #4F46E5) !important; background-image: linear-gradient(135deg, var(--sl-primary-base, #4F46E5), color-mix(in srgb, var(--sl-primary-base, #4F46E5) 60%, #1a1a2e)) !important; }

@keyframes gradient-drift {
  0%   { background-position: 0% 0%; }
  15%  { background-position: 100% 30%; }
  30%  { background-position: 60% 100%; }
  45%  { background-position: 0% 70%; }
  60%  { background-position: 80% 10%; }
  75%  { background-position: 30% 90%; }
  90%  { background-position: 100% 50%; }
  100% { background-position: 0% 0%; }
}

.jm-home-bg.bg-cover,
.navbar:not(.navbar-vertical),
.auth-gradient-panel {
  background-size: 150% 150% !important;
  animation: gradient-drift 30s ease-in-out infinite !important;
}
.jm-features,.jm-faq { background-color: var(--sl-neutral-10) !important; }
[data-bs-theme="dark"] .section-light { background-color: var(--sl-elevated) !important; }
[data-bs-theme="light"] .section-light { background-color: var(--sl-neutral-30) !important; }
.jm-icon-box span { background-color: var(--sl-primary) !important; border-radius: 10px !important; }
/* Homepage navbar — transparent, dark text in light mode, white text in dark mode */
.jm-homepage .navbar { background: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; animation: none !important; }
[data-bs-theme="light"] .jm-homepage .navbar .nav-link { color: var(--sl-text-primary) !important; }
[data-bs-theme="light"] .jm-homepage .navbar .nav-link:hover { color: var(--sl-dark-100) !important; }
[data-bs-theme="light"] .jm-homepage .navbar .nav-link-icon { color: var(--sl-text-primary) !important; }
[data-bs-theme="light"] .jm-homepage .navbar .dark-theme-setting { color: var(--sl-text-primary) !important; }
[data-bs-theme="light"] .jm-homepage .navbar .navbar-toggler-icon { color: var(--sl-text-primary) !important; }
[data-bs-theme="dark"] .jm-homepage .navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
[data-bs-theme="dark"] .jm-homepage .navbar .nav-link:hover { color: #fff !important; }
[data-bs-theme="dark"] .jm-homepage .navbar .dark-theme-setting { color: rgba(255,255,255,0.85) !important; }
.featured { border-color: var(--sl-primary) !important; box-shadow: var(--sl-shadow-2) !important; }
/* --- Meeting list + Recording playlist: clean layout, hover scrollbar --- */

/* Meeting list container */
.meeting-list { border-radius: 0 !important; }
.meetingDetail .card-body.scrollable,
.meeting-list,
.playlist-items {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.meetingDetail .card-body.scrollable:hover,
.meeting-list:hover,
.playlist-items:hover {
  scrollbar-color: var(--sl-neutral-70) transparent;
}
.meetingDetail .card-body.scrollable::-webkit-scrollbar,
.meeting-list::-webkit-scrollbar,
.playlist-items::-webkit-scrollbar { width: 4px; }
.meetingDetail .card-body.scrollable::-webkit-scrollbar-track,
.meeting-list::-webkit-scrollbar-track,
.playlist-items::-webkit-scrollbar-track { background: transparent; }
.meetingDetail .card-body.scrollable::-webkit-scrollbar-thumb,
.meeting-list::-webkit-scrollbar-thumb,
.playlist-items::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.meetingDetail .card-body.scrollable:hover::-webkit-scrollbar-thumb,
.meeting-list:hover::-webkit-scrollbar-thumb,
.playlist-items:hover::-webkit-scrollbar-thumb { background: var(--sl-neutral-70); }

/* Meeting card items: clean, contained text */
.nav-pills .jm-meeting-card { border-radius: 0 !important; padding: 12px 16px !important; border-bottom: 1px solid var(--sl-border); overflow: hidden; }
.nav-pills .jm-meeting-card:last-child { border-bottom: none; }
.nav-pills .jm-meeting-card.active::after { border-radius: 0; }
.jm-meeting-card .row { overflow: hidden; }
.jm-meeting-card .meeting-title { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60% !important; }
.jm-meeting-card .meeting-description { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-meeting-card .jm-meeting-id { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.jm-meeting-card .jm-meeting-date { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.jm-meeting-card .jm-meeting-date p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-meeting-card .created-time { font-size: 0.7rem; }

/* Border between list and detail */
.meetingDetail.border-end { border-right: 1px solid var(--sl-border) !important; }
.meeting-search-box.border-end { border-right: 1px solid var(--sl-border) !important; }

/* Recording playlist items: contained text */
.playlist-item { overflow: hidden; }
.playlist-item-info { overflow: hidden; min-width: 0; }
.playlist-item-title { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item-meta { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.playlist-item-participants { overflow: hidden; text-overflow: ellipsis; }

.accordion-button { background: var(--sl-surface) !important; color: var(--sl-text-primary) !important; }
.accordion-button:not(.collapsed) { background: var(--sl-neutral-10) !important; color: var(--sl-primary) !important; }
.accordion-item { border-color: var(--sl-border) !important; border-radius: 8px !important; overflow: hidden; margin-bottom: 4px; }

/* ==========================================================
   15. DARK MODE FIXES FOR INLINE/HARDCODED COLORS
   ========================================================== */

/* --- Dashboard: AI badge & card --- */
[data-bs-theme="dark"] .ai-badge { background: linear-gradient(135deg, #a8325e, #8a1015) !important; }
[data-bs-theme="dark"] .ai-card { border-left-color: var(--sl-danger) !important; }

/* --- Shared Record / Meeting Record: summary text --- */
[data-bs-theme="dark"] .summary-text,
[data-bs-theme="dark"] .summary-section-content { color: var(--sl-text-secondary) !important; }
[data-bs-theme="dark"] .ai-title,
[data-bs-theme="dark"] .summary-section-title { color: var(--sl-text-primary) !important; }
[data-bs-theme="dark"] .ai-card-header { background: var(--sl-elevated) !important; border-bottom-color: var(--sl-border) !important; }
[data-bs-theme="dark"] .search-highlight { background-color: rgba(255, 243, 205, 0.15) !important; color: var(--sl-warning) !important; }
[data-bs-theme="dark"] .search-highlight.current { background-color: rgba(255, 107, 107, 0.25) !important; color: var(--sl-danger) !important; }

/* --- Meeting Record: ts-dropdown override --- */
[data-bs-theme="dark"] .ts-dropdown { background: var(--sl-glass-bg) !important; border-color: var(--sl-glass-border) !important; }

/* --- Meeting page: password toggle / lock icons --- */
[data-bs-theme="dark"] .password-toggle { color: rgba(255, 255, 255, 0.45) !important; }
[data-bs-theme="dark"] .password-toggle:hover { color: rgba(255, 255, 255, 0.7) !important; }
[data-bs-theme="dark"] .password-icon { color: rgba(255, 255, 255, 0.45) !important; }

/* --- Meeting page: header toggle button --- */
[data-bs-theme="dark"] #headerToggleBtn { background: rgba(255, 255, 255, 0.1) !important; color: var(--sl-text-primary) !important; }
[data-bs-theme="dark"] #headerToggleBtn:hover { background: rgba(255, 255, 255, 0.2) !important; }

/* --- Meeting: chat icon --- */
[data-bs-theme="dark"] .chat-icon { color: var(--sl-text-tertiary) !important; }
[data-bs-theme="light"] .chat-icon { color: var(--sl-dark-90) !important; }

/* --- Meeting: start call bg --- */
.jm-start-call { background: var(--sl-dark-90) !important; }

/* --- Video player bg (always dark, intentional) --- */
.main-video-player { background: #000 !important; }

/* --- Meeting Record: video container shadows --- */
[data-bs-theme="dark"] .main-video-container { box-shadow: var(--sl-shadow-2) !important; }

/* --- Cover spin overlay (all pages) --- */
#cover-spin { background-color: var(--sl-glass-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }

/* --- Shared Record page: full dark mode --- */
[data-bs-theme="dark"] .ai-summary-container { color: var(--sl-text-primary) !important; }
[data-bs-theme="dark"] .ai-card-body { background: var(--sl-surface) !important; }

/* --- Generic: any hardcoded white text on elements that may be on dark bg --- */
[data-bs-theme="dark"] .text-secondary { color: var(--sl-text-secondary) !important; }

/* --- Meeting record: list group borders --- */
[data-bs-theme="dark"] .meeting-record-list .list-group-item { background: var(--sl-surface) !important; border-color: var(--sl-border) !important; }
[data-bs-theme="dark"] .meeting-record-list .list-group-item:hover { background: var(--sl-elevated) !important; }