/*
wardrobe-collector admin — one global stylesheet, injected on every admin page
via UNFOLD["STYLES"] (config/settings.py).

Unfold ships a *precompiled* Tailwind build, so arbitrary utility classes
("gap-x-2", "w-1.5", "h-[4.5rem]", …) silently don't exist. Cross-page tweaks
therefore live here as plain CSS that targets Unfold's compiled classes, its
CSS variables, or stable element ids. Most rules are scoped to `#changelist`
so they only touch list pages.

Theme tokens (accent ramp, 12px radius, Inter font) come from the UNFOLD dict,
not this file — see config/settings.py.

Sections:
  1. Filter bar — give every list page the Products page's top filter bar:
                  label above its control, fixed width, search on its own row.
  2. Elevation  — a softer, warmer card shadow than Tailwind's default.
  3. Tables     — a faint row-hover tint for scan-ability (Unfold has none).
*/

/* --- 1. Filter bar -------------------------------------------------------- */
/* The horizontal filter bar renders each filter inside a `.form-field`. Stack
   the label above its control and pin the width so a select2 dropdown doesn't
   resize when an option is picked. Scoped by `#changelist` so the id
   specificity wins over Unfold's `min-w-[260px]` on the bar. */
#changelist .form-field {
    width: 15rem;
    min-width: 15rem;
    max-width: 15rem;
}

#changelist .form-field > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
}

#changelist .form-field .select2-container {
    width: 100% !important;
}

/* Keep the side filter drawer (the User / Group / Token pages, or any list
   whose filters aren't horizontal) at its natural width — the fixed widths
   above are for the top bar only. Same specificity as the rule above, declared
   later, so it wins for fields inside the drawer. */
#changelist-filter .form-field {
    width: auto;
    min-width: 0;
    max-width: none;
}

/* Search box sits on its own row at the bottom of the filter bar. */
#changelist #toolbar {
    order: 99;
    flex-basis: 100%;
}

/* --- 2. Elevation --------------------------------------------------------- */
/* A softer, warm-tinted card shadow (mirrors wardrobe-admin's --shadow-card) in
   place of Tailwind's harder `shadow-xs`. Defined once here and reused by the
   dashboard cards / panels (via `.shadow-xs`) and the filter + table cards in
   section 4; the dark value is swapped through the same variable. */
:root {
    --wa-shadow-card: 0 1px 2px rgb(17 17 40 / 0.04), 0 4px 16px rgb(17 17 40 / 0.05);
}

.dark {
    --wa-shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 16px rgb(0 0 0 / 0.40);
}

.shadow-xs {
    box-shadow: var(--wa-shadow-card) !important;
}

/* --- 3. Tables ------------------------------------------------------------ */
/* Unfold's changelist rows carry no hover state; a faint violet-tint hover
   makes wide rows easier to follow across columns. Painted on the cells: the
   table uses `border-separate`, so a `tr` background wouldn't show. */
#result_list tbody tr.data-row:hover > td {
    background-color: #f5f4fe;
}

.dark #result_list tbody tr.data-row:hover > td {
    background-color: rgb(255 255 255 / 0.03);
}

/* --- 4. Filter & table cards ---------------------------------------------- */
/* wardrobe-admin separates the filters and the table into two distinct elevated
   cards. Unfold instead tucks its filter wrapper into the top of the table
   (top-rounded border + a negative bottom margin that pulls the table up).
   Detach them: the filter wrapper (the div immediately before #changelist-form)
   becomes its own card with a gap below, and the results form gets a matching
   frame. The `:has(+ #changelist-form)` hook is robust — only that one wrapper
   is an immediate previous sibling of the results form. */
#changelist div:has(+ #changelist-form) {
    margin-bottom: 1rem !important;        /* gap before the table (was lg:-mb-8) */
    padding: 1rem !important;              /* even padding (was lg:p-3 lg:pb-11) */
    border-width: 1px !important;          /* full border at every breakpoint */
    border-color: var(--color-base-200) !important;
    border-radius: var(--border-radius) !important;   /* all corners, not just top */
    background-color: #fff;
    box-shadow: var(--wa-shadow-card);
}

.dark #changelist div:has(+ #changelist-form) {
    border-color: var(--color-base-800) !important;
    background-color: var(--color-base-900);
}

#changelist-form {
    border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius);
    background-color: #fff;
    box-shadow: var(--wa-shadow-card);
}

.dark #changelist-form {
    border-color: var(--color-base-800);
    background-color: var(--color-base-900);
}

/* Unfold wraps the results table in its OWN bordered + rounded + shadowed card
   (sized to tuck under the filter bar, hence its rounded *bottom*). The table
   now lives inside our #changelist-form card alongside the pagination bars, so
   flatten that inner wrapper — otherwise its rounded bottom + a second border /
   shadow show up between the table and the bottom pagination bar (the
   "rounding in the wrong place"). The wrapper keeps its `data-simplebar`
   attribute even after SimpleBar restructures its children, so target that. */
#changelist-form [data-simplebar] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- 5. Numeric count columns --------------------------------------------- */
/* Right-align the aggregate count columns (and their headers) so digits line up
   for scanning. Values already render with `tabular-nums`. */
#result_list .field-store_count,
#result_list .field-product_count,
#result_list .field-category_count,
#result_list .field-parent_count {
    text-align: right;
}

/* Brands reads best as a name-led table. Keep the display name left-aligned,
   then center the identifier, count, and timestamp columns. */
.model-brand #result_list .column-slug,
.model-brand #result_list .column-store_count,
.model-brand #result_list .column-created_at,
.model-brand #result_list .field-slug,
.model-brand #result_list .field-store_count,
.model-brand #result_list .field-created_at {
    text-align: center;
}

