/* ==========================================================================
   GORPCORE — Digital Gorpcore UI System for ZvejasPro
   ===========================================================================
   CSS-only layer on top of Bootstrap 5.3.
   Loaded AFTER bootstrap.min.css to override via cascade.

   Design Rationale:
   • Industrial, field-ready aesthetic — Digital Gorpcore
   • WCAG AAA contrast (7:1 normal, 4.5:1 large text)
   • 48px minimum touch targets for gloved / wet hands
   • No thin fonts (<600 forbidden), no soft shadows
   • Thick borders (2–4px) over decorative depth
   • Earth tones + high-vis accent (#FF5F00, #BFFF00)
   • Mobile-first, server-rendered, HTMX-stable
   • System font stack only — zero external loads
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES — Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --color-bg: #1a1f1a;
  --color-surface: #2a312a;
  --color-surface-alt: #323a32;
  --color-accent: #FF5F00;
  --color-accent-alt: #BFFF00;
  --color-text-primary: #f5f5f0;
  --color-text-secondary: #c8d0c0;
  --color-border: #4a524a;
  --color-border-heavy: #5a625a;
  --color-error: #ff4444;
  --color-success: #00ff88;
  --color-warning: #ffb800;
  --color-info: #40c8ff;

  /* Spacing */
  --space-unit: 0.5rem;
  --space-xs: calc(var(--space-unit) * 0.5);
  --space-sm: var(--space-unit);
  --space-md: calc(var(--space-unit) * 2);
  --space-lg: calc(var(--space-unit) * 3);

  /* Touch */
  --touch-min: 3rem; /* 48px */

  /* Typography */
  --font-base: 1.125rem;
  --font-weight-min: 600;
  --line-height-base: 1.6;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", "Fira Code", "Consolas", monospace;

  /* Borders */
  --border-thickness: 2px;
  --border-heavy: 4px;
  --radius-base: 4px;

  /* Focus ring */
  --focus-ring: 3px solid var(--color-accent-alt);
  --focus-ring-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. BASE RESET — Body, Typography, Links
   --------------------------------------------------------------------------
   Dark earth-tone background, high-contrast light text.
   All font weights enforced to ≥600 for field legibility.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  border-color: var(--color-border);
}

html {
  font-size: 100%; /* 16px base, scaled by --font-base */
}

body {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-stack) !important;
  font-size: var(--font-base) !important;
  font-weight: var(--font-weight-min) !important;
  line-height: var(--line-height-base) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.3rem !important; }
h4, h5, h6 { font-size: 1.125rem !important; }

p, li, td, th, span, label, div {
  font-weight: var(--font-weight-min);
}

a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: var(--font-weight-min);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-accent-alt) !important;
}

/* Focus visible — universal 3px high-contrast outline */
*:focus-visible {
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: none !important;
}

hr {
  border-color: var(--color-border) !important;
  border-width: var(--border-thickness) !important;
  opacity: 1 !important;
}

strong, b {
  font-weight: 800 !important;
}

small, .small {
  font-weight: var(--font-weight-min) !important;
}

/* --------------------------------------------------------------------------
   3. CONTAINER — Override Bootstrap container
   -------------------------------------------------------------------------- */
.container {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}

/* --------------------------------------------------------------------------
   4. NAVBAR — Dark industrial header with accent border
   -------------------------------------------------------------------------- */
.navbar {
  background-color: var(--color-surface) !important;
  border-bottom: var(--border-heavy) solid var(--color-accent) !important;
  padding: var(--space-sm) var(--space-md) !important;
  margin-bottom: var(--space-lg) !important;
}

.navbar-brand {
  color: var(--color-accent) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.navbar-brand:hover {
  color: var(--color-accent-alt) !important;
}

/* --------------------------------------------------------------------------
   5. CARDS — Dark surface, thick borders, hard edges
   --------------------------------------------------------------------------
   All Bootstrap .card variants restyled for field-ready readability.
   No soft shadows — visible borders replace decorative depth.
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface) !important;
  border: var(--border-thickness) solid var(--color-border) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.card-header {
  background-color: var(--color-surface-alt) !important;
  border-bottom: var(--border-thickness) solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-md) !important;
  font-weight: 700 !important;
}

/* Primary header — accent top bar for hierarchy */
.card-header.bg-primary,
.card-header.bg-primary-subtle {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-heavy) solid var(--color-accent) !important;
  color: var(--color-text-primary) !important;
}

