/**
 * =========================================================================
 * ADAPTIVE FORM LAYOUT
 * =========================================================================
 * 
 * Opt-in modern form layout infrastructure for responsive 4-col -> 2-col
 * grid reflow and joined input control behavior. Loaded centrally from
 * Core.Master; pages opt in via markup (.adaptive-form class) without
 * requiring page-specific CSS.
 */

/**
 * =========================================================================
 * 1. GLOBAL LAYOUT INFRASTRUCTURE
 * =========================================================================
 * 
 * Foundational flex layout for form panels, content animation, and
 * grid container setup.
 */

/* Modern form panel layout:
   lay the form content, summary panel, and popups out as a horizontal row.
   Legacy pages keep default block flow (alert stacked above the form). */
.formPanel:not(.collapse) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.formPanel-content {
    flex: 1;
    min-width: 0;
}

/* Animate the content column in step with the summary panel's width transition
   (0.3s ease) and the subheader's matching padding-right transition, so the area
   between the sidebar and the panel glides instead of snapping when the panel
   collapses/expands. The panel width is reserved via padding-right on this
   element (set in ui-summary-panel.js applyFixedLayout). Gated behind
   .page-loaded so the initial layout pass does not slide on first paint. */
.page-loaded .formPanel-content {
    transition: padding-right 0.3s ease;
}

/* Responsive form layout (opt-in via .adaptive-form) */
.adaptive-form {
    container-type: inline-size;
}

/**
 * =========================================================================
 * 2. ADAPTIVE GRID FOUNDATION
 * =========================================================================
 * 
 * Core 2-column grid reflow logic, row layout patterns, and grid-based
 * field arrangement. Supports flexible label/input positioning and nested
 * field blocks within grid cells.
 */

/* Labels on top in responsive forms - reflow rows as 2-column grid */
.adaptive-form .card-body .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.adaptive-form .card-body .row > .col-form-label {
    width: 100%;
    max-width: 100%;
    text-align: left !important;
    padding-bottom: 0.1rem;
    padding-top: 0;
    font-weight: 600;
    font-size: 0.90rem;
}

.adaptive-form .card-body .row > [class*="col-sm-"]:not(.col-form-label) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0.25rem;
}

.adaptive-form .card-body .bootstrap-select {
    min-width: 0;
    max-width: 100%;
}

/* Place the 4 children (label, input, label, input) into a 2-col grid:
   child 1 (label) -> col 1 row 1
   child 2 (input) -> col 1 row 2
   child 3 (label) -> col 2 row 1
   child 4 (input) -> col 2 row 2 */
.adaptive-form .card-body .row > :nth-child(1) { grid-column: 1; grid-row: 1; }
.adaptive-form .card-body .row > :nth-child(2) { grid-column: 1; grid-row: 2; }
.adaptive-form .card-body .row > :nth-child(3) { grid-column: 2; grid-row: 1; }
.adaptive-form .card-body .row > :nth-child(4) { grid-column: 2; grid-row: 2; }

/* 3-child rows: third child spans both rows in column 2 */
.adaptive-form .card-body .row > :nth-child(3):last-child {
    grid-row: 1 / span 2;
    align-self: center;
}

/* Compound mixed rows: one side uses the standard adaptive label/control pair,
   while the other side is a complete field block (.col-sm-6 containing its own
   label + control). Use these when only one side of the row is compound.
   - grid-col-2-fill: standard label/control pair in col 1, .col-sm-6 field block fills col 2
   - grid-col-1-fill: .col-sm-6 field block fills col 1, standard label/control pair in col 2 */
.adaptive-form .card-body .row.grid-col-2-fill,
.adaptive-form .card-body .row.grid-col-1-fill {
    align-items: start;
}

