/* ==========================================================================
   Blinkstrap Theme & Layout System
   ==========================================================================
   This file contains:
   - DaisyUI v5 theme definitions (light/dark)
   - Layout CSS for sidebar + main structure
   - Mobile-responsive sidebar with overlay
   - Modal system
   - Component polish (cards, tables, badges, alerts)
   - Advanced form widget styles (Quill, searchable select, etc.)

   All color references use DaisyUI v5 CSS custom properties:
     --color-primary, --color-base-content, --color-base-100, etc.
   For opacity variants, use color-mix():
     color-mix(in oklch, var(--color-primary) 70%, transparent)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Typography
   -------------------------------------------------------------------------- */
body {
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Semantic Marker Classes
   --------------------------------------------------------------------------
   These classes carry no styles but serve as semantic hooks for templates
   and potential client overrides.  They document layout intent.
   -------------------------------------------------------------------------- */
.layout-app { /* Marker: authenticated app layout (base_app.html) */ }
.table-container { /* Marker: table wrapper (tables/table.html) */ }
.formset-form { /* Marker: individual formset form (forms/formset.html) */ }

/* --------------------------------------------------------------------------
   Layout System: Sidebar + Main
   --------------------------------------------------------------------------
   Structure:
   - #bl-layout: flex container (row on desktop, column on mobile)
   - #bl-sidebar: fixed-width sidebar (16rem desktop, 72% mobile)
   - #bl-main-shell: flexible main area with min-height to push footer down
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Sidebar: Collapsible Group Summary
   --------------------------------------------------------------------------
   Section headers that expand/collapse children. Styled as prominent
   navigation sections with clear visual hierarchy.
   -------------------------------------------------------------------------- */
.bl-sidebar-group {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.bl-sidebar-group-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding-inline: 0.75rem;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  border-radius: 0.5rem;
  transition: color 0.15s, background-color 0.15s;
}

.bl-sidebar-group-summary:hover {
  color: var(--color-base-content);
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.bl-sidebar-group-summary--active {
  color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 8%, transparent);
}

.bl-sidebar-group-summary--active:hover {
  color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
}

.bl-sidebar-group-summary::-webkit-details-marker {
  display: none;
}

/* Chevron arrow indicator (rotates when open) */
.bl-sidebar-group-summary::after {
  content: "";
  display: block;
  height: 0.375rem;
  width: 0.375rem;
  margin-left: auto;
  rotate: -135deg;
  translate: 0 -1px;
  transition: rotate 0.2s, translate 0.2s;
  transform-origin: 50% 50%;
  box-shadow: 2px 2px inset;
  pointer-events: none;
}

details[open] > .bl-sidebar-group-summary::after {
  rotate: 45deg;
  translate: 0 1px;
}

/* Suppress DaisyUI’s default active flash on group summaries */
.bl-sidebar-group > details > summary:active {
  background-color: transparent !important;
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   Sidebar: Navigation Container
   -------------------------------------------------------------------------- */
.bl-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bl-sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Children inside collapsible groups — indented with left border */
.bl-sidebar-nav .bl-sidebar-group-children {
  padding-left: 0.75rem;
  margin-left: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-left: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

.bl-sidebar-nav li {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Sidebar: Link Items
   --------------------------------------------------------------------------
   All navigation links — root items, children inside containers, etc.
   Uses BEM-style modifier for active state to avoid DaisyUI conflicts.
   -------------------------------------------------------------------------- */
.bl-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.bl-sidebar-link:hover {
  color: var(--color-base-content);
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.bl-sidebar-link--active {
  color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
  font-weight: 600;
}

.bl-sidebar-link--active:hover {
  color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 14%, transparent);
}

/* Kill the 3px active rail even if compiled output.css still emits it. */
.bl-sidebar-link--active::before {
  content: none;
  display: none;
  width: 0;
}

.bl-sidebar-nav li {
  position: relative;
}

/* Children links are slightly smaller */
.bl-sidebar-group-children .bl-sidebar-link {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
}

#bl-layout {
  --bl-sidebar-width: 16rem;
  --bl-sidebar-rail: 5rem;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  min-height: 100dvh;
}

#bl-layout.sidebar-rail {
  --bl-sidebar-width: var(--bl-sidebar-rail);
}

/* Sidebar Base Styles */
#bl-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--bl-sidebar-width);
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.2s ease-in-out, width 0.2s ease-in-out;
}

/* Main Shell: fills remaining space and pushes footer to bottom */
#bl-main-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--bl-sidebar-width);
  width: calc(100% - var(--bl-sidebar-width));
  transition: margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
}

/* Main content area grows to fill space */
#bl-main-content {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Sidebar Collapsed State (Desktop)
   -------------------------------------------------------------------------- */
#bl-layout.sidebar-closed #bl-sidebar {
  transform: translateX(-101%);
}

#bl-layout.sidebar-closed #bl-main-shell {
  margin-left: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   No Sidebar Layout (front-facing pages, etc.)
   -------------------------------------------------------------------------- */
#bl-layout.sidebar-disabled {
  --bl-sidebar-width: 0;
}

#bl-layout.sidebar-disabled #bl-main-shell {
  margin-left: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Sidebar Overlay (for mobile)
   -------------------------------------------------------------------------- */
#bl-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 35;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  backdrop-filter: blur(2px);
}

#bl-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Modal — Outer-scroll approach
   Move scroll from .modal-box to the .modal wrapper so that floating
   elements (tooltips, dropdowns, searchable selects) inside the modal body
   can overflow the box freely.  Header / footer scroll with content.
   -------------------------------------------------------------------------- */

/* 1. The .modal overlay becomes the scroll container */
.modal:has(.bl-modal-box) {
  overflow-y: auto;
  overflow-x: hidden;
  align-items: safe center;          /* center when fits, start when overflows */
}

/* 2. The box itself: no overflow restriction, no max-height cap */
.bl-modal-box {
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-height: none;
  overflow: visible;
}

/* Override DaisyUI's .modal-middle .modal-box max-height */
.modal-middle .bl-modal-box {
  max-height: none;
}