.card-header.bg-success {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-heavy) solid var(--color-success) !important;
  color: var(--color-text-primary) !important;
}

.card-header.bg-warning {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-heavy) solid var(--color-warning) !important;
  color: var(--color-text-primary) !important;
}

.card-header.bg-info {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-heavy) solid var(--color-info) !important;
  color: var(--color-text-primary) !important;
}

.card-header.bg-danger {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-heavy) solid var(--color-error) !important;
  color: var(--color-text-primary) !important;
}

.card-body {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-md) !important;
}

.card-body.bg-light {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.card-footer {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-thickness) solid var(--color-border) !important;
  padding: var(--space-md) !important;
}

.card-text {
  color: var(--color-text-secondary) !important;
}

.card.border-primary {
  border-color: var(--color-accent) !important;
}

.card.border-danger {
  border-color: var(--color-error) !important;
}

.card.shadow,
.card.shadow-sm {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — 48px minimum, solid borders, clear states
   --------------------------------------------------------------------------
   Every interactive button meets 48px touch target.
   Solid visible borders, distinct pressed + disabled states.
   High-vis accents reserved for primary actions only.
   -------------------------------------------------------------------------- */
.btn {
  min-height: var(--touch-min) !important;
  border-width: var(--border-thickness) !important;
  border-radius: var(--radius-base) !important;
  font-weight: 700 !important;
  font-size: var(--font-base) !important;
  padding: var(--space-sm) var(--space-md) !important;
  transition: background-color 0.1s ease, border-color 0.1s ease,
    transform 0.05s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Pressed (active) state — slight inset effect */
.btn:active {
  transform: scale(0.97) !important;
}

/* Primary — high-vis accent */
.btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #0d0d0d !important;
}

.btn-primary:hover {
  background-color: #e65500 !important;
  border-color: #cc4c00 !important;
  color: #0d0d0d !important;
}

/* Success — high-contrast green */
.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #0d0d0d !important;
}

.btn-success:hover {
  background-color: #00dd77 !important;
  border-color: #00bb66 !important;
  color: #0d0d0d !important;
}

/* Secondary — muted surface */
.btn-secondary {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-heavy) !important;
  color: var(--color-text-primary) !important;
}

.btn-secondary:hover {
  background-color: var(--color-border) !important;
  border-color: var(--color-text-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* Danger */
.btn-danger {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background-color: #dd3333 !important;
  border-color: #cc2222 !important;
}

/* Warning */
.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #0d0d0d !important;
}

.btn-warning:hover {
  background-color: #e6a600 !important;
  border-color: #cc9400 !important;
}

/* Light — used in card headers */
.btn-light {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-accent) !important;
}

.btn-light:hover {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-accent-alt) !important;
}

/* Info */
.btn-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: #0d0d0d !important;
}

/* --- Outline Variants --- */
.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-accent) !important;
  color: #0d0d0d !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--color-border-heavy) !important;
  color: var(--color-text-secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-text-secondary) !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}

.btn-outline-danger:hover {
  background-color: var(--color-error) !important;
  color: #fff !important;
}

.btn-outline-success {
  background-color: transparent !important;
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}

.btn-outline-success:hover {
  background-color: var(--color-success) !important;
  color: #0d0d0d !important;
}

.btn-outline-info {
  background-color: transparent !important;
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
}

.btn-outline-info:hover {
  background-color: var(--color-info) !important;
  color: #0d0d0d !important;
}

.btn-outline-light {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

.btn-outline-light:hover {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-primary) !important;
}

/* Button sizes — ensure sm still meets 48px */
.btn-sm {
  min-height: var(--touch-min) !important;
  font-size: 0.95rem !important;
  padding: var(--space-xs) var(--space-sm) !important;
}

.btn-lg {
  min-height: calc(var(--touch-min) + 0.5rem) !important;
  font-size: 1.15rem !important;
  padding: var(--space-sm) var(--space-lg) !important;
}

/* Disabled state — clearly muted */
.btn:disabled,
.btn.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Close button override */
.btn-close {
  min-height: var(--touch-min) !important;
  min-width: var(--touch-min) !important;
  filter: invert(1) !important;
  opacity: 0.8 !important;
}

