/* operations - responsive fixes for this module only. Loaded after css/shared/responsive.css
   on every page in the area. See DOCS/Showcase-Mobile.md.

   Swept 2026-09-13 at 390px and 820px across all 27 pages. The grids, guides and
   stat cards are handled by the shared layer; only the widgets below needed help. */

@media (max-width: 1023.98px) {

    /* Fleet / Inventory / Time dashboards: the Quick Actions row (base style in
       css/customers/dashboard/index.css) is a non-wrapping flex row and ran off
       the right edge of a phone. */
    .quick-actions-horizontal {
        flex-wrap: wrap;
    }

    .quick-actions-horizontal .quick-action-item {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 767.98px) {

    /* Stock Snapshot: per-store tables are .snapshot-table, not .data-table, so
       they stay tables. The card body clipped the Min Qty and Status columns;
       let it scroll sideways instead. */
    .store-card-body {
        overflow-x: auto;
    }

    .snapshot-table {
        min-width: 560px;
    }

    .snapshot-table td,
    .snapshot-table th {
        white-space: nowrap;
    }

    .snapshot-table td:first-child {
        white-space: normal;
        min-width: 180px;
    }
}

@media (max-width: 639.98px) {

    /* Support dashboard: Tickets by Status / Open by Priority side by side was
       too tight for a phone ("Waiting on Customer" wrapped onto two lines). */
    .dashboard-breakdown {
        grid-template-columns: 1fr !important;
    }

    /* Stock Snapshot store header: name, type badge and three counters on one
       line did not fit; let the counters drop under the name. */
    .store-card-header {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .store-card-header-right {
        flex-wrap: wrap;
        gap: 8px 12px;
        width: 100%;
        justify-content: flex-start;
    }

    .quick-actions-horizontal .quick-action-item {
        flex-basis: 100%;
    }
}