/*
 * elfrique.components.admin.css — Admin-surface primitives
 * Mandate: M04 · C3 Admin Surface
 *
 * Scope:
 *   - SavedViewsBar (W3.v2.1).
 *   - BulkActions (W3.v2.2): row selection checkbox + floating action bar
 *     + confirm drawer body/footer styles.
 *   - InlineEdit (W3.v2.3): in-cell editor styles for editable DataTable
 *     cells (select / input / toggle editor variants).
 *
 * Admin-only UI components specific to resource-list surfaces land here
 * so the generic kit files (layout / data / overlay) stay role-neutral.
 *
 * Siblings: elfrique.components.layout.css · elfrique.components.data.css
 *           · elfrique.components.overlay.css
 *
 * All styles in this file MUST consume tokens from elfrique.css via var(--token).
 * No raw hex. No raw ms. No Bootstrap class names.
 *
 * Caps: ≤ 1,000 lines hard / ≤ 800 lines soft. Aggregate (4 files) ≤ 4,000.
 */

/* ==========================================================================
   RESOURCE-LIST SHELL
   ========================================================================== */

.resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ==========================================================================
   SAVED-VIEWS BAR  (M04 · W3.v2.1)
   Horizontal strip of named filter+sort presets rendered between StatStrip
   (if present) and FilterBar in _ResourceList.cshtml. Each saved view
   renders as a role="group" wrapper with two sibling buttons (apply + delete)
   — no nested interactives (WHATWG / WCAG). An inline save-form on the same
   bar captures the view name.
   Source: Views/Shared/Kit/_ResourceList.cshtml (saved-views-bar section).
   JS:    wwwroot/js/admin/saved-views.js (solhigson.admin.savedViews).
   ========================================================================== */

.saved-views-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--n-200);
  margin-bottom: var(--sp-3);
}

/* ── Pill (apply + delete as sibling buttons, grouped) ─────────────────── */

.saved-views-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--n-300); border-radius: var(--r-2);
  background-color: var(--n-0);
  overflow: hidden;
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift);
}

.saved-views-pill:hover {
  border-color: var(--brand-ink);
}

.saved-views-pill--active {
  background-color: color-mix(in srgb, var(--brand-ink) 10%, transparent);
  border-color: var(--brand-ink);
}

/* Apply button — the name face */
.saved-views-pill__apply {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 2.75rem; /* 44px @ base 16 */
  min-width: 2.75rem;
  padding: 0 var(--sp-3);
  border: 0;
  background-color: transparent;
  color: var(--brand-ink);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.saved-views-pill__apply:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 6%, transparent);
}

.saved-views-pill__apply:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: -3px;
}

.saved-views-pill--active .saved-views-pill__apply {
  font-weight: 600;
}

.saved-views-pill__name {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Delete button — separate sibling, 44×44 */
.saved-views-pill__delete {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 2.75rem; /* 44×44 */
  padding: 0 var(--sp-2);
  border: 0;
  border-left: 1px solid var(--n-200);
  background-color: transparent;
  color: var(--n-500);
  font-size: var(--fs-2);
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.saved-views-pill__delete:hover {
  background-color: color-mix(in srgb, var(--state-danger) 10%, transparent);
  color: var(--state-danger);
}

.saved-views-pill__delete:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: -3px;
}

/* ── Save group: "+ Save view" button + inline form ────────────────────── */

.saved-views-bar__save-group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}

.saved-views-bar__save-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 2.75rem; /* 44px */
  padding: 0 var(--sp-3);
  border: 1px dashed var(--n-300); border-radius: var(--r-2);
  background-color: transparent;
  color: var(--n-600); font-family: var(--font-sans); font-size: var(--fs-2);
  cursor: pointer;
  transition: border-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.saved-views-bar__save-btn:hover {
  border-color: var(--brand-ink); color: var(--brand-ink);
}

.saved-views-bar__save-btn:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

.saved-views-bar__save-group.is-open .saved-views-bar__save-btn {
  display: none; /* hide trigger once the form is visible */
}

.saved-views-bar__save-form {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
}

