/**
 * Brutalist Academic — Component Layer + Bootstrap Bridge (gitwami)
 * ===============================================================
 * Depends only on design-tokens.css. Loaded AFTER Bootstrap's CDN sheet and
 * the tokens, BEFORE base.css and the feature sheets — so it re-skins
 * Bootstrap's global component classes onto --bru-* without touching the
 * server-rendered HSX markup, and base.css can still refine on top.
 *
 * Two parts:
 *   1. .bru-* primitives — the sanctioned vocabulary for new markup.
 *   2. Bootstrap bridge  — restyles .btn / .card / .badge / .modal / .dropdown
 *      / .table / .offcanvas / form controls / .alert / .pagination /
 *      .breadcrumb so existing pages obey the doctrine for free.
 *
 * Every value reads a var(--bru-*). Hover is gated behind
 * (hover: hover) and (pointer: fine) so touch devices don't stick.
 * FLAT — no drop shadows, no offset blocks, no hover-lift/press-down.
 * Hover/press feedback is a color shift; structure comes from borders.
 */

/* ════════════════════════════════════════════════════════════════════════
   PART 0 — Base surface + structural grid
   ════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Fixed structural grid background — the academic-brutalist signature.
   Subtle (4% ink) so it reads as paper ruling, not a blueprint. Sits behind
   the app shell; gitwami's own shells set their own backgrounds on top. */
body.gitwami-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--bru-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--bru-ink) 1px, transparent 1px);
  background-size: var(--bru-grid-size) var(--bru-grid-size);
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
}

/* Prose column — Rule of 40rem. Operational/dense surfaces opt out. */
.bru-prose { max-width: var(--bru-prose-max); }

/* Small uppercase eyebrow label — use ONLY to resolve real ambiguity */
.bru-label {
  font-size: var(--bru-text-xs);
  font-weight: var(--bru-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bru-tracking-label);
  color: var(--bru-text-muted);
}

/* Section rule */
.bru-rule { border: 0; border-top: var(--bru-border-width) solid var(--bru-border); margin: var(--bru-space-8) 0; }

/* ════════════════════════════════════════════════════════════════════════
   PART 1 — .bru-* primitives (vocabulary for new markup)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────────── */
.bru-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bru-space-2);
  font-family: var(--bru-font-sans); font-size: var(--bru-text-sm); font-weight: var(--bru-font-semibold);
  padding: var(--bru-space-2) var(--bru-space-4);
  border: var(--bru-border-width-2) solid var(--bru-ink);
  border-radius: var(--bru-radius-md);
  background: var(--bru-canvas); color: var(--bru-ink);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--bru-duration-default) var(--bru-ease-default),
              border-color var(--bru-duration-default) var(--bru-ease-default);
}
.bru-btn:active { background: var(--bru-surface-active); }
.bru-btn:focus-visible { outline: var(--bru-border-width-2) solid var(--bru-action); outline-offset: 2px; }
.bru-btn:disabled, .bru-btn.disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .bru-btn:hover { background: var(--bru-surface-hover); }
}
.bru-btn--action, .bru-btn--cta { background: var(--bru-action); color: var(--bru-button-primary-text); border-color: var(--bru-ink); }
@media (hover: hover) and (pointer: fine) { .bru-btn--action:hover, .bru-btn--cta:hover { background: var(--bru-action-hover); } }
.bru-btn--action:active, .bru-btn--cta:active { background: var(--bru-action-hover); }
.bru-btn--ghost { background: transparent; }
@media (hover: hover) and (pointer: fine) { .bru-btn--ghost:hover { background: var(--bru-warning-10); } }
.bru-btn--critical { background: var(--bru-critical); color: var(--bru-button-primary-text); border-color: var(--bru-ink); }
@media (hover: hover) and (pointer: fine) { .bru-btn--critical:hover { background: var(--bru-critical-hover); } }

