/*
 * Project-wide UI skin — modals (<x-modal>) and form controls (<x-input>, <x-select>,
 * <x-textarea>, <x-input-nepali>, plain <select>/<textarea>, checkboxes, toggles, buttons).
 *
 * Loaded LAST in the admin / app / customer / customer-webview layouts (after custom.css and
 * select2-skin.css). custom.css forces `height: 28px; font-size: 10px; border-radius: 3px`
 * with !important on every .input / select / textarea, and its `select:not(#id, #id)` rule
 * carries id-level specificity — the rules that must beat it re-use the same :not(#ndp-…)
 * list. !important is used only where custom.css already uses it.
 *
 * Layers:
 *   1. Everywhere   — radius, border, hover/focus ring, disabled/readonly/error states.
 *                     Height and font size keep custom.css's dense values, so tables and
 *                     entry grids do not change size.
 *   2. Comfortable  — inside a modal box, any page <form> (<x-form> or plain), or a `ui-comfy`
 *                     wrapper: taller controls,
 *                     readable font, nicer labels/hints. Controls inside a <table>,
 *                     under `ui-dense`, or on the dense entry screens (receipt / account entry)
 *                     stay dense even there.
 *   3. Modal chrome — backdrop, box, header, close button, footer, open animation.
 *   4. Tables       — MaryUI <x-table> (and opt-in `table.ui-table`): glow frame, sticky light indigo (bottom→top)
 *                     header, zebra + hover tint, tinted action chips, pagination.
 *   5. Page header  — <x-header> toolbar: search box + Add/other buttons, same size and
 *                     focus ring as the comfortable form controls.
 *   6. Per Page     — <x-pagination-filter> (select2) label + select, same size as the header toolbar.
 *   7. Report tables — hand-built <table>s with <thead class="… bg-gray-50|bg-gray-100 …">:
 *                     light indigo (bottom→top) header, opaque zebra/hover, tinted totals row. Screen only.
 *   8-9. Spacing / <x-header> title + toolbar gaps.
 *   10. Per Page position — <x-pagination-filter position="bottom|top"> (default bottom: tab under
 *                     the table in its pagination row; top: tab on the table's top-right).
 *   11. Tabs (Mary <x-tabs>) + <x-table-skeleton>.   13. select2 in dark mode.
 *   14. Floating (sticky) table header state, driven by public/assets/js/sticky-table-head.js.
 *   15. Breathing space: fieldsets (pages + modals) as soft cards, pill legends, spacing between stacked
 *                     fields; modal default width; display-only .input boxes grow with their text.
 *   16. Checkbox / radio / toggle / Mary radio button group in the brand green.
 *   17. <x-alpine-pagination> (Alpine-fed reports) in the same look as the Mary pagination.
 *   18. Close / Cancel buttons without an icon get an ✕ (tagged `.ui-btn-x` by assets/js/ui-close-icon.js).
 *   19. select2 soft click — eased focus/open ring, corners kept round while open, list fades/slides in.
 *   20. Tinted ghost action buttons in every table (colours only; Mary tables keep §4).
 *
 * Theming: the accent is the app brand green (--ui-brand-*, emerald like the nav bar);
 * surfaces/text/borders are daisyUI theme variables (--b1, --b2, --bc, --er), so light,
 * dark, retro, aqua … restyle themselves. Only the modal shadow/backdrop have a dark override.
 * Background colours of controls are never set globally, so page-level bg-* utilities
 * (highlighted / read-only fields) keep working.
 *
 * To switch the skin off everywhere, remove the <link> to this file from the layouts.
 */

/* ---------- tokens ---------- */
:root {
    /* brand = the app green (nav bar is emerald-600); a step lighter, emerald-500, for surfaces */
    --ui-brand-rgb: 16 185 129;        /* emerald-500 */
    --ui-brand-strong-rgb: 5 150 105;  /* emerald-600 */
    --ui-brand-alt-rgb: 20 184 166;    /* teal-500 */
    --ui-brand-ink: rgb(4 120 87);     /* emerald-700: brand text on a light tint */
    --ui-on-brand: #fff;

    /* tables (Mary <x-table> + report tables): one accent (the app emerald) on neutral slate.
       Emerald only where it means something: action chips, current page, sort arrow, hover bar. */
    --ui-table-strong-rgb: 16 185 129; /* emerald-500 */
    --ui-table-rgb: 16 185 129;
    --ui-table-alt-rgb: 16 185 129;
    --ui-table-ink: rgb(4 120 87);     /* emerald-700: table text on a light tint */
    /* table header: light slate, dark slate labels, a soft grey line under it (no coloured border),
       column lines, no gradient (opaque for sticky headers) */
    --ui-thead-bg: rgb(241 245 249);   /* slate-100 */
    --ui-thead-ink: rgb(51 65 85);     /* slate-700 */
    --ui-thead-line: rgb(203 213 225 / .8);                     /* column lines in the header */
    --ui-thead-rule: rgb(203 213 225); /* slate-300 line under the header */
    --ui-thead-sheen: transparent;
    /* list card + rows: neutral greys; emerald only as the accent (hover bar, buttons, current page) */
    --ui-card-line: rgb(226 232 240);  /* slate-200 card border */
    --ui-row-line: rgb(237 240 244);   /* row + column grid lines */
    --ui-row-zebra: transparent;
    --ui-row-hover: rgb(241 245 249);  /* slate-100 */
    --ui-row-accent: rgb(16 185 129);  /* emerald bar on the hovered row */
    --ui-card-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 4px 12px -6px rgb(15 23 42 / .08);

    --ui-accent: rgb(var(--ui-brand-rgb));
    --ui-accent-ring: rgb(var(--ui-brand-rgb) / .18);
    --ui-danger: oklch(var(--er));
    --ui-danger-ring: oklch(var(--er) / .15);

    --ui-surface: oklch(var(--b1));
    --ui-surface-2: oklch(var(--b2));
    --ui-border: oklch(var(--bc) / .18);
    --ui-border-hover: oklch(var(--bc) / .32);
    --ui-divider: oklch(var(--bc) / .09);
    --ui-text: oklch(var(--bc));
    --ui-label: oklch(var(--bc) / .82);
    --ui-muted: oklch(var(--bc) / .6);
    --ui-placeholder: rgb(100 116 139);   /* slate-500: readable, still clearly a hint */

    --ui-radius: .5rem;
    --ui-radius-lg: 1rem;
    --ui-modal-shadow: 0 30px 60px -15px rgb(15 23 42 / .35), 0 0 0 1px rgb(15 23 42 / .06);
    --ui-backdrop: rgb(15 23 42 / .45);
}

html.dark,
html[data-theme="dark"] {
    --ui-table-ink: rgb(110 231 183);  /* emerald-300 */
    --ui-placeholder: rgb(148 163 184);   /* slate-400 on dark */
    --ui-thead-bg: color-mix(in oklab, var(--ui-surface) 90%, white);  /* solid, a step lighter than the card */
    --ui-thead-ink: rgb(226 232 240);  /* slate-200 */
    --ui-thead-line: rgb(255 255 255 / .08);
    --ui-thead-rule: rgb(255 255 255 / .14);
    --ui-thead-sheen: transparent;
    --ui-card-line: rgb(255 255 255 / .08);
    --ui-row-line: rgb(255 255 255 / .06);
    --ui-row-zebra: transparent;
    --ui-row-hover: rgb(255 255 255 / .04);
    --ui-row-accent: rgb(52 211 153);  /* emerald-400 */
    --ui-card-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 28px -14px rgb(0 0 0 / .6);
    --ui-brand-ink: rgb(110 231 183);  /* emerald-300: readable on dark tints */
    --ui-modal-shadow: 0 30px 60px -15px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .07);
    --ui-backdrop: rgb(2 6 23 / .65);
}

/* ======================================================================
   1. FORM CONTROLS — everywhere (visuals only, density unchanged)
   ====================================================================== */