.adaptive-form .card-body .row.grid-col-2-fill > .col-sm-6 {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.adaptive-form .card-body .row.grid-col-1-fill > .col-sm-6 {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Paired compound rows: both sides are complete field blocks, normally two
   .col-sm-6 children where each child contains its own label + control. Use
   this instead of grid-col-*-fill when both columns are compound fields. */
.adaptive-form .card-body .row.grid-field-pair {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.adaptive-form .card-body .row.grid-field-pair > .col-sm-6 {
    grid-row: auto;
    width: 100%;
    max-width: 100%;
}

.adaptive-form .card-body .row.grid-field-pair > .col-sm-6:nth-child(1) {
    grid-column: 1;
}

.adaptive-form .card-body .row.grid-field-pair > .col-sm-6:nth-child(2) {
    grid-column: 2;
}

.adaptive-form .card-body .row.grid-field-pair > .col-sm-6 > .col-form-label,
.adaptive-form .card-body .row.grid-cols-2 > .col-sm-6 > .col-form-label {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left !important;
    padding-bottom: 0.1rem;
    padding-top: 0;
    font-weight: 600;
    font-size: 0.90rem;
}

/* Labels inside a fill panel are not direct children of .row, so mirror the
   direct-child label treatment above so they match the paired column's label. */
.adaptive-form .card-body .row.grid-col-2-fill > .col-sm-6 > .col-form-label,
.adaptive-form .card-body .row.grid-col-1-fill > .col-sm-6 > .col-form-label {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left !important;
    padding-bottom: 0.1rem;
    padding-top: 0;
    font-weight: 600;
    font-size: 0.90rem;
}

/* Full-width single field: the label/input pair spans both grid columns so a
   lone field fills the row instead of sitting in the left half. Opt-in via
   .grid-row-full on the row (label = child 1, input = child 2). */
.adaptive-form .card-body .row.grid-row-full > :nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
}

.adaptive-form .card-body .row.grid-row-full > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* A lone full-width alert (no .col-* gutter padding to cancel the row's negative
   gutter margin) hangs left of the field/label edge. Pad it by the gutter half so
   it aligns with the inputs below it. */
.adaptive-form .card-body .row.grid-row-full > .alert:only-child {
    margin-left: calc(0.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(0.5 * var(--bs-gutter-x, 1.5rem));
}

.adaptive-form .card-body .row.grid-row-full:empty {
    display: none;
}

/* Nested rows inside a grid cell should use single-column layout */
.adaptive-form .card-body .row .row {
    grid-template-columns: 1fr;
}

.adaptive-form .card-body .row .row > :nth-child(1) { grid-column: 1; grid-row: 1; }
.adaptive-form .card-body .row .row > :nth-child(2) { grid-column: 1; grid-row: 2; }

/**
 * =========================================================================
 * 3. LIST VALIDATOR & FORMVALIDATION ICON BEHAVIOR
 * =========================================================================
 * 
 * Exception handling for list validators (block flow) and interactive
 * icon styling for FormValidation error indicators (X icons).
 */

/* The list-validator row injects its own feedback box and status icon as direct
   children when invalid (FormValidation). It must keep normal block flow so that
   styling applies as designed instead of being forced into the form grid. */
.adaptive-form .card-body .row.list-validator-container {
    display: block;
}

/* Standard field validators: the invalid (X) status icon is clickable (it resets
   the field), so give it a button-like hover on modern form and modal surfaces.
   Keep the non-input-group guard so the circular hover area does not overlap
   adjacent input-group action buttons. The circle is drawn as a pseudo-element
   behind the glyph so the library's own icon sizing and placement stay intact. */
:is(.formPanel, .modal-body) .card-body .fv-plugins-icon.fa.fa-times:not(.fv-plugins-icon-input-group) {
    cursor: pointer;
}

    :is(.formPanel, .modal-body) .card-body .fv-plugins-icon.fa.fa-times:not(.fv-plugins-icon-input-group)::before {
        position: relative;
        z-index: 1;
        display: inline-block;
        transition: transform 0.15s ease;
        transform-origin: center center;
        will-change: transform;
        backface-visibility: hidden;
    }

    :is(.formPanel, .modal-body) .card-body .fv-plugins-icon.fa.fa-times:not(.fv-plugins-icon-input-group)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        background-color: transparent;
        transform: translate(-50%, -50%);
        transition: background-color 0.15s ease;
        z-index: 0;
        pointer-events: none;
    }

    :is(.formPanel, .modal-body) .card-body .fv-plugins-icon.fa.fa-times:not(.fv-plugins-icon-input-group):hover::before {
        transform: scale(1.15);
    }

    :is(.formPanel, .modal-body) .card-body .fv-plugins-icon.fa.fa-times:not(.fv-plugins-icon-input-group):hover::after {
        background-color: rgba(var(--bs-danger-rgb), 0.12);
    }

/**
 * =========================================================================
 * 4. LOOKUP CONTROL & INVALID STATE
 * =========================================================================
 * 
 * Validation focus styling for lookup controls with invalid state.
 */

/* Invalid lookup groups should follow validation focus styling instead of the
   normal accent focus treatment used by valid lookup controls. */
.adaptive-form .input-group.lookup-control:has(> input.form-control.is-invalid):focus-within {
    box-shadow: var(--bs-focus-shadow-danger) !important;
}

    .adaptive-form .input-group.lookup-control:has(> input.form-control.is-invalid):focus-within > .lookup-control-open,
    .adaptive-form .input-group.lookup-control:has(> input.form-control.is-invalid):focus-within > input.form-control[data-role="name"],
    .adaptive-form .input-group.lookup-control:has(> input.form-control.is-invalid):focus-within > .input-group-text {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

/**
 * =========================================================================
 * 5. SPINNER CONTROL (JOINED INPUT GROUP)
 * =========================================================================
 * 
 * Unified control styling for number spinner inputs: single focus ring,
 * no dividers, integrated step buttons. Handles valid and invalid states.
 */

/* Modern spinner groups use the same joined-control behavior as lookup groups:
   one focus ring around the whole control and no vertical divider between the
   input and step buttons. */
.adaptive-form .input-group.spinner {
    border: 1px solid var(--modern-border);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 .125rem .25rem var(--modern-shadow-black-rgb-075);
}

    .adaptive-form .input-group.spinner > input.form-control,
    .adaptive-form .input-group.spinner > .input-group-text,
    .adaptive-form .input-group.spinner > .input-group-btn-vertical > .btn {
        border: 0 !important;
        box-shadow: none !important;
    }

    .adaptive-form .input-group.spinner > input.form-control,
    .adaptive-form .input-group.spinner > .input-group-text {
        border-radius: 0 !important;
    }

    .adaptive-form .input-group.spinner > .input-group-text {
        background-color: var(--bs-disabled-bg);
        margin-right: 0 !important;
    }

    .adaptive-form .input-group.spinner > input.form-control:focus {
        box-shadow: none !important;
    }

    .adaptive-form .input-group.spinner > input.form-control:focus:not([readonly]):not([disabled]):not(.is-invalid):not(.search-control):not(.filter-control),
    .adaptive-form .input-group.spinner > input.form-control.is-invalid:focus {
        border: 0 !important;
        box-shadow: none !important;
    }

    .adaptive-form .input-group.spinner > .input-group-btn-vertical {
        margin-left: 0 !important;
        border: 0 !important;
        background-color: var(--bs-body-bg);
    }

    .adaptive-form .input-group.spinner:has(> input.form-control:disabled) > .input-group-btn-vertical,
    .adaptive-form .input-group.spinner:has(> input.form-control[readonly]) > .input-group-btn-vertical {
        background-color: var(--bs-disabled-bg);
    }

    .adaptive-form .input-group.spinner > .input-group-btn-vertical > .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

        .adaptive-form .input-group.spinner > .input-group-btn-vertical > .btn i {
            position: static;
        }

    .adaptive-form .input-group.spinner > .input-group-btn-vertical > .btn:first-child {
        border-bottom-width: 0 !important;
    }

    .adaptive-form .input-group.spinner > .input-group-btn-vertical > .btn:last-child {
        border-top-width: 0 !important;
    }

    .adaptive-form .input-group.spinner:not(:has(> input.form-control.is-invalid)):has(> input.form-control:focus:not([readonly]):not(:disabled):not([disabled])):focus-within,
    .adaptive-form .input-group.spinner:not(:has(> input.form-control.is-invalid)):has(> .input-group-btn-vertical > .btn:not(:disabled):not([disabled])):focus-within {
        border-color: color-mix(in srgb, var(--modern-accent-focus) 78%, white) !important;
        border-radius: var(--bs-border-radius);
        box-shadow: 0 0 0 0.2rem var(--modern-accent-primary-25);
    }

        .adaptive-form .input-group.spinner:has(> input.form-control:focus:not([readonly]):not(:disabled):not([disabled])):focus-within > input.form-control,
        .adaptive-form .input-group.spinner:has(> input.form-control:focus:not([readonly]):not(:disabled):not([disabled])):focus-within > .input-group-text,
        .adaptive-form .input-group.spinner:has(> input.form-control:focus:not([readonly]):not(:disabled):not([disabled])):focus-within > .input-group-btn-vertical > .btn,
        .adaptive-form .input-group.spinner:has(> .input-group-btn-vertical > .btn:not(:disabled):not([disabled])):focus-within > input.form-control,
        .adaptive-form .input-group.spinner:has(> .input-group-btn-vertical > .btn:not(:disabled):not([disabled])):focus-within > .input-group-text,
        .adaptive-form .input-group.spinner:has(> .input-group-btn-vertical > .btn:not(:disabled):not([disabled])):focus-within > .input-group-btn-vertical > .btn {
            border: 0 !important;
            box-shadow: none !important;
        }

    .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid) {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

    .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid):focus-within {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: var(--bs-focus-shadow-danger) !important;
    }

        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid) > input.form-control,
        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid) > .input-group-text,
        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid) > .input-group-btn-vertical > .btn,
        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid):focus-within > input.form-control,
        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid):focus-within > .input-group-text,
        .adaptive-form .input-group.spinner:has(> input.form-control.is-invalid):focus-within > .input-group-btn-vertical > .btn {
                         border: 0 !important;
                     }

