/*
 * PCA DRS shared responsive layout system
 * ---------------------------------------
 * Centralises desktop content widths while preserving the existing tablet
 * and phone layouts. Page-specific CSS continues to control composition;
 * this file only controls the outer working width and gutters.
 */

:root {
    --drs-layout-gutter: clamp(14px, 1.45vw, 30px);
    --drs-layout-readable: 1600px;
    --drs-layout-standard: 1900px;
    --drs-layout-wide: 2100px;
    --drs-layout-full: 2280px;
    --drs-layout-form: 2020px;
    --drs-layout-nav: 2280px;
    --drs-layout-admin: 1760px;
    --drs-layout-admin-narrow: 1320px;
}

/* Shared navigation aligns with the widest application workspace. */
html:not([data-drs-theme-exempt="true"]) :where(.home-nav-inner, .drs-data-nav-inner, .drs-home-commandbar__inner, .drs-commandbar__inner) {
    width: min(var(--drs-layout-nav), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
}

/* High-density lists and register tables benefit from the full display. */
html:not([data-drs-theme-exempt="true"]) :where(
    .pca-register-shell,
    .content-container
) {
    width: min(var(--drs-layout-full), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Standard application workspaces. */
html:not([data-drs-theme-exempt="true"]) :where(
    .sites-page,
    .areas-page,
    .about-shell,
    .dashboard-page
) {
    width: min(var(--drs-layout-wide), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Board stays slightly more compact because its cards are intentionally short. */
html:not([data-drs-theme-exempt="true"]) .board-page {
    width: min(var(--drs-layout-standard), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Recording forms gain useful horizontal space without becoming edge-to-edge. */
html:not([data-drs-theme-exempt="true"]) .pca-form-shell {
    width: min(var(--drs-layout-form), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Register landing page and database/data workspaces. */
html:not([data-drs-theme-exempt="true"]) :where(
    .pca-register-home-shell,
    .data-home-panel,
    .data-home-page
) {
    width: min(var(--drs-layout-standard), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Management and conventional admin pages. The kiosk dashboard is exempt. */
html:not([data-drs-theme-exempt="true"]) .admin-module-shell {
    --admin-module-content-width: var(--drs-layout-admin);
    width: min(var(--drs-layout-admin), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

html:not([data-drs-theme-exempt="true"]) .admin-module-shell--narrow {
    --admin-module-content-width-narrow: var(--drs-layout-admin-narrow);
    width: min(var(--drs-layout-admin-narrow), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
}

html:not([data-drs-theme-exempt="true"]) .management-wizard-page .admin-module-shell {
    width: min(var(--drs-layout-wide), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
}

html:not([data-drs-theme-exempt="true"]) :where(.admin-home, .admin-form-page) {
    width: min(var(--drs-layout-admin-narrow), calc(100% - (var(--drs-layout-gutter) * 2))) !important;
    max-width: none !important;
}

/* Preserve the established compact behaviour below common laptop/tablet widths. */
@media (max-width: 1100px) {
    :root {
        --drs-layout-gutter: 12px;
    }

    html:not([data-drs-theme-exempt="true"]) :where(
        .pca-register-shell,
        .content-container,
        .sites-page,
        .areas-page,
        .about-shell,
        .dashboard-page,
        .board-page,
        .pca-form-shell,
        .pca-register-home-shell,
        .data-home-panel,
        .data-home-page,
        .admin-module-shell,
        .admin-module-shell--narrow,
        .admin-home,
        .admin-form-page
    ) {
        width: calc(100% - 24px) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --drs-layout-gutter: 9px;
    }

    html:not([data-drs-theme-exempt="true"]) :where(
        .pca-register-shell,
        .content-container,
        .sites-page,
        .areas-page,
        .about-shell,
        .dashboard-page,
        .board-page,
        .pca-form-shell,
        .pca-register-home-shell,
        .data-home-panel,
        .data-home-page,
        .admin-module-shell,
        .admin-module-shell--narrow,
        .admin-home,
        .admin-form-page
    ) {
        width: calc(100% - 18px) !important;
    }

    /* Sites/areas already provide their own internal mobile padding. */
    html:not([data-drs-theme-exempt="true"]) :where(.sites-page, .areas-page) {
        padding-inline: 0 !important;
    }
}

@media (max-width: 430px) {
    :root {
        --drs-layout-gutter: 6px;
    }

    html:not([data-drs-theme-exempt="true"]) :where(
        .pca-register-shell,
        .content-container,
        .sites-page,
        .areas-page,
        .about-shell,
        .dashboard-page,
        .board-page,
        .pca-form-shell,
        .pca-register-home-shell,
        .data-home-panel,
        .data-home-page,
        .admin-module-shell,
        .admin-module-shell--narrow,
        .admin-home,
        .admin-form-page
    ) {
        width: calc(100% - 12px) !important;
    }
}