/**
 * ATA Online Accreditation - Professional Form System
 * ---------------------------------------------------
 * Loaded after legacy table/form polish so every application form, modal,
 * questionnaire, Select2 field, file upload, and CKEditor instance shares the
 * same quiet institutional visual language.
 *
 * v3.0 (2026-05-01) — Senior-friendly upsizing:
 *   - Inputs / selects / buttons share --ata-control-h (48 px)
 *   - Body text uses --ata-fs-body (16 px), labels --ata-fs-small (15 px)
 *   - Focus ring promoted to 4 px, never removed
 *   - Form fields stack consistently with --ata-grid-gap-y between rows
 *   - File upload, Select2, CKEditor, and date inputs share the same height
 */

:root {
    --ata-form-surface: var(--ata-surface);
    --ata-form-subtle: var(--ata-subtle);
    --ata-form-border: var(--ata-border);
    --ata-form-border-strong: var(--ata-neutral-border);
    --ata-form-help: var(--ata-muted);
}

form[role="form"],
form[id^="allAnswers"],
.tab-pane > form,
.modal-body form {
    color: var(--ata-body);
}

.tab-content {
    padding-top: var(--ata-space-lg);
}

.tab-pane > h3,
.heading h5 {
    color: var(--ata-ink);
    font-size: var(--ata-fs-h2);
    font-weight: var(--ata-fw-bold);
    line-height: var(--ata-lh-heading);
    margin-bottom: var(--ata-space-md);
}

.form-label,
label,
legend.form-label {
    color: var(--ata-ink);
    display: inline-block;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    line-height: var(--ata-lh-tight);
    margin-bottom: var(--ata-space-xs);
}

label b,
label strong,
legend.form-label b,
legend.form-label strong {
    color: inherit;
    font-size: inherit;
    font-weight: var(--ata-fw-semibold);
}

/* v3 — single source of truth for control sizing.
   48 px tall, 16 px body text, 11 px / 14 px padding. */
.form-control,
.form-select,
select.form-control,
.select2-container--bootstrap4 .select2-selection {
    background-color: var(--ata-form-surface);
    border: 1px solid var(--ata-form-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-tight);
    min-height: var(--ata-control-h);
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    transition: border-color var(--ata-transition-fast), box-shadow var(--ata-transition-fast), background-color var(--ata-transition-fast);
}

.form-control:hover,
.form-select:hover,
select.form-control:hover,
.select2-container--bootstrap4 .select2-selection:hover {
    border-color: var(--ata-form-border-strong);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    background-color: var(--ata-surface);
    border-color: var(--ata-navy) !important;
    box-shadow: var(--ata-shadow-focus) !important;
    color: var(--ata-ink);
    outline: 0;
}

.form-control::placeholder {
    color: var(--ata-muted);
    opacity: 0.78;
}

textarea.form-control {
    line-height: var(--ata-lh-body);
    min-height: 132px;
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    resize: vertical;
}

.form-control:disabled,
.form-control[readonly],
textarea[readonly],
.form-select:disabled {
    background-color: var(--ata-form-subtle);
    color: var(--ata-muted);
    opacity: 1;
}

.mb-3,
.form-group {
    margin-bottom: var(--ata-space-md) !important;
}

.row.g-3,
form .row {
    row-gap: var(--ata-grid-gap-y);
}

.panel-contact,
.ata-panel {
    background: var(--ata-surface);
    border: 1px solid var(--ata-form-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    padding: var(--ata-space-lg);
}

form hr,
.tab-pane hr {
    border-color: var(--ata-form-border);
    margin: var(--ata-space-md) 0;
    opacity: 1;
}

.ssq-action-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    bottom: var(--ata-space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-sm);
    justify-content: flex-end;
    padding: var(--ata-space-sm);
    position: sticky;
    z-index: var(--ata-z-sticky);
}

