/*
 * Purpose: opt-in mobile UI tokens, layout primitives, and accessibility helpers.
 * Usage: apply only ui-* classes in templates migrated to the shared mobile UI layer.
 * Intentionally not implemented yet: screen migrations, application colors, charts,
 * QR behavior, navigation changes, and a complete dialog interaction system.
 */

:root {
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-radius-sm: 0.375rem;
    --ui-radius-md: 0.75rem;
    --ui-radius-lg: 1rem;
    --ui-touch-target: 44px;
    --ui-page-header-min-height: 3.5rem;
    --ui-bottom-actions-min-height: 4rem;
    --ui-content-max-width: 1200px;
    --ui-modal-max-width: 42rem;
    --ui-safe-area-top: env(safe-area-inset-top, 0px);
    --ui-safe-area-right: env(safe-area-inset-right, 0px);
    --ui-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --ui-safe-area-left: env(safe-area-inset-left, 0px);
    --ui-z-sticky: 20;
    --ui-z-actions: 40;
    --ui-z-dialog: 100;
}

.ui-page-header {
    display: grid;
    gap: var(--ui-space-3);
    min-width: 0;
    min-height: var(--ui-page-header-min-height);
    margin-block-end: var(--ui-space-5);
}

.ui-page-header__main,
.ui-page-header__identity {
    min-width: 0;
}

.ui-page-header__main {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
}

.ui-page-title,
.ui-page-subtitle {
    overflow-wrap: anywhere;
}

.ui-page-title {
    margin: 0;
}

.ui-page-subtitle {
    margin: var(--ui-space-1) 0 0;
}

.ui-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    align-items: center;
}

.ui-page-actions > * {
    min-width: 0;
    max-width: 100%;
}

.ui-desktop-back {
    flex: 0 1 auto;
}

.ui-mobile-back,
.ui-touch-target,
.ui-page-actions a,
.ui-page-actions button,
.ui-form-actions a,
.ui-form-actions button,
.ui-bottom-actions a,
.ui-bottom-actions button {
    min-height: var(--ui-touch-target);
}

.ui-table-scroll-region {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.ui-table-block {
    min-width: 0;
    max-width: 100%;
}

.ui-table-scroll-region:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

.ui-table-scroll-hint {
    margin-block-end: var(--ui-space-2);
    font-size: 0.875rem;
}

.ui-mobile-card-list {
    display: grid;
    gap: var(--ui-space-3);
    min-width: 0;
}

.ui-chart {
    display: grid;
    gap: var(--ui-space-4);
    min-width: 0;
    max-width: 100%;
}

.ui-chart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--ui-space-3);
    min-width: 0;
}

.ui-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--ui-space-3);
    min-width: 0;
}

.ui-chart-summary-card {
    display: grid;
    gap: var(--ui-space-1);
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid #dce7f7;
    border-radius: var(--ui-radius-md);
    background: #fff;
    overflow-wrap: anywhere;
}

.ui-summary-card {
    display: grid;
    gap: var(--ui-space-1);
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid #dce7f7;
    border-radius: var(--ui-radius-md);
    background: #fff;
    overflow-wrap: anywhere;
}

.ui-chart-summary-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted);
}

.ui-summary-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted);
}

.ui-chart-summary-value {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.1;
    font-weight: 800;
    color: #0b2347;
}

.ui-summary-value {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.1;
    font-weight: 800;
    color: #0b2347;
}

.ui-chart-summary-meta {
    font-size: 0.875rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.ui-summary-meta {
    font-size: 0.875rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.ui-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-space-3);
    min-width: 0;
}

.ui-chart-toolbar > * {
    min-width: 0;
}

.ui-chart-container {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--ui-space-4);
    border: 1px solid #e3e8f2;
    border-radius: var(--ui-radius-md);
    background: #fff;
}

.ui-chart-canvas {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(18rem, 52vw, 28rem);
    min-width: 0;
}

.portal-guardian .pwa-bottom-back {
    display: none !important;
}

.page-shell,
.page-shell > *,
.stack,
.card,
.card-body,
.section-card,
.panel {
    min-width: 0;
    max-width: 100%;
}

