/*
currency-service admin — global stylesheet injected on every admin page via
UNFOLD["STYLES"] (config/settings.py).

Unfold ships a *precompiled* Tailwind build, so arbitrary utility classes don't
exist; these cross-page tweaks target Unfold's compiled classes, its CSS
variables, or stable element ids. Most rules are scoped to `#changelist` so they
only touch list pages.

  1. Filter bar — label above its control, fixed width, search on its own row.
  2. Elevation  — a soft card shadow shared by the filter + table cards.
  3. Filter + table cards — detach the filter bar into its own block, separated
     from the results table (Unfold tucks it into the table top by default).
  4. Tables     — a faint row-hover tint for scan-ability.
*/

/* --- 1. Filter bar -------------------------------------------------------- */
/* Each filter renders 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 right-hand filter drawer (non-horizontal lists) at its natural
   width — the fixed widths above are for the top bar only. */
#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 --------------------------------------------------------- */
:root {
    --cs-shadow-card: 0 1px 2px rgb(17 17 40 / 0.04), 0 4px 16px rgb(17 17 40 / 0.05);
}

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

/* --- 3. Filter + table cards ---------------------------------------------- */
/* Unfold 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 */
    padding: 1rem !important; /* even padding */
    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(--cs-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(--cs-shadow-card);
}

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

/* Flatten Unfold's inner results wrapper (it carries its own rounded bottom +
   border, sized to tuck under the filter bar) so it doesn't show a seam between
   the table and the bottom pagination now that it lives in our own card. */
#changelist-form [data-simplebar] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- 4. Tables ------------------------------------------------------------ */
/* Unfold's changelist rows carry no hover state; a faint tint makes wide rows
   easier to follow. 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);
}