/*
 * Copyright (c) 2026 New York for Training and Rehabilitation. All rights reserved.
 * Unauthorised copying, redistribution, or creation of derivative works is prohibited.
*/

.admin-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 254px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding: 25px 18px 20px;
  color: white;
  background: var(--navy-950);
  border-inline-end: 1px solid rgba(255,255,255,0.06);
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; }
.sidebar .brand-lockup { color: white; font-size: 0.92rem; }
.sidebar .wordmark .wm-navy { color: white; }
.sidebar .brand-tagline { display: block; margin-top: 2px; color: #8b98b8; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-close { display: none; color: white; background: transparent; border: 0; font-size: 1.7rem; cursor: pointer; }

.workspace-label { margin: 34px 11px 10px; color: #7c8bab; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; color: #a8b3cc; border: 1px solid transparent; border-radius: 11px; font-size: 0.82rem; font-weight: 650; transition: background 150ms ease, color 150ms ease; }
.nav a:hover { color: white; background: rgba(255,255,255,0.07); }
.nav a.active { color: white; background: var(--crimson-600); }
.nav-symbol { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: #8b98b8; background: rgba(255,255,255,0.06); border-radius: 8px; font-size: 0.68rem; font-weight: 850; }
.nav a.active .nav-symbol { color: white; background: rgba(255,255,255,0.16); }

.sidebar-account { display: grid; grid-template-columns: 38px minmax(0,1fr) 30px; gap: 10px; align-items: center; margin-top: auto; padding: 14px 7px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.user-avatar { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: var(--gradient-brand); border-radius: 11px; font-size: 0.68rem; font-weight: 800; }
.account-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.account-copy b { overflow: hidden; color: white; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.account-copy span { overflow: hidden; color: #8b98b8; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.logout-link { display: grid; width: 30px; height: 30px; place-items: center; color: #a8b3cc; border-radius: 8px; font-size: 0.83rem; transform: rotate(45deg); }
.logout-link:hover { color: white; background: rgba(255,255,255,0.09); }
.nav-overlay { display: none; }

.main { min-width: 0; padding: 22px clamp(24px, 3.5vw, 54px) 22px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.topbar-title { display: flex; align-items: center; gap: 14px; }
.topbar .eyebrow { margin-bottom: 4px; }
.topbar h1 { margin-bottom: 3px; font-size: clamp(1.5rem, 3vw, 1.9rem); }
#who { font-size: 0.75rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.72rem; font-weight: 650; white-space: nowrap; }
/* :first-child, not a bare descendant selector - .live-indicator has a second,
   text-carrying span ("Live operations") that a plain `span` selector here would
   also match, forcing it into a 7x7px dot-sized box and wrapping its text onto
   as many lines as it took letters to fit that width. */
.live-indicator span:first-child { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px var(--success-bg); }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; background: white; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.menu-button span { display: block; width: 100%; height: 2px; margin: 4px 0; background: var(--navy-900); border-radius: 2px; }

/* --------------------------------------------------- utility topbar (search / alerts / mail / account) */
.topbar-utility { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.topbar-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; }
.topbar-search input {
  width: 100%;
  min-height: 42px;
  padding-inline: 38px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
}
.topbar-search input:focus { outline: none; border-color: var(--crimson-500); box-shadow: 0 0 0 3px rgba(200,16,46,0.12); }
.topbar-search-icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8rem; pointer-events: none; }
.topbar-utility-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-inline-start: auto; }
.icon-btn { position: relative; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--muted-strong); font-size: 0.85rem; cursor: pointer; }
.icon-btn:hover { border-color: var(--border-hover); color: var(--navy-900); }
.icon-badge { position: absolute; inset-inline-end: -5px; top: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 2px solid var(--surface); border-radius: 999px; background: var(--crimson-600); color: white; font-size: 0.6rem; font-weight: 800; line-height: 1; }
.dept-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--navy-900); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.topbar-avatar { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--navy-900); color: white; font-size: 0.68rem; font-weight: 800; }
.topbar-avatar::after { position: absolute; width: 10px; height: 10px; inset-inline-end: -1px; bottom: -1px; content: ""; background: var(--success); border: 2px solid var(--surface); border-radius: 50%; }

@media (max-width: 780px) {
  .topbar-search { display: none; }
  .dept-chip { display: none; }
}

.dashboard-intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 21px 23px; overflow: hidden; color: white; background: var(--gradient-hero); border-radius: var(--radius-lg); box-shadow: 0 12px 28px rgba(7,27,46,0.16); }
.dashboard-intro h2 { margin-bottom: 5px; color: white; font-size: 1.18rem; }
.dashboard-intro p { margin: 0; color: #c3cdea; font-size: 0.8rem; }
.intro-date { position: relative; flex: 0 0 auto; color: #d3daf5; font-size: 0.72rem; font-weight: 650; }

.stat { position: relative; min-height: 142px; overflow: hidden; padding: 19px; }
.stat::after { position: absolute; width: 84px; height: 84px; inset-inline-end: -28px; bottom: -36px; content: ""; background: var(--stat-soft, var(--crimson-50)); border-radius: 50%; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.stat-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--stat-color, var(--crimson-700)); background: var(--stat-soft, var(--crimson-50)); border-radius: 9px; font-size: 0.67rem; font-weight: 850; }
.stat .n { margin-top: 13px; color: var(--navy-950); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.stat-foot { margin-top: 8px; color: var(--muted); font-size: 0.65rem; }
.stat.stat-blue { --stat-color: var(--status-progress); --stat-soft: var(--status-progress-bg); }
.stat.stat-amber { --stat-color: color-mix(in srgb, var(--status-open) 70%, black); --stat-soft: var(--status-open-bg); }
.stat.stat-green { --stat-color: var(--success); --stat-soft: var(--success-bg); }
.stat.stat-violet { --stat-color: var(--violet-600); --stat-soft: var(--violet-50); }

.dashboard-panels { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.panel-card { min-height: 300px; }
.distribution-list { display: grid; gap: 16px; }
.distribution-row { display: grid; gap: 7px; }
.distribution-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted-strong); font-size: 0.76rem; }
.distribution-label b { color: var(--navy-900); font-size: 0.74rem; }
.bar-track { height: 7px; overflow: hidden; background: var(--border-soft); border-radius: 999px; }
/* calc(90deg * var(--dir, 1)), not a bare 90deg: the bar itself already fills from
   the inline-start edge under both directions (ordinary block-box behavior), but a
   gradient's angle is always physical, never direction-aware on its own - a plain
   90deg would keep pointing the same physical way in RTL, landing the dark stop at
   the box's trailing (now right, still-filled-first) edge instead of its leading
   one, reversing which end reads as "start" relative to LTR. */
.bar-fill { height: 100%; min-width: 5px; background: linear-gradient(calc(90deg * var(--dir, 1)), var(--navy-800), var(--navy-600)); border-radius: inherit; }
/* A rotating hue per row keeps a multi-series bar list from reading as one flat block. */
.distribution-row:nth-child(5n+2) .bar-fill { background: linear-gradient(calc(90deg * var(--dir, 1)), var(--indigo-600), var(--indigo-500)); }
.distribution-row:nth-child(5n+3) .bar-fill { background: linear-gradient(calc(90deg * var(--dir, 1)), var(--violet-600), var(--violet-500)); }
.distribution-row:nth-child(5n+4) .bar-fill { background: linear-gradient(calc(90deg * var(--dir, 1)), var(--amber-600), var(--amber-500)); }
.distribution-row:nth-child(5n+5) .bar-fill { background: linear-gradient(calc(90deg * var(--dir, 1)), var(--cyan-600), var(--cyan-500)); }
.empty-state { display: grid; min-height: 180px; place-items: center; color: var(--muted); text-align: center; }

.content-card { padding: 0; overflow: hidden; }
.content-card .section-heading { margin: 0; padding: 21px 22px; border-bottom: 1px solid var(--border-soft); }
.content-card .table-wrap { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.table-title-cell { min-width: 220px; }
.table-title-cell strong { display: block; color: var(--navy-900); }
.table-title-cell span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.7rem; }

.detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.72fr); align-items: start; }
.evidence-card { padding: 0; overflow: hidden; }
.evidence-img { display: block; width: 100%; max-height: 430px; object-fit: cover; background: var(--navy-950); }
.detail-body { padding: 24px; }
.detail-body h2 { margin-bottom: 10px; font-size: 1.4rem; }
.detail-description { color: var(--muted-strong); font-size: 0.9rem; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 22px; }
.detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 12px; }
.detail-meta-item { padding: 13px 14px; background: var(--surface-subtle); }
.detail-meta-item b { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.63rem; letter-spacing: 0.055em; text-transform: uppercase; }
.detail-meta-item span { color: var(--navy-900); font-size: 0.77rem; font-weight: 650; line-height: 1.4; }
.hash-block { margin: 18px 0 0; padding: 11px 12px; overflow-wrap: anywhere; color: var(--muted); background: var(--surface-subtle); border-radius: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.63rem; line-height: 1.45; }