.ui-filter-panel,
.ui-form,
.ui-form-grid,
.ui-form-field,
.ui-form-actions {
    min-width: 0;
    max-width: 100%;
}

.ui-form-grid.ui-member-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-3);
}

.ui-form-field {
    display: grid;
    gap: var(--ui-space-1);
}

.ui-form-field--full {
    grid-column: 1 / -1;
}

.ui-form-section {
    display: grid;
    gap: var(--ui-space-3);
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid #e7edf5;
    border-radius: var(--ui-radius-md);
    background: #f8fbff;
}

.ui-form-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    min-height: var(--ui-touch-target);
    padding-block: var(--ui-space-1);
}

.ui-form-choice > input {
    flex: 0 0 auto;
    margin-top: 0.35rem;
}

.ui-import-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-import-event-grid .ui-form-field {
    min-width: 0;
}

.ui-import-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-import-pdf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-import-pdf-grid .ui-form-field--full {
    grid-column: 1 / -1;
}

.ui-import-pdf-grid .ui-form-choice {
    grid-column: 1 / -1;
}

.ui-result-import-preview-table {
    width: 100%;
    min-width: 72rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-result-import-preview-table th,
.ui-result-import-preview-table td {
    padding: 8px 6px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ui-member-filter-wide {
    grid-column: span 2;
}

.ui-pagination,
.ui-pagination-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: var(--ui-space-2);
}

.ui-pagination {
    justify-content: space-between;
}

.ui-pagination-actions > a {
    min-height: var(--ui-touch-target);
}

.ui-member-list-region {
    max-width: 100%;
}

.ui-member-results-table {
    width: 100%;
    min-width: 68rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-member-results-table th,
.ui-member-results-table td {
    padding: 8px 6px;
    vertical-align: top;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.ui-member-results-table .ui-result-event-col {
    width: 15rem;
}

.ui-member-results-table .ui-result-location-col {
    width: 11rem;
}

.ui-member-results-table .ui-result-category-col {
    width: 8rem;
}

.ui-member-results-table .ui-result-score-col {
    width: 5.5rem;
    text-align: right;
}

.ui-member-results-table .ui-result-total-col {
    width: 6rem;
    text-align: right;
}

.ui-member-results-table .ui-result-actions-col {
    width: 9rem;
}

.ui-result-matrix-table {
    width: 100%;
    min-width: 44rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-result-matrix-table th,
.ui-result-matrix-table td {
    padding: 8px 6px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.ui-result-matrix-table .ui-result-matrix-event-col {
    min-width: 12rem;
    text-align: left;
}

.ui-result-matrix-table .ui-result-matrix-season-col {
    min-width: 4rem;
}

.ui-result-analysis-table {
    width: 100%;
    min-width: 58rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-result-analysis-table th,
.ui-result-analysis-table td {
    padding: 8px 6px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ui-result-list-table {
    width: 100%;
    min-width: 74rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-result-list-table th,
.ui-result-list-table td {
    padding: 8px 6px;
    vertical-align: top;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.ui-result-list-table .ui-result-select-col {
    width: 2.5rem;
}

.ui-result-list-table .ui-result-member-col {
    width: 10rem;
}

.ui-result-list-table .ui-result-event-col {
    width: 14rem;
}

.ui-result-list-table .ui-result-date-col {
    width: 6.5rem;
}

.ui-result-list-table .ui-result-season-col {
    width: 5rem;
}

.ui-result-list-table .ui-result-category-col {
    width: 8rem;
}

.ui-result-list-table .ui-result-segment-col {
    width: 6rem;
}

.ui-result-list-table .ui-result-rank-col {
    width: 4rem;
    text-align: right;
}

.ui-result-list-table .ui-result-score-col {
    width: 6rem;
    text-align: right;
}

.ui-result-list-table .ui-result-deductions-col {
    width: 6.5rem;
    text-align: right;
}

.ui-result-score-table,
.ui-result-component-table {
    width: 100%;
    min-width: 68rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-result-score-table th,
.ui-result-score-table td,
.ui-result-component-table th,
.ui-result-component-table td {
    padding: 8px 6px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.ui-result-score-table th,
.ui-result-score-table td,
.ui-result-component-table th,
.ui-result-component-table td {
    text-align: right;
}

.ui-result-score-table th:nth-child(2),
.ui-result-score-table td:nth-child(2),
.ui-result-score-table th:nth-child(3),
.ui-result-score-table td:nth-child(3),
.ui-result-component-table th:nth-child(1),
.ui-result-component-table td:nth-child(1),
.ui-result-component-table th:nth-child(2),
.ui-result-component-table td:nth-child(2),
.ui-result-component-table th:nth-child(3),
.ui-result-component-table td:nth-child(3),
.ui-result-component-table th:nth-child(4),
.ui-result-component-table td:nth-child(4) {
    text-align: left;
}

.ui-result-score-table th[scope="row"],
.ui-result-component-table th[scope="row"] {
    text-align: left;
}

.ui-result-order-col { width: 3.5rem; }
.ui-result-element-col { width: 12rem; }
.ui-result-info-col { width: 8rem; }
.ui-result-base-col { width: 6rem; }
.ui-result-goe-col { width: 5.5rem; }
.ui-result-judge-col { width: 3.75rem; }
.ui-result-panel-col { width: 7rem; }
.ui-result-component-name-col { width: 12rem; }
.ui-result-component-gap-col { width: 1.25rem; }
.ui-result-component-factor-col { width: 5.5rem; }
.ui-result-component-score-col { width: 7rem; }

.ui-result-officials-table {
    width: 100%;
    min-width: 26rem;
    table-layout: fixed;
}

.ui-result-officials-table th,
.ui-result-officials-table td {
    padding: 8px 6px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ui-member-list-table {
    width: 100%;
    min-width: 68rem;
    table-layout: fixed;
    font-size: 13px;
}

.ui-member-list-table th,
.ui-member-list-table td {
    padding: 8px 6px;
    vertical-align: middle;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.ui-member-col-select { width: 2.5rem; }
.ui-member-col-number { width: 4rem; }
.ui-member-col-name { width: 10.5rem; }
.ui-member-col-guardian { width: 8rem; }
.ui-member-col-type { width: 7rem; }
.ui-member-col-category { width: 8rem; }
.ui-member-col-status { width: 5rem; }
.ui-member-col-operational { width: 9rem; }
.ui-member-col-actions { width: 18rem; }

.ui-member-name-link,
.ui-member-compact-text,
.ui-member-operational-badge {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ui-member-card-title {
    margin: 0;
    font: inherit;
    overflow-wrap: anywhere;
}

.ui-member-operational-badge {
    white-space: normal;
    line-height: 1.08;
    padding: 5px 7px;
}

.ui-member-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1);
    min-width: 0;
    max-width: 100%;
}

.ui-member-actions .btn-sm,
.ui-member-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-touch-target);
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.ui-member-link-btn {
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #123764;
    text-decoration: none;
}

.ui-member-link-btn:hover {
    background: #f1f6ff;
    text-decoration: none;
}

.ui-member-list-table .ui-mobile-card-list {
    display: table-row-group;
}

.ui-member-list-table .ui-mobile-card {
    display: table-row;
}

.ui-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-4) var(--ui-space-5);
}

.ui-form-field > :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.ui-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.ui-attendance-entry,
.ui-attendance-summary,
.ui-attendance-card {
    min-width: 0;
    max-width: 100%;
}

.ui-attendance-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: var(--ui-space-3);
}

.ui-attendance-card {
    box-sizing: border-box;
    padding: var(--ui-space-4);
    border: 1px solid #e7edf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 75, 153, 0.04);
    overflow-wrap: anywhere;
}

.ui-attendance-card--unpaid {
    border-color: #efb4b4;
    background: #fff7f7;
}

.ui-attendance-member-name {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 800;
}

.ui-attendance-payment-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin: 10px 0;
}

.ui-attendance-presence-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--ui-touch-target);
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #dce7f7;
    border-radius: 14px;
    background: #f6f9ff;
    font-weight: 800;
}

.ui-attendance-presence-toggle input {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-height: 26px;
}

.ui-attendance-note {
    margin-top: 10px;
}

.ui-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    min-height: var(--ui-bottom-actions-min-height);
    padding: var(--ui-space-3) max(var(--ui-space-4), var(--ui-safe-area-right))
        calc(var(--ui-space-3) + var(--ui-safe-area-bottom))
        max(var(--ui-space-4), var(--ui-safe-area-left));
    scroll-margin-bottom: calc(var(--ui-bottom-actions-min-height) + var(--ui-space-6));
}

.ui-status,
.ui-empty-state {
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-md);
    overflow-wrap: anywhere;
}

.ui-status--info {
    color: #0b5ed7;
    background: #f8fbff;
    border-color: #b6d4fe;
}

.ui-status--success {
    color: #146c43;
    background: #eefaf2;
    border-color: #b8e0c5;
}

.ui-status--warning {
    color: #7c5200;
    background: #fff8e6;
    border-color: #f0d58c;
}

.ui-status--error {
    color: #8a1f1f;
    background: #fff1f1;
    border-color: #f1c2c2;
}

.ui-empty-state {
    text-align: center;
}

.ui-dialog {
    box-sizing: border-box;
    width: min(calc(100% - (2 * var(--ui-space-4))), var(--ui-modal-max-width));
    max-width: var(--ui-modal-max-width);
    max-height: calc(100dvh - (2 * var(--ui-space-4)));
    overflow: auto;
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
}

.ui-safe-area {
    padding-top: max(var(--ui-space-4), var(--ui-safe-area-top));
    padding-right: max(var(--ui-space-4), var(--ui-safe-area-right));
    padding-bottom: max(var(--ui-space-4), var(--ui-safe-area-bottom));
    padding-left: max(var(--ui-space-4), var(--ui-safe-area-left));
}

.ui-visually-hidden,
.ui-live-region--visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-focus-ring:focus-visible,
.ui-mobile-back:focus-visible,
.ui-page-actions :is(a, button):focus-visible,
.ui-form-actions :is(a, button):focus-visible,
.ui-pagination :is(a, button):focus-visible,
.ui-bottom-actions :is(a, button):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 47.999rem) {
    .ui-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-import-event-grid,
    .ui-import-options-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-import-pdf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-attendance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-form-grid.ui-member-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-actions,
    .ui-bottom-actions {
        align-items: stretch;
    }

    .ui-bottom-actions > * {
        flex: 1 1 100%;
        width: 100%;
    }

    .ui-page-actions > * {
        flex: 1 1 calc(50% - var(--ui-space-2));
    }

    .ui-chart-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-chart-container {
        padding: var(--ui-space-3);
    }

    .ui-chart-canvas {
        height: clamp(16rem, 80vw, 22rem);
    }
}

@media (max-width: 35.999rem) {
    .ui-attendance-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-form-grid.ui-member-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-member-filter-wide {
        grid-column: auto;
    }

    .ui-member-list-region {
        overflow-x: hidden;
    }

    .ui-member-list-table {
        display: block;
        min-width: 0;
        border: 0;
        background: transparent;
    }

    .ui-member-list-table thead {
        display: none;
    }

    .ui-member-list-table .ui-mobile-card-list {
        display: grid;
        gap: var(--ui-space-3);
    }

    .ui-member-list-table .ui-mobile-card {
        display: block;
        min-width: 0;
        padding: var(--ui-space-3);
        border: 1px solid #dce7f7;
        border-radius: var(--ui-radius-md);
        background: #fff;
    }

    .ui-member-list-table .ui-mobile-card > td {
        display: grid;
        grid-template-columns: minmax(7.25rem, 40%) minmax(0, 1fr);
        gap: var(--ui-space-2);
        width: auto;
        min-width: 0;
        padding: var(--ui-space-2) 0;
        border: 0;
    }

    .ui-member-list-table .ui-mobile-card > td::before {
        content: attr(data-label);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .ui-member-list-table .ui-mobile-card > .ui-member-col-name {
        font-size: 1.05rem;
    }

    .ui-member-list-table .ui-mobile-card > .ui-member-col-actions {
        display: block;
        padding-top: var(--ui-space-3);
    }

    .ui-member-list-table .ui-mobile-card > .ui-member-col-actions::before {
        display: block;
        margin-bottom: var(--ui-space-2);
    }

    .ui-member-actions > * {
        flex: 1 1 calc(50% - var(--ui-space-1));
    }

    .ui-pagination,
    .ui-pagination-actions {
        align-items: stretch;
    }

    .ui-pagination-actions > a {
        flex: 1 1 auto;
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    .ui-form-grid.ui-member-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-import-event-grid,
    .ui-import-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-import-pdf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 23.999rem) {
    .ui-page-actions > * {
        flex-basis: 100%;
        width: 100%;
    }

    .ui-chart-summary-card {
        padding: var(--ui-space-3);
    }

    .ui-summary-card {
        padding: var(--ui-space-3);
    }
}

@media (min-width: 48rem) {
    .ui-page-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .ui-table-scroll-hint:not(.ui-member-table-hint) {
        display: none;
    }
}

@media (min-width: 75rem) {
    .ui-member-table-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [class^="ui-"],
    [class*=" ui-"] {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Parent portal: one responsive card per linked child. */
.guardian-children-section { min-width: 0; }
.guardian-child-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.guardian-child-summary { min-width: 0; height: auto; }
.guardian-child-summary > .card-body { display: flex; flex-direction: column; height: auto; }
.guardian-child-identity { margin-bottom: 10px; }
.guardian-child-identity { background: linear-gradient(135deg, #1f4b99 0%, #275bb6 100%) !important; border-radius: var(--ui-radius-md); padding: 14px 16px; color: #fff; }
.guardian-child-identity h3,
.guardian-child-identity p { color: #fff !important; overflow-wrap: anywhere; }
.guardian-child-actions { margin-top: 12px; padding-top: 8px; }
.guardian-status-message { display: block; margin-top: 6px; color: var(--ak-ink-soft); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.guardian-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: stretch; }
.guardian-status-grid > .info-item { height: auto; min-width: 0; }
@media (max-width: 760px) { .guardian-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .guardian-child-list, .guardian-status-grid { grid-template-columns: minmax(0, 1fr); } .guardian-child-actions .btn { width: 100%; } }
@media (max-width: 760px) {
    .guardian-required-document-table { display: none !important; }
    .guardian-required-document-toolbar { display: none !important; }
    .guardian-required-document-cards { display: grid !important; gap: var(--ui-space-3); min-width: 0; }
    .guardian-required-document-cards .mobile-card { min-width: 0; overflow-wrap: anywhere; }
}

/* Guardian mobile navigation and page-header actions must occupy real layout space. */
@media (max-width: 768px) {
    body.portal-guardian > header .header-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        min-width: 0;
        width: min(100%, 380px);
    }
    body.portal-guardian > header .header-top > div:first-child {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-width: 100%;
        flex: none;
    }
    body.portal-guardian > header .header-top > .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    body.portal-guardian > header .header-top > .language-selector {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        flex: none;
    }
    body.portal-guardian .mobile-menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        background: rgba(255,255,255,.18) !important;
        border-color: rgba(255,255,255,.52) !important;
        position: relative;
        z-index: 3300;
    }

    .ui-page-header,
    .guardian-child-profile-header,
    .guardian-notification-header {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    .ui-page-header__main,
    .guardian-child-profile-header > div,
    .guardian-notification-header > div {
        min-width: 0;
        width: 100%;
    }

    .guardian-child-profile-header > a,
    .guardian-notification-header > a {
        width: 100%;
        max-width: none;
    }

    .guardian-child-profile-header,
    .guardian-notification-header { display: flex; flex-direction: column; align-items: stretch; }

    .guardian-child-tabs { width: 100%; }
    .guardian-child-tabs > a { flex: 0 1 calc(50% - var(--ui-space-2)); width: calc(50% - var(--ui-space-2)); min-width: 0; }

    .guardian-competition-desktop { display: none; }
    .guardian-competition-cards { display: grid; gap: var(--ui-space-3); }
    .guardian-competition-card { border: 1px solid #dce7f7; border-radius: var(--ui-radius-md); padding: var(--ui-space-4); background: #fff; }
    .guardian-competition-card h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
    .guardian-competition-card dl { display: grid; gap: var(--ui-space-2); margin: 0; }
    .guardian-competition-card dl > div { display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: var(--ui-space-2); }
    .guardian-competition-card dt { font-weight: 700; }
    .guardian-competition-card dd { margin: 0; overflow-wrap: anywhere; }
}

@media (min-width: 769px) {
    .guardian-competition-cards { display: none; }
}

.guardian-equipment-empty { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }
@media (max-width: 560px) {
    .equipment-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .equipment-stats .stat-card { min-width: 0; min-height: 70px; padding: 12px; gap: 8px; }
    .equipment-stats .stat-label { font-size: .86rem; overflow-wrap: anywhere; }
    .equipment-stats .stat-number { font-size: 1.8rem; flex: 0 0 auto; }
}

/* Keep the global chrome legible on the guardian blue header. */
body.portal-guardian > header .brand-title,
body.portal-guardian > header .brand-subtitle,
body.portal-guardian > header .language-selector,
body.portal-guardian > header .language-selector label,
body.portal-guardian > header .language-selector button { color: #fff !important; opacity: 1 !important; }
body.portal-guardian > header .language-selector select {
    color: var(--text) !important;
    background: #fff !important;
    opacity: 1 !important;
}
body.portal-guardian > header .language-selector select option { color: var(--text) !important; }
body.portal-guardian > header .language-selector button {
    color: var(--text) !important;
    background: #fff !important;
    opacity: 1 !important;
}
body.portal-guardian > header .main-navigation a,
body.portal-guardian > header .main-navigation button,
body.portal-guardian > header .nav-top-link,
body.portal-guardian > header .nav-top-trigger { color: #fff !important; opacity: 1 !important; }
/* The light header chrome rule above must not leak into white dropdown
   panels. Keep submenu links dark in every interactive state. */
body.portal-guardian > header .main-navigation .nav-panel .nav-item,
body.portal-guardian > header .main-navigation .nav-panel .nav-item:visited,
body.portal-guardian > header .main-navigation .nav-panel .nav-logout-button {
    color: var(--nav-panel-text, #172033) !important;
    background: transparent !important;
}
body.portal-guardian > header .main-navigation .nav-panel .nav-item:hover,
body.portal-guardian > header .main-navigation .nav-panel .nav-item:focus-visible,
body.portal-guardian > header .main-navigation .nav-panel .nav-item.is-active,
body.portal-guardian > header .main-navigation .nav-panel .nav-logout-button:hover,
body.portal-guardian > header .main-navigation .nav-panel .nav-logout-button:focus-visible {
    color: var(--nav-primary, #1f4b99) !important;
    background: var(--nav-active, #eaf2ff) !important;
}
@media (min-width: 1121px) {
    body.portal-guardian > header .nav-sections {
        flex-wrap: nowrap;
        gap: 8px;
    }
    body.portal-guardian > header .nav-top-link,
    body.portal-guardian > header .nav-top-trigger {
        gap: 6px;
        padding-inline: 10px;
        font-size: .95rem;
    }
}
body.portal-guardian .guardian-child-identity,
body.portal-guardian .guardian-child-identity h3,
body.portal-guardian .guardian-child-identity p {
    color: var(--ak-on-dark, #fff) !important;
}
body.portal-guardian .pwa-bottom-back { display: none !important; }
body.portal-guardian .guardian-child-summary,
body.portal-guardian .guardian-child-summary > .card-body {
    height: auto !important;
    min-height: 0;
}
/* Full-page captures and assistive navigation must not leave below-fold
   guardian content visually blank while waiting for an intersection event. */
body.portal-guardian [data-animate].animate-ready {
    opacity: 1 !important;
    transform: none !important;
}