/* Display-only fields (POS Site Id / POS Key, Directory User Id) carry the explicit "readonly-field"
   class. MudBlazor gives a read-only MudTextField no distinct styling AND adds no .mud-readonly class
   to plain text inputs (only selects/checkboxes/switches get it) — and its readonly markup also covers
   interactive selects/date-pickers — so we opt fields in by name rather than target [readonly] globally.
   The lock sits at the START so it never clashes with the end-adornment copy button; text stays
   selectable so the value can still be copied. .readonly-field is on the .mud-input-control root. */
.readonly-field .mud-input {
    background-color: rgba(128, 128, 128, .07);
}

.readonly-field input,
.readonly-field textarea {
    color: var(--mud-palette-text-secondary);
    cursor: text;
    padding-left: 1.6rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.3rem center;
    background-size: 1rem;
}

/* ---------------------------------------------------------------------------
   .wide-grid — the standard admin list grid. MudBlazor already scrolls
   .mud-table-container horizontally, but on a 170-row table that scrollbar sits
   below the last row, hundreds of pixels off-screen: the columns look truncated
   rather than scrollable. This class caps the table at the viewport so it owns
   BOTH scrollbars and keeps them in view, and pins the two columns you always
   want on screen — the first (which says which row you are on) and the last (the
   row actions). Add it with FixedHeader="true" so the header row stays too.

   The cap is a MAX-height, not a height: a three-row grid still shrinks to its
   content instead of sitting in a tall empty box, and a page whose header grows
   (Site status sprouts a pending-enrolments panel) degrades to a little window
   scrolling rather than a broken layout. --grid-offset is everything above and
   below the table — app bar, page header, footer, pager. The 265px default is
   measured for the common admin page (title + search row, then a row of filter
   checkboxes): it is what leaves the window itself with nothing to scroll. Pages
   that match it say nothing; the rest set it inline, e.g. Users has no filter row
   (165) and Site status carries an extra chip row (275). Re-measure if the
   furniture above a grid changes. The 300px floor is for short windows (a phone
   on its side): without it the cap left Users showing its header row and nothing else.

   A pinned cell has to be OPAQUE or the scrolled columns show through it, and
   MudBlazor's own stripe and hover colours are deliberately translucent
   (rgba(0,0,0,.02) / .04) — inheriting them is not enough. So each pinned cell
   gets the opaque surface as its background-COLOR and the translucent row tint
   as a background-IMAGE on top, which composites to exactly the row's colour.
   --------------------------------------------------------------------------- */
.wide-grid .mud-table-container {
    max-height: max(calc(100vh - var(--grid-offset, 265px)), 300px);
    overflow-y: auto;
}

.wide-grid th:first-child,
.wide-grid td:first-child,
.wide-grid th:last-child,
.wide-grid td:last-child {
    position: sticky;
    z-index: 2;
}

.wide-grid tbody td:first-child,
.wide-grid tbody td:last-child {
    background-color: var(--mud-palette-surface);
}

.wide-grid tbody tr:nth-of-type(2n+1) td:first-child,
.wide-grid tbody tr:nth-of-type(2n+1) td:last-child {
    background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped));
}

.wide-grid tbody tr:hover td:first-child,
.wide-grid tbody tr:hover td:last-child {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

.wide-grid th:first-child,
.wide-grid td:first-child {
    left: 0;
    border-right: 1px solid var(--mud-palette-divider);
}

.wide-grid th:last-child,
.wide-grid td:last-child {
    right: 0;
    border-left: 1px solid var(--mud-palette-divider);
}

/* The header cells are sticky on BOTH axes (FixedHeader pins them to the top),
   so they need their own opaque background. The two pinned ones must also out-rank
   their neighbours, and FixedHeader's own rule already puts z-index 2 on every
   header cell at a specificity a plain `.wide-grid thead th` can't beat — with the
   z-index tied, DOM order wins and "Email" paints over "Username". Hence the long
   selector: it exists only to outweigh that rule. */
.wide-grid thead th {
    background: var(--mud-palette-surface);
}

.wide-grid .mud-table-container .mud-table-root .mud-table-head th:first-child,
.wide-grid .mud-table-container .mud-table-root .mud-table-head th:last-child {
    z-index: 3;
}

/* Below 600px (MudTable's default Breakpoint.Xs) each row is stacked into a card, so
   there are no columns to pin, and a capped box would be a scroller inside the page
   scroller: let the cards flow with the page. Their values must wrap too — a site id,
   an inline white-space:nowrap cell (hence !important) or the user-agent ellipsis
   otherwise widens every card past the screen and cuts off the values on the right. */
@media (max-width: 599.98px) {
    .wide-grid .mud-table-container {
        max-height: none;
    }

    .wide-grid td:first-child,
    .wide-grid td:last-child {
        position: static;
        border-left: 0;
        border-right: 0;
    }

    .wide-grid table {
        table-layout: fixed;
    }

    .wide-grid td {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .wide-grid td > * {
        min-width: 0;
    }

    /* The row actions are the card's last line: small icons packed together are a
       fiddly touch target (and Delete sits next to Edit), so give each one room. */
    .wide-grid td:last-child .mud-icon-button {
        padding: 10px;
    }

    /* The page header row (title, search, button): on a phone the search gets a line of
       its own under the title and button, instead of squeezing them — titles wrapped and
       "Refresh" was clipped. Any dropdowns follow the search. First child only, so the
       filter rows below are untouched. */
    .mud-main-content > .d-flex:first-child {
        flex-wrap: wrap;
    }

    .mud-main-content > .d-flex:first-child > .mud-input-control {
        order: 1;
        flex-basis: 100%;
    }

    .mud-main-content > .d-flex:first-child > .mud-select {
        order: 2;
    }

    .mud-main-content > .d-flex:first-child > .mud-button-root {
        margin-left: auto;
    }
}