/* ===== P2-12 Mobile H5 Responsive ===== */
@media (max-width: 768px) {
  .header .container, .nav .container { padding: 0 12px; }
  .nav-links { display: none; }
  .hero h1 { font-size: 24px !important; }
  .hero p { font-size: 14px !important; }
  .hero-buttons { flex-direction: column; gap: 10px; }
  .hero-buttons .btn { width: 100%; text-align: center; }
  .section { padding: 30px 0; }
  .section-title h2 { font-size: 20px; }
  .container { padding: 0 12px; }
  .pricing-grid, .features-grid, .steps-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .track-input-group { flex-direction: column; }
  .track-input-group input, .track-input-group .btn { width: 100%; border-radius: 8px; }
  .track-carriers-grid { grid-template-columns: 1fr 1fr; }
  .console-layout { flex-direction: column; }
  .console-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 8px; border-right: none; border-bottom: 1px solid var(--border); }
  .console-sidebar .nav-item { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  .console-main { padding: 16px 12px; }
  .console-main h2 { font-size: 18px; }
  table { font-size: 12px; display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 8px 6px !important; }
  .form-grid, .form-row { grid-template-columns: 1fr !important; }
  .modal-content, .modal > div { max-width: 95% !important; padding: 16px !important; margin: 10px; }
  .card, [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
  .progress-bar { overflow-x: auto; padding-bottom: 8px; }
  .milestone { min-width: 50px; }
  .milestone .label { font-size: 9px; }
  .btn { padding: 8px 16px; font-size: 13px; }
  .btn-sm { padding: 4px 10px; font-size: 11px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kanban-board { flex-direction: column; }
  .kanban-column { min-width: 100%; }
  .timeline-event { padding-left: 20px; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .stats-row { flex-wrap: wrap; }
  .stat-card { min-width: calc(50% - 8px); flex: 0 0 calc(50% - 8px); }
  .mobile-hide { display: none !important; }
  .mobile-full { width: 100% !important; }
  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .mobile-stack > * { width: 100% !important; margin-bottom: 8px; }
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .track-carriers-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stat-card { min-width: 100%; }
  .hero h1 { font-size: 20px !important; }
  .logo { font-size: 18px; }
}

/* ===== Company Detail Page Mobile Fix ===== */
@media (max-width: 768px) {
  .detail-header { padding: 16px 0; }
  .breadcrumb { padding: 8px 0; font-size: 12px; }
  .detail-header-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .detail-header-inner > .detail-logo { align-self: flex-start; }
  .detail-logo { width: 56px !important; height: 56px !important; border-radius: 10px !important; font-size: 20px !important; }
  .detail-logo img, .detail-logo > div { width: 56px !important; height: 56px !important; border-radius: 8px !important; font-size: 20px !important; }
  .detail-header-inner h1 { font-size: 18px !important; line-height: 1.4; word-break: break-word; }
  .detail-header-inner > div:nth-child(2) { width: 100%; min-width: 0; }
  .carrier-meta { font-size: 12px !important; gap: 8px !important; }
  .detail-header-inner > div:last-child {
    margin-left: 0 !important; width: 100%; display: flex; gap: 8px; flex-direction: row;
  }
  .detail-header-inner > div:last-child > button,
  .detail-header-inner > div:last-child > span {
    flex: 1; white-space: nowrap; text-align: center; padding: 10px 8px !important;
    font-size: 13px !important; min-width: 0;
  }
  .detail-header-inner > div:last-child .btn-lg { padding: 10px 8px !important; font-size: 13px !important; }

  /* Tabs: horizontal scroll, no vertical text */
  .detail-tabs .container {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px;
  }
  .detail-tabs .container::-webkit-scrollbar { display: none; }
  .detail-tab {
    white-space: nowrap; flex-shrink: 0; padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .detail-content { padding: 16px 0; }
  .info-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Reviews summary stack */
  #reviews-container > div:first-child { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Carrier list page */
  .filter-bar { padding: 12px !important; gap: 8px !important; }
  .filter-bar .search-input { min-width: 100% !important; }
  .filter-bar input, .filter-bar select { font-size: 13px !important; min-width: 0; flex: 1 1 calc(50% - 8px); }
  .carrier-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}
@media (max-width: 380px) {
  .detail-header-inner > div:last-child { flex-direction: column; }
  .detail-header-inner > div:last-child > button,
  .detail-header-inner > div:last-child > span { width: 100%; }
}