/* ==========================================================================
   raft.css — DaisyUI → Raft Management design-system override shim

   HOW THIS WORKS
   - Load this AFTER DaisyUI / Tailwind so its rules win.
   - It rewrites the common DaisyUI component classes using Raft tokens from
     colors_and_type.css. Your HTML / HTMX templates don't have to change —
     the same classes now look like Raft.
   - Gate inclusion behind a feature flag (see RAFT-INTEGRATION.md).

   SCOPE
   - Targets the DaisyUI components used by most HTMX apps: button, card,
     input/select/textarea, checkbox/radio/toggle, badge, alert, modal,
     table, tabs, menu/drawer, navbar, tooltip, progress, dropdown.
   - Does NOT override utility classes (margin/padding/flex/grid). Keep
     using Tailwind utilities as normal.
   ========================================================================== */

@import url('./colors_and_type.css');

/* ---- DaisyUI semantic-token overrides --------------------------------- */
/* DaisyUI's utility classes (text-error, bg-warning, border-success …)   */
/* read from --color-error / --color-warning / etc. Re-point those at the */
/* Raft palette so utilities pick up the Raft brand without per-class     */
/* shims. The component classes below already use the Raft tokens.        */
:root {
  --color-error:           var(--danger-500);
  --color-error-content:   var(--danger-fg);
  --color-warning:         var(--warn-500);
  --color-warning-content: var(--warn-fg);
  --color-success:         var(--success-500);
  --color-success-content: var(--ok-fg);
  --color-info:            var(--info-500);
  --color-info-content:    var(--info-fg);
  --color-primary:         var(--brand);
  --color-primary-content: var(--brand-fg);
  --color-neutral:         var(--fg-1);
  --color-neutral-content: var(--surface-0);
}
[data-theme="dark"] {
  --color-error:           var(--danger-400);
  --color-error-content:   var(--danger-fg);
  --color-warning:         var(--warn-400);
  --color-warning-content: var(--warn-fg);
  --color-success:         var(--success-400);
  --color-success-content: var(--ok-fg);
  --color-info:            var(--info-400);
  --color-info-content:    var(--info-fg);
  --color-primary:         var(--brand);
  --color-primary-content: var(--brand-fg);
  --color-neutral:         var(--fg-1);
  --color-neutral-content: var(--surface-0);
}

/* ---- Base body + typography ------------------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--text-4xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); }
h2 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); }
h3 { font-size: var(--text-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-snug);  color: var(--fg-1); }
h4 { font-size: var(--text-md);  font-weight: var(--fw-semibold); line-height: var(--lh-snug);  color: var(--fg-1); }
p  { color: var(--fg-2); line-height: var(--lh-normal); text-wrap: pretty; }

code, kbd, pre, .font-mono { font-family: var(--font-mono); }

/* Link styling uses :where() to keep specificity at 0 so any class on the */
/* <a> (.btn-primary, .badge-error, .menu a, .tabs a, etc.) wins.          */
:where(a) { color: var(--amber-700); text-underline-offset: 2px; }
:where(a):hover { color: var(--ember-600); }
[data-theme="dark"] :where(a)       { color: var(--amber-300); }
[data-theme="dark"] :where(a):hover { color: var(--amber-200); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  height: auto;
  min-height: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-inset); }

.btn-primary {
  background: var(--brand);
  color: var(--brand-fg);
  border-color: transparent;
  box-shadow: 0 1px 0 rgb(180 83 9 / 0.25), var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-press); }

.btn-secondary {
  background: var(--espresso-800);
  color: var(--cream-50);
  border-color: transparent;
}
.btn-secondary:hover { background: var(--espresso-700); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-1);
}
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }

.btn-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--amber-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-success { background: #5C7A3A; color: var(--cream-50); border-color: transparent; }
.btn-success:hover { background: #4A6430; }
.btn-warning { background: var(--warn-500); color: var(--cream-50); border-color: transparent; }
.btn-error,
.btn-danger  { background: var(--danger-500); color: var(--cream-50); border-color: transparent; }
.btn-info    { background: var(--info-500); color: var(--cream-50); border-color: transparent; }

.btn-sm { padding: 6px 10px; font-size: var(--text-xs); }
.btn-lg { padding: 14px 22px; font-size: var(--text-md); }
.btn-xs { padding: 4px 8px; font-size: 10px; }
.btn[disabled], .btn-disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--surface-1);
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card .card-body { padding: var(--space-6); }
.card .card-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }

.card.card-bordered { border-color: var(--border-strong); }
.card.card-compact .card-body { padding: var(--space-4); }

/* ---- Inputs / selects / textareas ------------------------------------- */
.input, .select, .textarea, .file-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  height: auto;
  min-height: 0;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus, .file-input:focus {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px rgb(255 176 31 / 0.25), var(--shadow-inset);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input-bordered { border-color: var(--border-strong); }
.input-ghost { background: transparent; border-color: transparent; box-shadow: none; }

.input-sm, .select-sm, .textarea-sm { padding: 6px 10px; font-size: var(--text-sm); }
.input-lg, .select-lg, .textarea-lg { padding: 14px 14px; font-size: var(--text-md); }

.label { font-size: var(--text-sm); color: var(--fg-2); padding: 0 0 var(--space-1); }
.label-text { color: var(--fg-1); font-weight: var(--fw-medium); }
/* a11y: doubled class to out-specify daisyUI's own `.label-text-alt`, which is
   60% base-content opacity (#b7ada3 light / #5c4f40 dark = ~2.2:1, fails AA).
   --fg-3 is the AA-passing tertiary token in both themes (6.4:1 light, 4.7:1
   dark) and keeps the hint visually quieter than the (fg-2) field labels. */
.label-text-alt.label-text-alt { color: var(--fg-3); font-size: var(--text-xs); }

/* Validation states */
.input-success, .select-success, .textarea-success { border-color: var(--success-500); }
.input-warning, .select-warning, .textarea-warning { border-color: var(--warn-500); }
.input-error,   .select-error,   .textarea-error   { border-color: var(--danger-500); }

/* ---- Checkbox / Radio / Toggle ---------------------------------------- */
.checkbox, .radio {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  accent-color: var(--amber-400);
}
.radio { border-radius: var(--radius-full); }
.checkbox:checked, .radio:checked {
  background: var(--amber-400);
  border-color: var(--amber-600);
}

.toggle {
  width: 36px; height: 20px;
  background: var(--espresso-200);
  border: none;
  border-radius: var(--radius-full);
  accent-color: var(--amber-400);
}
.toggle:checked { background: var(--amber-400); }

/* ---- Badges ----------------------------------------------------------- */
.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--fg-2);
  height: auto;
  line-height: 1.4;
}
.badge-primary,
.badge-brand   { background: var(--amber-100); color: var(--amber-800); border-color: var(--amber-300); }
.badge-success { background: var(--ok-bg);     color: var(--ok-fg); }
.badge-warning { background: var(--warn-bg);   color: var(--warn-fg); }
.badge-error,
.badge-danger  { background: var(--danger-bg); color: var(--danger-fg); }
.badge-info    { background: var(--info-bg);   color: var(--info-fg); }
.badge-outline { background: transparent; border-color: var(--border-strong); color: var(--fg-2); }
/* a11y: on the dark chrome the soft error badge's --danger-fg (danger-400) is
   only ~3.5–4.25:1 on the translucent danger tint — red is the lowest-luminance
   semantic, so only this badge fails (success/warning/info clear AA). Lift it to
   --danger-300. */
[data-theme="dark"] .badge-error,
[data-theme="dark"] .badge-danger { color: var(--danger-300); }

/* ---- Alerts ----------------------------------------------------------- */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-1);
  font-size: var(--text-sm);
}
.alert-info    { background: var(--info-bg);   color: var(--info-fg);   border-color: transparent; }
.alert-success { background: var(--ok-bg);     color: var(--ok-fg);     border-color: transparent; }
.alert-warning { background: var(--warn-bg);   color: var(--warn-fg);   border-color: transparent; }
.alert-error   { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; }

