/*
 * ERNDIM Survey release polish
 * Final layout and accessibility constraints loaded after page-specific styles.
 */

:root {
    --release-focus: #f2b705;
    --release-radius: 9px;
    --release-shadow: 0 1px 2px rgba(16, 36, 56, .08);
    --release-shadow-raised: 0 8px 24px rgba(16, 36, 56, .08);
}

html {
    scrollbar-gutter: stable;
}

body {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    min-width: 0;
}

img,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

textarea {
    resize: vertical;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: .65rem;
    left: .65rem;
    padding: .65rem .85rem;
    color: #fff;
    background: #0b3154;
    border-radius: 6px;
    transform: translateY(-180%);
    transition: transform .16s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--release-focus) !important;
    outline-offset: 2px;
}

.sr-only {
    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;
}

.app-shell {
    min-height: 100dvh;
}

.app-frame,
.app-main,
#page-content,
.app-stack,
.submit-root {
    max-width: 100%;
}

.app-frame > *,
.card > *,
.card-header > *,
.page-header > *,
.dash-header > *,
.toolbar > *,
.table-tools > *,
.action-row > *,
.form-grid > * {
    min-width: 0;
}

#page-content {
    width: 100%;
    max-width: 1580px;
    margin-inline: auto;
}

.app-main :where(h1, h2, h3, h4, p, li, dd, .muted, .small-note, .announcement-card__body) {
    overflow-wrap: anywhere;
}

.mono,
.survey-code-cell,
.badge {
    overflow-wrap: normal;
    word-break: normal;
}

.card,
.stat-card,
.page-header,
.dash-header,
.sample-nav,
.group-nav,
.tab-nav,
.entry-tips,
.sample-banner,
.sidebar-panel,
.announcement-card,
.super-fold,
.builder-preview,
.method-spec-panel {
    border-radius: var(--release-radius);
    box-shadow: var(--release-shadow);
}

.card,
.stat-card,
.page-header,
.dash-header,
.sidebar-panel,
.announcement-card,
.super-fold {
    border-color: var(--border);
}

.card:hover,
.stat-card:hover {
    transform: none;
    box-shadow: var(--release-shadow-raised);
}

.card-header,
.page-header,
.section-heading,
.table-tools,
.toolbar {
    align-items: flex-start;
    gap: .75rem 1rem;
}

.card-header,
.table-tools,
.toolbar,
.action-row,
.page-hero__actions,
.announcement-card__head {
    flex-wrap: wrap;
}

.btn {
    min-height: 40px;
    max-width: 100%;
    border-radius: 7px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.btn-sm {
    min-height: 34px;
}

.btn-danger,
.btn-danger-soft {
    border-color: #b42318;
}

.btn[disabled],
.btn.disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
    filter: grayscale(.15);
}

.form-control,
input,
select,
textarea {
    max-width: 100%;
}

.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
[aria-invalid="true"] {
    border-color: #c4322b !important;
    box-shadow: 0 0 0 2px rgba(196, 50, 43, .12);
}

.invalid-feedback,
.mps-error-visibility.is-visible {
    display: block;
    margin-top: .3rem;
    color: #a51d17;
    font-weight: 650;
}

