/**
 * theme-bootstrap.css — Awesome Support theme layer, file 2 of 6 (iteration II)
 * ============================================================================
 *
 * OWNS (api-contract-II §4.1.1 row 2): the Bootstrap 4 override surface —
 * `.btn` + variants, `.form-control`, `.custom-select`, `.custom-file`,
 * `.custom-switch`, `.custom-control`, `.card`, `.table`, `.alert`, `.badge`,
 * `.nav`, `.navbar`, `.dropdown-menu`, `.modal`, `.pagination`,
 * `.breadcrumb`, `.list-group`, `.close`, and the focus rings.
 *
 * MUST NOT CONTAIN: Shards selectors (theme-shards.css), vendor-widget
 * selectors (theme-vendor.css), or colour literals (theme-tokens.css).
 *
 * HOW IT WINS: by cascade ORDER, not specificity. This file is linked after
 * `assets/components/bootstrap/css/bootstrap.min.css` in every head block
 * (api-contract-II §4.1.2), so a plain `.btn-primary { … }` here beats
 * Bootstrap's own `.btn-primary`. Escalation ladder (§5.1): load order → a
 * more specific but still semantic selector → `!important`, only against a
 * vendor rule that is itself `!important`, always commented.
 *
 * Every rule block below names the Bootstrap surface it overrides and the
 * reference section the values come from (api-contract-II §4.1.3 rule 3):
 *   ref §N          → docs/input/design/component-reference.css section N
 *   proto §N        → docs/input/design/prototype/index.html section N
 *   spec §N         → docs/designs/design-spec-II.md section N
 *
 * Breakpoints are 767/768 and 1199/1200 only (§4.1.3 rule 4); every
 * `@container (max-width: 767px)` of prototype.css becomes a plain
 * `@media (max-width: 767px)` here. There is no `prefers-color-scheme`
 * anywhere in the theme layer — the application has exactly one theme.
 */

/* ==========================================================================
 * 0. LINKS — overrides Bootstrap Reboot `a { color: hex 007bff }`
 * Body-copy links are ember on dark (spec §1.1: "links on dark"). The
 * `color: inherit` baseline of the global reset (theme-tokens.css) is
 * deliberately re-specified here rather than there, so that navigation
 * surfaces which set their own ink (navbar links, dropdown items, sidebar
 * items, pagination) are not fought by a stronger global rule.
 * ========================================================================== */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Utility links that must not read as body-copy links keep their own ink;
 * these are set by the components that own them (nav, dropdown, breadcrumb,
 * pagination, card headers) further down this file. */

/* ==========================================================================
 * 1. BUTTONS — overrides `.btn` and every `.btn-*` variant. ref §1, spec §2.1
 * TC-4 asserts: every `.btn-primary` computes to background rgb 255,107,53
 * and border-radius 8px.
 * ========================================================================== */

/* Base — overrides Bootstrap `.btn` (padding .375rem .75rem, radius .25rem,
 * font-size 1rem, border 1px solid transparent). ref §1 `.ds-btn`. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

/* Focus — overrides Bootstrap `.btn:focus { box-shadow: 0 0 0 .2rem rgba 0,123,255,.25 }`.
 * The ember ring replaces the blue glow entirely (spec §1.9). ref §1. */
.btn:focus,
.btn.focus {
  box-shadow: none;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Press + disabled — ref §1 `.ds-btn:active` / `.ds-btn:disabled`. */
.btn:active:not(:disabled):not(.disabled) { transform: scale(0.98); }

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sizes — overrides `.btn-sm` / `.btn-lg`. Height is fixed, padding is
 * horizontal only. ref §1 `.ds-btn-sm/-md/-lg`. */
.btn-sm,
.btn-group-sm > .btn {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.btn-lg,
.btn-group-lg > .btn {
  height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

.btn-block { width: 100%; }

/* primary — filled ember, white label. The single call-to-action per surface.
 * Overrides `.btn-primary` (hex 007bff). ref §1 `.ds-btn-primary`. TC-4.
 * The white-on-ember pair measures 2.84:1 — a NAMED, ACCEPTED exception
 * (spec §1.14 decision D-A1) because this iteration is a 1:1 port of
 * pt_center. Do not "fix" it; every other surface/ink pair meets AA. */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}

/* secondary / outline-primary — outlined ember on transparent.
 * Overrides `.btn-secondary` (hex 6c757d) and `.btn-outline-primary`.
 * ref §1 `.ds-btn-secondary`. */
.btn-secondary,
.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled):not(.disabled),
.btn-outline-primary:hover:not(:disabled):not(.disabled),
.btn-secondary:focus,
.btn-outline-primary:focus {
  background-color: rgba(255, 107, 53, 0.1);   /* verbatim from component-reference.css §1 `.ds-btn-secondary:hover` */
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ghost — lowest emphasis; muted label, no border. Overrides `.btn-light`
 * (hex f8f9fa — a TC-3 white plate if left alone), `.btn-link` and
 * `.btn-outline-secondary`. ref §1 `.ds-btn-ghost`. */
.btn-light,
.btn-link,
.btn-outline-secondary {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  text-decoration: none;
}

.btn-light:hover:not(:disabled):not(.disabled),
.btn-link:hover:not(:disabled):not(.disabled),
.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  border-color: transparent;
  text-decoration: none;
}

/* danger — destructive actions only. `.btn-danger` is a DOM contract
 * (api-contract-II §4.2.3): it is restyled, never renamed. ref §1
 * `.ds-btn-danger`. */
.btn-danger,
.btn-outline-danger {
  background-color: var(--color-error);
  color: var(--color-on-primary);
  border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled):not(.disabled),
.btn-outline-danger:hover:not(:disabled):not(.disabled),
.btn-danger:focus,
.btn-danger.focus {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-primary);
  opacity: 0.88;
}

