/* ============================================================
   ACC components — buttons, cards, tables, badges, tabs,
   modals, empty states, stat cards, command palette, login.
   Loaded AFTER base.css.
   ============================================================ */

/* ── Buttons — V1 parity ──────────────────────────────── */
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
  height: 36px; padding: 0 var(--acc-space-4);
  font-size: var(--acc-text-sm); font-weight: var(--acc-weight-medium);
  border: 1px solid transparent;
  border-radius: var(--acc-radius-md);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--acc-duration-fast) var(--acc-ease),
              border-color var(--acc-duration-fast) var(--acc-ease),
              color var(--acc-duration-fast) var(--acc-ease),
              box-shadow var(--acc-duration-fast) var(--acc-ease),
              transform 80ms ease-out;
  letter-spacing: -0.005em;
}
.acc-btn:focus-visible { outline: none; box-shadow: var(--acc-focus-ring); }
.acc-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.acc-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.acc-btn--sm { height: 30px; padding: 0 var(--acc-space-3); font-size: var(--acc-text-xs); }
.acc-btn--lg { height: 40px; padding: 0 var(--acc-space-5); font-size: var(--acc-text-base); }
.acc-btn--icon { width: 36px; padding: 0; }

.acc-btn--primary { background: var(--acc-action); color: var(--acc-action-on); border-color: var(--acc-action); }
.acc-btn--primary:hover:not(:disabled) { background: var(--acc-action-hover); border-color: var(--acc-action-hover); }

.acc-btn--accent { background: var(--acc-accent); color: var(--acc-accent-on); border-color: var(--acc-accent); }
.acc-btn--accent:hover:not(:disabled) { background: var(--acc-accent-hover); border-color: var(--acc-accent-hover); }

.acc-btn--secondary {
  background: var(--acc-surface-canvas); color: var(--acc-text-primary);
  border-color: var(--acc-border-default); box-shadow: var(--acc-shadow-xs);
}
.acc-btn--secondary:hover:not(:disabled) { background: var(--acc-surface-sunken); }

.acc-btn--ghost { background: transparent; color: var(--acc-text-secondary); }
.acc-btn--ghost:hover:not(:disabled) { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }

.acc-btn--danger { background: var(--acc-color-rose-600); color: #fff; border-color: var(--acc-color-rose-600); }
.acc-btn--danger:hover:not(:disabled) { background: var(--acc-color-rose-700); border-color: var(--acc-color-rose-700); }

.acc-btn--link { background: transparent; color: var(--acc-action); border-color: transparent; padding: 0; height: auto; }
.acc-btn--link:hover { text-decoration: underline; }

/* ── Cards ─────────────────────────────────────────────── */
.acc-card {
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);          /* V1: rounded-xl (12 px) */
  box-shadow: var(--acc-shadow-xs);
  overflow: hidden;
}
.acc-card--elevated { box-shadow: var(--acc-shadow-sm); }
.acc-card--flush { border-radius: 0; border-left: 0; border-right: 0; }
.acc-card__header {
  padding: var(--acc-space-4) var(--acc-space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--acc-space-3);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-card__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md); font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--acc-text-primary);
}
.acc-card__body { padding: var(--acc-space-5); }
.acc-card__body--flush { padding: 0; }
.acc-card__footer {
  padding: var(--acc-space-3) var(--acc-space-5);
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
  display: flex; justify-content: flex-end; gap: var(--acc-space-2);
}

/* ── Stat card — V1 KPI shape ──────────────────────────── */
.acc-stat {
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  padding: var(--acc-space-5);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.acc-stat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--acc-space-3); }
.acc-stat__main { min-width: 0; flex: 1; }
.acc-stat__label {
  font-size: var(--acc-text-sm);
  color: var(--acc-text-secondary);
  font-weight: var(--acc-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}
.acc-stat__value {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-3xl);
  font-weight: var(--acc-weight-bold);
  letter-spacing: -0.025em;
  color: var(--acc-text-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.acc-stat__delta { font-size: var(--acc-text-xs); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.acc-stat__delta--up { color: var(--acc-status-success-fg); }
.acc-stat__delta--down { color: var(--acc-status-danger-fg); }
.acc-stat__delta--flat { color: var(--acc-text-tertiary); }
.acc-stat__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-lg);
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
}
[data-theme="dark"] .acc-stat__icon { color: var(--acc-color-amber-d-400); }
.acc-stat__icon svg { width: 18px; height: 18px; }

/* ── Stat card as filter-button (dashboard KPI strip) ──
   When a stat card carries `filter_kind`, the macro renders
   it as a <button> with `acc-stat--clickable`. Hover, focus,
   and selected states need to read as "this is interactive."
   The selected state uses the amber accent so it ties back
   visually to the active-state amber bar in the sidebar.
   `acc-card--filtered-out` is paired: when one stat is
   selected, filterable sections that don't match its
   `data-kpi-kind` get faded — kept visible so the user
   doesn't lose their place, but de-emphasized so the matched
   ones stand out. */
.acc-stat--clickable {
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  transition: border-color var(--acc-duration-fast),
              box-shadow var(--acc-duration-fast),
              background var(--acc-duration-fast);
}
.acc-stat--clickable:hover {
  border-color: var(--acc-color-amber-500);
}
.acc-stat--clickable:focus-visible {
  outline: none;
  border-color: var(--acc-color-amber-500);
  box-shadow: 0 0 0 3px rgba(189, 152, 42, 0.20);
}
.acc-stat--selected {
  border-color: var(--acc-color-amber-500);
  background: var(--acc-accent-soft);
  box-shadow: 0 0 0 1px var(--acc-color-amber-500) inset;
}
.acc-stat--selected .acc-stat__label { color: var(--acc-color-amber-700); }
[data-theme="dark"] .acc-stat--selected { background: rgba(245, 204, 77, 0.10); }
[data-theme="dark"] .acc-stat--selected .acc-stat__label { color: var(--acc-color-amber-d-400); }

.acc-card--filtered-out {
  opacity: 0.45;
  transition: opacity var(--acc-duration-base);
}
.acc-card--filtered-out:hover { opacity: 0.75; }

/* Variants for the icon chip — V1 uses status-tinted chips in some
   cards (warning red, info blue) when the metric carries a tone. */
.acc-stat__icon--warn   { background: var(--acc-status-warn-bg);   color: var(--acc-status-warn-fg); }
.acc-stat__icon--danger { background: var(--acc-status-danger-bg); color: var(--acc-status-danger-fg); }
.acc-stat__icon--info   { background: var(--acc-status-info-bg);   color: var(--acc-status-info-fg); }
.acc-stat__icon--success{ background: var(--acc-status-success-bg);color: var(--acc-status-success-fg); }

/* ── Badges ────────────────────────────────────────────── */
.acc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: var(--acc-radius-md);            /* V1: rounded-md, not pill */
  border: 1px solid transparent;
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-semibold);
  white-space: nowrap;
}
.acc-badge--neutral { background: var(--acc-surface-sunken); color: var(--acc-text-secondary); border-color: var(--acc-border-subtle); }
.acc-badge--success { background: var(--acc-status-success-bg); color: var(--acc-status-success-fg); border-color: var(--acc-status-success-bord); }
.acc-badge--warn    { background: var(--acc-status-warn-bg);    color: var(--acc-status-warn-fg);    border-color: var(--acc-status-warn-bord); }
.acc-badge--danger  { background: var(--acc-status-danger-bg);  color: var(--acc-status-danger-fg);  border-color: var(--acc-status-danger-bord); }
.acc-badge--info    { background: var(--acc-status-info-bg);    color: var(--acc-status-info-fg);    border-color: var(--acc-status-info-bord); }
.acc-badge--accent  { background: var(--acc-accent-soft); color: var(--acc-color-amber-700); border-color: var(--acc-color-amber-200); }
[data-theme="dark"] .acc-badge--accent { color: var(--acc-color-amber-d-400); border-color: rgba(230,200,74,0.30); }