.table-wrap,
.table-scroll,
.survey-table-wrap,
.user-table {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

table.data-table,
.analyte-table {
    border-collapse: separate;
    border-spacing: 0;
}

table.data-table th,
table.data-table td,
.analyte-table th,
.analyte-table td {
    vertical-align: middle;
}

table.data-table td,
.analyte-table td {
    overflow-wrap: anywhere;
}

table.data-table th {
    white-space: nowrap;
}

.sticky-action-cell {
    min-width: 13rem;
}

.action-row {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.action-row .btn {
    flex: 0 1 auto;
}

.table-toolbar {
    align-items: end;
    gap: .65rem;
}

.table-toolbar__search {
    flex: 1 1 18rem;
}

.app-breadcrumbs {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.app-release-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .45rem;
    margin-top: 1.5rem;
    padding: .8rem .1rem .25rem;
    color: var(--muted);
    font-size: .74rem;
}

.app-release-footer span + span::before {
    content: "/";
    margin-right: .45rem;
    color: var(--border);
}

/* Main participant dashboard */
.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.dash-header__left {
    flex: 1 1 22rem;
}

.dash-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .7rem;
}

.dash-header__actions {
    display: flex;
    flex: 1 1 42rem;
    align-items: end;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.survey-toolbar-form {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(10rem, .75fr) auto auto;
    align-items: end;
    gap: .5rem;
    flex: 1 1 38rem;
}

.survey-toolbar-form .form-control {
    width: 100%;
    min-height: 40px;
}

.survey-table-card .card-header {
    display: flex;
    justify-content: space-between;
}

.survey-code-cell {
    min-width: 7rem;
}

.completion-cell {
    min-width: 9rem;
}

.deadline-banner {
    align-items: flex-start;
}

.deadline-banner__list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Results entry */
.submit-root .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}

.submit-root .page-header h1 {
    max-width: 100%;
    line-height: 1.18;
}

.page-header__meta,
.hdr-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .7rem;
}

.hdr-link-row .hdr-sep {
    display: none;
}

.hdr-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .3rem .5rem;
    border-radius: 6px;
}

.sample-nav,
.group-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    max-width: 100%;
}

.sample-nav__label,
.group-nav__label {
    flex: 0 0 auto;
}

.sample-chip,
.group-chip {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 36px;
}

.sample-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    border-left: 4px solid var(--blue);
}

.sample-banner > * {
    min-width: 0;
}

.entry-tips {
    max-width: 58rem;
    border-left: 4px solid var(--teal);
}

.entry-tips summary {
    min-height: 42px;
    display: flex;
    align-items: center;
}

.entry-tips ul {
    max-width: 52rem;
}

.tab-nav {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .35rem;
}

.tab-btn {
    min-height: 42px;
    flex: 0 1 auto;
    white-space: normal;
}

.results-toolbar,
.form-toolbar,
.visa-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.results-toolbar {
    justify-content: space-between;
}

.results-toolbar .form-toolbar {
    justify-content: flex-end;
}

.readonly-mode :where(input, select, textarea) {
    background-color: color-mix(in srgb, var(--surface) 78%, var(--border));
    border-style: dashed;
}

.readonly-mode :where(input, select, textarea):disabled,
.readonly-mode :where(input, select, textarea)[readonly] {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    opacity: 1;
}

.sa-readonly-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .8rem;
}

/* MPS and UMPS keep the complete field set readable instead of compressing it. */
.submit-root--umps .table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.submit-root--umps .analyte-table {
    min-width: 940px;
}

.submit-root--umps .analyte-name {
    min-width: 13rem;
}

.submit-root--umps :where(.inp-quant, .inp-qual, .inp-km, .sel-class, .inp-visa) {
    min-height: 38px;
}

.submit-root--umps .card-header {
    display: flex;
    justify-content: space-between;
}

.submit-root--umps .comment-textarea {
    min-height: 7rem;
}

