/* Form viewport + content band (after site.css). #site-content wraps @RenderBody in _Layout. */
#site-main {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
#site-header {
    flex-shrink: 0;
}
#site-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--wpd-page-bg-color, #070027);
    background-image: var(--wpd-page-bg-image, url("/images/WPD4.webp"));
    /* Stretch to fill so pets are not cropped. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#site-footer {
    flex-shrink: 0;
}

/*
 * Access-style forms: wrap page in .form-viewport-shell (80% x available height).
 * --wpd-form-accent is set on .form-viewport-shell via _Layout script (sessionStorage.wpdOpenFormTheme.border)
 * for descendants (e.g. ClientInvoice first row). Shell itself has no themed fill.
 */
.form-viewport-shell {
    --wpd-form-accent: rgb(255, 250, 140);
    width: 80%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 0;
}
.form-viewport-shell > .container-fluid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}
.form-viewport-shell .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.form-viewport-shell .card-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
@media (max-width: 576px) {
    .form-viewport-shell {
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Checkbox + label vertical alignment (form-viewport-shell forms only) */
.form-viewport-shell .inv-field-inline.inv-check-field,
.form-viewport-shell .inv-field-inline:has(.inv-field-control--check) {
    align-items: center;
}

.form-viewport-shell .inv-field-inline .inv-field-control--check {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    line-height: 1;
}

.form-viewport-shell .inv-field-inline .inv-field-control--check .form-check-input,
.form-viewport-shell .inv-field-inline .inv-field-control--check .inv-form-check {
    margin: 0;
    flex-shrink: 0;
}

.form-viewport-shell .inv-field-inline.inv-check-field > .inv-field-label,
.form-viewport-shell .inv-field-inline:has(.inv-field-control--check) > .inv-field-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-top: 0;
    line-height: 1.2;
}

/* Label span + bare checkbox (invoice/payment Locked, Closed, etc.) */
.form-viewport-shell .d-flex:has(> .form-check-input) {
    align-items: center;
}

.form-viewport-shell .d-flex > .inv-check-label + .form-check-input,
.form-viewport-shell .d-flex > .form-check-input.inv-form-check {
    margin: 0;
    flex-shrink: 0;
}

.form-viewport-shell .d-flex > .inv-check-label {
    display: flex;
    align-items: center;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Bootstrap form-check rows inside app forms */
.form-viewport-shell .form-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 0;
    padding-left: 0;
    margin-bottom: 0;
}

.form-viewport-shell .form-check .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.form-viewport-shell .form-check .form-check-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Selection checkboxes in table cells */
.form-viewport-shell .inv-pat-select-cell,
.form-viewport-shell .inv-line-select-cell {
    text-align: center;
    vertical-align: middle;
}

.form-viewport-shell .inv-pat-select-cell .form-check-input,
.form-viewport-shell .inv-line-select-cell .form-check-input {
    margin: 0;
}

/* Book Online select (beats translucent Bootstrap/select paint). */
.form-viewport-shell.book-online-page select.form-select {
    color-scheme: dark;
    --inv-select-bg: #0a1628;
    --inv-select-bg-hover: #122648;
    --inv-select-fg: #e8eef4;
    --inv-select-selected-fg: var(--wpd-form-accent, rgb(141, 220, 255));
    appearance: none;
    -webkit-appearance: none;
    background-color: #0a1628 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8eef4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.45rem center !important;
    background-size: 12px 10px !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--inv-select-selected-fg) !important;
}
.form-viewport-shell.book-online-page select.form-select:focus {
    background-color: #0a1628 !important;
    border-color: color-mix(in srgb, var(--wpd-form-accent, rgb(141, 220, 255)) 55%, rgba(255, 255, 255, 0.25)) !important;
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--wpd-form-accent, rgb(141, 220, 255)) 18%, transparent);
    color: var(--inv-select-selected-fg) !important;
}
.form-viewport-shell.book-online-page select.form-select option {
    background-color: #0a1628;
    color: var(--wpd-text);
}
.form-viewport-shell.book-online-page select.form-select option:checked,
.form-viewport-shell.book-online-page select.form-select option:hover,
.form-viewport-shell.book-online-page select.form-select option:focus {
    background-color: #122648;
    color: var(--wpd-form-accent, rgb(141, 220, 255));
}
/* =============================================================================
   Opaque form chrome + solid buttons (Option 2)
   Tokens on .form-viewport-shell; !important beats per-view glass copies.
   ============================================================================= */
/* Surface tokens: html[data-theme] in theme.css (inherited by .form-viewport-shell). */

/* Form labels / muted copy follow theme tokens (light + dark). */
.form-viewport-shell,
.form-viewport-shell .card,
.form-viewport-shell .card-body {
    color: var(--wpd-text);
}
.form-viewport-shell .form-label,
.form-viewport-shell label.form-label,
.form-viewport-shell .inv-field-label,
.form-viewport-shell .inv-check-label,
.form-viewport-shell .form-check-label,
.form-viewport-shell .client-invoice-title {
    color: var(--wpd-text);
}
.form-viewport-shell .text-muted,
.form-viewport-shell .schedule-muted,
.form-viewport-shell .form-text {
    color: var(--wpd-text-muted) !important;
}