/* Dense controls (toolbars, segmented, icon buttons) — flat & compact. */
.bru-dense .bru-btn, .bru-btn--dense {
  padding: 0 var(--bru-space-2); height: 28px; border-width: var(--bru-border-width);
}
.bru-btn--icon { width: 36px; height: 36px; padding: 0; }

/* ── Cards & containers ─────────────────────────────────────────────────── */
.bru-card {
  border: var(--bru-border-width) solid var(--bru-border);
  background: var(--bru-panel);
  box-shadow: var(--bru-shadow-brutal-sm);
  border-radius: var(--bru-radius-md);
  padding: var(--bru-space-4);
}
.bru-card--section { padding: var(--bru-space-5); }

.bru-note--error   { border: var(--bru-border-width) solid var(--bru-error);   color: var(--bru-error);   background: var(--bru-panel); padding: var(--bru-space-4); box-shadow: var(--bru-shadow-brutal-sm); }
.bru-note--success { border: var(--bru-border-width) solid var(--bru-success); color: var(--bru-success); background: var(--bru-panel); padding: var(--bru-space-4); box-shadow: var(--bru-shadow-brutal-sm); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.bru-input {
  width: 100%;
  border: var(--bru-border-width) solid var(--bru-ink);
  background: var(--bru-input-bg);
  padding: var(--bru-space-2) var(--bru-space-3);
  font-size: var(--bru-text-sm); color: var(--bru-ink);
  box-shadow: var(--bru-shadow-brutal-xs);
  border-radius: var(--bru-radius-sm);
}
.bru-input:focus-visible { outline: var(--bru-border-width-2) solid var(--bru-action); outline-offset: 1px; }
.bru-field { display: flex; flex-direction: column; gap: var(--bru-space-1); }
.bru-field > label {
  font-size: var(--bru-text-xs); font-weight: var(--bru-font-semibold);
  text-transform: uppercase; letter-spacing: var(--bru-tracking-wide); color: var(--bru-ink-70);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
.bru-list { list-style: none; margin: 0; padding: 0; border: var(--bru-border-width) solid var(--bru-border); background: var(--bru-canvas); }
.bru-list > li { border-bottom: var(--bru-border-width) solid var(--bru-ink-20); }
.bru-list > li:last-child { border-bottom: 0; }
.bru-list-row { display: flex; align-items: center; justify-content: space-between; padding: var(--bru-space-4); transition: background-color var(--bru-duration-default) var(--bru-ease-default); }
@media (hover: hover) and (pointer: fine) { .bru-list-row:hover { background: var(--bru-action-05); } }

/* Natural grid reflow (stationarity) */
.bru-reflow { display: grid; grid-template-columns: 1fr auto; gap: var(--bru-space-4); align-items: center; }

/* ── Status / badges ────────────────────────────────────────────────────── */
.bru-status { font-size: var(--bru-text-sm); font-weight: var(--bru-font-medium); color: var(--bru-ink-70); }
.bru-badge {
  display: inline-block; padding: var(--bru-space-0) var(--bru-space-2);
  font-size: var(--bru-text-xs); font-weight: var(--bru-font-semibold);
  text-transform: uppercase; letter-spacing: var(--bru-tracking-wide);
  border: var(--bru-border-width) solid currentColor; border-radius: var(--bru-radius-sm);
}
.bru-badge--active { color: var(--bru-action); }
.bru-badge--review { color: var(--bru-warning); }
.bru-badge--draft  { color: var(--bru-ink-70); }

/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes bru-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   PART 2 — Bootstrap bridge (restyle global Bootstrap classes onto tokens)
   Loaded after Bootstrap's CDN sheet, so equal-specificity rules win by order.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Shared blocky shape for every Bootstrap button. Lift/press is reserved for
   the deliberate CTA variants below; dense/small/icon/close buttons stay flat. */
.btn {
  --bs-btn-border-width: var(--bru-border-width);
  --bs-btn-border-radius: var(--bru-radius-md);
  --bs-btn-border-radius-sm: var(--bru-radius-md);
  --bs-btn-border-radius-lg: var(--bru-radius-md);
  --bs-btn-font-weight: var(--bru-font-semibold);
  --bs-btn-focus-shadow-rgb: var(--bru-action-rgb);
  border-radius: var(--bru-radius-md);
  font-family: var(--bru-font-sans);
  transition: transform var(--bru-duration-fast) var(--bru-ease-default),
              box-shadow var(--bru-duration-fast) var(--bru-ease-default),
              background-color var(--bru-duration-default) var(--bru-ease-default),
              border-color var(--bru-duration-default) var(--bru-ease-default);
}
.btn:focus-visible { outline: var(--bru-border-width-2) solid var(--bru-action); outline-offset: 2px; box-shadow: none; }

/* Primary CTA channel: gitwami used .btn-warning / .btn-primary as the filled
   call to action. Map both to the functional ACTION (teal) fill, and give them
   the full physical treatment (2px ink border, hard shadow, lift/press). */
.btn-warning, .btn-primary {
  --bs-btn-color: var(--bru-button-primary-text);
  --bs-btn-bg: var(--bru-action);
  --bs-btn-border-color: var(--bru-ink);
  --bs-btn-border-width: var(--bru-border-width-2);
  --bs-btn-hover-color: var(--bru-button-primary-text);
  --bs-btn-hover-bg: var(--bru-action-hover);
  --bs-btn-hover-border-color: var(--bru-ink);
  --bs-btn-active-color: var(--bru-button-primary-text);
  --bs-btn-active-bg: var(--bru-action-hover);
  --bs-btn-active-border-color: var(--bru-ink);
  --bs-btn-disabled-color: var(--bru-button-primary-text);
  --bs-btn-disabled-bg: var(--bru-action);
  --bs-btn-disabled-border-color: var(--bru-ink);
}
.btn-success {
  --bs-btn-color: var(--bru-button-primary-text);
  --bs-btn-bg: var(--bru-success);
  --bs-btn-border-color: var(--bru-ink);
  --bs-btn-border-width: var(--bru-border-width-2);
  --bs-btn-hover-bg: var(--bru-success-hover); --bs-btn-hover-color: var(--bru-button-primary-text); --bs-btn-hover-border-color: var(--bru-ink);
  --bs-btn-active-bg: var(--bru-success-hover); --bs-btn-active-color: var(--bru-button-primary-text); --bs-btn-active-border-color: var(--bru-ink);
}
.btn-danger {
  --bs-btn-color: var(--bru-button-primary-text);
  --bs-btn-bg: var(--bru-critical);
  --bs-btn-border-color: var(--bru-ink);
  --bs-btn-border-width: var(--bru-border-width-2);
  --bs-btn-hover-bg: var(--bru-critical-hover); --bs-btn-hover-color: var(--bru-button-primary-text); --bs-btn-hover-border-color: var(--bru-ink);
  --bs-btn-active-bg: var(--bru-critical-hover); --bs-btn-active-color: var(--bru-button-primary-text); --bs-btn-active-border-color: var(--bru-ink);
}
/* The deliberate CTAs keep the heavier 2px ink border (not the dense -sm
   variants). Feedback is the darker hover/active fill above — flat, no lift. */
.btn-warning:not(.btn-sm), .btn-primary:not(.btn-sm),
.btn-success:not(.btn-sm), .btn-danger:not(.btn-sm), .btn-lg {
  border-width: var(--bru-border-width-2);
}

/* Secondary / ghost actions: gitwami used .btn-outline-light & .btn-outline-secondary.
   Resolve to an ink-outlined ghost on the shared canvas. */
.btn-outline-light, .btn-outline-secondary, .btn-light, .btn-secondary {
  --bs-btn-color: var(--bru-ink);
  --bs-btn-border-color: var(--bru-ink-30);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--bru-ink);
  --bs-btn-hover-bg: var(--bru-warning-10);
  --bs-btn-hover-border-color: var(--bru-ink);
  --bs-btn-active-color: var(--bru-ink);
  --bs-btn-active-bg: var(--bru-action-10);
  --bs-btn-active-border-color: var(--bru-ink);
}
/* Inside the dark sidebar/offcanvas chrome, outline-light keeps a light edge. */
.text-bg-dark .btn-outline-light, .offcanvas .btn-outline-light,
.gitwami-sidebar-desktop .btn-outline-light {
  --bs-btn-color: var(--bru-canvas);
  --bs-btn-border-color: rgb(255 255 255 / 0.35);
  --bs-btn-hover-bg: rgb(255 255 255 / 0.12);
  --bs-btn-hover-color: var(--bru-canvas);
  --bs-btn-hover-border-color: rgb(255 255 255 / 0.6);
}
.btn-outline-danger {
  --bs-btn-color: var(--bru-critical);
  --bs-btn-border-color: var(--bru-critical);
  --bs-btn-hover-color: var(--bru-button-primary-text);
  --bs-btn-hover-bg: var(--bru-critical);
  --bs-btn-hover-border-color: var(--bru-ink);
  --bs-btn-active-bg: var(--bru-critical);
}

/* Bootstrap close button — stays flat/dense */
.btn-close { border-radius: var(--bru-radius-sm); box-shadow: none; }

/* ── Cards & panels ─────────────────────────────────────────────────────── */
.card {
  --bs-card-border-color: var(--bru-border-subtle);
  --bs-card-border-radius: var(--bru-radius-md);
  --bs-card-inner-border-radius: var(--bru-radius-sm);
  --bs-card-bg: var(--bru-panel);
  --bs-card-color: var(--bru-text-primary);
  --bs-card-cap-bg: transparent;
  border: var(--bru-border-width) solid var(--bru-border-subtle);
  border-radius: var(--bru-radius-md);
}
/* shadow-sm/shadow utilities resolve to hard brutalist offsets, never blur */
.shadow-sm { box-shadow: var(--bru-shadow-brutal-sm) !important; }
.shadow    { box-shadow: var(--bru-shadow-brutal) !important; }
.shadow-lg { box-shadow: var(--bru-shadow-brutal) !important; }
.shadow-none { box-shadow: none !important; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--bru-radius-sm);
  font-weight: var(--bru-font-semibold);
  letter-spacing: var(--bru-tracking-wide);
}
.text-bg-warning { background-color: var(--bru-warning) !important; color: var(--bru-canvas) !important; }
.text-bg-secondary { background-color: var(--bru-ink-60) !important; color: var(--bru-canvas) !important; }
.text-bg-dark { background-color: var(--bru-ink) !important; color: var(--bru-canvas) !important; }
.text-bg-success { background-color: var(--bru-success) !important; color: var(--bru-button-primary-text) !important; }
.text-bg-danger { background-color: var(--bru-error) !important; color: var(--bru-button-primary-text) !important; }