/* Administration and review screens */
.app-frame--advanced {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.app-frame--advanced .app-sidebar {
    align-self: start;
    position: sticky;
    top: 5.2rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar-link {
    min-height: 40px;
}

.sidebar-link.is-active {
    font-weight: 750;
    box-shadow: inset 3px 0 0 var(--blue);
}

.admin-jump-nav,
.builder-nav,
.super-nav,
.batch-toolbar,
.batch-review-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.admin-jump-nav__link,
.builder-nav__link,
.super-nav__link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}

.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.user-edit-grid,
.user-edit-split,
.user-edit-bottom,
.assignment-wrap {
    max-width: 100%;
}

.super-card-grid,
.admin-card-grid,
.batch-review-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.super-fold > summary {
    min-height: 48px;
    align-items: center;
}

.builder-preview,
.method-spec-panel {
    overflow: hidden;
}

.builder-preview .table-wrap,
.method-spec-panel .table-wrap {
    border-radius: 0;
}

.alert {
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.alert__close {
    flex: 0 0 auto;
}

/* Dark theme contrast */
html[data-theme="dark"] body {
    background: #081421;
    color: #e9f1f8;
}

html[data-theme="dark"] :where(
    .card,
    .stat-card,
    .page-header,
    .dash-header,
    .sample-nav,
    .group-nav,
    .tab-nav,
    .entry-tips,
    .sample-banner,
    .sidebar-panel,
    .announcement-card,
    .super-fold,
    .builder-preview,
    .method-spec-panel,
    .table-toolbar
) {
    color: #e9f1f8;
    background-color: #101f2f;
    border-color: #344a61;
}

html[data-theme="dark"] :where(
    .muted,
    .small-note,
    .list-note,
    .card-header p,
    .page-header__meta,
    .dash-header__meta,
    .form-label,
    .table-toolbar__search label,
    .completion-pct,
    .entry-tips li,
    .sample-banner,
    .app-release-footer
) {
    color: #b8c7d6 !important;
}

html[data-theme="dark"] [style*="color:var(--navy)"] {
    color: #e9f4ff !important;
}

html[data-theme="dark"] :where(.form-control, input, select, textarea) {
    color: #eef5fb;
    background-color: #0b1927;
    border-color: #3b526a;
}

html[data-theme="dark"] :where(.form-control, input, textarea)::placeholder {
    color: #91a5b9;
    opacity: 1;
}

html[data-theme="dark"] select option {
    color: #eef5fb;
    background: #0b1927;
}

html[data-theme="dark"] table.data-table :where(th, td),
html[data-theme="dark"] .analyte-table :where(th, td) {
    color: #e5eef7;
    border-color: #344a61;
}

html[data-theme="dark"] table.data-table th,
html[data-theme="dark"] .analyte-table th {
    background: #14263a;
    color: #c8d8e7;
}

html[data-theme="dark"] table.data-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .analyte-table tbody tr:nth-child(even) td {
    background: #0e1c2a;
}

html[data-theme="dark"] :where(.btn-outline, .btn-soft) {
    color: #dceaf6;
    background: #14263a;
    border-color: #46617b;
}

html[data-theme="dark"] :where(.btn-outline, .btn-soft):hover {
    color: #fff;
    background: #1c3650;
    border-color: #67a9dc;
}

html[data-theme="dark"] .badge-muted {
    color: #d5e1ec;
    background: #263a4e;
    border-color: #425b73;
}

html[data-theme="dark"] .readonly-mode :where(input, select, textarea) {
    color: #c9d7e4;
    background-color: #17283a;
    border-color: #536b82;
}

html[data-theme="dark"] .entry-tips,
html[data-theme="dark"] .sample-banner {
    background: #102538;
}

html[data-theme="dark"] .sticky-action-cell {
    background-color: #101f2f !important;
}

/* Login uses the same restrained release language without depending on app-shell.css. */
.login-page {
    background: #edf2f5;
}

.login-page .login-shell {
    border: 1px solid #d5dee7;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(20, 45, 68, .12);
    overflow: hidden;
}

.login-page .login-hero {
    background: #0d3152;
}

.login-page .login-card {
    background: #fff;
}

.login-page .form-control {
    min-height: 44px;
    border-radius: 7px;
}

.login-page .btn-submit {
    min-height: 44px;
    border-radius: 7px;
}

.login-page .login-footer-panel {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
}

.login-version {
    opacity: .78;
}

.login-version::before {
    content: "/";
    margin-right: .7rem;
}

/* Responsive behavior */
@media (max-width: 1100px) {
    .app-frame--advanced {
        grid-template-columns: 1fr;
    }

    .app-frame--advanced .app-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .sidebar-panel__sections {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    }

    .dash-header {
        align-items: stretch;
    }

    .dash-header__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .app-topbar__inner {
        flex-wrap: wrap;
        gap: .6rem;
    }

    .topbar-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .2rem;
    }

    .topbar-link {
        flex: 0 0 auto;
    }

    .survey-toolbar-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) auto auto;
        flex-basis: 100%;
    }

    .dash-header {
        flex-direction: column;
        align-items: stretch;
    }

    .results-toolbar {
        align-items: stretch;
    }

    .results-toolbar .form-toolbar {
        justify-content: flex-start;
    }

    .app-release-footer {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .app-main {
        overflow-x: clip;
    }

    .card-header,
    .card-body,
    .page-header,
    .dash-header {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .survey-toolbar-form {
        grid-template-columns: 1fr 1fr;
    }

    .survey-toolbar-form .form-control {
        grid-column: 1 / -1;
    }

    .survey-toolbar-form .btn {
        width: 100%;
    }

    .sample-nav,
    .group-nav,
    .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .35rem;
        scrollbar-width: thin;
    }

    .sample-nav__label,
    .group-nav__label {
        position: sticky;
        left: 0;
        z-index: 2;
        padding-right: .3rem;
        background: inherit;
    }

    .tab-btn {
        flex: 0 0 auto;
    }

    .sample-banner {
        grid-template-columns: 1fr;
    }

    .form-toolbar,
    .results-toolbar,
    .visa-row {
        align-items: stretch;
    }

    .form-toolbar .btn,
    .visa-row .btn {
        flex: 1 1 10rem;
    }

    .action-row {
        align-items: stretch;
    }

    .action-row .btn {
        flex: 1 1 9rem;
    }

    .form-grid > [style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

    .app-release-footer {
        flex-wrap: wrap;
    }

    .login-page {
        padding: .75rem;
    }

    .login-page .login-shell {
        border-radius: 9px;
    }

    .login-version {
        display: block;
        width: 100%;
    }

    .login-version::before {
        content: none;
    }
}

/* Final accessibility pass: high-contrast text and mobile result cards. */
html[data-theme="dark"] {
    --text: #edf4fb;
    --navy: #edf4fb;
    --navy-mid: #dce8f5;
    --muted: #c3d0df;
    --muted-strong: #e1eaf4;
}

html[data-theme="dark"] :where(
    .page-header h1,
    .card-header h2,
    .section-heading h2,
    .section-heading__text h2,
    .analyte-name,
    .method-name,
    .comment-group__title,
    .health-check__name
) {
    color: var(--text);
}

html[data-theme="dark"] :where(
    .badge-blue,
    .badge-teal,
    .status-badge,
    .unit-label,
    .km-note,
    .file-meta__code,
    .file-meta__visa
) {
    color: var(--muted-strong);
}

@media (max-width: 760px) {
    .submit-root .table-wrap,
    .submit-root .table-scroll {
        overflow: visible;
        border: 0;
        box-shadow: none;
    }

    .submit-root .analyte-table--responsive {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

    .submit-root .analyte-table--responsive thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .submit-root .analyte-table--responsive tbody,
    .submit-root .analyte-table--responsive .analyte-row {
        display: grid;
        width: 100%;
    }

    .submit-root .analyte-table--responsive .analyte-row {
        margin-bottom: .85rem;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .submit-root .analyte-table--responsive .analyte-row > td {
        display: grid;
        grid-template-columns: minmax(7.4rem, .42fr) minmax(0, 1fr);
        gap: .7rem;
        align-items: center;
        width: auto;
        min-width: 0;
        padding: .68rem .75rem;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: transparent !important;
        text-align: left;
    }

    .submit-root .analyte-table--responsive .analyte-row > td:last-child {
        border-bottom: 0;
    }

    .submit-root .analyte-table--responsive .analyte-row > td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .7rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .submit-root .analyte-table--responsive :where(
        .inp-quant,
        .inp-qual,
        .inp-km,
        .inp-visa,
        .sel-class,
        .form-control
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .submit-root .analyte-table--responsive .table-cell-empty {
        display: block;
        padding: 1.25rem;
    }

    .submit-root .analyte-table--responsive .table-cell-empty::before {
        content: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .skip-link,
    .app-release-footer,
    .floating-help-btn {
        display: none !important;
    }
}