.acc-badge__dot { width: 6px; height: 6px; border-radius: var(--acc-radius-full); background: currentColor; }

/* ── Tables — V1 parity ────────────────────────────────
   V1 uses `<th class="h-10 px-2 ...">` (40px head row, 8px H pad)
   and `<td class="p-2">` (8px V pad on rows). Body 14px. We keep
   the same vertical density (10/12) but tighten H padding to V1's
   8px. Header is uppercase + 11px in V1's table.tsx but the
   shadcn table we sample from (data-table) drops uppercase. We
   follow shadcn.tsx — sentence-case, medium weight, 12px. */
.acc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--acc-text-base); }
.acc-table thead th {
  text-align: left;
  font-weight: var(--acc-weight-medium);
  font-size: var(--acc-text-xs);
  text-transform: none; letter-spacing: 0;
  color: var(--acc-text-tertiary);
  padding: 0 var(--acc-space-3);
  height: 40px;
  background: transparent;
  border-bottom: 1px solid var(--acc-border-subtle);
  white-space: nowrap;
}
.acc-table thead th:first-child { padding-left: var(--acc-space-4); }
.acc-table thead th:last-child  { padding-right: var(--acc-space-4); }

.acc-table tbody td {
  padding: 12px var(--acc-space-3);
  border-bottom: 1px solid var(--acc-border-subtle);
  color: var(--acc-text-primary);
  vertical-align: middle;
}
.acc-table tbody td:first-child { padding-left: var(--acc-space-4); }
.acc-table tbody td:last-child  { padding-right: var(--acc-space-4); }
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-table tbody tr {
  transition: background var(--acc-duration-fast) var(--acc-ease);
}
.acc-table tbody tr:hover td {
  background: color-mix(in srgb, var(--acc-surface-sunken) 60%, transparent);
}
/* Clickable rows (V1 pattern) */
.acc-table tbody tr[onclick],
.acc-table tbody tr.acc-table__row--clickable { cursor: pointer; }
.acc-table tbody tr.acc-table__row--selected td { background: var(--acc-accent-soft); }

/* Density modifiers */
.acc-table--compact tbody td { padding: 8px var(--acc-space-3); }
.acc-table--compact thead th { height: 36px; }
.acc-table--cozy tbody td { padding: 16px var(--acc-space-3); }

.acc-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-table__muted { color: var(--acc-text-tertiary); }
.acc-table__primary { font-weight: var(--acc-weight-medium); color: var(--acc-text-primary); }
.acc-table__action { text-align: right; white-space: nowrap; }

/* ── Tabs ──────────────────────────────────────────────── */
.acc-tabs { display: flex; gap: var(--acc-space-1); border-bottom: 1px solid var(--acc-border-subtle); }
.acc-tabs__tab {
  padding: 10px var(--acc-space-3); font-size: var(--acc-text-base);
  font-weight: var(--acc-weight-medium); color: var(--acc-text-tertiary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-tabs__tab:hover { color: var(--acc-text-primary); }
.acc-tabs__tab--active { color: var(--acc-text-primary); border-bottom-color: var(--acc-action); }

/* ── Forms — V1 parity ───────────────────────────────────
   V1 uses `h-11` (44px) inputs in auth, `h-9` (36px) in dense
   table cells. We split the difference at 40px — comfortable
   on both. Focus ring is amber per the design tokens. */
.acc-input, .acc-select, .acc-textarea {
  width: 100%; height: 40px;
  padding: 0 var(--acc-space-3);
  background: var(--acc-surface-canvas);
  color: var(--acc-text-primary);
  border: 1px solid var(--acc-border-default);
  border-radius: var(--acc-radius-md);
  font-size: var(--acc-text-base);
  box-shadow: var(--acc-shadow-xs);
  transition: border-color var(--acc-duration-fast),
              box-shadow var(--acc-duration-fast),
              background var(--acc-duration-fast);
}
.acc-textarea { height: auto; padding: 10px var(--acc-space-3); min-height: 96px; resize: vertical; line-height: var(--acc-leading-snug); }
.acc-input:hover:not(:focus):not(:disabled),
.acc-select:hover:not(:focus):not(:disabled),
.acc-textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--acc-border-strong);
}
.acc-input:focus, .acc-select:focus, .acc-textarea:focus {
  outline: none;
  border-color: var(--acc-accent);
  box-shadow: var(--acc-focus-ring);
}
.acc-input:disabled, .acc-select:disabled, .acc-textarea:disabled {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-muted);
  cursor: not-allowed;
}
.acc-input::placeholder, .acc-textarea::placeholder { color: var(--acc-text-muted); }

/* Sm-size variant for dense filter-bar inputs */
.acc-input--sm { height: 32px; font-size: var(--acc-text-sm); }

.acc-label {
  display: block;
  font-size: var(--acc-text-sm);
  font-weight: var(--acc-weight-medium);
  color: var(--acc-text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.acc-field { display: flex; flex-direction: column; gap: 4px; }
.acc-field__hint { font-size: var(--acc-text-xs); color: var(--acc-text-tertiary); margin-top: 4px; }
.acc-field__error { font-size: var(--acc-text-xs); color: var(--acc-status-danger-fg); font-weight: var(--acc-weight-medium); margin-top: 4px; }
/* Field invalid state — applied by caller-side `style="border-color:..."` already; this complements with a soft pink ring on focus */
.acc-input[style*="danger"]:focus,
.acc-select[style*="danger"]:focus,
.acc-textarea[style*="danger"]:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18);
}

/* Inline checkbox/radio rows */
.acc-check-row {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 6px 0;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-secondary);
}
.acc-check-row input[type="checkbox"],
.acc-check-row input[type="radio"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--acc-accent);
}

/* ── Empty state — V1 dashed-border container ──────────── */
.acc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--acc-space-12) var(--acc-space-6);
  text-align: center; gap: var(--acc-space-2);
  border: 1px dashed var(--acc-border-default);
  border-radius: var(--acc-radius-xl);
  background: var(--acc-surface-canvas);
}
.acc-empty__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-lg);
  background: var(--acc-surface-sunken); color: var(--acc-text-tertiary);
  margin-bottom: var(--acc-space-2);
}
/* Defensive: any svg dropped inside the icon chip (without explicit width
   or height) is constrained to the chip. Without this, a hand-rolled
   <svg viewBox="0 0 24 24"> with the global `svg { display: block;
   max-width: 100% }` reset (or the new `inline-block` variant) could
   fill the parent's width — which on an empty-state page can be the
   whole viewport. The macro emits explicit width/height (22 in a 48
   chip), so this cap is belt-and-braces for callers that hand-roll
   their own SVG inside the chip. */
.acc-empty__icon > svg { max-width: 50%; max-height: 50%; }
.acc-empty__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-lg); font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--acc-text-primary);
}
.acc-empty__body {
  font-size: var(--acc-text-base); color: var(--acc-text-secondary);
  max-width: 420px; line-height: var(--acc-leading-relaxed);
}

/* When an empty state lives inside a table cell, drop the dashed
   border so we don't double-wrap. The macro/template hint is to
   pass the .acc-empty--bare modifier on the inner element. */
.acc-empty--bare { border: 0; background: transparent; padding: var(--acc-space-8) var(--acc-space-4); }

/* ============================================================
   Drawer — V1 Sheet parity. Right-side slide-in panel.
   Wired by assets/controllers/drawer_controller.js.
   ============================================================ */
.acc-drawer {
  --acc-drawer-w: 420px;
  position: fixed; inset: 0;
  z-index: 80;
  display: flex;
  pointer-events: none;
}
.acc-drawer[hidden] { display: none; }
.acc-drawer__overlay {
  position: absolute; inset: 0;
  background: var(--acc-surface-overlay);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--acc-duration-base) var(--acc-ease);
  pointer-events: auto;
}
.acc-drawer--open .acc-drawer__overlay { opacity: 1; }

