/* ============================================================
   Responsive Stylesheet – Mobile First
   Breakpoints: sm=576 md=768 lg=992 xl=1200
   ============================================================ */

/* ── TABLET & MOBILE (≤991px) ────────────────────────────── */
@media (max-width: 991.98px) {

  /* Sidebar off-canvas */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 1100;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  .sidebar-overlay.show { display: block; }

  /* Main content full width */
  .main-content { margin-left: 0; }

  /* KPI grid 2-col on tablet */
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard rows stack */
  .dash-row { grid-template-columns: 1fr; }

  /* Page header stack */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-actions { width: 100%; justify-content: flex-start; }

  /* Form grids */
  .form-grid-3 { grid-template-columns: 1fr 1fr; }

  /* Traceability search */
  .trace-search-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .trace-or { display: none; }

  /* Booking modal */
  .modal-box { max-height: 95vh; border-radius: 12px 12px 0 0; margin-top: auto; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Filter bar wrap tighter */
  .filter-bar { padding: 12px 14px; gap: 10px; }
  .filter-exports { width: 100%; justify-content: flex-start; }

}

/* ── MOBILE (≤767px) ─────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Topbar */
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-search { display: none !important; }

  /* Page content padding */
  .page-content { padding: 16px 14px; }

  /* KPIs 1-col on very small */
  .kpi-grid-4, .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 22px; }
  .kpi-icon  { width: 42px; height: 42px; font-size: 18px; }
  .kpi-card  { padding: 14px; gap: 12px; }

  /* Form grids 1-col */
  .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-app    { max-width: 100%; }

  /* Notification panel */
  .notif-panel { width: 310px; right: -60px; }

  /* User dropdown */
  .user-dropdown { right: 0; }

  /* Report tabs scrollable */
  .report-tabs { gap: 2px; }
  .report-tab  { padding: 7px 10px; font-size: 12px; }

  /* Page title */
  .page-title { font-size: 18px; }

  /* Table: hide some cols handled by d-none d-*-table-cell */

  /* Summary pills wrap */
  .summary-pills { gap: 6px; }
  .summary-pill  { font-size: 12px; padding: 5px 12px; }

  /* Filter bar stack */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-item, .filter-item-wide { width: 100%; }
  .filter-item select, .filter-item input { min-width: 0; width: 100%; }
  .filter-actions, .filter-exports { width: 100%; justify-content: flex-start; }

  /* Vehicle card grid */
  .vehicle-select-grid { grid-template-columns: 1fr; }

  /* Action buttons */
  .action-btns { flex-wrap: wrap; }

  /* Booking modal body */
  .modal-body-app { padding: 16px; }
  .modal-footer-app { flex-wrap: wrap; }

  /* Booking form grids */
  #bookingForm .form-grid { grid-template-columns: 1fr !important; padding: 0; }

  /* Pagination */
  .pagination-wrap { flex-direction: column; align-items: center; gap: 8px; }

  /* Trace result */
  .trace-result .row { flex-direction: column; }

  /* Login card */
  .login-card { padding: 28px 22px; }

  /* Print slip */
  .slip > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── SMALL MOBILE (≤575px) ───────────────────────────────── */
@media (max-width: 575.98px) {
  .kpi-grid-4, .kpi-grid-3 { grid-template-columns: 1fr 1fr; }
  .kpi-card { padding: 12px; gap: 10px; }
  .kpi-value { font-size: 20px; }

  .btn-app span { display: none; }   /* icon-only buttons on tiny screens */
  .btn-app-primary span,
  .btn-app-accent span { display: inline; } /* but keep text on primary actions */

  .page-header .btn-app span { display: inline; } /* always show in header */

  .topbar-user-btn .topbar-caret { display: none; }
}

/* ── LARGE DESKTOP (≥1400px) ─────────────────────────────── */
@media (min-width: 1400px) {
  :root { --sidebar-w: 270px; }
  .kpi-value { font-size: 30px; }
  .page-content { padding: 28px 30px; }
}

/* ── PRINT STYLES ────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .filter-bar, .page-actions,
  .btn-app, .action-btns, .pagination-wrap,
  .flash-alert, .modal-overlay { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .content-card { box-shadow: none !important; border: 1px solid #ddd; }
  .page-content { padding: 0 !important; }
  body { background: white; }
  .table-app { font-size: 12px; }
  .table-app th, .table-app td { padding: 6px 10px; }
  /* Show all hidden columns when printing */
  .d-none { display: table-cell !important; }
}

/* ── ACCESSIBILITY ───────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── TOUCH-FRIENDLY tap targets ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .sidebar-item { padding: 12px 16px; }
  .btn-action   { width: 36px; height: 36px; font-size: 13px; }
  .topbar-btn   { width: 40px; height: 40px; }
  .page-btn     { min-width: 36px; height: 36px; }
  .form-control-app { padding: 11px 14px; font-size: 16px; } /* prevent iOS zoom */
  .filter-item select, .filter-item input { font-size: 16px; } /* prevent iOS zoom */
}