/*
 * TXA 2026 — Transport Expo Asia · shared theme
 * Source of truth for colours, type and base components across every portal.
 * Extracted from the Figma exports in public/txa-assets (see doc/txa/TXA-THEME.md).
 * Load AFTER Bootstrap 5:  <link rel="stylesheet" href="{{ asset('assets/txa/css/txa-theme.css') }}">
 * Fonts:  https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,600;0,700;0,800;1,800&display=swap
 */
:root {
  /* Brand */
  --txa-primary: #0482A3;        /* buttons, active nav, links */
  --txa-primary-hover: #036C88;
  --txa-primary-dark: #035A71;
  --txa-primary-soft: #EBF5F8;   /* tinted card / selected row */
  --txa-primary-border: #C0E0E9;
  --txa-accent: #00BEC8;         /* charts, progress, highlights */
  --txa-mint: #00D8C4;
  --txa-neon: #29EDD0;           /* "Move" highlight, New badge on dark */

  /* Navy */
  --txa-navy: #0C1424;           /* sidebar */
  --txa-navy-2: #111B2E;         /* sidebar hover */
  --txa-navy-deep: #01132F;      /* auth hero / dark panels */
  --txa-navy-3: #031F42;
  --txa-ink: #100E2D;            /* dark AI card */

  /* Neutrals */
  --txa-text: #111827;
  --txa-text-2: #374151;
  --txa-muted: #6B7280;
  --txa-subtle: #94A3B8;
  --txa-border: #E2E8F0;
  --txa-input-border: #D8E1EB;
  --txa-bg: #F8FAFC;
  --txa-surface: #FFFFFF;
  --txa-nav-text: #C3CAD5;
  --txa-nav-section: #64748B;

  /* Status */
  --txa-success: #16A34A; --txa-success-soft: #F0FDF4;
  --txa-warning: #F59E0B; --txa-warning-soft: #FFFBEB;
  --txa-danger:  #EF4444; --txa-danger-soft:  #FEF2F2;
  --txa-info:    #0284C7; --txa-info-soft:    #F0F9FF;

  --txa-radius: 12px;
  --txa-radius-sm: 8px;
  --txa-radius-lg: 16px;
  --txa-shadow: 0 1px 2px rgba(12,20,36,.04), 0 1px 3px rgba(12,20,36,.06);
  --txa-shadow-lg: 0 10px 30px rgba(12,20,36,.08);
  --txa-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --txa-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Legacy aliases — old MIHAS variables now resolve to TXA colours */
  --mihas-orange: var(--txa-primary);
  --mihas-orange-hover: var(--txa-primary-hover);
  --mihas-dark: var(--txa-navy);
  --mihas-dark-light: var(--txa-navy-2);

  /* Bootstrap 5.3 overrides */
  --bs-primary: #0482A3;
  --bs-primary-rgb: 4,130,163;
  --bs-link-color: #0482A3;
  --bs-link-color-rgb: 4,130,163;
  --bs-link-hover-color: #036C88;
  --bs-link-hover-color-rgb: 3,108,136;
  --bs-body-font-family: var(--txa-font);
  --bs-body-color: #111827;
  --bs-border-color: #E2E8F0;
  --bs-focus-ring-color: rgba(4,130,163,.25);
}

body { font-family: var(--txa-font); color: var(--txa-text); }
h1, h2, h3, .txa-display, .page-title { font-family: var(--txa-font-display); letter-spacing: -0.01em; }

/* Buttons */
.btn-primary, .txa-btn-primary {
  --bs-btn-bg: var(--txa-primary); --bs-btn-border-color: var(--txa-primary);
  --bs-btn-hover-bg: var(--txa-primary-hover); --bs-btn-hover-border-color: var(--txa-primary-hover);
  --bs-btn-active-bg: var(--txa-primary-dark); --bs-btn-active-border-color: var(--txa-primary-dark);
  --bs-btn-disabled-bg: var(--txa-primary); --bs-btn-disabled-border-color: var(--txa-primary);
  font-weight: 600; border-radius: var(--txa-radius-sm);
}
.btn-outline-primary, .txa-btn-outline {
  --bs-btn-color: var(--txa-primary); --bs-btn-border-color: var(--txa-primary);
  --bs-btn-hover-bg: var(--txa-primary); --bs-btn-hover-border-color: var(--txa-primary); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--txa-primary-hover); --bs-btn-active-border-color: var(--txa-primary-hover);
  font-weight: 600; border-radius: var(--txa-radius-sm);
}
.text-primary { color: var(--txa-primary) !important; }
.bg-primary { background-color: var(--txa-primary) !important; }
.border-primary { border-color: var(--txa-primary) !important; }

