/* Phone / small tablet — off-canvas menu, full-width content, compact chrome.
   Loaded last (before owner-portal) so it wins over desktop rail layout. */

html.ui-depth-on body.ui-depth-on { }

@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell {
        height: 100dvh;
        height: 100svh;
        overflow: hidden;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Off-canvas drawer — keep a real phone width (never 0 via --sidebar-w). */
    .app-shell {
        --sidebar-w: 18rem;
    }
    .app-shell.sidebar-closed .sidebar {
        width: min(18rem, 88vw) !important;
        max-width: min(18rem, 88vw) !important;
        padding: 1.15rem 0.85rem !important;
        pointer-events: none;
        visibility: hidden;
    }
    .app-shell.ltr.sidebar-closed .sidebar {
        transform: translateX(-110%) !important;
    }
    .app-shell.rtl.sidebar-closed .sidebar {
        transform: translateX(110%) !important;
    }

    .app-shell.sidebar-open .sidebar {
        width: min(18rem, 88vw) !important;
        max-width: min(18rem, 88vw) !important;
        padding: 1.15rem 0.85rem !important;
        pointer-events: auto;
        visibility: visible;
        transform: none !important;
        z-index: 400;
    }

    .app-shell.sidebar-closed .sidebar-brand .brand-text,
    .app-shell.sidebar-closed .nav-section-label,
    .app-shell.sidebar-closed .nav-text,
    .app-shell.sidebar-closed .user-meta,
    .app-shell.sidebar-closed .logout-text,
    .app-shell.sidebar-closed .nav-group-title,
    .app-shell.sidebar-closed .nav-group-caret,
    .app-shell.sidebar-closed .nav-group-body {
        display: revert;
    }

    .main-wrapper,
    .app-shell.sidebar-closed .main-wrapper,
    .app-shell.sidebar-open .main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    header.top-bar {
        min-height: 52px;
        padding: 0.4rem 0.55rem;
        padding-inline-start: max(0.55rem, env(safe-area-inset-left, 0px));
        padding-inline-end: max(0.55rem, env(safe-area-inset-right, 0px));
        gap: 0.4rem;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .top-bar-start {
        gap: 0.45rem;
        min-width: 0;
        flex: 0 1 auto;
    }

    .top-greeting { display: none !important; }

    .top-title-wrap { min-width: 0; max-width: 38vw; }
    .top-title {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .top-bar-end {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .top-bar-end::-webkit-scrollbar { display: none; }

    .top-bar-page-actions { display: none; }
    .top-bar-offline-cluster { max-width: none; }

    .page-body {
        padding: 0.7rem 0.7rem 5.5rem !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .dash-context-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }
    .dash-context-bar .dash-fiscal-inline,
    .dash-context-bar .chrome-date-filter {
        flex: 1 1 auto !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 2.6rem !important;
        max-height: none !important;
        overflow: hidden;
    }
    .dash-context-bar .fiscal-strip-meta { display: none; }
    .chrome-date-filter .cdf-dates {
        min-width: 0;
        flex: 1 1 auto;
    }
    .chrome-date-filter .cdf-input {
        min-width: 0;
        max-width: 100%;
        font-size: 0.82rem;
    }

    .dash-hero {
        padding: 0.85rem 0.85rem !important;
        border-radius: 16px;
    }
    .dash-hero-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .dash-quick-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 0.4rem;
    }
    .dash-action {
        flex: 1 1 calc(50% - 0.4rem);
        justify-content: center;
        white-space: nowrap;
        min-width: 0;
        font-size: 0.72rem;
        padding: 0.4rem 0.45rem;
    }

    .stat-grid.dash-stats-4,
    .dash-charts-row,
    .dash-mid-row,
    .fin-charts-row,
    .dash-bottom-row,
    .dash-detail-row {
        grid-template-columns: 1fr !important;
    }
    .stat-grid.dash-stats-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem;
    }

    .panel-card { min-width: 0; }
    .data-table, .report-table { font-size: 0.78rem; }

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

    .pos-screen,
    .pos-screen--purchase,
    .app-shell.sidebar-closed .pos-screen,
    .app-shell.sidebar-closed .pos-screen--purchase {
        grid-template-columns: 1fr !important;
    }

    #blazor-error-ui {
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.85rem;
        z-index: 10050;
    }
}

@media (max-width: 480px) {
    .top-bar-end .theme-strip-compact,
    .top-bar-end .depth-toggle {
        display: none !important;
    }
    .dash-action {
        flex: 1 1 100%;
    }
    .stat-grid.dash-stats-4 {
        grid-template-columns: 1fr !important;
    }
}