/* 3. Fix backdrop click-target to cover the viewport while scrolling */
.modal:has(.bl-modal-box) > .modal-backdrop {
  position: fixed;
  inset: 0;
}

/* Full-size modals use tighter margins */
.bl-modal-box.max-w-full {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Reduced margins on mobile */
@media (max-width: 640px) {
  .bl-modal-box {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .bl-modal-box.max-w-full {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* MapView canvas: keep Leaflet panes inside this stacking context so
   drawers and modals (z-50) stay above markers and popups. */
.bl-map {
  isolation: isolate;
  z-index: 0;
  min-height: 32rem;
  height: min(70vh, 40rem);
  background-color: var(--color-base-200);
}

.bl-map .leaflet-container {
  height: 100%;
  width: 100%;
  font-family: inherit;
  background: var(--color-base-200);
}

/* MapPointWidget canvas: shorter than MapView so it fits a form. */
.bl-map.bl-map-point-canvas {
  min-height: 16rem;
  height: 16rem;
}

@media (min-width: 768px) {
  .bl-map.bl-map-point-canvas {
    min-height: 20rem;
    height: 20rem;
  }
}

/* --------------------------------------------------------------------------
   Table chrome v2 (opt-in via FilterTableView.table_chrome / CORE.TABLE_CHROME)
   -------------------------------------------------------------------------- */
.bl-table-v2-surface {
  min-width: 0;
}

.bl-table-v2 .table tbody td,
.bl-table-v2 .table tbody th,
.bl-table-v2 .table thead th {
  height: 2.75rem;
  padding-block: 0.75rem;
  vertical-align: middle;
}

.bl-table-v2 .table tbody td,
.bl-table-v2 .table tbody th {
  font-variant-numeric: tabular-nums;
}

.bl-table-v2-grid-wrap td .btn,
.bl-table-v2-cards .btn,
.bl-table-v2-cards [data-bl-popover-anchor] {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.bl-table-v2-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bl-table-v2-grid-wrap {
  overflow-x: auto;
}

@media (max-width: 767px) {
  .bl-table-v2[data-bl-card-list] .bl-table-v2-grid-wrap {
    display: none;
  }
}

@media (min-width: 768px) {
  .bl-table-v2[data-bl-card-list] .bl-table-v2-cards {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-table-v2 .table tbody tr {
    transition: none;
  }
}

/* DaisyUI .select shrinks to 3rem and ellipsizes. Direction and remove are
   one icon each; the field select grows into the leftover width and keeps
   the full closed label. The popover width lives here too, because the
   anchor pin clears an inline width when the menu closes. */
#bl-table-sort {
  overflow: visible;
  width: min(24rem, calc(100vw - 1rem));
}
#bl-table-sort select[name="sort_field"] {
  flex: 1 0 auto;
  width: auto;
  max-width: none;
  text-overflow: clip;
}
#bl-table-sort .bl-sort-dir {
  overflow: visible;
}
#bl-table-sort .bl-sort-dir[open] {
  z-index: 2;
}
#bl-table-sort .bl-sort-dir > .dropdown-content {
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
}
#bl-table-sort .bl-sort-dir > summary {
  list-style: none;
}
#bl-table-sort .bl-sort-dir > summary::marker,
#bl-table-sort .bl-sort-dir > summary::-webkit-details-marker {
  content: none;
  display: none;
}
#bl-table-sort [data-bl-sort-remove] {
  color: var(--color-error);
}

@media (prefers-reduced-motion: reduce) {
  .bl-map .leaflet-fade-anim .leaflet-popup,
  .bl-map .leaflet-zoom-animated {
    transition: none;
  }
}

/* Bell dropdown: full under-header sheet below lg; 20rem end-anchored on lg+.
   Phone insets are !important so leftover inline pin / Tailwind lg: cannot win.
   height uses viewport units so a transformed/filtered header (backdrop-blur)
   cannot collapse bottom:0 against a 3.5rem containing block. */
.bl-notification-bell-panel {
  position: fixed;
  inset-inline: 0;
  top: 3.5rem;
  bottom: 0;
}

@media (max-width: 1023px) {
  .bl-notification-bell-panel,
  [data-bl-notification-scrim] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 3.5rem !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100vh - 3.5rem) !important;
    height: calc(100dvh - 3.5rem) !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .bl-notification-bell-panel {
    /* pinMenuToTrigger: position:fixed + top/left. Same TRIGGER_GAP as user menu. */
    width: 20rem;
    height: auto;
    inset: auto;
    top: auto;
    bottom: auto;
  }
}

/* Quiet notification row. Unread uses Daisy primary as a 4px start border. */
.bl-notification-item {
  position: relative;
  border-bottom: 1px solid var(--color-base-300);
}

.bl-notification-item:last-child {
  border-bottom-width: 0;
}

.bl-notification-item:hover {
  background: color-mix(in oklch, var(--color-base-200) 50%, transparent);
}

.bl-notification-item.is-unread {
  border-inline-start: 4px solid var(--color-primary);
}

.bl-notification-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.bl-notification-item__row {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
}

.bl-notification-item__unread {
  display: none;
}

.bl-notification-item.is-unread [data-bl-notification-title] {
  font-weight: 600;
}

.bl-notification-item__text {
  flex: 1 1 auto;
  min-width: 0;
}

.bl-notification-item__body,
.bl-notification-item__meta {
  margin-top: 0.125rem;
  font-size: 0.75rem;
}