/* radius: must out-rank custom.css's `select:not(#id, #id)` + !important */
html body :is(.input, .textarea, textarea, .select, select:not(#ndp-month-select, #ndp-year-select)):not(.login-field-input, [x-ref="spotSearch"], .select2-hidden-accessible) {
    border-radius: 6px !important;
}
/* keep Mary's prefix/suffix inputs and join groups flush */
html body :is(.input, .select):is(.rounded-s-none, .join-item:not(:first-child)):not(#ndp-month-select, #ndp-year-select) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}
html body :is(.input, .select):is(.rounded-e-none, .join-item:not(:last-child)):not(#ndp-month-select, #ndp-year-select) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

/* border, depth, motion (no background/text colour here) */
html body :is(.input, .textarea, textarea, .select, select):not(.login-field-input, [x-ref="spotSearch"], .select2-hidden-accessible) {
    border-color: var(--ui-border);
    box-shadow: 0 1px 2px rgb(15 23 42 / .05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body :is(.input, .textarea, textarea, .select, select):not(.login-field-input, [x-ref="spotSearch"], .select2-hidden-accessible):hover:not(:focus, :disabled, [readonly]) {
    border-color: var(--ui-border-hover);
}
html body :is(.input, .textarea, textarea, .select, select):not(.login-field-input, [x-ref="spotSearch"], .select2-hidden-accessible):is(:focus, :focus-within) {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
    outline: none !important;
}

html body :is(.input, .textarea, textarea, .select, select):disabled {
    background-color: var(--ui-surface-2);
    color: var(--ui-muted);
    cursor: not-allowed;
    box-shadow: none;
}

html body :is(.input, .textarea, textarea)[readonly] {
    border-style: dashed;
}

/* error state (Mary adds .input-error / .select-error / .textarea-error) */
html body :is(.input-error, .select-error, .textarea-error):not(.select2-hidden-accessible) {
    border-color: var(--ui-danger);
}
html body :is(.input-error, .select-error, .textarea-error):not(.select2-hidden-accessible):is(:focus, :focus-within) {
    border-color: var(--ui-danger);
    box-shadow: 0 0 0 3px var(--ui-danger-ring);
}

/* placeholders: app.css gives .input-primary placeholder:font-thin (weight 100) - with a light colour
   that was nearly invisible. Normal weight + slate-500 on every input/textarea, and the select2
   "-- Select … --" placeholders get the same colour. */
html body :is(input, .input, .textarea, textarea)::placeholder {
    color: var(--ui-placeholder);
    font-weight: 400;
    opacity: 1;
}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder,
html body .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--ui-placeholder);
    font-weight: 400;
}

/* dark theme: app.css gives every .input-primary / .select-primary Tailwind's form-input
   (white background) and focus:text-gray-700, so in dark mode inputs were white boxes with
   light (near-invisible) text. Re-base them on the daisy surface + text colours. */
html:is(.dark, [data-theme="dark"]) body :is(.input, .select, .textarea, select, textarea):not(.login-field-input, .select2-hidden-accessible, #ndp-month-select, #ndp-year-select) {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
}
html:is(.dark, [data-theme="dark"]) body :is(.input, .select, .textarea, select, textarea):not(.login-field-input, .select2-hidden-accessible):is(:focus, :focus-within) {
    color: oklch(var(--bc));
}
html:is(.dark, [data-theme="dark"]) body :is(.input, .textarea, textarea):is([readonly], :disabled),
html:is(.dark, [data-theme="dark"]) body :is(.select, select):disabled {
    background-color: oklch(var(--b2));
    color: oklch(var(--bc) / .7);
}
html:is(.dark, [data-theme="dark"]) body :is(.input, .textarea, textarea, select):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px oklch(var(--b1)) inset;
    -webkit-text-fill-color: oklch(var(--bc));
}

/* Mary prefix / suffix blocks: match the new border */
html body .flex > .rounded-s-lg.border-primary,
html body .flex > .rounded-e-lg.border-primary {
    border-color: var(--ui-border) !important;
    color: var(--ui-muted);
}

/* checkbox / radio / toggle: softer border + keyboard focus ring */
html body :is(.checkbox, .radio) {
    border-color: var(--ui-border-hover);
}
html body .checkbox {
    border-radius: 5px;
}
html body :is(.checkbox, .radio, .toggle):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* buttons: depth on solid buttons, visible keyboard focus */
html body .btn {
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
html body .btn:is(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info):not(.btn-ghost, .btn-link, .btn-outline) {
    box-shadow: 0 1px 2px rgb(15 23 42 / .14), inset 0 1px 0 rgb(255 255 255 / .14);
}
html body .btn:is(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info):not(.btn-ghost, .btn-link, .btn-outline):hover {
    box-shadow: 0 6px 14px -4px rgb(15 23 42 / .28), inset 0 1px 0 rgb(255 255 255 / .14);
}
html body .btn:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

/* primary buttons in the brand green (app.css:886 sets .btn-primary to indigo-500 / hover indigo-600) */
html body .btn-primary:not(.btn-outline, .btn-ghost, .btn-link) {
    background-color: rgb(var(--ui-brand-rgb));
    border-color: rgb(var(--ui-brand-rgb));
    color: var(--ui-on-brand);
}
html body .btn-primary:not(.btn-outline, .btn-ghost, .btn-link):hover {
    background-color: rgb(var(--ui-brand-strong-rgb));
    border-color: rgb(var(--ui-brand-strong-rgb));
}
html body .btn-primary:not(.btn-outline, .btn-ghost, .btn-link):is(:disabled, .btn-disabled) {
    background-color: rgb(var(--ui-brand-rgb) / .45);
    border-color: transparent;
    color: var(--ui-on-brand);
}
html body .btn-primary:is(.btn-outline, .btn-ghost, .btn-link) {
    color: var(--ui-brand-ink);
    border-color: rgb(var(--ui-brand-rgb));
}
html body .btn-primary.btn-outline:hover {
    background-color: rgb(var(--ui-brand-rgb));
    color: var(--ui-on-brand);
}
/* Outline success / error / info buttons fill with their colour on hover; the theme's "-content"
   colour for some of them is near-black, which was unreadable on the green fill (e.g. the login
   page's "Navigate to Website"). White text on the filled state, icon included. */
html body .btn:is(.btn-success, .btn-error, .btn-info).btn-outline:is(:hover, :focus-visible, :active) {
    color: #ffffff !important;
}
html body .btn:is(.btn-success, .btn-error, .btn-info).btn-outline:is(:hover, :focus-visible, :active) svg {
    color: inherit;
}

:root {
    --ui-btn-danger-rgb: 225 29 72;           /* rose-600: the fill */
    --ui-btn-danger-strong-rgb: 190 18 60;    /* rose-700: hover */
}
html.dark,
html[data-theme="dark"] {
    --ui-btn-danger-rgb: 225 29 72;
    --ui-btn-danger-strong-rgb: 244 63 94;    /* rose-500: hover lightens on dark surfaces */
}
/* ---------- standard action buttons (Save / Close / Confirm / Delete) ----------
   primary = solid brand green, error = solid rose; both share the same shape, top highlight, soft glow
   and hover lift, so Close / Cancel / Delete read as clearly as Search / Save. */
html body .btn:is(.btn-primary, .btn-error):not(.btn-ghost, .btn-link, .btn-outline, .btn-circle, .btn-square) {
    border-radius: .6rem !important;
    padding-inline: 1.1rem;
    gap: .45rem;
    font-weight: 600;
    letter-spacing: .01em;
}
html body .btn.btn-primary:not(.btn-ghost, .btn-link, .btn-outline) {
    background-image: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0));
    box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 6px 14px -6px rgb(var(--ui-brand-rgb) / .7);
}
html body .btn.btn-primary:not(.btn-ghost, .btn-link, .btn-outline):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(15 23 42 / .12), 0 10px 20px -8px rgb(var(--ui-brand-rgb) / .8);
}
html body .btn.btn-error:not(.btn-ghost, .btn-link, .btn-outline) {
    background-color: rgb(var(--ui-btn-danger-rgb));
    background-image: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0));
    border: 1px solid rgb(var(--ui-btn-danger-rgb));
    color: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 6px 14px -6px rgb(var(--ui-btn-danger-rgb) / .7);
}
html body .btn.btn-error:not(.btn-ghost, .btn-link, .btn-outline):hover {
    background-color: rgb(var(--ui-btn-danger-strong-rgb));
    border-color: rgb(var(--ui-btn-danger-strong-rgb));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(15 23 42 / .12), 0 10px 20px -8px rgb(var(--ui-btn-danger-rgb) / .8);
}
html body .btn:is(.btn-primary, .btn-error):not(.btn-ghost, .btn-link, .btn-outline):active {
    transform: translateY(0) scale(.98);
}
html body .btn:is(.btn-primary, .btn-error) svg {
    width: 1.1rem;
    height: 1.1rem;
}
/* footer buttons (modal actions slot, <x-form> actions): one comfortable size */
html body :is(.modal-action, form > hr.my-3 + .flex.justify-end) > .btn:not(.btn-xs, .btn-circle, .btn-square) {
    height: 2.5rem;
    min-height: 2.5rem;
    min-width: 6.5rem;
    font-size: .875rem;
}

/* ---------- scrollbars: the project's tailwind-scrollbar look (scrollbar-thin + thumb-custom +
   track-custom-light) everywhere. WebKit/Blink via ::-webkit-scrollbar only, so any rule that hides
   or restyles a specific scrollbar (.x::-webkit-scrollbar, body's width:0) still wins on specificity;
   elements using the tailwind utilities keep theirs. Firefox gets scrollbar-width/color. ---------- */
:root {
    --ui-scroll-thumb: rgb(var(--ui-brand-rgb) / .6);
    --ui-scroll-thumb-hover: rgb(var(--ui-brand-rgb));
    --ui-scroll-track: rgb(209 250 229 / .55);   /* custom.light #D1FAE5 */
}
html.dark,
html[data-theme="dark"] {
    --ui-scroll-thumb: rgb(var(--ui-brand-rgb) / .5);
    --ui-scroll-track: rgb(255 255 255 / .04);
}
html body *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html body *::-webkit-scrollbar-track {
    background-color: var(--ui-scroll-track);
    border-radius: 9999px;
}
html body *::-webkit-scrollbar-thumb {
    background-color: var(--ui-scroll-thumb);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html body *::-webkit-scrollbar-thumb:hover {
    background-color: var(--ui-scroll-thumb-hover);
}
html body *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
html body *::-webkit-scrollbar-corner {
    background: transparent;
}
/* app.css (daisyUI) sets *:hover { scrollbar-color: … }. Any standard scrollbar-* value makes Chrome
   ignore ::-webkit-scrollbar, so a hovered scroller flipped to the native bar. Reset it (Firefox re-set below). */
html body *:hover {
    scrollbar-color: auto;
}
@supports (-moz-appearance: none) {
    html body *,
    html body *:hover {
        scrollbar-width: thin;
        scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track);
    }
}

/* ======================================================================
   2. COMFORTABLE FORMS — modals, page <form>s and opt-in `.ui-comfy` wrappers
      Opt out: add `ui-dense` to a wrapper (the dense entry screens below are already out).
   ====================================================================== */
html body :is(.modal-box, .ui-comfy, form) :is(.input, .select, select:not(#ndp-month-select, #ndp-year-select)):not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *):not(table *, .login-field-input, .select2-hidden-accessible, .join-item, .input-xs, .input-sm, .select-xs, .select-sm) {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    font-size: .875rem !important;
    border-radius: var(--ui-radius) !important;
}
html body :is(.modal-box, .ui-comfy, form) .input:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *):not(table *, .ps-10, .join-item) {
    padding-inline: .85rem;
}
html body :is(.modal-box, .ui-comfy, form) :is(.textarea, textarea:not(#ndp-month-select)):not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *):not(table *) {
    height: auto !important;
    min-height: 5rem;
    padding: .6rem .85rem;
    font-size: .875rem !important;
    line-height: 1.5;
    border-radius: var(--ui-radius) !important;
}

/* modals opened from a dense entry screen (account / receipt entry) stay comfortable */
html body :is(.receipt-entry-responsive, .account-entry-save, .addAccountEntryRows) .modal-box :is(.input, .select, select:not(#ndp-month-select, #ndp-year-select)):not(.ui-dense *, table *, .select2-hidden-accessible, .join-item, .input-xs, .input-sm, .select-xs, .select-sm) {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    font-size: .875rem !important;
    border-radius: var(--ui-radius) !important;
}

/* labels (Mary: label.label.label-text.font-semibold) */
html body :is(.modal-box, .ui-comfy, form) label.label.label-text:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *) {
    padding: 0 0 .35rem .1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-label);
}

/* hint + error lines under a control */
html body :is(.modal-box, .ui-comfy, form) .label-text-alt.text-gray-400:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *) {
    padding: .3rem .1rem 0 !important;
    font-size: .75rem;
    color: var(--ui-muted);
}
html body :is(.modal-box, .ui-comfy, form) .label-text-alt.text-red-500:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .top-header-main, .navigation-bar) *) {
    padding: .3rem .1rem 0 !important;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ui-danger);
}

/* ======================================================================
   3. MODAL (<x-modal> → dialog.modal > .modal-box)
   ====================================================================== */

