/* ==========================================================================
   e-RSA MASTER STYLESHEET (app.css)
   ==========================================================================
   TABLE OF CONTENTS:
   --------------------------------------------------------------------------
   BAB 1 : VARIABLES, RESETS & GLOBAL BROWSER STYLES
           (Theme Tokens, Selection Colors, Smooth Scroll & Lenis Rules)
   BAB 2 : LAYOUT & NAVIGATION
           (Sidebar, Navbar, Mobile Bottom Navigation, Footer)
   BAB 3 : CORE UI COMPONENTS
           (Cards, Buttons, Badges, Modals & Backdrops, Alerts, Tooltips, Pagination)
   BAB 4 : FORM CONTROLS & PICKERS
           (Inputs, Choices.js, Flatpickr, Quill Editor, Password Meter, Search)
   BAB 5 : FEATURE-SPECIFIC STYLES
           (Detail Kelas, Presensi Sesi, Buku Catatan/Notes, Referral, Avatar)
   BAB 6 : TABLES & RESPONSIVE MEDIA QUERIES
           (Table Styles, Mobile Stack Tables, Sort Icons, @media Breakpoints)
   ========================================================================== */

/* ==========================================================================
   BAB 1 : VARIABLES, RESETS & GLOBAL BROWSER STYLES
   --------------------------------------------------------------------------
   Theme Tokens, Selection Colors, Smooth Scroll & Lenis Rules
   ========================================================================== */

/*
* app.css
* File include item app only specific css only
******************************************************************************/
@import url("root.css");

/* GLOBAL FONT & TYPOGRAPHY SMOOTHING */
html,
body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.choices,
.choices__inner,
.modal {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Password Input Masking Fix (Mobile & Desktop) */
input[type="password"] {
  font-family: caption, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.08em;
}

input[type="password"]::placeholder {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal;
}

/* Explicit Font Weight Preservation across all states */
.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder,
.fw-extrabold {
  font-weight: 800 !important;
}

/* Table participant names & headers preserve bold / semibold structure */
.table td .fw-bold,
.table th {
  font-weight: 700 !important;
}


::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Prevent zooming on all devices & standardized scrollbar */
html {
  overflow-y: auto !important;
}

html,
body,
:root {
  height: auto !important;
  min-height: 100% !important;
  touch-action: manipulation !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  overscroll-behavior-y: none;
  scroll-behavior: auto !important;
}

/* Lenis Smooth Scroll Rules */
html.lenis,
html.lenis body {
  height: auto !important;
}

html.lenis,
html.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

html.lenis-stopped {
  overflow: hidden;
}

html.lenis-smooth iframe {
  pointer-events: none;
}

/* ==========================================================================
   2. GLOBAL BROWSER & UTILITY STYLES
   ========================================================================== */

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

.demo-blocks>* {
  display: block !important;
}

.demo-inline-spacing>* {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing>* {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}

.layout-demo-placeholder img {
  width: 900px;
}

.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/**
 * RSA Custom Styles
 * All branding-specific overrides and unique components
 * Organized by functional feature categories throughout the system
 */
/**
 * ========================================================
 * GLOBAL BROWSER & SELECTION STYLES
 * Scrollbar appearance and text selection colors
 * Applied across entire application for consistent UX
 * ========================================================
 */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: transparent !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--bs-scrollbar-thumb, var(--bs-gray-400)) !important;
}

::selection {
  color: var(--bs-white);
  background: var(--bs-primary);
}

.px-12 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.password-toggle-icon {
  right: 0.2rem !important;
  color: var(--bs-gray-500) !important;
}

/* ========================================================
 * SNEAT STANDARDIZED DROPDOWN BOX-SHADOW
 * References design tokens from root.css (--bs-dropdown-box-shadow)
 * Overrides data-skin="bordered" which sets shadow to none
 * ======================================================== */
:root .dropdown-menu,
[data-skin="bordered"] .dropdown-menu,
.dropdown-menu {
  box-shadow: var(--bs-dropdown-box-shadow) !important;
}

.icon-wrapper.success {
  background-color: var(--bs-success);
}

.icon-wrapper.info {
  background-color: var(--bs-info);
}

.icon-wrapper.error {
  background-color: var(--bs-danger);
}

.icon-wrapper i {
  font-size: 4rem;
  color: var(--bs-white);
}

/**
 * ========================================================
 * STAR RATING
 * Rating display with reverse flex for interactive feedback
 * ========================================================
 */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  font-size: 3rem;
  line-height: 1;
  gap: 5px;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-move {
  cursor: move !important;
}

.suggestion-item:hover,
.suggestion-item-focused {
  background: var(--bs-dropdown-link-active-bg) !important;
  color: var(--bs-dropdown-link-active-color) !important;
  padding-left: 10px !important;
}

.tv-asset-icon {
  font-size: 18px !important;
  color: var(--bs-secondary-color);
}

#assetsList::-webkit-scrollbar {
  width: 6px;
}

#assetsList::-webkit-scrollbar-track {
  background: transparent;
}

#assetsList::-webkit-scrollbar-thumb {
  background: var(--bs-gray-400);
  border-radius: 3px;
}

#assetsList::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-600);
}

[data-bs-theme="dark"] #assetsList::-webkit-scrollbar-thumb {
  background: var(--bs-gray-700);
}

[data-bs-theme="dark"] #assetsList::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-600);
}

form {
  margin-block-end: 0 !important;
}

.menu-inner::-webkit-scrollbar {
  display: none;
}

/* Anti Auto-Link for Mobile Browsers */
.no-auto-link,
.no-auto-link a,
.no-auto-link span {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ==========================================================================
   3. TYPOGRAPHY & UTILITY SCALE
   ========================================================================== */

.text-muted {
  color: var(--bs-gray-500) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: var(--bs-gray-500) !important;
}

/**
 * ========================================================
 * DARK MODE TEXT & CODE STYLING
 * Override default text colors for dark theme compatibility
 * Ensures readability in low-light application mode
 * ========================================================
 */
[data-bs-theme="dark"] pre {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] code {
  color: var(--bs-body-color) !important;
}

/**
 * ========================================================
 * COLOR LABEL UTILITIES
 * Semantic color backgrounds for tagging and status display
 * Six color variations with appropriate text contrast
 * ========================================================
 */
.bg-label-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-primary) !important;
}

.bg-label-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.12) !important;
  color: var(--bs-secondary) !important;
}

.bg-label-success {
  background-color: rgba(var(--bs-success-rgb), 0.12) !important;
  color: var(--bs-success) !important;
}

.bg-label-info {
  background-color: rgba(var(--bs-info-rgb), 0.12) !important;
  color: var(--bs-info) !important;
}

.bg-label-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.12) !important;
  color: var(--bs-warning) !important;
}

.bg-label-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.12) !important;
  color: var(--bs-danger) !important;
}

/**
 * ========================================================
 * INTERACTIVE LABEL BUTTONS (HOVER TO SOLID)
 * Interactive elements with bg-label-* or btn-label-* turn
 * to solid background with white text and icons on hover.
 * ========================================================
 */

/* Primary */
.btn-label-primary:hover,
button.bg-label-primary:hover,
a.bg-label-primary:hover,
.btn.bg-label-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-label-primary:hover i,
.btn-label-primary:hover span,
.btn-label-primary:hover div,
button.bg-label-primary:hover i,
button.bg-label-primary:hover span,
button.bg-label-primary:hover div,
a.bg-label-primary:hover i,
a.bg-label-primary:hover span,
a.bg-label-primary:hover div,
.btn.bg-label-primary:hover i,
.btn.bg-label-primary:hover span,
.btn.bg-label-primary:hover div {
  color: #fff !important;
}

/* Secondary */
.btn-label-secondary:hover,
button.bg-label-secondary:hover,
a.bg-label-secondary:hover,
.btn.bg-label-secondary:hover {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}
.btn-label-secondary:hover i,
.btn-label-secondary:hover span,
.btn-label-secondary:hover div,
button.bg-label-secondary:hover i,
button.bg-label-secondary:hover span,
button.bg-label-secondary:hover div,
a.bg-label-secondary:hover i,
a.bg-label-secondary:hover span,
a.bg-label-secondary:hover div,
.btn.bg-label-secondary:hover i,
.btn.bg-label-secondary:hover span,
.btn.bg-label-secondary:hover div {
  color: #fff !important;
}

/* Success */
.btn-label-success:hover,
button.bg-label-success:hover,
a.bg-label-success:hover,
.btn.bg-label-success:hover {
  background-color: var(--bs-success) !important;
  color: #fff !important;
}
.btn-label-success:hover i,
.btn-label-success:hover span,
.btn-label-success:hover div,
button.bg-label-success:hover i,
button.bg-label-success:hover span,
button.bg-label-success:hover div,
a.bg-label-success:hover i,
a.bg-label-success:hover span,
a.bg-label-success:hover div,
.btn.bg-label-success:hover i,
.btn.bg-label-success:hover span,
.btn.bg-label-success:hover div {
  color: #fff !important;
}

/* Info */
.btn-label-info:hover,
button.bg-label-info:hover,
a.bg-label-info:hover,
.btn.bg-label-info:hover {
  background-color: var(--bs-info) !important;
  color: #fff !important;
}
.btn-label-info:hover i,
.btn-label-info:hover span,
.btn-label-info:hover div,
button.bg-label-info:hover i,
button.bg-label-info:hover span,
button.bg-label-info:hover div,
a.bg-label-info:hover i,
a.bg-label-info:hover span,
a.bg-label-info:hover div,
.btn.bg-label-info:hover i,
.btn.bg-label-info:hover span,
.btn.bg-label-info:hover div {
  color: #fff !important;
}

/* Warning */
.btn-label-warning:hover,
button.bg-label-warning:hover,
a.bg-label-warning:hover,
.btn.bg-label-warning:hover {
  background-color: var(--bs-warning) !important;
  color: #fff !important;
}
.btn-label-warning:hover i,
.btn-label-warning:hover span,
.btn-label-warning:hover div,
button.bg-label-warning:hover i,
button.bg-label-warning:hover span,
button.bg-label-warning:hover div,
a.bg-label-warning:hover i,
a.bg-label-warning:hover span,
a.bg-label-warning:hover div,
.btn.bg-label-warning:hover i,
.btn.bg-label-warning:hover span,
.btn.bg-label-warning:hover div {
  color: #fff !important;
}

/* Danger */
.btn-label-danger:hover,
button.bg-label-danger:hover,
a.bg-label-danger:hover,
.btn.bg-label-danger:hover {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}
.btn-label-danger:hover i,
.btn-label-danger:hover span,
.btn-label-danger:hover div,
button.bg-label-danger:hover i,
button.bg-label-danger:hover span,
button.bg-label-danger:hover div,
a.bg-label-danger:hover i,
a.bg-label-danger:hover span,
a.bg-label-danger:hover div,
.btn.bg-label-danger:hover i,
.btn.bg-label-danger:hover span,
.btn.bg-label-danger:hover div {
  color: #fff !important;
}

.owl-nav .owl-prev {
  left: -10px;
}

.driver-popover-prev-btn {
  background-color: transparent !important;
  color: var(--bs-secondary) !important;
  border: 1px solid var(--bs-secondary) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 0.375rem 0.75rem !important;
  text-shadow: none !important;
}

.driver-popover-prev-btn:hover {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-white, #fff) !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-lg {
  font-size: 1.25rem !important;
}

.text-xl {
  font-size: 1.6rem !important;
}

.text-xxs {
  font-size: 0.65rem !important;
}

.icon-md {
  font-size: 1.5rem !important;
}

/* ==========================================================================
   BAB 2 : LAYOUT & NAVIGATION
   --------------------------------------------------------------------------
   Sidebar, Navbar, Mobile Bottom Navigation & Footer
   ========================================================================== */

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

html.layout-navbar-fixed .layout-page,
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-navbar-fixed .layout-page {
  padding-top: 64px !important;
}

/* Layout Navbar Layering Guarantee
   Navbar fixed di z-index 1080 supaya selalu di atas konten halaman */
.layout-navbar,
.navbar.layout-navbar,
#layout-navbar {
  z-index: 1080 !important;
}




.content-wrapper {
  padding-bottom: 0 !important;
}

.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/**
 * ========================================================
 * SIDEBAR, NAVBAR & NAVIGATION
 * Main layout navigation menu styling and responsiveness
 * Menu toggle, branding area, and scroll state styling
 * ========================================================
 */
.app-brand {
  padding-left: 1.5rem !important;
  padding-right: 1rem !important;
  margin-top: 5px;
  margin-bottom: 5px;
  transition:
    transform 0.18s ease-out,
    height 0.18s ease-out;
}

.app-brand .app-brand-logo img {
  transition:
    transform 0.18s ease-out,
    height 0.18s ease-out;
}

/* Collapsed: smaller logo & tighter padding */
.layout-menu-collapsed .app-brand .app-brand-logo img {
  height: 26px !important;
  transform: scale(0.9);
}

.layout-menu-collapsed .app-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Force smaller padding when sidebar is really collapsed (override core.css).
   Note: layout-menu-collapsed class is on <html>, not on the aside itself. */
html.layout-menu-collapsed .layout-menu.menu-vertical .app-brand {
  padding-left: 1rem !important;
  transition: padding 0.18s ease-out;
}

.layout-menu-hover .app-brand .app-brand-logo img {
  height: 34px !important;
  transform: scale(1);
}

/* Fix sidebar brand collapse button stretch & guarantee circular shape */
.menu .app-brand .layout-menu-toggle,
.app-brand .layout-menu-toggle.menu-link {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
}

.menu .app-brand .layout-menu-toggle i {
  border-radius: 50% !important;
}