.btn-close:hover {
  opacity: 1 !important;
}

/* Button groups — ensure spacing */
.btn-group {
  gap: 2px;
}

.btn-group > .btn {
  border-radius: var(--radius-base) !important;
}

/* --------------------------------------------------------------------------
   7. FORMS — Dark inputs, thick borders, AAA contrast
   --------------------------------------------------------------------------
   Dark field backgrounds with high-contrast text.
   Enforced 48px height for glove-friendly interaction.
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--color-bg) !important;
  border: var(--border-thickness) solid var(--color-border) !important;
  border-radius: var(--radius-base) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-base) !important;
  font-weight: var(--font-weight-min) !important;
  min-height: var(--touch-min) !important;
  padding: var(--space-sm) var(--space-md) !important;
  transition: border-color 0.15s ease !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--color-bg) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

.form-control::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 0.6 !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
  opacity: 0.5 !important;
  cursor: not-allowed;
}

/* Plaintext form control (used in distribution table) */
.form-control-plaintext {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-min) !important;
  padding: var(--space-sm) 0 !important;
}

/* Checkbox and radio — enlarged for gloves */
.form-check-input {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem;
  background-color: var(--color-bg) !important;
  border: var(--border-thickness) solid var(--color-border-heavy) !important;
  border-radius: var(--radius-base) !important;
  cursor: pointer;
  margin-top: 0 !important;
}

.form-check-input:checked {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.form-check-input:focus {
  box-shadow: none !important;
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

.form-check-label {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-min) !important;
  padding-left: var(--space-xs) !important;
}

/* File input */
input[type="file"].form-control {
  padding: var(--space-sm) !important;
}

/* Form labels */
.form-label {
  color: var(--color-text-secondary) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs) !important;
}

/* Form text / help text */
.form-text,
.helptext {
  color: var(--color-text-secondary) !important;
  font-size: 0.9rem !important;
  opacity: 0.8;
}

/* Django errorlist */
.errorlist {
  list-style: none;
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-xs) 0;
  background-color: rgba(255, 68, 68, 0.15);
  border-left: var(--border-heavy) solid var(--color-error);
  border-radius: var(--radius-base);
}

.errorlist li {
  color: var(--color-error) !important;
  font-weight: 700 !important;
  font-size: 0.95rem;
}

/* Input group */
.input-group {
  gap: 2px;
}

.input-group > .form-control,
.input-group > .btn {
  border-radius: var(--radius-base) !important;
}

/* --------------------------------------------------------------------------
   8. TABLES — Dark surface, thick borders, field-grade data
   --------------------------------------------------------------------------
   Monospace-adjacent feel for data columns.
   Sticky header stays visible during scroll.
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: var(--color-surface);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: var(--color-surface-alt);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-hover-bg: rgba(255, 95, 0, 0.08);
  --bs-table-hover-color: var(--color-text-primary);
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: var(--font-base) !important;
}

.table > thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table > thead th,
.table-light th,
.table-dark th,
thead.table-light th,
thead.table-dark th {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: var(--border-heavy) solid var(--color-accent) !important;
  white-space: nowrap;
}

.table > thead th a {
  color: var(--color-text-secondary) !important;
}

.table > thead th a:hover {
  color: var(--color-accent) !important;
}

.table > tbody > tr > td {
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle;
}

.table > tbody > tr:hover > td {
  background-color: rgba(255, 95, 0, 0.06) !important;
}

/* Table responsive container */
.table-responsive {
  border: var(--border-thickness) solid var(--color-border);
  border-radius: var(--radius-base);
  background-color: var(--color-surface);
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--color-border) !important;
}

/* --------------------------------------------------------------------------
   9. ALERTS & MESSAGES — High-vis status indicators
   --------------------------------------------------------------------------
   Django messages and Bootstrap alerts restyled
   with left accent bar and dark background.
   -------------------------------------------------------------------------- */
.alert {
  background-color: var(--color-surface-alt) !important;
  border: var(--border-thickness) solid var(--color-border) !important;
  border-radius: var(--radius-base) !important;
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-min) !important;
  padding: var(--space-md) !important;
  border-left-width: var(--border-heavy) !important;
}

