/**
 * VIA Official Brand Colors
 * Source: VIA Brand Guidelines v1.0 (February 2026)
 *
 * CRITICAL: VIA is GREEN-based, not blue!
 */

:root {
  /* Primary Palette (GREEN FAMILY) */
  --via-dark-green: #0D3B2E;
  --via-primary-green: #1B6B4F;
  --via-medium-green: #2A9D6E;
  --via-teal: #3ECFA5;
  --via-mint: #7EECD2;
  --via-light-mint: #B5F5E0;

  /* Accent Colors */
  --via-lime: #C8E64A;
  --via-yellow-green: #D4F34D;

  /* Semantic / Status Colors */
  --via-success: #34C759;
  --via-warning: #F5A623;
  --via-error: #E53E3E;
  --via-info: #3B82F6;
  --via-port-orange: #FF8C00;
  --via-neutral: #6B7280;

  /* Neutral Text Palette */
  --via-text-primary: #1A1A1A;
  --via-text-secondary: #374151;
  --via-text-muted: #6B7280;
  --via-border: #E5E7EB;
  --via-bg-surface: #FFFFFF;
  --via-bg-subtle: #F8F9FA;

  /* Spacing (8px base grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* VIA Tailwind Custom Classes */
.bg-via-dark-green { background-color: var(--via-dark-green) !important; }
.bg-via-primary-green { background-color: var(--via-primary-green) !important; }
.bg-via-medium-green { background-color: var(--via-medium-green) !important; }
.bg-via-teal { background-color: var(--via-teal) !important; }
.bg-via-mint { background-color: var(--via-mint) !important; }
.bg-via-light-mint { background-color: var(--via-light-mint) !important; }
.bg-via-lime { background-color: var(--via-lime) !important; }

.text-via-dark-green { color: var(--via-dark-green) !important; }
.text-via-primary-green { color: var(--via-primary-green) !important; }
.text-via-teal { color: var(--via-teal) !important; }
.text-via-mint { color: var(--via-mint) !important; }
.text-via-lime { color: var(--via-lime) !important; }

.border-via-dark-green { border-color: var(--via-dark-green) !important; }
.border-via-teal { border-color: var(--via-teal) !important; }
.border-via-mint { border-color: var(--via-mint) !important; }

/* Status Colors */
.bg-via-success { background-color: var(--via-success) !important; }
.bg-via-warning { background-color: var(--via-warning) !important; }
.bg-via-error { background-color: var(--via-error) !important; }
.bg-via-port-orange { background-color: var(--via-port-orange) !important; }

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

/* Component Overrides for VIA Brand */

/* Sidebar: Dark Green (not gray-900) */
.via-sidebar {
  background-color: var(--via-dark-green) !important;
}

/* Primary CTA Buttons: Dark Green (not blue) */
.via-btn-primary {
  background-color: var(--via-dark-green) !important;
  color: white !important;
}

.via-btn-primary:hover {
  opacity: 0.9;
}

/* Secondary Buttons: Outlined Green */
.via-btn-secondary {
  background-color: transparent !important;
  color: var(--via-primary-green) !important;
  border: 1px solid var(--via-primary-green) !important;
}

/* Accent Buttons: Lime (presentations) */
.via-btn-accent {
  background-color: var(--via-lime) !important;
  color: var(--via-text-primary) !important;
}

/* Active Nav Items: Teal */
.via-nav-active {
  background-color: var(--via-teal) !important;
  color: var(--via-dark-green) !important;
}

/* Status Badges */
.via-badge-completada {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #86EFAC;
}

.via-badge-en-ruta {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.via-badge-en-puerto {
  background-color: #FFEDD5;
  color: #9A3412;
  border: 1px solid #FED7AA;
}

.via-badge-cancelada {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

/* Convoy Status Specific */
.convoy-formando {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.convoy-listo {
  background-color: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #93C5FD;
}

.convoy-en-ruta {
  background-color: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #D8B4FE;
}

.convoy-completado {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #86EFAC;
}

.convoy-detenido {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

/* Cards with Teal Active Border */
.via-card-active {
  border-left: 4px solid var(--via-teal) !important;
}

/* Replace old blue-based classes */
.bg-blue-600,
.bg-blue-500,
.bg-blue-700 {
  background-color: var(--via-dark-green) !important;
}

.text-blue-600,
.text-blue-500,
.text-blue-700 {
  color: var(--via-teal) !important;
}

.border-blue-600,
.border-blue-500 {
  border-color: var(--via-teal) !important;
}

/* Ensure sidebar is always VIA dark green */
aside,
.sidebar,
[class*="sidebar"] {
  background-color: var(--via-dark-green) !important;
}

/* Fix gray-900 to VIA dark green where it's used for sidebar */
.bg-gray-900 {
  background-color: var(--via-dark-green) !important;
}

/* Active states should use teal */
.active,
[class*="active"]:not(.convoy-):not(.via-badge-) {
  background-color: var(--via-teal) !important;
  color: var(--via-dark-green) !important;
}

/* Hover states for nav items */
.via-nav-item:hover {
  background-color: rgba(62, 207, 165, 0.1);
}

/* Override Tailwind blue utilities with VIA colors */
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-500:hover {
  background-color: var(--via-primary-green) !important;
}

/* Focus rings should be teal */
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus {
  --tw-ring-color: var(--via-teal) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-blue-600:focus {
  border-color: var(--via-teal) !important;
}