/* dark — the "Quote" button and other neutral raised actions.
 * Overrides `.btn-dark` (hex 343a40). spec §1.15 row 6. */
.btn-dark,
.btn-outline-dark {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-dark:hover:not(:disabled):not(.disabled),
.btn-outline-dark:hover:not(:disabled):not(.disabled) {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-primary);
}

/* success / warning / info — kept semantic, restyled onto the dark ladder.
 * Overrides `.btn-success` (hex 28a745), `.btn-warning` (hex ffc107),
 * `.btn-info` (hex 17a2b8). spec §1.1. */
.btn-success {
  background-color: var(--color-success);
  color: var(--color-surface);
  border-color: var(--color-success);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-surface);
  border-color: var(--color-warning);
}

.btn-info {
  background-color: var(--color-info);
  color: var(--color-on-primary);
  border-color: var(--color-info);
}

/* Disabled VARIANT fills — the dimming itself is owned by the generic
 * `.btn:disabled { opacity: .4 }` rule above (ref §1 `.ds-btn:disabled`), but
 * the FILL has to be restated here. Both vendors ship a per-variant disabled
 * rule of the form `.btn-primary.disabled, .btn-primary:disabled { … }`
 * (Shards: hex 85B542, its own green accent; Bootstrap: hex 007bff) whose TWO
 * simple selectors outrank the single-class `.btn-primary` rule above, so the
 * vendor colour wins on every disabled button no matter how late this file
 * loads — the specificity trap recorded in docs/lessons/inbox.md L-20260721-05.
 * Observed on the staff ticket queue: the daterangepicker's Apply button ships
 * disabled and rendered Shards green (TC-4, issue #61).
 *
 * Each variant below simply repeats its own enabled fill at the matching
 * two-selector specificity; no new colour and no new token is introduced. */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-light:disabled,
.btn-light.disabled,
.btn-link:disabled,
.btn-link.disabled,
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn-danger:disabled,
.btn-danger.disabled,
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  background-color: var(--color-error);
  color: var(--color-on-primary);
  border-color: var(--color-error);
}

.btn-dark:disabled,
.btn-dark.disabled,
.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-success:disabled,
.btn-success.disabled {
  background-color: var(--color-success);
  color: var(--color-surface);
  border-color: var(--color-success);
}

.btn-warning:disabled,
.btn-warning.disabled {
  background-color: var(--color-warning);
  color: var(--color-surface);
  border-color: var(--color-warning);
}

.btn-info:disabled,
.btn-info.disabled {
  background-color: var(--color-info);
  color: var(--color-on-primary);
  border-color: var(--color-info);
}

/* ==========================================================================
 * 2. FORM CONTROLS — overrides `.form-control`, `.custom-select`,
 *    `.custom-file`, `.custom-control`, `.custom-switch`, `.input-group`.
 *    ref §2, spec §2.2. TC-5 asserts: every input/select/textarea carrying
 *    `.form-control` computes to background rgb 34,38,58 with border
 *    rgb 45,49,71.
 * ========================================================================== */

/* Base — overrides Bootstrap `.form-control` (hex fff fill, hex ced4da border,
 * radius .25rem, height calc(1.5em + .75rem + 2px)). ref §2 `.ds-input`.
 * Also folds the legacy `.form-control { font-family: 'Source Sans Pro' }`
 * rule of the deleted helpdesk.css. */