.alert-success,
.alert.alert-success {
  border-left-color: var(--color-success) !important;
}

.alert-danger,
.alert.alert-danger,
.alert-error {
  border-left-color: var(--color-error) !important;
  background-color: rgba(255, 68, 68, 0.1) !important;
}

.alert-warning,
.alert.alert-warning {
  border-left-color: var(--color-warning) !important;
}

.alert-info,
.alert.alert-info {
  border-left-color: var(--color-info) !important;
}

.alert-primary {
  border-left-color: var(--color-accent) !important;
}

/* Alert dismissible close */
.alert .btn-close {
  filter: invert(1) !important;
}

/* --------------------------------------------------------------------------
   10. BADGES — High-contrast field labels
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: var(--space-xs) var(--space-sm) !important;
  border-radius: var(--radius-base) !important;
  border: var(--border-thickness) solid transparent;
  letter-spacing: 0.03em;
}

.badge.bg-primary {
  background-color: var(--color-accent) !important;
  color: #0d0d0d !important;
}

.badge.bg-success {
  background-color: var(--color-success) !important;
  color: #0d0d0d !important;
}

.badge.bg-warning {
  background-color: var(--color-warning) !important;
  color: #0d0d0d !important;
}

.badge.bg-danger {
  background-color: var(--color-error) !important;
  color: #fff !important;
}

.badge.bg-info {
  background-color: var(--color-info) !important;
  color: #0d0d0d !important;
}

.badge.bg-light {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

.badge.text-dark {
  color: #0d0d0d !important;
}

.badge.rounded-pill {
  border-radius: var(--radius-base) !important;
}

/* --------------------------------------------------------------------------
   11. MODALS — Dark dialogs with accent header
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--color-surface) !important;
  border: var(--border-thickness) solid var(--color-border-heavy) !important;
  border-radius: var(--radius-base) !important;
  color: var(--color-text-primary) !important;
}

.modal-header {
  background-color: var(--color-surface-alt) !important;
  border-bottom: var(--border-heavy) solid var(--color-accent) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-md) !important;
}

.modal-header.bg-primary {
  background-color: var(--color-surface-alt) !important;
}

.modal-body {
  padding: var(--space-md) !important;
}

.modal-footer {
  background-color: var(--color-surface-alt) !important;
  border-top: var(--border-thickness) solid var(--color-border) !important;
  padding: var(--space-md) !important;
  gap: var(--space-sm);
}

.modal-title {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
}

.modal-backdrop {
  background-color: #0d0d0d !important;
}

/* --------------------------------------------------------------------------
   12. LIST GROUPS — Dark industrial lists
   -------------------------------------------------------------------------- */
.list-group-item {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-min) !important;
  padding: var(--space-md) !important;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.list-group-item-action {
  transition: background-color 0.1s ease !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-accent) !important;
}