/* Forms */
.form-control, .form-select { border-color: var(--txa-input-border); border-radius: var(--txa-radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--txa-primary); box-shadow: 0 0 0 .2rem rgba(4,130,163,.15); }
.form-check-input:checked { background-color: var(--txa-primary); border-color: var(--txa-primary); }

/* Cards */
.txa-card { background: var(--txa-surface); border: 1px solid var(--txa-border); border-radius: var(--txa-radius); box-shadow: var(--txa-shadow); }
.txa-card-tint { background: var(--txa-primary-soft); border: 1px solid var(--txa-primary); border-radius: var(--txa-radius); }
.txa-card-dark { background: var(--txa-ink); color: #fff; border-radius: var(--txa-radius); }

/* KPI tile (dashboard stat cards) */
.txa-kpi { display:flex; gap:14px; align-items:center; padding:18px 20px; }
.txa-kpi-icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background: var(--txa-info-soft); color: var(--txa-info); }
.txa-kpi-value { font-family: var(--txa-font-display); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.txa-kpi-label { color: var(--txa-text-2); font-size: .85rem; }
.txa-kpi-delta { color: var(--txa-success); font-size: .75rem; font-weight: 600; }

/* Sidebar (dark navy, teal active pill) */
.txa-sidebar { background: var(--txa-navy); color: var(--txa-nav-text); }
.txa-sidebar .txa-nav-section { color: var(--txa-nav-section); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px 20px 6px; }
.txa-sidebar .txa-nav-link { display:flex; align-items:center; gap:10px; margin: 2px 12px; padding: 8px 10px; border-radius: var(--txa-radius-sm); color: var(--txa-nav-text); font-size: .875rem; text-decoration:none; }
.txa-sidebar .txa-nav-link:hover { background: var(--txa-navy-2); color:#fff; }
.txa-sidebar .txa-nav-link.active { background: var(--txa-primary); color:#fff; font-weight:600; }
.txa-badge-new { background: var(--txa-neon); color: var(--txa-navy); font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* Page header with faint transport-city backdrop */
.txa-page-hero { background: linear-gradient(180deg, rgba(255,255,255,.55), #fff 85%), url('../bg/bg-admin-dashboard.webp') top center / cover no-repeat; }

/* Auth split screen */
.txa-auth-hero { background: var(--txa-navy-deep) url('../bg/bg-auth-transport-city.webp') center / cover no-repeat; color:#fff; }
.txa-auth-tagline { font-family: var(--txa-font-display); font-style: italic; font-weight: 800; }
.txa-auth-tagline .txa-move { color: var(--txa-neon); }
.txa-auth-pill { border: 1px solid rgba(41,237,208,.55); background: rgba(1,19,47,.55); border-radius: 14px; padding: 12px 20px; }

/* Status chips */
.txa-chip { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:6px; }
.txa-chip-success { background: var(--txa-success-soft); color: var(--txa-success); }
.txa-chip-warning { background: var(--txa-warning-soft); color: #B45309; }
.txa-chip-danger  { background: var(--txa-danger-soft);  color: #DC2626; }
.txa-chip-info    { background: var(--txa-primary-soft); color: var(--txa-primary); }

/* Progress / charts */
.progress-bar, .txa-bar { background-color: var(--txa-accent); }

/* Footer */
.txa-footer { color: var(--txa-muted); font-size: .75rem; }
.txa-footer strong { color: var(--txa-primary); font-family: var(--txa-font-display); }