/* backdrop: darker, slightly blurred */
html body :is(.modal-open, .modal[open], .modal:target, .modal-toggle:checked + .modal) {
    background-color: var(--ui-backdrop);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* box: rounded, layered shadow, thin accent strip on top (inset shadow, so it does not scroll) */
html body .modal-box {
    color: var(--ui-text);
    border-radius: var(--ui-radius-lg);
    box-shadow: inset 0 4px 0 var(--ui-accent), var(--ui-modal-shadow);
    padding: 1.5rem 1.75rem;
}

/* header (Mary's modal renders <x-header> with both mb-10 and mb-5) */
html body .modal-box > .mb-10.mb-5 {
    margin-bottom: 1.25rem !important;
    padding: .15rem 2.75rem .9rem 0;
    border-bottom: 1px solid var(--ui-divider);
}
html body .modal-box > .mb-10.mb-5 .font-extrabold {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}
html body .modal-box > .mb-10.mb-5 .text-gray-500 {
    color: var(--ui-muted);
}

/* close button (✕) */
/* app.css forces .btn { height/min-height: 2.15rem; border-radius: .25rem } with !important, which made
   this a 28 × 35 px rectangle - hence the !important here: a true 2rem rounded square, glyph centred. */
/* also the ✕ placed straight in the box (hand-built modals: app-data setup, setup-modal, report filters…) */
html body .modal-box > form[method="dialog"] > .btn-circle,
html body .modal-box > button.btn-circle.absolute {
    top: .85rem;
    right: .85rem;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border-radius: 9999px !important;          /* outlined circle */
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
    font-weight: 300 !important;               /* thin ✕ */
    color: var(--ui-close-ink) !important;
    background-color: transparent !important;
    border: 1.5px solid var(--ui-close-ink) !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
html body .modal-box > form[method="dialog"] > .btn-circle:hover,
html body .modal-box > button.btn-circle.absolute:hover {
    color: var(--ui-surface) !important;
    background-color: var(--ui-close-ink) !important;
    transform: rotate(90deg);
}
html body .modal-box > form[method="dialog"] > .btn-circle:focus-visible,
html body .modal-box > button.btn-circle.absolute:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring) !important;
}
/* Same circle for the hand-built Alpine modals (Division Details, billing-term, tariff, cash/bank...): their
   ✕ is <button class="text-gray-400 hover:text-gray-500"> + sr-only "Close" + a fill-current SVG in ~56 views.
   Matched on that exact class string so no other button changes. */
html body button[class="text-gray-400 hover:text-gray-500"] {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    flex: 0 0 auto;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-close-ink) !important;
    background-color: transparent;
    border: 1.5px solid var(--ui-close-ink);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
/* the SVG has no viewBox (path drawn in a 16 px box): keep 16 px or the ✕ is cropped, shrink with scale */
html body button[class="text-gray-400 hover:text-gray-500"] > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    transform: scale(.72);
}
html body button[class="text-gray-400 hover:text-gray-500"]:hover {
    color: var(--ui-surface) !important;
    background-color: var(--ui-close-ink);
    transform: rotate(90deg);
}
html body button[class="text-gray-400 hover:text-gray-500"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}
/* Footer buttons of the hand-built modals (Save / OK / Close in "flex flex-wrap justify-end space-x-2"
   > <div>, ~77 views): inline buttons sat on text baselines, so one with an icon stood higher than one
   without. One centred row with a gap instead. */
html body .flex.flex-wrap.justify-end.space-x-2 {
    align-items: center;
}
html body .flex.flex-wrap.justify-end.space-x-2 > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
/* ...and the primary button there without an icon (Save ×68, OK, Confirm, "Cancel bill" confirm) gets a
   check icon to pair with Close's ✕ - heroicons outline "check" (stroke 2.25 to match its weight), text colour. */
html body .flex.flex-wrap.justify-end.space-x-2 > div > .btn.btn-primary:not(:has(svg))::before {
    content: '';
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Button icon motion on hover, per icon (like the modal ✕). Mary renders heroicons as inline SVG without a
   name, so the icon is recognised by its path data - on the <path> itself, never with :has(): a hover rule
   with svg:has(...) made Chrome re-check the whole page's styles on every mouse move (~18 ms each on an
   entry page). Paths turn around their own centre (transform-box: fill-box). ✕ / + turn, ✓ pops,
   save-document hops, trash wiggles, pencil tilts, export drops, search leans, back nudges, print / view
   pulse; any other icon scales a little. The ✓ drawn by CSS on icon-less Save buttons pops too. */
html body .btn svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
html body .flex.flex-wrap.justify-end.space-x-2 > div > .btn.btn-primary::before {
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
html body .btn:not(:disabled):hover svg path { transform: scale(1.08); }
html body .btn:not(:disabled):hover svg path[d^="M6 18 18 6M6 6l12 12"],
html body .btn:not(:disabled):hover svg path[d^="M12 4.5v15m7.5-7.5h-15"] { transform: rotate(90deg); }
html body .btn:not(:disabled):hover svg path[d^="m4.5 12.75 6 6 9-13.5"],
html body .btn:not(:disabled):hover svg path[d^="M9 12.75 11.25 15 15 9.7"],
html body .flex.flex-wrap.justify-end.space-x-2 > div > .btn.btn-primary:hover::before { transform: scale(1.22); }
html body .btn:not(:disabled):hover svg path[d^="M19.5 14.25v-2.625a3.375"],
html body .btn:not(:disabled):hover svg path[d^="M10.125 2.25h-4.5c-.621"] { transform: translateY(-2px) scale(1.06); }
html body .btn:not(:disabled):hover svg path[d^="m14.74 9-.346 9m-4.788 0"] { animation: ui-btn-icon-wiggle .45s ease-in-out; }
html body .btn:not(:disabled):hover svg path[d^="m16.862 4.487 1.687-1.68"] { transform: rotate(-14deg) translateY(-1px); }
html body .btn:not(:disabled):hover svg path[d^="M3 16.5v2.25A2.25 2.25 0"] { transform: translateY(2px); }
html body .btn:not(:disabled):hover svg path[d^="m21 21-5.197-5.197m0 0A7"],
html body .btn:not(:disabled):hover svg path[d^="M10.5 3.75a6.75 6.75 0 1"] { transform: rotate(-12deg) scale(1.1); }
html body .btn:not(:disabled):hover svg path[d^="M10.5 19.5 3 12m0 0 7.5-"] { transform: translateX(-3px); }
html body .btn:not(:disabled):hover svg path[d^="M6.72 13.829c-.24.03-.48"],
html body .btn:not(:disabled):hover svg path[d^="M2.036 12.322a1.012 1.01"] { animation: ui-btn-icon-pulse .5s ease-in-out; }
@keyframes ui-btn-icon-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-6deg); }
}
@keyframes ui-btn-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    html body .btn svg path,
    html body .flex.flex-wrap.justify-end.space-x-2 > div > .btn.btn-primary::before { transition: none; animation: none !important; transform: none !important; }
}

/* Busy button (assets/js/button-busy.js), styled like Mary's own spinner: the button fades, the label stays
   readable and a ring (a real span - DaisyUI tooltips own ::before / ::after) takes the icon's place in the
   button's text colour. The ring is the last child (icon-only rules in custom.css look for it there) and is
   shown first with flex order; an icon-only button keeps its size. */
html body .btn.is-busy {
    pointer-events: none;
    cursor: progress;
    opacity: .6;
}
html body .btn.is-busy > .btn-busy-icon {
    display: none !important;
}
html body .btn.is-busy > .btn-busy-ring {
    order: -1;
    flex: none;
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 9999px;
    opacity: .9;
    animation: ui-btn-busy-spin .65s linear infinite;
}
@keyframes ui-btn-busy-spin { to { transform: rotate(360deg); } }
:root { --ui-close-ink: rgb(51 65 85); }                                   /* slate-700 */
html.dark, html[data-theme="dark"] { --ui-close-ink: rgb(203 213 225); }   /* slate-300 */

/* a card used only as a wrapper inside a modal: no second frame */
html body .modal-box > .card {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* dividers + footers (modal actions slot, <x-form> actions) */
html body .modal-box hr {
    border-color: var(--ui-divider);
}
html body .modal-box .modal-action {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-divider);
    gap: .6rem;
}
html body .modal-box form > hr.my-3 {
    margin: 1.25rem 0 .25rem;
}
html body .modal-box form > hr.my-3 + .flex.justify-end {
    gap: .6rem;
}

/* open animation */
@media (prefers-reduced-motion: no-preference) {
    html body :is(.modal-open, .modal[open], .modal:target) > .modal-box {
        animation: ui-modal-in .22s cubic-bezier(.2, .9, .3, 1.15);
    }
}
@keyframes ui-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ======================================================================
   4. TABLES — MaryUI <x-table> only (+ opt-in `ui-table` on any <table class="table">)
      Hook: Mary's container always carries x-classes="overflow-x-auto", whatever
      containerClass a page passes; fallback: Mary's <thead class="text-black …">.
      Plain report / print tables (<table class="table">, ~850 views) are NOT touched.
   ====================================================================== */

/* frame: clean white card, neutral border and soft shadow */
html body .ui-tbl-wrap {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-card-line);
    border-radius: 1rem;
    box-shadow: var(--ui-card-shadow);
}

