/* Blindex admin layout - HAND WRITTEN.
 *
 * Deliberately separate from blx-utilities.css, which is emitted whole by
 * scripts/generate-utility-css.php and would erase anything added here. Rules
 * in this file are written by a person and stay.
 *
 * A NOTE ON WHAT IS NOT HERE.
 *
 * This file used to carry `.fi-main.fi-width-7xl:has(.fi-ta) { max-width: none }`
 * to give tables the whole laptop while leaving forms capped. The reasoning was
 * that a page holding a table is a page that wants the width. It was wrong:
 * relation managers render tables, and Filament renders relation managers on
 * EDIT pages as well as View pages, so the selector matched twenty-three
 * resources' edit forms and stretched a two-column form to about 750px per text
 * input on a 1920 screen - precisely the thing the cap exists to prevent, and
 * precisely what that rule's own comment claimed it was avoiding.
 *
 * A selector standing in for an intention keeps finding new ways to be wrong.
 * The intention now lives on the pages that hold it:
 * app/Filament/Concerns/FullWidthListPage.php overrides getMaxContentWidth() on
 * all 102 list pages, so "tables are full width, forms are not" is true by
 * construction rather than by proxy.
 *
 * The file is kept because the separation it establishes is still wanted, and
 * the next hand-written layout rule has somewhere to go that a regeneration
 * cannot erase.
 */

/* THE ROW MENU IS ALWAYS IN REACH (UI standard, 28 Sep 2026).
 *
 * Every row's actions live in one ⋮ menu in the last cell. When a list is
 * wider than the iPad (1180px landscape with the sidebar open leaves about
 * 890px), that last cell was the first thing pushed off the right edge, so
 * the only way to act on a row was to scroll the table sideways first. The
 * cell holding the menu is pinned to the right edge instead, over a white
 * ground with a soft edge, so the ⋮ is always visible whatever the width. */
.fi-ta-table td.fi-ta-cell:has(.fi-ta-actions) {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -8px 0 8px -8px rgba(17, 24, 39, 0.18);
}
.fi-ta-table tr:hover td.fi-ta-cell:has(.fi-ta-actions) {
    background: rgb(249 250 251);
}
/* THE PINNED CELL IS NO WIDER THAN THE MENU IT HOLDS.
 *
 * Measured 6 Oct 2026 (snapshot run 15): on an upright iPad the Customers
 * table ran 98px under the pinned cell and the last column read "34 :".
 * The cell carried Filament's full cell padding either side of a 44px
 * button, so the pin covered twice what it needed to. Padding is trimmed to
 * the touch size; what is still covered scrolls into view, as before. */
.fi-ta-table td.fi-ta-cell:has(.fi-ta-actions) {
    padding-inline: 0.25rem;
}
.fi-ta-table td.fi-ta-cell:has(.fi-ta-actions) .fi-ta-actions {
    justify-content: center;
}

/* AN OPEN ROW MENU IS ON TOP OF ITS TABLE, ON EVERY BROWSER.
 *
 * The owner, 30 Sep and again 4 Oct 2026: the three dots open a menu that
 * "hides behind the list". Two things were doing it, and the first fix only
 * worked on a desktop browser.
 *
 * 1. Each row's menu cell is pinned to the right edge (above), and a pinned
 *    cell is its own layer. The menu lives inside its row's cell, so the
 *    pinned cells of the rows BELOW it, drawn later, were drawn over it. The
 *    cell whose menu is open is lifted above the others.
 *
 * 2. A table clips what spills out of it, so a menu on the last row was cut
 *    off at the table's edge. While a menu is open the table stops clipping.
 *
 * Both rules ask "is a menu open?" of the button's own aria-expanded, which
 * Filament keeps true while its menu is showing. The first fix asked it of
 * the menu's inline style (not "display: none"), and Safari does not re-read
 * a rule written against an inline style when a script changes that style -
 * so on the iPad the rule never switched on. */
.fi-ta-table td.fi-ta-cell:has(.fi-dropdown-trigger [aria-expanded="true"]) {
    z-index: 30;
}
.fi-ta-ctn:has(.fi-ta-content-ctn .fi-dropdown-trigger [aria-expanded="true"]),
.fi-ta-content-ctn:has(.fi-dropdown-trigger [aria-expanded="true"]) {
    overflow: visible;
}
/* A list drawn as cards has no pinned cell, but a card is still a layer. */
.fi-ta-record:has(.fi-dropdown-trigger [aria-expanded="true"]) {
    position: relative;
    z-index: 30;
}
.fi-ta-content-ctn .fi-dropdown-panel { z-index: 40; }

/* The three dots are a thing a finger presses. */
@media (any-pointer: coarse) {
    .fi-ta-actions .fi-dropdown-trigger .fi-icon-btn {
        min-width: var(--blx-touch, 2.75rem);
        min-height: var(--blx-touch, 2.75rem);
    }
}


/* A SMALL BUTTON IS STILL 44px TO A FINGER.
 *
 * Measured at iPad size on 4 Oct 2026: switches are 31px tall, the small icon
 * buttons on a repeater row 32px, a section's fold button 36px, a column's
 * sort button 20px. Making each of them bigger would redraw every form. The
 * button keeps its look and gets an invisible area around it that is the
 * touch size, so a finger that lands near it lands on it.
 *
 * :where() keeps this rule weaker than anything that already positions one
 * of these buttons, so nothing that is placed absolutely is moved. */
@media (any-pointer: coarse) {
    :where(.fi-main, .fi-modal) :where(
        .fi-icon-btn.fi-size-sm,
        .fi-icon-btn.fi-size-md,
        .fi-btn.fi-size-sm,
        .fi-fo-toggle,
        .fi-ta-header-cell-sort-btn,
        .fi-fo-rich-editor-tool,
        .fi-badge-delete-btn,
        .fi-select-input-value-remove-btn
    ) { position: relative; }

    :where(.fi-main, .fi-modal) :where(
        .fi-icon-btn.fi-size-sm,
        .fi-icon-btn.fi-size-md,
        .fi-btn.fi-size-sm,
        .fi-fo-toggle,
        .fi-ta-header-cell-sort-btn,
        .fi-fo-rich-editor-tool,
        .fi-badge-delete-btn,
        .fi-select-input-value-remove-btn
    )::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: max(100%, var(--blx-touch, 2.75rem));
        height: max(100%, var(--blx-touch, 2.75rem));
        transform: translate(-50%, -50%);
    }

    /* The "?" beside a field is a thing a finger taps to read (6 Oct 2026,
       U12): a 20px icon with a tooltip is missed by most taps. The icon
       keeps its size and gets the touch area; tippy shows on tap. */
    :where(.fi-main, .fi-modal) svg.fi-sc-icon[x-tooltip] { position: relative; overflow: visible; }
    :where(.fi-main, .fi-modal) svg.fi-sc-icon[x-tooltip] { padding: 0.75rem; margin: -0.75rem; box-sizing: content-box; }

    /* A table's own toolbar buttons (Export, the pay-run menu) are pressed too. */
    .fi-ta-header-toolbar .fi-btn,
    .fi-ta-header .fi-btn { min-height: var(--blx-touch, 2.75rem); }
}