/* ---- Tables ----------------------------------------------------------- */
.table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--fg-1);
  border-bottom: 1px solid var(--border);
}
.table tbody tr:hover { background: var(--surface-2); }
.table-zebra tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-1) 92%, var(--espresso-200)); }
.table-compact tbody td, .table-compact thead th { padding: var(--space-2) var(--space-3); }

/* ---- Navbar ----------------------------------------------------------- */
.navbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
}
.navbar a.btn-ghost { font-weight: var(--fw-semibold); }

/* ---- Tabs ------------------------------------------------------------- */
.tabs { border-bottom: 1px solid var(--border); gap: var(--space-1); }
.tab {
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.tab:hover { color: var(--fg-1); }
.tab.tab-active,
.tab[aria-selected="true"] {
  color: var(--fg-1);
  border-bottom-color: var(--amber-400);
}
.tabs-boxed { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; }
.tabs-boxed .tab { border: none; border-radius: var(--radius-sm); }
.tabs-boxed .tab.tab-active { background: var(--surface-1); color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* ---- Menu / Dropdown -------------------------------------------------- */
.menu {
  background: var(--surface-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
}
.menu li > a, .menu li > button {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-size: var(--text-sm);
}
.menu li > a:hover, .menu li > button:hover { background: var(--surface-2); }
.menu li > a.active, .menu li > a[aria-current="page"] {
  background: var(--amber-100);
  color: var(--amber-800);
}
[data-theme="dark"] .menu li > a.active,
[data-theme="dark"] .menu li > a[aria-current="page"] {
  background: rgb(255 176 31 / 0.12);
  color: var(--amber-300);
}

.dropdown-content,
.menu.dropdown-content {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
}

/* ---- Modal ------------------------------------------------------------ */
.modal-box {
  background: var(--surface-1);
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
}
.modal-backdrop { background: rgb(20 16 9 / 0.55); }

/* ---- Progress --------------------------------------------------------- */
.progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--surface-2); }
.progress::-webkit-progress-value { background: var(--amber-400); }
.progress-primary::-webkit-progress-value { background: var(--amber-400); }
.progress-success::-webkit-progress-value { background: var(--success-500); }
.progress-warning::-webkit-progress-value { background: var(--warn-500); }
.progress-error::-webkit-progress-value   { background: var(--danger-500); }

/* ---- Tooltip ---------------------------------------------------------- */
.tooltip::before {
  background: var(--espresso-900);
  color: var(--cream-50);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

/* ---- Divider ---------------------------------------------------------- */
.divider {
  color: var(--fg-3);
  font-size: var(--text-xs);
}
.divider::before, .divider::after { background: var(--border); }

/* ---- Kbd -------------------------------------------------------------- */
.kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--fg-1);
}

/* ---- HTMX niceties ---------------------------------------------------- */
/* Subtle "request in flight" indicator that any element opts into via
   `hx-indicator` pointing at a child with .htmx-indicator. */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Optional outgoing-swap fade — opt in by adding .raft-swap to hx-target */
