/* =====================================================================
   Aegis Fleet OS — Mobile Stylesheet
   Linked from every page after the page's main <style> block so these
   rules win on phones + tablets without touching the desktop CSS.
   Targets: phones (<= 480), small tablets (<= 768)
   ===================================================================== */

/* ============ TABLET / NARROW DESKTOP (<= 1024) ============ */
@media (max-width: 1024px) {
  .container { max-width: 100% !important; padding: 0 !important; }
  .cards-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .portal-bar { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ============ TABLET PORTRAIT / LARGE PHONE (<= 768) ============ */
@media (max-width: 768px) {
  body {
    padding: 12px !important;
    background-attachment: fixed !important;
  }

  /* ------ HERO ------ */
  .hero {
    height: auto !important;
    min-height: 240px !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
  }
  .hero-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-stats {
    align-self: flex-start !important;
  }
  .hero-stat { padding: 8px 14px !important; }
  .hero-stat-num { font-size: 18px !important; }
  .hero-stat-lbl { font-size: 8px !important; letter-spacing: 1.0px !important; }
  .hero-right {
    align-items: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hero-live-badge {
    font-size: 9px !important;
    padding: 5px 10px !important;
    letter-spacing: 1.0px !important;
  }
  .hero-time { font-size: 11px !important; padding: 6px 10px !important; }

  /* Repair Command extras */
  .hero-qr-btn { padding: 6px 12px 6px 6px !important; }
  .hero-qr-thumb { width: 28px !important; height: 28px !important; }
  .hero-qr-title { font-size: 9px !important; }
  .hero-qr-sub { font-size: 8px !important; }
  .hero-action-btn {
    padding: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
  }

  /* ------ PORTAL NAV ------ */
  .portal-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .portal-btn {
    padding: 9px 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.5px !important;
  }
  .portal-btn-icon { width: 13px !important; height: 13px !important; }

  /* ------ SECTION HEADERS ------ */
  .section-title {
    font-size: 11px !important;
    margin: 14px 2px 12px 2px !important;
    letter-spacing: 1.8px !important;
  }
  .section-title::before, .section-title::after { width: 18px !important; }

  /* ------ TRADING CARDS ------ */
  .cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .card-title {
    font-size: 9px !important;
    top: 10px !important; left: 10px !important; right: 10px !important;
    letter-spacing: 1.5px !important;
  }
  .card-name-banner { font-size: 9px !important; letter-spacing: 0.8px !important; }
  .card-number { font-size: 24px !important; bottom: 14px !important; }

  /* ------ STAT ROW / COMPLIANCE + COMPOSITION ------ */
  .stat-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .panel { padding: 14px !important; border-radius: 10px !important; }
  .panel.compact { padding: 14px !important; }
  .panel-header { margin-bottom: 8px !important; }
  .panel-title { font-size: 13px !important; }

  /* Compliance gauge */
  .health-score { font-size: 42px !important; }
  .health-meta-row { font-size: 11px !important; }
  .stacked-bar { height: 22px !important; font-size: 9px !important; }

  /* Donut */
  .donut-row { flex-direction: column !important; gap: 14px !important; align-items: center !important; }
  .donut-wrap { width: 160px !important; height: 160px !important; flex-shrink: 0 !important; }
  .donut-legend { width: 100% !important; }
  .donut-legend-row { font-size: 11px !important; }

  /* ------ COMPLIANCE WATCHLIST / GENERIC GRID PANELS ------ */
  .watch-grid, .compliance-grid, .reports-grid,
  .driver-grid, .asset-grid, .ticket-grid, .fleet-grid,
  .incident-grid, .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .watch-card, .compliance-card, .report-card,
  .driver-card, .asset-card, .ticket-card, .incident-card {
    padding: 12px !important;
  }

  /* ------ PIPELINE / STAGE BARS ------ */
  .pipeline-grid, .stages-row, .stage-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .pipe-item, .stage-item { padding: 10px !important; }
  .pipe-value, .stage-num { font-size: 22px !important; }
  .pipe-label, .stage-label { font-size: 9px !important; }

  /* ------ TABLES — horizontal scroll ------ */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  /* ------ KPI STRIPS ------ */
  .kpi-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kpi { padding: 12px !important; gap: 8px !important; }
  .kpi-num { font-size: 26px !important; }
  .kpi-lbl { font-size: 9px !important; }
  .kpi-ico { width: 32px !important; height: 32px !important; }
  .kpi-ico svg { width: 18px !important; height: 18px !important; }

  /* ------ FOOTER ------ */
  .footer { padding: 18px 4px 12px !important; flex-direction: column !important; gap: 4px 8px !important; }
  .footer-brand { font-size: 11px !important; }
  .footer-tagline { font-size: 10px !important; }
  .footer-meta { font-size: 9px !important; letter-spacing: 1px !important; }

  /* ------ SIDEKICK PANEL ------ */
  .fa-launcher {
    width: 56px !important; height: 56px !important;
    bottom: 16px !important; right: 16px !important;
  }
  .fa-panel {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 100px) !important;
    bottom: 84px !important; right: 12px !important;
  }

  /* ------ AEGIS ENTRY PAGE ------ */
  .aegis-logo-wrap { width: 220px !important; height: 220px !important; margin-bottom: 28px !important; }
  .aegis-wordmark { font-size: 48px !important; letter-spacing: 8px !important; padding-left: 8px !important; }
  .aegis-subtitle { font-size: 14px !important; letter-spacing: 5px !important; padding-left: 5px !important; }
  .tagline-main { font-size: 11px !important; letter-spacing: 4px !important; }
  .tagline-sub { font-size: 9px !important; letter-spacing: 2px !important; margin-bottom: 28px !important; }
  .enter-cta {
    padding: 12px 24px !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    padding-left: 28px !important;
  }
  .corner { width: 36px !important; height: 36px !important; }
  .corner.tl, .corner.tr { top: 16px !important; }
  .corner.bl, .corner.br { bottom: 16px !important; }
  .corner.tl, .corner.bl { left: 16px !important; }
  .corner.tr, .corner.br { right: 16px !important; }
  .top-strip {
    font-size: 9px !important; letter-spacing: 1.6px !important;
    top: 24px !important;
  }
  .audio-toggle {
    top: 24px !important; right: 60px !important;
    width: 28px !important; height: 28px !important;
  }
  .footer-hint { bottom: 32px !important; font-size: 9px !important; letter-spacing: 1.8px !important; }
}

/* ============ SMALL PHONES (<= 480) ============ */
@media (max-width: 480px) {
  body { padding: 8px !important; }

  .hero { padding: 12px 12px !important; min-height: 200px !important; }
  .hero-stat { padding: 6px 10px !important; }
  .hero-stat-num { font-size: 16px !important; }

  /* Single-column nav and cards on tiny screens */
  .portal-bar { grid-template-columns: 1fr 1fr !important; }
  .cards-grid { grid-template-columns: 1fr 1fr !important; }

  .card-number { font-size: 22px !important; }

  /* Aegis Entry — tighter */
  .aegis-logo-wrap { width: 180px !important; height: 180px !important; }
  .aegis-wordmark { font-size: 38px !important; letter-spacing: 6px !important; }
  .aegis-subtitle { font-size: 12px !important; letter-spacing: 4px !important; }
  .tagline-main { font-size: 10px !important; }
  .tagline-sub { font-size: 8px !important; }
  .enter-cta { padding: 10px 18px !important; font-size: 10px !important; }
}