/* ==========================================================================
   Equita Logistics — Design Tokens
   Phase 5: Design System & Content Refinement
   Generated from audit of existing CSS (main.css, style.css, logistico.css,
   assets/css/style.css, assets/css/vendor.min.css)
   ========================================================================== */

:root {

  /* ───────────────────────────────────────────────────────────────
     Color Palette — 6-color system + status colors
     ─────────────────────────────────────────────────────────────── */

  /* Brand Colors */
  --color-primary:         #143369;  /* Dark blue — primary brand (67 uses) */
  --color-primary-dark:    #0a1f4d;  /* Darker variant — hover/active states */
  --color-secondary:       #e53c35;  /* Red — CTA buttons, danger actions (48 uses) */
  --color-accent:          #0072c6;  /* Blue — links, highlights (47 uses) */
  --color-accent-orange:   #e11d07;  /* Orange-red — h4 accents, footer hover (11 uses) */

  /* Neutral Colors */
  --color-white:           #ffffff;  /* Primary background */
  --color-bg-light:        #f5f5f5;  /* Light section backgrounds (23 uses) */
  --color-bg-lighter:      #f9f9f9;  /* Very light backgrounds */
  --color-text-primary:    #212529;  /* Main body text */
  --color-text-secondary:  #5b5b5d;  /* Secondary text, labels (22 uses) */
  --color-text-muted:      #9b9b9b;  /* Muted/disabled text (used for body in CSS) */
  --color-border:          #e5e5e5;  /* Form borders, dividers (18 uses) */
  --color-border-dark:     #dbdcdd;  /* Darker borders (12 uses) */
  --color-black:           #000000;  /* Headings, strong text (21+ uses) */

  /* Status Colors (shipment tracking) */
  --color-status-pending:          #0056b3;  /* Dark blue — passes WCAG AA with white text */
  --color-status-picked-up:        #6c757d;  /* Grey */
  --color-status-out-for-delivery: #1e7e34;  /* Dark green — passes WCAG AA with white text */
  --color-status-in-transit:       #6f42c1;  /* Purple */
  --color-status-enroute:          #20c997;  /* Teal */
  --color-status-cancelled:        #c82333;  /* Dark red — passes WCAG AA with white text */
  --color-status-delivered:        #1a6e34;  /* Dark green — passes WCAG AA with white text */
  --color-status-returned:         #dc3545;  /* Dark red */

  /* ───────────────────────────────────────────────────────────────
     Typography
     ─────────────────────────────────────────────────────────────── */

  /* Font Families */
  --font-family-body:      'Roboto', sans-serif;    /* Primary body font (100 uses) */
  --font-family-heading:   'Rubik', sans-serif;     /* Heading font (67 uses) */
  --font-family-monospace: 'Courier New', monospace;

  /* Type Scale — based on existing CSS (px → rem at 16px root)
     Body base: 14px (0.875rem) is used in existing CSS.
     Headings: h1=52px, h2=42px, h3=38px, h4=28px, h5=24px, h6=18px */
  --text-xs:    0.75rem;   /* 12px — captions, small text */
  --text-sm:    0.875rem;  /* 14px — body text (current base) */
  --text-base:  1rem;      /* 16px — standard body (fallback) */
  --text-lg:    1.125rem;  /* 18px — h6 equivalent */
  --text-xl:    1.5rem;    /* 24px — h5 equivalent */
  --text-2xl:   1.75rem;   /* 28px — h4 equivalent */
  --text-3xl:   2.375rem;  /* 38px — h3 equivalent */
  --text-4xl:   2.625rem;  /* 42px — h2 equivalent */
  --text-5xl:   3.25rem;   /* 52px — h1 equivalent */
  --text-6xl:   3.9375rem; /* 63px — hero heading */

  /* Font Weights */
  --font-weight-regular:   400;  /* Body text */
  --font-weight-medium:    500;  /* Medium emphasis */
  --font-weight-semibold:  600;  /* Subheadings */
  --font-weight-bold:      700;  /* Strong headings (22 uses) */
  --font-weight-extrabold: 800;  /* Extra bold (15 uses) */

  /* Line Heights */
  --line-height-tight:   1.2;  /* Headings */
  --line-height-normal:  1.5;  /* Body text */
  --line-height-loose:   1.7;  /* Paragraph spacing */

  /* ───────────────────────────────────────────────────────────────
     Spacing — 4px base unit scale
     ─────────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */

  /* ───────────────────────────────────────────────────────────────
     Border Radius
     ─────────────────────────────────────────────────────────────── */
  --border-radius-sm:     0.25rem;  /* 4px  — small elements */
  --border-radius:        0.5rem;   /* 8px  — default */
  --border-radius-lg:     0.75rem;  /* 12px — cards, modals */
  --border-radius-full:   9999px;   /* Pills, circular */

  /* ───────────────────────────────────────────────────────────────
     Shadows (subtle elevation)
     ─────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:      0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ───────────────────────────────────────────────
   Base Typography
   ─────────────────────────────────────────────── */
body {
  font-family: var(--font-family-body);
  font-size: var(--text-sm);  /* 14px — matches existing CSS */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-black);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* ───────────────────────────────────────────────
   Color Utilities
   ─────────────────────────────────────────────── */
.text-primary        { color: var(--color-primary) !important; }
.text-secondary      { color: var(--color-secondary) !important; }
.text-accent         { color: var(--color-accent) !important; }
.text-muted          { color: var(--color-text-muted) !important; }
.text-white          { color: var(--color-white) !important; }
.text-black          { color: var(--color-black) !important; }

.bg-primary          { background-color: var(--color-primary) !important; }
.bg-secondary        { background-color: var(--color-secondary) !important; }
.bg-accent           { background-color: var(--color-accent) !important; }
.bg-light            { background-color: var(--color-bg-light) !important; }
.bg-white            { background-color: var(--color-white) !important; }

/* ───────────────────────────────────────────────
    Status Color Classes (shared across all tracking surfaces)
    ─────────────────────────────────────────────── */
/* ───────────────────────────────────────────────
   Status Color CSS Variables
   ─────────────────────────────────────────────── */
.status-pending          { color: var(--color-status-pending); }
.status-picked-up        { color: var(--color-status-picked-up); }
.status-out-for-delivery { color: var(--color-status-out-for-delivery); }
.status-in-transit       { color: var(--color-status-in-transit); }
.status-enroute          { color: var(--color-status-enroute); }
.status-cancelled        { color: var(--color-status-cancelled); }
.status-delivered        { color: var(--color-status-delivered); }
.status-returned         { color: var(--color-status-returned); }

/* ───────────────────────────────────────────────
   Spacing Utilities
   ─────────────────────────────────────────────── */
.margin-top-sm   { margin-top: var(--space-2); }
.margin-top-md   { margin-top: var(--space-4); }
.margin-top-lg   { margin-top: var(--space-6); }
.margin-bottom-sm { margin-bottom: var(--space-2); }
.margin-bottom-md { margin-bottom: var(--space-4); }
.margin-bottom-lg { margin-bottom: var(--space-6); }
.padding-sm      { padding: var(--space-2); }
.padding-md      { padding: var(--space-4); }
.padding-lg      { padding: var(--space-6); }

/* ───────────────────────────────────────────────
   Border Radius Utilities
   ─────────────────────────────────────────────── */
.rounded-sm   { border-radius: var(--border-radius-sm); }
.rounded      { border-radius: var(--border-radius); }
.rounded-lg   { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }

/* ───────────────────────────────────────────────
   Badge Components (admin action badges)
   ─────────────────────────────────────────────── */
.badge-action {
  display: inline-block;
  padding: 0.5rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.badge-update {
  background-color: var(--color-primary);
}

.badge-delete {
  background-color: var(--color-secondary);
}

/* ───────────────────────────────────────────────
   Status Color Classes (shared across all tracking surfaces)
   ─────────────────────────────────────────────── */
.status-pending         { background: #0056b3; color: #fff; }
.status-picked-up       { background: #6c757d; color: #fff; }
.status-out-for-delivery { background: #1e7e34; color: #fff; }
.status-in-transit      { background: #7b2d8b; color: #fff; }
.status-enroute         { background: #008080; color: #fff; }
.status-cancelled       { background: #add8e6; color: #333; }
.status-delivered       { background: #1a6e34; color: #fff; }
.status-returned         { background: #dc3545; color: #fff; }

.status-hero-header {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius);
}

/* ───────────────────────────────────────────────
   Utility Overrides
   ─────────────────────────────────────────────── */
.map-borderless { border: 0; }
.d-none         { display: none; }

/* ───────────────────────────────────────────────
   Admin Dashboard Components
   ─────────────────────────────────────────────── */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stat-card { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-left: 4px solid var(--color-primary); }
.stat-card.pending { border-left-color: var(--color-status-pending); }
.stat-card.picked-up { border-left-color: var(--color-status-picked-up); }
.stat-card.out-for-delivery { border-left-color: var(--color-status-out-for-delivery); }
.stat-card.in-transit { border-left-color: var(--color-status-in-transit); }
.stat-card.enroute { border-left-color: var(--color-status-enroute); }
.stat-card.cancelled { border-left-color: var(--color-status-cancelled); }
.stat-card.delivered { border-left-color: var(--color-status-delivered); }
.stat-card.returned { border-left-color: var(--color-status-returned); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--color-black); line-height: 1; }
.stat-label { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 0.25rem; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.admin-toolbar input, .admin-toolbar select { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); font-size: var(--text-sm); }
.admin-toolbar input { flex: 1; min-width: 200px; }
.btn-export { background: var(--color-status-delivered); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; font-size: var(--text-sm); text-decoration: none; display: inline-block; }
.btn-export:hover { background: #1a6e34; color: #fff; }

/* ───────────────────────────────────────────────
   Tracker-specific
   ─────────────────────────────────────────────── */
.tracker-map { height: 300px; margin: 20px 0; }