.layout-overlay {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* Mobile Sidebar Overlay & Background Scroll/Click Prevention */
@media (max-width: 1199.98px) {
  html.layout-menu-expanded body,
  .layout-menu-expanded body {
    overscroll-behavior: none;
  }

  html.layout-menu-expanded .layout-page,
  html.layout-menu-expanded .content-wrapper,
  html.layout-menu-expanded .layout-navbar {
    pointer-events: none !important;
    user-select: none !important;
  }

  html.layout-menu-expanded .layout-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1099 !important;
    display: block !important;
    pointer-events: auto !important;
    touch-action: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    cursor: pointer !important;
  }

  html.layout-menu-expanded .layout-menu {
    z-index: 1100 !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  html.layout-menu-expanded .layout-menu .menu-inner {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

/* Sidebar live classes badge - aligned cleanly with submenu arrows */
.sidebar-live-classes-badge {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle) {
  color: var(--bs-menu-active-color) !important;
}

/* Active sidebar menu item badge: white background, red text */
.menu-item.active > .menu-link .badge,
.menu-item.active > .menu-link .badge.bg-danger,
.menu-vertical .menu-item.active > .menu-link .badge,
.menu-vertical .menu-item.active > .menu-link .badge.bg-danger {
  background-color: var(--bs-white, var(--white)) !important;
  color: var(--bs-danger, var(--bs-red)) !important;
  font-weight: 700 !important;
}

/* Standardize Badge Typography: Clean Title Case without forced uppercase */
.badge:not(.text-uppercase) {
  text-transform: none;
}

/* Optical vertical centering for bg-label-* class badges (class name badges etc.) */
.badge[class*="bg-label-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* Sidebar header spacing - add space between prefix line and text */
.menu-vertical .menu-header {
  padding-left: 1.8rem !important;
}

.menu-inner {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-inner-shadow {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .layout-navbar .nav-link .bx-moon {
    padding-inline: 1rem !important;
  }
}

.menu .app-brand .layout-menu-toggle::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border: var(--bs-border-width) var(--bs-border-style) rgba(34, 48, 62, 0.12);
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(90deg,
      var(--bs-black) 0 45%,
      transparent 0% 100%);
  mask-image: linear-gradient(90deg,
      var(--bs-black) 0 45%,
      transparent 0% 100%);
  pointer-events: none;
  box-sizing: border-box;
  display: block !important;
  z-index: 1;
}

[data-bs-theme="dark"] .app-brand .layout-menu-toggle::before {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 1199.98px) {
  .menu .app-brand .layout-menu-toggle::before {
    border: 1.99px solid rgba(34, 48, 62, 0.12) !important;
    -webkit-mask-image: linear-gradient(270deg,
        var(--bs-black) 0 52%,
        transparent 0% 100%);
    mask-image: linear-gradient(270deg,
        var(--bs-black) 0 52%,
        transparent 0% 100%);
  }
}

/* Mobile: Perfect centering using Grid (Active when bottom nav is visible) */
@media (max-width: 767.98px) {
  #layout-navbar {
    display: grid !important;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
  }

  .layout-navbar.navbar-detached {
    padding-inline: 0;
    padding-right: 1rem;
  }

  #layout-menu-btn {
    grid-column: 1;
    display: flex !important;
    margin: 0 !important;
    height: 100%;
    width: 45px;
  }

  #layout-menu-btn .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center {
    grid-column: 2;
    justify-self: stretch;
    display: flex !important;
    width: 100%;
    height: 100%;
    padding: 0 0.5rem;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper {
    width: 100% !important;
    flex-grow: 1 !important;
    justify-content: center !important;
    height: 100%;
    padding: 0;
    margin: 0 !important;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler i.bx-search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler #autocomplete,
  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler .aa-Autocomplete,
  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler .aa-DetachedSearchButton {
    width: auto !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  .navbar-nav.align-items-center.flex-grow-1.justify-content-center .navbar-search-wrapper .search-toggler .aa-DetachedSearchButtonPlaceholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
  }

  #navbar-collapse {
    grid-column: 3;
    justify-self: end;
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    height: 100%;
    padding-right: 0.5rem;
  }

  .navbar-search-wrapper {
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .table td,
  .table th {
    white-space: normal;
  }

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }

  .table-responsive>.table {
    min-width: 100%;
  }

  .table-responsive>.table:not(.table-fixed) {
    table-layout: auto !important;
  }
}

/**
 * ========================================================
 * FOOTER STYLING
 * Responsive footer with centered text on mobile
 * Proper padding and spacing at page bottom
 * ========================================================
 */
/* Mobile: center text alignment & stack vertically */
@media (max-width: 991.98px) {
  .footer-container {
    text-align: center !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .footer-container>div {
    width: 100% !important;
    margin-bottom: 1rem !important;
    justify-content: center !important;
  }
}

@media (max-width: 767.98px) {
  .footer-container {
    margin: 10px 10px !important;
    flex-direction: column;
    text-align: center;
  }
}

[data-bs-theme="light"] .light-logo {
  display: block !important;
}

[data-bs-theme="light"] .dark-logo {
  display: none !important;
}

[data-bs-theme="dark"] .light-logo {
  display: none !important;
}

[data-bs-theme="dark"] .dark-logo {
  display: block !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before {
  background: none !important;
  backdrop-filter: none;
  block-size: 0;
  content: "";
  inline-size: 0;
  inset-block-start: 0;
  mask: none;
}

.layout-navbar,
.layout-navbar.navbar-detached,
.window-scrolled .layout-navbar.navbar-detached {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  box-shadow: var(--bs-box-shadow) !important;
}

[data-bs-theme="dark"] .layout-navbar,
[data-bs-theme="dark"] .layout-navbar.navbar-detached,
[data-bs-theme="dark"] .window-scrolled .layout-navbar.navbar-detached {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.layout-menu {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  box-shadow: none !important;
}

.layout-overlay {
  background: var(--bs-black);
}

/* DARK MODE - NAVBAR TRANSPARENCY - Navbar on scroll (dark) */
[data-bs-theme="dark"] .layout-menu.menu-vertical~.layout-page.window-scrolled .layout-navbar {
  background-color: rgba(var(--bs-paper-bg-rgb), 0.88);
}

/* Smart Hide-on-Scroll for Mobile Top Navbar (< 1200px) */
@media (max-width: 1199.98px) {
  .layout-navbar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, box-shadow 0.25s ease !important;
    will-change: transform;
  }

  .layout-navbar.navbar-hidden-mobile {
    transform: translateY(calc(-100% - 25px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
}

.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before {
  background: none;
}

/**
 * ========================================================
 * RESPONSIVE WIDTH UTILITIES
 * Custom responsive width utilities for responsive layouts
 * ========================================================
 */
/* Medium breakpoint (768px): auto width */
@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }
}

/* Large breakpoint (1200px): auto width */
@media (min-width: 1200px) {
  .w-lg-auto {
    width: auto !important;
  }
}

.menu-inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: var(--bs-card-bg) !important;
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

[data-bs-theme="dark"] .mobile-bottom-nav {
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.22) !important;
}

.mobile-bottom-nav .navbar {
  padding: 0;
  min-height: 70px;
}

.mobile-bottom-nav .nav-link {
  color: var(--bs-secondary-color);
  text-decoration: none;
  transition: all 0.2s ease;
  flex: 1;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  margin: 5px;
}

.mobile-bottom-nav .nav-link:hover {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-radius: 10px;
}

.mobile-bottom-nav .nav-link.active {
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-radius: 10px;
  font-weight: 600;
}

/* Mobile Nav Notification Badges */
.mobile-bottom-nav .nav-link .badge,
.mobile-bottom-nav .nav-link .mobile-nav-badge {
  font-family: inherit;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}

.mobile-bottom-nav .nav-link:not(.active) .badge.bg-danger,
.mobile-bottom-nav .nav-link:not(.active) .mobile-nav-badge.bg-danger {
  background-color: var(--bs-danger, var(--bs-red)) !important;
  color: var(--bs-white, var(--white)) !important;
}

.mobile-bottom-nav .nav-link.active .badge.bg-danger,
.mobile-bottom-nav .nav-link.active .mobile-nav-badge.bg-danger {
  background-color: var(--bs-white, var(--white)) !important;
  color: var(--bs-danger, var(--bs-red)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.mobile-bottom-nav .nav-link.active .badge.bg-warning,
.mobile-bottom-nav .nav-link.active .mobile-nav-badge.bg-warning {
  background-color: var(--bs-white, var(--white)) !important;
}

/* Hide notification badges in embedded guide preview frames */
.is-embedded-preview .mobile-nav-badge,
.is-embedded-preview .mobile-nav-profile-badge,
.is-embedded-preview .mobile-nav-live-classes-badge,
.is-embedded-preview .sidebar-live-classes-badge,
.is-embedded-preview .badge-notifications,
[data-preview="1"] .mobile-nav-badge,
[data-preview="1"] .mobile-nav-profile-badge,
[data-preview="1"] .mobile-nav-live-classes-badge {
  display: none !important;
}

.mobile-bottom-nav .nav-link i {
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-bottom-nav .nav-link small {
  font-size: 0.72rem;
  line-height: 1.1;
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.mobile-bottom-nav .nav-link[href*="<?= $current_page ?? 'dashboard' ?>"] {
  color: var(--bs-primary);
}

@supports (padding: max(0px)) {
  .mobile-bottom-nav {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Ongoing Session Live Pulsing Dot (100% Mathematically Centered, Clean & Flat) */
.live-pulse-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.live-pulse-badge .pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: rgba(var(--bs-primary-rgb), 0.25);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(0.6);
  animation: livePulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.live-pulse-badge .pulse-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: var(--bs-primary);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
  animation: livePulseDot 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes livePulseRing {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

@keyframes livePulseDot {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* Session Timer Overtime Warning Live Pulse Shadow/Ring Animation */
.session-duration-trigger.badge-warning-pulse {
  position: relative !important;
  z-index: 1 !important;
}

.session-duration-trigger.badge-warning-pulse::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: inherit !important;
  background-color: var(--bs-warning, #ffab00) !important;
  z-index: -1 !important;
  animation: badgeRipplePulse 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes badgeRipplePulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.15, 1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.15, 1.35);
    opacity: 0;
  }
}

.layout-navbar .avatar.avatar-user,
.dropdown-user .avatar.avatar-user {
  height: 40px !important;
  width: 40px !important;
  --bs-avatar-size: 40px !important;
}

.layout-navbar #profile-menu .avatar.avatar-user {
  margin-inline-end: 0px !important;
}

.layout-navbar .avatar.avatar-user .avatar-initial,
.dropdown-user .avatar.avatar-user .avatar-initial {
  width: 40px !important;
  height: 40px !important;
  line-height: normal;
}

/* ==========================================================================
   BAB 3 : CORE UI COMPONENTS
   --------------------------------------------------------------------------
   Cards, Buttons, Badges, Modals, Alerts, Tooltips & Pagination
   ========================================================================== */

/* Global Responsive Buttons: Large on mobile, standard on desktop */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon):not(.navbar-toggler) {
    padding: 0.75rem 1.25rem !important;
    line-height: 1.25 !important;
    border-radius: 0.375rem !important;
  }
}

.tab-content {
  padding: 0 !important;
}

.nav-tabs-widget .nav-link {
  padding: 0.5rem 0 !important;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }

  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/**
 * ========================================================
 * COMPONENT BRANDING: CARDS, BUTTONS, DROPDOWNS
 * Remove drop shadows and standardize borders consistently
 * Applies to core Bootstrap components for cohesive design
 * ========================================================
 */
.card-header {
  background-color: var(--bs-card-bg) !important;
  display: flex !important;
  align-items: center !important;
  border-top-left-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px))) !important;
  border-top-right-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px))) !important;
}

.card-footer {
  border-bottom-right-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px))) !important;
  border-bottom-left-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px))) !important;
}

.card > :first-child {
  border-top-left-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px)));
  border-top-right-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px)));
}

.card > :last-child {
  border-bottom-right-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px)));
  border-bottom-left-radius: var(--bs-card-inner-border-radius, calc(var(--bs-card-border-radius, 0.5rem) - var(--bs-border-width, 1px)));
}

@media (max-width: 767.98px) {
  .card-header {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
}

/**
 * Display utilities for table row groups
 * Bootstrap doesn't include these by default, but they're needed for responsive tables
 */
.d-table-header-group {
  display: table-header-group !important;
}

.d-table-row-group {
  display: table-row-group !important;
}

@media (min-width: 768px) {
  .d-md-table-header-group {
    display: table-header-group !important;
  }

  .d-md-table-row-group {
    display: table-row-group !important;
  }
}

/* Ensure attendance-detail-row and user-row-clickable are interactive */
@media (max-width: 767.98px) {

  .attendance-detail-row,
  .user-row-clickable {
    cursor: pointer !important;
  }
}

@media (min-width: 768px) {

  .attendance-detail-row,
  .user-row-clickable {
    cursor: default !important;
  }
}

/* Card header icons - proportional and centered */
.card-header i {
  font-size: 1.1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
}

.btn {
  font-size: var(--bs-font-size-btn) !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box !important;
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-xs):not(.dropdown-item):not(.btn-close):not(.accordion-button):not(.navbar-toggler):not(.page-link):not(.auth-submit-btn .btn):not(.google-btn):not(.email-btn):not(.btn-icon):not(.rounded-pill):not(.class-role-pill):not(.d-none):not([hidden]) {
  height: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem !important;
  line-height: calc(var(--bs-control-height, 44px) - 2px) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
}

.btn-sm:not(.dropdown-item):not(.btn-close):not(.page-link):not(.rounded-pill):not(.class-role-pill):not(.d-none):not([hidden]),
.btn-group-sm>.btn:not(.dropdown-item):not(.btn-close):not(.page-link):not(.rounded-pill):not(.class-role-pill):not(.d-none):not([hidden]) {
  height: var(--bs-control-height-sm, 34px) !important;
  min-height: var(--bs-control-height-sm, 34px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.875rem !important;
  font-size: 0.875rem !important;
  line-height: calc(var(--bs-control-height-sm, 34px) - 2px) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  box-sizing: border-box !important;
}

.btn-lg:not(.dropdown-item):not(.btn-close):not(.page-link):not(.d-none):not([hidden]),
.btn-group-lg>.btn:not(.dropdown-item):not(.btn-close):not(.page-link):not(.d-none):not([hidden]) {
  height: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem !important;
  font-size: 1rem !important;
  line-height: calc(var(--bs-control-height-lg, 50px) - 2px) !important;
  border-radius: var(--bs-control-border-radius-lg, 8px) !important;
  box-sizing: border-box !important;
}

.btn-xs:not(.d-none):not([hidden]),
.btn-group-xs>.btn:not(.d-none):not([hidden]) {
  height: var(--bs-control-height-xs, 28px) !important;
  min-height: var(--bs-control-height-xs, 28px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: calc(var(--bs-control-height-xs, 28px) - 2px) !important;
  border-radius: 0.25rem !important;
  box-sizing: border-box !important;
}

/* Standardized Icon Buttons */
.btn-icon:not(.btn-sm):not(.btn-lg):not(.btn-xs):not(.d-none):not([hidden]) {
  width: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  min-width: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm:not(.d-none):not([hidden]),
.btn-group-sm>.btn-icon.btn:not(.d-none):not([hidden]) {
  width: var(--bs-control-height-sm, 34px) !important;
  height: var(--bs-control-height-sm, 34px) !important;
  min-width: var(--bs-control-height-sm, 34px) !important;
  min-height: var(--bs-control-height-sm, 34px) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-lg:not(.d-none):not([hidden]),
.btn-group-lg>.btn-icon.btn:not(.d-none):not([hidden]) {
  width: var(--bs-control-height-lg, 50px) !important;
  height: var(--bs-control-height-lg, 50px) !important;
  min-width: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-xs:not(.d-none):not([hidden]),
.btn-group-xs>.btn-icon.btn:not(.d-none):not([hidden]) {
  width: var(--bs-control-height-xs, 28px) !important;
  height: var(--bs-control-height-xs, 28px) !important;
  min-width: var(--bs-control-height-xs, 28px) !important;
  min-height: var(--bs-control-height-xs, 28px) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Badge & Text size for mobile - shrink specifically on small screens */
@media (max-width: 767.98px) {
  .badge-mobile-md {
    font-size: 0.75rem !important;
  }

  .badge-mobile-sm {
    font-size: 0.65rem !important;
  }

  .mobile-text-sm {
    font-size: 0.75rem !important;
  }
}

@media (min-width: 768px) {
  .px-md-12 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}

.profile-avatar-wrapper {
  width: 40px;
  height: 40px;
  --bs-avatar-size: 40px;
  font-size: 1rem;
  line-height: normal !important;
}

@media (min-width: 768px) {
  .profile-avatar-wrapper {
    width: 60px;
    height: 60px;
    --bs-avatar-size: 60px;
    font-size: 1.3rem;
  }
}


.btn:not(:focus, :active) {
  box-shadow: none !important;
}

.btn-back {
  position: relative !important;
  z-index: 1050 !important;
}

.btn-icon i,
.btn i,
.btn-back i {
  pointer-events: none !important;
}

/**
 * Filled state for non-editable/disabled inputs (Unified styling applied below)
 */

/* Dark Mode Button Primary - less contrast on hover */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-hover-bg: var(--bs-primary-light) !important;
  --bs-btn-hover-border-color: var(--bs-primary-light) !important;
  --bs-btn-active-bg: var(--bs-primary-dark) !important;
  --bs-btn-active-border-color: var(--bs-primary-dark) !important;
}

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

/**
 * ========================================================
 * ALERT BOXES & VALIDATION
 * Consistent alert appearance with proper alignment
 * Includes validation messages and error text styling
 * ========================================================
 */
.alert {
  border-radius: 8px !important;
  border: none !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1.25rem !important;
  font-size: var(--bs-font-size-text) !important;
  line-height: normal !important;
  min-height: 45px !important;
  height: auto !important;
  position: relative;
}

.alert i {
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

.alert .flex-grow-1 {
  text-align: left !important;
  line-height: 1.1 !important;
}

.alert ul {
  padding-left: 1.5rem !important;
  margin-bottom: 0;
}

.alert .btn-close {
  background: none !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.65rem;
  mask-size: 0.65rem;
  width: 1rem !important;
  height: 1rem !important;
  padding: 0 !important;
  opacity: 0.5 !important;
  color: inherit !important;
  transition: all 0.2s ease;
  margin: 0 !important;
  margin-left: auto !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  right: 0 !important;
  top: 0 !important;
}

.alert .btn-close:hover {
  opacity: 1 !important;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 171, 0, 0.16) !important;
  color: #ffab00 !important;
  border-color: rgba(255, 171, 0, 0.3) !important;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(40, 199, 111, 0.16) !important;
  color: #28c76f !important;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(234, 84, 85, 0.16) !important;
  color: #ea5455 !important;
}

[data-bs-theme="dark"] .alert-info {
  background-color: rgba(0, 207, 232, 0.16) !important;
  color: #00cfe8 !important;
}

/**
 * ========================================================
 * STANDARDIZED FORM VALIDATION & FEEDBACK MESSAGES
 * Consistent font-size, icon-size, vertical middle alignment, and gap
 * ========================================================
 */
.auth-validation-msg,
.invalid-feedback,
.valid-feedback,
.form-feedback,
#materials_sequence_feedback,
#birthDateError,
#emailError,
#confirm_password_feedback,
#confirm_password_ok,
#passwordError,
#confirmError {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  margin-top: 0.35rem;
  font-weight: 500;
  text-align: left;
}

.auth-validation-msg {
  color: var(--bs-danger) !important;
}

.invalid-feedback.d-block,
.valid-feedback.d-block,
.auth-validation-msg.d-flex,
.auth-validation-msg:not([style*="display: none"]):not([style*="display:none"]):not(.d-none),
#materials_sequence_feedback:not([style*="display: none"]):not([style*="display:none"]):not(.d-none),
#birthDateError:not(.d-none):not([style*="display: none"]),
#emailError:not(.d-none):not([style*="display: none"]),
#confirm_password_feedback:not([style*="display:none"]):not([style*="display: none"]),
#confirm_password_ok:not([style*="display:none"]):not([style*="display: none"]),
#passwordError:not([style*="display:none"]):not([style*="display: none"]),
#confirmError:not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
  align-items: center !important;
}

.auth-validation-msg[style*="display: none"],
.auth-validation-msg[style*="display:none"],
.auth-validation-msg.d-none,
#materials_sequence_feedback[style*="display: none"],
#materials_sequence_feedback[style*="display:none"],
#materials_sequence_feedback.d-none,
#birthDateError.d-none,
#emailError.d-none,
#confirm_password_feedback[style*="display:none"],
#confirm_password_feedback[style*="display: none"],
#confirm_password_ok[style*="display:none"],
#confirm_password_ok[style*="display: none"],
#passwordError[style*="display:none"],
#passwordError[style*="display: none"],
#confirmError[style*="display:none"],
#confirmError[style*="display: none"] {
  display: none !important;
}

.auth-validation-msg i,
.invalid-feedback i,
.valid-feedback i,
.form-feedback i,
#materials_sequence_feedback i,
#birthDateError i,
#emailError i,
#confirm_password_feedback i,
#confirm_password_ok i,
#passwordError i,
#confirmError i {
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}


/**
 * ========================================================
 * DEVELOPER TOOLS & EDITABLE BLOCKS
 * Content editing blocks for admin/developer pages
 * Includes jstree structure and edit container styling
 * ========================================================
 */
.editable-block {
  position: relative;
  padding: 1rem;
  border: var(--bs-border-width) var(--bs-border-style) transparent;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.editable-block:hover {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

.editable-block:has(.edit-container:not(.d-none)) {
  background: var(--bs-white) !important;
  border-color: var(--bs-primary) !important;
}

/* Dark mode support for editable-block */
[data-bs-theme="dark"] .editable-block:hover {
  background: var(--bs-menu-bg);
  border-color: var(--bs-gray-700);
  color: var(--bs-white);
}

[data-bs-theme="dark"] .editable-block:has(.edit-container:not(.d-none)) {
  background: var(--bs-edit-block-dark-bg) !important;
  border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .edit-container .form-control {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .edit-container .form-control:focus {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-primary);
  box-shadow: none;
}

[data-bs-theme="dark"] .edit-container .btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .edit-container .btn-outline-secondary:hover {
  background: var(--bs-gray-800);
  border-color: var(--bs-border-color);
  color: var(--bs-white);
}

.edit-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.editable-block:hover .edit-btn {
  opacity: 1;
}

#jstree-structure {
  background: var(--bs-white);
  border-radius: 8px;
  padding: 15px;
}

/* Dark mode support for jstree-structure */
[data-bs-theme="dark"] #jstree-structure {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/**
 * ========================================================
 * TOOLTIPS & POPOVERS
 * Consistent styling for helper content and information
 * All direction variations support same color scheme
 * ========================================================
 */
.popover {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
}

.tooltip-inner {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: none !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--bs-primary) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--bs-primary) !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--bs-primary) !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--bs-primary) !important;
}

/**
 * ========================================================
 * STANDARD HEIGHT & SIZING SYSTEM
 * 45px height standard for all interactive elements
 * Consistent padding and alignment across components
 * ========================================================
 */
/* Form controls: flexible height for textarea, fixed for input */
.form-control {
  border-color: var(--bs-border-color) !important;
  border-style: solid !important;
  background-color: var(--bs-paper-bg) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Fixed height for single-line inputs and div-based form controls */
input.form-control:not([type="hidden"]):not(.form-control-sm):not(.form-control-lg):not(.auth-input .form-control):not(.d-none):not([hidden]),
div.form-control:not(.form-control-sm):not(.form-control-lg):not(.d-none):not([hidden]) {
  min-height: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  display: flex;
  align-items: center;
}

/* Flexible height for multi-line textareas */
textarea.form-control {
  height: auto !important;
  min-height: calc(1.5em + 1.5rem) !important;
  line-height: 1.5 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-paper-bg) !important;
  border-width: var(--bs-border-width) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* General Form control disabled styled in unified section below */

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.65;
  background-color: var(--bs-secondary-bg) !important;
  border: none;
}

.form-control.flatpickr-time:disabled,
.flatpickr-time:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--bs-gray-500) !important;
}

/**
 * ========================================================
 * FORM INPUTS & DARK MODE
 * Input field styling for light and dark theme modes
 * Autofill browser handling and disabled state styling
 * ========================================================
 */
[data-bs-theme="dark"] .form-label {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-primary) !important;
}