.ata-statistical-summary .mb-3.col-md-12 {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ata-statistical-summary .table {
    min-width: 760px;
    table-layout: fixed;
}

.ata-statistical-summary .table th,
.ata-statistical-summary .table td {
    min-width: 132px;
    vertical-align: middle;
}

.ata-statistical-summary .action-cell {
    min-width: 96px;
    width: 96px;
}

.ata-statistical-summary .form-control,
.ata-statistical-summary .form-select {
    width: 100%;
}

.form-check {
    align-items: flex-start;
    display: flex;
    gap: var(--ata-space-sm);
    margin-bottom: var(--ata-space-sm);
    padding-left: 0;
}

/* v3: 22 px checkbox/radio for fingertip + low-vision targets */
.form-check-input {
    border: 1.5px solid var(--ata-form-border-strong);
    flex: 0 0 auto;
    height: 22px;
    margin-left: 0;
    margin-top: 2px;
    width: 22px;
}

.form-check-input:checked {
    background-color: var(--ata-navy);
    border-color: var(--ata-navy);
}

.form-check-input:focus {
    border-color: var(--ata-navy);
    box-shadow: var(--ata-shadow-focus);
}

.form-check-label {
    color: var(--ata-body);
    cursor: pointer;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-regular);
    line-height: var(--ata-lh-body);
}

input[type="file"].form-control,
.form-control-file {
    background: var(--ata-surface);
    border: 1px solid var(--ata-form-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
    cursor: pointer;
    display: block;
    font-size: var(--ata-fs-small);
    min-height: var(--ata-control-h);
    padding: 10px 14px;
    width: 100%;
}

input[type="file"].form-control::file-selector-button,
.form-control-file::file-selector-button {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-form-border-strong);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-ink);
    cursor: pointer;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    margin-right: var(--ata-space-sm);
    min-height: 36px;
    padding: 9px 16px;
}

input[type="file"].form-control::file-selector-button:hover,
.form-control-file::file-selector-button:hover {
    background: var(--ata-gold-light);
    border-color: var(--ata-gold);
}

.select2-container--bootstrap4 .select2-selection--single {
    height: var(--ata-control-h);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--ata-body);
    font-size: var(--ata-fs-body);
    line-height: calc(var(--ata-control-h) - 4px);
    padding-left: 0;
}

.select2-container--bootstrap4 .select2-results__option {
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    padding: 10px 14px;
}

.select2-container--bootstrap4 .select2-dropdown {
    border-color: var(--ata-form-border);
    box-shadow: var(--ata-shadow-card-hover);
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected] {
    background-color: var(--ata-navy);
}

/* v3 — every button (default + brand variants) sits at 48 px tall with
   16 px text. Icon-only action buttons (.btn-sm.col-action) are 40×40. */
.btn {
    border-radius: var(--ata-radius-sm);
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    letter-spacing: 0;
    min-height: var(--ata-control-h);
    padding: 11px 22px;
}

.btn-sm {
    font-size: var(--ata-fs-small);
    min-height: var(--ata-control-h-sm);
    padding: 8px 16px;
}

/* v6: gold-forward primary button (was charcoal --ata-navy). Kept in sync
   with the canonical rule in ata-brand.css. */
.btn-primary {
    background-color: var(--ata-gold) !important;
    border-color: var(--ata-gold) !important;
    color: var(--ata-on-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ata-gold-bright) !important;
    border-color: var(--ata-gold-bright) !important;
    color: var(--ata-on-gold) !important;
    box-shadow: var(--ata-shadow-card-hover) !important;
}

form[id^="allAnswers"] {
    background: var(--ata-form-surface);
    border: 1px solid var(--ata-form-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    padding: var(--ata-space-lg);
}

form[id^="allAnswers"] > h5.fw-bold,
form[id^="allAnswers"] h5.fw-bold {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ata-form-border);
    border-radius: 0;
    color: var(--ata-ink);
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    margin: 0 0 var(--ata-space-lg);
    padding: 0 0 var(--ata-space-sm);
}

form[id^="allAnswers"] h4 {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-form-border);
    border-left: 4px solid var(--ata-navy);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-ink);
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    line-height: var(--ata-lh-tight);
    margin: var(--ata-space-lg) 0 var(--ata-space-md);
    padding: var(--ata-space-md);
}

form[id^="allAnswers"] h4.mt-3 {
    border-left-color: var(--ata-gold);
}

form[id^="allAnswers"] label.fw-bold {
    background: transparent;
    border: 0;
    color: var(--ata-ink);
    display: block;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    line-height: var(--ata-lh-body);
    margin-bottom: var(--ata-space-sm);
    padding: 0;
}

form[id^="allAnswers"] textarea.form-control {
    min-height: 156px;
}

form[id^="allAnswers"] .row .row {
    border-left: 2px solid var(--ata-form-border);
    margin-left: var(--ata-space-xs);
    padding-left: var(--ata-space-md);
}