.form-control,
.custom-select,
.custom-file-label,
textarea.form-control {
  width: 100%;
  height: auto;
  padding: 12px var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-family);
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Overrides Bootstrap `.form-control::placeholder { color: hex 6c757d }`. ref §2. */
.form-control::placeholder,
.custom-select::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Focus — overrides `.form-control:focus { color:hex 495057; background-color:hex fff;
 * border-color:hex 80bdff; box-shadow: 0 0 0 .2rem rgba 0,123,255,.25 }`.
 * ref §2 `.ds-input:focus`. */
.form-control:focus,
.custom-select:focus {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);   /* verbatim from component-reference.css §2 `.ds-input:focus` */
  outline: none;
}

/* Invalid — `.is-invalid` is a DOM contract (§4.2.3). Overrides Bootstrap's
 * `.form-control.is-invalid { border-color:hex dc3545 }` + its inline SVG icon.
 * ref §2 `.ds-input-error`. */
.form-control.is-invalid,
.custom-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.2);   /* verbatim from component-reference.css §2 `.ds-input-error` */
  background-image: none;
  padding-right: var(--space-4);
}

.invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Disabled / readonly — overrides `.form-control:disabled { background-color:hex e9ecef }`,
 * a light plate TC-3 would flag. ref §2 `.ds-input:disabled`. */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Select arrow — overrides `.custom-select`'s inline SVG chevron, which is
 * drawn in hex 343a40 and is invisible on a dark control. The replacement glyph
 * is a token because a data-URI is a colour literal and theme-tokens.css is
 * the only file allowed to carry one (§4.1.3 rule 1). spec §2.2. */