.bl-notification-item__body {
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.bl-notification-item__meta {
  margin-top: 0.25rem;
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

.bl-notification-item__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.75rem;
  padding-inline-end: 0.75rem;
}

/* Modal container managed by modal.js — simply positioned above content */
#bl-modal-container {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

#bl-modal-container .modal {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Mobile Styles (< 1024px / lg breakpoint)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #bl-layout {
    --bl-sidebar-width: 72%;
  }

  /* Hide sidebar off-screen by default on mobile */
  #bl-sidebar {
    transform: translateX(-100%);
  }

  /* Main shell takes full width on mobile (no margin) */
  #bl-main-shell {
    margin-left: 0;
    width: 100%;
  }

  /* Show sidebar when active on mobile */
  #bl-layout.sidebar-active #bl-sidebar {
    transform: translateX(0);
  }

  /* Show overlay when sidebar is active on mobile */
  #bl-layout.sidebar-active #bl-sidebar-overlay {
    display: block;
    opacity: 1;
  }

  /* Reset collapsed state for mobile (uses sidebar-active instead) */
  #bl-layout.sidebar-closed #bl-sidebar {
    transform: translateX(-100%);
  }

  #bl-layout.sidebar-closed #bl-main-shell {
    margin-left: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Utility: Full-height layout for body/html
   -------------------------------------------------------------------------- */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Scrollbar Styling (optional, consistent look)
   -------------------------------------------------------------------------- */
#bl-sidebar::-webkit-scrollbar {
  width: 0.6rem;
}

#bl-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#bl-sidebar::-webkit-scrollbar-thumb {
  background: oklch(50% 0 0 / 0.3);
  border-radius: 0.3rem;
}

#bl-sidebar::-webkit-scrollbar-thumb:hover {
  background: oklch(50% 0 0 / 0.5);
}

/* --------------------------------------------------------------------------
   Form Error States
   --------------------------------------------------------------------------
   When a fieldset wrapper contains error text, highlight the input border.
   DaisyUI v5 handles normal focus states natively; we only add error overrides.
   -------------------------------------------------------------------------- */
.bl-field-error {
  display: block;
  width: 100%;
}
.fieldset:has(> .text-error, > .bl-field-control .bl-field-error) :is(.input, .textarea, .select, .file-input) {
  border-color: var(--color-error);
}
.fieldset:has(> .text-error, > .bl-field-control .bl-field-error) :is(.input, .textarea, .select, .file-input):focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-error) 20%, transparent);
}

/* --------------------------------------------------------------------------
   Sidebar Theme Integration
   -------------------------------------------------------------------------- */
#bl-sidebar {
  background-color: var(--color-base-200);
  border-right: 1px solid var(--color-base-300);
}

/* Sidebar header area */
.sidebar-header {
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-300) 50%, transparent);
}

/* --------------------------------------------------------------------------
   Avatar Fallback (Initials)
   -------------------------------------------------------------------------- */
.avatar.placeholder > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar.placeholder > div > span {
  line-height: 1;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Card & Surface Polish
   -------------------------------------------------------------------------- */
.card {
  box-shadow:
    0 1px 3px 0 color-mix(in oklch, var(--color-base-content) 3%, transparent),
    0 1px 2px -1px color-mix(in oklch, var(--color-base-content) 3%, transparent);
}

.card-hover:hover,
[data-bl-card-interactive]:hover {
  box-shadow:
    0 4px 6px -1px color-mix(in oklch, var(--color-base-content) 5%, transparent),
    0 2px 4px -2px color-mix(in oklch, var(--color-base-content) 5%, transparent);
}

/* --------------------------------------------------------------------------
   App surface system (layout-app)
   Canvas vs elevated panels — applies to every authenticated app page.
   Clients tune contrast via --color-base-200/300 or --bl-surface-* in theme.html.
   -------------------------------------------------------------------------- */
.layout-app {
  --bl-surface-canvas: var(--color-base-200);
  --bl-surface-elevated: var(--color-base-100);
  --bl-surface-border: color-mix(in oklch, var(--color-base-300) 65%, transparent);
}

.layout-app #bl-main-content {
  background-color: var(--bl-surface-canvas);
}

/* Elevated panels: cards and list shells on the workspace canvas */
.layout-app #bl-main-content :is(.card.bg-base-100, section.card.bg-base-100) {
  background-color: var(--bl-surface-elevated);
  border: 1px solid var(--bl-surface-border);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--color-base-content) 5%, transparent),
    0 8px 24px color-mix(in oklch, var(--color-base-content) 4%, transparent);
}

/* Nested / inset cards keep a softer treatment */
.layout-app #bl-main-content .card.bg-base-100 .card.bg-base-100,
.layout-app #bl-main-content .card.bg-base-100 .card:not(.bg-base-100),
.layout-app #bl-main-content .card.bg-base-200,
.layout-app #bl-main-content .card[class*="bg-base-200/"] {
  border-color: color-mix(in oklch, var(--color-base-300) 45%, transparent);
  box-shadow: none;
}

/* Standalone elevated panels (non-card) on the canvas */
.layout-app #bl-main-content :is(.rounded-box, .rounded-lg).bg-base-100.border {
  background-color: var(--bl-surface-elevated);
  border-color: var(--bl-surface-border);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--color-base-content) 4%, transparent),
    0 6px 18px color-mix(in oklch, var(--color-base-content) 3%, transparent);
}

/* --------------------------------------------------------------------------
   Profile layout (account settings, profile, sessions, etc.)
   Nav sits on the workspace canvas; content panels use the global card rules.
   -------------------------------------------------------------------------- */
.layout-app .bl-profile-layout {
  align-items: flex-start;
}

.layout-app .bl-profile-nav.menu :where(li > *:not(ul):not(.menu-title)) {
  border-radius: var(--radius-field, 0.75rem);
  font-weight: 500;
}

.layout-app .bl-profile-nav.menu :where(li > *:not(ul):not(.menu-title):not(.active):hover) {
  background-color: color-mix(in oklch, var(--color-base-content) 5%, transparent);
}

/* --------------------------------------------------------------------------
   Table Polish
   -------------------------------------------------------------------------- */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

.table tbody tr:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 2%, transparent);
}

/* --------------------------------------------------------------------------
   Badge Polish
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Alert Polish
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-box, 0.5rem);
}

/* --------------------------------------------------------------------------
   Theme Toggle Styling
   -------------------------------------------------------------------------- */

/* Theme toggle icon visibility (sun / moon / monitor). Icon is the next mode.
   data-theme lives on <html> (theme.js / theme_bootstrap). Compound
   html[data-theme] selectors — a descendant `html [data-theme]` never matches.
   data-bl-theme-scheme is light|dark from TAILWIND_LIGHT_THEME / TAILWIND_DARK_THEME
   so custom Daisy names still show sun/moon. */