form[id^="allAnswers"] .mb-3.col-md-12,
form[id^="allAnswers"] .col-md-12 {
    margin-bottom: var(--ata-space-md) !important;
}

form[id^="allAnswers"] br + br,
form[id^="allAnswers"] label + br {
    display: none;
}

form[id^="allAnswers"] .btn-primary {
    min-width: 180px;
}

/* SSQ "Save and Continue" / "Save and Exit" / "Submit" rows: pad them
   into a clear, well-spaced action bar that matches dashboard buttons. */
form[id^="allAnswers"] .questionnaire-actions,
form[id^="allAnswers"] .col-md-12:has(> .btn) + .col-md-12:has(> .btn),
form[id^="allAnswers"] .mt-3:has(> .btn) {
    align-items: center;
    border-top: 1px solid var(--ata-form-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-sm);
    margin-top: var(--ata-space-lg);
    padding-top: var(--ata-space-md);
}

.cke_chrome {
    border: 1px solid var(--ata-form-border) !important;
    border-radius: var(--ata-radius-sm) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.cke_top {
    background: var(--ata-subtle) !important;
    border-bottom: 1px solid var(--ata-form-border) !important;
}

.cke_bottom {
    background: var(--ata-surface) !important;
    border-top: 1px solid var(--ata-form-border) !important;
}

.cke_focus {
    border-color: var(--ata-navy) !important;
    box-shadow: var(--ata-shadow-focus) !important;
}

.alert.border-0.shadow-sm,
.alert {
    border: 1px solid var(--ata-form-border) !important;
    border-left-width: 4px !important;
    border-radius: var(--ata-radius-md);
    box-shadow: none !important;
}

@media (max-width: 768px) {
    form[id^="allAnswers"],
    .panel-contact,
    .ata-panel {
        padding: var(--ata-space-md);
    }

    .nav-tabs .nav-link {
        font-size: var(--ata-fs-xs);
        padding: var(--ata-space-xs) var(--ata-space-sm);
    }

    form[id^="allAnswers"] .btn-primary {
        margin-bottom: var(--ata-space-xs);
        width: 100%;
    }
}

/* Workflow pages: Fact Sheet, Self-Study Parts, dashboards */
#app,
#vueJsApp,
.page-content {
    color: var(--ata-body);
}

#app {
    margin-left: 0;
    margin-right: 0;
}

#app > .heading,
#vueJsApp .row.page-titles,
.page-content > .d-flex.justify-content-between,
.welcome-section {
    background: var(--ata-surface) !important;
    border: 1px solid var(--ata-border) !important;
    border-left: 4px solid var(--ata-navy) !important;
    border-radius: var(--ata-radius-md) !important;
    box-shadow: var(--ata-shadow-card) !important;
    margin-bottom: var(--ata-space-lg) !important;
    padding: var(--ata-space-lg) !important;
}

#app > .heading h5,
#vueJsApp .row.page-titles h4,
.page-content h5,
.welcome-section h4 {
    color: var(--ata-ink) !important;
    font-size: var(--ata-fs-h2) !important;
    font-weight: var(--ata-fw-bold) !important;
    letter-spacing: 0 !important;
    line-height: var(--ata-lh-heading) !important;
    margin: 0 !important;
}

#app > .heading hr,
.heading + hr,
#vueJsApp .row.page-titles hr {
    display: none !important;
}

.sticky-md-top {
    background: var(--ata-page);
    padding-top: var(--ata-space-xs);
    padding-bottom: var(--ata-space-xs);
    top: var(--ata-topbar-h);
    z-index: var(--ata-z-sticky);
    /* Subtle shadow shows sticky separation once the page scrolls */
    box-shadow: 0 1px 0 var(--ata-border);
}

.nav-tabs {
    align-items: stretch;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-xs);
    margin-bottom: var(--ata-space-lg);
    padding: var(--ata-space-xs);
}

.nav-tabs .nav-item {
    margin: 0 !important;
}

.nav-tabs .nav-link {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: var(--ata-radius-sm) !important;
    color: var(--ata-body) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--ata-fs-small) !important;
    font-weight: var(--ata-fw-semibold) !important;
    justify-content: center;
    line-height: var(--ata-lh-tight);
    min-height: 44px;
    padding: var(--ata-space-xs) var(--ata-space-md) !important;
    text-align: center;
    white-space: normal;
}