.acc-drawer__panel {
  position: absolute;
  top: 0; bottom: 0;
  width: min(var(--acc-drawer-w), calc(100vw - 32px));
  background: var(--acc-surface-canvas);
  border-left: 1px solid var(--acc-border-subtle);
  box-shadow: -20px 0 40px -10px rgba(15, 23, 42, 0.18);
  display: flex; flex-direction: column;
  pointer-events: auto;
  outline: none;
  transition: transform var(--acc-duration-base) cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-drawer--right .acc-drawer__panel {
  right: 0;
  transform: translateX(100%);
}
.acc-drawer--left .acc-drawer__panel {
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--acc-border-subtle);
  box-shadow: 20px 0 40px -10px rgba(15, 23, 42, 0.18);
  transform: translateX(-100%);
}
.acc-drawer--open.acc-drawer--right .acc-drawer__panel,
.acc-drawer--open.acc-drawer--left  .acc-drawer__panel {
  transform: translateX(0);
}
.acc-drawer__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--acc-space-3);
  padding: var(--acc-space-4) var(--acc-space-5);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-drawer__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-lg);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--acc-text-primary);
  margin: 0;
}
.acc-drawer__close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-tertiary);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-drawer__close:hover {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
}
.acc-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--acc-focus-ring);
}
.acc-drawer__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--acc-space-5);
}
.acc-drawer__footer {
  flex-shrink: 0;
  display: flex; gap: var(--acc-space-2);
  justify-content: flex-end;
  padding: var(--acc-space-4) var(--acc-space-5);
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}

/* ============================================================
   Dialog — V1 Radix Dialog parity. Centered modal w/ focus trap.
   Wired by assets/controllers/dialog_controller.js.
   ============================================================ */
.acc-dialog {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--acc-space-4) var(--acc-space-4);
  pointer-events: none;
}
.acc-dialog[hidden] { display: none; }
.acc-dialog__overlay {
  position: absolute; inset: 0;
  background: var(--acc-surface-overlay);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--acc-duration-base) var(--acc-ease);
  pointer-events: auto;
}
.acc-dialog--open .acc-dialog__overlay { opacity: 1; }

.acc-dialog__panel {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 16vh);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-xl);
  display: flex; flex-direction: column;
  pointer-events: auto;
  outline: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--acc-duration-base) var(--acc-ease),
              transform var(--acc-duration-base) cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-dialog--open .acc-dialog__panel {
  opacity: 1;
  transform: scale(1);
}
.acc-dialog--sm .acc-dialog__panel { max-width: 380px; }
.acc-dialog--md .acc-dialog__panel { max-width: 520px; }
.acc-dialog--lg .acc-dialog__panel { max-width: 720px; }

.acc-dialog__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--acc-space-3);
  padding: var(--acc-space-5) var(--acc-space-5) var(--acc-space-3);
}
.acc-dialog__header-text { min-width: 0; flex: 1; }
.acc-dialog__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-lg);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--acc-text-primary);
  margin: 0;
}
.acc-dialog__desc {
  font-size: var(--acc-text-sm);
  color: var(--acc-text-secondary);
  margin: 6px 0 0;
  line-height: var(--acc-leading-relaxed);
}
.acc-dialog__close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-tertiary);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-dialog__close:hover {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
}
.acc-dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--acc-focus-ring);
}
.acc-dialog__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0 var(--acc-space-5) var(--acc-space-5);
  font-size: var(--acc-text-base);
  color: var(--acc-text-primary);
  line-height: var(--acc-leading-relaxed);
}
.acc-dialog__body:first-child { padding-top: var(--acc-space-5); }
.acc-dialog__footer {
  flex-shrink: 0;
  display: flex; gap: var(--acc-space-2);
  justify-content: flex-end;
  padding: var(--acc-space-3) var(--acc-space-5);
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
  border-bottom-left-radius: var(--acc-radius-xl);
  border-bottom-right-radius: var(--acc-radius-xl);
}

/* ============================================================
   Toasts — V1 Sonner parity. Top-right auto-dismiss stack.
   Wired by assets/controllers/toast_controller.js.
   ============================================================ */
.acc-toasts {
  position: fixed;
  top: var(--acc-space-4);
  right: var(--acc-space-4);
  z-index: 100;
  display: flex; flex-direction: column;
  gap: var(--acc-space-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.acc-toast {
  display: flex; align-items: flex-start;
  gap: var(--acc-space-3);
  padding: var(--acc-space-3) var(--acc-space-3) var(--acc-space-3) var(--acc-space-4);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-lg);
  box-shadow: var(--acc-shadow-lg);
  font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  pointer-events: auto;
  /* Off-stage start position; transitions to translateX(0) when
     .acc-toast--visible is added by the controller. */
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--acc-duration-base) cubic-bezier(0.16, 1, 0.3, 1),
              opacity var(--acc-duration-base) var(--acc-ease);
}
.acc-toast--visible { transform: translateX(0); opacity: 1; }
.acc-toast--leaving {
  transform: translateX(120%);
  opacity: 0;
}

.acc-toast__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-full);
  margin-top: 2px;
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
}
.acc-toast--success .acc-toast__icon { background: var(--acc-status-success-bg); color: var(--acc-status-success-fg); }
.acc-toast--warn    .acc-toast__icon { background: var(--acc-status-warn-bg);    color: var(--acc-status-warn-fg); }
.acc-toast--danger  .acc-toast__icon { background: var(--acc-status-danger-bg);  color: var(--acc-status-danger-fg); }
.acc-toast--info    .acc-toast__icon { background: var(--acc-status-info-bg);    color: var(--acc-status-info-fg); }

/* Left amber accent bar — V1 visual signature */
.acc-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--acc-color-amber-500);
  opacity: 0;
}
[data-theme="dark"] .acc-toast::before { background: var(--acc-color-amber-d-400); }
.acc-toast { position: relative; }
.acc-toast--success::before { background: var(--acc-color-emerald-500); opacity: 1; }
.acc-toast--warn::before    { background: var(--acc-color-amber-500);   opacity: 1; }
.acc-toast--danger::before  { background: var(--acc-color-rose-500);    opacity: 1; }
.acc-toast--info::before    { background: var(--acc-color-blue-500);    opacity: 1; }

.acc-toast__main { flex: 1; min-width: 0; }
.acc-toast__title {
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.acc-toast__body {
  color: var(--acc-text-secondary);
  line-height: var(--acc-leading-snug);
}

.acc-toast__action {
  flex-shrink: 0;
  align-self: center;
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-action);
  background: transparent;
  border: 1px solid var(--acc-border-default);
  padding: 4px 10px;
  border-radius: var(--acc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-toast__action:hover {
  background: var(--acc-surface-sunken);
  border-color: var(--acc-border-strong);
}

.acc-toast__close {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  color: var(--acc-text-tertiary);
  cursor: pointer;
  border-radius: var(--acc-radius-sm);
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-toast__close:hover {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
}

/* Reduced motion — drop slide animation, keep opacity fade. */
@media (prefers-reduced-motion: reduce) {
  .acc-drawer__panel,
  .acc-dialog__panel,
  .acc-toast {
    transition: opacity var(--acc-duration-fast) var(--acc-ease) !important;
    transform: none !important;
  }
  .acc-drawer__overlay,
  .acc-dialog__overlay {
    transition: opacity var(--acc-duration-fast) var(--acc-ease) !important;
  }
}

/* ============================================================
   Combobox — V1 shadcn-style searchable single-select.
   Wired by assets/controllers/combobox_controller.js.
   ============================================================ */
.acc-combobox { position: relative; display: block; }
.acc-combobox--disabled { opacity: 0.6; pointer-events: none; }

.acc-combobox__trigger {
  display: flex; align-items: center; gap: var(--acc-space-2);
  width: 100%;
  height: 40px;
  padding: 0 var(--acc-space-3);
  background: var(--acc-surface-canvas);
  color: var(--acc-text-primary);
  border: 1px solid var(--acc-border-default);
  border-radius: var(--acc-radius-md);
  font-size: var(--acc-text-base);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--acc-shadow-xs);
  transition: border-color var(--acc-duration-fast),
              box-shadow var(--acc-duration-fast),
              background var(--acc-duration-fast);
}
.acc-combobox__trigger:hover:not(:disabled) {
  border-color: var(--acc-border-strong);
}
.acc-combobox__trigger:focus-visible,
.acc-combobox__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--acc-accent);
  box-shadow: var(--acc-focus-ring);
}
.acc-combobox__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-combobox__label--placeholder { color: var(--acc-text-muted); }
.acc-combobox__caret {
  color: var(--acc-text-tertiary);
  flex-shrink: 0;
  transition: transform var(--acc-duration-fast) var(--acc-ease);
}
.acc-combobox__trigger[aria-expanded="true"] .acc-combobox__caret {
  transform: rotate(180deg);
}

