/* Gina-wide form density. The Terms screen's sizing is the canonical scale —
   every Gina window opts in with these classes instead of per-screen overrides. */

/* Side padding is a full 1rem for the same reason as the modal-body rule below:
   Falcon's .row gutters margin out up to -1rem, and thinner panel padding lets
   every bare row hang past the panel edge — the source of Gina's purposeless
   horizontal scrollbars. */
.gina-panel {
    padding: 0.35rem 1rem 0.75rem;
    font-size: 0.72rem;
}

/* Modal bodies keep Falcon's full 1rem gutter: Falcon's .row ignores Bootstrap's
   .g-* vars and margins out -0.5*--falcon-gutter-x (up to -1rem), so the thin
   .gina-panel padding lets rows hang past the body edge — content flush against
   the modal border plus a phantom horizontal scrollbar. */
.modal-body.gina-panel {
    padding: 0.75rem 1rem 1rem;
}

/* Read-only value rows (TIL Information): Bootstrap's plaintext control keeps
   1rem text and .25rem padding, which drops values below their captions and off
   the density scale. Match the caption metrics so both sit on one baseline. */
.gina-panel .form-control-plaintext,
.gina-panel .form-control-plaintext.form-control-sm {
    font-size: 0.72rem;
    padding: 0.1rem 0;
    min-height: 0;
    line-height: 1.35;
}

/* Falcon ships no dark-theme rule for Bootstrap's .btn-close, leaving a black X
   on a dark modal header. Same trick as Bootstrap's .btn-close-white, keyed off
   the html.dark theme class. */
html.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap's form-control-sm is roomier than it looks, so squeeze inputs and
   selects screen-wide to fit whole windows without scrolling. */
.gina-panel .form-control,
.gina-panel .form-select {
    font-size: 0.72rem;
    padding: 0.08rem 0.4rem;
    min-height: 0;
    height: auto;
    line-height: 1.35;
}

.gina-panel .form-select {
    padding-right: 1.4rem;
    background-position: right 0.35rem center;
}

/* Buttons and addons inside input groups (date pickers, calculators, sparkles)
   get the same squeeze so their rows match plain-input rows. */
.gina-panel .input-group .btn,
.gina-panel .input-group .input-group-text {
    font-size: 0.72rem;
    padding: 0.08rem 0.4rem;
    min-height: 0;
    line-height: 1.35;
}

/* Standalone small buttons (Pick, Vesting Tool, Details, address copiers)
   match the input rows too — Bootstrap's btn-sm alone is a size up from the
   0.72rem scale and towers over the fields beside it. */
.gina-panel .btn-sm {
    font-size: 0.72rem;
    padding: 0.08rem 0.5rem;
    min-height: 0;
    line-height: 1.35;
}

.gina-panel .form-check {
    font-size: 0.72rem;
    line-height: 1.35;
}

/* Inline suffix text ("at first adjustment.", "days", "% of") is markup-tagged
   .small across the Terms sub-windows, which lands at 0.875em of the density
   scale — visibly smaller than the row it belongs to. One scale everywhere. */
.gina-panel .small,
.gina-panel small {
    font-size: 0.72rem;
}

/* Falcon fixes form-check-label line-height at 1.45rem (sized for 1rem text),
   which leaves our 0.72rem labels floating in a too-tall box beside the box.
   Falcon also sizes bare label elements at 0.8333rem, so without the inherit
   every checkbox label renders a full size above its row — inherit picks up
   whatever scale the surrounding .form-check runs at (0.72rem here, 0.8333rem
   inside a gina-modal-form). */
.gina-panel .form-check-label {
    line-height: 1.35;
    font-size: inherit;
}