.nav-tabs .nav-link p,
.nav-tabs .nav-link [style*="font-size"] {
    font-size: var(--ata-fs-small) !important;
    font-weight: var(--ata-fw-semibold) !important;
    line-height: var(--ata-lh-tight) !important;
    margin: 0 !important;
}

.nav-tabs .nav-link:hover {
    background: var(--ata-subtle) !important;
    border-color: var(--ata-border) !important;
    color: var(--ata-navy) !important;
}

.nav-tabs .nav-link.active {
    background: var(--ata-navy) !important;
    border-color: var(--ata-navy) !important;
    color: var(--ata-surface) !important;
}

.tab-pane > h3,
.tab-content h3 {
    color: var(--ata-ink) !important;
    font-size: var(--ata-fs-h2) !important;
    font-weight: var(--ata-fw-bold) !important;
    line-height: var(--ata-lh-heading) !important;
    margin-bottom: var(--ata-space-lg) !important;
}

#app form[role="form"],
#vueJsApp form[role="form"],
#app form[id^="allAnswers"] {
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    margin-bottom: var(--ata-space-lg);
    max-width: 100%;
    padding: var(--ata-space-lg);
}

#app form[role="form"] h4,
#app form[role="form"] h5,
#app form[role="form"] > p,
#app form[role="form"] .alert {
    line-height: var(--ata-lh-body);
}

#app form[role="form"] h4,
#app form[role="form"] h5 {
    color: var(--ata-ink);
    font-weight: var(--ata-fw-bold);
    letter-spacing: 0;
}

#app form[role="form"] label,
#vueJsApp form[role="form"] label,
#app form[id^="allAnswers"] label {
    max-width: 100%;
}

#app form[role="form"] label b,
#vueJsApp form[role="form"] label b,
#app form[id^="allAnswers"] label b {
    color: var(--ata-ink);
    display: inline;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    line-height: var(--ata-lh-body);
}

#app .form-section,
#app [class*="form-section"],
#app [style*="background-color:#f8fafc"],
#app [style*="background-color: #f8fafc"] {
    background: var(--ata-subtle) !important;
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-md) !important;
    padding: var(--ata-space-lg) !important;
}

#app .mb-3:has(> table),
#app .col-md-12:has(> table),
#vueJsApp .card-body:has(table) {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    margin-bottom: var(--ata-space-lg) !important;
    overflow-x: auto;
    padding: var(--ata-space-sm);
    -webkit-overflow-scrolling: touch;
}

#app form table.table,
#vueJsApp table.table {
    min-width: 760px;
}

#app form .table th,
#app form .table td,
#vueJsApp .table th,
#vueJsApp .table td {
    font-size: var(--ata-fs-body) !important;
    line-height: var(--ata-lh-body) !important;
    padding: 14px 16px !important;
    vertical-align: top !important;
}

#app form .table .form-control {
    min-width: 180px;
}

.action-cell {
    min-width: 120px !important;
    width: 120px !important;
}

.move-btn {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ata-control-icon-btn) !important;
    justify-content: center !important;
    margin: 2px !important;
    padding: 0 !important;
    width: var(--ata-control-icon-btn) !important;
}

.move-btn i,
.move-btn .fa,
.move-btn .fas,
.move-btn .bx {
    font-size: var(--ata-fs-body) !important;
    margin: 0 !important;
}

label.form-check-label:has(.form-check-input) {
    align-items: center;
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    display: inline-flex;
    font-size: var(--ata-fs-body);
    gap: var(--ata-space-sm);
    margin-bottom: var(--ata-space-xs);
    margin-right: var(--ata-space-sm);
    min-height: var(--ata-control-h);
    padding: var(--ata-space-xs) var(--ata-space-md);
}

label.form-check-label .form-check-input {
    margin: 0;
}

#app form[role="form"] .mt-3.col-md-12:has(> .btn),
#app form[role="form"] .mb-3.col-md-12:has(> .btn),
#app form[id^="allAnswers"] .mb-3.col-md-12:has(> .btn),
#app .tab-content > .mb-3.col-md-12:has(> .btn),
#vueJsApp .dash-btn-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-xs);
}

#app form[role="form"] .mt-3.col-md-12:has(> button[type="button"]),
#app form[role="form"] .mb-3.col-md-12:has(> button[type="button"]),
#app form[id^="allAnswers"] .mb-3.col-md-12:has(> button[type="button"]) {
    border-top: 1px solid var(--ata-border);
    margin-top: var(--ata-space-lg);
    padding-top: var(--ata-space-md);
}