.bl-theme-toggle .bl-theme-icon-light,
.bl-theme-toggle .bl-theme-icon-dark,
.bl-theme-toggle .bl-theme-icon-system {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.bl-theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  max-width: none;
  flex-shrink: 0;
}

/* Binary (anon or flag off): next is the opposite of the applied theme.
   Fallback moon so the square is never empty before scheme/data-theme land. */
html:not([data-bl-theme-preference]) .bl-theme-toggle .bl-theme-icon-dark {
  display: inline-flex;
}

html:not([data-bl-theme-preference])[data-theme="light"] .bl-theme-toggle .bl-theme-icon-dark,
html:not([data-bl-theme-preference])[data-bl-theme-scheme="light"] .bl-theme-toggle .bl-theme-icon-dark {
  display: inline-flex;
}

html:not([data-bl-theme-preference])[data-theme="dark"] .bl-theme-toggle .bl-theme-icon-light,
html:not([data-bl-theme-preference])[data-bl-theme-scheme="dark"] .bl-theme-toggle .bl-theme-icon-light {
  display: inline-flex;
}

html:not([data-bl-theme-preference])[data-theme="dark"] .bl-theme-toggle .bl-theme-icon-dark,
html:not([data-bl-theme-preference])[data-bl-theme-scheme="dark"] .bl-theme-toggle .bl-theme-icon-dark {
  display: none;
}

/* Three-way cycle (logged-in + TAILWIND_SYSTEM_THEME_ENABLED): light → dark → system */
html[data-bl-theme-preference="light"] .bl-theme-toggle .bl-theme-icon-dark {
  display: inline-flex;
}

html[data-bl-theme-preference="dark"] .bl-theme-toggle .bl-theme-icon-system {
  display: inline-flex;
}

html[data-bl-theme-preference="system"] .bl-theme-toggle .bl-theme-icon-light {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Brand marks (login, sidebar). Light/dark imgs share sun/moon class names
   but match the current theme (not the inverted toggle).
   -------------------------------------------------------------------------- */
.bl-brand-mark {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.bl-brand-mark img {
  height: 2rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
}

.bl-brand-mark .bl-theme-icon-light {
  display: inline;
}

.bl-brand-mark .bl-theme-icon-dark {
  display: none;
}

[data-theme="dark"] .bl-brand-mark .bl-theme-icon-light {
  display: none;
}

[data-theme="dark"] .bl-brand-mark .bl-theme-icon-dark {
  display: inline;
}

.sidebar-header .bl-brand-mark--short {
  display: none;
}

.bl-brand-mark-text--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  max-width: 2.25rem;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Dropdown Menu Polish
   -------------------------------------------------------------------------- */
.dropdown-content.menu li > a,
.dropdown-content.menu li > button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out;
}

.dropdown-content.menu li > a:hover,
.dropdown-content.menu li > button:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
}

/* Logout form inside dropdown: prevent wrapping and layout break */
.dropdown-content.menu form {
  margin: 0;
  padding: 0;
}

.dropdown-content.menu form > button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Advanced Form Widget Styles
   --------------------------------------------------------------------------
   Dedicated CSS for custom Blinkstrap form widgets:
   - Checkbox list / filter (multiple_input based)
   - Dropdown checkbox multi-select
   - Quill rich text editor
   - Searchable select / multi-select
   -------------------------------------------------------------------------- */

/* -- Checkbox List & Filter Widgets ---------------------------------------- */

/* CheckboxSelectMultipleList — responsive grid layout */
.bl-checkbox-list {
  display: grid;
  grid-template-columns: repeat(var(--bl-cols, 2), minmax(0, 1fr));
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
}

@media (max-width: 640px) {
  .bl-checkbox-list {
    grid-template-columns: 1fr;
  }
}

.bl-cl-group-label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 0.5rem;
}

.bl-cl-item {
  transition: color 0.1s ease-in-out;
}

.bl-cl-item:hover {
  color: var(--color-primary);
}

.bl-cl-item .checkbox {
  border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.bl-cl-item .checkbox:checked {
  border-color: var(--color-primary);
}

/* CheckboxSelectMultipleFilter — scrollable panel with toolbar */
.bl-checkbox-filter {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
  border-radius: var(--radius-box, 0.5rem);
  background-color: var(--color-base-100);
  overflow: hidden;
}

.bl-cf-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
  background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}

.bl-cf-list {
  max-height: 25rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

.bl-cf-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 0.5rem 0 0.25rem;
  position: sticky;
  top: 0;
  background-color: var(--color-base-100);
}

.bl-cf-item {
  padding: 0.25rem 0;
  border-radius: 0.25rem;
  transition: color 0.1s ease-in-out;
}

.bl-cf-item:hover {
  color: var(--color-primary);
}