.raft-swap.htmx-swapping { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.raft-swap.htmx-settling { opacity: 1; transition: opacity var(--dur-base) var(--ease); }

/* ---- Date range picker (wraps two flatpickr inputs + presets) -------- */
.date-range-picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.date-range-picker .dr-arrow { color: var(--fg-3); font-size: var(--text-sm); }
.date-range-picker .dr-presets { min-width: 140px; }

/* Flatpickr theme overrides — match Raft tokens. The library ships with
   a bright default theme; we pull it onto the espresso/cream palette and
   re-skin the calendar surface to look like our cards. */
.flatpickr-input { font-family: var(--font-sans); }
.flatpickr-calendar {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 10px 24px rgb(20 16 9 / 0.18));
  color: var(--fg-1);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-bottom-color: var(--surface-1); border-top-color: var(--surface-1); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
  color: var(--fg-1);
  background: transparent;
  fill: var(--fg-1);
}
.flatpickr-monthDropdown-month { background: var(--surface-1); color: var(--fg-1); }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: var(--fg-2); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--brand); }
.flatpickr-day {
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  border-color: transparent;
}
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.today { border-color: var(--brand); }
.flatpickr-day.today:hover { background: var(--surface-2); color: var(--brand); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--brand);
  color: var(--brand-fg);
  border-color: var(--brand);
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: var(--surface-2);
  border-color: var(--surface-2);
  box-shadow: -5px 0 0 var(--surface-2), 5px 0 0 var(--surface-2);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--fg-4); }
.flatpickr-time .numInputWrapper,
.flatpickr-time .flatpickr-am-pm { color: var(--fg-1); }
.flatpickr-time input { color: var(--fg-1); background: var(--surface-1); }
.flatpickr-time input:hover,
.flatpickr-time input:focus { background: var(--surface-2); }
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--fg-2); }
.flatpickr-time { border-top: 1px solid var(--border); }

/* ---- Entity picker (typeahead-to-pills) ------------------------------- */
.entity-picker { position: relative; flex: 1 1 240px; min-width: 200px; }
.entity-picker .ep-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  min-height: 34px;
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.entity-picker .ep-control.is-open,
.entity-picker .ep-control:focus-within {
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px rgb(255 176 31 / 0.25);
}
.entity-picker .ep-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--fg-1);
  max-width: 100%;
}
.entity-picker .ep-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-picker .ep-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1;
}
.entity-picker .ep-pill-x:hover { background: var(--surface-1); color: var(--danger-500); }
[data-theme="dark"] .entity-picker .ep-pill-x:hover { color: var(--danger-400); }
.entity-picker .ep-input {
  flex: 1 1 80px;
  min-width: 80px;
  padding: 4px 6px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.entity-picker .ep-input::placeholder { color: var(--fg-4); }
.entity-picker .ep-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 10px 24px rgb(20 16 9 / 0.18));
  z-index: 40;
  padding: 4px;
}
.entity-picker .ep-row {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-1);
  cursor: pointer;
  line-height: 1.3;
}
.entity-picker .ep-row-active,
.entity-picker .ep-row:hover { background: var(--surface-2); }
.entity-picker .ep-row .ep-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  margin-left: 6px;
}
.entity-picker .ep-empty {
  padding: 10px 8px;
  color: var(--fg-3);
  font-size: var(--text-sm);
}

/* ---- Pagination chrome bar -------------------------------------------- */
/* Wave 0 (2026-05-10): position: fixed at viewport bottom. Was previously */
/* a sibling of <main> via {% block after_main %} that relied on column-  */
/* flex column-bottom positioning; that approach prevented document-level */
/* scroll, which prevented mobile browsers from collapsing the URL bar.   */
/* Fixed positioning keeps the chrome at viewport bottom regardless of    */
/* document scroll. left:256px on desktop matches the sidebar width;      */
/* on mobile the sidebar is an overlay and chrome spans the full width.   */
.pagination-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  padding: 8px 24px;
}
@media (min-width: 768px) {
  .pagination-bar { left: 256px; }
  /* When the sidebar is collapsed via the hamburger, <main> reflows to fill */
  /* the page — the fixed pagination-bar must do the same or it leaves a    */
  /* dead-zone strip at the left edge. (The title bar is position: sticky   */
  /* inside <main> so it reflows automatically; only fixed-position chrome  */
  /* needs the explicit override.) */
  html[data-sidebar="hidden"] .pagination-bar { left: 0; }
}