#app form[role="form"] .btn,
#app form[id^="allAnswers"] .btn,
#vueJsApp .btn {
    align-items: center;
    display: inline-flex;
    font-size: var(--ata-fs-body);
    justify-content: center;
    line-height: var(--ata-lh-tight);
    margin: 0;
    min-height: var(--ata-control-h);
    padding: 11px 22px;
    white-space: normal;
}

#app form[role="form"] .btn-sm,
#app form[id^="allAnswers"] .btn-sm,
#vueJsApp .btn-sm {
    font-size: var(--ata-fs-small);
    min-height: var(--ata-control-h-sm);
    padding: 8px 16px;
}

#app form[role="form"] .btn-warning,
#app form[id^="allAnswers"] .btn-warning {
    background: var(--ata-surface) !important;
    border-color: var(--ata-navy) !important;
    color: var(--ata-navy) !important;
}

#app form[role="form"] .btn-success,
#app form[id^="allAnswers"] .btn-success {
    background: var(--ata-navy) !important;
    border-color: var(--ata-navy) !important;
    color: var(--ata-surface) !important;
}

#app form[role="form"] .btn-danger,
#app form[id^="allAnswers"] .btn-danger,
#vueJsApp .btn-outline-info {
    background: var(--ata-surface) !important;
}

#app a.btn-danger[href*="print"],
#app a.btn-danger[href*="Print"],
#app a.btn-danger[href*="member_ins_print"],
#app a.btn-danger[href*="institution_quality_print"],
#app a.btn-danger[href*="questionnaire_part"] {
    border-color: var(--ata-navy) !important;
    color: var(--ata-navy) !important;
}

#app .btn:disabled,
#app .btn.disabled,
#vueJsApp .btn:disabled,
#vueJsApp .btn.disabled,
.btn:disabled,
.btn.disabled,
a.disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;        /* keep text legible at WCAG AA */
    box-shadow: none !important;
    pointer-events: none;
}

/* Disabled anchors styled as buttons — keep border + color visible */
a.disabled,
a.btn.disabled {
    background-color: var(--ata-subtle) !important;
    border-color: var(--ata-border) !important;
    color: var(--ata-muted) !important;
    text-decoration: none !important;
}

.dashboard-card,
.action-card,
.card.shadow-sm.border-0,
.card.ata-table-card {
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-md) !important;
    box-shadow: var(--ata-shadow-card) !important;
}

.dashboard-card:hover,
.action-card:hover {
    box-shadow: var(--ata-shadow-card-hover) !important;
    transform: none !important;
}

.dashboard-card .card-title-text,
.action-card .card-title,
.card-title {
    color: var(--ata-ink) !important;
    font-size: var(--ata-fs-h3) !important;
    font-weight: var(--ata-fw-bold) !important;
    line-height: var(--ata-lh-tight) !important;
}

.dashboard-card .card-label,
.action-card .card-text,
.welcome-section p,
.inst-name {
    color: var(--ata-body) !important;
    font-size: var(--ata-fs-body) !important;
    line-height: var(--ata-lh-body) !important;
}

.dashboard-card .card-icon,
.action-card .card-icon {
    border-radius: var(--ata-radius-sm) !important;
}

@media (max-width: 768px) {
    #app > .heading,
    #vueJsApp .row.page-titles,
    .page-content > .d-flex.justify-content-between,
    .welcome-section,
    #app form[role="form"],
    #vueJsApp form[role="form"],
    #app form[id^="allAnswers"] {
        padding: var(--ata-space-md) !important;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        gap: var(--ata-space-xxs);
        overflow-x: auto;
        padding: var(--ata-space-xs);
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;      /* keep tabs on one scrollable row */
        min-width: 140px;
    }

    .nav-tabs .nav-link {
        width: 100%;
    }

    #app form[role="form"] .btn,
    #app form[id^="allAnswers"] .btn,
    #vueJsApp .dash-btn-list .btn,
    #vueJsApp .btn {
        width: 100%;
    }

    #app form table.table,
    #vueJsApp table.table {
        min-width: 680px;
    }
}

