/* ══════════════════════════════════════════════════════════════════
   OMNIS Global Optimization — All Pages, All Devices
   Responsive breakpoints: 1440 / 1280 / 1024 / 768 / 480
   Fixes: Dispatch split-panel, compact KPIs, color unification,
          touch targets, safe areas, scroll behavior
   ══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL RESETS ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; }

/* iOS safe areas */
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.topbar { padding-top: env(safe-area-inset-top) !important; }
.tab-bar, .c-composer, .composer-wrap { padding-bottom: env(safe-area-inset-bottom) !important; }

/* Smooth scroll everywhere */
.msg-feed, .msg-list, .chat-messages, .dock-scroll, .map-scroll, .tray-body,
.main, .labor-body, .ship-body, .billing-body, .admin-content, .sb-channels {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

/* ── PURPLE → CRIMSON (global nuke) ────────────────────────────── */
:root {
  --neural: #dc2626 !important; --neural-b: #f87171 !important;
  --neural-bg: rgba(220,38,38,0.06) !important; --neural-border: rgba(220,38,38,0.12) !important;
  --neural-dim: rgba(220,38,38,0.04) !important; --red: #dc2626 !important;
  --clear: #22c55e !important; --clear-b: #4ade80 !important;
  --caution: #eab308 !important; --caution-b: #fbbf24 !important;
  --intel: #3b82f6 !important; --intel-b: #60a5fa !important;
  --critical: #ef4444 !important; --critical-b: #f87171 !important;
}

/* ── TOPBAR — consistent across all pages ──────────────────────── */
.topbar {
  background: rgba(3,3,3,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  height: var(--topbar-h, 52px) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* ── KPI STRIPS — compact, inline, never stacking on desktop ───── */
.kpi-grid, .kpi-row, .kpi-strip, .ship-kpi, .labor-kpi, .mrr-strip, .stats-row {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 10px 0 !important;
  flex-wrap: nowrap !important;
}
.kpi-grid::-webkit-scrollbar, .kpi-row::-webkit-scrollbar, .kpi-strip::-webkit-scrollbar,
.ship-kpi::-webkit-scrollbar, .labor-kpi::-webkit-scrollbar, .mrr-strip::-webkit-scrollbar,
.stats-row::-webkit-scrollbar { display: none !important; }

.kpi-card, .kpi-strip-item, .skpi, .lkpi, .mrr-card, .stat-card {
  flex: 1 1 0 !important;
  min-width: 120px !important;
  max-width: 200px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}

/* ── TABLES — responsive, horizontal scroll on mobile ──────────── */
.table-wrap, .ship-table, [class*="table-wrap"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
table, .trailer-table, .data-table, .accounts-table, .standards-table {
  min-width: 600px !important;
}
td, th {
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* ── CARDS — consistent radius, transitions ────────────────────── */
.dock-card, .appt-card, .worker-card, .provider-card, .rate-card {
  border-radius: 10px !important;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
}

/* ── TOUCH TARGETS — 44px minimum ──────────────────────────────── */
button, .btn, [role="button"], .nav-item, .tray-item, .ch-item, .tab-item,
.dock-filter-btn, .appt-card, .asb-item {
  min-height: 36px !important;
}
@media (pointer: coarse) {
  button, .btn, [role="button"], .nav-item, .tray-item, .ch-item {
    min-height: 44px !important;
  }
}

/* ── MODALS — responsive, max-height ───────────────────────────── */
.modal-panel, .config-panel, [class*="modal-panel"] {
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 14px !important;
  margin: 16px !important;
  width: calc(100% - 32px) !important;
  max-width: 560px !important;
}

/* ── FORMS — consistent styling ────────────────────────────────── */
input, select, textarea, .f-input, .rf-input, [class*="input"] {
  border-radius: 8px !important;
  font-size: 14px !important;
}
@media (pointer: coarse) {
  input, select, textarea, .f-input { font-size: 16px !important; } /* prevents iOS zoom */
}

/* ══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC FIXES
   ══════════════════════════════════════════════════════════════════ */

/* ── DISPATCH (index.html) — split panel layout ────────────────── */
.layout {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  grid-template-rows: auto auto 1fr !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.main-column {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.board { flex: 1 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
.table-wrap { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }

/* Dispatch KPI — horizontal strip, not grid */
.layout .kpi-grid, .main-column .kpi-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  overflow-x: auto !important;
}
.layout .kpi-card, .main-column .kpi-card {
  flex: 0 0 auto !important;
  min-width: 100px !important;
  padding: 6px 12px !important;
}
.layout .kpi-label { font-size: 9px !important; }
.layout .kpi-value { font-size: 18px !important; }

/* Dispatch toolbar */
.toolbar { flex-shrink: 0 !important; padding: 8px 16px !important; }

/* ── DOCK — grid spacing ───────────────────────────────────────── */
.dock-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}
.dock-card { padding: 12px 14px !important; border-radius: 10px !important; }

/* ── YARD — sidebar toggle on smaller screens ──────────────────── */
.yard-layout {
  grid-template-columns: 1fr 280px !important;
}

/* ── ANALYTICS — chart sections ────────────────────────────────── */
.three-col { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.two-col { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.panel { border-radius: 10px !important; overflow: hidden !important; }

/* ── APPOINTMENTS — split panel ────────────────────────────────── */
.main[style*="grid-template-columns:1fr 340px"] {
  gap: 12px !important;
}
.detail-panel { border-radius: 10px !important; }
.timeline-wrap { overflow-x: auto !important; }

/* ── SHIPMENTS — clean up rate panel ───────────────────────────── */
.rate-panel { border-radius: 12px !important; margin-bottom: 16px !important; }
.rate-results { max-height: 300px !important; overflow-y: auto !important; }

/* ── ADMIN — sidebar + content ─────────────────────────────────── */
.admin-layout { grid-template-columns: 220px 1fr !important; }
.admin-sidebar {
  background: rgba(5,5,5,0.98) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.asb-item {
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* ── INTEGRATIONS — card grid ──────────────────────────────────── */
.provider-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}
.provider-card { border-radius: 12px !important; }

/* ── BILLING — plan grid ───────────────────────────────────────── */
.plan-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

/* ── LABOR — worker grid ───────────────────────────────────────── */
.worker-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}
.worker-card { border-radius: 10px !important; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════ */

/* ── 1280px and below — tighten spacing ────────────────────────── */
@media (max-width: 1280px) {
  .three-col { grid-template-columns: repeat(2, 1fr) !important; }
  .yard-layout { grid-template-columns: 1fr 240px !important; }
  .admin-layout { grid-template-columns: 200px 1fr !important; }
}

/* ── 1024px — tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
  .three-col { grid-template-columns: 1fr 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
  
  /* Appointments: stack detail panel below */
  .main[style*="grid-template-columns:1fr 340px"],
  .main[style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: 1fr !important;
  }
  .detail-panel { max-height: 40vh !important; }
  
  /* Yard: collapse sidebar */
  .yard-layout { grid-template-columns: 1fr !important; }
  .yard-side { display: none !important; }
  
  /* Admin: stack sidebar */
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 4px !important;
    gap: 2px !important;
  }
  .admin-sidebar .asb-sep { display: none !important; }
  .asb-item { white-space: nowrap !important; padding: 8px 12px !important; }
  
  /* Connect: hide presence */
  .c-body { grid-template-columns: var(--sidebar-w, 260px) 1fr !important; }
  .c-presence { display: none !important; }
}

/* ── 768px — tablet portrait / small laptop ────────────────────── */
@media (max-width: 768px) {
  /* Stack everything */
  .three-col, .two-col { grid-template-columns: 1fr !important; }
  
  /* KPI strips scroll horizontally */
  .kpi-card, .skpi, .lkpi, .mrr-card, .stat-card {
    min-width: 110px !important;
    flex: 0 0 auto !important;
  }
  
  /* Dock grid: 2 columns */
  .dock-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Shipments: stack rate form */
  .rate-form { grid-template-columns: 1fr 1fr !important; }
  
  /* Connect: full width chat, sidebar overlay */
  .c-body { grid-template-columns: 1fr !important; }
  .c-sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important; bottom: 0 !important;
    z-index: 100 !important;
    width: 280px !important;
    transition: left 0.25s cubic-bezier(.16,1,.3,1) !important;
    box-shadow: 12px 0 40px rgba(0,0,0,0.5) !important;
  }
  .c-sidebar.mobile-open { left: 0 !important; }
  
  /* Worker/provider grids: 1 column */
  .worker-grid, .provider-grid, .plan-grid {
    grid-template-columns: 1fr !important;
  }

  /* Billing MRR strip: scroll */
  .mrr-strip { flex-wrap: nowrap !important; overflow-x: auto !important; }
  .mrr-card { min-width: 130px !important; flex: 0 0 auto !important; }
  
  /* Main padding reduce */
  .main, .labor-body, .ship-body, .billing-body { padding: 12px !important; }
  
  /* Tables: ensure horizontal scroll */
  table { min-width: 500px !important; }
  
  /* Modals: near full width */
  .modal-panel, .config-panel { max-width: calc(100vw - 24px) !important; margin: 12px !important; }
  
  /* Topbar: compact */
  .topbar { padding: 0 10px !important; }
  .topbar-right { gap: 6px !important; }
  .clock { display: none !important; }
  
  /* Nav: horizontal scroll */
  .nav-primary { overflow-x: auto !important; scrollbar-width: none !important; }
  .nav-primary::-webkit-scrollbar { display: none !important; }
  .nav-item { padding: 0 10px !important; font-size: 11px !important; }
  .nav-item span { display: none !important; } /* icons only */
  .nav-item svg { margin: 0 !important; }
}

/* ── 480px — phone portrait ────────────────────────────────────── */
@media (max-width: 480px) {
  /* Single column everything */
  .dock-grid { grid-template-columns: 1fr !important; }
  .rate-form { grid-template-columns: 1fr !important; }
  
  /* KPIs: smaller */
  .kpi-card, .skpi, .lkpi, .mrr-card, .stat-card {
    min-width: 90px !important;
    padding: 8px 10px !important;
  }
  .kpi-value, .skpi-val, .lkpi-val, .mrr-val, .stat-value {
    font-size: 16px !important;
  }
  .kpi-label, .skpi-label, .lkpi-label, .mrr-label, .stat-label {
    font-size: 8px !important;
  }
  
  /* Main padding minimal */
  .main, .labor-body, .ship-body, .billing-body { padding: 8px !important; }
  
  /* Nav: icons only, tighter */
  .nav-primary { padding: 0 4px !important; gap: 0 !important; }
  .nav-item { padding: 0 8px !important; min-height: 40px !important; }
  
  /* Chat: full-width messages */
  .msg-bubble, .msg-body { max-width: 90% !important; }
  
  /* Appointments: stack */
  .main[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .detail-panel { display: none !important; } /* show as modal on mobile */
  
  /* Topbar */
  .topbar { height: 44px !important; }
  .topbar-brand { font-size: 14px !important; letter-spacing: 3px !important; }
  .nl-search-wrap, .cmd-btn { display: none !important; }
  
  /* Side tray: full width */
  .side-tray { width: 100vw !important; max-width: 100vw !important; }
  
  /* Video call: full screen */
  .video-panel, .meeting-panel { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
}

/* ── DARK SCROLLBARS — all pages ───────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }

/* ── FOCUS STATES — accessibility ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--neural) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ── PRINT — clean output ──────────────────────────────────────── */
@media print {
  .topbar, .nav-primary, .nav, .side-tray, .side-tray-overlay,
  .c-sidebar, .c-presence, .ai-panel, .toast-stack, .notif-tray { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .kpi-card, .dock-card, .panel { border: 1px solid #ccc !important; background: #fff !important; }
}

/* ── REDUCED MOTION — respect user preference ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}