.form-icon-container {
  position: relative !important;
  z-index: 1;
}

.form-icon-container:has(.choices.is-open),
.form-icon-container:has(.choices.is-focused),
.form-icon-container:focus-within {
  z-index: 1090 !important;
}

.form-icon-container i:not(.bx-edit) {
  position: absolute;
  left: 14px;
  top: 22px;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--bs-gray-500);
  z-index: 2060 !important;
  pointer-events: none;
  transition: color 0.3s ease;
}

.auth-form .form-icon-container i:not(.bx-edit),
.auth-section .form-icon-container i:not(.bx-edit) {
  top: 25px;
}

.form-icon-container:focus-within i:not(.bx-edit),
.form-icon-container:has(.choices.is-open) i:not(.bx-edit),
.form-icon-container:has(.choices.is-focused) i:not(.bx-edit) {
  color: var(--bs-primary);
  z-index: 2060 !important;
}

.form-control-icon {
  padding-left: 42px !important;
}

/* Ensure Choices and Selects inside form-icon-container have 42px left padding in all states */
.form-icon-container .choices .choices__inner,
.form-icon-container .choices__inner,
.form-icon-container .choices.is-open .choices__inner,
.form-icon-container .choices.is-focused .choices__inner,
.form-icon-container .choices[data-type*="select-one"] .choices__inner,
.form-icon-container select.form-select,
.form-icon-container select.choices-select,
.form-icon-container select[class*="choices"] {
  padding-left: 42px !important;
}

.form-icon-container .choices__list--single {
  padding-left: 0 !important;
}

.form-icon-container .choices__list--dropdown .choices__input {
  padding-left: 0.875rem !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: var(--bs-body-color) !important;
  box-shadow: none !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
}

[data-bs-theme="dark"] .form-control:-webkit-autofill,
[data-bs-theme="dark"] .form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: var(--bs-body-color) !important;
  box-shadow: none !important;
  border: var(--bs-border-width) var(--bs-border-style) rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .ql-snow,
