/* Replaces cellpadding="0" cellspacing="0" */
.table-legacy {
    border-spacing: 0;
    border-collapse: collapse;
}

/* Replaces cellpadding="2" cellspacing="0" */
.table-legacy-p2 {
    border-spacing: 0;
    border-collapse: collapse;
}
.table-legacy-p2 td,
.table-legacy-p2 th {
    padding: 2px;
}

/* Replaces cellpadding="3" cellspacing="0" */
.table-legacy-p3 {
    border-spacing: 0;
    border-collapse: collapse;
}
.table-legacy-p3 td,
.table-legacy-p3 th {
    padding: 3px;
}

/* Replaces cellpadding="4" cellspacing="0" */
.table-legacy-p4 {
    border-spacing: 0;
    border-collapse: collapse;
}
.table-legacy-p4 td,
.table-legacy-p4 th {
    padding: 4px;
}

/* Skip to main content link — visible only on keyboard focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: var(--ao-orange);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    overflow: visible;
}

/* Accessible hidden content — visually invisible but readable by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Layout — moved from _LayoutModern.cshtml <style> block ──────────── */

:root {
    --ao-orange:    #e7741d; /* Brand: Tangerine */
    --ao-orange-dk: #be5f18; /* Derived hover — 85% brightness of Tangerine */
    --ao-plum:      #8a1b61; /* Brand: Plum (primary focus) */
    --ao-teal:      #77C5D5; /* Brand: Ice Blue */
    --ao-grey:      #565654; /* Brand: Ship Grey */
    --ao-light:     #f8f8f8;
    --ao-bg:        #f2f3f5;
    --ao-card:      #ffffff;
    --ao-border:    #e2e4e8;
    --ao-text:      #1a1a1a;
    --ao-muted:     #6c757d;
    --sidebar-w:    200px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Body font: Arial (brand spec). Headlines/sub-headings use Sofia Pro — add
       @font-face or Adobe Fonts kit once the license is in place. */
    font-family: Arial, 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: var(--ao-bg);
    color: var(--ao-text);
}

/* ── Header ──────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
}

.app-nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #444 !important;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.app-nav-link:hover {
    background: #f5f5f5;
    color: var(--ao-orange) !important;
}

.header-logoff-link {
    font-size: 0.9rem;
    color: #636466;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.header-logoff-link:hover {
    color: var(--ao-orange);
}

/* ── Account overview tabs ───────────────────────────────── */
#overviewTabs .nav-link {
    color: #000;
}

#overviewTabs .nav-link:hover {
    color: var(--ao-orange);
}

/* ── Page body ───────────────────────────────────────────── */
.app-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    min-height: calc(100vh - 60px);
}

/* ── Sidebar (Account Inquiry) ───────────────────────────── */
.inquiry-sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
}

.inquiry-card {
    background: var(--ao-card);
    border: 1px solid var(--ao-border);
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 72px;
}

.inquiry-title {
    background: var(--ao-orange);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 9px 12px;
    letter-spacing: 0.03em;
}

.inquiry-form {
    padding: 12px 12px 14px;
}

.inquiry-field {
    margin-bottom: 8px;
}

.inquiry-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ao-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inquiry-field input {
    display: block;
    width: 100%;
    padding: 4px 7px;
    font-size: 0.9rem;
    border: 1px solid #d0d4da;
    border-radius: 4px;
    background: #fff;
    color: var(--ao-text);
    transition: border-color 0.15s;
}

.inquiry-field input:focus {
    outline: none;
    border-color: var(--ao-orange);
    box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.15);
}

.inquiry-field input[type="date"] {
    padding: 3px 7px;
}

.inquiry-field input:disabled {
    background: #e8eaed;
    color: var(--ao-muted);
    border-color: #c8cdd4;
    cursor: not-allowed;
}

.inquiry-search-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 7px;
    background: var(--ao-orange);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.03em;
}

.inquiry-search-btn:hover {
    background: #c45f0d;
}

.inquiry-search-btn:disabled {
    background: #b0b5bc;
    cursor: not-allowed;
}

