/* Shared responsive presentation; no duplicated controls or alternate forms. */
.app-mobile-cell-label,
.app-mobile-card-toggle-cell,
.app-mobile-table-sort { display: none; }
.app-password-control { display: flex; align-items: stretch; min-width: 0; }
.app-password-control > .form-control { min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.app-password-control > .app-password-toggle { flex: 0 0 44px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.app-form-dirty [data-form-save-status] { color: var(--bs-warning-text-emphasis, #805b00); }
.app-permission-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.app-permission-toggle .form-check-input { margin: 0; width: 1.2rem; height: 1.2rem; }
.auth-layout-stage > .container { width: 100%; min-width: 0; }
.auth-layout-stage > .container > .row { margin-inline: 0; }
.role-selector__option-target { overflow-wrap: anywhere; }
.app-ui-disclosure > summary { cursor: pointer; padding: .85rem 1rem; font-weight: 600; }
.app-ui-disclosure > summary:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.app-ui-disclosure > .app-ui-disclosure-body { padding: 0 1rem 1rem; }

@media screen and (max-width: 991.98px) {
    body.app-admin-shell { --app-control-min-height: 44px; }
    /* Matching the existing admin/PWA breakpoint also covers landscape phones. */
    body.app-admin-shell .btn,
    body.app-admin-shell .form-control,
    body.app-admin-shell .form-select,
    body .authentication-bg .btn,
    body .authentication-bg .form-control,
    body .authentication-bg .form-select { min-height: 44px; }
    body.app-admin-shell input.form-control,
    body.app-admin-shell textarea.form-control,
    body.app-admin-shell select.form-select,
    body .authentication-bg input.form-control,
    body .authentication-bg select.form-select { font-size: 16px; }
    body.app-admin-shell .gridjs-pages button { min-width: 44px; min-height: 44px; }
    body.app-admin-shell .btn-close { min-width: 44px; min-height: 44px; padding: 0; background-size: 14px; }
    .role-selector__locale-button,
    .role-selector__logout-button { min-height: 44px; display: inline-flex; align-items: center; }
    .app-mobile-table-sort { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; font-weight: 600; font-size: .85rem; }
    .app-mobile-table-sort select { flex: 1 1 180px; width: auto; min-width: 0; }
    .table-responsive:has(> .app-mobile-cards),
    .gridjs-wrapper:has(> .app-mobile-cards) { overflow: visible; max-height: none; border: 0; box-shadow: none; }
    .app-admin-shell table.app-mobile-cards { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; border: 0; table-layout: auto; background: transparent; }
    .app-admin-shell table.app-mobile-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .app-admin-shell table.app-mobile-cards > tbody { display: block; width: 100%; }
    .app-admin-shell table.app-mobile-cards > tbody > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .65rem .9rem;
        margin-bottom: .85rem; padding: 1rem; border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: var(--bs-border-radius-lg, .6rem); background: var(--bs-body-bg, white);
    }
    .app-admin-shell table.app-mobile-cards > tbody > tr > td,
    .app-admin-shell table.app-mobile-cards > tbody > tr > th {
        display: block; min-width: 0; max-width: 100%; width: auto !important; padding: 0 !important;
        border: 0; white-space: normal !important; overflow-wrap: anywhere; background: transparent; box-shadow: none;
        text-align: start !important;
    }
    .app-admin-shell table.app-mobile-cards > tbody > tr > .app-mobile-cell-title,
    .app-admin-shell table.app-mobile-cards > tbody > tr > .app-mobile-cell-actions,
    .app-admin-shell table.app-mobile-cards > tbody > tr > .app-mobile-card-toggle-cell,
    .app-admin-shell table.app-mobile-cards > tbody > .app-mobile-card-group > *,
    .app-admin-shell table.app-mobile-cards > tbody > .app-mobile-card-editable > * { grid-column: 1 / -1; }
    .app-mobile-cell-label { display: block; color: var(--bs-secondary-color, #6c757d); font-size: .75rem; font-weight: 600; line-height: 1.4; margin-bottom: .25rem; }
    .app-mobile-cell-title { font-weight: 600; }
    .app-admin-shell table.app-mobile-cards > tbody > tr:not(.app-mobile-card-expanded) > .app-mobile-cell-extra { display: none; }
    .app-mobile-card-toggle { width: 100%; }
    .app-mobile-cell-actions .app-action-group,
    .app-mobile-cell-actions > .d-flex { flex-wrap: wrap; justify-content: flex-start !important; }
    .app-mobile-card-editable .form-control,
    .app-mobile-card-editable .form-select { width: 100%; min-width: 0; }
    .app-mobile-card-editable .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
    .app-mobile-card-editable .form-check-input { flex-shrink: 0; }
    .app-mobile-card-editable input[type="number"] { min-width: 5.5rem; }
    .app-mobile-card-editable input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
    .app-mobile-cell-actions [title] { min-width: 44px; }
    /* Nested forms are part of the scrollable dialog, not an extra scroll root. */
    .modal .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; }
    .modal .modal-content > form > .modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior-y: contain; }
    .modal .modal-content > form > .modal-header,
    .modal .modal-content > form > .modal-footer { flex: 0 0 auto; }
    .app-role-panel-hero .card-body { padding: 1.15rem !important; gap: 1rem !important; }
    .app-role-panel-hero h2 { font-size: 1.35rem; }
}

@media screen and (max-width: 575.98px) {
    .app-mobile-card-editable select,
    .app-mobile-card-editable textarea { max-width: 100%; }
    .auth-layout-stage { padding-inline: max(12px, env(safe-area-inset-left, 0px)); }
    .auth-layout-stage > .container { padding-inline: 0; }
    .auth-layout-stage > .container > .row > [class*="col-"] { padding-inline: 0; }
}

@media print {
    .app-mobile-cell-label, .app-mobile-card-toggle-cell, .app-mobile-table-sort, .app-password-toggle { display: none !important; }
}

@media screen and (max-width: 991.98px) {
    body.app-admin-shell .page-content .gridjs-pages { gap: .2rem; padding-inline: 46px; }
    body.app-admin-shell .page-content .gridjs-pages button,
    body.app-admin-shell .page-content .gridjs-pages button:first-child,
    body.app-admin-shell .page-content .gridjs-pages button:last-child { min-width: 44px; height: 44px; }
    body.app-admin-shell .page-content .gridjs-pages button.gridjs-spread { display: none; }
    body.app-admin-shell .page-content .gridjs-summary { white-space: normal; }
    .announcement-form-summary { padding: 1rem !important; }
    .announcement-form-summary h2, .announcement-form-summary h3 { font-size: 1.3rem; margin-bottom: .5rem; }
    .announcement-form-summary__badge { font-size: .8rem; padding: .4rem .6rem; }
    .announcement-form-tabs, .announcement-language-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .announcement-form-tabs .nav-link, .announcement-language-tabs .nav-link { white-space: nowrap; min-height: 44px; padding: .65rem .9rem; }
    .account-profile-template__cover { display: none; }
    .account-profile-template__side-card .card-body > .p-4 { padding: 1rem !important; }
    .account-profile-template__side-card .mt-n5 { margin-top: 0 !important; display: flex; align-items: center; gap: 1rem; text-align: start !important; padding-bottom: 0 !important; border: 0 !important; }
    .account-profile-template__side-card .account-profile-template__avatar { width: 56px; height: 56px; flex: 0 0 56px; margin: 0 !important; }
    .account-profile-template__side-card .account-profile-template__avatar .avatar-xl { width: 56px; height: 56px; font-size: 1.25rem !important; }
    .account-profile-template__side-card .mt-n5 > .mt-3 { margin-top: 0 !important; min-width: 0; overflow-wrap: anywhere; }
    .account-profile-template__side-card .table-responsive { display: none; }
    .account-profile-template__side-card .d-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.pwa-offline-card__button { border: 0; cursor: pointer; min-height: 44px; }
.pwa-offline-card__return { display: block; margin-top: 1rem; padding: .65rem; }
@media screen and (max-width: 991.98px) {
    body[data-layout="vertical"] .app-mobile-bottom-nav__item { min-height: 44px; padding: .1rem 0; gap: .1rem; }
    body[data-layout="vertical"] .app-mobile-bottom-nav__item > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap { height: 1.5rem; width: 1.5rem; }
    body[data-layout="vertical"] .app-mobile-bottom-nav__item > span:not(.app-mobile-bottom-nav__icon-wrap) {
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 2.3em; min-height: 2.3em; max-width: 100%;
        white-space: normal; overflow-wrap: normal; overflow: visible; text-overflow: clip;
        line-height: 1.15; font-size: .6875rem; text-align: center;
    }
}

.settings-savebar { position: sticky; bottom: 0; z-index: 8; background: var(--bs-body-bg) !important; }
@media screen and (max-width: 991.98px) {
    .settings-savebar { bottom: calc(var(--app-mobile-bottom-nav-height, 68px) + env(safe-area-inset-bottom, 0px)); padding: .75rem 1rem !important; }
    .settings-savebar > .d-flex { gap: .5rem !important; }
    .settings-savebar [data-form-save-status]:empty { display: none; }
    [data-onboarding-target="role-dashboard-page"] > .app-role-panel-identity { order: 4; }
    [data-onboarding-target="role-dashboard-page"] > .app-role-panel-metric { order: 3; }
    [data-onboarding-target="role-dashboard-page"] > .app-role-panel-quick-links { order: 2; }
    .app-role-panel-metric .card-body { padding: 1rem; }
    .app-role-panel-metric .card-body > .mb-3 { margin-bottom: .5rem !important; }
    .app-role-panel-metric .avatar-title { display: none; }
}

@media screen and (max-width: 991.98px) {
    .crm-pending-board--filtered > .crm-pending-column:not(.is-mobile-active) { display: none; }
    .crm-dashboard-metrics > [class*="col-"] { width: 50%; }
    .access-control-center__hero .card-body { padding: 1rem !important; gap: .75rem !important; }
    .access-control-center__hero h2 { font-size: 1.3rem; }
    .access-control-center__hero-metrics { display: flex; flex-wrap: wrap; gap: .5rem; }
    .access-control-center__hero-metric { flex: 1; min-width: 0; padding: .5rem .65rem; }
    .access-control-center__metric-value { font-size: 1.1rem; }
    .access-control-center__hero-copy { font-size: .85rem; }
    .settings-sidebar-builder__canvas-select { min-height: 44px; }
}

@media print { .settings-savebar { position: static; } }

@media screen and (max-width: 991.98px) {
    .eps-admin-dashboard__chart-column { order: 3; }
    .eps-admin-dashboard__today-column { order: 1; }
    .operation-health-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
    .operation-health-card { padding: .85rem; }
    .operation-status-strip { padding: 1rem; gap: .75rem; }
    .operation-status-strip__body h1 { font-size: 1.35rem; }
}

@media screen and (max-width: 991.98px) {
    table[data-mobile-details="true"], table[data-mobile-details="true"] > tbody,
    table[data-mobile-details="true"] > tbody > tr { display: block; width: 100%; }
    table[data-mobile-details="true"] > tbody > tr > th,
    table[data-mobile-details="true"] > tbody > tr > td { display: block; width: auto !important; white-space: normal !important; overflow-wrap: anywhere; text-align: start !important; }
    table[data-mobile-details="true"] > tbody > tr > th { border-bottom: 0; padding-bottom: .25rem; }
    table[data-mobile-details="true"] > tbody > tr > td { border-top: 0; padding-top: .25rem; }
}

@media screen and (max-width: 991.98px) {
    .form-check > .form-check-label { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
    .form-check:has(> .form-check-label) > .form-check-input { margin-top: .85rem; }
}