/* ==========================================================================
   Mutare OS — Brand Teal theme
   Layered on top of Bootstrap 5.3 (CDN). Loaded AFTER the Bootstrap stylesheet
   so these overrides win. Presentation only — no behavior depends on this file.

   Palette is keyed to the Mutare Mundo logo (teal hexagonal ring), split into:
   - Logo/accent teals (bright)  -> borders, hovers, soft callouts, decoration
   - Accessible UI-surface teals (darker) -> anything with white text on it
     (buttons, badges, .text-bg-*) so contrast passes WCAG AA.
   ========================================================================== */

:root {
  /* --- Brand tokens --- */
  --mutare-primary: #247383;        /* white-text safe: buttons / badges / links */
  --mutare-primary-hover: #1d6873;
  --mutare-primary-active: #185560;
  --mutare-primary-dark: #2a5b67;   /* navbar */
  --mutare-accent: #2f8b98;         /* bright logo teal — accents only */
  --mutare-accent-light: #6ec6ce;   /* bright logo teal — accents only */
  --mutare-accent-soft: #e3f1f2;    /* soft tint for callouts / table headers */

  --mutare-success: #15803d;
  --mutare-info: #0f766e;
  --mutare-warning: #f59e0b;
  --mutare-danger: #dc2626;

  --mutare-surface: #f4f8f8;        /* page background (cool off-white) */
  --mutare-text: #14252b;           /* body text */
  --mutare-muted: #566a70;          /* AA-legible replacement for text-muted */
  --mutare-border: #dde7e7;

  /* --- Map Bootstrap runtime tokens to the brand --- */
  --bs-primary: var(--mutare-primary);
  --bs-primary-rgb: 36, 115, 131;                /* #247383 */
  --bs-primary-text-emphasis: #185560;
  --bs-link-color: var(--mutare-primary);
  --bs-link-color-rgb: 36, 115, 131;
  --bs-link-hover-color: var(--mutare-primary-hover);
  --bs-link-hover-color-rgb: 29, 104, 115;

  --bs-success-rgb: 21, 128, 61;
  --bs-info-rgb: 15, 118, 110;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 220, 38, 38;

  --bs-body-bg: var(--mutare-surface);
  --bs-body-color: var(--mutare-text);
  --bs-secondary-color: var(--mutare-muted);
  --bs-border-color: var(--mutare-border);

  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.85rem;

  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  background-color: var(--mutare-surface);
  color: var(--mutare-text);
}

/* Contrast fix: Bootstrap's default .text-muted is too light on our surface. */
.text-muted {
  color: var(--mutare-muted) !important;
}

/* --------------------------------------------------------------------------
   Buttons — Bootstrap 5.3 compiles .btn-* colors, so :root vars don't reach
   them; override the per-component --bs-btn-* tokens explicitly.
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--mutare-primary);
  --bs-btn-border-color: var(--mutare-primary);
  --bs-btn-hover-bg: var(--mutare-primary-hover);
  --bs-btn-hover-border-color: var(--mutare-primary-hover);
  --bs-btn-active-bg: var(--mutare-primary-active);
  --bs-btn-active-border-color: var(--mutare-primary-active);
  --bs-btn-disabled-bg: var(--mutare-primary);
  --bs-btn-disabled-border-color: var(--mutare-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--mutare-primary);
  --bs-btn-border-color: var(--mutare-primary);
  --bs-btn-hover-bg: var(--mutare-primary);
  --bs-btn-hover-border-color: var(--mutare-primary);
  --bs-btn-active-bg: var(--mutare-primary-hover);
  --bs-btn-active-border-color: var(--mutare-primary-hover);
}

.btn-success {
  --bs-btn-bg: var(--mutare-success);
  --bs-btn-border-color: var(--mutare-success);
  --bs-btn-hover-bg: #126c34;
  --bs-btn-hover-border-color: #126c34;
  --bs-btn-active-bg: #0f5b2c;
  --bs-btn-active-border-color: #0f5b2c;
  --bs-btn-disabled-bg: var(--mutare-success);
  --bs-btn-disabled-border-color: var(--mutare-success);
}

/* Warning keeps dark text for contrast on the yellow surface. */
.btn-warning {
  --bs-btn-bg: var(--mutare-warning);
  --bs-btn-border-color: var(--mutare-warning);
  --bs-btn-hover-bg: #e08e07;
  --bs-btn-hover-border-color: #e08e07;
  --bs-btn-color: var(--mutare-text);
  --bs-btn-hover-color: var(--mutare-text);
  --bs-btn-active-color: var(--mutare-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--mutare-primary-dark);
  --bs-btn-border-color: var(--mutare-border);
  --bs-btn-hover-bg: var(--mutare-accent-soft);
  --bs-btn-hover-border-color: var(--mutare-accent);
  --bs-btn-hover-color: var(--mutare-primary-active);
  --bs-btn-active-bg: var(--mutare-accent-soft);
  --bs-btn-active-color: var(--mutare-primary-active);
}