/* column lines (spreadsheet grid): faint white lines between header cells, --ui-row-line between body cells */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > thead > tr > th:not(:last-child) {
    border-right: 1px solid var(--ui-thead-line) !important;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr > td:not(:last-child) {
    border-right: 1px solid var(--ui-row-line);
}

/* header row: solid navy, white labels (tokens --ui-thead-*); sticks when the container scrolls */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ui-thead-bg);
    color: var(--ui-thead-ink);
    box-shadow: inset 0 1px 0 var(--ui-thead-sheen), inset 0 -2px 0 var(--ui-thead-rule);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .005em;
    text-transform: none;
    white-space: nowrap;
    padding: .6rem .7rem;
    border: 0;
    transition: background-color .15s ease, box-shadow .15s ease;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > thead > tr > th.cursor-pointer:hover {
    box-shadow: inset 0 0 0 100vmax rgb(var(--ui-table-rgb) / .1), inset 0 -3px 0 var(--ui-thead-rule);
    color: var(--ui-thead-ink);
}
/* outer edges keep a little more inset than the inner columns */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > :is(thead, tbody) > tr > :is(th, td):first-child {
    padding-left: 1rem;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > :is(thead, tbody) > tr > :is(th, td):last-child {
    padding-right: 1rem;
}
/* sort arrow */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > thead > tr > th svg {
    color: currentColor;
    opacity: 1;
}

/* body cells */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr > td {
    padding: .4rem .7rem;
    font-size: .8125rem;
    color: var(--ui-text);
    vertical-align: middle;
    transition: background-color .15s ease, box-shadow .15s ease;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr > td.ui-td-link {
    padding: 0;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr {
    border-bottom: 1px solid var(--ui-row-line);
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr:last-child {
    border-bottom: 0;
}
/* faint lavender zebra, same purple as the header */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr:nth-child(even) > td {
    background-color: var(--ui-row-zebra);
}
/* row hover: soft indigo tint + accent bar on the left edge */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr:hover > td {
    background-color: var(--ui-row-hover);
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--ui-row-accent);
}

/* status pills: a cell whose whole text is Yes / No / Active / Inactive gets a small coloured pill
   (span.ui-pill added by ui-skin-markers.js, re-added after every Livewire / Alpine re-render) */
html body .ui-pill {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .01em;
    white-space: nowrap;
}
html body .ui-pill--active { background: rgb(16 185 129 / .12); color: rgb(4 120 87); }
html body .ui-pill--inactive { background: rgb(239 68 68 / .1); color: rgb(185 28 28); }
html body .ui-pill--yes { background: rgb(14 165 233 / .12); color: rgb(3 105 161); }
html body .ui-pill--no { background: rgb(100 116 139 / .12); color: rgb(71 85 105); }
html.dark body .ui-pill--active, html[data-theme="dark"] body .ui-pill--active { background: rgb(16 185 129 / .18); color: rgb(110 231 183); }
html.dark body .ui-pill--inactive, html[data-theme="dark"] body .ui-pill--inactive { background: rgb(239 68 68 / .18); color: rgb(252 165 165); }
html.dark body .ui-pill--yes, html[data-theme="dark"] body .ui-pill--yes { background: rgb(14 165 233 / .2); color: rgb(186 230 253); }
html.dark body .ui-pill--no, html[data-theme="dark"] body .ui-pill--no { background: rgb(148 163 184 / .16); color: rgb(203 213 225); }
@media print {
    html body .ui-pill { background: none !important; color: inherit !important; padding: 0; }
}

/* action buttons in cells (ghost edit / view / delete icons) → soft tinted chips.
   Solid coloured buttons (btn-primary, btn-error …) keep their own look. */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .flex.ui-td-actions {
    gap: .35rem;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .btn:not(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-link) {
    height: 1.75rem;
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding-inline: .45rem;
    border: 0;
    border-radius: .6rem !important;
    background-color: rgb(var(--ui-table-rgb) / .1);
    color: var(--ui-table-ink);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .btn:not(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-link):hover {
    background-color: rgb(var(--ui-table-rgb));
    color: var(--ui-on-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -4px rgb(var(--ui-table-rgb) / .55);
}
/* danger (text-red-*, text-rose-*, text-error) → red chip */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .btn:is([class*="text-red-"], [class*="text-rose-"], .text-error):not(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-link) {
    background-color: oklch(var(--er) / .1);
    color: oklch(var(--er));
}
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .btn:is([class*="text-red-"], [class*="text-rose-"], .text-error):not(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-link):hover {
    background-color: oklch(var(--er));
    /* white, not --erc: the light theme's error-content is near-black, which left a dark-red icon on the red chip */
    color: #fff;
    box-shadow: 0 6px 12px -4px oklch(var(--er) / .55);
}
/* the icon follows the chip's colour on hover (icons with their own text-* class kept their colour) */
html body :is(div[x-classes="overflow-x-auto"] > table.table, table.table.ui-tb-black, table.ui-table) > tbody td .btn:not(.btn-primary, .btn-secondary, .btn-accent, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-link):hover :is(svg, .mary-icon, i) {
    color: inherit !important;
}

/* expand toggle + empty state */
html body div[x-classes="overflow-x-auto"] > table.table td .bg-base-300.rounded-lg {
    background-color: var(--ui-surface-2);
}
html body div[x-classes="overflow-x-auto"] > table.table ~ div.text-center {
    color: var(--ui-muted);
    padding-block: 1.5rem;
}

/* pagination (Mary <x-pagination> → Laravel/Livewire tailwind links): separate rounded page chips,
   current page in the table indigo, soft hover, faded disabled arrows, plain ellipsis */
html body .mary-table-pagination {
    padding-top: .6rem;
}
html body .mary-table-pagination > div:first-child {
    border-color: transparent;
}
html body .mary-table-pagination nav p {
    font-size: .8125rem;
    color: var(--ui-muted);
}
html body .mary-table-pagination nav p .font-medium {
    font-weight: 600;
    color: var(--ui-table-ink);
}
/* the joined group → a row of chips */
html body .mary-table-pagination nav span.relative.z-0.inline-flex {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    box-shadow: none;
    border-radius: 0;
}
html body .mary-table-pagination nav :is(button, a, span[aria-disabled] > span, span[aria-current] > span, > div:first-child > :is(button, a, span)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    height: 2.15rem;
    margin: 0 !important;
    padding: 0 .6rem;
    border: 1px solid var(--ui-divider);
    border-radius: .6rem !important;
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html body .mary-table-pagination nav :is(button, a, > div:first-child > :is(button, a)) svg {
    width: 1rem;
    height: 1rem;
}
html body .mary-table-pagination nav :is(button, a, > div:first-child > :is(button, a)):hover {
    background-color: rgb(var(--ui-table-rgb) / .1);
    border-color: rgb(var(--ui-table-rgb) / .35);
    color: var(--ui-table-ink);
}
/* focus: an inset outline, not a ring. Mary's pagination row scrolls (overflow-y-auto), so anything
   drawn outside the chip - Livewire's focus:ring box-shadow, a hover lift - got clipped and ate the border. */
html body .mary-table-pagination nav :is(button, a, > div:first-child > :is(button, a)):focus:not(:hover, :focus-visible) {
    outline: none;
    box-shadow: none;
    border-color: var(--ui-divider);
}
html body .mary-table-pagination nav :is(button, a, > div:first-child > :is(button, a)):focus-visible {
    outline: 2px solid rgb(var(--ui-table-strong-rgb));
    outline-offset: -2px;
    box-shadow: none;
}
/* current page */
html body .mary-table-pagination nav span[aria-current] > span {
    background: rgb(var(--ui-table-strong-rgb));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px -4px rgb(var(--ui-table-strong-rgb) / .55);
}
/* disabled prev/next */
html body .mary-table-pagination nav span[aria-disabled] > span[aria-hidden],
html body .mary-table-pagination nav > div:first-child > span {
    opacity: .4;
    cursor: not-allowed;
}
/* "…" separator */
html body .mary-table-pagination nav span[aria-disabled]:not([aria-label]) > span:not([aria-hidden]) {
    border-color: transparent;
    background: transparent;
    color: var(--ui-muted);
    min-width: 1.25rem;
    padding: 0 .15rem;
}

/* ======================================================================
   5. PAGE HEADER TOOLBAR — <x-header> middle/actions slots (search box, Add button …)
      Same size/radius/focus as the comfortable form controls. Modal headers excluded.
      Hook: Mary header = div.mb-10 > div.flex.flex-wrap.gap-5.justify-between.items-center
   ====================================================================== */
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center :is(.input, .select, select:not(#ndp-month-select, #ndp-year-select)):not(table *, .select2-hidden-accessible, .join-item, .input-xs, .input-sm, .select-xs, .select-sm) {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    font-size: .875rem !important;
    border-radius: var(--ui-radius) !important;
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center .input:not(table *, .ps-10, .join-item) {
    padding-inline: .85rem;
}
/* search box: a little wider, icon muted → accent on focus */
@media (min-width: 1024px) {
    html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center .input.ps-10 {
        min-width: 16rem;
    }
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center .relative.ui-icon-input > svg {
    color: var(--ui-placeholder);
    transition: color .15s ease;
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center .relative.ui-icon-input:focus-within > svg:first-of-type {
    color: var(--ui-accent);
}

/* buttons (Add, Export, Filter …) */
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center .btn:not(.btn-xs, .btn-sm, .btn-circle, .btn-square, table *) {
    height: 2.5rem;
    min-height: 2.5rem;
    padding-inline: 1rem;
    font-size: .875rem;
    gap: .4rem;
    border-radius: var(--ui-radius) !important;
}

/* ======================================================================
   6. PER PAGE SELECTOR — <x-pagination-filter> (.paginate)
   ====================================================================== */
html body .paginate label {
    margin-top: 0 !important;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-muted);
}
html body .paginate :is(.select, select:not(#ndp-month-select, #ndp-year-select)):not(.select2-hidden-accessible) {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    font-size: .875rem !important;
    border-radius: var(--ui-radius) !important;
    padding-inline: .85rem 2.25rem;
}
/* Per Page is a select2 (x-pagination-filter): fixed width, same 2.5rem height as the toolbar */
html body .paginate .paginate-s2 {
    width: 6.5rem;
}
html body .paginate .paginate-s2 > select + .select2-container .select2-selection--single {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    border-radius: var(--ui-radius);
    display: flex;
    align-items: center;
}
html body .paginate .paginate-s2 > select + .select2-container .select2-selection__rendered {
    font-size: .875rem;
}
html body .paginate .paginate-s2 > select + .select2-container:is(.select2-container--open, .select2-container--focus) .select2-selection--single {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* ======================================================================
   7. REPORT / LIST TABLES — hand-built <table>s whose <thead> carries bg-gray-50 / bg-gray-100
      (~735 views: billing, accounting, inventory reports …). Screen only: print is untouched.
      Kept as-is on purpose: font size, padding, column widths, sticky offsets (reports are wide
      and often have two header rows), `custom-sticky-header`.
      Every tint is layered over an opaque surface, so sticky left columns (bg-white cells)
      never turn see-through; cells/rows with their own bg-* highlight keep it.
      Opt out: `ui-plain` on the <table>, or `ui-dense` on a wrapper. Dense entry screens are out, and so
      are print documents shown on screen (print_body / print-body / print-page / print-sheet / print-root /
      print-wrap): they keep their paper look (plain header, real borders).
   ====================================================================== */
@media screen {
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) {
        --ui-rt-line: var(--ui-divider);
        border-color: var(--ui-rt-line);
    }

    /* scroll wrapper directly around the table: rounded, soft brand glow */
    html body div:is(.overflow-auto, .overflow-x-auto, .overflow-scroll).ui-gray-wrap:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) {
        border: 1px solid rgb(var(--ui-table-rgb) / .14);
        border-radius: .85rem;
        box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 32px -20px rgb(var(--ui-table-rgb) / .45);
        background-color: var(--ui-surface);
    }

    /* header: brand gradient, white text, faint white column lines */
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > thead :is(th, td) {
        background: var(--ui-thead-bg) !important;
        color: var(--ui-thead-ink) !important;
        font-weight: 600;
        border-color: var(--ui-thead-line) !important;
    }
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > thead :is(th, td) :is(a, span, div, svg):not(.badge, .btn, .btn *) {
        color: inherit;
    }

    /* sticky columns hard-code bg-white: follow the theme surface instead (was a white strip in dark) */
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > :is(tbody, tfoot) > tr > :is(td, th).bg-white {
        background-color: var(--ui-surface);
    }

    /* body: soft lines, opaque zebra, brand hover (rows/cells with their own bg-* are left alone) */
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > tbody > tr > :is(td, th) {
        border-color: var(--ui-rt-line);
        padding-top: .35rem;
        padding-bottom: .35rem;
        transition: background-color .12s ease;
    }
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > tbody > tr:not([class*="bg-"]):nth-child(even) > :is(td, th):is(:not([class*="bg-"]), .bg-white) {
        background: linear-gradient(rgb(var(--ui-table-rgb) / .035), rgb(var(--ui-table-rgb) / .035)), var(--ui-surface);
    }
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > tbody > tr:not([class*="bg-"]):hover > :is(td, th):is(:not([class*="bg-"]), .bg-white) {
        background: linear-gradient(rgb(var(--ui-table-rgb) / .09), rgb(var(--ui-table-rgb) / .09)), var(--ui-surface);
    }

    /* totals footer: opaque brand tint, brand ink (custom.css forces tfoot th white !important) */
    html body table.ui-gray-head:not(.ui-plain, :is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *) > tfoot > tr > :is(th, td) {
        background: linear-gradient(rgb(var(--ui-table-rgb) / .12), rgb(var(--ui-table-rgb) / .12)), var(--ui-surface) !important;
        color: var(--ui-table-ink);
        font-weight: 600;
        border-color: rgb(var(--ui-table-rgb) / .2) !important;
    }
}

/* ======================================================================
   8. SPACING — page header and Per Page row
   ====================================================================== */
/* Mary <x-header> on a page leaves mb-10 (2.5rem) above the card: tighten it (modal headers excluded) */
html body div.mb-10.ui-filter-host:not(.modal-box > *) {
    margin-bottom: 1rem;
}
/* <x-pagination-filter> sat flush on the table below it */
html body div.flex.justify-end.ui-paginate-row {
    margin-bottom: .75rem;
}

/* ======================================================================
   9. PAGE HEADER TITLE + TOOLBAR GAPS — <x-header> on a page (modal headers excluded)
      Mary renders: div.mb-10 > div.flex.flex-wrap.gap-5.justify-between.items-center
                      > div (title block: div.font-extrabold [+ subtitle]) | div (middle) | div (actions)
   ====================================================================== */
/* title: strong slate (not pure black), bold, tight tracking, brand accent bar in front */
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center > div:first-child > .font-extrabold {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--ui-page-title);
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center > div:first-child > .font-extrabold::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.15em;
    border-radius: 9999px;
    background: rgb(var(--ui-brand-rgb));
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center > div:first-child > .text-gray-500 {
    color: var(--ui-muted);
    padding-left: calc(4px + .6rem);
}
:root { --ui-page-title: rgb(30 41 59); }                 /* slate-800 */
html.dark, html[data-theme="dark"] { --ui-page-title: rgb(226 232 240); }  /* slate-200 */

/* toolbar: search ↔ Add closer, and less air under the header */
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center {
    column-gap: .75rem;
    row-gap: .75rem;
}
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center > div:last-child {
    gap: .5rem;
}
/* ui-header-inset: a small side inset so the title's accent bar and the right-hand buttons never sit
   on the edge of the page / card (sticky entry titles included) */
html body div.mb-10:not(.modal-box > *) > div.flex.flex-wrap.gap-5.justify-between.items-center {
    padding-inline: .5rem;
}
html body div.mb-10.ui-filter-host:not(.modal-box > *) {
    margin-bottom: .6rem;
}
/* a list card that opens with the Per Page row (Mary <x-card> wraps its slot in a <div>):
   trim the 1.25rem top/bottom padding so the table sits closer to the header and the pagination */
html body .card.ui-card-paginated {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
/* Mary pagination: its empty top rule adds mb-2 + our .5rem; keep one small gap */
html body .mary-table-pagination > div:first-child {
    margin-bottom: 0;
}

/* ======================================================================
   10. PER PAGE POSITION — <x-pagination-filter position="bottom|top"> (default bottom)
       The component tags its root .ui-pp.ui-pp--bottom / .ui-pp--top.
       bottom: the filter's parent holds a Mary pagination (anywhere inside - most pages wrap the table
               in another div) → parent is the anchor, Per Page hangs as a tab from the table's
               bottom-right, inside the pagination row (fixed height, room reserved on the right).
               Assumes the table + pagination end that parent (true for list cards; dialogs after it
               are fine). No Mary pagination but inside a card body → moved to the card's bottom.
               Anything else → plain row where it is.
       top:    followed directly by the Mary table root → tab on the frame's top-right corner.
   ====================================================================== */
/* --- bottom --- */
html body div.ui-pp-host.ui-pp-mary {
    --ui-pp-h: 2.85rem;
    --ui-pp-w: 13.5rem;
    position: relative;
}
html body div.ui-pp-host.ui-pp-mary > .ui-pp--bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    height: calc(var(--ui-pp-h) + 1px);   /* +1px: overlaps the frame's bottom border */
}
html body div.ui-pp-host.ui-pp-mary > .ui-pp--bottom > .paginate {
    height: 100%;
    margin-right: 0;
    gap: .5rem;
    background-color: var(--ui-surface);
    border: 1px solid rgb(var(--ui-table-rgb) / .14);
    padding: .35rem .4rem .35rem .8rem;
    border-top-color: var(--ui-surface);
    border-radius: 0 0 .75rem .75rem;
    box-shadow: 0 10px 18px -14px rgb(var(--ui-table-rgb) / .6);
}
html body div.ui-pp-host.ui-pp-mary div[x-classes="overflow-x-auto"].ui-before-mary-pag {
    border-bottom-right-radius: 0;
}
html body div.ui-pp-host.ui-pp-mary .mary-table-pagination {
    padding-top: 0;
}
html body div.ui-pp-host.ui-pp-mary .mary-table-pagination > div:first-child {
    display: none;   /* Mary's empty top rule (1px + margin) */
}
html body div.ui-pp-host.ui-pp-mary .mary-table-pagination > div:last-child {
    display: flex;
    align-items: center;
    min-height: var(--ui-pp-h);
    padding-left: .25rem;
    padding-right: calc(var(--ui-pp-w) + .75rem);
}
html body div.ui-pp-host.ui-pp-mary .mary-table-pagination > div:last-child > div.w-full {
    width: 100%;
}
/* bottom, no Mary pagination, inside a card body: send it to the card's bottom */
html body .card > div.ui-pp-host:not(.ui-pp-mary) {
    display: flex;
    flex-direction: column;
}
html body .card > div.ui-pp-host:not(.ui-pp-mary) > .ui-pp--bottom {
    order: 999;
    margin: .75rem 0 0;
}

/* --- top --- */
html body div.ui-pp--top.ui-pp-top-tbl {
    position: relative;
    z-index: 3;
    margin-bottom: -1px;
}
html body div.ui-pp--top.ui-pp-top-tbl > .paginate {
    margin-right: 0;
    gap: .5rem;
    background-color: var(--ui-surface);
    border: 1px solid rgb(var(--ui-table-rgb) / .14);
    padding: .3rem .4rem .3rem .8rem;
    border-bottom-color: var(--ui-surface);
    border-radius: .75rem .75rem 0 0;
    box-shadow: 0 -8px 18px -14px rgb(var(--ui-table-rgb) / .6);
}
html body div.ui-pp--top + div > div[x-classes="overflow-x-auto"].ui-tbl-wrap {
    border-top-right-radius: 0;
}

/* --- both tabs: compact --- */
html body :is(.ui-pp--top, .ui-pp--bottom) > .paginate > label {
    font-size: .75rem;
    margin-top: 0 !important;
}
html body :is(html body div.ui-pp-host.ui-pp-mary > .ui-pp--bottom, html body div.ui-pp--top.ui-pp-top-tbl) .paginate-s2 > select + .select2-container .select2-selection--single {
    height: 2.1rem !important;
    min-height: 2.1rem !important;
}

/* Per Page select2: fill its slot (the flex row was shrinking it) and use our ring, not the browser's
   black focus outline on select2's inner .select2-selection */
html body .paginate .paginate-s2 {
    flex: none;
    min-width: 6.5rem;
}
html body .paginate .paginate-s2 > select + .select2-container {
    width: 100% !important;
    max-width: none !important;
}
html body .paginate .paginate-s2 .select2-selection {
    outline: none !important;
}
html body .paginate .paginate-s2 > select + .select2-container .select2-selection--single {
    border-color: var(--ui-border);
}

/* ======================================================================
   11. TABS (Mary <x-tabs>, 33 views) + TABLE SKELETON (<x-table-skeleton>)
       Mary marks the active label only with its activeClass (border-b-2 border-b-gray-600), which the
       green tab-strip scrollbar visually swallowed. Labels: a[role=tab].tab inside the label strip.
   ====================================================================== */
/* label strip: soft baseline, slim scrollbar that doesn't read as an underline */
html body div.flex.overflow-x-auto.ui-tabs-scroll {
    border-bottom: 1px solid var(--ui-divider) !important;
    gap: .25rem;
    padding-top: .6rem;        /* room for the count badges that sit at -top-2 */
    overflow-y: hidden;        /* overflow-x-auto made it scroll vertically by the badges' 2px */
}
@supports (-moz-appearance: none) {
    html body div.flex.overflow-x-auto.ui-tabs-scroll {
        scrollbar-width: thin;  /* Firefox only: in Blink a standard scrollbar-* value disables ::-webkit-scrollbar */
    }
}
html body div.flex.overflow-x-auto.ui-tabs-scroll::-webkit-scrollbar {
    height: 4px;
}
html body div.flex.overflow-x-auto.ui-tabs-scroll::-webkit-scrollbar-track {
    background: transparent;
}
html body div.flex.overflow-x-auto.ui-tabs-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(var(--ui-table-rgb) / .25);
    border: 0;
}

/* every label */
html body a.tab[role="tab"] {
    height: auto;
    min-height: 2.5rem;
    padding: .45rem .9rem;
    margin-bottom: -1px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: .6rem .6rem 0 0;
    color: var(--ui-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
html body a.tab[role="tab"]:hover {
    color: var(--ui-text);
    background-color: rgb(var(--ui-table-rgb) / .06);
}
/* active label (Mary adds border-b-gray-600 only to the selected one) */
/* solid indigo chip with white text */
html body a.tab[role="tab"].border-b-gray-600 {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgb(30 27 75 / .3);
    background: rgb(var(--ui-table-strong-rgb));
    border-bottom: 3px solid rgb(var(--ui-table-strong-rgb)) !important;
    box-shadow: 0 -6px 14px -8px rgb(var(--ui-table-strong-rgb) / .7);
}
html body a.tab[role="tab"].border-b-gray-600 svg {
    color: #fff;
}
html body a.tab[role="tab"].border-b-gray-600:hover {
    color: #fff;
}

/* skeleton list */
html body .ui-skeleton-table {
    padding-top: .25rem;
}
html body .ui-skeleton-table .ui-skeleton-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}
html body .ui-skeleton-table .ui-skeleton-pill {
    width: 11rem;
    height: 2.1rem;
    border-radius: .6rem;
}
html body .ui-skeleton-table .ui-skeleton-frame {
    border: 1px solid rgb(var(--ui-table-rgb) / .14);
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--ui-surface);
}
html body .ui-skeleton-table .ui-skeleton-head,
html body .ui-skeleton-table .ui-skeleton-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
}
html body .ui-skeleton-table .ui-skeleton-head {
    height: 2.6rem;
    background: var(--ui-thead-bg);
}
html body .ui-skeleton-table .ui-skeleton-row {
    height: 2.55rem;
    border-bottom: 1px solid var(--ui-divider);
}
html body .ui-skeleton-table .ui-skeleton-row:last-child {
    border-bottom: 0;
}
html body .ui-skeleton-table .ui-skeleton-bar {
    width: var(--w, 60%);
    height: .7rem;
    border-radius: 9999px;
}
html body .ui-skeleton-table .ui-skeleton-bar--head {
    width: 55%;
    background-color: rgb(var(--ui-table-rgb) / .3);
}

/* ======================================================================
   13. SELECT2 IN DARK MODE — select2-skin.css hard-codes a white field / slate text / white list
   ====================================================================== */
html:is(.dark, [data-theme="dark"]) body .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    background-color: oklch(var(--b1));
    border-color: var(--ui-border);
}
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-selection--single .select2-selection__rendered,
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: oklch(var(--bc));
}
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-dropdown {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border-color: rgb(var(--ui-brand-rgb) / .55);
    box-shadow: 0 14px 30px -10px rgb(0 0 0 / .7);
}
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-search--dropdown .select2-search__field,
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-search--inline .select2-search__field {
    background-color: oklch(var(--b2));
    color: oklch(var(--bc));
    border-color: var(--ui-border);
}
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgb(var(--ui-brand-rgb) / .2) !important;
    color: rgb(167 243 208) !important;   /* emerald-200 */
}
html:is(.dark, [data-theme="dark"]) body .select2-container--default .select2-results__option--selected {
    background: rgb(var(--ui-brand-rgb) / .1);
    color: rgb(110 231 183);              /* emerald-300 */
}
html:is(.dark, [data-theme="dark"]) body :is(.select2-results__options[aria-multiselectable="true"], .tms-s2-drop--multi) .select2-results__option:not(.select2-results__option--selected)::before {
    background: oklch(var(--b1));
    border-color: var(--ui-border);
}

/* ======================================================================
   14. STICKY TABLE HEADER — modes set by public/assets/js/sticky-table-head.js
   ====================================================================== */
/* NATIVE: the table fits its wrapper, so the wrapper stops being a scroll container and the header
   sticks with real CSS sticky to the page / modal scroller (compositor-smooth, no lag). */
html body .ui-sticky-native {
    overflow: visible !important;
}
html body .ui-sticky-native > table > thead :is(th, td) {
    position: sticky !important;
    top: var(--ui-sticky-top, 0px) !important;
    z-index: 5;
}
html body .ui-sticky-native > table > thead > tr:first-child > :is(th, td) {
    box-shadow: inset 0 -1px 0 var(--ui-thead-rule), 0 8px 10px -10px rgb(15 23 42 / .35);
}
/* the wrapper no longer clips: round the header / last-row cells to follow the frame */
html body .ui-sticky-native > table > thead > tr:first-child > :first-child { border-top-left-radius: calc(1rem - 1px); }
html body .ui-sticky-native > table > thead > tr:first-child > :last-child  { border-top-right-radius: calc(1rem - 1px); }
html body .ui-sticky-native > table > tbody > tr:last-child > :first-child  { border-bottom-left-radius: calc(1rem - 1px); }
html body .ui-sticky-native > table > tbody > tr:last-child > :last-child   { border-bottom-right-radius: calc(1rem - 1px); }
/* …except where a Per Page tab joins the frame (§10) */
html body div.ui-pp--top + div > .ui-sticky-native > table > thead > tr:first-child > :last-child { border-top-right-radius: 0; }
html body div.ui-pp-host .ui-sticky-native > table > tbody > tr:last-child > :last-child { border-bottom-right-radius: 0; }
/* report tables (§7) use a .85rem frame */
html body div:is(.overflow-auto, .overflow-x-auto, .overflow-scroll).ui-sticky-native > table > thead > tr:first-child > :first-child { border-top-left-radius: calc(.85rem - 1px); }
html body div:is(.overflow-auto, .overflow-x-auto, .overflow-scroll).ui-sticky-native > table > thead > tr:first-child > :last-child  { border-top-right-radius: calc(.85rem - 1px); }

/* The whole thead is sticky too and forms its own layer (z 10): every header cell - frozen ones
   included - stays above every body cell, whatever z-index a body cell ends up with. */
html body :is(.ui-sticky-native > table, .ui-sticky-box > table, table.ui-sticky-direct) > thead {
    position: sticky !important;
    top: var(--ui-sticky-top, 0px) !important;
    z-index: 20 !important;
}
/* frozen (sticky-left) body cells always under every header cell */
html body :is(.ui-sticky-native, .ui-sticky-box) > table > tbody :is(td, th)[class*="sticky"],
html body table.ui-sticky-direct > tbody :is(td, th)[class*="sticky"] {
    z-index: 1 !important;
}

/* BOX: wide tables - the wrapper scrolls both ways, capped to the visible height of the page/modal
   scroller, so the header can use real sticky inside it (horizontal scroll + frozen columns kept). */
html body .ui-sticky-box {
    max-height: var(--ui-box-h, 70vh);
    overflow: auto !important;
}
/* one vertical scrollbar on screen: the page's. The box still scrolls (wheel / touchpad / keys, header
   sticky inside) but its own vertical bar is hidden; its horizontal bar stays at the bottom of the box.
   (Blink/WebKit only - Firefox can't hide one axis, it keeps its thin bar.) */
html body .ui-sticky-box::-webkit-scrollbar:vertical {
    /* The width never changes: switching the bar between 0 and 8px resized the table, which made
       sticky-table-head.js re-measure, which switched the bar back - an endless loop that made the
       table flicker (worst at the bottom of long reports, so the totals could not be reached).
       The bar is hidden by making it invisible instead. */
    width: 8px !important;
    display: block;
}
html body .ui-sticky-box:not(.ui-sticky-box--bar)::-webkit-scrollbar-thumb:vertical,
html body .ui-sticky-box:not(.ui-sticky-box--bar)::-webkit-scrollbar-track:vertical {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html body .ui-sticky-box::-webkit-scrollbar:horizontal {
    height: 8px;
}
/* the page itself doesn't scroll (everything fits): then the box shows its own vertical bar */
html body .ui-sticky-box.ui-sticky-box--bar::-webkit-scrollbar:vertical {
    width: 8px !important;
    display: block;
}
/* DIRECT: no scroll box between the table and what scrolls - plain sticky on the header cells */
html body :is(.ui-sticky-box > table, table.ui-sticky-direct) > thead :is(th, td) {
    position: sticky !important;
    top: var(--ui-sticky-top, 0px) !important;
    z-index: 5;
}
html body :is(.ui-sticky-box > table, table.ui-sticky-direct) > thead > tr:first-child > :is(th, td) {
    box-shadow: inset 0 -1px 0 var(--ui-thead-rule), 0 8px 10px -10px rgb(15 23 42 / .35);
}
/* frozen (sticky-left) header cells stay above the header cells sliding under them */
html body :is(.ui-sticky-native > table, .ui-sticky-box > table, table.ui-sticky-direct) > thead :is(th, td)[class*="sticky"] {
    z-index: 7;
}
@media print {
    html body .ui-sticky-box { max-height: none !important; overflow: visible !important; }
    html body :is(.ui-sticky-box > table, table.ui-sticky-direct) > thead :is(th, td) { position: static !important; }
}

/* CLONE: wide tables on the page - a fixed copy of the header (built on <body> by the script) sits at
   the top of the page scroller while the real header is scrolled out; the page scrolls normally. */
html body .ui-thead-clone {
    position: fixed;
    z-index: 40;                 /* under the top nav (z 510) and modals */
    display: none;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-surface);
    box-shadow: 0 8px 12px -10px rgb(15 23 42 / .45) !important;
    pointer-events: auto;
}
html body .ui-thead-clone > table {
    margin: 0;
    table-layout: fixed;
    will-change: transform;
}
html body .ui-thead-clone > table > thead :is(th, td) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 1;
    cursor: default;
}
html body .ui-thead-clone > table > thead :is(th, td)[class*="sticky"] {
    z-index: 3;                  /* frozen columns stay above the ones sliding under them */
}
@media print {
    html body .ui-thead-clone { display: none !important; }
}

/* FLOAT: wide tables that must keep scrolling sideways - the whole thead is shifted with translateY */
html body table.ui-thead-floating > thead {
    position: relative;
    z-index: 6;
    will-change: transform;
}
html body table.ui-thead-floating > thead :is(th, td) {
    background-color: var(--ui-surface);   /* plain tables: never see-through (themed headers keep their own bg) */
    box-shadow: inset 0 -1px 0 var(--ui-thead-rule), 0 8px 12px -10px rgb(15 23 42 / .4) !important;
}
@media print {
    html body table.ui-thead-floating > thead { transform: none !important; }
    html body table.ui-thead-floating > thead :is(th, td) { box-shadow: none !important; }
    html body .ui-sticky-native > table > thead :is(th, td) { position: static !important; }
    /* the sticky thead layer (z 20) painted the header cells over the table's collapsed borders when
       backgrounds print (lines inside the header vanished) and stops the header repeating on each page;
       the screen-only corner rounding of the frame cells is dropped too */
    html body table > thead {
        position: static !important;
        z-index: auto !important;
        transform: none !important;
    }
    html body .ui-sticky-native > table > :is(thead, tbody) > tr > :is(th, td) { border-radius: 0 !important; }
    /* printed table headers stay plain: no indigo wash (screen keeps it), a cell's own solid bg-* still prints */
    html body table > thead :is(th, td) {
        background-image: none !important;
        color: inherit !important;
        box-shadow: none !important;
    }
}

/* <x-table-skeleton> footer: mirrors the real pagination row and the Per Page tab (§10) */
html body .ui-skeleton-table--pp-bottom .ui-skeleton-frame {
    border-bottom-right-radius: 0;
}
html body .ui-skeleton-table .ui-skeleton-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 2.85rem;
    padding-left: .25rem;
}
html body .ui-skeleton-table .ui-skeleton-bar--text {
    width: 11rem;
    flex: none;
}
html body .ui-skeleton-table .ui-skeleton-chips {
    display: flex;
    gap: .3rem;
    margin-left: auto;
}
html body .ui-skeleton-table .ui-skeleton-chip {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .6rem;
}
html body .ui-skeleton-table .ui-skeleton-pp-tab {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: calc(2.85rem + 1px);
    margin-top: -1px;                 /* overlaps the frame's bottom border, like the real tab */
    padding: .35rem .4rem .35rem .8rem;
    background-color: var(--ui-surface);
    border: 1px solid rgb(var(--ui-table-rgb) / .14);
    border-top-color: var(--ui-surface);
    border-radius: 0 0 .75rem .75rem;
    box-shadow: 0 10px 18px -14px rgb(var(--ui-table-rgb) / .6);
}
html body .ui-skeleton-table .ui-skeleton-bar--label {
    width: 3.5rem;
    height: .6rem;
}
html body .ui-skeleton-table .ui-skeleton-pill--sm {
    width: 6.5rem;
    height: 2.1rem;
}

/* ======================================================================
   15. BREATHING SPACE — fieldsets (pages + modals) and plain forms inside modals
       Many modals stack a grid row and then Mary inputs straight inside a <fieldset> / plain <form>
       with no spacing, so labels touched the field above. (<x-form> is a grid with its own gap -
       left alone.)
       maryUI 2 wraps every input in its own <fieldset class="fieldset"><legend> — those are skipped
       (`.fieldset`), as are mary's `label.input` / `label.select` boxes inside a page fieldset.
   ====================================================================== */
@media screen {
html body fieldset:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *, .ui-plain, .fieldset) {
    border: 1px solid var(--ui-divider) !important;
    border-radius: .85rem;
    padding: 1rem 1.15rem 1.15rem !important;
    margin: 0 0 1rem;
    background-color: oklch(var(--bc) / .015);
    min-width: 0;
}
html body fieldset:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *, .ui-plain, .fieldset) > legend {
    padding: .15rem .65rem;
    margin-left: -.35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-label);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-divider);
    border-radius: 9999px;
}
html body fieldset:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *, .ui-plain, .fieldset) > :not(legend) + :not(legend, template, script, style) {
    margin-top: .9rem;
}
html body fieldset:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *, .ui-plain, .fieldset) > .grid:is(.gap-2, .gap-3, .gap-4) {
    column-gap: 1rem;
    row-gap: .9rem;
}
html body fieldset:not(:is(.ui-dense, .receipt-entry-responsive, .account-entry-save, .addAccountEntryRows, .print_body, .print-body, .print-page, .print-sheet, .print-root, .print-wrap) *, .ui-plain, .fieldset) label:not(.label, .checkbox, .toggle, [class*="cursor-pointer"], .ui-label-input, .input, .select, .fieldset *) {
    display: inline-block;
    margin-bottom: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-label);
}
}
/* vertical rhythm between the blocks of a fieldset / a plain (non-grid) form */
html body .modal-box form:not(.grid) > :not(template, script, style) + :not(template, script, style, hr, .modal-action, fieldset) {
    margin-top: .9rem;
}
/* grids inside modal forms: a touch more room between rows and columns */
html body .modal-box form > .grid:is(.gap-2, .gap-3, .gap-4) {
    column-gap: 1rem;
    row-gap: .9rem;
}
/* last fieldset before the footer */
html body .modal-box form > fieldset:last-of-type {
    margin-bottom: .25rem;
}
/* <x-modal separator>: Mary adds its own <hr>s - the header divider (§3) and the footer divider already
   draw those lines, so drop the duplicates */