.bl-cf-item .checkbox {
  border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.bl-cf-item .checkbox:checked {
  border-color: var(--color-primary);
}

/* Legacy flex-wrap checkbox group styling (multiple_input.html) */
.fieldset .flex.flex-wrap.gap-x-6.gap-y-2 {
  padding: 0.5rem 0;
}

.fieldset .flex.flex-wrap.gap-x-6.gap-y-2 label {
  transition: color 0.1s ease-in-out;
}

.fieldset .flex.flex-wrap.gap-x-6.gap-y-2 label:hover {
  color: var(--color-primary);
}

.fieldset .flex.flex-wrap.gap-x-6.gap-y-2 .checkbox {
  border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.fieldset .flex.flex-wrap.gap-x-6.gap-y-2 .checkbox:checked {
  border-color: var(--color-primary);
}

/* -- Dropdown Checkbox Multi-Select ---------------------------------------- */
.dropdown[x-data] .btn-outline {
  border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

.dropdown[x-data] .btn-outline:hover {
  border-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
  background-color: transparent;
  color: var(--color-base-content);
}

.dropdown[x-data] .rounded-box {
  border-color: var(--color-base-300);
}

.dropdown[x-data] label.hover\:bg-base-200:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.dropdown[x-data] .checkbox-sm {
  border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.dropdown[x-data] .checkbox-sm:checked {
  border-color: var(--color-primary);
}

/* -- Quill Rich-Text Editor ------------------------------------------------ */
.blink-quill {
  position: relative;
}

.blink-quill textarea {
  display: none;
}

/* Override Quill's default height:100% which causes overflow */
.blink-quill .ql-container {
  height: auto;
}

.blink-quill .blink-quill-editor {
  min-height: 10rem;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
  border-radius: var(--radius-field, 0.25rem);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-base-content);
  background-color: var(--color-base-100);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  overflow: hidden;
}

.blink-quill .blink-quill-editor:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 20%, transparent);
  outline: none;
}

.blink-quill .blink-quill-editor [contenteditable] {
  outline: none;
}

/* Quill places the toolbar as a sibling before .blink-quill-editor, not inside it */
.blink-quill > .ql-toolbar {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
  padding: 0.5rem;
  border-radius: var(--radius-field, 0.25rem) var(--radius-field, 0.25rem) 0 0;
  background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent);
}

/* When toolbar is present above, remove top border + radius from editor */
.blink-quill > .ql-toolbar + .blink-quill-editor {
  border-top: none;
  border-radius: 0 0 var(--radius-field, 0.25rem) var(--radius-field, 0.25rem);
}

.blink-quill > .ql-toolbar button {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.blink-quill > .ql-toolbar button:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
  color: var(--color-base-content);
}

.blink-quill > .ql-toolbar button.ql-active {
  color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
}

/* Quill content styles */
.blink-quill .ql-editor {
  padding: 0;
  min-height: 6rem;
}

.blink-quill .ql-editor p {
  margin-bottom: 0.5rem;
}

.blink-quill .ql-editor h1,
.blink-quill .ql-editor h2,
.blink-quill .ql-editor h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-base-content);
}

.blink-quill .ql-editor ul,
.blink-quill .ql-editor ol {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.blink-quill .ql-editor blockquote {
  border-left: 3px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
  padding-left: 1rem;
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
  font-style: italic;
}

.blink-quill .ql-editor a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* -- Searchable Select Widget ---------------------------------------------- */
/* Grid/flex parents default min-width: auto = trigger min-content. Clip the
   column instead of growing a Daisy modal or form.grid. */
label:has(.searchable-select-widget),
.form-control:has(.searchable-select-widget),
.fieldset:has(.searchable-select-widget) {
  min-width: 0;
  max-width: 100%;
}

.searchable-select-widget {
  position: relative;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.searchable-select-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
  border-radius: var(--radius-field, 0.25rem);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.searchable-select-trigger:hover {
  border-color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

.searchable-select-trigger:focus,
.searchable-select-trigger:focus-within,
.searchable-select-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 20%, transparent);
  outline: none;
}

.searchable-select-display {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select-widget:not([data-multiple="true"]) .searchable-select-display > * {
  min-width: 0;
  max-width: 100%;
}

/* Placeholder state */
.searchable-select-widget:not(.has-value) .searchable-select-display {
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

/* Dropdown panel */
.searchable-select-dropdown {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 0.25rem;
  min-width: 0;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-base-content) 10%, transparent);
  overflow: hidden;
}

/* Search input inside dropdown */
.searchable-select-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--color-base-300);
  background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent);
  color: var(--color-base-content);
  font-size: 0.875rem;
  outline: none;
}

.searchable-select-search-input:focus {
  background-color: var(--color-base-100);
}

.searchable-select-search-input::placeholder {
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

/* Options container */
.searchable-select-options {
  max-height: 15rem;
  min-width: 0;
  overflow-y: auto;
  padding: 0.25rem;
}

/* Individual option */
.searchable-select-options .searchable-select-group {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  cursor: default;
  user-select: none;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.searchable-select-options [data-value] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 0.1s ease-in-out;
}

.searchable-select-option-label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.searchable-select-options [data-value]:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.searchable-select-options [data-value].selected {
  background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-weight: 500;
}

.searchable-select-options [data-value].is-active {
  background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
}

.searchable-select-options [data-value].selected.is-active {
  background-color: color-mix(in oklch, var(--color-primary) 16%, transparent);
}

/* Multi-select: chips + type-in-field search */
.searchable-select-widget[data-multiple="true"] .searchable-select-trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.5rem;
  cursor: text;
}

.searchable-select-widget[data-multiple="true"] .searchable-select-display {
  display: flex;
  flex: 1 1 8rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.searchable-select-widget[data-multiple="true"] .searchable-select-search-input {
  flex: 1 1 8rem;
  min-width: 8rem;
  width: auto;
  padding: 0.25rem 0.125rem;
  border: none;
  border-bottom: none;
  background-color: transparent;
}

.searchable-select-widget[data-multiple="true"] .searchable-select-search-input:focus {
  background-color: transparent;
}

.searchable-select-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.searchable-select-tag .remove-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.875rem;
  line-height: 1;
}

.searchable-select-tag .remove-tag:hover {
  opacity: 1;
}

/* Empty / loading states */
.searchable-select-options .no-results,
.searchable-select-options .loading-indicator {
  padding: 0.75rem;
  text-align: center;
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
  font-size: 0.875rem;
}

/* -- Form Error States for Custom Widgets ---------------------------------- */
.fieldset:has(> .text-error) .searchable-select-trigger {
  border-color: var(--color-error);
}

.fieldset:has(> .text-error) .searchable-select-trigger:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-error) 20%, transparent);
}

.fieldset:has(> .text-error) .blink-quill .blink-quill-editor {
  border-color: var(--color-error);
}

.fieldset:has(> .text-error) .blink-quill > .ql-toolbar {
  border-color: var(--color-error);
  border-bottom-color: color-mix(in oklch, var(--color-error) 30%, transparent);
}

.fieldset:has(> .text-error) .blink-quill .blink-quill-editor:focus-within {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-error) 20%, transparent);
}

