/* Tabler supplies the layout; this file holds the brand color and the status board, which Tabler has no component for. */
:root {
  --tblr-primary: #0A2D9C; --tblr-primary-rgb: 10, 45, 156;
  --tint: #E3ECFE; --tint-line: #A9C3F7; --idle-line: #B7C0D0; --skip-line: #8592A8;
}
/* Tabler uppercases these labels; the dashboard keeps its Headline Case field names. */
.page-pretitle, .subheader, .datagrid-title { text-transform: none; letter-spacing: 0; }
.navbar-expand .top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.wordmark { display: block; height: 28px; width: auto; flex-shrink: 0; }
.btn, .form-control { min-height: 44px; }
.card-title { font-weight: 600; }
.search .form-control { width: 260px; max-width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.board-column > .card-body { background: var(--tblr-bg-surface-secondary); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.chip { display: block; border-radius: 4px; padding: 4px 6px; }
.chip .k { display: block; font-size: 11px; font-weight: 500; }
.chip .v { display: block; font-size: 12px; font-weight: 600; }
.tone-done, .tone-current, .swatch.done { background: var(--tblr-primary); color: #FFFFFF; border: 1px solid var(--tblr-primary); }
.tone-active, .tone-past, .swatch.active { background: var(--tint); color: var(--tblr-primary); border: 1px solid var(--tint-line); }
.tone-idle, .swatch.idle { background: var(--tblr-bg-surface); color: var(--tblr-secondary); border: 1px solid var(--idle-line); }
.tone-skipped, .swatch.skipped { background: var(--tblr-body-bg); color: var(--tblr-secondary); border: 1px dashed var(--skip-line); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; }
.status-label { flex: 0 0 120px; }
.status-steps { flex: 999 1 420px; display: flex; flex-wrap: wrap; gap: 6px; }
.step { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.step.tone-current { font-weight: 600; }
details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.min-w-0 { min-width: 0; }