#pe-calculate {
    padding: 6px 18px;
    background: var(--ao-orange);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.03em;
}

#pe-calculate:hover {
    background: #c45f0d;
}

.inquiry-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px;
    background: transparent;
    color: var(--ao-muted);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.03em;
}

.inquiry-cancel-btn:hover:not(:disabled) {
    background: var(--ao-muted);
    color: #fff;
}

.inquiry-cancel-btn:disabled,
#ChgClient:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.inquiry-status {
    font-size: 0.82rem;
    color: var(--ao-muted);
    text-align: center;
    margin-top: 6px;
    min-height: 1.1em;
}

/* ── Shared portal button (matches Search button style) ─── */
.portal-btn {
    display: inline-block;
    background: var(--ao-orange);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 16px;
    font-size: 0.95rem;
    transition: background 0.15s;
    letter-spacing: 0.03em;
    text-decoration: none;
    vertical-align: middle;
    line-height: normal;
    box-sizing: border-box;
}
.portal-btn:hover {
    background: #c45f0d;
}
.portal-btn:disabled {
    background: #b0b5bc;
    cursor: not-allowed;
}
.portal-btn-secondary {
    background: transparent;
    color: var(--ao-orange);
    border: 2px solid var(--ao-orange);
}
.portal-btn-secondary:hover {
    background: rgba(229, 110, 25, 0.08);
}
.portal-btn-danger {
    background: #c0392b;
}
.portal-btn-danger:hover {
    background: #a93226;
}
.cancel-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Main content ────────────────────────────────────────── */
.main-content {
    flex: 1;
    min-width: 0;
    background: var(--ao-card);
    border: 1px solid var(--ao-border);
    border-radius: 8px;
    padding: 20px 24px;
}

/* ── Page title band ─────────────────────────────────────── */
.page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ao-text);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--ao-orange);
    display: inline-block;
}

/* ── Session timeout modal ───────────────────────────────── */
.session-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.session-modal-card {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px 24px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.session-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ao-text);
    margin: 0 0 10px;
}

.session-modal-body {
    font-size: 0.92rem;
    color: var(--ao-grey);
    margin: 0 0 22px;
    line-height: 1.5;
}

.session-modal-countdown {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ao-orange);
    display: block;
    margin-bottom: 4px;
    line-height: 1;
}

.session-modal-countdown-label {
    font-size: 0.8rem;
    color: var(--ao-muted);
    margin-bottom: 20px;
    display: block;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .app-body {
        flex-direction: column;
        padding: 12px;
    }
    .inquiry-sidebar {
        width: 100%;
        flex: none;
    }
    .inquiry-card {
        position: static;
    }
}