.fieldset:has(> .text-error) .dropdown[x-data] .btn-outline {
  border-color: var(--color-error);
}

.fieldset:has(> .text-error) .bl-checkbox-filter {
  border-color: var(--color-error);
}

.fieldset:has(> .text-error) .bl-checkbox-list .checkbox {
  border-color: color-mix(in oklch, var(--color-error) 60%, transparent);
}

/* --------------------------------------------------------------------------
   Phone prefix widget (DaisyUI join + searchable calling-code)
   -------------------------------------------------------------------------- */
.phone-prefix-widget {
  overflow: visible;
}

.phone-prefix-code {
  position: relative;
}

.phone-prefix-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin-top: 0.25rem;
}

.phone-prefix-options {
  max-height: 15rem;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.phone-prefix-options [data-value] {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: var(--radius-field, 0.25rem);
  font-size: 0.875rem;
}

.phone-prefix-options [data-value]:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.phone-prefix-options [data-value].selected {
  background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-weight: 500;
}

.phone-prefix-empty {
  padding: 0.75rem;
  text-align: center;
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
  font-size: 0.875rem;
}

.fieldset:has(> .text-error) .phone-prefix-code {
  outline: 1px solid var(--color-error);
}

/* --------------------------------------------------------------------------
   Inline avatar cropper (circle ghost)
   -------------------------------------------------------------------------- */
.bl-avatar-cropper {
  position: relative;
  width: 16rem;
  height: 16rem;
  background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
  overflow: hidden;
}

.bl-avatar-cropper img {
  display: block;
  max-width: 100%;
}

.bl-avatar-cropper:not(.is-cropping) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bl-avatar-cropper-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 2.25rem;
  background: var(--color-neutral);
  color: var(--color-neutral-content);
}

.bl-avatar-cropper .cropper-view-box,
.bl-avatar-cropper .cropper-face {
  border-radius: 50%;
}

.bl-avatar-cropper .cropper-view-box {
  outline: 0;
  box-shadow: 0 0 0 1px var(--color-primary);
}

.bl-avatar-cropper .cropper-line,
.bl-avatar-cropper .cropper-point {
  display: none;
}

/* --------------------------------------------------------------------------
   Flatpickr DaisyUI Theme Override
   -------------------------------------------------------------------------- */
.flatpickr-calendar {
  background: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid color-mix(in oklch, var(--color-base-content) 15%, transparent);
  border-radius: var(--radius-box, 0.5rem);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
}

.flatpickr-day:hover {
  background: var(--color-base-200);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--color-base-200);
  color: var(--color-base-content);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--color-base-content);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--color-base-content);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--color-base-200);
}

/* altInput styling — inherits .input from Blinkstrap */
.flatpickr-input.flatpickr-mobile,
input.flatpickr-input[readonly] {
  cursor: pointer;
}

/* Error state for flatpickr inputs */
.fieldset:has(> .text-error) input.flatpickr-input {
  border-color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Print Styles (Basic)
   -------------------------------------------------------------------------- */
@media print {
  #bl-sidebar,
  #bl-sidebar-overlay,
  .no-print {
    display: none !important;
  }

  #bl-main-shell {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* First-paint hide rules. Duplicated inline in theme_bootstrap.html so Alpine
   overlays and the drawer stay hidden before this stylesheet loads. */
[x-cloak] { display: none !important; }

/* Drawer slide-over panel.
   Tailwind v4 utilities set the `translate` property. `transform: translateX(0)`
   does not override that, so the panel would stay off-canvas.
   Closed `translate: 100%` is also inlined in theme_bootstrap.html so first
   paint does not wait for this stylesheet. */
#bl-drawer-aside {
  translate: 100%;
  transition: translate 300ms ease-out, transform 300ms ease-out;
}

#bl-drawer-aside[data-bl-drawer-side="left"] {
  translate: -100%;
}

#bl-drawer-panel.bl-drawer-open {
  pointer-events: auto;
}

#bl-drawer-panel.bl-drawer-open .bl-drawer-backdrop {
  display: block;
  opacity: 1;
}

#bl-drawer-panel.bl-drawer-open #bl-drawer-aside {
  transform: none;
  translate: 0;
}

#bl-drawer-panel.bl-drawer-offside #bl-drawer-aside {
  left: var(--bl-drawer-offset, 0px);
  right: auto;
}

#bl-drawer-stack {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.bl-drawer-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-base-100);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.bl-drawer-frame.is-current {
  position: relative;
  height: 100%;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.bl-drawer-frame.is-stacked {
  transform: translateX(-30%);
  opacity: 0;
  z-index: 1;
}

@media (min-width: 1024px) {
  #bl-drawer-panel.bl-drawer-offside.bl-drawer-open {
    pointer-events: none;
  }

  #bl-drawer-panel.bl-drawer-offside.bl-drawer-open #bl-drawer-aside {
    pointer-events: auto;
  }

  #bl-drawer-panel.bl-drawer-offside.bl-drawer-open .bl-drawer-backdrop {
    display: none;
    opacity: 0;
    pointer-events: none;
  }

  #bl-layout.bl-drawer-pushing #bl-main-shell {
    margin-left: calc(var(--bl-sidebar-width) + var(--bl-drawer-push-width, 0px));
    width: calc(100% - var(--bl-sidebar-width) - var(--bl-drawer-push-width, 0px));
  }

  #bl-layout.bl-drawer-pushing.sidebar-closed #bl-main-shell,
  #bl-layout.bl-drawer-pushing.sidebar-disabled #bl-main-shell {
    margin-left: var(--bl-drawer-push-width, 0px);
    width: calc(100% - var(--bl-drawer-push-width, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #bl-drawer-aside,
  .bl-drawer-frame {
    transition: none;
  }
}

/* Kill sidebar/main transitions on first paint. Duplicated inline in
   theme_bootstrap.html; the class is removed after the first paint. */
html.bl-booting #bl-sidebar,
html.bl-booting #bl-main-shell,
html.bl-booting .bl-sidebar-panel-layer {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Sidebar v2: panel stack (Interfere-style slide)
   -------------------------------------------------------------------------- */
.bl-sidebar-panel-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bl-sidebar-panel-layer {
  width: 100%;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.bl-sidebar-panel-layer.is-current {
  position: relative;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.bl-sidebar-panel-layer:not(.is-current) {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
}

.bl-sidebar-panel-layer.is-stacked {
  transform: translateX(-30%);
  opacity: 0;
}

.bl-sidebar-panel-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.bl-sidebar-panel-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  border-radius: 0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.bl-sidebar-panel-back:hover {
  color: var(--color-base-content);
  background-color: color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.bl-sidebar-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-base-content);
}

.bl-sidebar-panel-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  #bl-sidebar,
  #bl-main-shell,
  .bl-sidebar-panel-layer {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sidebar v2: icon rail
   -------------------------------------------------------------------------- */

#bl-layout.sidebar-v2 .bl-sidebar-cycle {
  display: none;
}

#bl-layout.sidebar-v2 .bl-sidebar-cycle-icon--expand {
  display: none;
}

@media (min-width: 1024px) {
  #bl-layout.sidebar-v2 .bl-sidebar-cycle {
    display: inline-flex;
  }
}

#bl-layout.sidebar-rail .bl-sidebar-cycle-icon--collapse {
  display: none;
}

