/* Mobile-first polish overrides
   Purpose: improve spacing, tap-targets, stacking and alignment on small screens
   These rules are scoped to smaller viewports so desktop layout remains unchanged.
*/

/* Generic adjustments for smaller screens */
@media (max-width: 900px) {
  /* Make main container full-width with comfortable padding */
  .container, .wrap {
    padding-left: 14px;
    padding-right: 14px;
    margin-left: 8px;
    margin-right: 8px;
  }

  /* Cards: full width and larger tappable padding */
  .card, .panel, .kpi-stat, .stat, .balance, .side-card, .dash-wrap, .doc-content {
    padding: 16px !important;
    margin: 10px 0 !important;
    border-radius: 8px;
  }

  /* Ensure forms and inputs take full width and have bigger targets */
  input[type="text"], input[type="email"], textarea, select, .custom-select-trigger {
    padding: 14px 16px !important;
    font-size: 16px;
  }

  /* Buttons larger on mobile for tap-friendliness */
  .btn, .btn-full, .qbtn, .btn-g, .save {
    padding: 12px 18px !important;
    min-height: 44px;
    font-size: 15px;
  }

  /* Stack grids into single column for readability */
  .grid, .form-grid, .grid-3, .grid-4, .topbar, .panels, .hero-grid, .hero-grid, .cols-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tables: allow horizontal scroll but keep readable rows */
  table, .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 12px 10px; font-size: 15px; }

  /* Reduce hero overflow and make decorative elements less intrusive */
  .hero { padding: 18px; }
  .hero:after { display: none; }

  /* Timeline and detail rows: stack key/value */
  .detail-panel .row { grid-template-columns: 1fr !important; }

  /* Modal & picker adjustments */
  .cols-modal, .ab-picker { left: 5% !important; width: 90% !important; max-width: 100% !important; }

  /* Page header & small headings: make space and center if needed */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header h1 { font-size: 20px; }

  /* Navbar: keep hamburger and make menu more touch-friendly */
  .navbar ul li a { padding: 14px 16px; font-size: 16px; }

  /* Reduce large shadows slightly to keep contrast pleasant on mobile */
  .card, .cols-modal, .cols-modal::before { box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

  /* Improve spacing for lists and pills */
  .pill, .tag { padding: 8px 12px; font-size: 13px; }

  /* Make search and code blocks more scannable */
  .search-box input { padding: 12px 14px; }
  .code-block, .code { font-size: 14px; padding: 12px; }

  /* Make dialog actions full width if stacked */
  .cols-actions { flex-direction: column; }
  .cols-actions .btn-g, .cols-actions .btn { width: 100%; }
}

/* Extra small screens - more aggressive spacing */
@media (max-width: 520px) {
  .container, .wrap { padding-left: 10px; padding-right: 10px; }
  h1 { font-size: 18px; }
  .auth-card { padding: 22px; max-width: 100%; }
  .card, .panel { padding: 12px; }
  .navbar-logo img { height: 24px; }
  .navbar ul li a { font-size: 15px; padding: 12px 10px; }
  .hero h1 { font-size: 20px; }
}

/* Accessibility: slightly increase focus outlines on mobile */
@media (max-width: 900px) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(255,215,0,0.18) !important; outline: none !important; }
}

/* ==========================================================
   Shipment pages (stack Bootstrap columns, improve actions)
   ========================================================== */
@media (max-width: 900px) {
  /* Stack Bootstrap columns used in shipment templates */
  .col-md-8, .col-md-4, .col-md-6, .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* Make table actions tappable and visible */
  .table-responsive .table td .btn { min-width: 44px; padding: 8px 10px; }

  /* Right column action buttons should be full-width for easy tapping */
  .d-grid.gap-2 a.btn, .d-grid.gap-2 .btn { width: 100% !important; display: block; }

  /* Improve header and small meta text readability */
  .card-header h5, .card-header .mb-0 { font-size: 16px; }

  /* API response pre (debug) should wrap on small devices */
  details pre, .code-block pre, pre { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
}

/* Mobile summary row styles for shipments list */
@media (max-width: 900px) {
  /* hide desktop table rows / header, show mobile card rows */
  .table-responsive .table thead { display: none; }
  .table-responsive .table tbody tr { display: none; }
  .table-responsive .table tbody tr.mobile-card-row { display: table-row; }
  .mobile-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 6px; }
  .mobile-card .mobile-left { flex: 1; }
  .mobile-card .mobile-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
  .mobile-card .mobile-ref { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
  .mobile-card .mobile-tracking code { font-size: 13px; display: block; margin-top: 2px; }
  .mobile-card .mobile-recipient { font-size: 13px; color: rgba(0,0,0,0.6); }
  .mobile-card .mobile-carrier { font-size: 13px; color: rgba(0,0,0,0.6); }
  .mobile-card .mobile-actions a { min-width: 40px; }
  .mobile-card-row td { padding: 6px 0; border: none; }
  .table-responsive .table { border: none; }
}

/* Mobile summary bar for shipment detail */
@media (max-width: 900px) {
  .mobile-detail-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; border-radius:8px; background: var(--glass-bg-nested); border: var(--glass-border-nested); margin-bottom: 14px; }
  .mobile-detail-left { display:flex; flex-direction:column; gap:6px; }
  .mobile-detail-left .mobile-track code { font-size: 14px; }
  .mobile-detail-left .mobile-carrier { font-size: 13px; color: var(--muted); }
  .mobile-detail-right { display:flex; gap:8px; align-items:center; }
  .mobile-detail-right .mobile-actions a { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; }
}

