/*
 * Structural admin CSS — the parts of the panel layout that are the same
 * whichever theme is active.
 *
 * Themes live in css/themes/*.css and own colour, type and shape. Anything that
 * would have to be copied into all five of them belongs here instead: five
 * copies of one rule is five chances for four of them to fall behind.
 *
 * Loaded by AppServiceProvider immediately before the active theme, so a theme
 * can still override anything here.
 */

/* --------------------------------------------------------------------------
 * "Per page", moved from under the table into the table's own toolbar.
 *
 * It used to sit in the footer beside "Showing 1 result", which is below the
 * last row — so on a full page an admin had to scroll past everything to change
 * how much they were looking at. It now sits at the start of the toolbar, in
 * the same row as search and the filter buttons: one row that holds every
 * control over what the table shows.
 *
 * The toolbar is `justify-content: space-between`, so being the first child is
 * what puts this on the left. The footer control is hidden rather than removed
 * — it is Filament's own markup, and hiding it keeps the relocation to CSS plus
 * one render hook, with nothing patched in vendor.
 * -------------------------------------------------------------------------- */

.fi-ta-records-per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.fi-ta-records-per-page-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-500);
}

/* The select sizes to its content — "10" in a full-width field would eat the
   whole left half of the toolbar. */
.fi-ta-records-per-page .fi-input-wrp {
    width: auto;
}

.fi-ta-records-per-page select {
    padding-inline-end: 2rem;
}

/* Filament's own copy, at the bottom. One control in two places is two controls
   as far as anyone reading the screen is concerned. */
.fi-pagination-records-per-page-select-ctn {
    display: none;
}

/* --------------------------------------------------------------------------
 * The Nawy import card on the dashboard.
 *
 * Plain CSS rather than Tailwind utilities in the Blade file. The panel is
 * served by Filament's own compiled stylesheet, which contains only the classes
 * Filament's own views use — there is no theme build here scanning app views,
 * so a `flex gap-4` written in a widget silently does nothing. That is exactly
 * how this card first shipped: every element stacked, the button adrift under
 * the text.
 *
 * Colours come from the theme's variables, so the card follows whichever theme
 * is active instead of pinning its own greys.
 * -------------------------------------------------------------------------- */

.nawy-import-card__row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Side by side once there is room for the text to stay readable. */
@media (min-width: 40rem) {
    .nawy-import-card__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.nawy-import-card__text {
    min-width: 0;
}

.nawy-import-card__heading {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--gray-950);
}

.nawy-import-card__body {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--gray-500);
    max-width: 65ch;
}

.nawy-import-card__status {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.nawy-import-card__status--busy {
    font-weight: 500;
    color: var(--warning-600);
}

.nawy-import-card__status--failed {
    font-weight: 500;
    color: var(--danger-600);
}

/* The button must not be squeezed by a long description beside it. */
.nawy-import-card__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
}

:where(.fi-theme-dark) .nawy-import-card__heading {
    color: var(--gray-50);
}

:where(.fi-theme-dark) .nawy-import-card__body,
:where(.fi-theme-dark) .nawy-import-card__status {
    color: var(--gray-400);
}

/* The import run log: one line per compound, and the lines have to survive.
   HTML collapses newlines, which turned a readable list of "+ created / ·
   unchanged / ! failed" into a single paragraph. `pre-wrap` rather than `pre`
   so a long error message folds instead of scrolling the panel sideways. */
pre.import-log {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray-700);
}

:where(.fi-theme-dark) pre.import-log {
    color: var(--gray-300);
}