/* Very narrow screens (≤420 px) — typical 360 px Android phones */
@media (max-width: 420px) {
    #app > .heading,
    #vueJsApp .row.page-titles,
    .welcome-section,
    #app form[role="form"],
    #vueJsApp form[role="form"],
    #app form[id^="allAnswers"],
    .panel-contact,
    .ata-panel {
        padding: var(--ata-space-sm) !important;
    }

    .nav-tabs .nav-item {
        min-width: 120px;
    }

    .nav-tabs .nav-link {
        font-size: var(--ata-fs-xs) !important;
        padding: var(--ata-space-xs) var(--ata-space-sm) !important;
    }

    #app form[role="form"] label,
    #app form[id^="allAnswers"] label {
        margin-bottom: var(--ata-space-xxs);
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: var(--ata-space-md);
        padding-right: var(--ata-space-md);
    }
}

/* ══════════════════════════════════════════════════════
   FULL-WIDTH FORM LAYOUT
   Applies to all view/entry forms across the app.
   Goal: Every field row spans the full available width
   whether it has data or not (Google-Forms style).
   ══════════════════════════════════════════════════════ */

/* Inner tables used as form-field rows (associative_view, etc.) */
form[role="form"] table,
.accordion-body table,
.ata-form-section table {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.page-content #app .accordion-body form[role="form"] {
    display: grid;
    gap: var(--ata-space-md);
    min-width: 0;
}

.page-content #app .accordion-body form[role="form"] > .mb-3,
.page-content #app .accordion-body form[role="form"] .row > .mb-3,
.page-content #app .accordion-body form[role="form"] > .col-md-12,
.page-content #app .accordion-body form[role="form"] .row > .col-md-12 {
    margin-bottom: 0 !important;
    min-width: 0;
}

.page-content #app .accordion-body form[role="form"] .col-md-12:has(.ata-add-remark),
.page-content #app .accordion-body form[role="form"] .mb-3:has(.ata-add-remark) {
    border-bottom: 1px solid var(--ata-border);
    padding-bottom: var(--ata-space-md);
}

.page-content #app .accordion-body form[role="form"] .col-md-12:has(.ata-add-remark):last-child,
.page-content #app .accordion-body form[role="form"] .mb-3:has(.ata-add-remark):last-child {
    border-bottom: 0;
}

.page-content #app .accordion-body form[role="form"] .ata-add-remark,
.page-content #app .accordion-body form[role="form"] .ata-add-remark--right {
    clear: none;
    display: flex;
    float: none;
    justify-content: center;
    margin: var(--ata-space-sm) 0 0 auto;
    width: fit-content;
}

.page-content #app .accordion-body form[role="form"] > .ata-add-remark,
.page-content #app .accordion-body form[role="form"] > .ata-add-remark--right {
    justify-self: end;
}

.page-content #app .accordion-body form[role="form"] > table,
.page-content #app .accordion-body form[role="form"] > .table,
.page-content #app .accordion-body form[role="form"] > .row,
.page-content #app .accordion-body form[role="form"] > div {
    max-width: 100%;
    min-width: 0;
}

.page-content #app .accordion-body .ata-add-remark,
.page-content #app .accordion-body .ata-add-remark--right {
    clear: none;
    display: flex;
    float: none;
    justify-content: center;
    margin: var(--ata-space-sm) 0 0 auto;
    width: fit-content;
}

.page-content #app .accordion-body > div:has(> label):has(.ata-add-remark),
.page-content #app .accordion-body form[role="form"] div:has(> label):has(.ata-add-remark) {
    border-bottom: 1px solid var(--ata-border);
    display: grid;
    gap: var(--ata-space-xs);
    padding: 0 0 var(--ata-space-md);
}

.page-content #app .accordion-body > div:has(> label):has(.ata-add-remark):last-child,
.page-content #app .accordion-body form[role="form"] div:has(> label):has(.ata-add-remark):last-child {
    border-bottom: 0;
}

.page-content #app .accordion-body > div:has(> label):has(.ata-add-remark) > br,
.page-content #app .accordion-body form[role="form"] div:has(> label):has(.ata-add-remark) > br {
    display: none;
}

.page-content #app .accordion-body label {
    color: var(--ata-ink);
    display: block;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    line-height: var(--ata-lh-body);
    margin: 0;
    overflow-wrap: anywhere;
}

.page-content #app .accordion-body label br {
    display: none;
}

.page-content #app .accordion-body h6 {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
    display: block;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-regular);
    line-height: var(--ata-lh-body);
    margin: 0;
    min-height: var(--ata-control-h);
    overflow-wrap: anywhere;
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    white-space: pre-wrap;
}