html body .modal-box > .mb-10.mb-5 > hr,
html body .modal-box > .mb-10.mb-5 > hr + div.h-0\.5,
html body .modal-box > hr.ui-hr-actions {
    display: none;
}

/* modals that don't size themselves: a bit wider than daisyUI's fixed 32rem, still inside the screen */
html body .modal-box:not([class*="max-w-"], [class*="w-["], [class*="w-1"], [class*="w-2"], [class*="w-3"], [class*="w-4"], [class*="w-5"], [class*="w-6"], [class*="w-7"], [class*="w-8"], [class*="w-9"], [class*="w-full"], [class*="min-w-"]) {
    width: min(94vw, 46rem);
    max-width: min(94vw, 46rem);
}
/* display-only ".input" boxes (a div/span showing text, e.g. "Complain Types") grow with their text
   instead of spilling out of the fixed 2.5rem height the comfortable form rules give real inputs */
html body :is(div, span, p).input:not(#ndp-month-select):not(#ndp-year-select) {
    height: auto !important;
    min-height: 2.5rem !important;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
}

/* ======================================================================
   16. CHECKBOX / RADIO / TOGGLE — brand green, softer shapes
       daisyUI draws a checked checkbox with --chkbg / --chkfg and a toggle as a currentColor track with
       an inset-shadow knob (--tglbg); restyled through those so its animations keep working.
       tailwind.config.js forces input[type=checkbox] to 1.5rem × 1.5rem !important, which also squashed
       toggles - sized explicitly below.
   ====================================================================== */