.saved-views-bar__save-label {
  font-family: var(--font-sans); font-size: var(--fs-1); color: var(--n-600);
  /* Visually hidden (label served by placeholder) but available to AT. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.saved-views-bar__save-input {
  min-height: 2.75rem; /* 44px */
  min-width: 16rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--n-300); border-radius: var(--r-2);
  background-color: var(--n-0);
  color: var(--brand-ink);
  font-family: var(--font-sans); font-size: var(--fs-2);
  transition: border-color var(--d-1) var(--ease-out-swift);
}

.saved-views-bar__save-input:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
  border-color: var(--brand-ink);
}

.saved-views-bar__save-confirm,
.saved-views-bar__save-cancel {
  min-height: 2.75rem; /* 44px */
  min-width: 4rem;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift);
}

.saved-views-bar__save-confirm {
  border: 1px solid var(--brand-ink);
  background-color: var(--brand-ink);
  color: var(--n-0);
}

.saved-views-bar__save-confirm:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 85%, transparent);
}

.saved-views-bar__save-cancel {
  border: 1px solid var(--n-300);
  background-color: transparent;
  color: var(--n-600);
}

.saved-views-bar__save-cancel:hover {
  border-color: var(--brand-ink); color: var(--brand-ink);
}

.saved-views-bar__save-confirm:focus-visible,
.saved-views-bar__save-cancel:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

/* Empty-state copy — soft placeholder when user has no saved views yet */
.saved-views-bar__empty {
  font-family: var(--font-sans); font-size: var(--fs-2); color: var(--n-500);
  font-style: italic;
}

/* Hard rule #10 — reduced-motion fallback for every animated element */
@media (prefers-reduced-motion: reduce) {
  .saved-views-pill,
  .saved-views-pill__apply,
  .saved-views-pill__delete,
  .saved-views-bar__save-btn,
  .saved-views-bar__save-input,
  .saved-views-bar__save-confirm,
  .saved-views-bar__save-cancel { transition: none; }
}

/* ==========================================================================
   BULK ACTIONS  (M04 · W3.v2.2)
   Row-selection checkbox column (sticky left) + floating action bar that
   activates when ≥1 row is selected, + confirm drawer body/footer styles
   used by the stand-alone confirm drawer (NOT modal-inside-modal).
   Source: Views/Shared/Kit/_ResourceList.cshtml (bulk-bar + confirm drawer).
   JS:     wwwroot/js/admin/bulk-actions.js (solhigson.admin.bulkActions).
   ========================================================================== */

/* ── Row selection checkbox cell ──────────────────────────────────────── */

/* Anchor label: the entire cell is a click target large enough to satisfy
   44×44 (hard rule #8) without breaking the table layout. The label wraps
   a hidden-native checkbox + a custom box. */
.bulk-select {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 2.75rem; /* 44×44 */
  padding: var(--sp-1);
  cursor: pointer;
  user-select: none;
}

/* Native input is visually hidden but stays focusable for keyboard users
   — focus state is forwarded to the custom box via :focus-visible + ~ . */
.bulk-select__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.bulk-select__box {
  display: inline-block;
  width: 1.125rem; height: 1.125rem; /* 18×18 visual box */
  border: 1.5px solid var(--n-400);
  border-radius: var(--r-1);
  background-color: var(--n-0);
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift);
  position: relative;
}

.bulk-select__input:checked ~ .bulk-select__box {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
}

/* Check glyph drawn in CSS so we don't need an extra span.
   --n-0 stroke on --brand-ink fill, high-contrast. */
.bulk-select__input:checked ~ .bulk-select__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 45%, var(--n-0) 45%, var(--n-0) 55%, transparent 55%),
                    linear-gradient(-45deg, transparent 45%, var(--n-0) 45%, var(--n-0) 55%, transparent 55%);
  background-size: 60% 60%, 60% 60%;
  background-position: 30% 60%, 60% 60%;
  background-repeat: no-repeat;
  /* Simple tick via two stacked gradient strokes forming a checkmark. */
}