.page-content #app .pull-right:has(.btn) {
    align-items: center;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    float: none;
    gap: var(--ata-space-sm);
    justify-content: flex-end;
    margin: var(--ata-space-md) 0 0;
}

/* Label column — fixed comfortable width */
form[role="form"] table td:first-child,
.accordion-body table td:first-child,
.ata-form-section table td:first-child {
    width: 220px;
    min-width: 160px;
    max-width: 260px;
    vertical-align: top;
    padding: 8px 14px 8px 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ata-ink);
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

form[role="form"] table td:first-child *,
.accordion-body table td:first-child *,
.ata-form-section table td:first-child * {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Value column — always takes remaining full width */
form[role="form"] table td:last-child,
.accordion-body table td:last-child,
.ata-form-section table td:last-child {
    width: 100%;
    vertical-align: top;
    padding: 4px 0 8px 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Read-only display values — always show a box even when empty */
form[role="form"] .form-control-plaintext,
form[role="form"] p.form-control-plaintext,
.accordion-body .form-control-plaintext,
.accordion-body p.form-control-plaintext {
    display: block !important;
    width: 100% !important;
    min-height: var(--ata-control-h) !important;
    background: var(--ata-subtle) !important;
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-sm) !important;
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x) !important;
    font-size: var(--ata-fs-body) !important;
    color: var(--ata-body) !important;
    line-height: var(--ata-lh-body) !important;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 !important;
}

/* Read-only inputs — also full width */
form[role="form"] input.form-control[readonly],
form[role="form"] input[readonly] {
    width: 100% !important;
    background: var(--ata-subtle) !important;
    color: var(--ata-body) !important;
}

/* Background highlight sections (grey bands) — full width, padded */
form[role="form"] .mb-3[style*="background-color"],
.accordion-body .mb-3[style*="background-color"] {
    background: var(--ata-subtle) !important;
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-sm) !important;
    padding: 14px 18px !important;
    margin-bottom: var(--ata-space-md) !important;
    width: 100% !important;
}

/* Section question labels */
form[role="form"] > .mb-3 > label,
form[role="form"] > .row > .mb-3 > label,
.accordion-body .mb-3 > label {
    display: block;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    color: var(--ata-ink);
    margin-bottom: var(--ata-space-xs);
    line-height: var(--ata-lh-body);
}

/* The full institution name input field row at top of forms */
form[role="form"] input.form-control {
    width: 100% !important;
}

/* Textarea — full width always */
form[role="form"] textarea.form-control {
    width: 100% !important;
    min-height: 112px;
}

/* Plus/comment buttons — small secondary action, aligned away from content */
form[role="form"] button.btn-success.pull-right.btn-sm,
#app form button.btn-success.pull-right.btn-sm {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0 !important;
    margin: var(--ata-space-xs) 0 var(--ata-space-md) auto;
    border-radius: 8px !important;
    line-height: 1;
}

form[role="form"] button.btn-success.pull-right.btn-sm .bx,
#app form button.btn-success.pull-right.btn-sm .bx {
    display: block;
    margin: 0 !important;
    font-size: 1.15rem;
    line-height: 1;
}

/* Remove stray <br> spacers from legacy markup */
form[role="form"] br + br {
    display: none;
}

@media (max-width: 767.98px) {
    .page-content #app .accordion-body form[role="form"] table,
    .page-content #app .accordion-body form[role="form"] tbody,
    .page-content #app .accordion-body form[role="form"] tr,
    .page-content #app .accordion-body form[role="form"] td {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        width: 100% !important;
    }

    .page-content #app .accordion-body form[role="form"] table td:first-child,
    .page-content #app .accordion-body form[role="form"] table td:last-child {
        max-width: none;
        min-width: 0;
        padding: 0;
        width: 100%;
    }

    .page-content #app .accordion-body form[role="form"] table td:first-child {
        margin-bottom: var(--ata-space-xs);
    }

    .page-content #app .accordion-body form[role="form"] table td:last-child {
        margin-bottom: var(--ata-space-sm);
    }

    .page-content #app .accordion-body form[role="form"] > .ata-add-remark,
    .page-content #app .accordion-body form[role="form"] > .ata-add-remark--right {
        justify-self: start;
        margin-left: 0;
        margin-right: 0;
    }
}