/*
 * The price matrix as a table: durations down, customer groups across
 * (Sets, 06.08.2026 — "okumak da çok zor, ayırt etmek de çok zor").
 *
 * ⚠ Plain CSS served through `filament:assets`, NOT a Tailwind theme build —
 * the reason `permission-matrix.css` gives: the panel has no custom theme, and
 * referencing the Vite manifest from the provider crashed the application
 * wherever the front end was not built (build #765).
 *
 * ── What it fixes ─────────────────────────────────────────────────────────
 *
 * ⛔ The matrix was one titled block per duration, each repeating all four
 * group names. The group headings appeared five times over and reading down a
 * column meant counting positions. The layout IS the feature — the discount
 * ladder is read ACROSS — and a stack of blocks cannot be read across at all.
 *
 * ⚠ The first column is narrower and does not stretch: it holds a word, and a
 * duration column as wide as a money column pushes the numbers apart until the
 * ladder stops being one glance.
 */

/*
 * ⛔ The GRID INSIDE the marked wrapper, not the wrapper itself. Filament puts
 * extra attributes on the schema component's outer element and lays the columns
 * out on a `.fi-grid` within it — styling the outer one changed nothing at all,
 * and the numbers went on being equally spaced (measured in the browser,
 * 06.08.2026).
 */
.fi-price-row > .fi-grid {
    align-items: center;

    /*
     * ⚠ The track list itself is written by the page, which knows how many
     * groups there are. A named first column, because the row heading holds a
     * word and does not need a money field's worth of width.
     */
    /*
     * ⚠ The count comes from the page as `--price-columns`; a custom property
     * inherits, which is how it crosses from the wrapper Filament lets us mark
     * to the grid Filament owns.
     */
    grid-template-columns: minmax(7rem, 9rem) repeat(var(--price-columns, 4), minmax(0, 1fr));
    column-gap: 0.75rem;
    row-gap: 0;
}

.fi-price-head-row > .fi-grid {
    align-items: end;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 0.25rem;
}

:where(.dark) .fi-price-head-row > .fi-grid {
    border-bottom: 1px solid var(--gray-700);
}

.fi-price-head {
    display: block;
    font-weight: 600;
}

/*
 * ⚠ The percentage under the group's name, because that is the question a
 * reader arrives with: why is VIP not exactly minus twenty. It is small and
 * quiet — it explains the column, it is not a second heading.
 */
.fi-price-head-note {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-500);
}

/* ⚠ Zebra on the rows. The eye tracks a long row across four columns by the
 * band it is on, not by the numbers. `nth-of-type` counts siblings of the same
 * TAG, and the legend above the table is a sibling too — so the rows are
 * counted by class instead. */
.fi-price-striped > .fi-grid {
    background-color: color-mix(in oklab, var(--gray-500) 4%, transparent);
}

.fi-price-band {
    padding-block: 0.5rem;
}

/*
 * ⛔ A typed cell still looks different from a derived one, and losing that
 * would lose the rule the matrix exists to make readable (fiyatlama-spec
 * §2.2): without it nobody can see why VIP is not exactly minus twenty.
 *
 * ⚠ It used to be a sentence under every box — which is what pushed the
 * columns out of line. The state is now the FRAME, and one legend above the
 * table says what the two states mean.
 */
.fi-price-typed .fi-input-wrp {
    border-color: var(--gray-500);
    box-shadow: inset 0 0 0 1px var(--gray-500);
}

/* ⚠ The derived number is a suggestion, not a value: it reads as placeholder
 * text because that is exactly what it is. */
.fi-price-cell input::placeholder {
    opacity: 0.55;
}