/**
 * =========================================================================
 * 6. FILE CONTROL (JOINED INPUT GROUP)
 * =========================================================================
 * 
 * Unified control styling for file upload inputs: single focus ring,
 * no dividers, integrated action buttons. Handles valid and invalid states.
 */

    /* File upload groups follow the same joined-control behavior: one focus ring
        around the whole control and no divider before action buttons. */
    .adaptive-form .input-group.file-control {
        border: 1px solid var(--modern-border);
        border-radius: var(--bs-border-radius);
        overflow: hidden;
        box-shadow: 0 .125rem .25rem var(--modern-shadow-black-rgb-075);
    }

    .adaptive-form .input-group.file-control > input.form-control,
    .adaptive-form .input-group.file-control > .input-group-text {
        border: 0 !important;
        box-shadow: none !important;
    }

    .adaptive-form .input-group.file-control > .input-group-text {
        margin-left: 0 !important;
        border-radius: 0 !important;
    }

    .adaptive-form .input-group.file-control > input.form-control:focus {
        box-shadow: none !important;
    }

    .adaptive-form .input-group.file-control:focus-within {
        border-color: color-mix(in srgb, var(--modern-accent-focus) 78%, white) !important;
        box-shadow: 0 0 0 0.2rem var(--modern-accent-primary-25);
    }

    .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid) {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

    .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid):focus-within {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: var(--bs-focus-shadow-danger) !important;
    }

        .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid) > input.form-control,
        .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid) > .input-group-text,
        .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid):focus-within > input.form-control,
        .adaptive-form .input-group.file-control:has(> input.form-control.is-invalid):focus-within > .input-group-text {
                         border: 0 !important;
                     }