.acc-combobox__panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  box-shadow: var(--acc-shadow-lg);
  overflow: hidden;
  animation: acc-scale-in var(--acc-duration-fast) var(--acc-ease) both;
  transform-origin: top center;
}

.acc-combobox__search-wrap {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 0 var(--acc-space-3);
  height: 40px;
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-combobox__search {
  flex: 1;
  height: 100%;
  border: 0; outline: none; background: transparent;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  font-family: inherit;
}
.acc-combobox__search::placeholder { color: var(--acc-text-muted); }

.acc-combobox__list {
  list-style: none; margin: 0; padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--acc-border-default) transparent;
}
.acc-combobox__option {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 8px var(--acc-space-3);
  border-radius: var(--acc-radius-sm);
  cursor: pointer;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  transition: background var(--acc-duration-fast);
}
.acc-combobox__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-combobox__option-meta {
  color: var(--acc-text-tertiary);
  font-size: var(--acc-text-xs);
  flex-shrink: 0;
}
.acc-combobox__option-check {
  color: var(--acc-color-amber-500);
  opacity: 0;
  flex-shrink: 0;
}
[data-theme="dark"] .acc-combobox__option-check { color: var(--acc-color-amber-d-400); }
.acc-combobox__option--selected .acc-combobox__option-check { opacity: 1; }
.acc-combobox__option:hover,
.acc-combobox__option--active {
  background: var(--acc-surface-sunken);
}
.acc-combobox__option[hidden] { display: none; }

.acc-combobox__empty {
  padding: var(--acc-space-5) var(--acc-space-3);
  text-align: center;
  color: var(--acc-text-tertiary);
  font-size: var(--acc-text-sm);
}

/* ============================================================
   Datepicker — V1 calendar-grid date selector.
   Wired by assets/controllers/datepicker_controller.js.
   ============================================================ */
.acc-datepicker { position: relative; display: inline-block; }
.acc-datepicker--disabled { opacity: 0.6; pointer-events: none; }

.acc-datepicker__trigger {
  display: inline-flex; align-items: center; gap: var(--acc-space-2);
  height: 40px;
  padding: 0 var(--acc-space-3);
  background: var(--acc-surface-canvas);
  color: var(--acc-text-primary);
  border: 1px solid var(--acc-border-default);
  border-radius: var(--acc-radius-md);
  font-size: var(--acc-text-base);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--acc-shadow-xs);
  transition: border-color var(--acc-duration-fast),
              box-shadow var(--acc-duration-fast);
}
.acc-datepicker__trigger:hover:not(:disabled) { border-color: var(--acc-border-strong); }
.acc-datepicker__trigger:focus-visible,
.acc-datepicker__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--acc-accent);
  box-shadow: var(--acc-focus-ring);
}
.acc-datepicker__icon { color: var(--acc-text-tertiary); flex-shrink: 0; }
.acc-datepicker__display {
  flex: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.acc-datepicker__display--placeholder { color: var(--acc-text-muted); }
.acc-datepicker__caret { color: var(--acc-text-tertiary); flex-shrink: 0; }

.acc-datepicker__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 50;
  width: 280px;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  box-shadow: var(--acc-shadow-lg);
  padding: var(--acc-space-3);
  animation: acc-scale-in var(--acc-duration-fast) var(--acc-ease) both;
  transform-origin: top center;
}

.acc-datepicker__header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--acc-space-2);
}
.acc-datepicker__nav {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--acc-radius-sm);
  color: var(--acc-text-secondary);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-datepicker__nav:hover {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
}
.acc-datepicker__month-label {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-sm);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--acc-text-primary);
}

.acc-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.acc-datepicker__weekday {
  font-size: 10px;
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-tertiary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.acc-datepicker__day {
  display: grid; place-items: center;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--acc-radius-sm);
  font-size: var(--acc-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--acc-text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-datepicker__day:hover:not([disabled]):not(.acc-datepicker__day--selected) {
  background: var(--acc-surface-sunken);
}
.acc-datepicker__day:focus-visible {
  outline: none;
  box-shadow: var(--acc-focus-ring);
}
.acc-datepicker__day--empty { background: transparent; cursor: default; pointer-events: none; }
.acc-datepicker__day--today {
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-color-amber-700);
}
[data-theme="dark"] .acc-datepicker__day--today { color: var(--acc-color-amber-d-400); }
.acc-datepicker__day--selected {
  background: var(--acc-accent);
  color: var(--acc-accent-on);
  font-weight: var(--acc-weight-semibold);
}
.acc-datepicker__day--selected:hover { background: var(--acc-accent-hover); }
.acc-datepicker__day[disabled] {
  color: var(--acc-text-muted);
  cursor: not-allowed;
}

.acc-datepicker__footer {
  display: flex; gap: var(--acc-space-2);
  justify-content: space-between;
  margin-top: var(--acc-space-2);
  padding-top: var(--acc-space-2);
  border-top: 1px solid var(--acc-border-subtle);
}

/* ============================================================
   Dropzone — V1 react-dropzone parity, drag-and-drop file picker.
   Wired by assets/controllers/dropzone_controller.js.
   ============================================================ */
.acc-dropzone { display: flex; flex-direction: column; gap: var(--acc-space-3); }

.acc-dropzone__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--acc-space-2);
  padding: var(--acc-space-6) var(--acc-space-4);
  background: var(--acc-surface-canvas);
  border: 1px dashed var(--acc-border-default);
  border-radius: var(--acc-radius-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--acc-duration-fast),
              background var(--acc-duration-fast),
              box-shadow var(--acc-duration-fast);
}
.acc-dropzone__zone:hover {
  border-color: var(--acc-border-strong);
  background: var(--acc-surface-sunken);
}
.acc-dropzone__zone:focus-visible {
  outline: none;
  box-shadow: var(--acc-focus-ring);
  border-color: var(--acc-accent);
}
.acc-dropzone--active .acc-dropzone__zone {
  border-color: var(--acc-color-amber-500);
  border-style: solid;
  background: var(--acc-accent-soft);
  box-shadow: 0 0 0 4px rgba(189, 152, 42, 0.10);
}
[data-theme="dark"] .acc-dropzone--active .acc-dropzone__zone {
  border-color: var(--acc-color-amber-d-400);
  box-shadow: 0 0 0 4px rgba(230, 200, 74, 0.18);
}

.acc-dropzone__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--acc-radius-full);
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
  margin-bottom: var(--acc-space-1);
}
.acc-dropzone--active .acc-dropzone__icon {
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
}
[data-theme="dark"] .acc-dropzone--active .acc-dropzone__icon { color: var(--acc-color-amber-d-400); }

.acc-dropzone__label {
  font-size: var(--acc-text-base);
  font-weight: var(--acc-weight-medium);
  color: var(--acc-text-primary);
  margin: 0;
}
.acc-dropzone__hint {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin: 0;
}