/* ---- Sidebar (admin + user surfaces) ---------------------------------- */
/* Wave 0 (2026-05-10): position: sticky on desktop so the sidebar stays  */
/* visible as the document scrolls. align-self: flex-start prevents the   */
/* default flex stretch alignment, which defeats sticky. Mobile retains   */
/* its existing position: fixed overlay treatment (see media query below).*/
.sidebar {
  width: 256px;
  flex: 0 0 256px;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
/* Collapsed state — html[data-sidebar="hidden"] is set synchronously in    */
/* _base.html's head bootstrap before first paint (no flash on reload).    */
html[data-sidebar="hidden"] .sidebar { display: none; }
html[data-sidebar="hidden"] .sidebar-backdrop { display: none; }

/* Tablet / phone: sidebar becomes a fixed-position overlay when shown so  */
/* it doesn't squeeze main content. Backdrop dims the page underneath.    */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    flex: none;
  }
  html[data-sidebar="showing"] .sidebar-backdrop { display: block; }
}

/* Phone (xs): expanded sidebar covers the full viewport width.            */
@media (max-width: 639px) {
  .sidebar { width: 100vw; }
}
.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.side-brand .logo-mark { width: 28px; height: 28px; flex: 0 0 auto; }
.side-brand .wm {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
/* a11y: the wordmark "mgmt" is theme-aware. The signature --brand (amber-400)
   reads beautifully on the dark chrome but only 1.82:1 on the light surface —
   --brand-wordmark resolves to a deeper amber in light, the bright signature in
   dark, so the logo is legible AND theme-consistent in both. */
.side-brand .wm b { color: var(--brand-wordmark); font-weight: 500; }

/* ---- Auth-page brand block ----------------------------------------- */
/* Bigger version of the side-brand wordmark, used as the page header on */
/* login / reset-password / etc. (templates extending auth_base.html).  */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0 16px;
  text-decoration: none;
  color: inherit;
}
/* Animate min-height changes so the vertically-centered card slides into */
/* its new position when the on-screen keyboard opens / closes (driven by */
/* `min-h-dvh` on auth_base) — instead of jumping there in one frame.    */
.auth-body { transition: min-height 150ms ease-out; }
.auth-brand .logo-mark { width: 48px; height: 48px; flex: 0 0 auto; }
.auth-brand .wm {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
.auth-brand .wm b { color: var(--brand-wordmark); font-weight: 500; }

.side-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.side-group { padding: 8px 12px; }
.side-group .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* a11y: these are ACTIVE group headings, not disabled text. --fg-4
     (disabled/placeholder token) failed AA in both themes (3.45:1 light,
     2.74:1 dark). --fg-2 clears it comfortably (~11:1 light, ~8:1 dark). */
  color: var(--fg-2);
  padding: 4px 10px 6px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.side-item:hover { background: var(--surface-2); color: var(--fg-1); }
.side-item.active { background: var(--surface-2); color: var(--brand); font-weight: var(--fw-medium); }
.side-item svg { flex: 0 0 auto; color: currentColor; }
.side-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Title bar (sticky page chrome) + sidebar toggles + backdrop -------*/
/* Wave 1 (2026-05-11): the topbar is the sticky page title bar — mirror   */
/* of .pagination-bar at the top. Holds [hamburger when sidebar collapsed] */
/* [page title (flex-grow)] [right-aligned actions]. Sidebar's own        */
/* hamburger lives inside .side-brand (top-right) and is the only toggle  */
/* visible when sidebar is showing; page hamburger appears only when      */
/* sidebar is hidden, giving exactly one hamburger at a time.             */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.titlebar-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.sidebar-toggle,
.sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0;
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.sidebar-toggle:hover,
.sidebar-close:hover { background: var(--surface-2); color: var(--fg-1); }
.sidebar-toggle:focus-visible,
.sidebar-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sidebar-close { margin-left: auto; }

/* Page hamburger is hidden whenever the sidebar is showing — the         */
/* sidebar's own hamburger handles the toggle in that state. data-sidebar */
/* is always set synchronously by the head bootstrap, so this selector    */
/* resolves before first paint.                                           */
html:not([data-sidebar="hidden"]) .sidebar-toggle { display: none; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  display: none;
}

/* ---- Sidebar footer: user widget + theme switcher --------------------- */
/* Anchored to the bottom of the sidebar; popover floats above the user   */
/* button. Reference: design_handoff_raft/reference_ui_kits/admin_app/    */
.side-foot {
  position: relative;
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.user-btn:hover,
.user-btn.open { background: var(--surface-2); border-color: var(--border); }
.user-btn .av {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--amber-400), var(--ember-500));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: var(--espresso-900);
}
.user-btn .who { flex: 1; min-width: 0; }
.user-btn .who .nm {
  font-size: var(--text-xs);
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-btn .who .org {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-btn .chevron {
  flex: 0 0 auto;
  color: var(--fg-4);
  transition: transform var(--dur-fast) var(--ease);
}
.user-btn.open .chevron { transform: rotate(180deg); }

/* Tiny theme segmented control — icon-only */
.theme-seg-sm {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-1);
  flex: 0 0 auto;
}
.theme-seg-sm button {
  /* a11y (WCAG 2.5.8 target-size minimum): 24x24 CSS px. Was 22px. */
  width: 24px; height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-4);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.theme-seg-sm button:hover { color: var(--fg-1); }
.theme-seg-sm button.active { background: var(--surface-2); color: var(--brand); }
.theme-seg-sm button + button { border-left: 1px solid var(--border); }

/* a11y: dashboard stat-title labels in semantic colors. The 500-weight success
   (#2E8B57, 4.07:1) and warning (#B8860B, 3.12:1) tokens fail AA as small text
   on the light cream surface (they're tuned for fills/badges + the large
   stat-value). Use the 700 shade for the small title in light only; dark passes
   already (5.4:1 / 5.6:1 on the dark chrome). Two-class specificity beats the
   single-class daisyUI utility. */
[data-theme="light"] .stat-title.text-success { color: var(--success-700); }
[data-theme="light"] .stat-title.text-warning { color: var(--warn-700); }

/* User popover — anchored above .side-foot */
.user-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px;
  width: 224px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 10px 24px rgb(20 16 9 / 0.18));
  z-index: 50;
}
.user-popover .um-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 10px;
}
.user-popover .um-head .av {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--amber-400), var(--ember-500));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  color: var(--espresso-900);
}
.user-popover .um-head .nm {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  line-height: 1.3;
}
.user-popover .um-head .org {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  line-height: 1.3;
}
.user-popover .um-sep {
  height: 1px;
  background: var(--border);
  margin: 4px -8px;
}
.user-popover .um-item {
  width: 100%;
  display: flex; align-items: center;
  gap: 10px;
  padding: 8px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-align: left;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.user-popover .um-item:hover { background: var(--surface-2); color: var(--fg-1); }
.user-popover .um-item svg { color: var(--fg-3); flex: 0 0 auto; }
.user-popover .um-item:hover svg { color: var(--fg-1); }
.user-popover .um-item.danger { color: var(--danger-500); }
[data-theme="dark"] .user-popover .um-item.danger { color: var(--danger-400); }
.user-popover .um-item.danger svg { color: currentColor; }
.user-popover .um-item.danger:hover { background: rgb(179 52 30 / 0.12); }

/* ---- Sort + filter indicators (Wave 2 — 2026-05-11) --------------------*/
/* Column headers in paginating tables render a sort indicator at all      */
/* times (faded when the column isn't the current sort, colored when it    */
/* is) plus an optional filter indicator next to it (shown only when a     */
/* filter is currently affecting that column). The filter indicator is a   */
/* visual stub in Wave 2; Wave 4 wires it to per-column filter popovers.   */
.sort-indicator {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  color: var(--fg-4);
  opacity: 0.6;
  transition: color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.sort-indicator-active {
  color: var(--brand);
  opacity: 1;
}
th:hover .sort-indicator { color: var(--brand); opacity: 0.85; }
th:hover .sort-indicator-active { opacity: 1; }
.filter-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  opacity: 0.5;
  margin-left: 2px;
  transition: color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.filter-indicator svg { display: block; }
.filter-indicator-active {
  color: var(--brand);
  opacity: 1;
}

/* ─── Column header: sort affordance + filter funnel side-by-side ─── */
.column-header {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.sort-affordance {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.sort-affordance-static {
  /* Non-sortable label (e.g., audit-log Actor). No hover affordance,
     no sort glyph, but the funnel funnel beside it still works. */
  display: inline-flex;
  align-items: center;
}
.filter-funnel {
  /* DaisyUI's <summary> default has marker styles we don't want here. */
  list-style: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--dur-fast) var(--ease);
}
.filter-funnel::-webkit-details-marker { display: none; }
.filter-funnel:hover { background-color: rgba(0, 0, 0, 0.05); }
.filter-funnel:hover .filter-indicator { color: var(--brand); opacity: 0.9; }
.filter-funnel:hover .filter-indicator-active { opacity: 1; }

/* The popover container — DaisyUI's dropdown-content handles positioning;
   we just add some shadow/elevation polish and z-index management. */
.filter-popover { display: inline-block; }

/* ─── Active-filter chip strip ─── */
.active-filter-chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: stretch;
  background-color: var(--brand-soft, rgba(0, 100, 200, 0.08));
  border: 1px solid var(--brand-border, rgba(0, 100, 200, 0.2));
  border-radius: 9999px;
  font-size: 0.875rem;
  overflow: hidden;
  max-width: 100%;
}
.chip-body {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  min-width: 0;
}
.chip-body:hover { background-color: rgba(0, 0, 0, 0.04); }
.chip-label {
  font-weight: 600;
  white-space: nowrap;
}
.chip-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.chip-x {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--brand-border, rgba(0, 100, 200, 0.2));
  padding: 0 0.5rem;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1;
}
.chip-x:hover { background-color: rgba(220, 38, 38, 0.1); color: rgb(220, 38, 38); }

/* ─── Search chip (inline-expand) ─── */
.search-chip { align-items: center; }
.search-chip-icon {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}
/* Hover uses currentColor at low alpha so the tint flips with the
   theme (subtle dark wash on light, subtle light wash on dark). */
.search-chip-icon:hover { background-color: color-mix(in srgb, currentColor 8%, transparent); }
/* "Search:" label that sits next to the input in edit mode. Reuses
   `.chip-label` typography (font-weight: 600) and adds left padding
   so it hugs the chip's rounded edge. */
.search-chip-edit-label { padding: 0.25rem 0 0.25rem 0.75rem; }
.search-chip-input {
  background: transparent;
  border: 0;
  padding: 0.25rem 0 0.25rem 0.25rem;
  outline: none;
  font: inherit;
  color: var(--fg-1, inherit);
  width: 16rem;
  max-width: 50vw;
}
.search-chip-input::placeholder { color: var(--fg-3, #6b7280); opacity: 0.7; }
/* Expanded background uses the raised-surface token so it adapts to
   light / dark theme rather than the previous hard-coded white. */
.search-chip-expanded { background-color: var(--surface-1, white); }

/* ─── Mobile top sheet: <640px viewports flip popovers to fixed top ─── */
@media (max-width: 639px) {
  .filter-popover[open] .dropdown-content {
    /* Override DaisyUI's absolute-positioned popover with a viewport-anchored
       full-width sheet at the TOP of the viewport (near where the user
       tapped the funnel in the column header). The <details>'s ::backdrop
       equivalent is the open-state itself; tapping outside the sheet
       closes the details. */
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 50;
    max-height: 80vh;
    overflow-y: auto;
  }
  /* "Add Filter" framing — a small uppercased header above the popover
     content so the sheet reads as a filter UI rather than an unframed
     modal taking over the top of the viewport. Inside the @media block
     so it only renders on mobile; desktop popovers stay unchanged. */
  .filter-popover[open] .dropdown-content::before {
    content: "Add Filter";
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft, #6b7280);
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}