/**
 * =========================================================================
 * 7. SELECT CONTROLS
 * =========================================================================
 * 
 * Multi-select styling: adjacent selects with independent focus and small
 * gap to prevent visual border collision.
 */

/* Adjacent selects that should remain independently focused with a small gap
    between controls so their focus/open borders do not visually collide. */
.adaptive-form .joined-select-group {
    display: flex;
    gap: 0.25rem;
}

    .adaptive-form .joined-select-group > .form-select {
        flex: 1 1 0;
        min-width: 0;
    }

/**
 * =========================================================================
 * 8. GRID LAYOUT VARIANTS
 * =========================================================================
 * 
 * Specialized grid patterns: full-width fields, two-column panel pairs,
 * and dynamic column repositioning for conditional visibility.
 */

/* Full-width field rows span both grid columns */
.adaptive-form .card-body .row.col-span-full {
    grid-template-columns: 1fr;
}

.adaptive-form .card-body .row.col-span-full > :nth-child(1) { grid-column: 1; grid-row: 1; }
.adaptive-form .card-body .row.col-span-full > :nth-child(2) { grid-column: 1; grid-row: 2; }

/* Two sibling col-sm-6 panels (each carrying a nested label/input row, often
   with their own id for show/hide cascades) sit one per grid column instead of
   stacking. Opt-in via .grid-cols-2 so the default nested handling is unchanged. */