/* Solid form card — no glass / blur */
.form-viewport-shell .card.client-invoice-card,
.form-viewport-shell.client-invoice-page .card.client-invoice-card,
.form-viewport-shell .card.visit-exam-card {
    background: var(--wpd-form-card-bg) !important;
    background-color: var(--wpd-form-card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Nested panels / grids that were translucent */
.form-viewport-shell .maint-fields-inner,
.form-viewport-shell .client-invoice-table-wrap,
.form-viewport-shell .inv-line-items-region,
.form-viewport-shell .msg-compose-stack,
.form-viewport-shell .so-orders-panel,
.form-viewport-shell .so-detail-panel,
.form-viewport-shell .msg-list-panel {
    background-color: var(--wpd-form-panel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Accent header boxes — opaque mix (no see-through to page art) */
.form-viewport-shell .fci-criteria-box,
.form-viewport-shell .inv-note-box {
    background: color-mix(in srgb, var(--wpd-form-accent, rgb(255, 250, 140)) 16%, var(--wpd-form-panel-bg)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Opaque form controls */
.form-viewport-shell .form-control,
.form-viewport-shell .form-select,
.form-viewport-shell textarea.form-control,
.form-viewport-shell input.form-control,
.form-viewport-shell select.form-select {
    background-color: var(--wpd-form-control-bg) !important;
    border-color: var(--wpd-form-control-border);
    color: var(--wpd-text);
}
.form-viewport-shell .form-control:focus,
.form-viewport-shell .form-select:focus,
.form-viewport-shell textarea.form-control:focus {
    background-color: var(--wpd-form-control-bg) !important;
    color: var(--wpd-text);
}
.form-viewport-shell .form-control:disabled,
.form-viewport-shell .form-select:disabled,
.form-viewport-shell .form-control[readonly] {
    background-color: var(--wpd-form-muted-surface) !important;
    color: var(--wpd-text-muted);
}

/* Opaque table cells (beat translucent --fci-grid-* rgba tokens on many forms) */
.form-viewport-shell .client-invoice-table thead th {
    background-color: var(--wpd-form-table-header-bg) !important;
}
.form-viewport-shell .client-invoice-table tbody td {
    background-color: var(--wpd-form-panel-bg);
}
.form-viewport-shell .client-invoice-table tbody tr:nth-child(even) td {
    background-color: var(--wpd-form-table-stripe-bg);
}
/* Dropdown / suggest lists under forms */
.form-viewport-shell .fci-client-list,
.form-viewport-shell .msg-client-list,
.form-viewport-shell .so-client-results {
    background: var(--wpd-form-panel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* -----------------------------------------------------------------------------
   Outline → solid buttons inside form shells (keep semantic colors)
   ----------------------------------------------------------------------------- */
.form-viewport-shell .btn-outline-light {
    --bs-btn-color: #0a1020;
    --bs-btn-bg: #e8eef4;
    --bs-btn-border-color: var(--wpd-text);
    --bs-btn-hover-color: #0a1020;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #0a1020;
    --bs-btn-active-bg: #dce3eb;
    --bs-btn-active-border-color: #dce3eb;
    --bs-btn-disabled-color: rgba(10, 16, 32, 0.55);
    --bs-btn-disabled-bg: rgba(232, 238, 244, 0.45);
    --bs-btn-disabled-border-color: transparent;
    color: var(--bs-btn-color) !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}
.form-viewport-shell .btn-outline-light:hover,
.form-viewport-shell .btn-outline-light:focus {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}
.form-viewport-shell .btn-outline-light:disabled,
.form-viewport-shell .btn-outline-light.disabled {
    color: var(--bs-btn-disabled-color) !important;
    background-color: var(--bs-btn-disabled-bg) !important;
    border-color: var(--bs-btn-disabled-border-color) !important;
}

.form-viewport-shell .btn-outline-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.form-viewport-shell .btn-outline-danger:hover,
.form-viewport-shell .btn-outline-danger:focus {
    color: #fff !important;
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}

.form-viewport-shell .btn-outline-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    color: #fff !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
}
.form-viewport-shell .btn-outline-success:hover,
.form-viewport-shell .btn-outline-success:focus {
    color: #fff !important;
    background-color: #157347 !important;
    border-color: #146c43 !important;
}

.form-viewport-shell .btn-outline-warning {
    --bs-btn-color: #0a1020;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    color: #0a1020 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}
.form-viewport-shell .btn-outline-warning:hover,
.form-viewport-shell .btn-outline-warning:focus {
    color: #0a1020 !important;
    background-color: #ffcd39 !important;
    border-color: #ffc720 !important;
}

.form-viewport-shell .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
.form-viewport-shell .btn-outline-primary:hover,
.form-viewport-shell .btn-outline-primary:focus {
    color: #fff !important;
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.form-viewport-shell .btn-outline-info {
    --bs-btn-color: #0a1020;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    color: #0a1020 !important;
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}
.form-viewport-shell .btn-outline-info:hover,
.form-viewport-shell .btn-outline-info:focus {
    color: #0a1020 !important;
    background-color: #3dd5f3 !important;
    border-color: #25cff2 !important;
}

.form-viewport-shell .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}
.form-viewport-shell .btn-outline-secondary:hover,
.form-viewport-shell .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

/* Active outline toggles (Calendar view, etc.) stay solid when .active */
.form-viewport-shell .btn-outline-light.active,
.form-viewport-shell .btn-check:checked + .btn-outline-light {
    color: #0a1020 !important;
    background-color: var(--wpd-form-accent, #fff59a) !important;
    border-color: var(--wpd-form-accent, #fff59a) !important;
}