.custom-select,
select.form-control:not([multiple]):not([size]) {
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  padding-right: var(--space-8);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* A native <option> list is painted by the OS; give it the panel surface so
 * the open dropdown is not a white sheet on a dark page (TC-3). spec §2.2. */
.form-control option,
.custom-select option {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* Labels and helper text — overrides Bootstrap `label` / `.form-text`.
 * ref §2 `.ds-label` / `.ds-field-error`. `.help-block` is a DOM contract
 * (§4.2.3) carried by HelpDeskZ's own validation output. */
label,
.col-form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.5;
}

.form-text,
.help-block,
small.text-muted {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Field-level validation error — `validation/single.php` renders
 * `<span class="help-block ds-field-error">` and CI4 renders `.invalid-feedback`
 * (design-spec-II §2.2 / §3.3 view 9). It is `--color-error` message text
 * directly below the control. Placed AFTER the muted helper-text block above so
 * it wins at equal specificity (0,1,0) by source order for a
 * `<span class="help-block ds-field-error">` — the `.help-block` DOM contract is
 * kept, the error colour is added. */
.ds-field-error {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* File input — overrides `.custom-file-label` (hex fff fill) and its
 * `::after` "Browse" button (hex e9ecef fill). Both are TC-3 white plates if
 * left alone. proto §7 "File (bs-custom-file-input)". */
/* The visible control is the LABEL, and Bootstrap positions it ABSOLUTELY —
 * so it contributes nothing to the wrapper's height. With `height: auto` alone
 * the wrapper collapsed to the bare input's ~30px while the label painted
 * 45.5px, and a stack of N attachment inputs overlapped ITSELF by ~7px per row
 * (observed with three `attachment[]` inputs on client/ticket_form.php and the
 * client ticket reply form, issue #66).
 *
 * The floor is derived from the same tokens the label's own box is built from
 * — the `--text-sm` line box, the `--space-3` vertical padding pair and the 1px
 * border pair — so wrapper and label can never drift apart if either changes.
 * It also puts the control above the 40px mobile tap target. */
.custom-file,
.custom-file-input {
  min-height: calc(var(--text-sm) * 1.5 + var(--space-3) * 2 + 2px);
}

.custom-file {
  height: auto;
}

.custom-file-input {
  height: 100%;
  cursor: pointer;
}

.custom-file-label {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-file-label::after {
  height: auto;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background-color: transparent;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.custom-file-input:focus-visible ~ .custom-file-label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Checkbox / radio — `.custom-control` and `.custom-switch` are DOM contracts
 * (§4.2.3). Overrides `.custom-control-label::before { background-color:hex fff;
 * border:hex adb5bd }` and `:checked { background-color:hex 007bff }`.
 * proto §6 `.p-check` / `.p-switch`. */
.custom-control-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.custom-control-label::before {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.custom-control-input:disabled ~ .custom-control-label {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: var(--color-surface-raised);
}

.custom-checkbox .custom-control-label::before {
  border-radius: var(--radius-sm);
}

/* Switch — the thumb is a solid ::after square, not an SVG, so it is
 * recoloured directly. proto §6 `.p-switch-thumb`. */
.custom-switch .custom-control-label::after {
  background-color: var(--color-text-muted);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--color-on-primary);
}

/* Input group add-ons — overrides `.input-group-text { background-color:hex e9ecef;
 * border-color:hex ced4da; color:hex 495057 }`. Used by the staff ticket search.
 * spec §2.2. */
.input-group-text {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
}

/* Bootstrap's "seamless" input group (used by the staff search bars) removes
 * the add-on chrome; keep it seamless but on the dark control fill. */
.input-group-seamless .input-group-text {
  background-color: transparent;
  border: none;
}

/* Grouped BUTTON corner radii — Bootstrap sizes a button inside an input group
 * from its OWN radius scale, via three-simple-selector rules
 * (`.input-group-lg > .input-group-append > .btn { border-radius: .3rem }`)
 * that outrank the single-class `.btn { border-radius: var(--radius-md) }` of
 * §1. The client knowledgebase search (`client/home.php`) is exactly such an
 * `.input-group-lg`, so its Search button rendered Bootstrap's 4.8px instead of
 * the token's 8px (TC-4, issue #61).
 *
 * The OUTER corner pair takes the token; the INNER pair is restated as square
 * here rather than left to Bootstrap, because these selectors tie with
 * Bootstrap's own and would otherwise re-round the edge that butts against the
 * control. ref §1 `.ds-btn`, spec §2.1. */
.input-group > .input-group-append > .btn,
.input-group-sm > .input-group-append > .btn,
.input-group-lg > .input-group-append > .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .btn,
.input-group-lg > .input-group-prepend > .btn {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ==========================================================================
 * 3. CARDS — overrides `.card`, `.card-header`, `.card-body`, `.card-footer`.
 *    `.card-header` is a DOM contract (§4.2.3). ref §3, spec §2.3.
 * ========================================================================== */

.card {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  box-shadow: none;
}

/* Overrides `.card-header { background-color: rgba 0,0,0,.03; border-bottom:
 * 1px solid rgba 0,0,0,.125 }`. Never a second `-alt` fill on an `-alt`
 * card — the divider carries the separation (spec §1.7). */
.card-header,
.card-footer {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-weight-bold);
}

.card-header:first-child {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.card-body {
  padding: var(--space-6);
  color: var(--color-text);
}

.card-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.card-subtitle,
.card-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
 * 4. TABLES — overrides `.table`, `.table-striped`, `.table-hover`,
 *    `.table-danger`, `.thead-light`. `.table-striped` and `.table-danger`
 *    are DOM contracts (§4.2.3). ref §4, spec §2.4.
 * ========================================================================== */

.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--color-text);
  border-collapse: collapse;
  font-size: var(--text-sm);
  background-color: transparent;
}

/* Overrides `.table th { border-top: 1px solid hex dee2e6 }` and
 * `.table thead th { border-bottom: 2px solid hex dee2e6; vertical-align: bottom }`.
 * ref §4 `.ds-table th`. */
.table thead th,
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: none;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  vertical-align: middle;
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  border-top: none;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr { transition: background-color 150ms ease; }
.table tbody tr:last-child td { border-bottom: none; }

/* Overrides `.table-hover tbody tr:hover { background-color: rgba 0,0,0,.075 }`
 * — a light wash on a dark table. ref §4. */
.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}

.table tbody tr:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;   /* inset: the row sits inside the bordered table wrapper (spec §1.9) */
}

/* Overrides `.table-striped tbody tr:nth-of-type(odd) { background-color:
 * rgba 0,0,0,.05 }` — the design uses NO striping fill; the row separator
 * carries the rhythm (spec §1.15 row 11). The class is kept as a DOM
 * contract, it simply paints nothing. */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background-color: var(--color-surface-raised);
}

/* Overrides Bootstrap's contextual row classes (`.table-danger` hex f5c6cb,
 * `.table-warning`, `.table-success`, `.table-info`, `.table-light`), all of
 * which are light plates. `.table-danger` marks overdue tickets and is a DOM
 * contract; the redesign additionally requires a NON-COLOUR carrier (an
 * "Overdue" chip), which the owning list view adds in its own stage. */
.table-danger,
.table-danger > td,
.table-danger > th {
  background-color: var(--color-error-bg);
  color: var(--color-text);
}

.table-warning,
.table-warning > td,
.table-warning > th {
  background-color: var(--color-warning-bg);
  color: var(--color-text);
}

.table-success,
.table-success > td,
.table-success > th {
  background-color: var(--color-success-bg);
  color: var(--color-text);
}

.table-info,
.table-info > td,
.table-info > th {
  background-color: var(--color-info-bg);
  color: var(--color-text);
}

.table-light,
.table-light > td,
.table-light > th,
.thead-light th {
  background-color: var(--color-surface-raised);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* `.table-responsive` is the horizontal scroll container. In the tablet band
 * the CONTAINER scrolls and the page never does (TC-6, spec §1.11). */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
 * 5. ALERTS — overrides `.alert` and `.alert-*`. `.alert-success`,
 *    `.alert-danger`, `.alert-info`, `.alert-warning` and `.alert-light` are
 *    DOM contracts (§4.2.3): restyled into the A7 alert, never renamed.
 *    ref §7, spec §2.7. The 3px top accent is the pt_center alert signature.
 * ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The alert's own heading/body parts, when the view supplies the A7 anatomy.
 * A bare `.alert` with plain text still renders correctly without them. */
.alert .alert-heading,
.alert .ds-alert-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.alert .ds-alert-text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The leading icon slot (icon + title + text; colour is never the only
 * carrier of meaning — §4.1.3 rule 7). */
.alert > .ds-alert-icon {
  flex: 0 0 auto;
  line-height: 1.5;
  font-size: var(--text-base);
}

.alert > .ds-alert-body { min-width: 0; }

.alert a,
.alert .alert-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-weight-medium);
}