/* Bootstrap row/col form screens (Property, Parties) — labels match the grids. */
.gina-panel .col-form-label,
.gina-panel .col-form-label-sm {
    font-size: 0.7rem;
    color: var(--falcon-700);
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* Tab strips inside a window (Parties, Property, credit bureaus). */
.gina-tabs .nav-link {
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
}

/* Compact standalone button (Pick, Change, feature openers). */
.gina-btn {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    line-height: 1.35;
    white-space: nowrap;
}

/* Theme tokens, not literals: the Falcon grey scale flips in dark mode, so
   var(--falcon-700) + white text washes out to white-on-light-grey there. The
   200/800 pair reads as a soft header pill in both themes. */
.gina-section-bar {
    background: var(--falcon-200, #edf2f9);
    color: var(--falcon-800, #4d5969);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    margin: 0 0 0.35rem;
}

.gina-section-bar--mid {
    margin-top: 0.5rem;
}

/* Column-header pill for the small input matrices (Buydown years, MI paid-by,
   reductions columns). Same theme-token pair as the section bar — hardcoded
   white text on a grey that flips light in dark mode is unreadable there. */
.gina-col-head {
    background: var(--falcon-200, #edf2f9);
    color: var(--falcon-800, #4d5969);
    font-weight: 600;
    text-align: center;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* Modern modal scale — Terms sub-windows opt in by adding this class to their
   EditForm. Falcon gives label and input elements Poppins at 0.8333rem while
   spans and divs inherit the Open Sans density size, so mixed rows read as two
   different fonts. Adopt the label font and size for the whole form. */
.gina-modal-form {
    font-family: var(--falcon-font-sans-serif);
    font-size: 0.8333rem;
}

.gina-modal-form .form-control,
.gina-modal-form .form-select,
.gina-modal-form .input-group .btn,
.gina-modal-form .input-group .input-group-text,
.gina-modal-form .form-check {
    font-size: 0.8333rem;
}

/* Inside a modern-scale form, .small stops shrinking (overrides the density pin
   above) so stray small text matches its row. */
.gina-modal-form .small,
.gina-modal-form small {
    font-size: inherit;
}

/* Falcon's .form-check ships min-height and margins, and its labels a bottom
   margin — both make checkbox rows taller than bare rows and float their text
   above center. Reset so mixed rows share one rhythm. */
.gina-modal-form .form-check {
    margin-bottom: 0;
    min-height: 0;
}

.gina-modal-form .form-check-label {
    margin-bottom: 0;
}

.gina-modal-form .gina-section-bar {
    margin: 0.9rem 0 0.45rem;
}

/* Inline sentence text beside an input ("at first adjustment.", "days") and
   spans standing in for labels: mirror Falcon's label weight and tracking so
   they render identically to the label elements around them. */
.gina-modal-form .gina-suffix {
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Compact two-column label/input grid. Screens tune the label column with
   --gina-label-w rather than diverging on grid definitions. */
.gina-grid {
    display: grid;
    grid-template-columns: var(--gina-label-w, 8.25rem) 1fr;
    gap: 0.1rem 0.35rem;
    align-items: center;
}

.gina-grid > label {
    font-size: 0.7rem;
    color: var(--falcon-700);
    text-align: right;
    margin: 0;
}

.gina-grid > label.gina-link {
    color: var(--falcon-primary);
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}

.gina-grid > label.gina-link:hover {
    color: var(--falcon-blue, #0a58ca);
}

/* Every single-value input fills its grid cell so inputs are uniform width
   across columns; inputs sharing a row flex beside their suffix or button. */
.gina-grid > .combobox-container,
.gina-grid > .combobox-container .input-group,
.gina-grid > .d-flex {
    min-width: 0;
    width: 100%;
}

.gina-grid > .d-flex > .combobox-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* Dense input tables (Closing matrices). Scoped under .gina-panel so the cell
   padding beats Bootstrap's .table > :not(caption) > * > * without !important. */
.gina-panel .gina-matrix td,
.gina-panel .gina-matrix th {
    padding: 2px 4px;
    vertical-align: middle;
}

.gina-panel .gina-matrix .form-control,
.gina-panel .gina-matrix .form-select {
    padding: 1px 4px;
    height: auto;
}

/* Review List: reviewers scan long findings text and comments at a glance, so
   this table opts out of the 0.72rem density scale. Fixed layout splits the
   width after the Finding column evenly between Description and Comment. */
.gina-panel .gina-reviewlist-table {
    table-layout: fixed;
    font-size: 0.8rem;
}

.gina-panel .gina-reviewlist-table .form-control,
.gina-panel .gina-reviewlist-table .form-select {
    font-size: 0.8rem;
}

.gina-panel .gina-reviewlist-comments {
    resize: vertical;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .gina-grid {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .gina-grid > label {
        text-align: left;
    }
}