.workflow-card-admin { position: sticky; top: 24px; }
.current-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 13px 14px; background: var(--surface-subtle); border: 1px solid var(--border-soft); border-radius: 12px; }
.current-status > span:first-child { color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.section-divider { height: 1px; margin: 22px 0; background: var(--border-soft); }
.notification-item { padding: 13px; background: var(--surface-subtle); border: 1px solid var(--border-soft); border-radius: 11px; font-size: 0.74rem; line-height: 1.6; }
.notification-item b { color: var(--muted); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }

.quality-grid { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); align-items: start; }
.settings-callout { padding: 15px; color: var(--muted-strong); background: var(--crimson-50); border: 1px solid var(--crimson-100); border-radius: 12px; font-size: 0.78rem; line-height: 1.55; }
.smtp-state { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 0.72rem; }
.smtp-state i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; }

.routing-intro { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 18px; background: var(--crimson-50); border: 1px solid var(--crimson-100); border-radius: var(--radius-md); }
.ai-badge { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: white; background: var(--crimson-700); border-radius: 10px; font-size: 0.67rem; font-weight: 850; letter-spacing: 0.04em; }
.routing-intro .ai-badge { flex: 0 0 auto; }
.routing-intro h3 { margin-bottom: 4px; font-size: 0.9rem; }
.routing-intro p { margin: 0; color: var(--muted-strong); font-size: 0.76rem; }
.routing-form-wrap { padding: 21px 22px; border-top: 1px solid var(--border-soft); }
.routing-form-wrap h3 { margin-bottom: 5px; font-size: 1rem; }
.routing-form-wrap p { margin-bottom: 15px; color: var(--muted); font-size: 0.76rem; }
.routing-form { grid-template-columns: 1.15fr 0.85fr 1.15fr auto; align-items: center; }