html body input.checkbox {
    --chkbg: rgb(var(--ui-brand-rgb));
    --chkfg: #fff;
    width: 1.3rem !important;
    height: 1.3rem !important;
    border: 1.5px solid var(--ui-border-hover) !important;
    border-radius: .4rem;
    background-color: var(--ui-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / .06);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
html body input.checkbox:hover:not(:disabled) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
}
html body input.checkbox:is(:checked, [aria-checked="true"], :indeterminate) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    box-shadow: 0 2px 6px -2px rgb(var(--ui-brand-rgb) / .6);
}
html body input.checkbox:active:not(:disabled) {
    transform: scale(.92);
}
/* plain checkboxes / radios without daisy classes */
html body input:is([type="checkbox"], [type="radio"]):not(.checkbox, .toggle, .radio) {
    accent-color: rgb(var(--ui-brand-rgb));
}

/* radio */
html body input.radio {
    --chkbg: rgb(var(--ui-brand-rgb));
    width: 1.3rem !important;
    height: 1.3rem !important;
    border: 1.5px solid var(--ui-border-hover) !important;
    background-color: var(--ui-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body input.radio:is(:checked, [aria-checked="true"]) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    background-color: rgb(var(--ui-brand-rgb)) !important;
    box-shadow: 0 0 0 3px var(--ui-surface) inset, 0 2px 6px -2px rgb(var(--ui-brand-rgb) / .6) !important;
}

/* toggle: drawn by us - pill track = background colour, white knob = a radial gradient that slides with
   background-position (daisy paints the knob with the background and the track with inset shadows, and
   Mary's toggle-primary still turns it indigo; both are switched off here). */
html body input.toggle {
    width: 2.6rem !important;
    height: 1.5rem !important;
    border: 0 !important;
    border-radius: 9999px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: oklch(var(--bc) / .2) !important;
    background-image:
        radial-gradient(circle at center, #fff 0 .52rem, rgb(15 23 42 / .18) .56rem, transparent .7rem) !important;
    background-size: 1.5rem 1.5rem !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / .15) inset !important;
    color: transparent !important;
    transition: background-color .2s ease, background-position .2s ease, box-shadow .2s ease;
}
html body input.toggle:hover:not(:disabled) {
    background-color: oklch(var(--bc) / .3) !important;
}
html body input.toggle:is(:checked, [aria-checked="true"]) {
    background-color: rgb(var(--ui-brand-rgb)) !important;
    background-position: right center !important;
    box-shadow: 0 2px 8px -3px rgb(var(--ui-brand-rgb) / .7) !important;
}
html body input.toggle:is(:checked, [aria-checked="true"]):hover:not(:disabled) {
    background-color: rgb(var(--ui-brand-strong-rgb)) !important;
}
html body input.toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring) !important;
}