.bulk-select__input:focus-visible ~ .bulk-select__box {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

.bulk-select__input:disabled ~ .bulk-select__box {
  background-color: var(--n-100);
  border-color: var(--n-300);
  cursor: not-allowed;
}

/* Selected row visual emphasis — softest tint so it doesn't fight StatusPill. */
.data-table__row.is-selected {
  background-color: color-mix(in srgb, var(--brand-ink) 4%, transparent);
}

.data-table__row.is-selected:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 8%, transparent);
}

/* ── Floating action bar ──────────────────────────────────────────────── */

.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%) translateY(calc(var(--sp-5) + 1rem));
  opacity: 0;
  z-index: 950; /* below drawer backdrop (1000) so confirm opens cleanly above */
  pointer-events: none;
  transition: transform var(--d-2) var(--ease-out-swift),
              opacity var(--d-2) var(--ease-out-swift);
}

.bulk-bar--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bulk-bar__panel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--brand-ink);
  color: var(--n-0);
  border-radius: var(--r-3);
  box-shadow: 0 10px 30px -5px color-mix(in srgb, var(--n-900) 35%, transparent),
              0 4px 10px -2px color-mix(in srgb, var(--n-900) 20%, transparent);
  max-width: min(calc(100vw - var(--sp-5) * 2), 60rem);
  flex-wrap: wrap;
}

.bulk-bar__count {
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  padding: 0 var(--sp-2);
  font-family: var(--font-sans); font-size: var(--fs-2);
  color: var(--n-0);
}

.bulk-bar__count-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-3);
}

.bulk-bar__count-label {
  color: color-mix(in srgb, var(--n-0) 70%, transparent);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bulk-bar__clear {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; /* 44px */
  min-width: 2.75rem;
  padding: 0 var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--n-0) 30%, transparent);
  border-radius: var(--r-2);
  background-color: transparent;
  color: var(--n-0);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift);
}

.bulk-bar__clear:hover {
  background-color: color-mix(in srgb, var(--n-0) 10%, transparent);
  border-color: color-mix(in srgb, var(--n-0) 50%, transparent);
}

.bulk-bar__clear:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

.bulk-bar__actions {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}

.bulk-bar__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; /* 44px */
  min-width: 2.75rem;
  padding: 0 var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--n-0) 30%, transparent);
  border-radius: var(--r-2);
  background-color: transparent;
  color: var(--n-0);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.bulk-bar__action:hover {
  background-color: color-mix(in srgb, var(--n-0) 12%, transparent);
  border-color: color-mix(in srgb, var(--n-0) 60%, transparent);
}

.bulk-bar__action:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

.bulk-bar__action--primary {
  background-color: var(--brand-spark);
  border-color: var(--brand-spark);
  color: var(--brand-on-spark);
}

.bulk-bar__action--primary:hover {
  background-color: color-mix(in srgb, var(--brand-spark) 85%, var(--n-0));
}

.bulk-bar__action--danger {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--state-danger) 80%, var(--n-0));
  color: color-mix(in srgb, var(--state-danger) 80%, var(--n-0));
}

.bulk-bar__action--danger:hover {
  background-color: color-mix(in srgb, var(--state-danger) 15%, transparent);
  border-color: var(--state-danger);
  color: var(--n-0);
}

/* ── Confirm drawer body + footer ─────────────────────────────────────── */

.bulk-confirm {
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-family: var(--font-sans);
  color: var(--brand-ink);
}

.bulk-confirm__message {
  font-size: var(--fs-3);
  line-height: 1.4;
  margin: 0;
}

.bulk-confirm__detail {
  font-size: var(--fs-2);
  color: var(--n-600);
  margin: 0;
}

.bulk-confirm__footer {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2);
}

.bulk-confirm__cancel,
.bulk-confirm__apply {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; /* 44px */
  min-width: 5.5rem;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.bulk-confirm__cancel {
  border: 1px solid var(--n-300);
  background-color: transparent;
  color: var(--n-700);
}

.bulk-confirm__cancel:hover {
  border-color: var(--brand-ink); color: var(--brand-ink);
}

.bulk-confirm__apply {
  border: 1px solid var(--brand-ink);
  background-color: var(--brand-ink);
  color: var(--n-0);
}

.bulk-confirm__apply:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 85%, transparent);
}