.acc-dropzone__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acc-dropzone__item {
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: var(--acc-space-2) var(--acc-space-3);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
}
.acc-dropzone__item-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--acc-radius-sm);
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
  flex-shrink: 0;
}
.acc-dropzone__item-main { min-width: 0; flex: 1; }
.acc-dropzone__item-name {
  font-size: var(--acc-text-sm);
  font-weight: var(--acc-weight-medium);
  color: var(--acc-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-dropzone__item-meta {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-top: 2px;
}
.acc-dropzone__item-remove {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  border-radius: var(--acc-radius-sm);
  color: var(--acc-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-dropzone__item-remove:hover {
  background: var(--acc-status-danger-bg);
  color: var(--acc-status-danger-fg);
}

/* ── Modal ─────────────────────────────────────────────── */
.acc-modal[hidden] { display: none; }
.acc-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
  background: var(--acc-surface-overlay);
  backdrop-filter: blur(4px);
}
.acc-modal__panel {
  width: min(560px, calc(100vw - 32px));
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-xl);
  overflow: hidden;
}
.acc-modal__header { padding: var(--acc-space-5); border-bottom: 1px solid var(--acc-border-subtle); }
.acc-modal__body   { padding: var(--acc-space-5); }
.acc-modal__footer { padding: var(--acc-space-3) var(--acc-space-5); border-top: 1px solid var(--acc-border-subtle); display: flex; justify-content: flex-end; gap: var(--acc-space-2); background: var(--acc-surface-sunken); }

/* ── Command palette overlay ───────────────────────────── */
/* ── Command palette (V1 UniversalSearch parity) ─────────── */
.acc-cmdk[hidden] { display: none; }
.acc-cmdk {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: var(--acc-surface-overlay);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  animation: acc-fade-in var(--acc-duration-fast) var(--acc-ease) both;
}
.acc-cmdk__panel {
  width: min(640px, calc(100vw - 32px));
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: acc-scale-in var(--acc-duration-base) cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: top center;
}

/* Search input row — V1 has it slightly taller than a normal input
   with a leading icon and an "esc" hint chip. */
.acc-cmdk__input-wrap {
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: 0 var(--acc-space-4); height: 56px;
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-cmdk__input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: var(--acc-text-md);
  font-family: var(--acc-font-sans);
  color: var(--acc-text-primary);
  letter-spacing: -0.005em;
}
.acc-cmdk__input::placeholder { color: var(--acc-text-muted); }
.acc-cmdk__hint {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--acc-radius-xs);
  background: var(--acc-surface-sunken);
  color: var(--acc-text-tertiary);
  border: 1px solid var(--acc-border-subtle);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Scrollable results list */
.acc-cmdk__list {
  list-style: none; margin: 0;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: var(--acc-space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--acc-border-default) transparent;
}
.acc-cmdk__list::-webkit-scrollbar { width: 6px; }
.acc-cmdk__list::-webkit-scrollbar-thumb {
  background: var(--acc-border-default);
  border-radius: var(--acc-radius-full);
}

/* Group container */
.acc-cmdk__group {
  list-style: none;
  margin: 0;
  padding-bottom: var(--acc-space-1);
}
.acc-cmdk__group + .acc-cmdk__group {
  margin-top: var(--acc-space-2);
  padding-top: var(--acc-space-1);
  border-top: 1px solid var(--acc-border-subtle);
}
.acc-cmdk__group[hidden] { display: none; }
.acc-cmdk__group-label {
  padding: var(--acc-space-2) var(--acc-space-3) var(--acc-space-1);
  font-size: var(--acc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acc-text-tertiary);
  font-weight: var(--acc-weight-bold);
}
.acc-cmdk__group-list {
  list-style: none; margin: 0; padding: 0;
}
.acc-cmdk__group-list li[hidden] { display: none; }

/* Result row */
.acc-cmdk__item {
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: 8px var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  font-size: var(--acc-text-base);
  color: var(--acc-text-primary);
  text-decoration: none;
  transition: background var(--acc-duration-fast) var(--acc-ease);
}
.acc-cmdk__item:hover { background: var(--acc-surface-sunken); }
.acc-cmdk__item.cmd-active,
li.cmd-active > .acc-cmdk__item {
  background: var(--acc-surface-sunken);
  box-shadow: inset 2px 0 0 0 var(--acc-color-amber-500);
}
[data-theme="dark"] li.cmd-active > .acc-cmdk__item,
[data-theme="dark"] .acc-cmdk__item.cmd-active {
  box-shadow: inset 2px 0 0 0 var(--acc-color-amber-d-400);
}
.acc-cmdk__item-icon {
  width: 16px; height: 16px;
  color: var(--acc-text-tertiary);
  flex-shrink: 0;
}
li.cmd-active > .acc-cmdk__item .acc-cmdk__item-icon,
.acc-cmdk__item.cmd-active .acc-cmdk__item-icon {
  color: var(--acc-color-amber-500);
}
[data-theme="dark"] li.cmd-active > .acc-cmdk__item .acc-cmdk__item-icon {
  color: var(--acc-color-amber-d-400);
}
.acc-cmdk__item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-cmdk__item-meta {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  flex-shrink: 0;
}
.acc-cmdk__item-arrow {
  color: var(--acc-text-muted);
  opacity: 0;
  transition: opacity var(--acc-duration-fast);
  flex-shrink: 0;
}
li.cmd-active > .acc-cmdk__item .acc-cmdk__item-arrow,
.acc-cmdk__item:hover .acc-cmdk__item-arrow {
  opacity: 1;
}

/* Empty state inside the palette */
.acc-cmdk__empty {
  padding: var(--acc-space-8) var(--acc-space-6);
  text-align: center;
  color: var(--acc-text-tertiary);
  font-size: var(--acc-text-base);
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--acc-space-2);
  border-top: 1px solid var(--acc-border-subtle);
}
.acc-cmdk__empty-title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--acc-text-primary);
  margin-top: var(--acc-space-1);
}
.acc-cmdk__empty-body {
  font-size: var(--acc-text-sm);
  color: var(--acc-text-tertiary);
  max-width: 360px;
  line-height: var(--acc-leading-relaxed);
}
.acc-cmdk__empty-body em {
  color: var(--acc-text-secondary);
  font-style: italic;
}

/* Footer keyboard hints — V1 has a thin row at the bottom that
   mirrors shadcn-style command palettes. */
.acc-cmdk__footer {
  display: flex; align-items: center;
  gap: var(--acc-space-4);
  padding: 8px var(--acc-space-4);
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
}
.acc-cmdk__footer-hint {
  display: inline-flex; align-items: center;
  gap: 4px;
}
.acc-cmdk__kbd {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--acc-radius-xs);
  background: var(--acc-surface-canvas);
  color: var(--acc-text-secondary);
  border: 1px solid var(--acc-border-subtle);
  box-shadow: 0 1px 0 0 var(--acc-border-subtle);
  font-weight: var(--acc-weight-semibold);
}

/* ── Flash messages ────────────────────────────────────── */
.acc-flash {
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: 10px var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  border: 1px solid transparent;
  font-size: var(--acc-text-base); font-weight: var(--acc-weight-medium);
}
.acc-flash--success { background: var(--acc-status-success-bg); color: var(--acc-status-success-fg); border-color: var(--acc-status-success-bord); }
.acc-flash--warn    { background: var(--acc-status-warn-bg);    color: var(--acc-status-warn-fg);    border-color: var(--acc-status-warn-bord); }
.acc-flash--danger  { background: var(--acc-status-danger-bg);  color: var(--acc-status-danger-fg);  border-color: var(--acc-status-danger-bord); }
.acc-flash--info    { background: var(--acc-status-info-bg);    color: var(--acc-status-info-fg);    border-color: var(--acc-status-info-bord); }