/* success — overrides `.alert-success { color:hex 155724; background:hex d4edda;
 * border-color:hex c3e6cb }`. ref §7 `.ds-alert-success`. */
.alert-success {
  background-color: var(--color-success-bg);
  border-top: 3px solid var(--color-success);
  border-right: 1px solid rgba(46, 213, 115, 0.30);    /* verbatim from component-reference.css §7 */
  border-bottom: 1px solid rgba(46, 213, 115, 0.30);   /* verbatim from component-reference.css §7 */
  border-left: 1px solid rgba(46, 213, 115, 0.30);     /* verbatim from component-reference.css §7 */
  color: var(--color-text-muted);
}

.alert-success .alert-heading,
.alert-success .ds-alert-title,
.alert-success > .ds-alert-icon { color: var(--color-success); }

/* danger — overrides `.alert-danger { color:hex 721c24; background:hex f8d7da }`.
 * ref §7 `.ds-alert-error`. */
.alert-danger {
  background-color: var(--color-error-bg);
  border-top: 3px solid var(--color-error);
  border-right: 1px solid rgba(255, 71, 87, 0.30);     /* verbatim from component-reference.css §7 */
  border-bottom: 1px solid rgba(255, 71, 87, 0.30);    /* verbatim from component-reference.css §7 */
  border-left: 1px solid rgba(255, 71, 87, 0.30);      /* verbatim from component-reference.css §7 */
  color: var(--color-text-muted);
}

.alert-danger .alert-heading,
.alert-danger .ds-alert-title,
.alert-danger > .ds-alert-icon { color: var(--color-error); }

/* warning — overrides `.alert-warning { color:hex 856404; background:hex fff3cd }`.
 * ref §7 `.ds-alert-warning`. Body ink is `--color-text`, NOT muted: on the
 * warning composite fill muted measures 4.47:1 and misses AA (spec ruling
 * D-A4). */
.alert-warning {
  background-color: var(--color-warning-bg);
  border-top: 3px solid var(--color-warning);
  border-right: 1px solid rgba(255, 165, 2, 0.30);     /* verbatim from component-reference.css §7 */
  border-bottom: 1px solid rgba(255, 165, 2, 0.30);    /* verbatim from component-reference.css §7 */
  border-left: 1px solid rgba(255, 165, 2, 0.30);      /* verbatim from component-reference.css §7 */
  color: var(--color-text);
}

.alert-warning .ds-alert-text { color: var(--color-text); }

.alert-warning .alert-heading,
.alert-warning .ds-alert-title,
.alert-warning > .ds-alert-icon { color: var(--color-warning); }

/* info + light — overrides `.alert-info { color:hex 0c5460; background:hex d1ecf1 }`
 * and `.alert-light { background:hex fefefe }` (a near-white plate TC-3 flags).
 * ref §7 `.ds-alert-info`. The TITLE uses `--color-info-ink` (11.29:1); plain
 * `--color-info` on the info fill is 3.79:1 and fails AA (spec ruling D-A3). */
.alert-info,
.alert-light,
.alert-secondary,
.alert-primary,
.alert-dark {
  background-color: var(--color-info-bg);
  border-top: 3px solid var(--color-info);
  border-right: 1px solid var(--color-info-border);
  border-bottom: 1px solid var(--color-info-border);
  border-left: 1px solid var(--color-info-border);
  color: var(--color-text-muted);
}

.alert-info .alert-heading,
.alert-info .ds-alert-title,
.alert-info > .ds-alert-icon,
.alert-light .ds-alert-title,
.alert-secondary .ds-alert-title,
.alert-primary .ds-alert-title,
.alert-dark .ds-alert-title { color: var(--color-info-ink); }