.bulk-confirm__apply--danger {
  border: 1px solid var(--state-danger);
  background-color: var(--state-danger);
  color: var(--n-0);
}

.bulk-confirm__apply--danger:hover {
  background-color: color-mix(in srgb, var(--state-danger) 85%, transparent);
}

.bulk-confirm__apply--primary {
  border: 1px solid var(--brand-spark);
  background-color: var(--brand-spark);
  color: var(--brand-on-spark);
}

.bulk-confirm__apply--primary:hover {
  background-color: color-mix(in srgb, var(--brand-spark) 85%, var(--n-0));
}

.bulk-confirm__cancel:focus-visible,
.bulk-confirm__apply:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

/* Hard rule #10 — reduced-motion fallback for every animated element */
@media (prefers-reduced-motion: reduce) {
  .bulk-select__box,
  .bulk-bar,
  .bulk-bar__clear,
  .bulk-bar__action,
  .bulk-confirm__cancel,
  .bulk-confirm__apply { transition: none; }

  .bulk-bar,
  .bulk-bar--visible {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   INLINE EDIT  (M04 · W3.v2.3)
   In-cell editors for DataTable cells opted in via
   ColumnDefinition.IsEditable=true. Double-click swaps the cell display
   for one of three editor shapes (select / input / toggle). Escape
   cancels; Enter commits; server error rolls back with a toast.
   Source: Views/Shared/Kit/_ResourceList.cshtml (inline-edit wrapper).
   JS:    wwwroot/js/admin/inline-edit.js (solhigson.admin.inlineEdit).
   ========================================================================== */

/* Wrapper — sits inside a DataTable cell and holds both the display and
   the editor. Inline-block so it sits naturally next to other cell content
   (e.g. status-pill). The 'is-editing' modifier swaps the visual affordance. */
.inline-edit {
  display: inline-block;
  position: relative;
  /* Indicate editability — subtle underline on hover, cursor on hover.
     Avoid a persistent border so the cell visual doesn't change pre-edit. */
  cursor: text;
  border-radius: var(--r-1);
  transition: background-color var(--d-1) var(--ease-out-swift);
}

.inline-edit:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 4%, transparent);
  /* Dashed underline hint — purely decorative affordance signalling that
     the cell is double-clickable. Low-contrast so it doesn't compete with
     the cell's primary content. */
  box-shadow: inset 0 -1px 0 var(--n-300);
}

/* Remove hover hint when already editing to avoid double-signal. */
.inline-edit.is-editing:hover {
  background-color: transparent;
  box-shadow: none;
}

.inline-edit__display {
  display: inline-block;
}

/* Editor — the common shape. Each variant overrides sizing/layout below. */
.inline-edit__editor {
  display: inline-block;
  min-height: 2.25rem;            /* tokenised via padding — text remains 44×44 via cell padding */
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  color: var(--n-900);
  background-color: var(--n-0);
  border: 1px solid var(--brand-ink);
  border-radius: var(--r-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-info) 20%, transparent);
  transition: border-color var(--d-1) var(--ease-out-swift),
              box-shadow var(--d-1) var(--ease-out-swift);
}

.inline-edit__editor:focus-visible {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-info) 40%, transparent);
}

/* Select editor — keep native chevron; avoid appearance:none so keyboard
   + screen-reader behaviour matches users' expectations. */
.inline-edit__editor--select {
  min-width: 7rem;
  padding-inline-end: var(--sp-3);
}

/* Input (text) editor — sized to the containing cell. */
.inline-edit__editor--input {
  min-width: 8rem;
}

/* Toggle editor — a native checkbox with 44×44 hit area via padding. */
.inline-edit__editor--toggle {
  appearance: auto;
  width: 1.25rem;
  height: 1.25rem;
  /* Expand hit area to 44×44 via pseudo-element overlay — native size
     stays accessible to assistive tech. */
  position: relative;
}

.inline-edit__editor--toggle::after {
  content: "";
  position: absolute;
  inset: -0.6875rem;   /* (44px - 20px) / 2 ≈ 0.6875rem when 1rem=16px */
  border-radius: var(--r-2);
}