/* ── Login — V1 dark gradient + glass card ─────────────── */
/* V1's auth screens use a slate-900 → slate-800 → slate-900 gradient
   with a translucent dark card and amber-tinted icon chip. We mirror
   that look here regardless of the active theme — the auth surface
   is intentionally its own visual moment.

   IMPORTANT — `flex: 1; width: 100%` is required because `<body>`
   carries `acc-shell` (display: flex; min-height: 100vh) on every
   page, including unauthenticated/auth-flow ones. Without `flex: 1`,
   .acc-login sits as a flex item sized to its content (~440 px), and
   the V1 dark gradient only paints that strip — the rest of the
   viewport falls back to the body's app surface, which reads as the
   pre-V1 light look. (Same reason for the tenant-chooser branch.)
   The base shell could instead drop `acc-shell` from <body> when
   unauthenticated, but that would touch every login/signup/2FA
   template — keeping the fix local to .acc-login is safer. */
.acc-login {
  flex: 1;
  width: 100%;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--acc-space-6);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: #f1f5f9;
}
.acc-login__card {
  width: min(440px, 100%);
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--acc-radius-xl);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.55);
  padding: var(--acc-space-8);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.acc-login__brand {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--acc-space-3);
  margin-bottom: var(--acc-space-6);
  text-align: center;
}
.acc-login__brand-mark {
  width: 48px; height: 48px;
  border-radius: var(--acc-radius-full);
  background: rgba(245, 204, 77, 0.12);
  display: grid; place-items: center;
  color: var(--acc-color-amber-300);
  border: 1px solid rgba(245, 204, 77, 0.20);
}
.acc-login__brand-mark svg { width: 22px; height: 22px; }
.acc-login__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-2xl);
  font-weight: var(--acc-weight-bold);
  letter-spacing: -0.025em;
  color: #ffffff;
}
.acc-login__subtitle {
  font-size: var(--acc-text-base);
  color: #94a3b8;
  margin-top: 4px;
}
/* Force inputs/labels to read on the dark surface — selectors below
   only match when a field is inside .acc-login. */
.acc-login .acc-label { color: #cbd5e1; }
.acc-login .acc-input,
.acc-login .acc-select,
.acc-login .acc-textarea {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.25);
  color: #ffffff;
  box-shadow: none;
}
.acc-login .acc-input::placeholder { color: #64748b; }
.acc-login .acc-input:focus,
.acc-login .acc-select:focus,
.acc-login .acc-textarea:focus {
  border-color: var(--acc-color-amber-300);
  box-shadow: 0 0 0 3px rgba(245, 204, 77, 0.25);
}
.acc-login .acc-flash { background: rgba(190, 18, 60, 0.18); color: #fda4af; border-color: rgba(244, 63, 94, 0.40); }
.acc-login .acc-field__error { color: #fca5a5; }
.acc-login__footer {
  margin-top: var(--acc-space-6);
  padding-top: var(--acc-space-4);
  border-top: 1px solid rgba(148, 163, 184, 0.20);
  text-align: center;
  color: #94a3b8;
  font-size: var(--acc-text-sm);
}
.acc-login__footer a { color: var(--acc-color-amber-300); font-weight: var(--acc-weight-medium); }
.acc-login__footer a:hover { color: var(--acc-color-amber-200); }

/* Tenant chooser rows (used inside the login glass surface) */
.acc-tenant-row {
  width: 100%;
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: var(--acc-space-3) var(--acc-space-4);
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: var(--acc-radius-md);
  cursor: pointer;
  text-align: left;
  color: #f1f5f9;
  transition: background var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-tenant-row:hover {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(245, 204, 77, 0.40);
}
.acc-tenant-row__avatar {
  width: 40px; height: 40px;
  border-radius: var(--acc-radius-md);
  background: linear-gradient(135deg, var(--acc-color-amber-300), var(--acc-color-amber-500));
  color: #0f172a;
  display: grid; place-items: center;
  font-family: var(--acc-font-display);
  font-weight: var(--acc-weight-bold);
  font-size: var(--acc-text-md);
  flex-shrink: 0;
}
.acc-tenant-row__main { min-width: 0; flex: 1; }
.acc-tenant-row__name { font-weight: var(--acc-weight-semibold); color: #fff; }
.acc-tenant-row__meta { font-size: var(--acc-text-xs); color: #94a3b8; margin-top: 2px; }
.acc-tenant-row__arrow { color: #64748b; flex-shrink: 0; }

/* Page header — V1 in-content header. The new typography/family
   hooks are pulled out here so dashboard, list, and form pages
   share one definition. */
.acc-page-header {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: var(--acc-space-4);
  margin-bottom: var(--acc-space-6);
}
.acc-page-header__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-3xl);
  font-weight: var(--acc-weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--acc-leading-tight);
  color: var(--acc-text-primary);
  margin: 0;
}
.acc-page-header__subtitle {
  font-size: var(--acc-text-base);
  color: var(--acc-text-secondary);
  margin: 4px 0 0;
  max-width: 60ch;
  line-height: var(--acc-leading-relaxed);
}
.acc-page-header__actions { display: flex; align-items: center; gap: var(--acc-space-2); flex-wrap: wrap; }

/* ── Card subtitle (used in card_header) ───────────────── */
.acc-card__subtitle {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-top: 2px;
}

/* ── Form section (form_section macro) ─────────────────── */
.acc-form-section { margin-bottom: var(--acc-space-3); }
.acc-form-section__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--acc-text-primary);
  margin: 0;
}
.acc-form-section__desc {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin: 4px 0 0;
  line-height: 1.55;
}

/* ── Form actions bar (form_actions macro) ─────────────── */
.acc-form-actions {
  display: flex; align-items: center;
  gap: var(--acc-space-3);
  margin-top: var(--acc-space-4);
  padding-top: var(--acc-space-4);
  border-top: 1px solid var(--acc-border-subtle);
}

/* ── Required marker ───────────────────────────────────── */
.acc-label__required {
  color: var(--acc-status-danger-fg);
  font-weight: var(--acc-weight-semibold);
  margin-left: 2px;
}

/* ── Detail field (label + value pair) ─────────────────── */
.acc-detail { display: flex; flex-direction: column; gap: 4px; }
.acc-detail__label {
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.acc-detail__value {
  font-size: var(--acc-text-base);
  font-weight: var(--acc-weight-medium);
  color: var(--acc-text-primary);
  margin: 0;
}

/* ── Breadcrumbs ───────────────────────────────────────── */
.acc-breadcrumbs {
  display: flex; align-items: center; gap: var(--acc-space-2);
  flex-wrap: wrap;
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-bottom: var(--acc-space-2);
}
.acc-breadcrumbs__link {
  color: var(--acc-text-secondary);
  text-decoration: none;
  font-weight: var(--acc-weight-medium);
  transition: color var(--acc-duration-fast);
}
.acc-breadcrumbs__link:hover { color: var(--acc-text-primary); }
.acc-breadcrumbs__sep { color: var(--acc-text-muted); flex-shrink: 0; }
.acc-breadcrumbs__current {
  color: var(--acc-text-primary);
  font-weight: var(--acc-weight-medium);
}

/* ── Search input with leading icon ────────────────────── */
.acc-search { position: relative; }
.acc-search__icon {
  position: absolute;
  left: var(--acc-space-3); top: 50%; transform: translateY(-50%);
  color: var(--acc-text-tertiary);
  pointer-events: none;
}
.acc-search__input { padding-left: 36px; }

/* ── Avatar (acc-avatar) ───────────────────────────────── */
.acc-avatar {
  display: grid; place-items: center;
  border-radius: var(--acc-radius-full);
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
  font-weight: var(--acc-weight-semibold);
  flex-shrink: 0;
}
.acc-avatar--xs { width: 20px; height: 20px; font-size: var(--acc-text-xs); }
.acc-avatar--sm { width: 28px; height: 28px; font-size: var(--acc-text-xs); }
.acc-avatar--md { width: 32px; height: 32px; font-size: var(--acc-text-sm); }
.acc-avatar--lg { width: 40px; height: 40px; font-size: var(--acc-text-base); }

/* ── Skeleton loader ───────────────────────────────────── */
.acc-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--acc-color-slate-100) 25%,
    var(--acc-color-slate-200) 50%,
    var(--acc-color-slate-100) 75%);
  background-size: 200% 100%;
  animation: acc-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--acc-radius-sm);
  height: 12px;
}
.acc-skeleton--circle { width: 36px; height: 36px; border-radius: 50%; }
@keyframes acc-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Icon chip (used in section_header_lg / action_card / insights) ── */
.acc-icon-chip {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-md);
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
  flex-shrink: 0;
}
.acc-icon-chip--success { background: var(--acc-status-success-bg); color: var(--acc-status-success-fg); }
.acc-icon-chip--warn    { background: var(--acc-status-warn-bg);    color: var(--acc-status-warn-fg); }
.acc-icon-chip--danger  { background: var(--acc-status-danger-bg);  color: var(--acc-status-danger-fg); }
.acc-icon-chip--info    { background: var(--acc-status-info-bg);    color: var(--acc-status-info-fg); }
.acc-icon-chip--accent  { background: var(--acc-accent-soft);       color: var(--acc-color-amber-700); }
[data-theme="dark"] .acc-icon-chip--accent { color: var(--acc-color-amber-d-400); }

