/* ============================================================
   TP RESPONSIVE PATCH v2 — 2026-05-29
   Extended to cover real-impl class names: .kpi-row, .kpi-card,
   .metrics, .dashboard-grid, .stats, .cards-grid
   ============================================================ */

/* Hamburger button */
.menu-toggle, .tp-menu-toggle, .chrome-menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--tp-navy, #0F1B38);
  border-radius: 10px;
}
.menu-toggle:hover { background: rgba(15,27,56,.06); }

@media (max-width: 900px) {
  .menu-toggle, .tp-menu-toggle, .chrome-menu-toggle { display: inline-flex !important; }
  .chrome-sidebar, .tp-sidebar, aside.sidebar, nav.sidebar, .crm-sidebar {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 84vw !important; max-width: 320px;
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    box-shadow: 0 12px 40px -8px rgba(15,27,56,.35);
  }
  .chrome-sidebar.is-open, .tp-sidebar.is-open, aside.sidebar.is-open,
  nav.sidebar.is-open, .crm-sidebar.is-open {
    transform: translateX(0) !important;
  }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(15,27,56,.4);
    z-index: 999; backdrop-filter: blur(2px);
  }
  main, .chrome-main, .tp-main, .crm-main {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* === KPI GRID RESPONSIVE (covers ALL real-impl class names) === */
.kpi-grid, .tp-stat-grid, .stats-grid,
.kpi-row, .kpis, .metrics, .metric-row,
.dashboard-grid, .cards-grid, .stat-cards,
.tiles-grid, .metric-tiles {
  display: grid !important;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .kpi-grid, .tp-stat-grid, .stats-grid,
  .kpi-row, .kpis, .metrics, .metric-row,
  .dashboard-grid, .cards-grid, .stat-cards,
  .tiles-grid, .metric-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .kpi-grid, .tp-stat-grid, .stats-grid,
  .kpi-row, .kpis, .metrics, .metric-row,
  .dashboard-grid, .cards-grid, .stat-cards,
  .tiles-grid, .metric-tiles {
    grid-template-columns: 1fr !important;
  }
}

/* Individual KPI cards safe minimum sizing */
@media (max-width: 560px) {
  .kpi-card, .tp-stat, .stat-card, .metric-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Table overflow safety */
.tp-table-wrap, .table-responsive, .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
@media (max-width: 767px) {
  main table:not(.no-wrap), .tp-main table:not(.no-wrap) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tp-card, .card { padding: 16px !important; }
  h1, .tp-h1 { font-size: clamp(22px, 6vw, 28px) !important; }
}

/* No horizontal body scroll */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, table { max-width: 100%; }

/* Feedback widget mobile reposition */
@media (max-width: 560px) {
  .tp-feedback-launcher, [class*="feedback-launch"] {
    bottom: 16px !important; right: 16px !important;
  }
  .tp-feedback-card, [class*="feedback-card"] {
    bottom: 80px !important; right: 16px !important; left: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* Driver PWA — ensure sidebar doesn't break the PWA layout */
body[data-role="driver"] .chrome-sidebar,
body[data-role="driver"] .tp-sidebar { display: none !important; }

/* Module sub-brand pill in header (Sprint TMS rebrand) */
.chrome-header__module-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 12px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(244,106,45,.14), rgba(244,106,45,.06));
  color: var(--tp-orange, #F46A2D);
  border: 1px solid rgba(244,106,45,.3);
  border-radius: 999px;
  vertical-align: middle;
}
.chrome-header__module-pill i {
  font-style: normal;
  color: rgba(244,106,45,.5);
  margin: 0 2px;
}
@media (max-width: 560px) {
  .chrome-header__module-pill {
    font-size: 10px; padding: 3px 8px; margin-left: 6px;
  }
}

/* Sidebar title module branding */
.chrome-sidebar__title {
  font-family: 'Syne', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--tp-cream, #F5F0E6);
  line-height: 1.1;
}
.chrome-sidebar__title small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(245,240,230,.6);
  text-transform: none;
  margin-top: 4px;
}

/* ============================================================
   TP HARD LAYOUT FIX — 2026-05-29
   Forces .chrome-sidebar fixed-left + main margin EVERYWHERE
   (was only mobile). Fixes broken dashboards where chrome
   injected into document flow.
   ============================================================ */

/* Sidebar: ALWAYS fixed left on desktop */
.chrome-sidebar, .tp-sidebar, aside.sidebar, nav.sidebar, .crm-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  z-index: 100;
  overflow-y: auto;
  box-shadow: 2px 0 12px -6px rgba(15,27,56,.18);
}

/* Header: fixed top */
.chrome-header {
  position: fixed !important;
  top: 0 !important;
  left: 280px !important;
  right: 0 !important;
  z-index: 99;
  height: 64px;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px !important;
  background: rgba(15,27,56,.92) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(245,240,230,.08);
}

/* Main: offset for fixed sidebar + header */
main, main#page-content, .chrome-main, .tp-main, .crm-main {
  margin-left: 280px !important;
  margin-top: 64px !important;
  min-height: calc(100vh - 64px);
  padding: 24px !important;
  box-sizing: border-box;
}
main > .page, main#page-content > .page {
  max-width: 1400px;
  margin: 0 auto;
}

/* MOBILE: collapse sidebar, full-width main */
@media (max-width: 900px) {
  .chrome-sidebar, .tp-sidebar, aside.sidebar, nav.sidebar, .crm-sidebar {
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    width: 84vw !important;
    max-width: 320px !important;
  }
  .chrome-sidebar.is-open, .tp-sidebar.is-open, aside.sidebar.is-open,
  nav.sidebar.is-open, .crm-sidebar.is-open {
    transform: translateX(0) !important;
  }
  .chrome-header {
    left: 0 !important;
  }
  main, main#page-content, .chrome-main, .tp-main, .crm-main {
    margin-left: 0 !important;
    padding: 16px !important;
  }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(15,27,56,.5);
    z-index: 99; backdrop-filter: blur(3px);
  }
}

/* Hide ALL non-chrome aside outside the layout we manage */
/* (prevents duplicate sidebar markup from pages that have their own) */

/* Ensure body has correct base */
body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-padding-top: 80px; }