/*
 * Responsive V2 — same breakpoints, same class names, cleaner styling.
 * Drop-in replacement for responsive.css.
 */

/* ── Tablet ── */
@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid, .detail-grid { grid-template-columns: 1fr; }
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--sidebar-bg); border-top: 1px solid rgba(255,255,255,0.06); z-index: 30; justify-content: space-around; align-items: center; padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0); }
    .bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; padding: 5px 0; color: var(--sidebar-text); text-decoration: none; font-size: 0.65rem; font-weight: 600; opacity: 0.6; transition: opacity 0.12s; -webkit-tap-highlight-color: transparent; }
    .bottom-nav__item--active, .bottom-nav__item:active { opacity: 1; color: var(--sidebar-active); }
    .bottom-nav__icon { font-size: 1.15rem; line-height: 1; }
    .bottom-nav__label { line-height: 1; }
    .bottom-nav__badge { position: absolute; top: 2px; right: calc(50% - 16px); min-width: 14px; height: 14px; background: var(--danger); color: #fff; font-size: 0.56rem; font-weight: 700; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
    .page-content { padding-bottom: 68px }
    .toast-root { bottom: 68px; }

    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-panel { padding: 20px 14px; min-height: 100vh; align-items: flex-start; padding-top: 50px; background: var(--bg); }
    .auth-card { padding: 24px 18px; max-width: 100%; }
    .auth-logo { font-size: 1.5rem; }
    .auth-card h2 { font-size: 1.3rem; }

    .sidebar { left: -100%; width: min(82vw, 300px); transition: left 0.2s ease; }
    .sidebar.is-open { left: 0; }
    .sidebar.is-open ~ .app-main::before { content: ""; position: fixed; inset: 0; background: rgba(17,24,39,0.35); z-index: 15; }
    .app-main { margin-left: 0; }
    .mobile-menu-btn { display: inline-flex; }
    .sidebar-logout { display: flex; }

    .topbar { flex-wrap: wrap; padding: 10px 14px; }
    .topbar__actions { width: 100%; }
    .topbar__actions input { min-width: 0; flex: 1; }
    .page-title { font-size: 1.15rem; }

    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 580px; }
    .dispatch-inline { flex-wrap: wrap; }
    .dispatch-inline select, .dispatch-inline input { min-width: 100px; flex: 1; }
    .dispatch-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
    .dispatch-tab { white-space: nowrap; flex-shrink: 0; }

    .pagination { flex-direction: column; align-items: stretch; gap: 8px; }
    .pagination__controls { justify-content: center; flex-wrap: wrap; }
    .pagination__info { justify-content: center; }

    .notification-panel { right: 8px; left: 8px; width: auto; }
    .profile-panel { right: 8px; width: 170px; }
    .donut-chart { flex-direction: column; align-items: center; }
    .chip-bar { gap: 5px; }
    .chip { font-size: 0.78rem; padding: 3px 8px; }
    .stt-card { padding: 20px 18px; min-width: auto; margin: 0 14px; }

    /* ── Dashboard mobile ── */
    .alert-item { font-size: 0.82rem; padding: 8px 10px; }
    .stat-card { padding: 14px 12px; padding-right: 44px; }
    .stat-card h3 { font-size: 1.3rem; word-break: break-word; }
    .stat-card p { font-size: 0.78rem; }
    .content-grid { grid-template-columns: 1fr; }

    .sd-summary { gap: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 70px; }
    .sd-summary::-webkit-scrollbar { display: none; }
    .sd-card { flex: 0 0 130px; min-width: 130px; padding: 10px 8px; scroll-snap-align: start; }
    .sd-card__icon { font-size: 1.1rem; margin-bottom: 3px; }
    .sd-card h4 { font-size: 0.68rem; }
    .sd-card p { font-size: 0.84rem; }
    .sd-card .muted { font-size: 0.72rem; }
    .sd-card:hover { transform: none; box-shadow: none; }

    .sp-steps { grid-template-columns: repeat(4, 1fr); gap: 3px; }
    .sp-dot { width: 32px; height: 32px; }
    .sp-dot__icon { font-size: 0.85rem; }
    .sp-label { font-size: 0.68rem; }

    #tracking-map { height: 200px !important; }
    .tracking-live-map { height: 240px; }
    .kpi-mini__value { font-size: 1rem; }

    .toast-root { left: 10px; right: 10px; bottom: 10px; }
    .toast { min-width: auto; max-width: 100%; }

    .sd-scroll-btn { display: flex; align-items: center; justify-content: center; }
    #sd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; width: 100%; }
    #sd-tabs .dispatch-tab { white-space: nowrap; flex-shrink: 0; font-size: 0.78rem; padding: 8px 12px; }
    .sd-tab-content .panel__body { padding: 10px 12px; overflow-x: hidden; width: 100%; margin-bottom: 60px; }

    #assign-form .dispatch-inline { flex-wrap: wrap; }
    #status-form .detail-grid { grid-template-columns: 1fr; }
    #status-form, #assign-form { width: 100%; }
    #status-form select, #status-form input, #assign-form select, #assign-form input { width: 100% !important; min-width: 0; box-sizing: border-box; }
    #ds-cards { margin-bottom: 90px; }

    #add-cost-form, #generate-doc-form, #upload-doc-form, #add-milestone-form { flex-wrap: wrap; }
    #add-cost-form input, #add-cost-form select, #generate-doc-form select { min-width: 0; flex: 1 1 110px; }
    #upload-doc-wrap { padding: 10px; }
    #upload-doc-wrap .detail-grid { grid-template-columns: 1fr; }
    #create-customs-form .detail-grid { grid-template-columns: 1fr; }
    .star-btn { font-size: 1.8rem; padding: 3px 5px; }
    .share-dropdown { right: auto; left: 0; }
    .sd-summary .sd-card:last-child { grid-column: 1 / -1; }

    .quick-actions { flex-direction: column; gap: 5px; }
    .quick-actions .btn--sm { width: 100%; min-height: 34px; font-size: 0.82rem; justify-content: center; }
    .quick-actions .start-btn { font-size: 0.95rem; min-height: 38px; font-weight: 700; }
    .quick-actions .gps-quick-btn { font-size: 0.9rem; min-height: 36px; }

    .sd-progress-panel .panel__header { flex-wrap: wrap; gap: 6px; }
    .sd-progress-panel .panel__header > div { flex-wrap: wrap; }
    .sd-progress-panel form.dispatch-inline { flex-wrap: wrap; gap: 5px; }
}