/* ── Modal / dialog ─────────────────────────────────────────────────────── */
.modal-content {
  --bs-modal-bg: var(--bru-modal);
  --bs-modal-color: var(--bru-text-primary);
  --bs-modal-border-color: var(--bru-ink);
  --bs-modal-border-width: var(--bru-border-width);
  --bs-modal-border-radius: var(--bru-radius-md);
  --bs-modal-inner-border-radius: var(--bru-radius-sm);
  border: var(--bru-border-width) solid var(--bru-ink);
  border-radius: var(--bru-radius-md);
  box-shadow: var(--bru-shadow-brutal);
}
.modal-header, .modal-footer { border-color: var(--bru-border-subtle); }

/* ── Dropdowns ──────────────────────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-bg: var(--bru-modal);
  --bs-dropdown-color: var(--bru-text-primary);
  --bs-dropdown-border-color: var(--bru-ink);
  --bs-dropdown-border-radius: var(--bru-radius-md);
  --bs-dropdown-border-width: var(--bru-border-width);
  --bs-dropdown-link-color: var(--bru-text-primary);
  --bs-dropdown-link-hover-color: var(--bru-ink);
  --bs-dropdown-link-hover-bg: var(--bru-action-10);
  --bs-dropdown-link-active-color: var(--bru-button-primary-text);
  --bs-dropdown-link-active-bg: var(--bru-action);
  box-shadow: var(--bru-shadow-brutal-sm);
}
.dropdown-divider { border-top-color: var(--bru-border-subtle); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bru-text-primary);
  --bs-table-border-color: var(--bru-border-subtle);
  --bs-table-hover-color: var(--bru-text-primary);
  --bs-table-hover-bg: var(--bru-action-05);
}
.table > thead th {
  text-transform: uppercase;
  letter-spacing: var(--bru-tracking-label);
  font-size: var(--bru-text-xs);
  font-weight: var(--bru-font-semibold);
  color: var(--bru-text-muted);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--bru-radius-sm);
  border: var(--bru-border-width) solid var(--bru-ink-30);
  background-color: var(--bru-input-bg);
  color: var(--bru-text-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bru-action);
  box-shadow: 0 0 0 var(--bru-border-width-2) var(--bru-action-30);
  background-color: var(--bru-input-bg);
  color: var(--bru-text-primary);
}
.form-control::placeholder { color: var(--bru-text-faint); }
.form-check-input { border-color: var(--bru-ink-40); border-radius: var(--bru-radius-sm); }
.form-check-input:checked { background-color: var(--bru-action); border-color: var(--bru-ink); }
.form-check-input:focus { border-color: var(--bru-action); box-shadow: 0 0 0 var(--bru-border-width-2) var(--bru-action-30); }

/* ── Alerts / flash ─────────────────────────────────────────────────────── */
.alert {
  --bs-alert-border-radius: var(--bru-radius-md);
  border-width: var(--bru-border-width);
  border-radius: var(--bru-radius-md);
  box-shadow: var(--bru-shadow-brutal-sm);
}
.alert-success { --bs-alert-color: var(--bru-success); --bs-alert-bg: var(--bru-success-10); --bs-alert-border-color: var(--bru-success); }
.alert-danger, .alert-error { --bs-alert-color: var(--bru-error); --bs-alert-bg: var(--bru-error-10); --bs-alert-border-color: var(--bru-error); }
.alert-warning { --bs-alert-color: var(--bru-warning); --bs-alert-bg: var(--bru-warning-10); --bs-alert-border-color: var(--bru-warning); }
.alert-info { --bs-alert-color: var(--bru-action); --bs-alert-bg: var(--bru-action-10); --bs-alert-border-color: var(--bru-action); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination {
  --bs-pagination-color: var(--bru-text-primary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--bru-border-subtle);
  --bs-pagination-border-radius: var(--bru-radius-md);
  --bs-pagination-hover-color: var(--bru-ink);
  --bs-pagination-hover-bg: var(--bru-action-10);
  --bs-pagination-hover-border-color: var(--bru-ink);
  --bs-pagination-active-color: var(--bru-button-primary-text);
  --bs-pagination-active-bg: var(--bru-action);
  --bs-pagination-active-border-color: var(--bru-ink);
  --bs-pagination-disabled-color: var(--bru-text-faint);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--bru-border-faint);
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--bru-text-faint);
  --bs-breadcrumb-item-active-color: var(--bru-text-muted);
  font-size: var(--bru-text-sm);
}

/* ── Offcanvas (mobile sidebar) keeps the ink-rail look ─────────────────── */
.offcanvas { --bs-offcanvas-border-color: var(--bru-ink); }

/* ── Links ──────────────────────────────────────────────────────────────── */
a { color: var(--bru-action); text-underline-offset: 0.15em; }
a:hover { color: var(--bru-ink); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}