[data-bs-theme="dark"] .ql-bubble {
  --bs-input-border-color: color-mix(in srgb, #e6e6f1 22%, #212121);
}

/**
 * ========================================================
 * AUTHENTICATION & LOGIN FLOWS
 * Clean hierarchy for sign-up/login/password pages
 * Includes form sections, buttons, and validation
 * ========================================================
 */
html:has(.authentication-wrapper),
body:has(.authentication-wrapper) {
  background-color: var(--bs-paper-bg) !important;
}

[data-bs-theme="dark"] html:has(.authentication-wrapper),
[data-bs-theme="dark"] body:has(.authentication-wrapper) {
  background-color: var(--bs-body-bg) !important;
}

.authentication-wrapper {
  min-height: 100dvh;
}

.authentication-bg {
  background-color: var(--bs-paper-bg) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  position: relative;
}

@media (min-width: 992px) {
  .authentication-inner {
    flex-wrap: nowrap !important;
  }

  .authentication-bg {
    flex: 0 0 450px !important;
    min-width: 450px !important;
  }

  .authentication-inner>div:not(.authentication-bg) {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

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

@media (max-width: 991.98px) {
  .authentication-wrapper {
    flex-direction: column;
  }

  .authentication-bg {
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto;
  }
}

.authentication-basic .authentication-bg {
  width: 100% !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 3rem 1.5rem !important;
  min-height: 100vh;
  min-height: 100dvh !important;
  height: auto !important;
}

.authentication-basic.authentication-wrapper,
.authentication-wrapper.authentication-basic {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.authentication-basic .authentication-inner {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  display: flex;
  flex-direction: column;
}

.auth-section {
  width: 100%;
  max-width: 400px !important;
  margin: auto;
  display: flex;
  flex-direction: column;
  color: var(--bs-body-color) !important;
  font-size: var(--bs-font-size-text) !important;
  padding: 2.5rem 2.5rem;
}

.auth-section.auth-section-lg {
  max-width: 620px !important;
}

@media (max-width: 575.98px) {
  .authentication-basic .authentication-bg {
    padding: 1.5rem 1rem !important;
  }

  .auth-header {
    margin-bottom: 1.25rem !important;
  }
}

.auth-header {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.auth-header img {
  height: 40px !important;
  width: auto;
}

.auth-title {
  margin-bottom: 1.5rem !important;
  font-weight: 700 !important;
  text-align: center;
  line-height: 1.4;
  color: var(--bs-body-color);
}

.auth-btn-choice {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.auth-check {
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}

.auth-check .form-check-label {
  color: var(--bs-body-color) !important;
}

.auth-check .form-check-input,
.auth-check .form-check-input:disabled,
.auth-check .form-check-input[disabled] {
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  margin-top: 0 !important;
  margin-right: 0.6rem !important;
  border: 1.7px solid var(--bs-border-color) !important;
  border-radius: 4px !important;
}

.auth-check .form-check-input:checked {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
  box-shadow: none !important;
  animation: auth-bounce 0.35s ease-in-out;
}

@keyframes auth-bounce {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.auth-check .form-check-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: none !important;
}

.auth-btn-choice a,
.auth-btn-choice button {
  font-weight: 600 !important;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.auth-form .auth-input {
  text-align: left;
}

.auth-form .auth-input .form-label {
  font-weight: 500;
  color: var(--bs-body-color);
  font-size: var(--bs-font-size-text);
  margin-bottom: 0.4rem;
}

.auth-form .auth-input .form-control,
.auth-form .auth-input .form-select,
.auth-form .auth-input .choices__inner,
.auth-form .auth-input .form-control:disabled,
.auth-form .auth-input .form-control[disabled],
.auth-form .auth-input .form-select:disabled,
.auth-form .auth-input .form-select[disabled],
.auth-form .auth-input .choices.is-disabled .choices__inner,
.auth-section .form-control,
.auth-section .form-select,
.auth-section .choices__inner,
.auth-section .form-control:disabled,
.auth-section .form-control[disabled],
.auth-section .form-select:disabled,
.auth-section .form-select[disabled],
.auth-section .choices.is-disabled .choices__inner {
  font-size: 1rem !important;
  font-weight: 400 !important;
  height: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  max-height: var(--bs-control-height-lg, 50px) !important;
  border-radius: var(--bs-control-border-radius-lg, 8px) !important;
  padding: 0 1.125rem !important;
  line-height: calc(var(--bs-control-height-lg, 50px) - 2px) !important;
  box-sizing: border-box !important;
}

.auth-form .auth-input .choices__inner,
.auth-form .auth-input .choices.is-disabled .choices__inner,
.auth-section .choices__inner,
.auth-section .choices.is-disabled .choices__inner {
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  box-sizing: border-box !important;
}

[data-bs-theme="dark"] .auth-form .auth-input .form-control,
[data-bs-theme="dark"] .auth-form .auth-input .form-select,
[data-bs-theme="dark"] .auth-form .auth-input .choices__inner,
[data-bs-theme="dark"] .auth-section .form-control,
[data-bs-theme="dark"] .auth-section .form-select,
[data-bs-theme="dark"] .auth-section .choices__inner {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-paper-bg) !important;
  color: var(--bs-heading-color) !important;
}

[data-bs-theme="dark"] .auth-form .auth-input .form-control:focus,
[data-bs-theme="dark"] .auth-form .auth-input .form-select:focus,
[data-bs-theme="dark"] .auth-form .auth-input .choices.is-open .choices__inner,
[data-bs-theme="dark"] .auth-section .form-control:focus,
[data-bs-theme="dark"] .auth-section .form-select:focus,
[data-bs-theme="dark"] .auth-section .choices.is-open .choices__inner {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 89, 17, 0.25) !important;
}

.auth-form .form-password-toggle .password-toggle-icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 1.125rem !important;
}

.auth-submit-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

.auth-submit-btn .btn {
  font-weight: 600;
  font-size: var(--bs-font-size-btn, 0.9375rem) !important;
  padding: 0 1.5rem !important;
  height: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  border-radius: var(--bs-control-border-radius-lg, 8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: calc(var(--bs-control-height-lg, 50px) - 2px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.auth-footer {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  margin-top: 2rem;
  width: 100%;
}

.auth-text {
  margin-bottom: 0;
  font-weight: 600;
}

.auth-text a,
.auth-footer a {
  color: var(--bs-primary) !important;
  text-decoration: none !important;
}

.auth-legal {
  color: var(--bs-gray-500) !important;
  font-size: var(--bs-font-size-text);
}

.auth-legal a {
  color: var(--bs-gray-600) !important;
  font-weight: 600 !important;
}

/* Weight List 600 */
.auth-footer .cookies-settings,
.auth-text span+a,
.auth-text a[href*="recovery-password"] {
  font-weight: 600 !important;
}

/* FontAwesome/Boxicon: let library CSS handle icon sizing */
.auth-back-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  text-decoration: none !important;
  font-weight: 600;
  font-size: var(--bs-font-size-text);
  color: var(--bs-primary) !important;
  display: none !important;
  z-index: 100;
  align-items: center;
  gap: 0.5rem;
}

.auth-back-btn[style*="display: flex"] {
  display: flex !important;
}

.auth-back-btn i {
  font-size: var(--bs-font-size-text) !important;
}

.google-btn,
.email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-paper-bg) !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-control-border-radius-lg, 8px) !important;
  padding: 0 1.5rem !important;
  color: var(--bs-body-color) !important;
  font-size: var(--bs-font-size-text) !important;
  height: var(--bs-control-height-lg, 50px) !important;
  min-height: var(--bs-control-height-lg, 50px) !important;
  gap: 0.5rem;
  margin: 0 !important;
  line-height: calc(var(--bs-control-height-lg, 50px) - 2px) !important;
  box-sizing: border-box !important;
}

[data-bs-theme="dark"] .google-btn,
[data-bs-theme="dark"] .email-btn {
  background-color: var(--bs-paper-bg) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .google-btn:hover,
[data-bs-theme="dark"] .email-btn:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.google-btn img {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}

.email-btn i {
  font-size: 1.1rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.unsubs-content {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.unsubs-actions {
  width: 100%;
}

.unsubs-actions .btn {
  padding: 13px 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s;
}

.unsubs-actions .btn:hover,
.unsubs-actions .btn:focus,
.unsubs-actions .btn:active {
  transform: translateY(-4px);
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 576px) {
  .unsubs-actions .btn {
    width: auto;
  }
}

.icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary);
}

/**
 * ========================================================
 * PASSWORD STRENGTH METER
 * Visual indicator for password security levels displayed
 * Shows weak/medium/strong states with color progression
 * ========================================================
 */
.password-strength-container {
  width: 100%;
  margin-top: 1rem;
}

.password-strength-marks {
  display: flex;
  gap: 6px;
  height: 6px;
  margin-bottom: 0.5rem;
}

.strength-mark {
  flex: 1;
  height: 100%;
  border-radius: 4px;
  background-color: var(--bs-secondary-bg);
}

.strength-weak .strength-mark:nth-child(1) {
  background-color: var(--bs-danger) !important;
}

.strength-medium .strength-mark:nth-child(1),
.strength-medium .strength-mark:nth-child(2) {
  background-color: var(--bs-warning) !important;
}

.strength-strong .strength-mark {
  background-color: var(--bs-success) !important;
}

.strength-weak .strength-text {
  color: var(--bs-danger) !important;
  font-weight: 600 !important;
}

.strength-medium .strength-text {
  color: var(--bs-warning) !important;
  font-weight: 600 !important;
}

.strength-strong .strength-text {
  color: var(--bs-success) !important;
  font-weight: 600 !important;
}

.strength-text {
  font-size: var(--bs-font-size-text);
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-align: left;
}

.strength-desc {
  font-size: var(--bs-font-size-text);
  color: var(--bs-body-color);
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 767.98px) {
  .avatar {
    --bs-avatar-size: 2rem !important;
    font-size: 0.7rem !important;
  }
}

.avatar-initial {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  border-radius: 50% !important;
  text-transform: uppercase;
  cursor: default;
  line-height: 1 !important;
  width: 100%;
  height: 100%;
}

.avatar-initial[style*="display: none"],
.avatar-initial[style*="display:none"],
.avatar img:not([style*="display: none"]):not([style*="display:none"]) ~ .avatar-initial {
  display: none !important;
}

/* Avatar size: Small (32px) */
.avatar-initial.avatar-sm {
  width: 1.7rem !important;
  height: 1.7rem !important;
  font-size: 0.75rem !important;
  /* Proportional to size */
}

.avatar-initial.avatar-md {
  width: 2rem !important;
  height: 2rem !important;
  font-size: 1rem !important;
  /* Proportional to size */
}

@media (max-width:767.98px) {

  .avatar-initial.avatar-md {
    width: 1.3rem !important;
    height: 1.3rem !important;
    font-size: inherit !important;
  }
}

/* Avatar size: Large (56px) */
.avatar-initial.avatar-lg {
  width: 3.5rem !important;
  height: 3.5rem !important;
  font-size: 1.125rem !important;
  /* Proportional to size */
}

/* Avatar size: Extra Large (80px) */
.avatar-initial.avatar-xl {
  width: 5rem !important;
  height: 5rem !important;
  font-size: 1.5rem !important;
  /* Proportional to size */
}

/* Avatar size: XXL (120px) */
.avatar-initial.avatar-xxl {
  width: 7.5rem !important;
  height: 7.5rem !important;
  font-size: 2rem !important;
  /* Proportional to size */
}

.avatar-user-detail {
  width: 72px !important;
  height: 72px !important;
}

@media (max-width: 575.98px) {
  .avatar-user-detail {
    width: 56px !important;
    height: 56px !important;
  }

}

@media (max-width: 767.98px) {
  .aa-DetachedSearchButtonIcon {
    display: none !important;
  }
}

/* Mobile: preserve search placeholder if requested */
/* Removed display:none for .aa-DetachedSearchButtonPlaceholder */
.aa-DetachedContainer {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/**
 * ========================================================
 * BOOKING - DOCTOR SELECTION
 * Doctor card display with avatar, name, and specialty
 * Interactive selection states and hover effects
 * ========================================================
 */
.doctor-item {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background: var(--bs-card-bg);
  width: 130px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 20 !important;
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.doctor-item:hover {
  border-color: var(--bs-primary);
  box-shadow: none;
  transform: translateY(-2px);
}

.doctor-item:active {
  transform: scale(0.98);
}

.doctor-item.selected {
  border-color: var(--bs-primary) !important;
  border-width: 3px !important;
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

.doctor-avatar-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doctor-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--bs-primary);
  padding: 2px;
  background: var(--bs-white);
}

.doctor-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  border: 2px solid var(--bs-primary);
}

.doctor-name {
  font-weight: 600;
  margin-bottom: 1px;
  color: var(--bs-heading-color);
  font-size: 0.75rem;
  line-height: 1.15;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

.doctor-specialty {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/**
 * ========================================================
 * BOOKING - OWL CAROUSEL
 * Responsive carousel for time slots and options display
 * Navigation buttons with hover and scale animations
 * ========================================================
 */
.owl-nav button {
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  position: absolute;
  top: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.owl-nav button:hover {
  background: var(--bs-primary-hover) !important;
  transform: scale(1.1);
}

.owl-carousel:not(.owl-loaded) .item {
  min-width: 150px;
}

[data-bs-theme="light"] .required-star {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .required-star {
  color: var(--bs-primary-light) !important;
}

/**
 * ========================================================
 * MODALS, OVERLAYS & BACKDROPS
 * Consistent styling for modal dialogs and offcanvas panels
 * Unified overlay color and opacity handling for dark mode
 * ========================================================
 */
/* Modal styling - add border */
.modal-content {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
  box-shadow: none !important;
}

/* Modal title - align left */
.modal-title {
  text-align: left;
}

.modal .btn-close {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
}

/* Modal backdrop - use overlay color from root.css */
.modal-backdrop {
  background-color: var(--bs-overlay-bg, var(--bs-black)) !important;
  transition: opacity 0.15s linear !important;
}

.modal-backdrop.fade {
  opacity: 0 !important;
}

.modal-backdrop.show {
  opacity: 0.6 !important;
}

/* Offcanvas backdrop - consistent with modal */
.offcanvas-backdrop {
  background-color: var(--bs-overlay-bg, var(--bs-black)) !important;
  transition: opacity 0.15s linear !important;
}

.offcanvas-backdrop.fade {
  opacity: 0 !important;
}

.offcanvas-backdrop.show {
  opacity: 0.6 !important;
}

/* Dark mode adjustments - use root.css overlay color */
[data-bs-theme="dark"] .modal-backdrop {
  background-color: var(--bs-overlay-bg, var(--bs-black)) !important;
  transition: opacity 0.15s linear !important;
}

[data-bs-theme="dark"] .modal-backdrop.show {
  opacity: 0.75 !important;
}

[data-bs-theme="dark"] .offcanvas-backdrop {
  background-color: var(--bs-overlay-bg, var(--bs-black)) !important;
  transition: opacity 0.15s linear !important;
}

[data-bs-theme="dark"] .offcanvas-backdrop.show {
  opacity: 0.75 !important;
}

/**
 * ========================================================
 * SEARCH SUGGESTIONS & AUTOCOMPLETE
 * Masonry-like layout for search result categories
 * Suggestion items with hover effects and icons
 * ========================================================
 */
/* Use columns for Masonry-like result layout */
.suggestion-grid {
  column-count: 2;
  column-gap: 3rem;
  width: 100%;
}

/* Ensure sections don't break between columns */
.suggestion-section {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 2rem;
}

.suggestion-item {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.suggestion-item i {
  transition: color 0.2s ease;
}

@media (max-width: 768px) {
  .suggestion-grid {
    column-count: 1;
    column-gap: 0;
  }
}

/**
 * ========================================================
 * COOKIES CONSENT BANNER & SETTINGS
 * Bottom-sliding notification for cookie policy acceptance
 * Modal settings panel for cookie category management
 * ========================================================
 */
.cookies-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--bs-primary);
  box-shadow: none !important;
  z-index: 1090;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.25rem 0;
  color: var(--bs-white);
  border-top: var(--bs-border-width) var(--bs-border-style) transparent;
}

/**
 * .cookies-banner content layout styles
 */
.cookies-content {
  display: flex;
  justify-content: center;
  width: 100vw;
  max-width: 100%;
  padding: 0;
}

.cookies-inner {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.cookies-settings-link {
  color: var(--bs-white) !important;
  font-weight: 500;
  text-decoration: none !important;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.btn-accept-all {
  box-shadow: none !important;
}

.btn-accept-all:hover {
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}

@media (max-width: 991.98px) {
  .cookies-content {
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 1.2rem;
  }

  .cookies-banner .container-xxl {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .cookies-inner {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0;
  }

  .cookies-text p {
    padding: 0;
  }

  .cookies-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem !important;
  }

  .cookies-settings-link {
    margin-right: 0 !important;
    display: inline-block;
  }
}

@media (max-width: 575.98px) {
  .cookies-actions .btn-accept-all {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8rem !important;
  }

  .cookies-settings-link {
    font-size: 0.8rem !important;
    margin-right: 0 !important;
  }
}

.cookies-setting-item {
  padding: 1rem;
  border-radius: 8px;
  background: var(--bs-white);
  margin-bottom: 1rem;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  box-shadow: none !important;
}

[data-bs-theme="dark"] .cookies-setting-item {
  background: var(--bs-modal-bg);
  border-color: var(--bs-border-color);
  box-shadow: none !important;
}

/**
 * ========================================================
 * FLATPICKR DATE PICKER STYLING
 * Consistent with form inputs - matching backgrounds & borders
 * ========================================================
 */
/* Flatpickr input styling - match other form inputs */
.flatpickr-input {
  background-color: var(--bs-paper-bg) !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/* Flatpickr Calendar Popup Container - Pure Monochrome Theme */
.flatpickr-calendar {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color, #e0e0e0) !important;
  background-color: var(--bs-paper-bg, #ffffff) !important;
  box-shadow: var(--bs-box-shadow-lg) !important;
  z-index: 99999 !important;
}

/* Remove background color from month, weekdays, days, dropdowns, and arrow containers */
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper input,
.flatpickr-calendar .numInputWrapper input.cur-year,
.flatpickr-calendar input.cur-year,
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .dayContainer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header, Month, Year & Arrows - Pure Monochrome (#2b2b2b) */
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month span.cur-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  color: #2b2b2b !important;
  font-weight: 600 !important;
  fill: #2b2b2b !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #ffffff !important;
  color: #2b2b2b !important;
}

.flatpickr-calendar span.flatpickr-weekday {
  color: #444444 !important;
  font-weight: 600 !important;
}

/* Flatpickr Year Input - Clean borderless & transparent */
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper input,
.flatpickr-calendar .numInputWrapper input.cur-year,
.flatpickr-calendar input.cur-year,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .numInputWrapper:hover,
.flatpickr-calendar .numInputWrapper:focus,
.flatpickr-calendar .numInputWrapper:focus-within,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:focus,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:focus-within,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:hover,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:focus,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:active,
.flatpickr-calendar input.cur-year:hover,
.flatpickr-calendar input.cur-year:focus,
.flatpickr-calendar input.cur-year:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
}
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Disabled Dates in Light Mode - Readable Muted Monochrome Grey (Not Invisible) */
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.prevMonthDay.disabled,
.flatpickr-calendar .flatpickr-day.nextMonthDay.disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: #888888 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* Dark Mode Flatpickr Overrides - Pure Monochrome Dark */
[data-bs-theme="dark"] .flatpickr-calendar,
.dark-style .flatpickr-calendar {
  background-color: #222222 !important;
  border-color: #444444 !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-calendar span.flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdaycontainer,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-days,
.dark-style .flatpickr-calendar .flatpickr-weekdays,
.dark-style .flatpickr-calendar span.flatpickr-weekday,
.dark-style .flatpickr-calendar .flatpickr-weekdaycontainer,
.dark-style .flatpickr-calendar .flatpickr-month,
.dark-style .flatpickr-calendar .flatpickr-months,
.dark-style .flatpickr-calendar .flatpickr-current-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-current-month input.cur-year,
.dark-style .flatpickr-calendar .numInputWrapper,
.dark-style .flatpickr-calendar .numInputWrapper input,
.dark-style .flatpickr-calendar .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar input.cur-year {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
.dark-style .flatpickr-calendar .flatpickr-current-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #222222 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:hover,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:focus,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:focus-within,
.dark-style .flatpickr-calendar .numInputWrapper,
.dark-style .flatpickr-calendar .numInputWrapper input,
.dark-style .flatpickr-calendar .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .numInputWrapper:hover,
.dark-style .flatpickr-calendar .numInputWrapper:focus,
.dark-style .flatpickr-calendar .numInputWrapper:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar span.flatpickr-weekday,
.dark-style .flatpickr-calendar span.flatpickr-weekday {
  color: #bbbbbb !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day:not(.disabled):not(.notAllowed):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay),
.dark-style .flatpickr-calendar .flatpickr-day:not(.disabled):not(.notAllowed):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
  color: #ffffff !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* ALL Disabled & Prev/Next Month Dates in Dark Mode - Uniform Muted Grey (#666666 / opacity 1) */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.disabled,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.notAllowed,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay,
.dark-style .flatpickr-calendar .flatpickr-day.disabled,
.dark-style .flatpickr-calendar .flatpickr-day.notAllowed,
.dark-style .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.dark-style .flatpickr-calendar .flatpickr-day.prevMonthDay,
.dark-style .flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: #666666 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* FLATPICKR ACTIVE/SELECTED DATE STYLING (DIRECT SOLID PRIMARY ORANGE, NO BORDER, NO SHADOW) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.selected,
.dark-style .flatpickr-calendar .flatpickr-day.selected {
  background: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* FLATPICKR TODAY (HARI INI) STYLING - Outline border only when not selected */
.flatpickr-calendar .flatpickr-day.today:not(.selected),
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.today:not(.selected),
.dark-style .flatpickr-calendar .flatpickr-day.today:not(.selected) {
  border: 1px solid var(--bs-primary) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}


/* Form Control disabled & readonly styling is consolidated in the UNIFIED section below */


/* Modal titles and form labels - font-weight 600 */
.modal-title,
.form-label {
  font-weight: 600;
}

.btn-outline-primary,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-success,
.btn-outline-secondary {
  border-width: 1px;
}

/* Outline Buttons: Invert badge colors on hover/active/focus */
.btn-outline-primary:hover .badge.bg-primary,
.btn-outline-primary:focus .badge.bg-primary,
.btn-outline-primary:active .badge.bg-primary,
.btn-outline-primary.active .badge.bg-primary {
  background-color: #fff !important;
  color: var(--bs-primary, #ff5911) !important;
}

.btn-outline-secondary:hover .badge.bg-secondary,
.btn-outline-secondary:focus .badge.bg-secondary,
.btn-outline-secondary:active .badge.bg-secondary,
.btn-outline-secondary.active .badge.bg-secondary {
  background-color: #fff !important;
  color: var(--bs-secondary) !important;
}

.btn-outline-success:hover .badge.bg-success,
.btn-outline-success:focus .badge.bg-success,
.btn-outline-success:active .badge.bg-success,
.btn-outline-success.active .badge.bg-success {
  background-color: #fff !important;
  color: var(--bs-success) !important;
}

.btn-outline-danger:hover .badge.bg-danger,
.btn-outline-danger:focus .badge.bg-danger,
.btn-outline-danger:active .badge.bg-danger,
.btn-outline-danger.active .badge.bg-danger {
  background-color: #fff !important;
  color: var(--bs-danger) !important;
}

.btn-outline-warning:hover .badge.bg-warning,
.btn-outline-warning:focus .badge.bg-warning,
.btn-outline-warning:active .badge.bg-warning,
.btn-outline-warning.active .badge.bg-warning {
  background-color: #fff !important;
  color: var(--bs-warning) !important;
}

.btn-outline-info:hover .badge.bg-info,
.btn-outline-info:focus .badge.bg-info,
.btn-outline-info:active .badge.bg-info,
.btn-outline-info.active .badge.bg-info {
  background-color: #fff !important;
  color: var(--bs-info) !important;
}

.btn .badge {
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Secondary Button Override - Force BG Color from root.css */
.btn-label-secondary {
  --bs-btn-bg: var(--bs-secondary-bg) !important;
  --bs-btn-border-color: var(--bs-secondary-bg) !important;
  --bs-btn-hover-bg: color-mix(in sRGB,
      #fff 15%,
      var(--bs-secondary-bg)) !important;
}

.asset-item {
  border: 2px solid var(--bs-border-color) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0;
  cursor: pointer !important;
  overflow: hidden;
  position: relative;
  background: transparent !important;
}

.asset-item:hover {
  border-color: #7367f0 !important;
  background-color: rgba(115, 103, 240, 0.1) !important;
  transform: translateY(-4px) !important;
  box-shadow: none !important;
}

.asset-item.selected {
  border-color: #7367f0 !important;
  background-color: rgba(115, 103, 240, 0.35) !important;
  border-width: 2px !important;
}

.card-datatable .table.table-bordered thead th,
.card-datatable .table.table-bordered tbody td {
  border-left: none !important;
}

/* ========================================================
 * UNIFIED SELECT & CHOICES.JS PARITY (100% Identical)
 * Shared Height (38.6px), Line-Height (1.7), Font-Size (0.9375rem), 
 * Border-Width, Border-Radius, Padding, Text & Placeholder Colors
 * ========================================================
 */
div.choices,
.choices,
.choices.form-select,
.choices.form-control,
.choices[class*="form-"] {
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  height: auto !important;
  font-family: inherit;
  font-size: 0.9375rem;
  width: 100%;
}

[data-bs-theme="dark"] div.choices,
[data-bs-theme="dark"] .choices,
[data-bs-theme="dark"] .choices.form-select,
[data-bs-theme="dark"] .choices.form-control,
[data-bs-theme="dark"] .choices[class*="form-"] {
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* All form controls share identical height, font-size, box-sizing, and border-radius */
.form-control:not(.form-control-sm):not(.form-control-lg):not(.auth-input .form-control):not(textarea):not(.d-none):not([hidden]),
select.form-select:not(.form-select-sm):not(.form-select-lg):not(.d-none):not([hidden]),
select.choices-select:not(.d-none):not([hidden]),
select[class*="choices"]:not(.d-none):not([hidden]),
.choices__inner,
.flatpickr-input:not(.form-control-sm):not(.form-control-lg):not(.d-none):not([hidden]),
.input-group>.input-group-text:not(.input-group-sm > .input-group-text):not(.input-group-lg > .input-group-text):not(.d-none):not([hidden]) {
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  min-height: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  font-size: var(--bs-font-size-text, 0.9375rem) !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Active Form Controls Background & Text Color */
.form-control:not(.form-control-sm):not(.form-control-lg):not(.auth-input .form-control):not(textarea):not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled):not(.input-filled-disabled):not([readonly].input-filled-disabled):not([readonly].cursor-not-allowed),
select.form-select:not(.form-select-sm):not(.form-select-lg):not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled),
select.choices-select:not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled),
select[class*="choices"]:not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled),
.choices:not(.is-disabled) .choices__inner,
.flatpickr-input:not(.form-control-sm):not(.form-control-lg):not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled),
.input-group>.input-group-text:not(.input-group-sm > .input-group-text):not(.input-group-lg > .input-group-text):not(.d-none):not([hidden]) {
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

select.choices-select:not([data-choice="active"]),
select[class*="choices"]:not([data-choice="active"]) {
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

select.form-select,
select.choices-select,
select[class*="choices"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 0 2.5rem 0 0.9375rem !important;
  line-height: calc(var(--bs-control-height, 44px) - 2px) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  background-size: 14px 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.choices__inner {
  display: flex !important;
  align-items: center !important;
  padding: 0 2.5rem 0 0.9375rem !important;
  line-height: 1.5 !important;
  overflow: hidden !important;
}

/* Re-assert left padding for choices inside form-icon-container */
.form-icon-container .choices__inner,
.form-icon-container .choices .choices__inner,
.form-icon-container .choices.is-open .choices__inner,
.form-icon-container .choices.is-focused .choices__inner,
.form-icon-container .choices[data-type*="select-one"] .choices__inner {
  padding-left: 42px !important;
}

[data-bs-theme="dark"] .form-control:not(.form-control-sm):not(.form-control-lg):not(.auth-input .form-control):not(textarea):not(.d-none):not([hidden]):not(:disabled):not([disabled]):not(.disabled):not(.input-filled-disabled),
[data-bs-theme="dark"] select.form-select:not(:disabled):not([disabled]):not(.disabled),
[data-bs-theme="dark"] select.choices-select:not(:disabled):not([disabled]):not(.disabled),
[data-bs-theme="dark"] select[class*="choices"]:not(:disabled):not([disabled]):not(.disabled),
[data-bs-theme="dark"] select.form-select option,
[data-bs-theme="dark"] .choices:not(.is-disabled) .choices__inner,
[data-bs-theme="dark"] .choices__list--dropdown {
  background-color: var(--bs-paper-bg, var(--bs-card-bg, #1e1e1e)) !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  color: var(--bs-heading-color, #e6e6f1) !important;
}

[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select.choices-select,
[data-bs-theme="dark"] select[class*="choices"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Neutral Monochrome Placeholders - Light Theme */
select.form-select:invalid,
select.form-select:has(option[value=""]:checked),
select.choices-select::placeholder,
.choices__placeholder,
.choices__list--single .choices__placeholder,
.choices__input::placeholder,
.choices__list--dropdown .choices__input::placeholder {
  color: #7b7b7b !important;
}

/* Neutral Monochrome Placeholders - Dark Theme */
[data-bs-theme="dark"] select.form-select:invalid,
[data-bs-theme="dark"] select.form-select:has(option[value=""]:checked),
[data-bs-theme="dark"] select.choices-select::placeholder,
[data-bs-theme="dark"] .choices__placeholder,
[data-bs-theme="dark"] .choices__list--single .choices__placeholder,
[data-bs-theme="dark"] .choices__input::placeholder,
[data-bs-theme="dark"] .choices__list--dropdown .choices__input::placeholder {
  color: #8e8e8e !important;
}

.choices,
.choices *,
.choices__inner,
.choices__input,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  outline: none !important;
  box-shadow: none !important;
}

.choices__list--single {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.choices__list--single .choices__item {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  pointer-events: none !important;
}

.choices:not(.is-disabled):not(:has(select:disabled)) .choices__list--single .choices__item:not(.choices__placeholder) {
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

.choices__list--single .choices__placeholder,
.choices__placeholder {
  color: #7b7b7b !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  pointer-events: none !important;
}

.choices__button,
.choices__list--single .choices__button,
.choices__list--dropdown,
.choices__list--dropdown * {
  pointer-events: auto !important;
}

[data-bs-theme="dark"] .choices:not(.is-disabled):not(:has(select:disabled)) .choices__list--single .choices__item:not(.choices__placeholder) {
  color: var(--bs-heading-color, #e6e6f1) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .choices__list--single .choices__placeholder,
[data-bs-theme="dark"] .choices__placeholder {
  color: #8e8e8e !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Hide unselectable placeholder items inside dropdown list menu */
.choices__list--dropdown .choices__placeholder,
.choices__list--dropdown .choices__item[data-value=""],
.choices__list--dropdown .choices__item--choice[data-value=""],
.choices__list--dropdown .choices__item[data-choice-placeholder],
.choices__list--dropdown .choices__item--choice[data-choice-placeholder],
.choices__list--dropdown .choices__item--disabled[data-value=""] {
  display: none !important;
}

/* ==========================================================================
   UNIFIED DISABLED & READONLY STATE STYLING (Inputs, Flatpickr, Selects, Choices.js)
   ========================================================================== */

/* Outer choices wrapper must remain transparent without background/border */
div.choices.is-disabled,
.choices.is-disabled,
.choices[data-type*="select-one"].is-disabled,
.choices[data-type*="select-multiple"].is-disabled {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inner disabled and readonly controls hold background, border, and border-radius */
.form-control:disabled,
.form-control[disabled],
.form-control.disabled,
.form-control[readonly].input-filled-disabled,
.form-control[readonly].cursor-not-allowed,
.form-control.input-filled-disabled,
.form-select:disabled,
.form-select[disabled],
.form-select.disabled,
input:not([type="checkbox"]):not([type="radio"]):disabled,
input:not([type="checkbox"]):not([type="radio"])[disabled],
input:not([type="checkbox"]):not([type="radio"]).disabled,
input[readonly].input-filled-disabled,
input[readonly].cursor-not-allowed,
input.input-filled-disabled,
select:disabled,
select[disabled],
select.disabled,
textarea:disabled,
textarea[disabled],
textarea.disabled,
textarea[readonly].input-filled-disabled,
input.flatpickr-input:disabled,
input.flatpickr-input[disabled],
.flatpickr-input:disabled,
.flatpickr-input[disabled],
.input-filled-disabled,
.input-filled-disabled[readonly],
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input,
.choices.is-disabled :is(.choices__inner, .choices__input),
.choices[data-type*="select-one"].is-disabled .choices__inner,
.choices[data-type*="select-multiple"].is-disabled .choices__inner {
  background-color: var(--bs-secondary-bg, #eaeaea) !important;
  color: var(--bs-secondary-color, #8e8e8e) !important;
  cursor: not-allowed !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Ensure single-line disabled inputs maintain identical 44px height */
.form-control:disabled:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-control[disabled]:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-control.disabled:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-control[readonly].input-filled-disabled:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-control[readonly].cursor-not-allowed:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-control.input-filled-disabled:not(textarea):not(.auth-input .form-control):not(.auth-section .form-control),
.form-select:disabled:not(.auth-input .form-select):not(.auth-section .form-select),
.form-select[disabled]:not(.auth-input .form-select):not(.auth-section .form-select),
.form-select.disabled:not(.auth-input .form-select):not(.auth-section .form-select),
input:not([type="checkbox"]):not([type="radio"]):not(.auth-input input):not(.auth-section input):disabled,
input:not([type="checkbox"]):not([type="radio"]):not(.auth-input input):not(.auth-section input)[disabled],
input:not([type="checkbox"]):not([type="radio"]):not(.auth-input input):not(.auth-section input).disabled,
input[readonly].input-filled-disabled:not(.auth-input input):not(.auth-section input),
input[readonly].cursor-not-allowed:not(.auth-input input):not(.auth-section input),
input.input-filled-disabled:not(.auth-input input):not(.auth-section input),
.input-filled-disabled:not(textarea):not(.auth-input *):not(.auth-section *),
.input-filled-disabled[readonly]:not(textarea):not(.auth-input *):not(.auth-section *),
.choices.is-disabled:not(.auth-input .choices):not(.auth-section .choices) .choices__inner {
  min-height: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  max-height: var(--bs-control-height, 44px) !important;
  font-size: var(--bs-font-size-text, 0.9375rem) !important;
  box-sizing: border-box !important;
}

[data-bs-theme="light"] .form-control:disabled,
[data-bs-theme="light"] .form-control[disabled],
[data-bs-theme="light"] .form-control[readonly].input-filled-disabled,
[data-bs-theme="light"] .form-control[readonly].cursor-not-allowed,
[data-bs-theme="light"] .form-control.input-filled-disabled,
[data-bs-theme="light"] .form-select:disabled,
[data-bs-theme="light"] .form-select[disabled],
[data-bs-theme="light"] input:not([type="checkbox"]):not([type="radio"]):disabled,
[data-bs-theme="light"] input:not([type="checkbox"]):not([type="radio"])[disabled],
[data-bs-theme="light"] input[readonly].input-filled-disabled,
[data-bs-theme="light"] input[readonly].cursor-not-allowed,
[data-bs-theme="light"] input.input-filled-disabled,
[data-bs-theme="light"] select:disabled,
[data-bs-theme="light"] select[disabled],
[data-bs-theme="light"] textarea:disabled,
[data-bs-theme="light"] textarea[disabled],
[data-bs-theme="light"] .input-filled-disabled,
[data-bs-theme="light"] .input-filled-disabled[readonly],
[data-bs-theme="light"] .choices.is-disabled .choices__inner {
  background-color: var(--bs-secondary-bg, #eaeaea) !important;
  color: var(--bs-secondary-color, #8e8e8e) !important;
  cursor: not-allowed !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[disabled],
[data-bs-theme="dark"] .form-control.disabled,
[data-bs-theme="dark"] .form-control[readonly].input-filled-disabled,
[data-bs-theme="dark"] .form-control[readonly].cursor-not-allowed,
[data-bs-theme="dark"] .form-control.input-filled-disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-select[disabled],
[data-bs-theme="dark"] .form-select.disabled,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):disabled,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"])[disabled],
[data-bs-theme="dark"] input.disabled,
[data-bs-theme="dark"] input[readonly].input-filled-disabled,
[data-bs-theme="dark"] input[readonly].cursor-not-allowed,
[data-bs-theme="dark"] input.input-filled-disabled,
[data-bs-theme="dark"] select:disabled,
[data-bs-theme="dark"] select[disabled],
[data-bs-theme="dark"] select.disabled,
[data-bs-theme="dark"] textarea:disabled,
[data-bs-theme="dark"] textarea[disabled],
[data-bs-theme="dark"] textarea.disabled,
[data-bs-theme="dark"] .input-filled-disabled,
[data-bs-theme="dark"] .input-filled-disabled[readonly],
[data-bs-theme="dark"] .choices.is-disabled .choices__inner {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--bs-gray-500, #888888) !important;
  cursor: not-allowed !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Disabled Search Container - exactly single level opacity matching disabled buttons */
form#filter-search:has(input:disabled),
form[id*="search"]:has(input:disabled),
.input-group:has(input[type="search"]:disabled),
.position-relative:not(form *):has(input[id*="search"]:disabled),
.position-relative:not(form *):has(input[placeholder*="Cari"]:disabled),
.position-relative:not(form *):has(input[type="search"]:disabled) {
  opacity: 0.65 !important;
}

.choices.is-disabled,
.choices.is-disabled *,
.choices[aria-disabled="true"],
.choices[aria-disabled="true"] *,
.choices:has(select:disabled),
.choices:has(select:disabled) *,
.choices:has(select[disabled]),
.choices:has(select[disabled]) * {
  color: var(--bs-secondary-color, #8e8e8e) !important;
  cursor: not-allowed !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

[data-bs-theme="dark"] .choices.is-disabled,
[data-bs-theme="dark"] .choices.is-disabled *,
[data-bs-theme="dark"] .choices[aria-disabled="true"],
[data-bs-theme="dark"] .choices[aria-disabled="true"] *,
[data-bs-theme="dark"] .choices:has(select:disabled),
[data-bs-theme="dark"] .choices:has(select:disabled) *,
[data-bs-theme="dark"] .choices:has(select[disabled]),
[data-bs-theme="dark"] .choices:has(select[disabled]) * {
  color: var(--bs-gray-500, #888888) !important;
}


.choices__list--dropdown {
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
  z-index: 2050 !important;
  word-break: break-word;
  padding: 0 !important;
  margin-top: 0.25rem !important;
}

/* Choices dropdown opening downwards */
.choices:not(.is-flipped) .choices__list--dropdown:not(.is-flipped) {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 0.375rem !important;
  margin-bottom: 0 !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  padding: 0.375rem !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
}

/* Choices dropdown opening upwards (flipped) — Identical symmetrical gap */
.choices.is-flipped .choices__list--dropdown,
.choices .choices__list--dropdown.is-flipped,
.choices__list--dropdown.is-flipped,
.choices[data-type*="select-one"].is-flipped .choices__list--dropdown,
.choices[data-type*="select-multiple"].is-flipped .choices__list--dropdown {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0.375rem !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  padding: 0.375rem !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
}

/* Elevate choices dropdown inside table to render cleanly on top of rows */
.choices.is-open {
  position: relative;
  z-index: 2050 !important;
}

.choices__list--dropdown .choices__list {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.choices__list--dropdown .choices__input,
.modal .choices__list--dropdown .choices__input {
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
  color: var(--bs-body-color) !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  padding: 0.3125rem 0.75rem !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  min-height: 34px !important;
  height: 34px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
}

.choices[data-type*="select-multiple"],
.choices[data-type*="select-multiple"] .choices__inner,
div.choices[data-type*="select-multiple"] .choices__inner {
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.choices[data-type*="select-multiple"] .choices__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.375rem 0.625rem !important;
  cursor: text !important;
}

.choices[data-type*="select-multiple"] .choices__input,
.choices__inner .choices__input {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.2rem 0.25rem !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
}

.choices__list--dropdown .choices__input:focus {
  border-color: var(--bs-border-color) !important;
  outline: none !important;
  box-shadow: none !important;
}

.choices__list--dropdown .choices__item {
  padding: 0.3125rem 0.75rem !important;
  margin: 0 !important;
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  min-height: 32px !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
}

/* Selected, Hovered, & Highlighted State using 100% Native Sneat CSS Variables */
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover {
  background-color: var(--bs-dropdown-link-active-bg, var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb), 0.16))) !important;
  color: var(--bs-dropdown-link-active-color, var(--bs-primary)) !important;
  font-weight: 500 !important;
}

/* Hide empty placeholder items inside dropdown list menu */
.choices__list--dropdown .choices__placeholder,
.choices__list--dropdown .choices__item[data-value=""],
.choices__list--dropdown .choices__item--choice[data-value=""],
.choices__list--dropdown .choices__item[data-choice-placeholder],
.choices__list--dropdown .choices__item--choice[data-choice-placeholder],
.choices__list--dropdown .choices__item--disabled[data-value=""] {
  display: none !important;
}

.choices__list--multiple {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.choices__list--multiple .choices__item {
  background-color: var(--bs-primary) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.6rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--bs-primary) !important;
  opacity: 0.85 !important;
}

.choices__list--multiple .choices__item .choices__button {
  margin: 0 0 0 0.25rem !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding-left: 0.35rem !important;
  opacity: 0.85 !important;
  background-size: 8px 8px !important;
  display: inline-block !important;
  position: static !important;
  text-indent: -9999px !important;
  width: 12px !important;
  height: 12px !important;
}

.choices__list--multiple .choices__item .choices__button:hover {
  opacity: 1 !important;
}

.choices[data-type*="select-one"]::after {
  border: none !important;
  width: 14px !important;
  height: 14px !important;
  right: 0.875rem !important;
  margin-top: -7px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  pointer-events: none !important;
  transition: transform 0.2s ease-in-out !important;
}

.choices[data-type*="select-one"].is-open::after {
  transform: rotate(180deg) !important;
}

/* Hide arrow (chevron) completely when select / choices is disabled */
.choices.is-disabled::after,
.choices[data-type*="select-one"].is-disabled::after,
.choices:has(select:disabled)::after,
.choices:has(select[disabled])::after,
.choices:has(select.disabled)::after,
div.choices.is-disabled::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Hide arrow on native select elements when disabled */
select.form-select:disabled,
select.form-select[disabled],
select.form-select.disabled,
select.choices-select:disabled,
select.choices-select[disabled],
select.choices-select.disabled,
select[class*="choices"]:disabled,
select[class*="choices"][disabled],
select[class*="choices"].disabled {
  background-image: none !important;
}

/* Choices.js Clear (X) Button - Hidden by default on single select dropdowns unless data-allow-clear="true" */
.choices[data-type*="select-one"] {
  position: relative !important;
}

.choices[data-type*="select-one"] .choices__inner {
  position: relative !important;
}

.choices[data-type*="select-one"] .choices__button {
  display: none !important;
}

.choices[data-type*="select-one"][data-allow-clear="true"] .choices__button,
.choices[data-type*="select-one"]:has(select[data-allow-clear="true"]) .choices__button,
.choices[data-allow-clear="true"] .choices__button,
.choices:has(select[data-allow-clear="true"]) .choices__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
  background-size: 13px 13px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  right: 2.25rem !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  border: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

.choices[data-type*="select-one"] .choices__button:hover {
  opacity: 0.85 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

[data-bs-theme="dark"] .choices[data-type*="select-one"][data-allow-clear="true"] .choices__button,
[data-bs-theme="dark"] .choices[data-type*="select-one"]:has(select[data-allow-clear="true"]) .choices__button,
[data-bs-theme="dark"] .choices[data-allow-clear="true"] .choices__button,
[data-bs-theme="dark"] .choices:has(select[data-allow-clear="true"]) .choices__button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Hide clear (X) button when disabled OR when placeholder / empty item is in single list */
.choices.is-disabled .choices__button,
.choices[aria-disabled="true"] .choices__button,
.choices:has(select:disabled) .choices__button,
.choices:has(select[disabled]) .choices__button,
.choices[data-type*="select-one"]:has(.choices__list--single .choices__placeholder) .choices__button,
.choices[data-type*="select-one"]:has(.choices__list--single [data-value=""]) .choices__button,
.choices[data-type*="select-one"]:has(.choices__list--single [data-value="-"]) .choices__button,
.choices[data-type*="select-one"]:has(.choices__list--single [data-value="0"]) .choices__button,
.choices[data-type*="select-one"] .choices__list--single .choices__placeholder .choices__button,
.choices[data-type*="select-one"] .choices__list--single [data-value=""] .choices__button,
.is-disabled .choices__button,
[disabled] .choices__button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Dark Mode Selected, Hovered, & Highlighted Items using 100% Root CSS Variables */
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-selected,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable:hover {
  background-color: var(--bs-dropdown-link-active-bg, rgba(var(--bs-primary-rgb), 0.16)) !important;
  color: var(--bs-dropdown-link-active-color, var(--bs-primary)) !important;
  font-weight: 500 !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__input {
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
  color: var(--bs-body-color, #e6e6f1) !important;
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__input:focus {
  border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color) !important;
}

/* Choices.js disabled dropdown items support */
.choices__list--dropdown .choices__item--disabled,
.choices__list--dropdown .choices__item[aria-disabled="true"],
.choices__list[aria-expanded] .choices__item--disabled,
.choices__list--dropdown .choices__item--disabled:hover,
.choices__list--dropdown .choices__item--disabled.is-highlighted {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.28) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item--disabled,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item[aria-disabled="true"],
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--disabled,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--disabled:hover,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--disabled.is-highlighted {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.22) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

@media (max-width: 575.98px) {
  .choices__list--dropdown {
    max-height: 50vh !important;
    overflow-y: auto !important;
    z-index: 1050 !important;
  }
}

.dropdown-menu {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
}

.card {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-card-border-radius, 0.5rem) !important;
  box-shadow: var(--bs-card-box-shadow) !important;
  background-clip: padding-box !important;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card .table-responsive,
.card>.table-responsive {
  max-height: none !important;
  overflow-y: visible !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bs-body-bg) !important;
  border-color: transparent;
}

td,
th {
  white-space: nowrap;
}

tr {
  height: 60px;
}

/* LIGHT MODE - TABLE BORDER COLOR - Tables use gray-100 */
[data-bs-theme="light"] .table {
  --bs-table-border-color: var(--bs-gray-100);
}

/* DARK MODE - CARD & MODAL STYLING - Dark bg for cards/modals */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas {
  --bs-card-bg: var(--body-dark) !important;
  --bs-card-subtitle-color: color-mix(in srgb, #e6e6f1 55%, #575757);
  --bs-modal-bg: var(--body-dark) !important;
  --bs-dropdown-bg: var(--body-dark) !important;
  --bs-paper-bg: var(--body-dark) !important;
}

.progress {
  overflow: hidden;
}

.progress .progress-bar {
  box-shadow: none !important;
}

/**
 * ========================================================
 * DRIVER.JS CUSTOM THEME 
 * Bootstrap-aligned modal card popup
 * ========================================================
 */
.driver-popover {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Style tombol didesain sama persis dengan kelas btn btn-primary / btn-outline-secondary milik Bootstrap */
.driver-popover-next-btn,
.driver-popover-done-btn {
  background-color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary) !important;
  color: var(--bs-white, #fff) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 0.375rem 0.75rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 767.98px) {
  .content-wrapper {
    padding-bottom: 80px !important;
    /* Allow inner elements (like the pill bar) to break out of container padding
       without causing page-level horizontal scroll.
       overflow-x: clip does NOT create a new BFC unlike overflow-x: hidden */
    overflow-x: clip;
  }
  .content-footer {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.modal-footer,
.modal-body .d-flex[class*="gap-"].justify-content-center,
.modal-body .d-flex[class*="gap-"].justify-content-around,
.modal-body .d-flex[class*="gap-"].justify-content-between,
.modal-body .d-flex[class*="gap-"].justify-content-end {
  gap: 12px !important;
  /* Standarisasi gap antar tombol modal */
}

/* Modal footer dengan border-top: berikan padding agar tombol tidak menempel ke garis border */
/* --bs-card-spacer-y didefinisikan global di root.css (1.5rem) — sinkron dengan card-body */
.modal-footer.border-top,
.modal .modal-footer.border-top,
.modal-footer[class*="border-top"],
.modal .modal-footer[class*="border-top"] {
  padding-top: var(--bs-card-spacer-y) !important;
  padding-bottom: var(--bs-card-spacer-y) !important;
}

/* Modal header dengan border-bottom: berikan padding-bottom agar tidak menempel ke garis border */
/* core.css default: padding 1.5rem 1.5rem 0 — bottom-nya 0 sehingga konten mepet ke border */
.modal-header.border-bottom,
.modal .modal-header.border-bottom,
.modal-header[class*="border-bottom"],
.modal .modal-header[class*="border-bottom"] {
  padding-bottom: var(--bs-card-spacer-y) !important;
}

.modal-footer .btn,
.modal-body .d-flex[class*="gap-"].justify-content-center .btn,
.modal-body .d-flex[class*="gap-"].justify-content-around .btn,
.modal-body .d-flex[class*="gap-"].justify-content-between .btn,
.modal-body .d-flex[class*="gap-"].justify-content-end .btn {
  margin: 0 !important;
  /* Hapus margin bawaan bootstrap agar gap konsisten */
}

@media (max-width: 767.98px) {
  .modal .modal-dialog:not(.modal-fullscreen) {
    padding-inline: 0 !important;
  }

  .modal-dialog {
    margin: 1rem !important;
    max-width: none !important;
  }

  .modal-footer,
  #detail-user-actions,
  .modal-body .d-flex[class*="gap-"].justify-content-center:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions),
  .modal-body .d-flex[class*="gap-"].justify-content-around:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions),
  .modal-body .d-flex[class*="gap-"].justify-content-between:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions),
  .modal-body .d-flex[class*="gap-"].justify-content-end:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions) {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .modal-footer .btn:not(.dropdown-item),
  .modal-footer div[class*="col-"]:not(.dropdown-menu),
  #detail-user-actions div[class*="col-"]:not(.dropdown-menu),
  #detail-user-actions .btn:not(.dropdown-item),
  .modal-body .d-flex[class*="gap-"].justify-content-center:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions) > .btn,
  .modal-body .d-flex[class*="gap-"].justify-content-around:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions) > .btn,
  .modal-body .d-flex[class*="gap-"].justify-content-between:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions) > .btn,
  .modal-body .d-flex[class*="gap-"].justify-content-end:not(.no-stack):not(.btn):not(.avatar-initial):not(.dropdown-notifications-actions) > .btn {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 950px;
    /* Default ~800px */
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1250px;
    /* Default ~1140px */
  }
}

.table tbody tr,
.table thead tr,
tr {
  height: auto !important;
}

/* Ensure avatars and content in table cells don't add extra vertical padding */
.table .avatar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



@media (max-width: 767.98px) {

  /* Aligns the modal dialog to the absolute bottom of the screen (True Bottom Sheet) */
  .modal {
    padding: 0 !important;
  }

  .modal .modal-dialog,
  .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    z-index: 1060 !important;
  }

  /* Slide-up animation override */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .modal.show:not(.is-dragging) .modal-dialog {
    transform: translateY(0);
  }

  .modal.is-dragging .modal-dialog {
    transition: none !important;
    will-change: transform;
  }

  /* Styling for the sheet content */
  .modal .modal-content,
  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4) !important;
  }

  [data-bs-theme="dark"] .modal .modal-content,
  [data-bs-theme="dark"] .modal-content {
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7) !important;
  }

  /* Small grab handle-bar at the top */
  .modal .modal-content::before,
  .modal-content::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: #808080;
    border-radius: 2px;
    margin: 10px auto 0 auto;
    flex-shrink: 0;
  }

  .modal-content form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .modal-header,
  .modal-footer {
    flex-shrink: 0 !important;
  }

  .modal-footer .btn {
    width: 100% !important;
  }

  .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal .modal-header .btn-close {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
  }
}

/* ── Modal Table Scrollable Container (Desktop 450px, Mobile responsive to viewport) ── */
.modal-table-scroll {
  max-height: 450px;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .modal-table-scroll {
    max-height: calc(88vh - 350px) !important;
    min-height: 180px;
  }
}

/**
 * ========================================================
 * MODERN UI UTILITIES & STANDARDIZATION
 * Consolidated styles from inline PHP to global CSS
 * Includes: Animations, Typography Scale, and Layout Fixes
 * ========================================================
 */
.collapse-arrow {
  transition: transform 0.2s ease-in-out;
}

[aria-expanded="true"] .collapse-arrow {
  transform: rotate(180deg);
}

/* Modal Header Standard Fix (Z-index conflict with navbar) */
.modal-header-custom {
  position: relative !important;
  z-index: 1060 !important;
}

/* Equalize Height & Eliminate Header Flicker for Table Loading & Empty States */

table tbody tr td.table-empty-state,
table tbody tr td.table-loading-state,
.table tbody td.table-empty-state,
.table tbody td.table-loading-state,
.table tbody tr:has(.table-empty-state) td,
.table tbody tr:has(.table-empty-state-container) td,
.table-responsive .table-empty-state,
.table-responsive .table-loading-state {
  min-height: auto !important;
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.table-empty-state-container,
.table-loading-state-container,
.table-empty-state .table-empty-state-inner,
.table-loading-state .table-loading-state-inner {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0.5rem !important;
}

.table-empty-state i,
.table-empty-state-container i {
  font-size: 2.5rem !important;
  opacity: 0.75;
  margin-bottom: 0.25rem !important;
  display: inline-block;
}

.table-empty-state h6,
.table-empty-state-container h6 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.2rem !important;
}

.table-empty-state p,
.table-empty-state-container p {
  font-size: 0.875rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure spinner-border always maintains crisp circular dimensions */
.spinner-border {
  width: 2rem !important;
  height: 2rem !important;
  flex-shrink: 0 !important;
}

.spinner-border.spinner-border-sm {
  width: 1rem !important;
  height: 1rem !important;
}



.live-indicator-box {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 18px;
}

.circle:before {
  content: "";
  position: relative;
  display: block;
  width: 250%;
  height: 250%;
  box-sizing: border-box;
  margin-left: -75%;
  margin-top: -75%;
  border-radius: 50%;
  background-color: var(--bs-primary);
  animation: pulse 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.circle:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--bs-primary);
  border-radius: 50%;
  animation: circle 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.33);
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
  }
}

/* Custom NProgress Color Override - Full Page Width */
#nprogress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

#nprogress .bar {
  background: var(--bs-primary) !important;
  height: 3px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

[id^="tourCard-"] {
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes slide-down-tour {
  0% {
    opacity: 0;
    transform: translateY(-30px) scaleY(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes slide-up-tour {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px) scaleY(0.95);
    margin-bottom: -70px;
    /* smoothly collapses the layout space */
  }
}

/* ==========================================================================
   BAB 4 : FORM CONTROLS & PICKERS
   --------------------------------------------------------------------------
   Inputs, Choices.js, Flatpickr, Quill, Password Meter & Search
   ========================================================================== */

.form-check-input:checked {
  box-shadow: none;
}

/* Select disabled styled in unified section */

.form-icon-container {
  position: relative;
}

/* Choices inside Input Group */
.form-icon-container .choices {
  width: 100% !important;
}

/* ==========================================================================
   BAB 5 : FEATURE-SPECIFIC STYLES
   --------------------------------------------------------------------------
   Detail Kelas, Presensi Sesi, Buku Catatan/Notes, Referral & Avatar
   ========================================================================== */

.google-btn:hover,
.email-btn:hover {
  border-color: var(--bs-primary) !important;
}

.google-btn span,
.email-btn span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/**
 * ========================================================
 * UNSUBSCRIBE PAGE STYLES
 * Styled page for newsletter unsubscription with status icons
 * Centered layout with clear call-to-action buttons
 * ========================================================
 */
.unsubs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.unsubs-title {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  color: var(--bs-gray-700);
  margin-bottom: 12px;
}

.unsubs-desc {
  font-size: 16px;
  color: var(--bs-gray-800);
  margin-bottom: 32px;
  line-height: 1.6;
}

/**
 * ========================================================
 * AVATAR SYSTEM - CONSISTENT INITIALS DISPLAY
 * Unified avatar styling with fixed colors from brand palette
 * Supports multiple sizes with proportional font sizing
 * Colors consistent across light/dark modes from CSS variables
 * ========================================================
 */
/* Base avatar wrapper container - Keep Bootstrap's position: relative */
/* Do not override Bootstrap's .avatar styling to maintain proper layout */
.avatar {
  margin-inline-end: 0.8rem;
}

.avatar-color {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  color: var(--bs-primary) !important;
  font-weight: bold;
}

/**
 * ========================================================
 * SEARCH BAR & AUTOCOMPLETE
 * Navbar search functionality with detached search panel
 * Custom styling for search input and results display
 * ========================================================
 */
.navbar-search-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 100%;
  flex-grow: 1;
  width: 100%;
}

.search-toggler {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.search-toggler .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100%;
}

.search-toggler #autocomplete,
.search-toggler .aa-Autocomplete,
.search-toggler .aa-DetachedSearchButton {
  padding: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.aa-DetachedSearchButtonIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.aa-DetachedSearchButtonIcon::before {
  background-color: var(--bs-nav-link-color);
  content: "";
  display: inline-block !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1199.98px) {

  .aa-DetachedSearchButtonIcon,
  .aa-DetachedSearchButtonIcon *,
  .aa-SubmitButton,
  .aa-SubmitButton *,
  .aa-SearchIcon,
  .aa-SearchIcon * {
    display: none !important;
  }
}

.aa-DetachedSearchButtonPlaceholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bs-nav-link-color);
  font-size: inherit;
  white-space: nowrap;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Autocomplete Detached Modal Center & Scrolling */
.aa-DetachedOverlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

.aa-DetachedOverlay .aa-DetachedContainer {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: auto !important;
  width: min(92vw, 660px) !important;
  max-height: min(85vh, 680px) !important;
  background: var(--bs-paper-bg) !important;
  box-shadow: var(--bs-box-shadow-lg) !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.aa-DetachedOverlay .aa-DetachedFormContainer {
  flex-shrink: 0 !important;
  border-bottom: 1px solid var(--bs-border-color-translucent) !important;
  padding: 0.85rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.aa-DetachedOverlay .aa-Form {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.aa-DetachedOverlay .aa-InputWrapper {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

.aa-DetachedOverlay .aa-InputWrapperPrefix {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.65rem !important;
  flex-shrink: 0 !important;
}

.aa-DetachedOverlay .aa-SubmitButton {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bs-body-color) !important;
}

.aa-DetachedOverlay .aa-SubmitButton svg,
.aa-DetachedOverlay .aa-SubmitButton i,
.aa-DetachedOverlay .aa-SubmitButton .icon-base {
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
}

.aa-DetachedOverlay .aa-Input,
.aa-DetachedOverlay input.search-control,
.aa-DetachedOverlay #autocomplete-0-input {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.9375rem !important;
  color: var(--bs-heading-color) !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}

.aa-DetachedOverlay .aa-DetachedCancelButton {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0 0.75rem !important;
  cursor: pointer !important;
  color: var(--bs-secondary-color) !important;
  flex-shrink: 0 !important;
  position: static !important;
  width: auto !important;
}

.aa-DetachedOverlay .aa-DetachedCancelButton:hover {
  color: var(--bs-heading-color) !important;
}

@media (max-width: 767.98px) {
  .aa-DetachedOverlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 0.75rem !important;
  }

  .aa-DetachedOverlay .aa-DetachedContainer {
    width: min(94vw, 520px) !important;
    max-height: min(84vh, 620px) !important;
    margin: auto !important;
    border-radius: 0.75rem !important;
  }

  .aa-DetachedOverlay .aa-DetachedFormContainer {
    padding: 0.75rem 1rem !important;
    position: relative !important;
    background: transparent !important;
  }

  .aa-DetachedOverlay .aa-Input,
  .aa-DetachedOverlay input.search-control,
  .aa-DetachedOverlay #autocomplete-0-input {
    font-size: 16px !important; /* Prevents iOS auto-zoom viewport jump */
  }

  .aa-DetachedCancelButton .aa-esc-text,
  .aa-DetachedCancelButton .text-body-secondary {
    display: none !important;
  }

  .aa-DetachedContainer .aa-Panel {
    max-height: calc(min(84vh, 620px) - 60px) !important;
  }
}

.aa-DetachedContainer .aa-Panel {
  flex: 1 1 auto !important;
  max-height: calc(min(85vh, 680px) - 65px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.aa-DetachedContainer .aa-Panel::-webkit-scrollbar {
  width: 6px !important;
}

.aa-DetachedContainer .aa-Panel::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.2) !important;
  border-radius: 3px !important;
}

.aa-DetachedContainer .aa-Panel::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--bs-body-color-rgb), 0.35) !important;
}

/* Modals scroll containment & Typography */
.modal {
  overscroll-behavior: contain !important;
}

.modal-body {
  overscroll-behavior: contain !important;
}

/* Prevent Orphan Words in Modal Body (mencegah 1 kata menggantung di baris bawah) */
.modal-body p {
  text-wrap: balance;
}

/* Optimal modal-sm width for confirmation dialogs */
@media (min-width: 576px) {
  .modal-dialog.modal-sm {
    max-width: 360px;
  }
}

/* Ensure modal search & text inputs are full-width on mobile */
@media (max-width: 767.98px) {

  .modal-body input[type="text"]:not(.form-control-inline),
  .modal-body input[type="search"]:not(.form-control-inline) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/**
 * ========================================================
 * BOOKING - SERVICE SELECTION
 * Custom option styling for service display and layout
 * Icon and title styling for service boxes
 * ========================================================
 */
.service-long-box .custom-option-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  padding: 15px 20px !important;
}

.service-long-box .custom-option-body i {
  margin-right: 20px !important;
  margin-bottom: 0 !important;
  font-size: 1.5rem !important;
}

.service-long-box .custom-option-title {
  margin-bottom: 2px !important;
}

.owl-nav .owl-next {
  right: -10px;
}

.owl-carousel:not(.owl-loaded) {
  display: flex;
  overflow: hidden;
  gap: 10px;
}

.cookies-banner.show {
  bottom: 0;
}

.cookies-text {
  flex: 1;
  text-align: left;
}

.cookies-text p {
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--bs-white) !important;
  line-height: 1.6;
  padding: 0;
}

.cookies-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  white-space: nowrap;
}

.cookies-settings-link:hover {
  text-decoration: underline !important;
}

.cookies-setting-item:last-child {
  margin-bottom: 0;
}

.cookies-setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cookies-setting-title {
  font-weight: 600;
  margin-bottom: 0;
  color: var(--bs-heading-color);
}

.cookies-setting-desc {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0;
  line-height: 1.4;
}

.driver-popover-title {
  color: var(--bs-heading-color) !important;
}

.driver-popover-description {
  color: var(--bs-body-color) !important;
}

.driver-popover-close-btn {
  color: var(--bs-body-color) !important;
}

.driver-popover-progress-text {
  color: var(--bs-secondary) !important;
}

.driver-popover-next-btn:hover,
.driver-popover-done-btn:hover {
  background-color: var(--bs-primary-text-emphasis) !important;
  border-color: var(--bs-primary-text-emphasis) !important;
}

/* ==========================================================================
   8. ANIMATIONS & SKELETON LOADERS
   ========================================================================== */

#nprogress .peg {
  display: none !important;
}

#nprogress .spinner {
  display: none !important;
}


.btn:disabled,
.btn.disabled {
  background-color: var(--bs-btn-bg, inherit) !important;
  border: 1px solid var(--bs-btn-border-color, var(--bs-btn-bg, currentColor)) !important;
  color: var(--bs-btn-color, inherit) !important;
  opacity: 0.65 !important;
}

/* ==========================================================================
   BAB 6 : TABLES & RESPONSIVE MEDIA QUERIES
   --------------------------------------------------------------------------
   Table Styles, Mobile Stack Tables, Sort Icons & @media Breakpoints
   ========================================================================== */
@media (max-width: 767.98px) {

  /* Make tables fit container width without horizontal scroll */
  .table-responsive {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .table:not(.table-no-stack),
  .table.table-no-stack {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .table:not(.table-no-stack) td,
  .table:not(.table-no-stack) th,
  .table.table-no-stack td,
  .table.table-no-stack th {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .table.table-no-stack td.col-checkbox-cell {
    width: 44px !important;
    max-width: 44px !important;
    flex-shrink: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.25rem !important;
  }

  .table.table-no-stack td:not(.col-checkbox-cell) {
    max-width: 0;
    overflow: hidden;
  }

  /* Hide less important columns on mobile */
  .table:not(.table-no-stack) .d-none.d-md-table-cell,
  .table.table-no-stack .d-none.d-md-table-cell {
    display: none !important;
  }

  /* Fix long text truncation and button alignment in table cells */
  .table td .d-flex.align-items-center {
    width: 100% !important;
    min-width: 0 !important;
  }

  .table td .lh-base.overflow-hidden,
  .user-meta-info .lh-base {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
    padding-right: 4px !important;
  }

  .table td .fw-bold.text-truncate:not(.d-none):not([hidden]),
  .user-meta-info .user-name:not(.d-none):not([hidden]),
  .table td .user-name:not(.d-none):not([hidden]) {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: 0.75rem !important;
  }

  .user-meta-info .user-id:not(.d-none):not([hidden]),
  .table td .user-id:not(.d-none):not([hidden]) {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: 0.7rem !important;
  }

  .table:not(.table-no-stack) td .badge:has(.bx-chevron-right) {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .badge-mobile-sm {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}


/* Ensure avatar status dots always render cleanly on top of avatar images at bottom right */
.avatar.avatar-online::after,
.avatar.avatar-offline::after,
.avatar.avatar-away::after,
.avatar.avatar-busy::after {
  z-index: 5 !important;
  bottom: 0 !important;
  right: 0 !important;
}

/* Remove default focus outline/border on avatar toggles and navbar links */
#profile-menu,
#profile-menu:focus,
#profile-menu:active,
.avatar,
.avatar:focus,
.avatar:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Remove default focus outline/border on avatar toggles and navbar links */
#profile-menu,
#profile-menu:focus,
#profile-menu:active,
.avatar,
.avatar:focus,
.avatar:active,
#userStatusCollapseToggle,
#userStatusCollapseToggle:focus,
#userStatusCollapseToggle:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Optimize status collapse transition speed inside dropdown menu */
#userStatusCollapse.collapsing {
  transition: height 0.15s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}


/* ==========================================================================
   BUKU CATATAN — Notebook / Journal View
   ========================================================================== */

/* ---- Header "Buku Catatan" button on index page ---- */
.notes-book-btn {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.18s, color 0.18s;
}

/* ---- Filter select (book page) ---- */
.notes-book-filter .form-select {
  border-radius: 8px;
}

/* ---- Main timeline wrapper ---- */
.notes-book-container {
  width: 100%;
  padding-bottom: 3rem;
}

/* ---- Year Divider ---- */
.notes-book-year-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem 0;
  padding-left: 2.25rem;
  position: relative;
}

.notes-book-year-divider::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bs-border-color);
}

.notes-book-year-divider span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 20px;
  white-space: nowrap;
}

/* ---- Entry row (timeline + card) ---- */
.notes-book-entry {
  display: flex;
  gap: 0;
  align-items: stretch;
  /* Stretch to match card height */
  position: relative;
  padding-bottom: 1.25rem;
  /* Moved gap from card margin to entry padding */
}

/* ---- Timeline column ---- */
.notes-book-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  padding-top: 1.5rem;
  position: relative;
}

.notes-book-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bs-primary);
  border: 2.5px solid var(--bs-body-bg);
  box-shadow: 0 0 0 2px var(--bs-primary);
  flex-shrink: 0;
  z-index: 1;
  transition: box-shadow 0.2s;
}

.notes-book-dot--last {
  background: var(--bs-success);
  box-shadow: 0 0 0 2px var(--bs-success);
}

.notes-book-line {
  position: absolute;
  top: calc(1.5rem + 13px + 4px);
  /* Start slightly below the dot */
  bottom: -1.5rem;
  /* Extend down through the gap to touch the next dot */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--bs-border-color);
  z-index: 0;
}

/* ---- Note Card ---- */
.notes-book-card {
  flex: 1;
  min-width: 0;
  background: var(--bs-card-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-card-border-radius, 0.5rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  /* Gap is now handled by .notes-book-entry padding-bottom */
  margin-left: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.notes-book-content .ql-editor p:last-child {
  margin-bottom: 0 !important;
}

.notes-book-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
  border-color: var(--bs-primary-light, #c8d8ff);
}

/* ---- Card Header ---- */
.notes-book-card-header {
  margin-bottom: 0.75rem;
}

.notes-book-class-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.notes-book-date-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}

/* ---- Progress bar ---- */
.notes-book-progress-bar-wrap {
  height: 5px;
  width: 60px;
  border-radius: 99px;
  background: var(--bs-border-color);
  overflow: hidden;
  flex-shrink: 0;
}

.notes-book-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--bs-primary);
  transition: width 0.3s;
}

/* ---- Divider ---- */
.notes-book-divider {
  border-color: var(--bs-border-color);
  margin: 0.875rem 0;
  opacity: 0.7;
}

/* ---- Note Content (Quill override) ---- */
.notes-book-content .ql-editor {
  padding: 0 !important;
  font-size: 0.9375rem;
  line-height: 1.75;
  min-height: unset !important;
  color: var(--bs-body-color);
}

.notes-book-content.ql-snow {
  border: none !important;
}

/* ---- Card Footer ---- */
.notes-book-card-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--bs-border-color);
}

/* ---- End Marker ---- */
.notes-book-end-marker {
  display: flex;
  align-items: center;
  padding-left: 0.875rem;
  margin-top: 0.5rem;
}

.notes-book-end-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bs-border-color);
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
  .notes-book-card {
    padding: 1rem 1rem;
    border-radius: 10px;
  }

  .notes-book-timeline {
    width: 1.75rem;
  }

  .notes-book-card {
    margin-left: 0.5rem;
  }

  .notes-book-year-divider {
    padding-left: 1.5rem;
  }

  .notes-book-filter .form-select {
    min-width: 140px !important;
  }
}

/* ==========================================================================
   GLOBAL BOTTOM SHEET MODAL (FOR MOBILE FILTERS & SIDEBAR PANELS)
   ========================================================================== */

/* Prevent background window from scrolling when ANY modal or sidebar is open */
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html:has(body.modal-open) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.bottom-sheet-modal.modal {
  overflow: hidden !important;
}

@media (max-width: 991.98px) {
  .bottom-sheet-modal .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    display: flex !important;
    align-items: flex-end !important;
    z-index: 1050;
  }

  .bottom-sheet-modal.modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  .bottom-sheet-modal.modal.show:not(.is-dragging) .modal-dialog {
    transform: translateY(0);
  }

  .bottom-sheet-modal .modal-content {
    border-radius: 20px 20px 0 0;
    border: none;
    max-height: 85vh;
    height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
  }

  /* Handle dark theme style nicely */
  [data-bs-theme="dark"] .bottom-sheet-modal .modal-content {
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  }

  /* Drag handle/grabber on top of bottom sheet */
  .bottom-sheet-modal .modal-content::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 2px;
    margin: 10px auto 0 auto;
    flex-shrink: 0;
  }
}

/* Desktop Right Sidebar Modal */
@media (min-width: 992px) {
  .bottom-sheet-modal .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    width: 380px !important;
    max-width: 100% !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  .bottom-sheet-modal.show .modal-dialog {
    transform: translateX(0) !important;
  }

  .bottom-sheet-modal .modal-content {
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bottom-sheet-modal.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out !important;
    transform: translateX(100%) !important;
  }

  .bottom-sheet-modal.modal.show .modal-dialog {
    transform: translateX(0) !important;
  }
}

/* Universal Structure for all Bottom-Sheet & Right-Sidebar Modals */
.bottom-sheet-modal .modal-content form {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.bottom-sheet-modal .modal-body,
.bottom-sheet-modal .modal-content form .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
}

/* Pinned Footer with Standardized Buttons */
.bottom-sheet-modal .modal-footer,
.bottom-sheet-modal .modal-content form .modal-footer,
#modalFilters .modal-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 1.5rem !important;
  width: 100% !important;
  border-top: 1px solid var(--bs-border-color) !important;
}

.bottom-sheet-modal .modal-footer .btn,
.bottom-sheet-modal .modal-content form .modal-footer .btn,
#modalFilters .modal-footer .btn {
  width: 100% !important;
  height: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  font-size: var(--bs-font-size-btn, 0.9375rem) !important;
  font-weight: 600 !important;
  padding: 0 1.25rem !important;
  border-radius: var(--bs-control-border-radius, 0.375rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   GLOBAL FILTER PANEL CONSISTENCY
   ========================================================================== */

/* ── Modal Header ── */
.bottom-sheet-modal .modal-header,
.modal.fade .modal-header {
  position: relative;
  z-index: 1060;
}

/* ── Consistent btn-close position in filter panels ── */
.bottom-sheet-modal .modal-header .btn-close {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* ── Ensure modal-header always has flex layout ── */
.bottom-sheet-modal .modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ── Choices inside modals & forms: parent wrappers elevation when open ── */
.modal .choices,
.choices {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure any parent wrapper of an open choices inside modal-body is elevated above all sibling wrappers without affecting modal-dialog/modal-content positioning */
.modal-body .form-group:has(.choices.is-open),
.modal-body .mb-3:has(.choices.is-open),
.modal-body .mb-4:has(.choices.is-open),
.modal-body .col-12:has(.choices.is-open),
.modal-body .col-md-6:has(.choices.is-open),
.modal-body .position-relative:has(.choices.is-open),
.modal-body > div:has(.choices.is-open),
.modal-body > div:has(.choices.is-flipped) {
  position: relative !important;
  z-index: 2050 !important;
}

.modal .choices.is-open,
.modal .choices.is-flipped {
  position: relative !important;
  z-index: 2050 !important;
}

/* Disabled choices should never receive pointer events or create competing elevated stacking contexts */
.choices.is-disabled,
.choices.is-disabled * {
  pointer-events: none !important;
  cursor: not-allowed !important;
  user-select: none !important;
}

.choices.is-disabled {
  position: relative;
  z-index: 1 !important;
}

.modal .modal-footer {
  position: relative;
  z-index: 10 !important;
}

.choices.is-open,
.choices.is-focused,
.choices[data-type*="select-one"].is-open {
  position: relative !important;
  z-index: 1050 !important;
}

.modal .choices__list--dropdown,
.choices__list--dropdown {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  z-index: 2060 !important;
}

.modal .choices.is-flipped .choices__list--dropdown,
.bottom-sheet-modal .choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list--dropdown {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0.375rem !important;
  padding: 0.375rem !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
}

.modal .choices:not(.is-flipped) .choices__list--dropdown,
.bottom-sheet-modal .choices:not(.is-flipped) .choices__list--dropdown,
.choices:not(.is-flipped) .choices__list--dropdown {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 0.375rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0.375rem !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
}


.choices.is-flipped .choices__inner,
.choices[data-type*="select-one"].is-flipped .choices__inner {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  border: 1px solid var(--bs-border-color) !important;
}

.choices.is-open.is-flipped .choices__inner,
.choices[data-type*="select-one"].is-open.is-flipped .choices__inner {
  border-color: var(--bs-primary) !important;
}

.modal .choices__item {
  white-space: normal !important;
  word-break: break-word !important;
}

/* ── form-select inside modals: no horizontal scroll ── */
.modal .form-select,
.modal select {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ── Modal body: no horizontal scroll ── */
#modalFilters .modal-body {
  overflow-x: hidden !important;
  padding: 1.5rem !important;
}

/* ==========================================================================
   FEATURE UTILITIES & COMPONENT STYLING
   ========================================================================== */
@media (max-width: 767.98px) {
  .user-row-clickable {
    cursor: pointer !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .user-row-clickable:active {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
  }
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-7 {
  font-size: 0.8rem;
}

.fs-8 {
  font-size: 0.72rem;
}

.collapse-arrow {
  transition: transform 0.2s ease-in-out;
}

[aria-expanded="true"] .collapse-arrow {
  transform: rotate(180deg);
}

.activity-card {
  transition: all 0.2s ease;
  border-radius: 12px;
}

.activity-card:active {
  transform: scale(0.98);
}

.activity-card.active {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary-bg-subtle);
}

.btn-outline-primary:disabled,
.btn-outline-primary[disabled] {
  border: 1px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  opacity: 0.45 !important;
  background-color: transparent !important;
}

.btn-kehadiran-ongoing {
  transition: all 0.2s ease-in-out;
}

html[data-bs-theme="light"] .btn-kehadiran-ongoing {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  background-color: transparent !important;
}

html[data-bs-theme="light"] .btn-kehadiran-ongoing:hover,
html[data-bs-theme="light"] .btn-kehadiran-ongoing:focus,
html[data-bs-theme="light"] .btn-kehadiran-ongoing:active {
  color: #fff !important;
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
}

.btn-check:checked+.btn .check-icon {
  display: block !important;
}

.btn-check:checked+.btn .uncheck-icon {
  display: none !important;
}

.btn-check:checked+.btn i.bx-checkbox:before {
  content: "\eb23" !important;
}

.btn-check:checked+label.activity-label-listening,
.btn-check:checked+label[for="modal-list-check"] {
  background-color: rgba(3, 195, 236, 0.08) !important;
  color: #03c3ec !important;
  border-color: rgba(3, 195, 236, 0.2) !important;
}

/* Activity Sharing Button State Styling */
.activity-label-sharing,
label[for="modal-share-check"] {
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.2)) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .activity-label-sharing,
[data-bs-theme="dark"] label[for="modal-share-check"] {
  border-color: var(--bs-border-color) !important;
  color: #c5c5c5 !important;
}

/* Enabled & Checked */
.btn-check:checked:not(:disabled)+label.activity-label-sharing,
.btn-check:checked:not(:disabled)+label[for="modal-share-check"] {
  background-color: rgba(113, 221, 55, 0.12) !important;
  color: #71dd37 !important;
  border-color: rgba(113, 221, 55, 0.35) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Enabled & Unchecked */
.btn-check:not(:checked):not(:disabled)+label.activity-label-sharing,
.btn-check:not(:checked):not(:disabled)+label[for="modal-share-check"] {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Disabled State: Warna & border sama dengan normal, murni menggunakan opacity */
.btn-check:disabled+label.activity-label-sharing,
.btn-check:disabled+label[for="modal-share-check"],
label.activity-label-sharing.disabled,
label.activity-label-sharing[style*="not-allowed"] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 767.98px) {
  .participant-row-clickable {
    cursor: pointer;
  }
}

html[data-bs-theme="dark"] .btn-kehadiran-ongoing {
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  background-color: transparent !important;
}

html[data-bs-theme="dark"] .btn-kehadiran-ongoing:hover,
html[data-bs-theme="dark"] .btn-kehadiran-ongoing:focus,
html[data-bs-theme="dark"] .btn-kehadiran-ongoing:active {
  color: #fff !important;
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}

/* Show page subtitles on mobile but keep them shortened to 1 line with ellipsis */
@media (max-width: 767.98px) {

  .d-flex.flex-column p.text-muted,
  .d-flex.flex-column p.text-muted.small,
  .d-flex.flex-column p.text-muted span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80vw !important;
    font-size: 0.9rem !important;
  }
}



/* Disable hover cursor, scale, zoom, filter, and pointer on modal detail avatars */
.avatar-user-detail,
.avatar-user-detail * {
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Custom global override for pagination page-link padding, border-radius, and shadow removal */
.page-link {
  padding: 5px 8px !important;
  box-shadow: none !important;
}

.pagination .page-link {
  border-radius: 6px !important;
  min-width: 32px;
  text-align: center;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: 6px !important;
}

.page-link:focus,
.page-link:hover,
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover,
.pagination .page-item.active .page-link,
.pagination li.active>a:not(.page-link) {
  box-shadow: none !important;
}

/* ==========================================================================
   Responsive Mobile Pagination
   ========================================================================== */
/* Global: Hide empty pagination UL only — scoped to avoid hiding nav menus */
ul.pagination:empty,
ul.pagination:not(:has(.page-item)) {
  display: none !important;
}
nav[aria-label]:not(:has(.page-item)):not(:has(.nav-link)):not(:has(a)):not(:has(button)) {
  display: none !important;
}

@media (max-width: 575.98px) {

  .card-footer:has(.pagination:not(:empty)),
  .card-footer:has(ul.pagination:not(:empty)),
  [id*="PaginationFooter"]:has(.page-item),
  [id*="paginationFooter"]:has(.page-item),
  .pagination-container:has(.page-item) {
    flex-direction: column !important;
    gap: 0.625rem !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .card-footer:not(:has(.page-item)),
  [id*="PaginationFooter"]:not(:has(.page-item)),
  [id*="paginationFooter"]:not(:has(.page-item)),
  .pagination-container:not(:has(.page-item)) {
    gap: 0 !important;
  }

  .card-footer:has(.pagination) small,
  .card-footer:has(ul.pagination) small,
  .card-footer:has(.pagination) .text-muted,
  [id*="PaginationFooter"] small,
  [id*="paginationFooter"] small,
  [id*="PaginationInfo"],
  [id*="paginationInfo"] {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  /* Sembunyikan tombol angka halaman di mobile, sisakan hanya Prev & Next */
  .pagination .page-item:not(:first-child):not(:last-child) {
    display: none !important;
  }

  .pagination {
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link {
    min-width: 4.5rem;
    padding: 6px 14px !important;
    text-align: center;
  }
}

/* Ensure paginated table rows do not double bottom border with card-footer */
.table tr.pagination-last-visible-row td,
.table tr.pagination-last-visible-row th,
.table-border-bottom-0 tr.pagination-last-visible-row td,
.table-border-bottom-0 tr.pagination-last-visible-row th {
  border-bottom-width: 0 !important;
  border-block-end-width: 0 !important;
}

/* Cache bust: 10082026_01 */

/* ==========================================================================
   UNIVERSAL UNIFORM DIMMED SORT ICONS
   ========================================================================== */
th.sortable-th,
th.user-sortable-header,
th[data-sort-field],
th.cursor-pointer {
  white-space: nowrap !important;
}

th .bx-sort-alt-2,
th .bx-sort,
th .bx-sort-up,
th .bx-sort-down,
th .sort-icon,
th .sort-icon-indicator,
th span[class*="sort"],
th i[class*="bx-sort"],
.modal th .bx-sort-alt-2,
.modal th .bx-sort,
.modal th .bx-sort-up,
.modal th .bx-sort-down,
.modal th .sort-icon,
.modal th .sort-icon-indicator,
.modal th span[class*="sort"],
.modal th i[class*="bx-sort"] {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  text-align: center !important;
  margin-left: 0.35rem !important;
  opacity: 0.5 !important;
  font-size: 1.0em !important;
  color: currentColor !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transform: translateY(-0.75px) !important;
  transition: opacity 0.2s ease !important;
}

th:hover .bx-sort-alt-2,
th:hover .bx-sort,
th:hover .bx-sort-up,
th:hover .bx-sort-down,
th:hover .sort-icon,
th:hover .sort-icon-indicator,
th:hover span[class*="sort"],
th:hover i[class*="bx-sort"],
.modal th:hover i[class*="bx-sort"],
.modal th:hover span[class*="sort"] {
  opacity: 0.85 !important;
}

/* Ensure table column widths are 100% rigid and never shift on pagination/re-render */
.table-fixed {
  table-layout: fixed !important;
  width: 100% !important;
}

.table-fixed th {
  overflow: visible;
  white-space: nowrap !important;
}

.table-fixed td {
  overflow: visible;
}

@keyframes live-pulse {
  0% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
}

.live-dot-indicator {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  min-width: 0.38rem;
  min-height: 0.38rem;
  background-color: var(--bs-danger, #ff3e1d);
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  align-self: center;
  animation: live-pulse 1.8s infinite ease-in-out;
}

.static-dot-indicator {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  min-width: 0.38rem;
  min-height: 0.38rem;
  background-color: var(--bs-warning, #ffab00);
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  align-self: center;
}

.badge .live-dot-indicator,
.badge .static-dot-indicator {
  align-self: center;
  flex-shrink: 0;
}

.live-pulse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  animation: live-pulse 1.8s infinite ease-in-out;
}

@media (max-width: 1199.98px) {
  .classes-desktop-table {
    min-width: 960px;
  }
}

@media (max-width: 767.98px) {
  #bulkActionsWrapper {
    flex-basis: 100%;
  }
}

@media (max-width: 767.98px) {
  .user-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
}

.flatpickr-calendar {
  z-index: 2000 !important;
}

th.sortable-th {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.sort-icon-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

th.sortable-th:hover .sort-icon-indicator {
  opacity: 0.8;
}

th.sortable-th.asc .sort-icon-indicator,
th.sortable-th.desc .sort-icon-indicator {
  opacity: 1;
}

.audit-sortable-header,
.class-sortable-header,
.repeat-main-sortable-header,
.user-sortable-header,
.team-sortable-header,
.materials-sortable-header,
.participants-sortable-header,
.email-sortable-header,
.shortener-sortable-header,
.content-sortable-header {
  white-space: nowrap !important;
  user-select: none;
}

.audit-sortable-header .sort-icon,
.class-sortable-header .sort-icon,
.repeat-main-sortable-header .sort-icon,
.user-sortable-header .sort-icon,
.team-sortable-header .sort-icon,
.materials-sortable-header .sort-icon {
  display: inline-block;
  vertical-align: middle;
}

/* Ensure all table headers and cells in main tables and modal tables are centered vertically */
.table th,
.modal .table th {
  vertical-align: middle !important;
}



/* Global Standardized Checkbox Column Alignment & Gap across ALL tables */
.col-checkbox-cell,
.table th.col-checkbox-cell,
.table td.col-checkbox-cell,
.table th:first-child:has(.form-check-input),
.table td:first-child:has(.form-check-input),
#participantsTable th.col-checkbox-cell,
#participantsTable td.col-checkbox-cell {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.col-checkbox-cell .form-check-input,
.table th:first-child:has(.form-check-input) .form-check-input,
.table td:first-child:has(.form-check-input) .form-check-input {
  margin: 0 auto !important;
  display: block !important;
  float: none !important;
  position: static !important;
  vertical-align: middle !important;
}

@media (min-width: 768px) {

  .col-checkbox-cell,
  .table th.col-checkbox-cell,
  .table td.col-checkbox-cell,
  .table th:first-child:has(.form-check-input),
  .table td:first-child:has(.form-check-input),
  #participantsTable th.col-checkbox-cell,
  #participantsTable td.col-checkbox-cell {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
  }
}

/* Standardized gap on the data cell immediately following the checkbox */
.col-checkbox-cell+td,
.col-checkbox-cell+th,
td.col-checkbox-cell+td,
th.col-checkbox-cell+th,
.table td:first-child:has(.form-check-input)+td,
.table th:first-child:has(.form-check-input)+th {
  padding-left: 0.5rem !important;
}

@media (min-width: 768px) {

  .col-checkbox-cell+td,
  .col-checkbox-cell+th,
  td.col-checkbox-cell+td,
  th.col-checkbox-cell+th,
  .table td:first-child:has(.form-check-input)+td,
  .table th:first-child:has(.form-check-input)+th {
    padding-left: 0.75rem !important;
  }
}

#participantsTable {
  width: 100%;
}
#participantsTable .user-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#participantsTable .user-id {
  white-space: nowrap !important;
}
@media (min-width: 768px) {
  #participantsTable {
    min-width: 520px;
  }
}
@media (max-width: 767.98px) {
  #participantsTable {
    min-width: 0 !important;
    width: 100% !important;
  }
  #table-members .table-responsive {
    overflow-x: hidden !important;
  }
}



/* Ensure status cards (Kehadiran Belum Diisi, Sesi Berikutnya, Sesi Berlangsung, Alert Banner) never flicker or turn into skeleton shimmer during page load/refresh */
#unfilledSessionCard,
#unfilledSessionCard *,
#globalUnfilledSessionsAlert,
#globalUnfilledSessionsAlert *,
#ongoingSessionCard,
#ongoingSessionCard *,
#nextUpcomingSessionCard,
#nextUpcomingSessionCard * {
  visibility: visible !important;
}

/* Global Center Alignment strictly for AKSI Column */
.table th.col-aksi,
.table td.col-aksi {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Global removal of box shadow across components (Clean flat modern look) */
.accordion-item,
.accordion-button,
.accordion-button:focus,
.accordion-button:not(.collapsed),
.dropdown-menu,
.choices__list--dropdown,
.card,
.modal-content,
.modal .modal-content,
.modal-dialog .modal-content,
.modal.fade .modal-dialog .modal-content,
.modal-content.shadow,
.modal-content.shadow-sm,
.modal-content.shadow-lg,
.btn,
.btn:focus,
.btn:active,
.form-control:focus,
.form-select:focus,
.flatpickr-calendar {
  box-shadow: none !important;
}

.modal .modal-content,
.modal-content {
  box-shadow: none !important;
  --bs-modal-box-shadow: none !important;
}

/* ==========================================================================
   SMOOTH HORIZONTAL TABLE SCROLLING
   ========================================================================== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
}

@media (max-width: 767.98px) {
  #usersResultsSection .table-responsive,
  #teamResultsSection .table-responsive,
  .table-responsive:has(.table-no-stack) {
    overflow-x: hidden !important;
  }
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

.dark-style .table-responsive::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.dark-style .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark-style .table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Ensure table dropdown menus always float on top of all containers */
.table-responsive .dropdown-menu,
.table .dropdown-menu {
  z-index: 1075 !important;
}

/* ==========================================================================
   CLASS ATTENDANCE TABLE & SCROLL STYLES
   ========================================================================== */
.attendance-table-scroll {
  position: relative;
  min-height: auto !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .attendance-table-scroll,
  .table-responsive.attendance-table-scroll,
  #attendanceForm .table-responsive {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .attendance-table-scroll table {
    min-width: 720px;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .attendance-table-scroll {
    overflow: visible !important;
    min-height: auto !important;
  }

  .attendance-table-scroll table {
    width: 100%;
    min-width: 100%;
  }
}

/* Elevate choices dropdown inside table to render cleanly on top of rows */
table .choices.is-open {
  z-index: 10 !important;
}

table .choices.is-open .choices__list--dropdown {
  z-index: 15 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Table dropdowns: Default downwards, flip upwards when space is constrained */
table .choices:not(.is-flipped) .choices__list--dropdown,
table .choices[data-type*="select-one"]:not(.is-flipped) .choices__list--dropdown {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

table .choices.is-flipped .choices__list--dropdown,
table .choices[data-type*="select-one"].is-flipped .choices__list--dropdown,
table .choices[data-type*="select-multiple"].is-flipped .choices__list--dropdown {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}

.attendance-table-scroll thead th {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Mobile Assessment Modal (Classes Attendance) */
#assessmentModal .modal-body {
  min-height: 420px !important;
  padding: 1.5rem 1.25rem 2rem 1.25rem !important;
}

@media (max-width: 767.98px) {
  #assessmentModal .modal-content {
    min-height: auto !important;
    height: auto !important;
    max-height: 92vh !important;
  }
  #assessmentModal .modal-body {
    overflow-y: visible !important;
    min-height: 420px !important;
    padding: 1.5rem 1.25rem 2rem 1.25rem !important;
  }
  #assessmentModal .modal-footer {
    padding-top: 0.75rem !important;
  }
}

/* Normalize avatar and online dot size inside assessmentModal for all screen sizes */
#assessmentModal #modal-participant-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  position: relative;
}
#assessmentModal #modal-participant-avatar::after {
  /* Online status dot — match desktop default avatar dot size */
  width: 10px !important;
  height: 10px !important;
  bottom: 0 !important;
  right: 0 !important;
}

/* ==========================================================================
   GLOBAL PLACEHOLDER ELLIPSIS & RESPONSIVE SEARCH INPUTS (Poin 4.1)
   ========================================================================== */
input.form-control,
input[type="text"],
input[type="search"] {
  text-overflow: ellipsis !important;
}

::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.choices__input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* ── Universal Search Input & Icon Standardization ── */
.search-input-wrapper,
.position-relative:has(> .bx-search),
.position-relative:has(> i.bx-search) {
  position: relative !important;
}

/* Universal Search Icon Positioning (Desktop & Default) */
.position-relative > i.bx-search,
.position-relative > .bx-search,
.search-input-wrapper > i.bx-search,
.search-input-wrapper > .bx-search {
  position: absolute !important;
  top: 50% !important;
  left: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateY(-50%) !important;
  font-size: 1.2rem !important;
  color: var(--bs-secondary-color, #a1acb8) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Specific Search Input Padding (Desktop & Default) - Only applies when a search icon is present */
.position-relative:has(> i.bx-search) > input.form-control,
.position-relative:has(> .bx-search) > input.form-control,
.search-input-wrapper > input.form-control,
input.search-input {
  padding-left: 2.75rem !important;
  text-overflow: ellipsis !important;
}

/* Ellipsis & Clean Placeholder on All Inputs */
input::placeholder,
.form-control::placeholder {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0.75;
}

@media (max-width: 575.98px) {
  /* Optimize position and padding on mobile */
  .position-relative > i.bx-search,
  .position-relative > .bx-search,
  .search-input-wrapper > i.bx-search,
  .search-input-wrapper > .bx-search {
    left: 0.85rem !important;
    font-size: 1.1rem !important;
    margin-left: 0 !important;
  }

  .position-relative:has(> i.bx-search) > input.form-control,
  .position-relative:has(> .bx-search) > input.form-control,
  .search-input-wrapper > input.form-control,
  input.search-input {
    padding-left: 2.45rem !important;
    font-size: 0.875rem !important;
  }
}

/* User Classes Popover & More Button Styling */
.user-classes-more-btn {
  cursor: pointer !important;
  font-size: 0.75rem !important;
  transition: all 0.2s ease-in-out !important;
}

.user-classes-more-btn:hover,
.user-classes-more-btn:focus {
  background-color: rgba(133, 146, 163, 0.28) !important;
  color: var(--bs-secondary) !important;
}

.user-classes-popover {
  border-radius: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
  z-index: 1090 !important;
  border: 1px solid rgba(140, 140, 160, 0.18) !important;
}

[data-bs-theme="dark"] .user-classes-popover,
.dark-style .user-classes-popover {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-classes-popover .popover-header {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.65rem 0.85rem 0.5rem 0.85rem !important;
  border-bottom: 1px solid rgba(140, 140, 160, 0.15) !important;
  color: var(--bs-heading-color, inherit) !important;
}

[data-bs-theme="dark"] .user-classes-popover .popover-header,
.dark-style .user-classes-popover .popover-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.user-classes-popover .popover-body {
  padding: 0.65rem 0.85rem !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.user-classes-popover .popover-body::-webkit-scrollbar {
  width: 4px;
}

.user-classes-popover .popover-body::-webkit-scrollbar-track {
  background: transparent;
}

.user-classes-popover .popover-body::-webkit-scrollbar-thumb {
  background: rgba(140, 140, 160, 0.25);
  border-radius: 4px;
}

.user-classes-popover .user-classes-item {
  border-bottom: 1px solid rgba(140, 140, 160, 0.12) !important;
}

[data-bs-theme="dark"] .user-classes-popover .user-classes-item,
.dark-style .user-classes-popover .user-classes-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── Admin Responsibility Agreement Checkbox Card ── */
.admin-agree-card {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border-color: var(--bs-border-color) !important;
}

.admin-agree-card:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.04) !important;
}

.admin-agree-card:has(input[type="checkbox"]:checked),
.admin-agree-card:has(#adminAgreeCheckbox:checked) {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  box-shadow: 0 0 0 1px var(--bs-primary);
}

/* ==========================================================================
   Dual-Account GitHub Style Switcher (Navbar Dropdown)
   ========================================================================== */
.account-switch-box {
  background: transparent;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.account-switch-header-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.543rem 1.25rem !important;
  margin: 0 !important;
  width: 100% !important;
  color: var(--bs-heading-color, inherit) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background 0.15s ease;
}

.dropdown-user .avatar,
.dropdown-menu .avatar,
.account-switch-header-btn .avatar,
.account-switch-item .avatar {
  margin: 0 !important;
}

.account-switch-header-btn:hover {
  background: var(--bs-dropdown-link-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--bs-heading-color, inherit) !important;
}

.account-switch-header-btn:focus,
.account-switch-header-btn:focus-visible,
.account-switch-header-btn:active {
  color: var(--bs-heading-color, inherit) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.account-switch-collapse {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease-in-out;
  background: transparent;
}

.account-switch-collapse.show {
  opacity: 1;
}

.account-switch-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.543rem 1.25rem !important;
  margin: 0 !important;
  width: 100% !important;
  color: var(--bs-heading-color, inherit) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  transition: background 0.15s ease;
}

.account-switch-item:hover {
  background: var(--bs-dropdown-link-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--bs-heading-color, inherit) !important;
}

.account-switch-item:focus,
.account-switch-item:focus-visible,
.account-switch-item:active {
  color: var(--bs-heading-color, inherit) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.account-switch-signout {
  color: var(--bs-secondary, #6c757d) !important;
  font-size: 0.875rem;
}

.account-switch-signout:hover,
.account-switch-signout:focus {
  color: var(--bs-danger, #ff3e1d) !important;
  background: rgba(255, 62, 29, 0.08) !important;
}

[data-bs-theme="dark"] .account-switch-signout {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-bs-theme="dark"] .account-switch-signout:hover,
[data-bs-theme="dark"] .account-switch-signout:focus {
  color: #ff6b52 !important;
  background: rgba(255, 107, 82, 0.12) !important;
}

.account-switch-header-btn .switch-icon {
  transition: color 0.2s ease;
}

.account-switch-header-btn.is-active .switch-icon {
  color: var(--bs-primary) !important;
}

/* ── Standard Content Navigation Tabs / Pills System ── */
.content-tab-btn,
.btn-tab-content {
  transition: all 0.2s ease-in-out !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* Inactive State: Subtle neutral gray background with no orange border */
.content-tab-btn.btn-label-secondary,
.btn-tab-content.btn-label-secondary,
.content-tab-btn:not(.btn-primary),
.btn-tab-content:not(.btn-primary) {
  background-color: rgba(133, 146, 163, 0.14) !important;
  color: var(--bs-secondary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.content-tab-btn.btn-label-secondary:hover,
.btn-tab-content.btn-label-secondary:hover,
.content-tab-btn:not(.btn-primary):hover,
.btn-tab-content:not(.btn-primary):hover {
  background-color: rgba(133, 146, 163, 0.24) !important;
  color: var(--bs-heading-color, #fff) !important;
  box-shadow: none !important;
}

/* Active State: Solid Primary (flat, standard without box-shadow) */
.content-tab-btn.btn-primary:not(.btn-label-secondary),
.btn-tab-content.btn-primary:not(.btn-label-secondary) {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
  border-color: var(--bs-primary) !important;
  box-shadow: none !important;
}

/* =========================================================================
   Navbar Clean State & Focus Outline Reset
   ========================================================================= */
.layout-navbar .nav-link,
.layout-navbar .nav-link:focus,
.layout-navbar .nav-link:focus-visible,
.layout-navbar .nav-link:active,
.layout-navbar .nav-link.show,
.layout-navbar .dropdown-toggle,
.layout-navbar .dropdown-toggle:focus,
.layout-navbar .dropdown-toggle:focus-visible,
.layout-navbar .dropdown-item:focus,
.layout-navbar .dropdown-item:focus-visible,
.layout-navbar button:focus,
.layout-navbar button:focus-visible,
.layout-navbar a:focus,
.layout-navbar a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── User Classes Popover ── */
.user-classes-popover .popover-body {
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.user-classes-item {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* ── Standar User Meta Info (Hanya Mengecil di Mobile) ── */
.user-meta-info {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.user-meta-info .lh-base,
.user-meta-info .user-name,
.user-meta-info .user-id {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block;
}

.user-meta-info .user-name {
  color: var(--bs-heading-color, inherit);
}

@media (max-width: 767.98px) {
  .user-meta-info .avatar,
  .table td .avatar,
  .recovery-user-row .avatar {
    --bs-avatar-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    inline-size: 28px !important;
    block-size: 28px !important;
    flex: 0 0 28px !important;
    position: relative !important;
  }
  .user-meta-info .avatar img,
  .user-meta-info .avatar .avatar-initial,
  .table td .avatar img,
  .table td .avatar .avatar-initial,
  .recovery-user-row .avatar img,
  .recovery-user-row .avatar .avatar-initial {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    inline-size: 28px !important;
    block-size: 28px !important;
    font-size: 0.75rem !important;
    line-height: 28px !important;
    box-sizing: border-box !important;
  }
  .user-meta-info .user-name,
  .table td .user-name {
    font-size: 0.75rem !important;
  }
  .user-meta-info .user-id,
  .table td .user-id {
    font-size: 0.7rem !important;
  }
}

/* ── Standar Badge Responsif (Ukuran Normal di Desktop, Proporsional di Mobile) ── */
.badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge),
.badge-responsive:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge) {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Netralkan padding ad-hoc seperti px-2, py-1, px-3 py-2 agar ukuran badge tetap standar */
.badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="px-"],
.badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="py-"],
.badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="p-"] {
  padding: 0.42em 0.77em;
}

@media (max-width: 767.98px) {
  .badge:not(.class-role-pill .badge):not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge),
  .badge-responsive:not(.class-role-pill .badge):not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge),
  .badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="px-"],
  .badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="py-"],
  .badge:not(.btn .badge):not(.rounded-circle):not(.mobile-nav-badge)[class*="p-"],
  .badge-mobile-sm,
  .badge-mobile-md {
    font-size: 0.72rem !important;
    padding: 0.3em 0.58em !important;
    line-height: 1.18 !important;
  }

  .badge.rounded-pill,
  .badge-responsive.rounded-pill {
    border-radius: 50rem !important;
  }
}

/* ── Standar User Meta Info Compact (Audit Logs & Modal Compact) ── */
.user-meta-compact {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.user-meta-compact .avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.user-meta-compact .avatar img {
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
}

.user-meta-compact .avatar .avatar-initial {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.75rem !important;
  line-height: 28px !important;
}

.user-meta-compact .user-name {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--bs-heading-color, inherit) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
}

.user-meta-compact .user-id {
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  color: var(--bs-secondary-color, #a1acb8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
}

.user-meta-compact .avatar.avatar-online::after,
.user-meta-compact .avatar.avatar-offline::after,
.user-meta-compact .avatar.avatar-away::after,
.user-meta-compact .avatar.avatar-busy::after {
  width: 7px !important;
  height: 7px !important;
  bottom: 0 !important;
  right: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1.5px var(--bs-body-bg, #fff) !important;
}

[data-bs-theme="dark"] .user-meta-compact .avatar.avatar-online::after,
[data-bs-theme="dark"] .user-meta-compact .avatar.avatar-offline::after,
[data-bs-theme="dark"] .user-meta-compact .avatar.avatar-away::after,
[data-bs-theme="dark"] .user-meta-compact .avatar.avatar-busy::after {
  box-shadow: 0 0 0 1.5px var(--bs-paper-bg, #2b2c40) !important;
}

/* Normalisasi Spasi Card Header & Card Body
   Mengembalikan padding atas standar saat card-header memiliki .border-bottom,
   namun tetap memprioritaskan class utilitas nol padding seperti .p-0, .pt-0, .py-0 */
.card .card-header.border-bottom + .card-body:not(.p-0):not(.pt-0):not(.py-0),
.card .card-header.border-bottom + .card-content > .card-body:first-of-type:not(.p-0):not(.pt-0):not(.py-0),
.card .card-header.border-bottom ~ .card-body:not(.p-0):not(.pt-0):not(.py-0) {
  padding-top: var(--bs-card-spacer-y, 1.5rem) !important;
}

.card .card-body.p-0,
.card .card-body.pt-0,
.card .card-body.py-0 {
  padding-top: 0 !important;
}

/* =========================================================================
   Global Standardized Proportional Table Row Height & Padding System
   Creates clean, spacious thead headers with compact, comfortable tbody rows
   ========================================================================= */

/* Table Header (thead): Taller, distinct, spacious, and prominent header bar */
.table thead th,
.table > thead > tr > th,
.table:not(.table-sm) > thead > tr > th {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  vertical-align: middle !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Table Body (tbody): Compact, proportional, and flexible row heights */
.table tbody td:not(.table-empty-state):not(.table-loading-state),
.table > tbody > tr:not(.table-empty-row) > td:not(.table-empty-state):not(.table-loading-state),
.table:not(.table-sm) > tbody > tr:not(.table-empty-row) > td:not(.table-empty-state):not(.table-loading-state) {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  vertical-align: middle !important;
}

.table.table-sm thead th,
.table.table-sm > thead > tr > th {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  vertical-align: middle !important;
}

.table.table-sm tbody td,
.table.table-sm > tbody > tr > td {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  vertical-align: middle !important;
}

/* Ensure buttons inside table cells are proportional and don't balloon row height */
.table td .btn-sm,
.table th .btn-sm {
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
}

.table td .btn-icon.btn-sm,
.table th .btn-icon.btn-sm {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}

/* Maintain compact secondary info in multi-line table cells */
.table td .small.text-muted,
.table td small.text-muted {
  line-height: 1.25;
}

.table td .badge:not(.d-none) {
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.table td .btn-link {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table td .btn-link i {
  line-height: 1 !important;
}

/* ==========================================================================
   Global Page Header Action Buttons — Full Width on Mobile
   Ensures all action button containers below the page title are full-width
   on mobile and auto-width on md+ screens
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Header flex row: stack vertically on mobile */
  .d-flex.flex-column.flex-md-row.align-items-start.align-items-md-center.justify-content-between.gap-3.mb-3 > div:last-child:not(.d-flex.flex-column) {
    width: 100% !important;
  }

  /* Any button or anchor inside the header action area: full width */
  .d-flex.flex-column.flex-md-row.align-items-start.align-items-md-center.justify-content-between.gap-3.mb-3 > div.w-100 > .btn:not(.d-none):not([hidden]),
  .d-flex.flex-column.flex-md-row.align-items-start.align-items-md-center.justify-content-between.gap-3.mb-3 > .w-100 > .btn:not(.d-none):not([hidden]) {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Dropdown wrapper full-width on mobile */
  .d-flex.flex-column.flex-md-row.align-items-start.align-items-md-center.justify-content-between.gap-3.mb-3 .dropdown {
    width: 100% !important;
  }
  .d-flex.flex-column.flex-md-row.align-items-start.align-items-md-center.justify-content-between.gap-3.mb-3 .dropdown > .btn {
    width: 100% !important;
  }
}

/* ==========================================================================
   CLASS ROLE PILL FILTERS (Full Rounded, WhatsApp Style Slider on Mobile)
   ========================================================================== */
.class-role-pills-wrapper {
  width: 100%;
}

.class-role-pills-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding: 6px 4px 6px 4px !important;
  margin: -6px -4px -6px -4px !important;
  cursor: grab;
}

.class-role-pills-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.class-role-pills-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@media (max-width: 767.98px) {
  .class-role-pills-wrapper {
    /* Full-bleed: extend to screen edges on mobile.
       Safe because parent .content-wrapper has overflow-x: clip */
    margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
  }

  .class-role-pills-scroll {
    /* Set to 0.7 gutter to visually align the first and last pills with card and input edges */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.7) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.7) !important;
  }
}

.class-role-pill,
button.class-role-pill,
.btn.class-role-pill,
.btn-sm.class-role-pill,
.class-role-pills-scroll .btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  padding: 0 0.45rem 0 0.75rem !important;
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
  -webkit-border-radius: var(--bs-border-radius-pill, 50rem) !important;
  -moz-border-radius: var(--bs-border-radius-pill, 50rem) !important;
  border: 1px solid var(--bs-border-color) !important;
  background-color: var(--bs-paper-bg, var(--bs-body-bg)) !important;
  color: var(--bs-body-color) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  transform: translateY(0) translateZ(0) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.28s ease,
              border-color 0.28s ease,
              color 0.28s ease !important;
  box-shadow: none !important;
  outline: none !important;
  will-change: transform;
}

.class-role-pill .class-role-pill-label {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.class-role-pill .badge,
.class-role-pills-scroll .btn .badge {
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 0 0.35rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  background-color: rgba(var(--black-rgb, 0, 0, 0), 0.06) !important;
  color: var(--bs-secondary-color) !important;
  transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover: Smooth upward lift */
.class-role-pill:hover,
.class-role-pills-scroll .btn:hover {
  transform: translateY(-2px) translateZ(0) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
  color: var(--bs-primary) !important;
  box-shadow: none !important;
}

.class-role-pill:hover .badge,
.class-role-pills-scroll .btn:hover .badge {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/* Active Click (Pressed): Tactile smooth feedback */
.class-role-pill:active,
.class-role-pills-scroll .btn:active {
  transform: translateY(0) scale(0.97) translateZ(0) !important;
  transition: transform 0.08s ease !important;
  box-shadow: none !important;
}

/* Selected Active State: Clean soft primary tint without box shadow */
.class-role-pill.active,
.class-role-pills-scroll .btn.class-role-pill.active,
.class-role-pills-scroll .btn.active {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.class-role-pill.active:hover,
.class-role-pills-scroll .btn.class-role-pill.active:hover,
.class-role-pills-scroll .btn.active:hover {
  transform: translateY(-2px) translateZ(0) !important;
  box-shadow: none !important;
}

.class-role-pill.active .badge,
.class-role-pills-scroll .btn.class-role-pill.active .badge,
.class-role-pills-scroll .btn.active .badge {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  font-weight: 600 !important;
}

/* Dark Mode Styles */
[data-bs-theme="dark"] .class-role-pill,
[data-bs-theme="dark"] .class-role-pills-scroll .btn {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-paper-bg) !important;
  color: var(--bs-body-color) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .class-role-pill .badge,
[data-bs-theme="dark"] .class-role-pills-scroll .btn .badge {
  background-color: rgba(var(--white-rgb, 255, 255, 255), 0.08) !important;
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .class-role-pill:hover,
[data-bs-theme="dark"] .class-role-pills-scroll .btn:hover {
  transform: translateY(-2px) translateZ(0) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.35) !important;
  color: var(--bs-primary) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .class-role-pill:hover .badge,
[data-bs-theme="dark"] .class-role-pills-scroll .btn:hover .badge {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .class-role-pill.active,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.class-role-pill.active,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.active {
  background-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .class-role-pill.active:hover,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.class-role-pill.active:hover,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.active:hover {
  transform: translateY(-2px) translateZ(0) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .class-role-pill.active .badge,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.class-role-pill.active .badge,
[data-bs-theme="dark"] .class-role-pills-scroll .btn.active .badge {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  font-weight: 600 !important;
}

/* Guarantee that in single-select Choices.js, only the latest selected item is ever displayed */
.choices__list--single .choices__item:not(:last-child) {
  display: none !important;
}