/*
 * Ani Alchemy page chrome, following Just Kuisinez (chrome.css):
 *  - one 56px band holds the page title and its actions; no top bar, no breadcrumb, no second title
 *  - a slim filter band, then a table with a tinted 40px header row of small uppercase labels
 *    and fixed-height rows with soft dividers and a hover tint.
 */
:root {
    --ani-header-h: 56px;
    --ani-th-h: 40px;
    --ani-row-h: 44px;
    --ani-card: #ffffff;
    --ani-main: var(--gray-50);
    --ani-border: var(--gray-200);
    --ani-border-soft: color-mix(in oklab, var(--gray-200) 70%, transparent);
    --ani-accent-pale: color-mix(in oklab, var(--primary-500) 7%, #ffffff);
    --ani-row-hover: color-mix(in oklab, var(--primary-500) 5%, transparent);
    --ani-row-alt: color-mix(in oklab, var(--gray-100) 55%, transparent);
    --ani-label: var(--gray-500);
}
.dark {
    --ani-card: var(--gray-900);
    --ani-main: var(--gray-950);
    --ani-border: rgb(255 255 255 / 0.1);
    --ani-border-soft: rgb(255 255 255 / 0.06);
    --ani-accent-pale: color-mix(in oklab, var(--primary-400) 10%, var(--gray-900));
    --ani-row-hover: color-mix(in oklab, var(--primary-400) 8%, transparent);
    --ani-row-alt: rgb(255 255 255 / 0.02);
    --ani-label: var(--gray-400);
}

/* ---------- the title band ---------- */
.fi-main-ctn { background: var(--ani-main); }
.fi-main { padding: 0 !important; }
.fi-page > .fi-page-header-main-ctn { padding-block: 0 !important; row-gap: 0 !important; }
.fi-page-main { gap: 0 !important; }
.fi-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--ani-header-h);
    margin: 0 !important;
    padding: 8px 20px !important;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
    background: var(--ani-card);
    border-bottom: 1px solid var(--ani-border);
}
.fi-header-heading {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-header-subheading { font-size: 0.8125rem !important; margin-top: 0 !important; }
.fi-header-actions-ctn { margin: 0 !important; flex-shrink: 0; }

/* Everything below the band keeps a 20px gutter, as the bands do. */
.fi-page-content { padding: 16px 20px 24px !important; row-gap: 16px !important; }

/* ---------- list tables ---------- */
.fi-ta-ctn {
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 1px solid var(--ani-border);
    overflow: hidden;
}
/* The filters are already visible above the table, so the "Active filters" strip only repeats them. */
.fi-ta-filters-above-content-ctn + .fi-ta-header-toolbar ~ .fi-ta-filter-indicators,
.fi-ta-ctn:has(.fi-ta-filters-above-content-ctn) .fi-ta-filter-indicators { display: none !important; }
.fi-ta-filters-above-content-ctn { padding: 10px 16px !important; background: var(--ani-main); border-bottom: 1px solid var(--ani-border-soft); }
.fi-ta-filters-above-content-ctn .fi-ta-filters-header { display: none !important; }
.fi-ta-header-toolbar { padding: 6px 16px !important; min-height: 48px; }

.fi-ta-table thead tr { background: var(--ani-accent-pale) !important; }
.fi-ta-header-cell {
    height: var(--ani-th-h);
    padding-block: 0 !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ani-label) !important;
    white-space: nowrap;
}
.fi-ta-header-cell * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.fi-ta-row { height: var(--ani-row-h); border-color: var(--ani-border-soft) !important; }
.fi-ta-row:nth-child(even) { background: var(--ani-row-alt); }
.fi-ta-row:hover { background: var(--ani-row-hover) !important; }
.fi-ta-cell { padding-block: 0 !important; font-variant-numeric: tabular-nums; vertical-align: middle; }
/* Filament pads every cell 16px top and bottom; a fixed 44px row centres its content instead. */
.fi-ta-cell .fi-ta-text:not(.fi-inline),
.fi-ta-cell .fi-ta-image:not(.fi-inline),
.fi-ta-cell .fi-ta-icon:not(.fi-inline),
.fi-ta-cell .fi-ta-color:not(.fi-inline) { padding-block: 4px !important; }
.fi-ta-cell .fi-ta-text { font-size: 0.875rem; }