/* Hide mobile summary elements on desktop */
@media (min-width: 901px) {
  .mobile-card-row, .mobile-detail-bar { display: none !important; }
}

/* ==========================================================
   Documentation page tweaks (larger menu items, readable code)
   ========================================================== */
@media (max-width: 900px) {
  .doc-layout-grid { grid-template-columns: 1fr !important; }
  .doc-navigation { position: static !important; width: 100% !important; }
  .doc-navigation .search-box { margin-bottom: 12px; }
  .doc-navigation .search-box input { width: 100%; padding: 12px 14px; font-size: 15px; }
  .doc-menu a { display: block; padding: 10px 12px; font-size: 15px; }
  .doc-content { padding: 18px !important; }
  .documentation-page .page-sub { margin-top: 6px; font-size: 14px; }
  .doc-content h2 { font-size: 18px; }
}

/* Shipments overview: mobile hamburger menu and flexible buttons */
@media (max-width: 900px) {
  #mobileMenuToggle { display: inline-block !important; background: none; border: none; padding: 6px; }
  #mobileMenuToggle span { display:block; width:20px; height:3px; background:var(--text-main); margin:4px 0; border-radius:3px; }
  .mobile-menu-panel { display: block; position: relative; width: 100%; }
  .mobile-menu-panel { max-height: 0; overflow: hidden; transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease; opacity: 0; }
  .mobile-menu-panel.is-open { max-height: 420px; opacity: 1; }
  .mobile-menu-panel .mobile-menu-inner { background: var(--glass-bg); border: var(--glass-border); border-radius:8px; padding:10px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:8px; width:100%; }
  .mobile-menu-panel .mobile-menu-inner .btn { text-align:left; padding:10px 12px; display:block; width:100%; }

  /* Make top bar buttons wrap and be flexible */
  .bar > div, .bar-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .bar .btn-g, .bar .btn, .bar .qbtn { flex: 0 1 auto; }
}

/* Show mobile actions container on small screens */
@media (max-width: 900px) {
  .bar-actions-mobile { display:flex !important; }
}

/* Hide desktop-only action group on small screens (we show mobile menu instead) */
@media (max-width: 900px) {
  .bar-actions-desktop { display: none !important; }
}

/* Small screen: ensure mobile menu positioned correctly */
@media (max-width: 520px) {
  .mobile-menu-panel { right: 8px; top: 56px; }
  .mobile-menu-panel .mobile-menu-inner { min-width: 150px; }
}

/* Small tweaks for extra small screens */
@media (max-width: 420px) {
  .table-responsive .table td { font-size: 14px; }
  .doc-content { padding: 12px !important; }
  .card-header h5 { font-size: 15px; }
}

/* Documentation overflow fixes */
@media (max-width: 900px) {
  .doc-navigation, .doc-content { box-sizing: border-box; overflow: visible; max-width: 100%; }
  .doc-content { word-break: break-word; overflow-wrap: anywhere; -webkit-font-smoothing:antialiased; }
  .doc-content ul, .doc-content ol { padding-left: 18px; margin-right: 6px; }
  .doc-content li { white-space: normal; }
}

/* Dashboard chart rules: ensure charts have a usable height on small screens */
@media (max-width: 900px) {
  /* Panels containing canvases should have an explicit height so Chart.js can draw nicely */
  .panel, .chart-card { overflow:hidden; }
  .panel canvas, .chart-card canvas, #carrierDonutChart, #carrierBarChart, #lineChart, #donutChart {
    display: block; width: 100% !important; max-width: 100% !important;
    height: 260px !important; max-height: 320px !important; object-fit: contain;
  }
  /* If multiple charts stack, reduce height to avoid huge pages */
  .hero .chart-card canvas, .kpi-stat canvas { height: 180px !important; }
}

@media (max-width: 520px) {
  .panel canvas, .chart-card canvas { height: 220px !important; }
}

/* End of mobile.css */