/* Mary <x-radio> renders a button group (input.btn[type=radio]) - brand green when picked, themed otherwise */
html body input.btn:is([type="radio"], [type="checkbox"]) {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}
html body input.btn:is([type="radio"], [type="checkbox"]):checked {
    background-color: rgb(var(--ui-brand-rgb)) !important;
    border-color: rgb(var(--ui-brand-rgb)) !important;
    color: #fff !important;
}

html body input:is(.checkbox, .radio, .toggle):disabled {
    opacity: .45;
    cursor: not-allowed;
}
html body input:is(.checkbox, .radio, .toggle):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* labels of checkboxes / radios / toggles are clickable - show it */
html body label:has(> input:is([type="checkbox"], [type="radio"])),
html body label:has(input:is(.checkbox, .radio, .toggle)),
html body label[for]:is(:has(+ input:is([type="checkbox"], [type="radio"]))),
html body input:is([type="checkbox"], [type="radio"]) + label,
html body input:is([type="checkbox"], [type="radio"]):not(:disabled) {
    cursor: pointer;
}

/* ======================================================================
   17. ALPINE PAGINATION — <x-alpine-pagination> (Alpine-fed reports), same look as the Mary pagination (§4)
   ====================================================================== */
html body .ui-alpine-pager {
    background-color: var(--ui-surface) !important;
    border-top-color: var(--ui-divider) !important;
    box-shadow: 0 -8px 16px -14px rgb(15 23 42 / .35) !important;
}
html body .ui-alpine-pager > div {
    margin: .6rem .75rem !important;
    gap: 1rem;
}
html body .ui-alpine-pager .flex.gap-1 {
    align-items: center;
    gap: .3rem;
}
html body .ui-alpine-pager .flex.gap-1 > span > div,
html body .ui-alpine-pager .flex.gap-1 > span {
    display: contents;
}
html body .ui-alpine-pager .btn.ui-pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    padding: 0 .6rem !important;
    border: 1px solid var(--ui-divider) !important;
    border-radius: .6rem !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body .ui-alpine-pager .btn.ui-pg svg {
    width: 1rem;
    height: 1rem;
    color: currentColor !important;
}
html body .ui-alpine-pager .btn.ui-pg:hover:not(:disabled) {
    background: rgb(var(--ui-table-rgb) / .1) !important;
    border-color: rgb(var(--ui-table-rgb) / .35) !important;
    color: var(--ui-table-ink) !important;
}
html body .ui-alpine-pager .btn.ui-pg.ui-pg--current {
    background: rgb(var(--ui-table-strong-rgb)) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px -4px rgb(var(--ui-table-strong-rgb) / .55) !important;
}
html body .ui-alpine-pager .btn.ui-pg:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: var(--ui-surface) !important;
}
html body .ui-alpine-pager .btn.ui-pg:focus-visible {
    outline: 2px solid rgb(var(--ui-table-strong-rgb));
    outline-offset: -2px;
}
html body .ui-alpine-pager .ui-pg-gap {
    padding: 0 .15rem !important;
    color: var(--ui-muted) !important;
}
html body .ui-alpine-pager .ui-pg-summary {
    margin-top: 0 !important;
    align-self: center;
    font-size: .8125rem;
    color: var(--ui-muted);
}
html body .ui-alpine-pager .ui-pg-summary .font-bold {
    font-weight: 600;
    color: var(--ui-table-ink);
}
html body .ui-alpine-pager .paginate label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-muted);
}