.admin-footer { padding: 32px 0 4px; color: #94a3b8; font-size: 0.65rem; text-align: center; }
.loading-panel { display: flex; min-height: 320px; align-items: center; justify-content: center; gap: 7px; }
.loading-panel span { width: 8px; height: 8px; background: var(--crimson-600); border-radius: 50%; animation: loading-dot 900ms ease-in-out infinite alternate; }
.loading-panel span:nth-child(2) { animation-delay: 180ms; }
.loading-panel span:nth-child(3) { animation-delay: 360ms; }
@keyframes loading-dot { to { transform: translateY(-8px); opacity: 0.45; } }
.error-card { color: var(--danger); background: var(--danger-bg); border-color: #ffd4da; }
.error-card strong { display: block; margin-bottom: 5px; }
.error-card p { margin: 0; }

@media (max-width: 1080px) {
  .admin-layout { grid-template-columns: 225px minmax(0,1fr); }
  .quality-grid { grid-template-columns: 1fr; }
  .routing-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 850px) {
  .admin-layout { display: block; }
  /* --dir flips the slide-out direction for RTL: inset-inline-start pins the panel to
     the correct physical edge in both directions, and the sign on translateX must flip
     to match or the panel would still fly off toward the LTR edge in Arabic. */
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(294px, 88vw); transform: translateX(calc(-105% * var(--dir, 1))); transition: transform 180ms ease; box-shadow: 22px 0 50px rgba(2,8,14,0.28); }
  .sidebar.open { transform: translateX(0); }
  .nav-close { display: block; }
  .nav-overlay { position: fixed; z-index: 20; inset: 0; display: block; visibility: hidden; background: rgba(2,8,14,0.5); opacity: 0; transition: opacity 180ms ease, visibility 180ms ease; }
  .nav-overlay.open { visibility: visible; opacity: 1; }
  .main { padding: 21px 18px; }
  .menu-button { display: block; }
  .topbar-actions .live-indicator { display: none; }
  .detail-grid,
  .dashboard-panels { grid-template-columns: 1fr; }
  .workflow-card-admin { position: static; }
}

@media (max-width: 620px) {
  .main { padding: 18px 13px; }
  .topbar { align-items: flex-start; }
  .topbar-actions .pill { display: none; }
  .dashboard-intro { align-items: flex-start; flex-direction: column; }
  .routing-form { grid-template-columns: 1fr; }
  .detail-meta { grid-template-columns: 1fr; }
  .content-card { margin-inline: -13px; border-inline: 0; border-radius: 0; }
  .table-wrap table { min-width: 740px; }
}

/* --------------------------------------------------- operations portal v1.0 */
.stat.stat-red { --stat-color: var(--danger); --stat-soft: var(--danger-bg); }

.metric-strip { margin-top: 18px; }
.metric-tile { padding: 18px 19px; }
.metric-value { margin: 10px 0 6px; color: var(--navy-950); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }

/* Chart legends read start-to-end like any other row of text/icons, but the plotted
   SVG itself is intentionally left as-is under RTL — chart axes stay LTR per design
   direction, so no mirroring is applied to the line/donut markup below. */
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 0.74rem; font-weight: 650; }
.chart-legend-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }

.line-chart { width: 100%; height: auto; overflow: visible; }
.line-chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.line-chart-axis-label { fill: var(--muted); font-size: 10px; font-weight: 600; }
.line-chart-series { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.line-chart-dot { stroke: var(--surface); stroke-width: 1.5; }

.donut-chart-panel { display: flex; align-items: center; gap: 22px; }
.donut-chart-svg { flex: 0 0 auto; width: 168px; height: 168px; }
.donut-chart-total { font-size: 1.5rem; font-weight: 800; fill: var(--navy-950); }
/* No RTL rule needed here: unlike a plain descendant-selector direction:rtl (which
   this renderer silently ignores for SVG <text> - a presentation-attribute-vs-
   stylesheet-priority quirk, not a bidi-algorithm gap), the donutChart() JS sets
   direction + unicode-bidi: bidi-override inline per element, which reliably works
   regardless of locale. See donutChart() in admin.js. */
.donut-chart-total-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.donut-legend { display: grid; flex: 1 1 auto; gap: 10px; min-width: 0; }
.donut-legend-row { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; }
.donut-legend-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.donut-legend-label { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--navy-900); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-value { flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; font-weight: 650; }

@media (max-width: 560px) {
  .donut-chart-panel { flex-direction: column; align-items: flex-start; }
}

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-bar input, .filter-bar select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
}
.filter-bar input { flex: 1 1 240px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 16px; color: var(--muted); font-size: 0.85rem; }

.stack-column { display: flex; flex-direction: column; gap: 18px; }

.evidence-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 12px; }
.evidence-gallery figure { position: relative; margin: 0; }
.evidence-gallery figcaption { padding-top: 6px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; }
.evidence-kind {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(7, 27, 46, 0.78);
  color: white;
  font-size: 0.65rem;
  font-weight: 750;
}
.evidence-gallery .evidence-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); }
.evidence-purged { display: grid; height: 200px; place-items: center; padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.8rem; text-align: center; }