#bl-layout.sidebar-rail .bl-sidebar-cycle-icon--expand {
  display: inline-flex;
}

#bl-layout.sidebar-rail .sidebar-header {
  justify-content: space-between;
  padding-inline: 0.25rem;
}

#bl-layout.sidebar-rail .bl-sidebar-cycle {
  min-height: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  width: 2.25rem;
}

#bl-layout.sidebar-rail .sidebar-header a {
  width: 2.25rem;
  overflow: hidden;
}

#bl-layout.sidebar-rail .sidebar-header .bl-brand-mark--short {
  display: inline-flex;
}

#bl-layout.sidebar-rail .sidebar-header .bl-brand-mark--long {
  display: none;
}

#bl-layout.sidebar-rail .sidebar-header .bl-brand-mark--short img {
  height: 1.75rem;
  max-width: 2.25rem;
}

#bl-layout.sidebar-rail .bl-sidebar-link,
#bl-layout.sidebar-rail .bl-sidebar-group-summary,
#bl-layout.sidebar-rail .bl-sidebar-panel-trigger,
#bl-layout.sidebar-rail .bl-sidebar-panel-back {
  justify-content: center;
  padding-inline: 0.5rem;
}

#bl-layout.sidebar-rail .bl-sidebar-link > span:not(.badge),
#bl-layout.sidebar-rail .bl-sidebar-group-summary > span > span,
#bl-layout.sidebar-rail .bl-sidebar-panel-caret,
#bl-layout.sidebar-rail .bl-sidebar-panel-back > span,
#bl-layout.sidebar-rail .bl-sidebar-panel-title,
#bl-layout.sidebar-rail .bl-sidebar-group-summary::after,
#bl-layout.sidebar-rail .bl-sidebar-nav li.pointer-events-none,
#bl-layout.sidebar-rail .bl-sidebar-nav li.my-3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#bl-layout.sidebar-rail .bl-sidebar-link,
#bl-layout.sidebar-rail .bl-sidebar-group-summary,
#bl-layout.sidebar-rail .bl-sidebar-panel-trigger {
  position: relative;
}

#bl-layout.sidebar-rail .bl-sidebar-link .badge,
#bl-layout.sidebar-rail .bl-sidebar-group-summary .badge,
#bl-layout.sidebar-rail .bl-sidebar-panel-trigger .badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.2rem;
  font-size: 0.625rem;
}

#bl-layout.sidebar-rail .sidebar-footer .flex-1,
#bl-layout.sidebar-rail .sidebar-footer .dropdown {
  display: none;
}

/* Never expand accordion children inside the 80px rail. JS portals them. */
@media (min-width: 1024px) {
  #bl-layout.sidebar-rail .bl-sidebar-group > details > .bl-sidebar-group-children {
    display: none !important;
  }
}

/* Portaled container flyout — body host, not a slide inside rail width. */
.bl-sidebar-rail-flyout {
  position: fixed;
  z-index: 45;
  min-width: 14rem;
  max-width: 18rem;
  max-height: calc(100vh - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-base-content) 16%, transparent);
  transform: none;
}

.bl-sidebar-rail-flyout[hidden] {
  display: none !important;
}

/* Hover bridge covering the gap between rail icon and flyout. */
.bl-sidebar-rail-flyout::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 8px;
}

