/*
  Allura admin UI enhancements — injected via middleware.ts.
  Tokens are set per colour-scheme so every rule automatically
  adapts to the user's OS / browser dark-mode preference.
*/

/* ── Widen the content area so cards have more breathing room ────── */
main > div {
  max-width: calc(100% - 2rem) !important;
  width: 100% !important;
}

/* ── 2-column card grid — applied to the confirmed container class ─ */
/*
  Use a data attribute set by admin-enhancements.js as the hook so
  the !important only fires on our marked container, not everything.
*/
[data-allura-grid] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

[data-allura-grid] > * {
  flex: 0 0 calc(50% - 0.625rem) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── Light mode tokens ─────────────────────────────────────────── */
:root {
  --card-radius:      12px;
  --card-gap:         1.25rem;
  --label-color:      #64748b;
  --divider:          #f1f5f9;
  --select-bg:        #f8fafc;
  --toolbar-bg:       rgba(255,255,255,.85);
  --accent:           #2563eb;
}

/* ── Dark mode tokens ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --label-color:      #94a3b8;
    --divider:          #2d3748;
    --select-bg:        #252d3d;
    --toolbar-bg:       rgba(18,24,38,.85);
    --accent:           #3b82f6;
  }
}


/* ── Conditional discriminant select ──────────────────────────── */
select {
  background-color: var(--select-bg) !important;
  border-radius: 8px !important;
}

select:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
}

/* ── Toolbar (Save / Reset bar) ────────────────────────────────── */
[data-keystatic-toolbar],
[role="toolbar"] {
  background:      var(--toolbar-bg) !important;
  backdrop-filter: blur(8px);
  border-top:      1px solid var(--card-border);
}

/* ── Focus ring ────────────────────────────────────────────────── */
*:focus-visible {
  outline:        2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius:  4px;
}