.model-brand #result_list thead .column-slug > *,
.model-brand #result_list thead .column-store_count > *,
.model-brand #result_list thead .column-created_at > * {
    justify-content: center;
    text-align: center;
}

/* Brand stores is a compact health table. Keep the store label left-aligned,
   then center the small metric/status columns so the badges and counts scan in
   clean vertical lanes. */
.model-brandstore #result_list .column-currency_code,
.model-brandstore #result_list .column-product_count,
.model-brandstore #result_list .column-category_count,
.model-brandstore #result_list .column-latest_collector_badge,
.model-brandstore #result_list .column-latest_import_badge,
.model-brandstore #result_list .column-freshness_badge,
.model-brandstore #result_list .field-currency_code,
.model-brandstore #result_list .field-product_count,
.model-brandstore #result_list .field-category_count,
.model-brandstore #result_list .field-latest_collector_badge,
.model-brandstore #result_list .field-latest_import_badge,
.model-brandstore #result_list .field-freshness_badge {
    text-align: center;
}

.model-brandstore #result_list thead .column-currency_code > *,
.model-brandstore #result_list thead .column-product_count > *,
.model-brandstore #result_list thead .column-category_count > *,
.model-brandstore #result_list thead .column-latest_collector_badge > *,
.model-brandstore #result_list thead .column-latest_import_badge > *,
.model-brandstore #result_list thead .column-freshness_badge > * {
    justify-content: center;
    text-align: center;
}

/* --- 6. Pagination bar ---------------------------------------------------- */
/* The under-the-table pagination (admin/wardrobe/pagination_bar.html), styled
   like wardrobe-admin: rounded page buttons, a violet current page, prev/next
   chevrons, and a compact page-size <select>. */
.wa-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-base-600);
    background-color: var(--color-base-100);
    transition: background-color 0.15s, color 0.15s;
}

.wa-page-btn:hover {
    background-color: var(--color-base-200);
}

.wa-page-btn--current {
    background-color: var(--color-primary-600);
    color: #fff;
    font-weight: 600;
}

.wa-page-btn--current:hover {
    background-color: var(--color-primary-600);
}

.wa-page-btn--disabled {
    background-color: transparent;
    color: var(--color-base-400);
    opacity: 0.5;
    cursor: default;
}

.wa-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2rem;
    color: var(--color-base-400);
}

.dark .wa-page-btn {
    color: var(--color-base-300);
    background-color: var(--color-base-800);
}

.dark .wa-page-btn:hover {
    background-color: var(--color-base-700);
}

.dark .wa-page-btn--current,
.dark .wa-page-btn--current:hover {
    background-color: var(--color-primary-600);
    color: #fff;
}

.dark .wa-page-btn--disabled {
    background-color: transparent;
}

/* Page-size dropdown — a real <select> (native chevron) framed to match. */
.wa-page-size {
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius);
    background-color: #fff;
    color: var(--color-base-700);
    font-size: 0.875rem;
    cursor: pointer;
}

.dark .wa-page-size {
    border-color: var(--color-base-700);
    background-color: var(--color-base-900);
    color: var(--color-base-200);
}

/* Bar spacing. Unfold's precompiled Tailwind ships no `gap-x-*` / `gap-y-2`
   utilities, so the row/column gaps are set here. The wide column gap on the
   controls group puts clear air between the Per-page picker and the page links. */
.wa-pagebar {
    gap: 0.75rem 1.5rem;
}

.wa-pagebar-controls {
    gap: 0.5rem 1.25rem;
}

/* --- 7. Category tree ----------------------------------------------------- */
/* The collapsible brand-store-category tree (admin/wardrobe/brandstorecategory):
   a chevron toggles each branch (rotated right when collapsed), leaves get a
   matching-width spacer so names line up, and Collapse-all / Expand-all sit in
   the top bar. Wired up by that page's change_list JS over the indented rows. */
.wa-tree-toggle {
    font-size: 18px;
    line-height: 1;
    color: var(--color-base-400);
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
}

.wa-tree-toggle:hover {
    color: var(--color-primary-600);
}

.wa-tree-toggle.is-collapsed {
    transform: rotate(-90deg);
}

.wa-tree-spacer {
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
}

/* The name cell stacks the category name over its brand id (the old standalone
   "Ext. ID" column, folded in here as a muted second line). */
.wa-tree-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
}

.wa-tree-extid {
    margin-top: 1px;
    font-size: 0.6875rem;
    color: var(--color-base-400);
}

.wa-tree-allbtn {
    font-size: 20px;
    line-height: 1;
    padding: 0.25rem;
    border-radius: var(--border-radius);
    color: var(--color-base-500);
    cursor: pointer;
}

.wa-tree-allbtn:hover {
    background-color: var(--color-base-100);
    color: var(--color-primary-600);
}

.dark .wa-tree-allbtn:hover {
    background-color: var(--color-base-800);
}

/* --- 8. Sidebar navigation ------------------------------------------------ */
/* The first nav group ("Dashboard") has no section header — its group title was
   dropped so the sidebar doesn't read "Dashboard" twice — so its item sat flush
   under the search box, a tighter gap than the air above the next group's
   "Tasks" header. Give the headerless group a little top margin so the space
   above "Dashboard" matches the space above "Tasks". Targeted by its stable
   "no <h2>" shape rather than position: Unfold renders a group header only when
   the group has a title, and the nav sits inside a SimpleBar wrapper that makes
   positional selectors brittle (`:has()` is already used in section 4). */
#nav-sidebar-apps div.mb-1\.5:not(:has(> h2)) {
    margin-top: 0.3rem;
}