.resolution-block { margin-top: 18px; padding: 14px 16px; border-inline-start: 3px solid var(--success); background: var(--success-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.resolution-block b { display: block; margin-bottom: 6px; color: var(--navy-950); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.resolution-block p { margin: 0 0 6px; font-size: 0.9rem; }

.timeline { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
.timeline li { font-size: 0.85rem; }
.timeline li b { display: block; color: var(--navy-950); }
.timeline li span { color: var(--muted); font-size: 0.75rem; }

.upload-drop {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--muted-strong);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.upload-drop:hover { border-color: var(--crimson-500); background: var(--crimson-50); }
.upload-drop input { display: none; }

.cell-input { width: 84px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.cell-input.wide { width: 100%; min-width: 180px; }
.row-actions { display: flex; gap: 6px; white-space: nowrap; }
.row-label { width: 220px; color: var(--muted); background: var(--surface-subtle); }

.audit-detail { max-width: 460px; margin: 8px 0 0; padding: 10px; overflow: auto; background: var(--navy-950); color: #d7e6f2; border-radius: 8px; font-size: 0.72rem; line-height: 1.5; }
details summary { cursor: pointer; color: var(--crimson-700); font-weight: 700; }

.location-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.location-form input, .location-form select,
.user-form input, .user-form select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
}

@media (max-width: 900px) {
  .location-form, .user-form { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr; }
  .row-label { width: auto; }
}

/* --------------------------------------------------- file an OVR (full form) v1.0 */
/* auto-fit + minmax (not a fixed column count) so columns reflow smoothly as the
   window narrows instead of jumping from 3-across to 1-across at a single breakpoint —
   a fixed count squeezed labels like "Time of safety event" into too-narrow columns
   and wrapped them in the gap between the sidebar's own breakpoint and this one. */
.form-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 4px; }
.form-grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ovr-form-page .field { margin-bottom: 14px; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; }
.checkbox-pill {
  display: inline-flex;
  /* flex-shrink allowed + min-width:0 overrides the flex default of min-width:auto, which
     otherwise refuses to shrink a nowrap item below its full text width — without this, a
     long pill (e.g. "Visitor/Contractor/Member of the Public") has nowhere to go but overflow
     past the row's edge on any viewport narrower than its unwrapped width, regardless of the
     row's own flex-wrap. white-space:normal is the fallback so it wraps its own text instead
     of overflowing once actually squeezed; at normal widths there's no visual change since
     nothing forces the shrink. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
/* Explicit, fixed sizing so the control never inherits width/padding/border meant for text
   inputs, and never depends on a given browser's default replaced-element sizing. */
.checkbox-pill input[type="checkbox"],
.checkbox-pill input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--violet-600);
}
.checkbox-pill:has(input:checked) { color: var(--violet-600); background: var(--violet-50); border-color: color-mix(in srgb, var(--violet-600) 35%, white); font-weight: 700; }
/* :has() support fallback (pre-2023 browsers): toggled from JS alongside the input's own
   change event, so the checked look still applies even without :has(). */
.checkbox-pill.is-checked { color: var(--violet-600); background: var(--violet-50); border-color: color-mix(in srgb, var(--violet-600) 35%, white); font-weight: 700; }

.subform-block {
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.category-tile {
  --cat: var(--navy-800);
  --cat-soft: var(--navy-50);
  text-align: start;
  padding-block: 11px;
  padding-inline: 15px 13px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid color-mix(in srgb, var(--cat) 45%, var(--border));
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.category-tile b { color: var(--cat); margin-inline-end: 4px; }
.category-tile:hover { border-color: var(--cat); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.category-tile.selected { border-color: var(--cat); background: var(--cat-soft); box-shadow: 0 0 0 1px var(--cat) inset; }
/* 8-hue rotation so 20 categories read as distinct at a glance, not one flat list.
   Crimson is deliberately excluded — it's reserved for the brand/primary action and
   would otherwise get mistaken for "selected" or a call to action. */
.category-tile:nth-of-type(8n+1) { --cat: var(--navy-800); --cat-soft: var(--navy-50); }
.category-tile:nth-of-type(8n+2) { --cat: var(--indigo-600); --cat-soft: var(--indigo-50); }
.category-tile:nth-of-type(8n+3) { --cat: var(--violet-600); --cat-soft: var(--violet-50); }
.category-tile:nth-of-type(8n+4) { --cat: var(--amber-600); --cat-soft: var(--amber-50); }
.category-tile:nth-of-type(8n+5) { --cat: var(--cyan-600); --cat-soft: var(--cyan-50); }
.category-tile:nth-of-type(8n+6) { --cat: var(--rose-600); --cat-soft: var(--rose-50); }
.category-tile:nth-of-type(8n+7) { --cat: var(--blue-600); --cat-soft: var(--blue-50); }
.category-tile:nth-of-type(8n+0) { --cat: var(--pink-600); --cat-soft: var(--pink-50); }

@media (max-width: 900px) {
  .category-grid { grid-template-columns: 1fr; }
}

.flow-intro { margin: 18px 0 22px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

.ovr-form-page > form,
.ovr-form-page > #ovrFormAlert { padding-inline: 22px; }
.ovr-form-page > form { padding-bottom: 24px; }
.ovr-form-page > form > * { max-width: 1180px; }