/* ── Legacy view color utilities ─────────────────────────── */
.text-legacy-blue        { color: var(--ao-plum); }
.text-legacy-grey        { color: #666666; }
.text-legacy-red         { color: #cc0000; }
.text-legacy-bold-blue   { color: var(--ao-plum); font-weight: bold; }
.font-legacy             { font-family: Verdana, sans-serif; font-size: 11px; }
.font-legacy-sm          { font-size: 11px; }
.td-legacy-header        { color: var(--ao-plum); font-weight: bold; padding-bottom: 8px; }
.td-legacy-notice        { padding-bottom: 10px; color: #cc0000; }

/* ── Additional legacy utilities ─────────────────────────── */
/* Small muted text (e.g. request ID, inline hints) — #767676 meets 4.54:1 on white */
.text-legacy-muted-sm    { font-size: 0.85em; color: #767676; }
/* Inline error/warning text */
.text-error              { color: red; }
/* Table cell: padding 3px right-heavy, grey text */
.td-legacy-module        { padding: 3px 20px 3px 0; color: #666666; }
/* Table cell: padding 3px, dim text — #767676 meets 4.54:1 on white */
.td-legacy-unavailable   { padding: 3px 0; color: #767676; }
/* Table cell: tight padding 2px 5px */
.td-legacy-cell          { padding: 2px 5px; }
/* Table header cell: tight padding 3px 5px */
.th-legacy-cell          { padding: 3px 5px; }
/* Table row: light grey background */
.tr-legacy-header        { background-color: #cccccc; }
/* Overflow scrollable container */
.overflow-scroll-400     { overflow: auto; width: 100%; max-height: 400px; }
/* Detail panel indent margin */
.detail-table            { margin: 6px 0 10px 10px; }
/* Summary bold header with cursor */
.summary-header          { font-weight: bold; padding: 4px 0; cursor: pointer; }
/* Horizontal rule via table row */
.tr-divider td           { background-color: #000; height: 1px; }
/* Header bar: blue background, white text */
.td-section-header       { background-color: var(--ao-plum); color: white; padding: 4px; }
/* Accent bar in header (gradient) */
.header-accent-bar       { height: 3px; background: linear-gradient(90deg, var(--ao-orange) 0%, var(--ao-teal) 60%, var(--ao-grey) 100%); }
/* Info bar in header */
.header-info-bar         {
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    padding: 5px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #555;
}
/* Info bar flex row */
.header-info-left        { display: flex; align-items: center; gap: 20px; }
/* Muted label in info bar — #767676 meets 4.54:1 on #fafafa */
.header-info-label       { color: #767676; margin-right: 4px; }
/* Impersonation controls row */
.header-impersonate-row  { display: flex; align-items: center; gap: 10px; }
/* Impersonation active indicator */
.text-impersonate-active { color: #c0392b; font-weight: 700; }
/* Impersonation error */
.text-impersonate-error  { color: #c0392b; font-size: 0.85rem; }
/* Impersonation clear button */
.btn-impersonate-clear   {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}
/* Impersonation switch button */
.btn-impersonate-switch  {
    background: #E87722;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 0.9rem;
}
/* Impersonation client select */
.select-impersonate      {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
}
/* SVG icon inline alignment */
.icon-inline             { margin-right: 6px; vertical-align: -1px; }
/* Detail panel: show/hide with border */
.detail-panel            { display: none; margin-top: 12px; border-top: 1px solid #999; padding-top: 8px; }
/* Add panel with border */
.add-panel               { display: none; margin-top: 8px; border: 1px solid #ccc; padding: 8px; }
/* Tab nav bar */
.tab-nav-bar             { margin-bottom: 12px; border-bottom: 2px solid var(--ao-plum); padding-bottom: 4px; }
/* Tab button */
.tab-btn-style           { cursor: pointer; margin-right: 4px; padding: 4px 10px; display: inline-block; }
/* History detail panel */
.history-detail-panel    { display: none; margin-top: 16px; border: 1px solid #ccc; padding: 10px; width: 100%; max-width: 700px; }
/* Provider account link cell (legacy) */
.td-prov-link            { padding: 3px 5px; text-decoration: underline; cursor: pointer; }
/* Provider account number as accessible button */
.btn-prov-link           { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
/* Spinner orange color */
.spinner-ao-orange       { color: var(--ao-orange); }
/* width: auto override for date inputs */
.w-auto                  { width: auto; }
/* dashboard heading */
.dashboard-heading       { font-weight: bold; color: #1a1a1a; margin-bottom: 6px; }
/* dashboard welcome */
.dashboard-welcome       { color: #555; margin-bottom: 20px; }
/* dashboard section heading */
.dashboard-section-heading { font-weight: bold; color: var(--ao-plum); margin-bottom: 8px; }
/* payment estimator error box */
.pe-error-box            { display: none; color: red; margin-top: 8px; padding: 6px; border: 1px solid red; }
/* payment estimator results */
.pe-results-hidden       { display: none; margin-top: 12px; }
/* payment estimator balance info */
.pe-balance-info         { display: none; margin-top: 8px; }
/* tx/history table row styles */
#tx-table tbody tr:nth-child(even)      { background-color: #f5f5f5; }
#tx-table tbody tr:hover                { background-color: #eaf4fb; }
#history-table tbody tr:nth-child(even) { background-color: #f5f5f5; }
#history-table tbody tr:hover           { background-color: #eaf4fb; }
/* overview paragraph */
.overview-name-line      { margin-bottom: 6px; color: #333; }
/* error div below report inputs */
.report-error            { color: red; margin-top: 4px; }
/* filter error */
.filter-error            { color: red; margin-bottom: 4px; }
/* margin-bottom: 8px shortcut for form */
.form-mb-8               { margin-bottom: 8px; }
/* provider detail error */
.provider-detail-error   { color: red; margin-top: 6px; }
/* add-provider msg */
.add-provider-msg        { margin-top: 6px; }
/* provider add wrapper margin */
.provider-add-wrapper    { margin-top: 12px; }
/* provider table with collapse */
.table-border-collapse   { border-collapse: collapse; width: 100%; }
/* provider table — shrink to content when columns don't need full width */
.table-auto-width        { width: auto; }
/* navigation bar outer table */
.nav-bar-table           { width: 900px; }
/* nav tab cell style */
.nav-tab-cell            {
    padding: 3px 10px 7px 10px;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    background-color: #F1F1F1;
}
/* nav tab spacer */
.nav-tab-spacer          { width: 4px; }
/* checklist error */
.checklist-error         { color: red; margin-top: 6px; }
/* tab error */
.tab-error               { color: red; margin-bottom: 6px; }
/* invalid field highlight (tab validation) */
.field-invalid           { outline: 2px solid red !important; }
/* tab step states */
.tab-btn-future          { opacity: 0.4; cursor: default; pointer-events: none; }
.tab-btn-done            { opacity: 0.65; cursor: default; pointer-events: none; }
/* inline field error message (tab validation) */
.field-error-msg         { color: red; font-size: 0.875em; margin-left: 6px; }
/* review tab */
.review-section-header   { margin-top: 16px; margin-bottom: 4px; }
.review-table            { border-collapse: collapse; margin-bottom: 8px; }
.review-table th, .review-table td { padding: 3px 12px 3px 0; text-align: left; vertical-align: top; }
.review-table thead th   { font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.review-label            { font-weight: bold; white-space: nowrap; min-width: 130px; }
.review-empty            { color: #666; font-style: italic; }
/* ssn/dob/zip status spans */
.field-status            { margin-left: 8px; }
/* dob error */
.dob-error               { color: red; display: inline; margin-left: 6px; }
/* add provider error */
.add-provider-error      { color: red; margin-bottom: 4px; }
/* history cancel error */
.history-cancel-error    { color: red; margin-top: 6px; }
/* history detail panel heading */
.history-detail-heading  { color: var(--ao-plum); margin: 0 0 8px 0; }
/* history row hover pointer */
.history-row             { cursor: pointer; }
/* history edit form inline */
.history-edit-form       { display: inline; }
/* impersonate error span */
.impersonation-error     { color: #c0392b; font-size: 0.85rem; }
/* label with flex for checkbox+text alignment */
.label-flex-start        { display: flex; align-items: flex-start; gap: 8px; }
/* checkbox top margin shrink */
.checkbox-top            { margin-top: 3px; flex-shrink: 0; }
/* responsible party radio label */
.radio-label-mr          { margin-right: 16px; }
/* required field legend note */
.required-field-note     { font-size: 0.85em; margin: 4px 0 8px; }
/* phone fieldset group: strip default fieldset chrome */
.fieldset-phone          { border: none; margin: 0 0 4px 0; padding: 0; }
.fieldset-phone legend   { font-size: 0.9em; font-weight: 600; color: var(--ao-muted); padding: 0; margin-bottom: 2px; }
/* phone fieldsets row */
.phone-fieldsets         { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* inline fieldset for radio groups (no border/padding) */
.fieldset-inline         { border: none; margin: 0; padding: 0; }
/* block wrapper that forces radio labels below the fieldset legend */
.radio-group-stacked     { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
/* on-phone checklist list */
.phone-checklist         { margin: 0; padding-left: 18px; line-height: 1.8; }
/* payment estimator label padding */
.pe-balance-label        { padding-left: 10px; }
/* payment estimator th/td padding */
.pe-th                   { padding: 4px 8px; }
/* payment estimator results table */
.pe-results-table        { border-collapse: collapse; border-color: #cccccc; width: 100%; }
/* payment estimator header row */
.pe-header-row           { background-color: var(--ao-plum); color: white; }
/* payment estimator amount label */
.pe-amount-label         { white-space: nowrap; }
/* payment estimator info label */
.pe-info-label           { color: #666; margin-left: 6px; }
/* payment estimator bold-blue label */
.pe-section-label        { white-space: nowrap; color: var(--ao-plum); font-weight: bold; }
/* payment estimator required asterisk */
.required-asterisk       { color: red; }
/* application form overview table — max-width allows reflow on narrow viewports */
.apply-table             { width: 100%; max-width: 600px; }
/* provider select width */
.provider-select         { width: 300px; }
/* use-applicant button */
.btn-use-applicant       { font-size: 0.85em; padding: 2px 8px; }
/* providers table hidden initially */
.providers-table-hidden  { border-collapse: collapse; border-color: #ccc; margin-top: 10px; display: none; }
/* provider table header */
.providers-table-header  { background-color: var(--ao-plum); color: white; }
/* confirm-delete button */
.btn-confirm-delete      { color: red; }
/* add provider panel hidden */
.add-provider-panel-hidden { display: none; margin-top: 8px; border: 1px solid #ccc; padding: 8px; }
/* del-panel hidden */
.del-panel               { display: none; }

/* ── Detail table cell padding utilities ─────────────────── */
/* padding: 0 0 4px 0  (label cells in detail tables) */
.td-detail-label         { padding: 0 0 4px 0; }
/* padding: 0 0 4px 10px  (value cells, small left indent) */
.td-detail-value         { padding: 0 0 4px 10px; }
/* padding: 0 0 4px 40px  (wide-gap value cells) */
.td-detail-value-gap     { padding: 0 0 4px 40px; }
/* padding: 0 0 4px 5px  (numeric value cells, tight indent) */
.td-detail-num           { padding: 0 0 4px 5px; }
/* padding: 0 0 6px 0  (label with extra bottom gap) */
.td-detail-label-lg      { padding: 0 0 6px 0; }
/* padding: 0 0 6px 5px  (num value with extra bottom gap) */
.td-detail-num-lg        { padding: 0 0 6px 5px; }
/* padding: 0 0 6px 40px  (wide-gap value with extra bottom gap) */
.td-detail-value-gap-lg  { padding: 0 0 6px 40px; }
/* padding: 6px 0 4px 0  (label with top gap) */
.td-detail-label-top     { padding: 6px 0 4px 0; }
/* padding: 6px 0 4px 5px  (num value with top gap) */
.td-detail-num-top       { padding: 6px 0 4px 5px; }
/* padding: 6px 0 4px 40px  (wide-gap value with top gap) */
.td-detail-value-gap-top { padding: 6px 0 4px 40px; }
/* padding: 6px 0 4px 10px  (value with top gap, small indent) */
.td-detail-value-top     { padding: 6px 0 4px 10px; }
/* padding: 3px 8px 3px 0  (add-provider form label cells) */
.td-add-prov-label       { padding: 3px 8px 3px 0; }
/* padding-bottom: 6px  (add-provider header) */
.pb-6                    { padding-bottom: 6px; }
/* padding-top: 6px  (misc cells needing top spacing) */
.pt-6                    { padding-top: 6px; }
/* padding-top: 4px  (misc cells needing small top spacing) */
.pt-4                    { padding-top: 4px; }
/* padding-top: 10px  (button row bottom of tab) */
.pt-10                   { padding-top: 10px; }
/* margin-top: 10px  (div spacing) */
.mt-10                   { margin-top: 10px; }
/* margin-top: 12px  (div spacing) */
.mt-12                   { margin-top: 12px; }
/* padding: 4px  (section header cells) */
.p-4                     { padding: 4px; }
/* padding: 4px 8px  (provider table header cells) */
.p-4-8                   { padding: 4px 8px; }
/* white-space: nowrap; width: 160px  (label column in personal info table) */
.td-label-col            { white-space: nowrap; width: 160px; }
/* vertical-align: top; padding-top: 4px  (checklist checkbox cells) */
.td-chk-cell             { vertical-align: top; padding-top: 4px; }
/* nav bar outer — max-width allows reflow on narrow viewports */
.nav-bar-outer           { width: 100%; max-width: 900px; }
/* nav bar inner table: text-end layout */
.nav-bar-inner           { width: 100%; }
/* background: #fff; min-height: 56px for navbar */
.navbar-bg               { background: #fff; min-height: 56px; }
/* padding: 4px 0 20px  (dashboard outer wrapper) */
.dashboard-wrapper       { padding: 4px 0 20px; }
/* width: 700px  (history table and detail panel) */
.w-700                   { width: 100%; max-width: 700px; }
/* width: 100%  (full-width tables) */
.w-full                  { width: 100%; }
/* tab button — matches class used in HTML */
.tab-btn                 { cursor: pointer; margin-right: 4px; padding: 4px 10px; display: inline-block; border: none; background: none; font: inherit; color: inherit; }
/* table section header cells — also used as h2 elements */
.table-section-header      { background-color: var(--ao-plum); color: white; padding: 4px; margin: 0; font-size: inherit; font-weight: bold; }
.table-section-header-wide { background-color: var(--ao-plum); color: white; padding: 4px 8px; margin: 0; font-size: inherit; font-weight: bold; }
/* validation error summary box */
.validation-error-box    { color: red; margin-bottom: 8px; padding: 6px; border: 1px solid red; }
/* plain indented list (no extra margin) */
.list-indent             { margin: 0; padding-left: 18px; }
/* initially-hidden: display:none without !important so JS can override via style.display */
.initially-hidden        { display: none; }
/* history table */
.history-table           { border-collapse: collapse; border-color: #ccc; width: 100%; max-width: 700px; }
/* padding-top:4px padding-bottom:2px (add-provider button row) */
.td-pt4-pb2              { padding-top: 4px; padding-bottom: 2px; }

/* ── Striped table rows (replaces inline style="background-color:...") ────── */
.row-even { background-color: #f9f9f9; }
.row-odd  { background-color: #ffffff; }

/* ── CSS grid / flex replacements for role="presentation" layout tables ───── */
/* 2-column form layout: label column auto-sizes, field column fills the rest  */
.form-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 6px;
    align-items: baseline;
}
/* Full-width item spanning both form-grid columns (section headers, buttons) */
.form-grid-full { grid-column: 1 / -1; }
/* 4-column detail layout: label value  |  label value */
.detail-grid-4col {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: 3px 6px;
    align-items: baseline;
}
/* 6-column detail layout: label value  |  label value  |  label value */
.detail-grid-6col {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
    gap: 3px 6px;
    align-items: baseline;
}
/* Horizontal nav tab bar */
.nav-tabs-flex { display: flex; gap: 4px; justify-content: flex-end; }

/* ── Login page (Login/Index.cshtml — Layout = null, standalone) ─────────── */
.login-wrapper {
    display: flex;
    min-height: 100vh;
}

.brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 56px;
    /* Plum (#8a1b61) — 8.7:1 contrast with white, exceeds WCAG AA */
    background: linear-gradient(150deg, var(--ao-plum) 0%, #6b1249 100%);
    color: #fff;
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
}

.brand-panel::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(119, 197, 213, 0.18);
    bottom: -120px;
    right: -100px;
    pointer-events: none;
}

.brand-panel::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -60px;
    left: -60px;
    pointer-events: none;
}

.brand-headline {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.brand-sub {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 36px;
    max-width: 340px;
    position: relative;
    z-index: 1;
}

.brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.brand-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.925rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.brand-features li::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ao-teal);
    flex-shrink: 0;
}

.signin-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    background: #fff;
}

.signin-card {
    width: 100%;
    max-width: 400px;
}

.signin-logo {
    max-width: 180px;
    margin-bottom: 32px;
}

.signin-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.signin-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 32px;
}

.btn-signin {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--ao-orange);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}

.btn-signin:hover {
    background: var(--ao-orange-dk);
}

.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: #767676; /* meets 4.54:1 on white */
    font-size: 0.8rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.help-block {
    background: var(--ao-light);
    border-radius: 8px;
    padding: 18px 20px;
}

.help-block h6 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ao-grey);
    margin-bottom: 4px;
}

.help-block p {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 14px;
    line-height: 1.5;
}

.help-block p:last-child {
    margin-bottom: 0;
}

.help-block a {
    color: var(--ao-orange);
    text-decoration: none;
    font-weight: 500;
}

.help-block a:hover {
    text-decoration: underline;
}

.signin-footer {
    margin-top: 32px;
    font-size: 0.75rem;
    color: #767676; /* meets 4.54:1 on white */
    text-align: center;
}

@media (max-width: 767px) {
    .brand-panel {
        display: none;
    }
}

/* ── ErrorB2C page (Error/ErrorB2C.cshtml — Layout = null, standalone) ─────── */
.error-b2c-body {
    font-family: Arial, 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: #f2f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.error-card {
    background: #fff;
    border-radius: 8px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    text-align: center;
}

.error-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.error-body {
    font-size: 0.9rem;
    color: #555;
    margin: 0 0 24px;
    line-height: 1.5;
}

.error-link {
    display: inline-block;
    padding: 9px 24px;
    background: var(--ao-orange);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
}

.error-link:hover { background: var(--ao-orange-dk); }

/* ── CSP-safe visibility and state utilities ──────────────────────────────── */
/* Inline style assignments are blocked by style-src without 'unsafe-inline'.  */
/* All show/hide and colour state is managed via these classes instead.         */

/* Active tab button (Apply form wizard) */
.tab-btn-is-active       { font-weight: bold; color: var(--ao-plum); border-bottom: 2px solid var(--ao-plum); }

/* Field status warning text (SSN duplicate, address not found) */
.field-status-warning    { color: #b85600; }

/* Provider list table cells */
.prov-td                 { padding: 3px 8px; }

/* History detail table cells */
.hist-label-cell         { width: 180px; padding: 2px 8px 2px 2px; }
.hist-value-cell         { padding: 2px; }

/* Hidden cancelled-application row */
.row-hidden              { display: none; }

/* History detail panel — shown when a row is expanded */
.history-detail-panel.history-detail-visible { display: block; }

/* Provider account detail panel — shown when a row is clicked */
.detail-panel.detail-panel-visible           { display: block; }

/* Selected provider account row highlight — !important overrides .row-even/.row-odd on the same <tr> */
.prov-row-active { background-color: #fff3e0 !important; outline: 2px solid var(--ao-orange); outline-offset: -2px; }

/* Detail panel header showing the selected provider account # */
.prov-detail-header      { font-weight: bold; margin-bottom: 6px; color: var(--ao-plum); }
.prov-detail-header-nr   { color: var(--ao-text); }

/* Session timeout modal — shown when warning countdown starts */
.session-modal-overlay.session-modal-open    { display: flex; }

/* Delete panel open (inline alongside the row) */
.del-panel.del-panel-open                    { display: inline; }

/* Add-provider message colours */
.add-msg-success         { color: green; }
.add-msg-error           { color: red; }

/* Payment estimator — error box visible */
.pe-error-box.pe-error-visible               { display: block; }

/* Payment estimator — balance info visible */
.pe-balance-info.pe-balance-visible          { display: block; }

/* Account inquiry results */
.inquiry-mb-4            { margin-bottom: 4px; }
.inquiry-result-header   { font-size: 12px; color: var(--ao-plum); }
.inquiry-result-clear    { font-size: 11px; }
.inquiry-result-td       { padding: 5px; }
.inquiry-result-link     { padding: 5px; text-decoration: underline; cursor: pointer; }