.adaptive-form .card-body .row.grid-cols-2 {
    align-items: start;
}

.adaptive-form .card-body .row.grid-cols-2 > .col-sm-6:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.adaptive-form .card-body .row.grid-cols-2 > .col-sm-6:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/* When the first paired panel in a two-column row is hidden, the visible second panel
   would otherwise stay stranded in column 2 with an empty column 1 beside it. Add
   .grid-col-start to the still-visible panel (managed by the owning page script) to
   promote it to column 1 so it sits flush left. Generic and reusable; no page-specific
   ids or inline-style sniffing. */
.adaptive-form .card-body .row.grid-cols-2 > [class*="col-"].grid-col-start {
    grid-column: 1;
}

/**
 * =========================================================================
 * 9. RESPONSIVE BREAKPOINTS
 * =========================================================================
 * 
 * Container queries for narrow-viewport adaptation: reflow from 2-column
 * to single-column grid layout on small screens.
 */

/* Single-column mode when container is narrow */
@container (max-width: 700px) {
    .adaptive-form .card-body .row {
        grid-template-columns: 1fr;
        margin-bottom: 0.5rem !important;
    }

    .adaptive-form .card-body .row > :nth-child(1) { grid-column: 1; grid-row: 1; }
    .adaptive-form .card-body .row > :nth-child(2) { grid-column: 1; grid-row: 2; }
    .adaptive-form .card-body .row > :nth-child(3) { grid-column: 1; grid-row: 3; }
    .adaptive-form .card-body .row > :nth-child(4) { grid-column: 1; grid-row: 4; }

    .adaptive-form .card-body .row.grid-cols-2 > .col-sm-6:nth-child(1) { grid-column: 1; grid-row: 1; }
    .adaptive-form .card-body .row.grid-cols-2 > .col-sm-6:nth-child(2) { grid-column: 1; grid-row: 2; }

    .adaptive-form .card-body > .row:last-child {
        margin-bottom: 0 !important;
    }
}

/**
 * =========================================================================
 * 10. EDGE CASES & CONTEXT-SPECIFIC FIXES
 * =========================================================================
 * 
 * Targeted corrections for nested row gutter alignment and control-specific
 * margin collapsing in modal and tab-pane contexts.
 */

/* Modern form: serial number row fix - nested row inside col-sm-6.
   Zero the Bootstrap negative gutter so nested label/input content aligns to
   the grid cell's left edge (matching non-nested rows) instead of shifting left. */
.modal .adaptive-form .card-body .row > .col-sm-6 .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.modal .adaptive-form .card-body .row > .col-sm-6 .row > .col-form-label,
.modal .adaptive-form .card-body .row > .col-sm-6 .row > [class*="col-sm-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Activity control adds its own .card mt-3; when it is the first content in a
   tab pane, that top margin stacks on the tab-content's pt-3 and pushes the card
   lower than other tabs' first card. Zero it so the Activity card aligns with
   the Primary/Master Accounts cards. */
.tab-pane > #pnlUCActivity:first-child > .card {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    .adaptive-form .card > .card-header.d-flex {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        align-items: flex-start !important;
    }

    .adaptive-form .card > .card-header.d-flex > .btn-group {
        order: 2;
        width: 100%;
        margin-top: 0.25rem;
        justify-content: flex-end;
    }

    .formPanel .px-4,
    .formPanel-content .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}