/*
 * Styles for the pricing quote preview modal (#17). Filament only loads its
 * own CSS bundle and does NOT scan our custom Blade views, so Tailwind utility
 * classes used there produce no CSS (the preview rendered as an unstyled,
 * stacked list). We ship explicit classes here instead, registered via
 * FilamentAsset, and render the quote as a real table.
 */

.ssmt-quote {
    font-size: 0.875rem;
}

.ssmt-quote__table {
    width: 100%;
    border-collapse: collapse;
}

.ssmt-quote__table th,
.ssmt-quote__table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
    text-align: left;
    vertical-align: top;
}

/* The simulator's two tables (#1246) — its rows, then its lines — each in a
   region that scrolls when a narrow screen cannot hold its columns, and with
   a gap between them, or they read as one. */
.ssmt-quote__scroll {
    overflow-x: auto;
}

/* Focusable so a keyboard can scroll it, so it needs a ring — the one
   `.ssmt-jt__wrap` draws (social-content.css), for the same reason. */
.ssmt-quote__scroll:focus-visible {
    outline: 2px solid var(--tew-color-focus, currentColor);
    outline-offset: 2px;
}

.ssmt-quote__scroll + .ssmt-quote__scroll {
    margin-top: 1.5rem;
}

html.dark .ssmt-quote__table th,
html.dark .ssmt-quote__table td {
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.ssmt-quote__table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* The design system's subtle text, not Filament's gray-500: that one is
       about 2.7:1 on a dark section, and the simulator's axe check runs in
       both themes (theme.css, the accessibility block). */
    color: var(--tew-color-text-subtle);
}

/* numeric columns: right-aligned, tabular figures. The td selector must carry
   the same (class + element) specificity as the base `.ssmt-quote__table td`
   left-align rule above, otherwise that rule wins and the values stay left
   while only the headers right-align. */
.ssmt-quote__table th.ssmt-quote__num,
.ssmt-quote__table td.ssmt-quote__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ssmt-quote__label {
    display: block;
    font-weight: 600;
}

.ssmt-quote__note {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--tew-color-text-subtle);
}

.ssmt-quote__net {
    font-weight: 700;
}

/* monthly projection banner */
.ssmt-quote__projection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--primary-50, rgb(239 246 255));
    font-weight: 500;
}

html.dark .ssmt-quote__projection {
    background: rgb(255 255 255 / 0.05);
}

.ssmt-quote__projection strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Price list form (#1253): the parameter boxes side by side take the height
 * of the taller one. The grid already stretches each column to the row; the
 * component wrapper between the column and the box did not, so the shorter
 * box stopped at its own content. The class lands on the box's own wrapper
 * (`div.fi-sc-section`), not on its <section>: one Filament level is crossed
 * on each side, so a Filament update that moves them breaks one selector,
 * not a chain of six.
 */
.fi-sc-component:has(> .ssmt-price-box),
.ssmt-price-box,
.ssmt-price-box > .fi-section {
    height: 100%;
}

/*
 * The installation simulator (#1246): numbers of two or three digits, so every
 * field is as wide as one, its label inline beside it — Filament's inline
 * label takes a third of the column and gives the input the rest, which is
 * the stretch this undoes. From 40rem, where Filament puts a label inline
 * too: below it the label goes back above the input, full width, or a page
 * at 320px would scroll sideways (WCAG 1.4.10).
 */
@media (min-width: 40rem) {
    .ssmt-sim-field.fi-fo-field-has-inline-label {
        display: flex;
        align-items: flex-start;
        column-gap: 0.75rem;
    }

    .ssmt-sim-field > .fi-fo-field-label-col {
        flex: none;
        padding-top: 0.5rem;
        white-space: nowrap;
    }

    /* The INPUT is as wide as its number, not its column: the column also
       holds the error, a sentence, which at 5.5rem broke into a word per
       line. So the column grows with it, up to a short sentence, and the
       table beside moves over rather than being written on. */
    .ssmt-sim-field > .fi-fo-field-content-col {
        flex: none;
        min-width: 5.5rem;
        max-width: 14rem;
    }

    .ssmt-sim-field .fi-input-wrp {
        width: 5.5rem;
    }

    .ssmt-sim-field--date .fi-input-wrp {
        width: 9.5rem;
    }

    .ssmt-sim-field--list > .fi-fo-field-content-col {
        max-width: none;
    }

    .ssmt-sim-field--list .fi-input-wrp {
        width: 22rem;
    }

    /* Two counts one above the other — a tenant's, the agency's: one label
       width, so their inputs line up. A floor, not a width: a longer label —
       the English ones — grows the column instead of running over its input. */
    .ssmt-sim-pair .ssmt-sim-field > .fi-fo-field-label-col {
        min-width: 7rem;
    }

    .ssmt-sim-pair--agency .ssmt-sim-field > .fi-fo-field-label-col {
        min-width: 12.5rem;
    }
}

/* Fields and result side by side (Flex, from lg): the fields keep the width
   they need — squeezed, the brand table spilled out of its box — and when
   the result would get less than 20rem, it goes below them instead. */
@media (min-width: 64rem) {
    .ssmt-sim {
        flex-wrap: wrap;
    }

    .ssmt-sim > :not(.fi-growable) {
        flex-shrink: 0;
    }

    .ssmt-sim > .fi-growable {
        min-width: 20rem;
    }
}

/*
 * Filament keeps a table repeater a table only when ITS OWN width reaches
 * 36rem (@xl), and a brand table sized to its numbers never does — it stacked
 * into boxes. So the simulator is the container that is measured, and the
 * repeater stops being one.
 */
.ssmt-sim {
    container-type: inline-size;
}

.fi-fo-table-repeater.ssmt-sim-groups {
    container-type: normal;
}

/* And the table is as wide as its numbers. `auto` is not enough — the inputs'
   max-content fills the row — so min-content plus a floor per column. Only
   while it IS a table, from the same 36rem: stacked into boxes on a phone,
   min-content would squeeze them into a strip. */
@container (min-width: 36rem) {
    .ssmt-sim-groups > table {
        width: min-content;
    }

    .ssmt-sim-groups > table > tbody > tr > td:not(:last-child) {
        min-width: 5.5rem;
    }

    /* A cell as narrow as its number would break its error a word per line. */
    .ssmt-sim-groups .fi-fo-field-wrp-error-message {
        min-width: 9rem;
    }
}

/* The simulator's result sits in whatever the fields leave, down to 20rem:
   at that width the four columns of lines only fit on tighter cells. */
.ssmt-sim .ssmt-quote__table th,
.ssmt-sim .ssmt-quote__table td {
    padding-inline: 0.5rem;
}

/*
 * The AI prices on the price list (#1391): a text input centres its inline
 * label on the whole field, and these carry a cost line under the input, so
 * the label sank to the middle of input and line together. Back to the top,
 * level with the input's text (a 2.25rem input, a 1.25rem label). From 40rem,
 * where Filament puts the label inline.
 */
@media (min-width: 40rem) {
    .ssmt-ai-price > .fi-fo-field-label-col {
        align-items: start;
        padding-top: 0.5rem;
    }
}