/* ======================================================================
   18. CLOSE / CANCEL ICON — `.ui-btn-x` is added by assets/js/ui-close-icon.js to any .btn labelled
       Close / Cancel (EN/NP) that has no icon of its own, so it reads as a close button, not a pink box.
       The ✕ is a mask filled with currentColor: it follows the label colour (white on hover).
   ====================================================================== */
html body .btn.ui-btn-x {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
html body .btn.ui-btn-x::before {
    content: "";
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}
html body .btn.ui-btn-x:hover::before {
    transform: rotate(90deg);
}

/* <x-searchable-select>: the field always spans its column (select2 can size itself from a hidden modal). */
html body .ui-searchable-select > .select2-container.select2 {
    width: 100% !important;
    max-width: 100% !important;
}

/* ======================================================================
   19. SELECT2 SOFT CLICK — opening a select2 used to snap: border + 3px ring appeared instantly, the
       field's bottom (or top) corners went square, and the list popped in. Now the state change eases,
       the ring is lighter, corners stay round, and the list fades + slides 4px from the field.
       Rules start with html:root: ui-skin.css loads before select2-skin.css, whose focus/open rule wins a tie.
   ====================================================================== */
html:root body .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    transition: border-color .18s ease, box-shadow .22s ease, background-color .18s ease;
    outline: none !important;
}
html:root body .select2-container--default:not(.select2-container--disabled):not(.select2-container--open) :is(.select2-selection--single, .select2-selection--multiple):hover {
    border-color: rgb(16 185 129 / .55);
}
html:root body .select2-container--default:is(.select2-container--focus, .select2-container--open) :is(.select2-selection--single, .select2-selection--multiple) {
    border-color: rgb(16 185 129 / .85);
    box-shadow: 0 0 0 3px rgb(16 185 129 / .10);
}
/* keep the field's rounded corners while the list is attached above / below */
html:root body .select2-container--default.select2-container--open.select2-container--below :is(.select2-selection--single, .select2-selection--multiple),
html:root body .select2-container--default.select2-container--open.select2-container--above :is(.select2-selection--single, .select2-selection--multiple) {
    border-radius: .5rem;
}
html:root body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    transition: transform .2s ease;
}
/* the list: soft entrance, a small gap from the field, rounded on all corners */
html:root body .select2-container--open .select2-dropdown {
    border-radius: .5rem;
    animation: ui-s2-in-below .16s cubic-bezier(.2, .8, .3, 1) both;
}
html:root body .select2-container--open .select2-dropdown--below {
    margin-top: 4px;
}
html:root body .select2-container--open .select2-dropdown--above {
    margin-top: -4px;
    animation-name: ui-s2-in-above;
}
@keyframes ui-s2-in-below {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ui-s2-in-above {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* options: hover / highlight eases instead of flashing */
html:root body .select2-container--default .select2-results__option {
    transition: background-color .12s ease, color .12s ease;
}
@media (prefers-reduced-motion: reduce) {
    html:root body .select2-container--open .select2-dropdown { animation: none; }
    html:root body .select2-container--default :is(.select2-selection--single, .select2-selection--multiple),
    html:root body .select2-container--default .select2-results__option { transition: none; }
}

/* ======================================================================
   20. FLATPICKR SLIDE — the English (flatpickr) calendar opens with the same motion as the Nepali picker's
   animation:"slide" (nepali-datepicker-adapter.js): 20px up + fade, .3s ease. Replaces flatpickr's own
   fpFadeInDown, which dropped in from above. Applies to time pickers too.
   ====================================================================== */
/* No transform: a translate counts toward the page scroller's scrollable area, so a calendar opening near the
   scroller's bottom pushed 20px past it and flashed a scrollbar for the length of the animation. A clip-path
   reveal (bottom edge rising into place) + fade gives the same upward feel without touching layout. */
@keyframes uiFpSlideUp {
    from { opacity: 0; clip-path: inset(0 0 22% 0 round 6px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 6px); }
}

html:root body .flatpickr-calendar.animate.open {
    animation: uiFpSlideUp .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    html:root body .flatpickr-calendar.animate.open { animation: none; }
}

/* ======================================================================
   21. FLATPICKR DARK — flatpickr ships light only (its themes/dark.css is unscoped, so it is not imported).
   Same trigger as the rest of the skin and the Nepali picker's mode: html.dark / [data-theme="dark"].
   Light mode is untouched. Covers date, range and time-only pickers.
   ====================================================================== */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: rgb(255 255 255 / .08);
    box-shadow: 0 16px 36px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
}
/* pointer arrow */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.arrowTop::before { border-bottom-color: rgb(255 255 255 / .08); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ui-surface); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.arrowBottom::before { border-top-color: rgb(255 255 255 / .08); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.arrowBottom::after { border-top-color: var(--ui-surface); }

/* header: month, year, prev / next */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar :is(.flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year) {
    color: var(--ui-text);
    fill: var(--ui-text);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) {
    color: var(--ui-muted);
    fill: var(--ui-muted);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg {
    fill: rgb(var(--ui-brand-rgb));
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-monthDropdown-months,
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-monthDropdown-months option {
    background: var(--ui-surface);
    color: var(--ui-text);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .numInputWrapper:hover {
    background: rgb(255 255 255 / .06);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .numInputWrapper span { border-color: rgb(255 255 255 / .12); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .numInputWrapper span:hover { background: rgb(255 255 255 / .1); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: var(--ui-muted); }
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .numInputWrapper span.arrowDown::after { border-top-color: var(--ui-muted); }

/* weekday row */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar :is(.flatpickr-weekdays, span.flatpickr-weekday) {
    background: transparent;
    color: var(--ui-muted);
}

/* days */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day {
    color: var(--ui-text);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day:is(:hover, :focus, .prevMonthDay:hover, .nextMonthDay:hover):not(.selected, .startRange, .endRange, .flatpickr-disabled) {
    background: rgb(255 255 255 / .08);
    border-color: transparent;
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day.today {
    border-color: rgb(var(--ui-brand-rgb) / .7);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange),
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange):is(:hover, :focus) {
    background: rgb(var(--ui-brand-rgb));
    border-color: rgb(var(--ui-brand-rgb));
    color: #fff;
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day.inRange {
    background: rgb(var(--ui-brand-rgb) / .22);
    border-color: transparent;
    box-shadow: -5px 0 0 rgb(var(--ui-brand-rgb) / .22), 5px 0 0 rgb(var(--ui-brand-rgb) / .22);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .notAllowed) {
    color: oklch(var(--bc) / .35);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
    color: oklch(var(--bc) / .2);
    background: transparent;
}

/* time row (date+time and time-only pickers) */
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.hasTime .flatpickr-time {
    border-top-color: rgb(255 255 255 / .08);
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    border-top: 0;
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-time :is(input, .flatpickr-time-separator, .flatpickr-am-pm) {
    color: var(--ui-text);
    background: transparent;
}
html:is(.dark, [data-theme="dark"]) body .flatpickr-calendar .flatpickr-time :is(input, .flatpickr-am-pm):is(:hover, :focus) {
    background: rgb(255 255 255 / .08);
}

/* ======================================================================
   22. FLOATING TOOLTIPS — daisyUI tooltips are ::before / ::after of the element, so a table's
       overflow-x-auto wrapper or the sticky <thead> cut them off. assets/js/ui-floating-tooltip.js shows the
       same data-tip text in one body-level box instead (fixed, never clipped, flips to stay on screen) and
       marks the element .ui-tip-float, which switches its own pseudo tooltip off while hovered.
   ====================================================================== */
html body .ui-tip-float::before,
html body .ui-tip-float::after {
    content: none !important;
    display: none !important;
}
#ui-floating-tip {
    position: fixed;
    z-index: 2147483000;
    max-width: 20rem;
    padding: .25rem .55rem;
    border-radius: .4rem;
    background: oklch(var(--n));
    color: oklch(var(--nc));
    font-size: .8125rem;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 6px 16px -6px rgb(0 0 0 / .35);
}
#ui-floating-tip.is-visible {
    opacity: 1;
    transform: none;
}
#ui-floating-tip::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}
#ui-floating-tip[data-side="top"]::after    { top: 100%;  left: var(--tip-arrow, 50%); transform: translateX(-50%); border-top-color: oklch(var(--n)); }
#ui-floating-tip[data-side="bottom"]::after { bottom: 100%; left: var(--tip-arrow, 50%); transform: translateX(-50%); border-bottom-color: oklch(var(--n)); }
#ui-floating-tip[data-side="left"]::after   { left: 100%;  top: 50%; transform: translateY(-50%); border-left-color: oklch(var(--n)); }
#ui-floating-tip[data-side="right"]::after  { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: oklch(var(--n)); }

/* ======================================================================
   20. Tinted ghost action buttons in EVERY table (hand-built entry grids, reports …)
       §4 styles cell buttons only inside Mary <x-table> / table.ui-table. Here every other table's
       ghost buttons get the same chip colours — colour / shape / hover only, no size change, so dense
       entry rows keep their height. Lower specificity than §4, so Mary tables are unaffected.
       Danger (text-red-*, text-rose-*, text-error) → red chip; everything else → indigo chip.
   ====================================================================== */
html body table > tbody td .btn.btn-ghost {
    border-color: transparent;
    border-radius: .6rem;
    background-color: rgb(var(--ui-table-rgb) / .1);
    color: var(--ui-table-ink);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
html body table > tbody td .btn.btn-ghost:hover {
    background-color: rgb(var(--ui-table-rgb));
    color: var(--ui-on-brand);
    box-shadow: 0 6px 12px -4px rgb(var(--ui-table-rgb) / .55);
}
html body table > tbody td .btn.btn-ghost:is([class*="text-red-"], [class*="text-rose-"], .text-error) {
    background-color: oklch(var(--er) / .1);
    color: oklch(var(--er));
}
html body table > tbody td .btn.btn-ghost:is([class*="text-red-"], [class*="text-rose-"], .text-error):hover {
    background-color: oklch(var(--er));
    color: #fff;
    box-shadow: 0 6px 12px -4px oklch(var(--er) / .55);
}
html body table > tbody td .btn.btn-ghost:hover :is(svg, .mary-icon, i) {
    color: inherit !important;
}