/* Filter bar: no label row; each select says what it filters (labels stay for screen readers). */
.fi-ta-filters-above-content-ctn .fi-fo-field-label-col {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.fi-ta-filters-above-content-ctn .fi-fo-field { gap: 0 !important; }

/* ---------- header band: section trail, title, actions, signed-in user (Kuisinez) ---------- */
.fi-header > div:first-child { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ani-header-trail { font-size: 0.8125rem; color: var(--ani-label); white-space: nowrap; }
.fi-header-actions-ctn { display: flex; align-items: center; gap: 16px; }
.ani-header-user { display: flex; align-items: center; gap: 12px; padding-left: 16px; border-left: 1px solid var(--ani-border); }
.ani-header-user-text { display: grid; text-align: right; line-height: 1.2; }
.ani-header-user-name { font-size: 0.875rem; font-weight: 700; color: var(--gray-950); }
.dark .ani-header-user-name { color: var(--gray-50); }
.ani-header-user-role { font-size: 0.75rem; color: var(--ani-label); }
.ani-header-signout { font-size: 0.8125rem; padding: 4px 10px; border: 1px solid var(--ani-border); border-radius: 6px; background: var(--ani-card); }
.ani-header-signout:hover { border-color: var(--primary-500); color: var(--primary-600); }
@media (max-width: 640px) { .ani-header-user-text { display: none; } }

/* ---------- sidebar ---------- */
.fi-sidebar-group-label {
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-600) !important;
}
.dark .fi-sidebar-group-label { color: var(--primary-400) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--primary-600) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn * { color: #ffffff !important; }
/* The signed-in user lives in the header band; the sidebar ends with the maker's line. */
.fi-sidebar-footer .fi-user-menu { display: none !important; }
.ani-powered { font-size: 0.75rem; color: var(--ani-label); padding: 10px 16px; border-top: 1px solid var(--ani-border); }

/* ---------- one toolbar row: search, then the filters ---------- */
.fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ani-main);
    border-bottom: 1px solid var(--ani-border-soft);
}
.fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar {
    order: -1;
    padding: 0 !important;
    min-height: 0;
    border: 0 !important;
    background: transparent;
}
.fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-filters-above-content-ctn {
    flex: 1 1 520px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
}

/* ---------- pagination ---------- */
.fi-pagination { padding: 8px 16px !important; font-size: 0.8125rem; }

/* Rows per page follow the screen (fit-rows.js), so the size picker is not needed. */
.fi-pagination-records-per-page-select-ctn, .fi-pagination-records-per-page-select { display: none !important; }
.ani-rows-per-screen { color: var(--ani-label); }

/* Filters size to their content and wrap, instead of squeezing into equal columns. */
.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-sc,
.fi-ta-filters-above-content-ctn .fi-sc.fi-grid { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.fi-ta-filters-above-content-ctn .fi-grid-col { flex: 1 1 140px; max-width: 200px; }
.fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar .fi-ta-search-field { width: 220px; }
.fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-filters-above-content-ctn { flex-basis: 600px !important; }

/* ---------- "i" for explanations (info-tips.js) ---------- */
.ani-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 8px; vertical-align: middle;
    border: 1px solid var(--ani-border); border-radius: 50%;
    font: italic 700 11px/1 Georgia, serif; color: var(--ani-label); background: var(--ani-card);
    cursor: pointer;
}
.ani-info-btn:hover, .ani-info-btn:focus-visible { color: var(--primary-600); border-color: var(--primary-500); outline: none; }
.ani-info-tip {
    position: absolute; z-index: 60; max-width: 340px; padding: 10px 12px;
    font-size: 0.8125rem; line-height: 1.45; color: var(--gray-700);
    background: var(--ani-card); border: 1px solid var(--ani-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
}
.dark .ani-info-tip { color: var(--gray-200); }