/* HelpDeskZ's own validation block (`.errors` + role="alert",
 * `Views/validation/list.php`) is a DOM contract (§4.2.3) and reads as a danger
 * alert with the A7 anatomy — icon + title + the themed list (design-spec-II
 * §2.7 / §3.3 view 8). Issue #84 gives the view that anatomy as markup; this
 * block lays it out. The list text is `--color-text` (white on the error fill,
 * ≥ 4.5:1); `--color-error` is reserved for the icon and the title, so colour is
 * never the only carrier (§4.1.3 rule 7). When this block is NESTED inside a
 * staff-form alert that already carries its own icon, the inner icon/title are
 * suppressed by theme-components.css §25.2c. */
.errors {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--color-error-bg);
  border-top: 3px solid var(--color-error);
  border-right: 1px solid rgba(255, 71, 87, 0.30);     /* verbatim from component-reference.css §7 */
  border-bottom: 1px solid rgba(255, 71, 87, 0.30);    /* verbatim from component-reference.css §7 */
  border-left: 1px solid rgba(255, 71, 87, 0.30);      /* verbatim from component-reference.css §7 */
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.errors > .ds-alert-icon { flex: 0 0 auto; line-height: 1.5; color: var(--color-error); }
.errors .ds-alert-body { min-width: 0; }
.errors .ds-alert-title {
  margin: 0 0 var(--space-1);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}
.errors .ds-errors-list { margin: 0; padding-left: 1.25em; color: var(--color-text); }
.errors .ds-errors-list li { color: var(--color-text); overflow-wrap: anywhere; }

/* ==========================================================================
 * 6. BADGES — overrides `.badge` and `.badge-*`. Every `.badge-*` listed in
 *    §4.2.3 is a DOM contract: it is RESTYLED INTO THE CHIP IDIOM, not
 *    replaced by a new class name. The dot + label anatomy lives in
 *    theme-components.css (`.ds-chip`); this block gives a bare `.badge-*`
 *    the same pill treatment so a view that has not yet grown the dot still
 *    reads correctly. ref §6, spec §2.6 / §1.15 row 13.
 * ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.badge-pill { border-radius: var(--radius-full); }

/* Semantic inks — overrides `.badge-success` (hex 28a745 fill), `.badge-danger`
 * (hex dc3545), `.badge-warning` (hex ffc107), `.badge-info` (hex 17a2b8),
 * `.badge-primary` (hex 007bff), `.badge-dark` (hex 343a40), `.badge-light`
 * (hex f8f9fa — a light plate). The fill stays the raised surface; only the ink
 * (and the dot, where the view supplies one) moves. ref §6. */
.badge-success { color: var(--color-success); }
.badge-danger  { color: var(--color-error); }
.badge-warning { color: var(--color-warning); }
.badge-info    { color: var(--color-info-ink); }
.badge-primary { color: var(--color-primary); }
.badge-dark,
.badge-secondary,
.badge-light   { color: var(--color-text-muted); }

.badge-success,
.badge-danger,
.badge-warning,
.badge-info,
.badge-primary,
.badge-dark,
.badge-secondary,
.badge-light {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}

/* ==========================================================================
 * 7. NAV / TABS / PILLS — overrides `.nav`, `.nav-link`, `.nav-tabs`,
 *    `.nav-pills`. The tab structures of §4.2.2 (`#general-tab`,
 *    `#password-tab`, `#reply-tab`, `#notes-tab`, `#profile-tab`,
 *    `#twofactor-tab`, …) are RESTYLED IN PLACE and never flattened (rule R2).
 *    ref §10, spec §2.10.
 * ========================================================================== */

.nav-link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: color 150ms ease, background-color 150ms ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  text-decoration: none;
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;   /* inset: the item sits inside a bordered nav container (spec §1.9) */
}

.nav-link.disabled { color: var(--color-text-muted); opacity: 0.4; }

/* Tabs — overrides `.nav-tabs { border-bottom: 1px solid hex dee2e6 }` and
 * `.nav-tabs .nav-link.active { color:hex 495057; background-color:hex fff;
 * border-color:hex dee2e6 hex dee2e6 hex fff }` (a white plate). The active tab is an
 * ember underline, so the marker is not colour alone. spec §2.10. */
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-1);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
  border-color: transparent transparent var(--color-border);
  background-color: var(--color-surface-raised);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--color-primary);
  background-color: transparent;
  border-color: transparent transparent var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Pills — overrides `.nav-pills .nav-link.active { background-color:hex 007bff }`.
 * ref §10 `.ds-segment-active`. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
}

.tab-content { color: var(--color-text); }

