/* Mobile-first overrides for phone-sized app usage. Loaded after module styles. */
:root { --mobile-safe-gap: 12px; }

.mobile-menu-toggle { display: none; }
.menu-icon span, .entity-management-button span { display: none; }

@media (max-width: 760px) {
    html { -webkit-text-size-adjust: 100%; }
    body { background: #eef2f7; }
    button, input, select, textarea { font-size: 16px; }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 8px 10px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.24);
    }

    .mobile-menu-toggle {
        appearance: none;
        border: 1px solid rgba(255,255,255,.2);
        background: rgba(255,255,255,.12);
        color: #fff;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 12px;
        font-weight: 700;
    }

    .menu-left {
        position: absolute;
        top: calc(100% + 1px);
        left: 8px;
        right: 8px;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        background: #111827;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 16px 30px rgba(15, 23, 42, .32);
    }

    .app-header.menu-open .menu-left { display: grid; }
    .menu-icon, .entity-management-button {
        min-height: 44px;
        margin: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255,255,255,.08);
        font-size: 15px;
    }
    .menu-icon span, .entity-management-button span { display: inline; font-family: var(--app-list-font-family); font-weight: 700; }

    .menu-right {
        justify-self: end;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
    }
    .entity-switcher-label, .user-name { display: none; }
    #entity-switcher, #locale-switcher { max-width: 112px; min-height: 36px; padding: 4px 6px; }
    #logout-btn { min-height: 36px; border: 0; border-radius: 8px; padding: 0 10px; }
    .menu-right .entity-management-button { min-width: 42px; justify-content: center; padding: 9px; }
    .menu-right .entity-management-button span { display: none; }

    #app-content { padding: 12px; }
    .module-header, .dashboard-module .module-header, .sales-module .module-header,
    .inventory-module .module-header, .leads-module .module-header,
    .service-module .module-header, .purchasing-module .module-header,
    .entities-module .module-header { flex-direction: column; align-items: stretch; gap: 10px; }

    .dashboard-widgets, .reports-grid, .utilities-grid, .purchasing-overview-grid { grid-template-columns: 1fr !important; }
    .dashboard-chart, .dashboard-module .module-header, .dashboard-widget, .reports-header, .utilities-header,
    .reports-category, .utilities-category, .purchasing-card { padding: 14px; border-radius: 12px; }

    .crm-controls, .inventory-controls, .sales-controls, .service-module .service-controls,
    .delivery-body, .sales-detail-layout { display: flex !important; flex-direction: column; align-items: stretch; height: auto; gap: var(--mobile-safe-gap); }
    .crm-search, .inventory-search, .sales-search, .service-module .service-search { width: 100%; }
    .crm-search input, .inventory-search input, .sales-search input, .service-module .service-search input,
    .sales-search input[type="search"], .sales-search input[type="date"] { min-width: 0; width: 100%; box-sizing: border-box; min-height: 42px; }

    .crm-filter-banks, .inventory-filter-row, .sales-filter-menu, .service-module .service-filters,
    .leads-module .module-filters, .purchasing-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }

    [class$="table-wrap"], [class*="table-wrap"], .inventory-compact-table-wrap,
    .crm-table-wrap, .sales-table-wrap, .reports-wholesale-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table, .sales-table, .inventory-table, .leads-table, .service-table { min-width: 720px; }
    th, td { white-space: nowrap; }

    .crm-table th:nth-child(n+5), .crm-table td:nth-child(n+5),
    .sales-table th:nth-child(n+6), .sales-table td:nth-child(n+6),
    .inventory-table th:nth-child(n+7), .inventory-table td:nth-child(n+7),
    .leads-table th:nth-child(n+5), .leads-table td:nth-child(n+5),
    .service-table th:nth-child(n+6), .service-table td:nth-child(n+6) { display: none; }

    [class*="modal-overlay"] { align-items: flex-start !important; justify-content: center !important; overflow-y: auto; padding: 10px; box-sizing: border-box; }
    [class*="modal"] { max-width: 100% !important; width: 100% !important; max-height: calc(100vh - 20px) !important; min-height: 0 !important; box-sizing: border-box; overflow-y: auto; border-radius: 12px !important; }
    [class*="modal-header"], [class*="modal-footer"] { position: sticky; background: #fff; z-index: 2; }
    [class*="modal-header"] { top: 0; }
    [class*="modal-footer"] { bottom: 0; flex-wrap: wrap; }
    [class*="form-grid"], .channel-form-grid, .entities-form-grid, .users-form-grid { grid-template-columns: 1fr !important; }

    .delivery-module, .service-module { height: auto; overflow: visible; padding: 0; }
    .delivery-pane, .sales-detail-pane, .sales-item-pane { height: auto; max-height: none; overflow: visible; padding: 14px; }
}

@media (max-width: 760px) {
    .mobile-menu-toggle-label,
    #logout-btn .logout-label,
    .menu-right .entity-management-button,
    .menu-right .locale-switcher {
        display: none !important;
    }

    #logout-btn {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-width: 36px;
    }

    .crm-filter-banks {
        display: none !important;
    }

    .crm-table {
        min-width: 0;
        font-size: 11px;
    }

    .crm-table thead {
        font-size: 9px;
    }

    .crm-table th,
    .crm-table td {
        padding: 8px 7px;
    }

    .crm-table th:nth-child(2),
    .crm-table td:nth-child(2),
    .crm-table th:nth-child(4),
    .crm-table td:nth-child(4),
    .crm-table th:nth-child(n+5),
    .crm-table td:nth-child(n+5) {
        display: none;
    }

    .crm-account-name-wrap {
        align-items: flex-start;
        gap: 0;
    }

    .crm-account-list-type-icon {
        display: none !important;
    }

    .crm-account-name-block {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .crm-account-name {
        font-size: 11px;
        white-space: normal;
    }

    .crm-account-mobile-email {
        color: #6b7280;
        display: block;
        font-size: 9px;
        line-height: 1.2;
        max-width: 52vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-modal.is-open,
    .crm-piano-rental-breakdown-modal {
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        padding: 1vh 1vw;
        box-sizing: border-box;
    }

    .crm-modal-card,
    .crm-modal-card.is-wide,
    .crm-piano-rental-breakdown-modal-card {
        box-sizing: border-box;
        max-height: 98vh;
        overflow-y: auto;
        width: 98vw !important;
    }
}