.bl-sidebar-rail-flyout > .bl-sidebar-group-children {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.bl-sidebar-rail-flyout .bl-sidebar-link,
.bl-sidebar-rail-flyout .bl-sidebar-group-summary {
  justify-content: flex-start;
  padding-inline: 0.75rem;
}

.bl-sidebar-rail-flyout .bl-sidebar-link > span:not(.badge),
.bl-sidebar-rail-flyout .bl-sidebar-group-summary > span > span,
.bl-sidebar-rail-flyout .bl-sidebar-group-summary::after {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.bl-sidebar-rail-flyout .bl-sidebar-group .bl-sidebar-group-children {
  padding-left: 0.75rem;
  margin-left: 0.5rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-left: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

@media (max-width: 1023px) {
  #bl-layout.sidebar-rail {
    --bl-sidebar-width: 72%;
  }

  #bl-layout.sidebar-rail .bl-sidebar-link > span:not(.badge),
  #bl-layout.sidebar-rail .bl-sidebar-group-summary > span > span,
  #bl-layout.sidebar-rail .bl-sidebar-panel-caret,
  #bl-layout.sidebar-rail .bl-sidebar-panel-back > span,
  #bl-layout.sidebar-rail .bl-sidebar-panel-title,
  #bl-layout.sidebar-rail .bl-sidebar-nav li.pointer-events-none,
  #bl-layout.sidebar-rail .bl-sidebar-nav li.my-3 {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  #bl-layout.sidebar-rail .bl-sidebar-group > details > .bl-sidebar-group-children {
    display: block;
  }

  .bl-sidebar-rail-flyout {
    display: none !important;
  }
}

/* Number stepper: hide native spinners; buttons are the control */
.bl-number-stepper input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.bl-number-stepper input[type="number"]::-webkit-outer-spin-button,
.bl-number-stepper input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* Money input: hide native spinners; symbol join is the chrome */
.bl-money-input input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.bl-money-input input[type="number"]::-webkit-outer-spin-button,
.bl-money-input input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* StarRatingInput: 44px star hit target (Daisy rating-lg is 28px) */
.bl-star-rating.rating :where(input:not(.rating-hidden)) {
  width: 2.75rem;
  height: 2.75rem;
}

/* Date range picker: Daisy tokens, Monday-first grids painted by JS */
.bl-date-range-picker__panel {
  min-width: min(100vw - 1rem, 20rem);
}

@media (min-width: 1024px) {
  .bl-date-range-picker__panel {
    min-width: 44rem;
  }
}

.bl-date-range-picker [data-bl-other-month="true"] {
  opacity: 0.4;
}

.bl-date-range-picker [data-bl-in-range="true"] {
  background-color: color-mix(in oklch, var(--color-primary) 18%, transparent);
  color: var(--color-base-content);
}

.bl-date-range-picker [data-bl-today="true"] {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.bl-date-range-picker [data-bl-date-preset][aria-selected="true"] {
  background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

/* KPI tile: skeleton then fade. Under 300ms. */
.bl-kpi-tile__body {
  opacity: 0;
}

.bl-kpi-tile__body.bl-kpi-tile--ready {
  opacity: 1;
  transition: opacity 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bl-kpi-tile__body.bl-kpi-tile--ready {
    transition: none;
  }
}

/* Hierarchy: drill-in hides the current and ancestor rows; children sit flush. */
.bl-hierarchy[data-bl-hierarchy-drilled] [data-bl-hierarchy-node][data-bl-hierarchy-current] > [data-bl-hierarchy-row],
.bl-hierarchy[data-bl-hierarchy-drilled] [data-bl-hierarchy-node][data-bl-hierarchy-ancestor] > [data-bl-hierarchy-row] {
  display: none;
}

.bl-hierarchy[data-bl-hierarchy-drilled] [data-bl-hierarchy-node][data-bl-hierarchy-current] > [data-bl-hierarchy-children],
.bl-hierarchy[data-bl-hierarchy-drilled] [data-bl-hierarchy-node][data-bl-hierarchy-ancestor] > [data-bl-hierarchy-children] {
  padding-inline-start: 0;
  margin-inline-start: 0;
}

.bl-hierarchy [data-bl-hierarchy-node][aria-selected="true"] > [data-bl-hierarchy-row] {
  background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
}

/* Product tours: spotlight hole + card. Not Shepherd. */
.bl-tour {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.bl-tour.is-open {
  pointer-events: none;
}

.bl-tour__spot {
  position: absolute;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.5);
  border-radius: 0.5rem;
  outline: 2px solid var(--color-primary);
  pointer-events: none;
  transition: top 180ms ease-out, left 180ms ease-out, width 180ms ease-out, height 180ms ease-out;
}

.bl-tour__card {
  position: fixed;
  z-index: 81;
  pointer-events: auto;
  width: min(20rem, calc(100vw - 1.5rem));
}

.bl-tour-target {
  position: relative;
  z-index: 82;
}

@media (prefers-reduced-motion: reduce) {
  .bl-tour__spot {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Overflow-safe tooltips (body layer)
   --------------------------------------------------------------------------
   DaisyUI .tooltip[data-tip] paints ::before/::after inside the trigger.
   Tables, kanban, cards, and dropdowns clip those pseudos. core.tooltips
   copies data-tip onto #bl-tooltip-layer on document.body. Hide the Daisy
   ghosts so kitchen-sink / Sensor tips render via the layer, not the pseudo.
   -------------------------------------------------------------------------- */
.tooltip:before,
.tooltip:after {
  content: none !important;
}

#bl-tooltip-layer,
[data-bl-tooltip-layer] {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  box-sizing: border-box;
  width: max-content;
  height: max-content;
  min-height: 0;
  max-width: 20rem;
  margin: 0;
  border: 0;
  inset: auto;
  overflow: visible;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-box);
  background-color: var(--color-neutral);
  color: var(--color-neutral-content);
  font-size: 0.875rem;
  line-height: 1.25;
  white-space: pre-line;
  overflow-wrap: anywhere;
  align-self: start;
  justify-self: start;
}

#bl-tooltip-layer:not([data-open="true"]),
[data-bl-tooltip-layer]:not([data-open="true"]) {
  display: none;
}

@supports (anchor-name: --bl-test) {
  /* Pin the opposite edge so Chromium sizes to content instead of
     stretching through the gap to the trigger. 8px gap. */
  #bl-tooltip-layer[data-placement="top"],
  [data-bl-tooltip-layer][data-placement="top"],
  #bl-tooltip-layer:not([data-placement]),
  [data-bl-tooltip-layer]:not([data-placement]) {
    inset: auto;
    left: anchor(center);
    top: auto;
    bottom: calc(anchor(top) + 8px);
    translate: -50% 0;
  }

  #bl-tooltip-layer[data-placement="bottom"],
  [data-bl-tooltip-layer][data-placement="bottom"] {
    inset: auto;
    left: anchor(center);
    top: calc(anchor(bottom) + 8px);
    bottom: auto;
    translate: -50% 0;
  }

  #bl-tooltip-layer[data-placement="left"],
  [data-bl-tooltip-layer][data-placement="left"] {
    inset: auto;
    top: anchor(center);
    right: calc(anchor(left) + 8px);
    left: auto;
    translate: 0 -50%;
  }

  #bl-tooltip-layer[data-placement="right"],
  [data-bl-tooltip-layer][data-placement="right"] {
    inset: auto;
    top: anchor(center);
    left: calc(anchor(right) + 8px);
    right: auto;
    translate: 0 -50%;
  }
}