/* ==========================================================================
 * 8. NAVBAR — overrides `.navbar`, `.navbar-light`, `.navbar-brand`,
 *    `.navbar-nav .nav-link`, `.navbar-toggler`. This is the CLIENT shell's
 *    top bar (the staff panel's Shards navbar is theme-shards.css).
 *    Folds the legacy `.navbar` / `.navbar-light .navbar-nav .nav-link` rules
 *    of the deleted helpdesk.css. proto §1, spec §2.11 / §1.15 row 16.
 * ========================================================================== */

.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: 0 var(--space-6);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;   /* folds the legacy `box-shadow: -1px 2px 9px rgba 221,221,221,1` of helpdesk.css */
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-base);
}

.navbar-brand:hover { color: var(--color-text); text-decoration: none; }

/* Overrides `.navbar-light .navbar-nav .nav-link { color: rgba 0,0,0,.5 }`
 * and the legacy helpdesk.css `.navbar-light .navbar-nav .nav-link { color:
 * hex 03363D }` / `:hover { color:hex 2276D2; text-decoration: underline }`.
 * proto §1 `.p-navlink`. */
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link,
.navbar-nav .nav-link {
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  text-decoration: none;   /* folds the legacy `text-decoration: underline` hover of helpdesk.css */
}

/* Active nav link — ember on the soft ember wash. Measured 5.19:1 (spec §1.14).
 * proto §1 `.p-navlink-active`. */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active > .nav-link {
  color: var(--color-primary);
  background-color: rgba(255, 107, 53, 0.1);   /* verbatim from prototype.css `.p-navlink-active` */
}

/* Overrides `.navbar-light .navbar-toggler { border-color: rgba 0,0,0,.1 }`
 * and its dark inline SVG icon. The client shell uses its own `.ds-hamburger`
 * (theme-components.css); this keeps any residual Bootstrap toggler legible. */
.navbar-toggler {
  border-color: var(--color-border);
  color: var(--color-text);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
 * 9. DROPDOWNS — overrides `.dropdown-menu`, `.dropdown-item`,
 *    `.dropdown-divider`, `.dropdown-header`. ref §3 surfaces + spec §1.15.
 * ========================================================================== */

.dropdown-menu {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

/* Overrides `.dropdown-item { color:hex 212529 }` and `:hover { background:hex f8f9fa }`. */
.dropdown-item {
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-surface-raised);
  color: var(--color-primary);
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;   /* inset: the item sits inside the bordered dropdown panel */
}

.dropdown-item.text-danger,
.dropdown-item .text-danger { color: var(--color-error); }

.dropdown-divider {
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}

.dropdown-header {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-bold);
  padding: var(--space-2) var(--space-4);
}

/* ==========================================================================
 * 10. MODALS — overrides `.modal-content`, `.modal-header`, `.modal-footer`,
 *     `.modal-backdrop`, `.close`. ref §8, spec §2.8 / §1.15 row 14.
 * ========================================================================== */

.modal-content {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);   /* verbatim from component-reference.css §8 `.ds-modal` */
  color: var(--color-text);
}

.modal-header,
.modal-footer {
  border-color: var(--color-border);
  padding: var(--space-4) var(--space-6);
}

.modal-body { padding: var(--space-6); color: var(--color-text); }

.modal-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

/* Overrides `.modal-backdrop.show { opacity: .5 }` over a black fill; the
 * design's scrim is a single 62% black. ref §8 `.ds-modal-backdrop`. */
.modal-backdrop,
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.62);   /* verbatim from component-reference.css §8 `.ds-modal-backdrop` */
  opacity: 1;
}

/* Overrides `.close { color:hex 000; text-shadow: 0 1px 0 hex fff; opacity:.5 }` —
 * a black glyph on a dark panel. `.close` is listed in §4.1.1. ref §8
 * `.ds-modal-close`. */
.close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-shadow: none;
  opacity: 1;
  font-size: var(--text-xl);
}

.close:hover,
.close:focus {
  background-color: var(--color-surface);
  color: var(--color-text);
  opacity: 1;
}

.close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mobile: the dialog spans the viewport minus a 16px gutter each side.
 * `@media (max-width: 767px)` — the prototype's `@container` equivalent.
 * ref §8. */
@media (max-width: 767px) {
  .modal-dialog {
    max-width: none;
    width: calc(100% - var(--space-8));
    margin: var(--space-4) auto;
  }
}

/* ==========================================================================
 * 11. PAGINATION — overrides `.pagination`, `.page-item`, `.page-link`.
 *     `.page-item`, `.page-link` and `.active` are DOM contracts (§4.2.3).
 *     ref §5, spec §2.5 / §1.15 row 15.
 * ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
}

/* Overrides `.page-link { color:hex 007bff; background-color:hex fff;
 * border:1px solid hex dee2e6 }` — a white plate per page number. ref §5
 * `.ds-page-btn`. */
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color 150ms ease, border-color 150ms ease;
}

.page-link:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