.mobile{
margin-top:0px;
}
/* ── Small phone ── */
@media (max-width: 640px) {
    .page-content { padding: 10px;padding-bottom: 100px;margin-top: 90px; }
    #my-shipments-board-root{
        margin-top: 20px;
    }
    .dispatch-tabs[id$="-tabs"] {
        margin-top: 20px;
    }
    .stack{
        margin-top: 20px;
    }
    .mobile{
        margin-top:20px;
    }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card h3 { font-size: 1.4rem; }
    .stat-card__icon { font-size: 1.1rem; top: 10px; right: 10px; }
    .panel__header { padding: 12px 14px; flex-wrap: wrap; gap: 6px; display: inline-grid; }
    .panel__body { padding: 12px 14px; display: inline-grid;width: 100% !important; }
    .detail-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 18px 14px; }
    .bar-chart { gap: 6px; height: 110px; }
    .bar-chart__bar { max-width: 28px; }
    .topbar { padding: 8px 10px; min-height: auto;margin-bottom: 50px !important; }
    .btn { min-height: 36px; padding: 0 12px; font-size: 0.84rem; }
    .btn--sm { min-height: 30px; padding: 0 8px; }
    .form-group input, .form-group textarea, .form-group select { padding: 8px 10px; font-size: 0.86rem; width: 100%; box-sizing: border-box; }
    .stt-mic { width: 28px; height: 28px; font-size: 0.8rem; }
    .form-group .stt-mic { bottom: 5px; right: 2px; }
    .form-group input, .form-group textarea { padding-right: 34px; }

    .sp-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sp-dot { width: 28px; height: 28px; }
    .sp-dot__icon { font-size: 0.75rem; }
    .sp-label { font-size: 0.62rem; }
    .tl-item { grid-template-columns: 26px 1fr; gap: 6px; }
    .tl-dot { width: 26px; height: 26px; font-size: 0.7rem; }
    #sd-tabs .dispatch-tab { font-size: 0.74rem; padding: 5px 8px; }
    .sd-tab-content .table-wrap { overflow-x: auto; }
    .sd-tab-content .data-table { min-width: 480px; }
    .donut-chart__ring { width: 130px !important; height: 130px !important; }
    #update-eta-form { flex-wrap: wrap; }
    #shipper-fields .detail-grid { grid-template-columns: 1fr; }
}