.list-group-item.text-muted {
  color: var(--color-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   13. HTMX STATES — Loading, swapping, request indicators
   --------------------------------------------------------------------------
   Visible loading feedback with no layout shift.
   Containers maintain dimensions during swaps.
   -------------------------------------------------------------------------- */

/* Indicator — hidden by default, visible during request */
.htmx-indicator {
  display: none !important;
  color: var(--color-accent) !important;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex !important;
  animation: gorpcore-pulse 1s ease-in-out infinite;
}

/* During request — subtle opacity reduction on target */
.htmx-request:not(.htmx-indicator) {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Swapping state */
.htmx-swapping {
  opacity: 0.4 !important;
  transition: opacity 0.1s ease !important;
}

/* Settling state (after new content is inserted) */
.htmx-settling {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Swap containers — maintain min-height to prevent layout shift */
#sector-table-container,
#distribution-table-container,
#team-cards-container {
  min-height: 200px;
  transition: opacity 0.15s ease;
}

/* Loading pulse animation */
@keyframes gorpcore-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Fade-out for "OK!" confirmation text */
.fade-out {
  animation: gorpcore-fadeout 2s ease forwards;
}

@keyframes gorpcore-fadeout {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   14. UTILITY OVERRIDES — Bootstrap text/bg utilities
   --------------------------------------------------------------------------
   Override Bootstrap's color utilities to match gorpcore palette.
   -------------------------------------------------------------------------- */
.text-muted {
  color: var(--color-text-secondary) !important;
}

.text-dark {
  color: var(--color-text-primary) !important;
}

.text-white {
  color: var(--color-text-primary) !important;
}

.text-primary {
  color: var(--color-accent) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-error) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.bg-primary {
  background-color: var(--color-surface-alt) !important;
}

.bg-primary-subtle {
  background-color: var(--color-surface-alt) !important;
}

.bg-light {
  background-color: var(--color-surface) !important;
}

.bg-dark {
  background-color: var(--color-bg) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-danger {
  background-color: var(--color-error) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

/* Override inline style on team card edit button */
.btn-outline-light[style*="color: black"] {
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}

.btn-outline-light[style*="color: black"]:hover {
  color: var(--color-text-primary) !important;
  background-color: var(--color-surface-alt) !important;
}

/* text decoration overrides */
.text-decoration-none {
  text-decoration: none !important;
}

/* Border utilities */
.border {
  border-color: var(--color-border) !important;
}

.border-bottom {
  border-bottom-color: var(--color-border) !important;
}

/* Lead text */
.lead {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-min) !important;
}

/* --------------------------------------------------------------------------
   15. PAGINATION — Touch-friendly page navigation
   -------------------------------------------------------------------------- */
.pagination .page-link {
  background-color: var(--color-surface) !important;
  border: var(--border-thickness) solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  min-height: var(--touch-min) !important;
  min-width: var(--touch-min) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
}

.pagination .page-link:hover {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-accent) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #0d0d0d !important;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   16. SCROLLBAR — Dark themed for consistency
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-heavy);
  border-radius: var(--radius-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-heavy) var(--color-bg);
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — Mobile-first adjustments
   --------------------------------------------------------------------------
   Ensure full usability on small screens.
   Stack horizontal layouts, enlarge touch targets.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  h1 {
    font-size: 1.4rem !important;
  }

  /* Stack header flex content on mobile */
  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-sm);
  }

  /* Full-width buttons on mobile */
  .btn-group {
    flex-wrap: wrap;
  }

  .card-header .btn-group {
    margin-top: var(--space-sm);
  }

  /* Stack button groups vertically on small screens */
  .col-md-6.d-flex.align-items-end.gap-2 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .col-md-6.d-flex.align-items-end.gap-2 .btn-group {
    width: 100%;
  }

  .col-md-6.d-flex.align-items-end.gap-2 .btn-group .btn {
    flex: 1;
  }

  /* Ensure table cells don't overflow */
  .table-responsive {
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   DROPDOWN MENUS — Dark surface, readable text
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--color-surface);
  --bs-dropdown-color: var(--color-text-primary);
  --bs-dropdown-border-color: var(--color-border);
  --bs-dropdown-link-color: var(--color-text-primary);
  --bs-dropdown-link-hover-color: var(--color-text-primary);
  --bs-dropdown-link-hover-bg: var(--color-surface-alt);
  --bs-dropdown-header-color: var(--color-text-secondary);
  background-color: var(--color-surface) !important;
  border: var(--border-thickness) solid var(--color-border) !important;
  border-radius: var(--radius-base) !important;
  color: var(--color-text-primary) !important;
}

.dropdown-menu .dropdown-header {
  color: var(--color-text-secondary) !important;
  font-weight: 700 !important;
}

.dropdown-menu .form-check-label,
.dropdown-menu label,
.dropdown-menu span,
.dropdown-menu p,
.dropdown-menu div {
  color: var(--color-text-primary) !important;
}

.dropdown-menu hr {
  border-color: var(--color-border) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   END OF GORPCORE CSS SYSTEM
   --------------------------------------------------------------------------
   HTMX Integration Notes:
   - All HTMX swap containers (#sector-table-container, #distribution-table-container,
     #team-cards-container) maintain min-height to prevent layout shift.
   - .htmx-request dims content and disables pointer events for clear feedback.
   - .htmx-swapping provides additional visual transition during swap.
   - .htmx-settling ensures smooth opacity transition after content insert.
   - All touch targets remain ≥48px after partial updates because sizing is
     defined by CSS class rules, not inline or JS-dependent styles.
   - The .fade-out class provides confirmation feedback for inline saves.
   -------------------------------------------------------------------------- */