/* ============================================================
   NuDay modern chrome (Deep Governance) — shared component
   language, loaded LAST on every page so it wins the cascade.
   Colors come from tokens (styles.css); this file owns SHAPE,
   SPACING, DENSITY, and MOTION. Part of the brand modernization.
   ============================================================ */

:root {
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  height: 36px;
  border-radius: var(--radius-control);
  font-weight: 600;
  letter-spacing: .1px;
  gap: 7px;
  padding: 0 14px;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--hover-bg); border-color: var(--hover-border); }
.btn:active { transform: translateY(.5px) scale(.99); }
.btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Primary = SOLID action (amaranth). No gradient (3-token model). */
.btn.primary,
.btn.btn-primary {
  background: var(--action);
  border-color: transparent;
  color: #fff;
}
.btn.primary:hover,
.btn.btn-primary:hover {
  background: var(--accent-hover);
  border-color: transparent;
  filter: none;
}
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--hover-bg); color: var(--text); }
.btn.danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger); background: transparent;
}
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); }
.btn.icon { width: 36px; padding: 0; }
.btn.sm { height: 30px; font-size: var(--font-size-sm); padding: 0 11px; }

/* ── Inputs / selects / search ─────────────────────────── */
.search-input, .filter-select, .filter-input,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  border-radius: var(--radius-control);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-input:focus, .filter-select:focus, .filter-input:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.av-search-bar {
  border-radius: var(--radius-control);
  gap: 8px;
}
.search-input-wrapper { border-radius: var(--radius-control); }

/* ── Cards ─────────────────────────────────────────────── */
.av-grid-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.av-grid-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* ── Pills / badges / chips ────────────────────────────── */
.av-chip,
[class$="-badge"], [class*="-badge "],
.guardrail-category-badge, .guardrail-status-badge, .guardrail-severity-badge,
.guardrail-tenant-badge, .guardrail-applies-badge, .tag, .chip {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ── Tables (dense list surfaces) ──────────────────────── */
table.av-table, .data-table { border-collapse: separate; border-spacing: 0; }
.av-table thead th, .data-table thead th {
  font-size: var(--font-size-2xs); letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.av-table tbody tr, .data-table tbody tr { transition: background .12s var(--ease); }
.av-table tbody tr:hover, .data-table tbody tr:hover { background: var(--row-hover); }

/* ── Modals ────────────────────────────────────────────── */
.modal-overlay { backdrop-filter: blur(2px); }
.modal {
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-overlay);
}
.modal-header { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.modal-footer { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* ── Page header (editorial) ───────────────────────────── */
.page-header-title, .page-title, h1 {
  font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.01em;
}
.page-header { padding-bottom: var(--space-8); }

/* ── Pagination ────────────────────────────────────────── */
.av-pagination button, .av-pagination .page-btn {
  border-radius: var(--radius-pill); min-width: 30px; height: 30px;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.av-pagination .active, .av-pagination [aria-current="page"] {
  background: var(--action); color: #fff; border-color: transparent;
}

/* ── Sidebar nav ───────────────────────────────────────── */
.nav-link, .sidebar-link, [class*="nav-item"] a, nav a[href^="/ui/"] {
  border-radius: var(--radius-control);
  transition: background .12s var(--ease), color .12s var(--ease);
}

/* ── Motion niceties ───────────────────────────────────── */
a, button, .av-chip { transition-timing-function: var(--ease); }

/* ============================================================
   ELEVATION & SEPARATION STANDARD (system reference)
   The single source of truth for how surfaces separate so nested
   surfaces are always legible in BOTH themes.

   Elevation scale (tokens defined in styles.css, both light + dark):
     --bg             surface 0 — page canvas (deepest / recessed)
     --card-bg        surface 1 — cards & panels (raised above the page)
     --surface-inset  surface 2 — recessed wells INSIDE a card
                      (stat strips, code blocks, table bodies, empty areas)
   Dividers:
     --border         STRUCTURAL hairline between elements (cards, rows,
                      columns, section splits). Always use this to divide.
     --border-light   DECORATIVE only — never for structural separation.

   Rule: adjacent surfaces must differ by one elevation step OR be split
   by a --border divider (ideally both). Never divide with --border-light.
   ============================================================ */

/* Divided column group (stat strips, metric rows): recessed cells split by
   crisp 1px dividers — the 1px flex gap reveals the --border behind. */
.nd-cols { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border-radius: inherit; overflow: hidden; }
.nd-cols > * { background: var(--surface-inset); flex: 1 1 140px; min-width: 0; padding: 14px 16px; }

/* Recessed well inside a card (code blocks, insets, empty-state panels). */
.nd-well { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Structural divider line (row/section split inside a card). */
.nd-divider { border: 0; border-top: 1px solid var(--border); margin: 0; }