/* --------------------------------------------------------------------------
   Text-contrast enforcement on color surfaces (all must pass AA).
   -------------------------------------------------------------------------- */
.btn-primary,
.text-bg-primary,
.text-bg-success,
.text-bg-info {
  color: #fff !important;
}

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

/* --------------------------------------------------------------------------
   Navbar — brand dark teal. Keep navbar-dark for light text/toggler.
   -------------------------------------------------------------------------- */
.bg-mutare {
  background-color: var(--mutare-primary-dark) !important;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Logo visibility: logo teal is close to the navbar teal, so seat it on a
   light chip so it never blends into the bar. */
.navbar-brand-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.2rem;
  line-height: 0;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cards — softer border + shadow only. NO global hover lift; hover is scoped
   to explicitly interactive cards below.
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--mutare-border);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1px 2px rgba(20, 37, 43, 0.04),
    0 1px 3px rgba(20, 37, 43, 0.06);
}

.action-card,
.route-card {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.action-card:hover,
.route-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(20, 37, 43, 0.1);
  border-color: var(--mutare-accent-light);
}

/* --------------------------------------------------------------------------
   Tables — subtle branded header + row hover.
   -------------------------------------------------------------------------- */
.table {
  --bs-table-hover-bg: var(--mutare-accent-soft);
}

.table > thead {
  background-color: var(--mutare-accent-soft);
  color: var(--mutare-primary-active);
}

.table > thead th {
  font-weight: 600;
  border-bottom-color: var(--mutare-border);
}

/* --------------------------------------------------------------------------
   Badges & alerts — a touch more presence; alerts get a left accent so status
   is not communicated by color fill alone (text labels remain).
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4em 0.6em;
}

.alert {
  border-left-width: 4px;
}

/* --------------------------------------------------------------------------
   Forms — align focus/inputs to the brand.
   -------------------------------------------------------------------------- */
.form-label {
  font-weight: 500;
  color: var(--mutare-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mutare-accent);
  box-shadow: 0 0 0 0.2rem rgba(47, 139, 152, 0.25);
}

/* --------------------------------------------------------------------------
   Accessibility — always-visible focus ring on interactive elements.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--mutare-accent);
  outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(47, 139, 152, 0.35);
}

/* Minimum touch target for field-use driver actions. */
.btn-touch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Driver "Ruta de hoy" — readability for outdoor / mobile use.
   -------------------------------------------------------------------------- */
.route-card .route-client {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mutare-text);
}

.route-benefit {
  border-left: 4px solid var(--mutare-accent);
  background: var(--mutare-accent-soft);
  color: var(--mutare-primary-active);
}

/* Completed items read calmer so they don't compete with pending tasks. */
.route-card.is-done {
  opacity: 0.85;
  background-color: #fbfdfd;
}

/* --------------------------------------------------------------------------
   Motion — respect user preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}