/* Hard rule #10 — motion-reduction fallback. */
@media (prefers-reduced-motion: reduce) {
  .inline-edit,
  .inline-edit__editor {
    transition: none;
  }
}

/* ==========================================================================
   CMDK CONFIRM DRAWER  (M04 · W3.v2.4)
   Body + footer styles for the confirm drawer opened when a CmdK action
   entry carries RequiresConfirm=true. The palette closes BEFORE this
   drawer opens (cmdk.js) so it is NEVER a modal-inside-modal (hard rule #6).
   Shape and tokens intentionally mirror the bulk-confirm block above so
   visual language is consistent across action-confirm surfaces.
   Source: body/footer HTML emitted inline from Views/Shared/_Layout.cshtml
   (single instance rendered per layout for admin users).
   Script: wwwroot/js/kit/cmdk.js (confirm-flow helpers).
   ========================================================================== */

.cmdk-confirm {
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-family: var(--font-sans);
  color: var(--brand-ink);
}

.cmdk-confirm__title {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--n-700);
  margin: 0;
}

.cmdk-confirm__title:empty { display: none; }

.cmdk-confirm__message {
  font-size: var(--fs-3);
  line-height: 1.4;
  margin: 0;
}

.cmdk-confirm__footer {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2);
}

.cmdk-confirm__cancel,
.cmdk-confirm__apply {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; /* 44px — hard rule #8 */
  min-width: 5.5rem;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out-swift),
              border-color var(--d-1) var(--ease-out-swift),
              color var(--d-1) var(--ease-out-swift);
}

.cmdk-confirm__cancel {
  border: 1px solid var(--n-300);
  background-color: transparent;
  color: var(--n-700);
}

.cmdk-confirm__cancel:hover {
  border-color: var(--brand-ink); color: var(--brand-ink);
}

.cmdk-confirm__apply--default {
  border: 1px solid var(--brand-ink);
  background-color: var(--brand-ink);
  color: var(--n-0);
}

.cmdk-confirm__apply--default:hover {
  background-color: color-mix(in srgb, var(--brand-ink) 85%, transparent);
}

.cmdk-confirm__apply--primary {
  border: 1px solid var(--brand-spark);
  background-color: var(--brand-spark);
  color: var(--brand-on-spark);
}

.cmdk-confirm__apply--primary:hover {
  background-color: color-mix(in srgb, var(--brand-spark) 85%, var(--n-0));
}

.cmdk-confirm__apply--danger {
  border: 1px solid var(--state-danger);
  background-color: var(--state-danger);
  color: var(--n-0);
}

.cmdk-confirm__apply--danger:hover {
  background-color: color-mix(in srgb, var(--state-danger) 85%, transparent);
}

.cmdk-confirm__cancel:focus-visible,
.cmdk-confirm__apply:focus-visible {
  outline: 3px solid var(--state-info);
  outline-offset: 2px;
}

/* Hard rule #10 — reduced-motion fallback. */
@media (prefers-reduced-motion: reduce) {
  .cmdk-confirm__cancel,
  .cmdk-confirm__apply { transition: none; }
}

/* ==========================================================================
   APPLICATION-LOG DETAIL  (M27 Phase 3 / D3 wrapper-cleanup)
   The M22 Phase 4 commit 11dad31d shipped semantic-HTML BEM hooks on the
   ApplicationLogDetailInfo partial (.log-detail-section__heading / __body /
   __meta / __fields / __stack) without companion CSS — the partial relies
   on browser semantic defaults for <section>/<h3>/<dl>/<dt>/<dd>/<pre>.
   M27 Phase 3 absorbs the wrapper-view sibling that M22 missed: the
   ChainId summary block at the top of ApplicationLogDetails.cshtml, which
   carried an inline style="font-weight: bold; margin-bottom: 10px;" until
   M27 swapped it for the .log-detail-section__chain class below (HR4).
   Source: Views/Admin/ApplicationLogDetails.cshtml (chain summary block).
   ========================================================================== */

.log-detail-section__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}

.log-detail-section__chain-label {
  color: var(--n-700);
}

.log-detail-section__chain-value {
  color: var(--n-900);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
}