/* ── Action card (clickable nav card) ──────────────────── */
.acc-action-card {
  display: flex; align-items: flex-start;
  gap: var(--acc-space-3);
  padding: var(--acc-space-4);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--acc-duration-fast), border-color var(--acc-duration-fast), transform var(--acc-duration-fast);
}
.acc-action-card:hover {
  box-shadow: var(--acc-shadow-sm);
  border-color: var(--acc-border-default);
  transform: translateY(-1px);
}

/* ── Inline KV chip (used in entity headers) ───────────── */
.acc-inline-kv {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--acc-text-xs);
}
.acc-inline-kv__label { color: var(--acc-text-tertiary); font-weight: var(--acc-weight-medium); }
.acc-inline-kv__value { color: var(--acc-text-primary);  font-weight: var(--acc-weight-semibold); }

/* ── Generic list (insight, onboarding rows) ──────────── */
.acc-list {
  list-style: none; margin: 0; padding: 0;
}
.acc-list__row {
  display: flex; align-items: flex-start;
  gap: var(--acc-space-3);
  padding: var(--acc-space-3) var(--acc-space-5);
  border-top: 1px solid var(--acc-border-subtle);
  transition: background var(--acc-duration-fast);
}
.acc-list__row:hover { background: color-mix(in srgb, var(--acc-surface-sunken) 50%, transparent); }
.acc-list__row--done { opacity: 0.6; }
.acc-list__row--done .acc-list__title { text-decoration: line-through; color: var(--acc-text-tertiary); }
.acc-list__main { min-width: 0; flex: 1; }
.acc-list__title { font-size: var(--acc-text-base); font-weight: var(--acc-weight-semibold); color: var(--acc-text-primary); line-height: var(--acc-leading-snug); }
.acc-list__body { font-size: var(--acc-text-xs); color: var(--acc-text-tertiary); margin-top: 2px; line-height: var(--acc-leading-relaxed); }
.acc-list__dot {
  width: 10px; height: 10px;
  border-radius: var(--acc-radius-full);
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--acc-text-muted);
}
.acc-list__dot--success { background: var(--acc-color-emerald-500); }
.acc-list__dot--warn    { background: var(--acc-color-amber-500); }
.acc-list__dot--danger  { background: var(--acc-color-rose-500); }
.acc-list__dot--info    { background: var(--acc-color-blue-500); }
.acc-list__dot--pulse {
  position: relative;
}
.acc-list__dot--pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; background: inherit;
  animation: acc-ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
  opacity: 0.45;
}
@keyframes acc-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── Progress bar ──────────────────────────────────────── */
.acc-progress {
  height: 4px;
  background: var(--acc-surface-sunken);
  border-top: 1px solid var(--acc-border-subtle);
  border-bottom: 1px solid var(--acc-border-subtle);
  overflow: hidden;
}
.acc-progress__fill {
  height: 100%;
  background: linear-gradient(to right, var(--acc-color-emerald-500), var(--acc-color-emerald-600));
  transition: width var(--acc-duration-slow) var(--acc-ease);
}

/* ── Check circle (onboarding) ─────────────────────────── */
.acc-check {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--acc-radius-full);
  border: 2px solid var(--acc-border-default);
  background: var(--acc-surface-canvas);
  color: var(--acc-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.acc-check--done {
  border-color: var(--acc-color-emerald-500);
  background: var(--acc-color-emerald-500);
  color: #fff;
}

/* ── Relationship chain ────────────────────────────────── */
.acc-chain {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--acc-space-4);
  font-size: var(--acc-text-xs);
}
.acc-chain__step {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--acc-space-2);
  border-radius: var(--acc-radius-md);
  font-weight: var(--acc-weight-medium);
  color: var(--acc-text-secondary);
  text-decoration: none;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-chain__step:hover { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }
.acc-chain__step--current {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
  font-weight: var(--acc-weight-semibold);
}
.acc-chain__step--muted { color: var(--acc-text-muted); }
.acc-chain__sep { color: var(--acc-text-muted); flex-shrink: 0; }

/* ── Trend indicator ──────────────────────────────────── */
.acc-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-semibold);
}
.acc-trend--up   { color: var(--acc-status-success-fg); }
.acc-trend--down { color: var(--acc-status-danger-fg); }
.acc-trend--flat { color: var(--acc-text-tertiary); }
.acc-trend__suffix { color: var(--acc-text-muted); font-weight: var(--acc-weight-medium); margin-left: 2px; }

/* ── Stat note (used by stat_card 'note' line) ────────── */
.acc-stat__note { font-size: var(--acc-text-xs); color: var(--acc-text-tertiary); margin-top: 2px; }

/* ── Active stat tile (workflow filter) ───────────────── */
.acc-stat--active { border-color: var(--acc-action); box-shadow: 0 0 0 1px var(--acc-action); }

/* ============================================================
   Micro-interactions — V1 parity. Subtle entrance and feedback
   animations. Honors prefers-reduced-motion.
   ============================================================ */

@keyframes acc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes acc-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes acc-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes acc-slide-in-right {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes acc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.acc-fade-in       { animation: acc-fade-in    var(--acc-duration-slow) var(--acc-ease) both; }
.acc-fade-in-up    { animation: acc-fade-in-up var(--acc-duration-slow) cubic-bezier(0.16,1,0.3,1) both; }
.acc-scale-in      { animation: acc-scale-in   var(--acc-duration-base) cubic-bezier(0.16,1,0.3,1) both; }
.acc-slide-in      { animation: acc-slide-in-right var(--acc-duration-slow) cubic-bezier(0.16,1,0.3,1) both; }

/* Stagger helper — set on a parent; children animate with cascading delay. */
.acc-stagger > *               { animation: acc-fade-in-up var(--acc-duration-slow) cubic-bezier(0.16,1,0.3,1) both; }
.acc-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.acc-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.acc-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.acc-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.acc-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.acc-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.acc-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.acc-stagger > *:nth-child(8)  { animation-delay: 280ms; }

/* Button press feedback — scale to 98% on active. V1 has this on every button. */
.acc-btn:not(:disabled):active { transform: scale(0.98); }

/* Card hover lift for clickable cards. */
.acc-card.acc-card--interactive,
.acc-action-card,
a.acc-stat,
a.acc-card {
  transition: box-shadow var(--acc-duration-base) var(--acc-ease),
              transform var(--acc-duration-base) var(--acc-ease),
              border-color var(--acc-duration-base) var(--acc-ease);
}
.acc-card.acc-card--interactive:hover,
.acc-action-card:hover,
a.acc-stat:hover,
a.acc-card:hover {
  box-shadow: var(--acc-shadow-md);
  border-color: var(--acc-border-default);
  transform: translateY(-1px);
}

/* Link underline animation — subtle, V1-style. */
.acc-link-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--acc-duration-base) var(--acc-ease);
}
.acc-link-underline:hover { background-size: 100% 1px; }

