/* Operational page chrome only. Printed documents and designer canvases keep
   their own measurements and colors; the established invoice styles take priority. */
@media screen {
    :root {
        --app-page-radius: 16px;
        --app-page-gap: 12px;
        --app-page-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
        --app-page-border: var(--mud-palette-lines-default);
    }

    #app .erp-page-host,
    #app .erp-page-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #app .erp-page-content {
        border: 1px solid var(--app-page-border);
        border-radius: var(--app-page-radius) !important;
        box-shadow: var(--app-page-shadow) !important;
    }

    #app .erp-page-content[style*="--page-content-available-height"] {
        height: var(--page-content-available-height);
        min-height: 0 !important;
        overflow: auto;
    }

    #app :is(.app-page-card, .product-info-card, .contact-page-card,
        .accounts-page-card, .cost-centers-page-card, .category-page-card,
        .branch-page-card, .user-page-card, .vehicle-page-card, .store-page-card,
        .unit-page-card, .unit-card, .journal-header-card, .campaign-card,
        .setting-card, .screen-menu-card) {
        min-width: 0;
        border: 1px solid var(--app-page-border);
        border-radius: var(--app-page-radius) !important;
        box-shadow: var(--app-page-shadow) !important;
        background: var(--mud-palette-surface);
    }

    #app :is(.product-section-header, .contact-section-header, .category-section-header,
        .branch-section-header, .user-section-header, .vehicle-section-header,
        .store-section-header, .unit-section-header, .unit-card-header,
        .journal-section-header, .campaign-section-header, .screen-menu-header) {
        padding: 10px 14px !important;
        gap: 8px;
        border-bottom: 1px solid var(--app-page-border);
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    }

    #app :is(.product-section-title, .contact-section-title, .category-section-title,
        .branch-section-title, .user-section-title, .vehicle-section-title,
        .store-section-title, .unit-section-title, .unit-card-title,
        .journal-section-title, .screen-menu-title) {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: normal;
    }

    /* Management screens that do not use PageHost. */
    #app :is(.network-management-page, .printer-management-page, .windows-security-page,
        .device-health-page, .regional-settings-page, .tenant-management-page,
        .tenant-hierarchy-page, .tour-control-page, .financial-close-page,
        .session-management-page, .setting-page, .ai-report-page,
        .kitchen-print-shell, .activity-shell, .license-report-shell, .session-report-shell) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: clamp(8px, 1.2vw, 16px);
    }

    #app :is(.network-management-header, .printer-management-header, .windows-security-header,
        .device-health-header, .regional-settings-header, .tenant-management-header,
        .tenant-hierarchy-header, .tour-control-header, .financial-close-header,
        .ai-report-header, .kitchen-page-header, .license-page-header) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding-block: 8px;
        margin-bottom: 12px;
    }

    #app :is(.network-panel, .windows-security-panel, .network-summary-card,
        .windows-security-summary-card, .financial-close-card, .session-summary-tile,
        .license-summary-tile, .kitchen-identity-card, .tour-side-panel,
        .session-editor, .printer-discovery-panel, .tenant-hierarchy-editor,
        .closed-session-collections-summary-card) {
        min-width: 0;
        border: 1px solid var(--app-page-border);
        border-radius: 12px;
        box-shadow: var(--app-page-shadow);
    }

    #app :is(.device-health-actions, .regional-settings-actions, .kitchen-header-actions,
        .tenant-management-toolbar, .tenant-hierarchy-toolbar, .board-filter-actions,
        .setting-action-bar, .ai-report-toolbar) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    /* Shared form controls retain validation and semantic colors. */
    #app :is(.erp-page-host, .setting-page, .network-management-page,
        .regional-settings-page, .tenant-management-page, .tenant-hierarchy-page,
        .financial-close-page, .kitchen-print-shell, .campaign-page)
    :is(.mud-input-label, .mud-input-label-text) {
        font-weight: 600;
        letter-spacing: normal;
    }

    #app :is(.erp-page-host, .setting-page, .regional-settings-page,
        .tenant-management-page, .tenant-hierarchy-page)
    .mud-input-outlined-border {
        transition: border-color 120ms ease;
    }

    #app :is(.accounts-tree-pane, .accounts-detail-pane,
        .cost-centers-tree-pane, .cost-centers-detail-pane) {
        min-width: 0;
        padding: 14px !important;
    }

    #app .page-control-buttons-host .main-buttons-group {
        border-radius: 10px !important;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) !important;
    }

    #app .page-control-buttons-host .main-buttons-group .mud-icon-button::after {
        display: none;
    }

    #app .page-control-buttons-host .main-buttons-group .mud-icon-button:hover {
        transform: none !important;
    }

    /* Search and editable grids: keep row heights and configured widths intact. */
    #app .search-box-container,
    #app .excel-grid-container {
        min-width: 0;
    }

    #app .search-box-container > .mud-table {
        border: 1px solid var(--app-page-border);
        border-radius: 12px;
        box-shadow: var(--app-page-shadow) !important;
    }

    #app .search-box-container .mud-table-head .mud-table-cell,
    #app .excel-grid .mud-table-head .mud-table-cell {
        letter-spacing: normal;
        text-transform: none;
        font-weight: 700;
    }

    #app .search-box-container .mud-table-body .mud-table-cell,
    #app .excel-grid .mud-table-cell {
        font-variant-numeric: tabular-nums;
    }

    #app .search-box-container .mud-table-head .mud-table-row > .mud-table-cell {
        border-radius: 0 !important;
    }

    #app .search-box-container .mud-table-head .mud-table-row:first-child > .mud-table-cell:first-child {
        border-start-start-radius: 10px !important;
    }

    #app .search-box-container .mud-table-head .mud-table-row:first-child > .mud-table-cell:last-child {
        border-start-end-radius: 10px !important;
    }

    #app .search-pagination {
        min-height: 36px;
        padding: 2px 6px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--app-page-border);
    }

    #app .search-pagination .mud-pagination {
        margin-block: 0;
    }

    #app .search-pagination .mud-pagination-item {
        border-radius: 8px !important;
        box-shadow: none;
    }

    #app .search-pagination-control {
        gap: 6px;
    }

    /* Report chrome is separate from report/receipt content. */
    #app .report-shell::before {
        display: none;
    }

    #app .report-main-panel,
    #app .report-shell > .mud-grid > .mud-grid-item:not(.report-filter-item-collapsed) .report-filter-panel {
        border: 1px solid var(--app-page-border);
        border-radius: var(--app-page-radius) !important;
        box-shadow: var(--app-page-shadow) !important;
        background: var(--mud-palette-surface) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #app .report-filter-panel :is(.filter-panel-header, .report-filter-content) {
        padding: 12px !important;
    }

    #app .report-shell :is(.report-card, .main-card) {
        border-radius: 14px;
        box-shadow: var(--app-page-shadow);
    }

    /* Navigation tiles and login retain their existing identity and colors. */
    #app :is(.menu-tile, .home-shell .quick-link, .app-nav-menu .mud-nav-link) {
        border-radius: 10px;
    }

    #app .login-card {
        border: 1px solid var(--app-page-border);
        border-radius: 20px;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
    }

    #app :is(.multi-edit-header, .move-usages-header, .multi-add-header) {
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--app-page-border);
        background: var(--mud-palette-surface);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    #app :is(.multi-edit-pagination, .move-usages-pagination) {
        min-height: 36px;
        padding-block: 2px;
        background: var(--mud-palette-surface);
    }

    /* Dialog framing also reaches standalone management and configuration views. */
    #app .mud-dialog:not(.mud-dialog-fullscreen) {
        border-radius: var(--app-page-radius);
        box-shadow: 0 16px 44px rgba(15, 23, 42, 0.2) !important;
    }

    #app .mud-dialog:not(.mud-dialog-fullscreen) > .mud-dialog-title {
        padding: 16px 20px 12px;
        font-size: 1rem;
    }

    #app .mud-dialog:not(.mud-dialog-fullscreen) > .mud-dialog-actions {
        padding: 10px 16px 14px;
        gap: 8px;
    }

    #app .mud-dialog:not(.mud-dialog-fullscreen) > .mud-dialog-actions .mud-button-root {
        min-height: 36px;
        box-shadow: none !important;
    }

    #app :is(.menu-tile, .quick-link, .setting-action-bar button,
        .page-control-buttons-host button, .report-card):focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 3px;
    }
}

@media screen and (max-width: 600px) {
    #app .erp-page-content {
        border-radius: 12px !important;
    }

    #app :is(.app-page-card, .product-info-card, .contact-page-card,
        .accounts-page-card, .cost-centers-page-card, .category-page-card,
        .branch-page-card, .user-page-card, .vehicle-page-card, .store-page-card,
        .unit-page-card, .journal-header-card, .campaign-card) {
        margin: 4px !important;
        border-radius: 12px !important;
    }

    #app :is(.accounts-tree-pane, .accounts-detail-pane,
        .cost-centers-tree-pane, .cost-centers-detail-pane) {
        padding: 10px !important;
    }

    #app :is(.tenant-management-search, .tenant-hierarchy-search,
        .accounts-search-field, .cost-centers-search-field) {
        min-width: 0;
        max-width: 100%;
    }

    #app .search-pagination-control {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    #app :is(.erp-page-host, .setting-page, .screen-menu-card) * {
        transition: none !important;
    }
}

/* Explicit device performance preferences outrank page-level polish. */
@media screen {
    html.device-reduce-shadows #app *,
    html.device-reduce-shadows #app *::before,
    html.device-reduce-shadows #app *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}