.page-link:focus {
  box-shadow: none;
}

.page-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Overrides `.page-item.active .page-link { background-color:hex 007bff }`.
 * ref §5 `.ds-page-btn-active`. `.active` (default_full.php) and `.current`
 * (editor_full.php) are BOTH the active-page DOM contract (§4.2.3): the pager
 * views mark the active page with one or the other, so the ember treatment
 * targets both. The active page also carries `aria-current="page"` (added by the
 * pager views in issue #84), which is styled here too so the current page is
 * marked by MORE THAN COLOUR — a bold weight and an assistive-tech state, not
 * the ember fill alone (§4.1.3 rule 7). */
.page-item.active .page-link,
.page-item.current .page-link,
.page-link[aria-current="page"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.page-link[aria-current="page"] { font-weight: var(--font-weight-bold); }

.page-item.disabled .page-link {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.4;
}

/* Mobile: the pagination group wraps and centres, and every button grows to a
 * ≥ 40 px tap target (design-spec-II §2.5, acceptance criterion). The `@media`
 * is the flattened form of the prototype's `@container (max-width: 767px)`
 * (§4.1.3 rule 4). */
@media (max-width: 767px) {
  .pagination { justify-content: center; }
  .page-link { min-width: 40px; min-height: 40px; }
}

/* ==========================================================================
 * 12. BREADCRUMB — overrides `.breadcrumb { background-color: hex e9ecef }`,
 *     a light plate TC-3 flags. spec §2.21.
 * ========================================================================== */

.breadcrumb {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb-item,
.breadcrumb-item a { color: var(--color-text-muted); }

.breadcrumb-item a:hover { color: var(--color-primary); text-decoration: none; }

.breadcrumb-item.active { color: var(--color-text); }

.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* ==========================================================================
 * 13. LIST GROUP — overrides `.list-group-item { background-color:hex fff;
 *     border:1px solid rgba 0,0,0,.125 }`. `.list-group` is a DOM contract
 *     (§4.2.3). ref §4 surfaces, spec §1.15.
 * ========================================================================== */

.list-group {
  border-radius: var(--radius-md);
}

.list-group-item {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.list-group-item:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.list-group-item:last-child  { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}

.list-group-item.active {
  background-color: var(--color-surface-raised);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.list-group-item.disabled { color: var(--color-text-muted); opacity: 0.6; }

/* ==========================================================================
 * 14. UTILITIES that paint a surface — overrides Bootstrap's colour
 *     utilities, which the application uses as "panel background" shorthands.
 *     Left alone, `.bg-white` and `.bg-light` are exactly the > 200 × 80 px
 *     white plates TC-3 detects. spec §1.7.
 * ========================================================================== */

.bg-white,
.bg-light {
  background-color: var(--color-surface-alt);
}

.bg-dark,
.bg-secondary {
  background-color: var(--color-surface-raised);
}

.bg-primary { background-color: var(--color-primary); }
.bg-success { background-color: var(--color-success-bg); }
.bg-danger  { background-color: var(--color-error-bg); }
.bg-warning { background-color: var(--color-warning-bg); }
.bg-info    { background-color: var(--color-info-bg); }

/* Text utilities — `.text-danger` is a DOM contract (§4.2.3). */
.text-muted     { color: var(--color-text-muted); }
.text-danger    { color: var(--color-error); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-info      { color: var(--color-info-ink); }
.text-primary   { color: var(--color-primary); }
.text-dark,
.text-body,
.text-black-50  { color: var(--color-text); }
.text-white     { color: var(--color-text); }

/* Borders */
.border,
.border-top,
.border-right,
.border-bottom,
.border-left { border-color: var(--color-border); }

/* Horizontal rule — overrides Reboot `hr { border-top: 1px solid rgba 0,0,0,.1 }`. */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* ==========================================================================
 * 15. TYPE — headings and the `.page-title` DOM contract (§4.2.3).
 *     spec §1.3. Type steps down on mobile in exactly two places
 *     (hero H1 and page title); everything else keeps its size.
 * ========================================================================== */

h1, .h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); line-height: 1.1; }
h2, .h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: 1.2; }
h3, .h3 { font-size: var(--text-xl);  font-weight: var(--font-weight-bold); line-height: 1.3; }
h4, .h4 { font-size: var(--text-lg);  font-weight: var(--font-weight-bold); line-height: 1.4; }
h5, .h5 { font-size: var(--text-base); font-weight: var(--font-weight-bold); line-height: 1.5; }
h6, .h6 { font-size: var(--text-sm);  font-weight: var(--font-weight-bold); line-height: 1.5; }

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 767px) {
  h1, .h1 { font-size: var(--text-xl); }
  .page-title { font-size: var(--text-xl); }
}