/* Stat card — subtle entry */
.acc-stat { animation: acc-fade-in-up var(--acc-duration-slow) cubic-bezier(0.16,1,0.3,1) both; }

/* Flash messages slide in */
.acc-flash { animation: acc-slide-in-right var(--acc-duration-base) var(--acc-ease) both; }

/* Modal scale-in */
.acc-modal__panel { animation: acc-scale-in var(--acc-duration-base) cubic-bezier(0.16,1,0.3,1) both; }

/* Quick-create / user-menu dropdowns scale-in */
.acc-quick-create__menu, .acc-user-menu__panel { animation: acc-scale-in var(--acc-duration-fast) var(--acc-ease) both; transform-origin: top right; }

/* Reduce motion respects user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Record count footer ──────────────────────────────── */
.acc-record-count {
  margin-top: var(--acc-space-3);
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
}

/* ── Dashboard 2/1 grid ───────────────────────────────── */
.acc-dashboard-grid {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 1100px) {
  .acc-dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Quick action rows (dashboard sidebar card) ─────── */
.acc-quick-action {
  display: flex; align-items: center;
  gap: var(--acc-space-3);
  padding: var(--acc-space-2) var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  text-decoration: none; color: inherit;
  transition: background var(--acc-duration-fast);
}
.acc-quick-action:hover { background: var(--acc-surface-sunken); }
.acc-quick-action svg:last-child { color: var(--acc-text-tertiary); flex-shrink: 0; }

/* ── Platform admin theme (control plane) ─────────────────
   Distinguishes the cross-tenant superuser interface from the
   regular customer app. Uses a dark sidebar with a violet accent
   instead of amber so platform admins always know which mode
   they're in, but every other surface stays on the standard
   acc-* tokens. Activate by adding `class="acc-shell--platform"`
   to the body alongside `acc-shell`. */
.acc-shell--platform {
  --acc-surface-shell: #1e1b4b;
  --acc-surface-shell-hover: #312e81;
  --acc-surface-shell-active: #3730a3;
  --acc-text-on-shell: rgba(199, 210, 254, 0.85);
  --acc-text-on-shell-strong: #ffffff;
  --acc-text-on-shell-muted: rgba(165, 180, 252, 0.65);
  --acc-border-shell: rgba(255, 255, 255, 0.06);
  --acc-action: #4f46e5;
  --acc-action-hover: #6366f1;
  --acc-action-on: #ffffff;
}
.acc-shell--platform .acc-sidebar__brand-mark {
  background: linear-gradient(135deg, #818cf8, #4f46e5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 4px 10px -2px rgba(79,70,229,0.4);
}
.acc-shell--platform .acc-sidebar__link--active::before {
  background: linear-gradient(180deg, #a5b4fc, #6366f1);
}
.acc-shell--platform .acc-sidebar__link--active .acc-sidebar__link-icon { color: #a5b4fc; }
.acc-shell--platform .acc-sidebar__user-avatar {
  background: rgba(165, 180, 252, 0.12);
  color: #a5b4fc;
}
.acc-shell--platform__badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--acc-radius-full);
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.005em;
}

/* ── Notifications dropdown (topbar bell) ─────────────── */
.acc-notifications { position: relative; }
.acc-notifications__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  z-index: 50;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-lg);
  overflow: hidden;
  transform-origin: top right;
  animation: acc-scale-in var(--acc-duration-fast) var(--acc-ease) both;
}
.acc-notifications__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--acc-space-3) var(--acc-space-4);
  border-bottom: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}
.acc-notifications__body { padding: var(--acc-space-3) var(--acc-space-4); }
.acc-notifications__count {
  display: flex; align-items: center; gap: var(--acc-space-3);
}
.acc-notifications__count-value {
  font-size: var(--acc-text-md);
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
}
.acc-notifications__count-meta {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-top: 2px;
}
.acc-notifications__footer {
  padding: 6px;
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}

/* ── Active-project pill (topbar breadcrumb context) ─── */
.acc-topbar__crumbs {
  display: flex; align-items: center;
  gap: var(--acc-space-2);
  flex-wrap: wrap;
  margin-bottom: 2px;
  min-height: 0;
}
.acc-topbar__active-project {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 8px;
  border-radius: var(--acc-radius-md);
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
  border: 1px solid var(--acc-color-amber-200);
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-medium);
  letter-spacing: -0.005em;
}
[data-theme="dark"] .acc-topbar__active-project {
  color: var(--acc-color-amber-d-400);
  border-color: rgba(230, 200, 74, 0.30);
}
.acc-topbar__active-project svg { flex-shrink: 0; opacity: 0.85; }
.acc-topbar__active-project-clear {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: var(--acc-radius-sm);
  background: transparent; border: 0;
  color: inherit; cursor: pointer;
  opacity: 0.7;
  transition: background var(--acc-duration-fast), opacity var(--acc-duration-fast);
}
.acc-topbar__active-project-clear:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .acc-topbar__active-project-clear:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* ── User menu (topbar avatar dropdown) ───────────────── */
.acc-user-menu { position: relative; }
.acc-user-menu__trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 4px var(--acc-space-2) 4px 4px;
  border-radius: var(--acc-radius-full);
  background: transparent; border: 1px solid transparent;
  cursor: pointer;
  color: var(--acc-text-secondary);
  transition: background var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-user-menu__trigger:hover { background: var(--acc-surface-sunken); border-color: var(--acc-border-subtle); }
.acc-user-menu__avatar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-full);
  background: linear-gradient(135deg, var(--acc-color-amber-300), var(--acc-color-amber-500));
  color: #fff;
  font-family: var(--acc-font-display);
  font-weight: var(--acc-weight-bold);
  font-size: var(--acc-text-xs);
  flex-shrink: 0;
}
.acc-user-menu__avatar--lg { width: 40px; height: 40px; font-size: var(--acc-text-base); }
.acc-user-menu__caret { color: var(--acc-text-tertiary); flex-shrink: 0; }
.acc-user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 280px; z-index: 50;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-lg);
  overflow: hidden;
}
.acc-user-menu__head {
  display: flex; align-items: center; gap: var(--acc-space-3);
  padding: var(--acc-space-3) var(--acc-space-4);
  border-bottom: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}
.acc-user-menu__name {
  font-size: var(--acc-text-sm); font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-user-menu__tenant {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-top: 2px;
}
.acc-user-menu__list { padding: 6px; }
.acc-user-menu__item {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 8px var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-secondary);
  font-size: var(--acc-text-sm);
  font-weight: var(--acc-weight-medium);
  text-decoration: none;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-user-menu__item:hover { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }
.acc-user-menu__item svg { flex-shrink: 0; color: var(--acc-text-tertiary); }
.acc-user-menu__item--danger { color: var(--acc-status-danger-fg); }
.acc-user-menu__item--danger:hover { background: var(--acc-status-danger-bg); color: var(--acc-status-danger-fg); }
.acc-user-menu__item--danger svg { color: var(--acc-status-danger-fg); }
.acc-user-menu__footer {
  padding: 6px;
  border-top: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}

/* ── Quick Create dropdown ─────────────────────────────── */
.acc-quick-create { position: relative; }
.acc-quick-create__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 280px; z-index: 50;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-xl);
  box-shadow: var(--acc-shadow-lg);
  overflow: hidden;
}
.acc-quick-create__head {
  padding: 8px var(--acc-space-4);
  border-bottom: 1px solid var(--acc-border-subtle);
  background: var(--acc-surface-sunken);
}
.acc-quick-create__list {
  list-style: none; margin: 0; padding: 6px;
}
.acc-quick-create__item {
  display: flex; align-items: flex-start; gap: var(--acc-space-3);
  padding: 8px var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--acc-duration-fast);
}
.acc-quick-create__item:hover { background: var(--acc-surface-sunken); }
.acc-quick-create__label {
  font-size: var(--acc-text-sm);
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
  line-height: 1.3;
}
.acc-quick-create__desc {
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  margin-top: 2px;
}