/**
 * Global mobile / phone layout overrides for AlerTara QC.
 * Load this AFTER page inline <style> blocks so it can win with !important.
 */

/* —— Safe area & base —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.table-container,
.table-responsive,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

table.data-table,
.page-content table {
    min-width: 0;
}

/* —— Phone / tablet shell —— */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Drawer sidebar — full width content, no collapsed gutter */
    .sidebar {
        width: min(320px, 88vw) !important;
        max-width: 320px !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s ease !important;
        z-index: 2000 !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* On phones, treat "collapsed" as closed drawer (not 80px rail) */
    .sidebar.collapsed {
        width: min(320px, 88vw) !important;
        transform: translateX(-105%) !important;
    }

    .sidebar.collapsed.mobile-open,
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0) !important;
        width: min(320px, 88vw) !important;
    }

    .main-wrapper,
    body.sidebar-collapsed .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .top-header {
        padding: 0.85rem 1rem !important;
        padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)) !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }

    .top-header-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0.65rem !important;
    }

    .page-title {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }

    .user-info {
        margin-left: 0 !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    .datetime-display {
        font-size: 0.78rem !important;
    }

    .content-area {
        padding: 0.85rem 0.85rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .page-content {
        padding: 0.85rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .content-burger-btn {
        flex-shrink: 0 !important;
    }

    /* Dim overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(11, 19, 43, 0.45);
        z-index: 1990;
        border: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-overlay.show,
    body.sidebar-mobile-open .sidebar-overlay {
        display: block;
    }

    /* Cards / grids / forms */
    .dashboard-charts-row--summary,
    .dashboard-charts-row--trends,
    .dashboard-charts-row,
    .stats-grid,
    .quick-links,
    .card-grid,
    .form-row,
    .filters-row,
    .filter-bar,
    .action-buttons,
    .button-row {
        grid-template-columns: 1fr !important;
    }

    .quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .chart-wrapper,
    .chart-wrapper.tall {
        height: 220px !important;
    }

    .chart-card,
    .stat-card,
    .quick-link-card,
    .modal-content,
    .form-card {
        padding: 1rem !important;
    }

    .form-group,
    .field {
        min-width: 0 !important;
    }

    input,
    select,
    textarea,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .field input,
    .field select,
    .field textarea {
        font-size: 16px !important; /* prevent iOS zoom */
        max-width: 100% !important;
    }

    .btn,
    .btn-submit,
    .btn-cancel,
    .modal-btn-submit,
    .modal-btn-cancel,
    button.btn {
        max-width: 100%;
    }

    .form-actions,
    .modal-form-actions,
    .button-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .form-actions .btn,
    .form-actions button,
    .button-group .btn {
        width: 100% !important;
    }

    /* Tables scroll horizontally instead of breaking layout */
    .table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    .page-content table,
    .content-area table {
        max-width: none;
    }

    /* Modals */
    .modal,
    .modal-overlay,
    .success-modal {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }

    .modal-content,
    .modal-panel,
    .success-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
    }

    /* Filters / search bars */
    .search-box,
    .filter-group,
    .toolbar,
    .page-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .search-box input,
    .filter-group select,
    .filter-group input {
        width: 100% !important;
    }

    /* NW dashboard: card list on phones */
    .report-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
    }

    .table-container:has(+ .report-cards) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.05rem !important;
    }

    .quick-links {
        grid-template-columns: 1fr !important;
    }

    .quick-link-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.35rem !important;
    }

    .content-area,
    .page-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .datetime-display .date-part,
    .datetime-display .time-part {
        display: block;
    }
}