/*
 * Akubo UI — shared modern primitives used across pages.
 * Use these for buttons, tags, filter tabs, toggles, avatars, empty states,
 * page headers, and standard "modern" page chrome. Page-specific layout
 * (collapsible lists, comparison grids, etc.) stays in the page's own <style>
 * block prefixed with the module name (e.g. .df-group for duplicate finder).
 *
 * Loaded globally via /common/layout/head.php after global.css.
 * Class prefix: .aui-*   |   Token prefix: --aui-*
 */

/* ============ Design tokens ============ */
:root {
    /* Akubo brand palette (2026 brand guide) — raw brand hexes. */
    --ak-dark:    #003834;   /* darkest — deep surfaces / text-on-mint */
    --ak-teal:    #03705B;   /* deep teal-green */
    --ak-mid:     #31936B;   /* mid green */
    --ak-green:   #00B775;   /* vivid green — primary accent / success / links */
    --ak-green-2: #66CC66;   /* bright green */
    --ak-green-3: #A2EA8B;   /* light green */
    --ak-mint:    #C3EFE0;   /* light mint — soft tiles / banners / chart fills */
    --ak-yellow:  #FAFFB3;   /* pale yellow — warm highlight */

    /* Semantic accent tokens map onto the brand greens. */
    --aui-accent:        var(--ak-green);   /* vivid — accent/success/links/primary */
    --aui-accent-hover:  var(--ak-teal);    /* deep teal — hover / darker */
    --aui-accent-strong: var(--ak-dark);    /* darkest — text on mint surfaces */
    --aui-accent-soft:   #e6f7f0;           /* pale mint tint — soft bg / focus glow */
    --aui-accent-border: var(--ak-mint);    /* mint — soft accent borders */

    --aui-text:        #0f172a;
    --aui-text-muted:  #64748b;
    --aui-text-subtle: #94a3b8;

    --aui-border:      #e5e7eb;
    --aui-border-soft: #f1f5f9;
    --aui-border-hover:#d1d5db;

    --aui-bg:      #fafafa;
    --aui-surface: #ffffff;

    --aui-warn-bg:     #fffbeb;
    --aui-warn-border: #fde68a;
    --aui-warn-text:   #92400e;

    --aui-danger-bg:     #fef2f2;
    --aui-danger-border: #fecaca;
    --aui-danger-text:   #b91c1c;

    --aui-info-bg:     #eff6ff;
    --aui-info-border: #bfdbfe;
    --aui-info-text:   #1e40af;

    --aui-radius-sm: 6px;
    --aui-radius:    10px;
    --aui-radius-lg: 12px;

    --aui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --aui-shadow:    0 1px 3px rgba(15, 23, 42, 0.04);
    --aui-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* ============ Page chrome ============ */
.aui-page { padding: 28px 32px; width: 1200px; max-width: 100%; margin: 0 auto; }
.aui-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.aui-page-title { font-size: 22px; font-weight: 600; color: var(--aui-text); margin: 0 0 4px; letter-spacing: -0.01em; }
.aui-page-title-sm { font-size: 18px; }
.aui-page-subtitle { font-size: 13.5px; color: var(--aui-text-muted); margin: 0; }
.aui-back-link { font-size: 13px; color: var(--aui-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.aui-back-link:hover { color: var(--aui-text); background: var(--aui-border-soft); }

/* ----- Branded page-card header (surface card with breadcrumb + gradient icon block) ----- */
.aui-page-card { background: var(--aui-surface); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg);
    padding: 22px 24px 20px; box-shadow: var(--aui-shadow); margin-bottom: 16px; } 
.aui-crumb { font-size: 12.5px; color: var(--aui-text-subtle); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.aui-crumb a { color: var(--aui-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; margin-left: -8px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.aui-crumb a:hover { color: var(--aui-accent); background: var(--aui-accent-soft); }
.aui-crumb .aui-crumb-sep { color: var(--aui-text-subtle); font-size: 9px; opacity: 0.7; }
.aui-crumb .aui-crumb-current { color: var(--aui-text); font-weight: 500; }
.aui-title-block { display: flex; align-items: center; gap: 14px; }
/* When a breadcrumb sits above the title, the right column is taller — anchor
   the icon to the top and nudge it down so its optical center aligns with the
   title row rather than the crumb+title+subtitle midpoint. */
.aui-title-block:has(.aui-crumb) { align-items: flex-start; }
.aui-title-block:has(.aui-crumb) .aui-icon-block { margin-top: 6px; }
.aui-icon-block { width: 44px; height: 44px; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-accent) 0%, var(--aui-accent-hover) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 183, 117, 0.25); flex-shrink: 0; }
.aui-page-card .aui-page-title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.aui-page-card .aui-page-subtitle { font-size: 12.5px; }

/* ============ Surface / card ============ */
.aui-surface { background: var(--aui-surface); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-surface-hover { transition: border-color 0.15s, box-shadow 0.15s; }
.aui-surface-hover:hover { border-color: var(--aui-border-hover); box-shadow: var(--aui-shadow); }

/* Content card sitting directly under an .aui-page-card: `<div class="card aui-card">`.
   Deliberately borderless and shadowless. A hairline border only earns its keep when
   it separates a surface from a DIFFERENT background — here it's a white card on a
   white page, so Bootstrap's default .card border adds no depth and just draws a stray
   line down the page. The page-card above is the bordered surface; inside the content
   card the toolbar rule and the table's row rules already carry the structure.
   Bootstrap 5's card is variable-driven, so retune the variable rather than
   hard-overriding the border shorthand. */
.aui-card {
    --bs-card-border-width: 0;
    box-shadow: none;
}

/* Bootstrap fills .card-header with a grey (rgba(0,0,0,.03)). On a page that also has a
   grey active tab and a grey page background, that's three greys of near-identical value
   stacked on each other — nothing reads as layered, and the header competes with the tab
   for attention. The header already has a bold title and the card has a border; the fill
   carries no information. White + a hairline rule instead, so the ACTIVE TAB is the only
   grey block in that zone — which is the one thing that should be highlighted. */
.aui-card > .card-header {
    background: var(--aui-surface);
    border-bottom: 1px solid var(--aui-border-soft);
}

/* ============ Buttons ============ */
.aui-btn { padding: 6px 12px; font-size: 12.5px; font-weight: 500; border-radius: 8px; border: 1px solid var(--aui-border); background: var(--aui-surface); color: var(--aui-text); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all 0.12s; font-family: inherit; text-decoration: none; }
.aui-btn:hover, .aui-btn:focus, .aui-btn:visited { text-decoration: none; }
.aui-btn:hover { background: #f9fafb; border-color: var(--aui-border-hover); }
.aui-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Icon-only button: square, no text padding. A text button's horizontal padding makes a
   lone icon look lost in a wide box — size it to the glyph instead. */
.aui-btn-icon {
    width: 32px; height: 32px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

.aui-btn-md { padding: 9px 16px; font-size: 13.5px; border-radius: 9px; }
.aui-btn-lg { padding: 10px 18px; font-size: 13.5px; border-radius: var(--aui-radius); }

.aui-btn-muted { color: var(--aui-text-muted); }
.aui-btn-danger-hover:hover { color: var(--aui-danger-text); background: var(--aui-danger-bg); border-color: var(--aui-danger-border); }

/* Destructive action: red from the outset (not only on hover), so a delete is
   identifiable before you touch it. Pairs with destructive-last ordering. */
.aui-btn-danger { color: var(--aui-danger-text); }
.aui-btn-danger i { color: var(--aui-danger-text); }
.aui-btn-danger:hover {
    color: var(--aui-danger-text);
    background: var(--aui-danger-bg);
    border-color: var(--aui-danger-border);
}

.aui-btn-primary { background: var(--aui-accent); color: #fff; border: none; padding: 9px 20px; font-size: 13.5px; border-radius: 9px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: all 0.15s; }
.aui-btn-primary:hover:not(:disabled) { background: var(--aui-accent-hover); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 183, 117, 0.25); transform: translateY(-1px); }
.aui-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }

.aui-btn-cancel { background: transparent; color: var(--aui-text-muted); padding: 9px 16px; font-size: 13.5px; border: 1px solid var(--aui-border); border-radius: 9px; cursor: pointer; font-family: inherit; transition: all 0.12s; }
.aui-btn-cancel:hover { background: var(--aui-border-soft); color: var(--aui-text); }

/* ============ Tags (status badges) ============ */
.aui-tag { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.2px; display: inline-flex; align-items: center; gap: 4px; }
.aui-tag-success { background: var(--aui-accent-soft); color: var(--aui-accent-strong); }
.aui-tag-warn    { background: var(--aui-warn-bg); color: var(--aui-warn-text); }
.aui-tag-danger  { background: var(--aui-danger-bg); color: var(--aui-danger-text); }
.aui-tag-info    { background: var(--aui-info-bg); color: var(--aui-info-text); }
.aui-tag-neutral { background: var(--aui-border-soft); color: var(--aui-text-muted); }

/* ============ Filter bar (pill dropdowns + search) ============
 * Toolbar for list pages: filter pills on the left, search on the right.
 *
 * Each pill renders a visible label + selected-value mirror, with the REAL
 * native <select> stretched invisibly across the whole pill. That makes the
 * entire pill a click target (a <label for> cannot open a <select>), while
 * keeping native keyboard/mobile behavior and leaving .val() reads unchanged.
 * Markup + mirror syncing: /common/js/filter-pills.js
 *
 *   <div class="aui-filter">
 *     <span class="aui-filter-label" aria-hidden="true">Display</span>
 *     <span class="aui-filter-value" aria-hidden="true">All</span>
 *     <i class="fa-solid fa-chevron-down aui-filter-caret" aria-hidden="true"></i>
 *     <select id="filterdisplay" aria-label="Display">…</select>
 *   </div>
 */
.aui-filter-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--aui-border-soft);
}
.aui-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* "Clear all" sits in the pill row, so give it the pill's rounded shape. */
.aui-filter-group .aui-btn { border-radius: 999px; }

.aui-filter {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--aui-surface);
    border: 1px solid var(--aui-border);
    border-radius: 999px;
    padding: 6px 12px 6px 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.aui-filter:hover { border-color: var(--aui-border-hover); }

/* Focus ring for KEYBOARD focus only. :focus-within would keep the ring lit after a mouse
   click (the invisible toggle retains focus), making an unset pill look identical to an
   active one — which is exactly the signal .is-active is supposed to carry. */
.aui-filter:has(.aui-filter-toggle:focus-visible) {
    border-color: var(--aui-accent);
    box-shadow: 0 0 0 3px var(--aui-accent-soft);
}
/* While the menu is open, mark the pill without implying it's filtering. */
.aui-filter.show { border-color: var(--aui-border-hover); }

/* An active filter is narrowing the list — make that unmistakable. */
.aui-filter.is-active {
    border-color: var(--aui-accent);
    background: var(--aui-accent-soft);
    box-shadow: inset 0 0 0 1px var(--aui-accent-border);
}
.aui-filter.is-active .aui-filter-label { color: var(--aui-accent-hover); }
.aui-filter.is-active .aui-filter-value { color: var(--aui-accent-strong); font-weight: 600; }

/* Label and value are the same size and case — sentence case, 13px. The earlier 10.5px
   uppercase label sat on a different baseline to the value (different font-size => different
   line box), and matching them is both simpler and better-looking than compensating for it.
   Same line-height on both keeps their boxes identical so align-items:center lands. */
.aui-filter-label {
    white-space: nowrap; line-height: 18px;
    font-size: 13px; font-weight: 600;
    color: var(--aui-text-subtle);
}
.aui-filter-value {
    white-space: nowrap; line-height: 18px;
    font-size: 13px; font-weight: 500; color: var(--aui-text);
}
.aui-filter-caret { font-size: 10px; color: var(--aui-text-subtle); margin-left: 2px; }

/* The <select> stays in the DOM as the source of truth — every page still reads it with
   .val() and listens to its `change` event — but it's hidden, because a native select
   renders an OS menu that CSS cannot style. The visible menu is a Bootstrap dropdown
   built from its <option>s by /common/js/filter-pills.js. */
.aui-filter select {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    border: 0; padding: 0; margin: 0;
}

/* Invisible toggle covering the whole pill, so clicking the label, value or caret opens
   the menu. Bootstrap requires the menu to be the toggle's NEXT SIBLING, which is why
   this exists rather than putting data-bs-toggle on the pill itself. */
.aui-filter-toggle {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
    opacity: 0; cursor: pointer;
    border: 0; padding: 0; margin: 0;
    background: transparent;
}
.aui-filter-caret { transition: transform .15s ease; }
.aui-filter.show .aui-filter-caret { transform: rotate(180deg); }

/* The menu itself — inherits the kit's modern dropdown theme. */
.aui-filter-menu {
    min-width: 100%;
    max-height: 320px; overflow-y: auto;
}
.aui-filter-menu .dropdown-item {
    font-size: 13.5px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.aui-filter-menu .dropdown-item.active,
.aui-filter-menu .dropdown-item:active {
    background: var(--aui-accent-soft);
    color: var(--aui-text);
    font-weight: 600;
}
/* Tick on the selected option, rather than a heavy filled row. */
.aui-filter-menu .dropdown-item.active::after {
    content: "\f00c";                      /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--aui-accent);
}

/* Clear this one filter without opening its dropdown. Only on an active pill.
   Must sit ABOVE the transparent select overlay or the select swallows the click.
   Injected automatically by /common/js/filter-pills.js. */
.aui-filter-clear {
    display: none;
    position: relative; z-index: 2;
    align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; margin-left: 1px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(0, 56, 52, .12); color: var(--aui-accent-hover);
    font-size: 9px; line-height: 1;
    transition: background .12s;
}
.aui-filter.is-active .aui-filter-clear { display: inline-flex; }
.aui-filter-clear:hover { background: rgba(0, 56, 52, .26); }
.aui-filter-clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--aui-accent); }
/* Font Awesome glyphs carry their own metrics — force the icon to a block so it
   centres on the button's box instead of sitting on the text baseline. */
.aui-filter-clear i { display: block; line-height: 1; }

/* Search */
.aui-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--aui-border-soft);
    border: 1px solid transparent; border-radius: 999px;
    padding: 7px 16px; min-width: 260px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.aui-search:focus-within { background: var(--aui-surface); border-color: var(--aui-accent); box-shadow: 0 0 0 3px var(--aui-accent-soft); }
.aui-search i { color: var(--aui-text-subtle); font-size: 12px; }
.aui-search input {
    border: 0; background: transparent; outline: none; box-shadow: none;
    font-size: 13.5px; color: var(--aui-text); width: 100%;
}
.aui-search input::-webkit-search-cancel-button { cursor: pointer; }

@media (max-width: 767.98px) {
    .aui-search { min-width: 100%; }
}

/* ============ Summary bar (list-page totals) ============
 * The aggregate for the WHOLE filtered set, sitting above the toolbar that drives it.
 * Neutral uppercase label + semantically coloured value, so the colour means something
 * (income / owed) instead of just decorating the row.
 *
 *   <div class="aui-summary">
 *     <span class="aui-summary-item">
 *       <span class="aui-summary-label">Total income</span>
 *       <span class="aui-summary-value is-income">PHP 1,000.00 | USD 20.00</span>
 *     </span>
 *   </div>
 *
 * Multi-currency values are joined with " | ", never " + " — you cannot add PHP to USD,
 * and a plus sign claims you can.
 */
.aui-summary {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 6px 28px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--aui-border-soft);
}
.aui-summary-item { display: inline-flex; align-items: baseline; gap: 7px; }
.aui-summary-label {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--aui-text-muted); white-space: nowrap;
}
.aui-summary-value {
    font-size: 13.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--aui-text);
}
.aui-summary-value.is-income { color: var(--aui-accent-hover); }
.aui-summary-value.is-danger { color: var(--aui-danger-text); }
.aui-summary-value.is-muted  { color: var(--aui-text-subtle); font-weight: 500; }

/* ============ Goal progress ============
 * A goal meter: the amount raised, the target, and the percentage read out beside it.
 *
 *   <div class="aui-progress-head">
 *     <span class="aui-progress-raised">PHP 6,070,850.00</span>
 *     <span class="aui-progress-goal">of PHP 10,000,000.00 goal</span>
 *     <span class="aui-progress-pct">60.71%</span>
 *   </div>
 *   <div class="aui-progress"><span class="aui-progress-fill" style="width:60.71%"></span></div>
 *
 * The percentage stays truthful (it may read over 100%); only the FILL WIDTH is clamped
 * to 100 by the caller, since a bar cannot draw past its track.
 */
.aui-progress-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.aui-progress-raised {
    font-size: 22px; font-weight: 700; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--aui-text);
}
.aui-progress-goal { font-size: 13px; color: var(--aui-text-muted); font-variant-numeric: tabular-nums; }
.aui-progress-pct {
    margin-left: auto;
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--aui-text-muted);
    background: var(--aui-border-soft); border: 1px solid var(--aui-border);
    border-radius: 999px; padding: 3px 10px;
}
/* Goal met — the bar is pinned full, so the pill carries the distinction. */
.aui-progress-pct.is-complete {
    color: var(--aui-accent-hover);
    background: var(--aui-accent-soft); border-color: var(--aui-accent-border);
}
.aui-progress { height: 8px; border-radius: 999px; background: var(--aui-border-soft); overflow: hidden; }
.aui-progress-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--aui-accent) 0%, var(--aui-accent-hover) 100%);
    transition: width .45s ease;
}

/* ============ Table chrome ============
 * Scope to the .aui-table WRAPPER, never the table's id: with DataTables
 * scrollY the <thead> is cloned into a separate table element that does NOT
 * carry the original id, so id-based header rules silently stop applying.
 */
.aui-table thead th {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: var(--aui-text-subtle);
    border-bottom: 1px solid var(--aui-border);
    padding-top: 14px; padding-bottom: 10px;
}
.aui-table tbody td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
/* DataTables scrollY can leave a 1px sliver horizontal scrollbar on the scroll
   body (scrollbar-width miscalculation). These paginated tables never scroll
   sideways, so suppress it. Covers DT2 (.dt-scroll-body) + legacy. */
.aui-table .dt-scroll-body,
.aui-table .dataTables_scrollBody { overflow-x: hidden !important; }
/* Records-per-page selector (DT2 .dt-length). */
.aui-table .dt-length select {
    border: 1px solid var(--aui-border);
    border-radius: 8px;
    padding: 4px 26px 4px 8px;
    font-size: 13px;
    color: var(--aui-text);
    background-color: #fff;
}
.aui-table .dt-length label { font-size: 12.5px; color: var(--aui-text-muted); gap: 6px; }
.aui-table .dataTables_info { font-size: 12.5px; color: var(--aui-text-muted); padding-top: 14px; margin-bottom: .5rem; }
.aui-table .dataTables_paginate { padding-top: 10px; margin-bottom: .5rem; }

/* Pagination: DataTables/Bootstrap default the active page to blue (#0d6efd),
   which clashes with the app's green accent. Covers both DataTables' own
   .paginate_button markup and the Bootstrap .pagination integration. */
.aui-table .dataTables_paginate .paginate_button.current,
.aui-table .dataTables_paginate .paginate_button.current:hover,
.aui-table .pagination .page-item.active .page-link {
    background: var(--aui-accent) !important;
    border-color: var(--aui-accent) !important;
    color: #fff !important;
}
.aui-table .pagination .page-link { color: var(--aui-text-muted); }
.aui-table .pagination .page-link:hover { color: var(--aui-text); background: var(--aui-border-soft); }
.aui-table .pagination .page-link:focus { box-shadow: 0 0 0 3px var(--aui-accent-soft); }

/* ============ DataTables processing loader ============
 * DataTables 2.x renders a floating loader in div.dt-processing — any language.processing
 * text, followed by an animated dot spinner whose default colour is Bootstrap blue. Give
 * the box the kit's card chrome and recolour the dots to the accent green so every table's
 * loader matches the app instead of flashing a stray blue widget. */
div.dt-processing {
    border: 1px solid var(--aui-border);
    border-radius: var(--aui-radius);
    box-shadow: var(--aui-shadow-lg);
    background: var(--aui-surface);
    padding: 8px 16px;
    /* Loader is the dot animation only — collapse any language.processing label
       (and its icon) so no stray "Loading…"/"Processing…" text shows. */
    font-size: 0; line-height: 0;
}
div.dt-processing > i,
div.dt-processing > svg { display: none; }
/* Restore sizing on the animation container so its em-based margins hold. */
div.dt-processing > div:last-child { font-size: 14px; }
/* The spinner is a row of <div> dots inside the last child; recolour them. */
div.dt-processing > div:last-child > div { background: var(--aui-accent) !important; }

/* ============ Section tabs (underline) ============
 * Page-level section switcher — an underline tab bar. Sits ABOVE the content card,
 * or as the first child INSIDE a card (its bottom hairline then reads as the card's
 * top divider):
 *   <ul class="nav nav-pills aui-tabs mb-4"> <li><button class="nav-link active">…</button></li> </ul>
 *
 * Inactive tabs are muted; the ACTIVE tab is marked by a green underline (not a filled
 * pill) — a lighter, more modern signal that reads clearly without competing with the
 * page's other greys. Replaces the old .settings-tabs / .template-type-tabs blocks.
 */
.aui-tabs { gap: 2px; border-bottom: 1px solid var(--aui-border); flex-wrap: wrap; }

.aui-tabs .nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 16px;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    margin-bottom: -1px;                 /* overlap the bar's own hairline */
    background: transparent;
    font-size: 13.5px; font-weight: 500;
    color: var(--aui-text-muted);
    transition: color .15s, border-color .15s;
}
.aui-tabs .nav-link i { font-size: 13px; color: var(--aui-text-subtle); }
.aui-tabs .nav-link:hover:not(.active) { color: var(--aui-text); }

/* Active tab carries the accent as an underline. Selector keeps .nav-pills so it beats
   Bootstrap's own .nav-pills active fill regardless of stylesheet order. */
.aui-tabs.nav-pills .nav-link.active,
.aui-tabs .nav-link.active {
    color: var(--aui-accent-hover);
    background: transparent;
    border-bottom-color: var(--aui-accent);
    font-weight: 600;
}
.aui-tabs.nav-pills .nav-link.active i,
.aui-tabs .nav-link.active i { color: var(--aui-accent); }
.aui-tabs .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--aui-accent-soft); border-radius: 6px; }

/* ============ Filter tabs (segmented control) ============ */
.aui-filter-tabs { display: inline-flex; gap: 2px; background: var(--aui-border-soft); padding: 4px; border-radius: var(--aui-radius); }
.aui-filter-tab { background: transparent; border: none; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--aui-text-muted); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; font-family: inherit; }
.aui-filter-tab:hover { color: var(--aui-text); }
.aui-filter-tab.active { background: var(--aui-surface); color: var(--aui-text); box-shadow: var(--aui-shadow-sm); }
.aui-filter-count { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--aui-border); color: var(--aui-text-muted); }
.aui-filter-tab.active .aui-filter-count { background: var(--aui-border-soft); color: var(--aui-text); }

/* ============ Toggle (two-option segmented control) ============ */
.aui-toggle { display: inline-flex; background: var(--aui-border-soft); padding: 3px; border-radius: 8px; }
.aui-toggle-opt { background: transparent; border: none; padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: var(--aui-text-muted); border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.aui-toggle-opt:hover { color: var(--aui-text); }
.aui-toggle-opt.active { background: var(--aui-surface); color: var(--aui-text); box-shadow: var(--aui-shadow-sm); }
.aui-toggle-opt.active.aui-toggle-success { color: var(--aui-accent); }
.aui-toggle-opt.active.aui-toggle-warn    { color: #b45309; }

/* ============ Avatar ============ */
.aui-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--ak-mint), var(--ak-green-3)); color: var(--ak-teal); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.aui-avatar-sm { width: 26px; height: 26px; font-size: 10px; }

/* ============ Empty state ============ */
.aui-empty { text-align: center; padding: 60px 20px; color: var(--aui-text-muted); }
.aui-empty-icon { font-size: 32px; color: var(--aui-text-subtle); margin-bottom: 12px; }
.aui-empty-icon-success { color: var(--aui-accent); font-size: 36px; }
.aui-empty h5 { font-size: 15px; font-weight: 600; color: var(--aui-text); margin: 0 0 4px; }
.aui-empty p { font-size: 13px; margin: 0; }

/* ============ Inline alert / banner ============ */
.aui-banner { padding: 12px 16px; border-radius: var(--aui-radius); font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.aui-banner-info    { background: var(--aui-accent-soft); border: 1px solid var(--aui-accent-border); color: var(--aui-accent-strong); }
.aui-banner-warn    { background: var(--aui-warn-bg); border: 1px solid var(--aui-warn-border); color: var(--aui-warn-text); }
.aui-banner-neutral { background: var(--aui-border-soft); color: var(--aui-text-muted); }

/* ============ Bootstrap dropdown — modern theme override ============ */
.aui-dropdown-menu { border: 1px solid var(--aui-border) !important; border-radius: var(--aui-radius-lg) !important; box-shadow: var(--aui-shadow-lg) !important; padding: 8px !important; margin-top: 6px !important; }
.aui-dropdown-menu .dropdown-header { font-size: 10.5px; font-weight: 600; color: var(--aui-text-subtle); text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 10px 4px; display: flex; align-items: center; gap: 8px; }
.aui-dropdown-menu .dropdown-divider { margin: 6px 0; border-color: var(--aui-border-soft); }
.aui-dropdown-menu .dropdown-item { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--aui-text); display: flex; align-items: center; gap: 10px; transition: background 0.12s; }
.aui-dropdown-menu .dropdown-item i { color: var(--aui-text-subtle); font-size: 13px; width: 14px; }
.aui-dropdown-menu .dropdown-item:hover { background: var(--aui-border-soft); }
.aui-dropdown-menu .dropdown-item.active,
.aui-dropdown-menu .dropdown-item:active { background: var(--aui-accent-soft); color: var(--aui-text); font-weight: 500; }
.aui-dropdown-menu .dropdown-item.active i,
.aui-dropdown-menu .dropdown-item:active i { color: var(--aui-accent); }
.aui-dropdown-trigger { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--aui-surface); border: 1px solid var(--aui-border); border-radius: var(--aui-radius); font-size: 13.5px; color: var(--aui-text); transition: all 0.15s; cursor: pointer; font-family: inherit; }
.aui-dropdown-trigger:hover, .aui-dropdown-trigger:focus, .aui-dropdown-trigger[aria-expanded="true"] { border-color: var(--aui-accent); box-shadow: 0 0 0 3px var(--aui-accent-soft); outline: none; }
.aui-dropdown-trigger::after { display: none; }
.aui-dropdown-caret { color: var(--aui-text-subtle); font-size: 11px; margin-left: 8px; }

/* ============ Summernote (toolbar + dialogs) ============ */
/* Summernote 0.9 (Bootstrap 4 build) renders its own caret icon for
   dropdown buttons (Font Size, Highlight, Paragraph/Alignment). Bootstrap 5's
   .dropdown-toggle also auto-adds a ::after caret, producing two icons. */
.note-toolbar .dropdown-toggle::after,
.note-btn.dropdown-toggle::after { display: none !important; }

/* Insert Link / Image / Video dialogs: drop the header close button, push the
   title to the right in its place, and give the inputs breathing room. */
.note-modal .modal-header .close { display: none !important; }
.note-modal .note-form-control { margin: 8px 0 16px; }

/* Bootstrap 5's .dropdown-menu min-width/padding bloats summernote's compact
   dropdowns (e.g. Font Size, Paragraph/Alignment). */
.note-toolbar .dropdown-menu { min-width: auto; }
.note-toolbar .dropdown-menu .dropdown-item,
.note-toolbar .dropdown-menu li > a { padding: 4px 14px; font-size: 13px; }
.note-editor .note-toolbar .note-dropdown-menu { min-width: auto !important; }

/* Insert Link dialog: space the "Open in new window" checkbox from its label. */
.note-modal .checkbox input[type="checkbox"] { margin-right: 10px; }

/* ============ Comment / note thread (task & case notes) ============ */
.aui-comment { display: flex; align-items: flex-start; gap: 10px; background: var(--aui-surface); border: 1px solid var(--aui-border); border-radius: var(--aui-radius); padding: 11px 12px; margin-bottom: 8px; transition: border-color 0.12s, box-shadow 0.12s; }
.aui-comment:hover { border-color: var(--aui-border-hover); box-shadow: var(--aui-shadow-sm); }
.aui-comment-avatar { margin-top: 1px; }
.aui-comment-body { flex: 1 1 auto; min-width: 0; }
.aui-comment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.aui-comment-author { font-size: 12.5px; font-weight: 600; color: var(--aui-text); }
.aui-comment-date { font-size: 10.5px; color: var(--aui-text-subtle); white-space: nowrap; flex-shrink: 0; }
.aui-comment-text { font-size: 13px; line-height: 1.5; color: var(--aui-text); white-space: pre-wrap; word-break: break-word; }
.aui-comment-actions { display: flex; gap: 2px; align-items: flex-start; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.aui-comment:hover .aui-comment-actions, .aui-comment:focus-within .aui-comment-actions { opacity: 1; }
.aui-comment-action { border: none; background: transparent; color: var(--aui-text-subtle); width: 26px; height: 26px; border-radius: 7px; font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; }
.aui-comment-action:hover { background: var(--aui-border-soft); color: var(--aui-text); }
.aui-comment-action.danger:hover { background: var(--aui-danger-bg); color: var(--aui-danger-text); }

/* ============ auiEnhanceSelect — branded native-select replacement ============ */
.aui-select { position: relative; }
.aui-select-trigger { width: 100%; }
.aui-select-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-dropdown-trigger.open { border-color: var(--aui-accent); box-shadow: 0 0 0 3px var(--aui-accent-soft); }
.aui-dropdown-trigger.open .aui-dropdown-caret { transform: rotate(180deg); }
.aui-select-menu {
    position: absolute; top: calc(100% + 4px); left: 0; width: 100%;
    background: var(--aui-surface); z-index: 1090;
    /* overflow-x hidden: the vertical scrollbar eats width and pushes the widest
       option past 100%, which added a second, horizontal scrollbar. */
    max-height: 280px; overflow-y: auto; overflow-x: hidden;
}
.aui-select-item {
    cursor: pointer;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============ select2 — Akubo theme (.aui-s2 container / .aui-s2-drop menu) ============ */
/* Scoped to the form modals as well as .aui-s2, because this select2 build may not
   apply containerCssClass/dropdownCssClass. The contact picker is the only select2
   inside these modals (Status/Category/Folder use auiEnhanceSelect). */
.select2-container.aui-s2,
#default_modal_content .select2-container,
#transaction_modal_content .select2-container { width: 100% !important; }
.select2-container.aui-s2 .select2-selection--single,
#default_modal_content .select2-container .select2-selection--single,
#transaction_modal_content .select2-container .select2-selection--single { height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--aui-border); border-radius: var(--aui-radius); }
.select2-container.aui-s2 .select2-selection__rendered,
#default_modal_content .select2-container .select2-selection__rendered { line-height: normal !important; padding: 0; font-size: 13.5px; color: var(--aui-text); }
.select2-container.aui-s2 .select2-selection__placeholder,
#default_modal_content .select2-container .select2-selection__placeholder { color: var(--aui-text-subtle); }
.select2-container.aui-s2 .select2-selection__arrow,
#default_modal_content .select2-container .select2-selection__arrow { height: 40px; right: 8px; }
.select2-container.aui-s2.select2-container--open .select2-selection--single,
.select2-container.aui-s2.select2-container--focus .select2-selection--single,
#default_modal_content .select2-container--open .select2-selection--single,
#default_modal_content .select2-container--focus .select2-selection--single { border-color: var(--aui-accent); box-shadow: 0 0 0 3px var(--aui-accent-soft); }
/* Dropdown menu — also scoped to the form modals in case this select2 build doesn't
   apply dropdownCssClass (the dropdown renders under the modal's dropdownParent). */
.aui-s2-drop.select2-dropdown,
#default_modal_content .select2-dropdown,
#transaction_modal_content .select2-dropdown { border: 1px solid var(--aui-border); border-radius: var(--aui-radius); box-shadow: var(--aui-shadow-lg); overflow: hidden; }
.aui-s2-drop .select2-search--dropdown,
#default_modal_content .select2-search--dropdown,
#transaction_modal_content .select2-search--dropdown { padding: 8px; }
.aui-s2-drop .select2-search__field,
#default_modal_content .select2-search__field,
#transaction_modal_content .select2-search__field { border: 1px solid var(--aui-border) !important; border-radius: 8px; padding: 8px 10px; outline: none; }
.aui-s2-drop .select2-search__field:focus,
#default_modal_content .select2-search__field:focus,
#transaction_modal_content .select2-search__field:focus { border-color: var(--aui-accent) !important; box-shadow: 0 0 0 3px var(--aui-accent-soft); }
.aui-s2-drop .select2-results__option,
#default_modal_content .select2-results__option,
#transaction_modal_content .select2-results__option { font-size: 13px; padding: 9px 12px; color: var(--aui-text); }
.aui-s2-drop .select2-results__option--highlighted[aria-selected],
#default_modal_content .select2-results__option--highlighted[aria-selected],
#transaction_modal_content .select2-results__option--highlighted[aria-selected] { background: var(--aui-accent) !important; color: #fff !important; }
.aui-s2-drop .select2-results__option[aria-selected="true"],
#default_modal_content .select2-results__option[aria-selected="true"],
#transaction_modal_content .select2-results__option[aria-selected="true"] { background: var(--aui-accent-soft); color: var(--aui-text); }

/* ============ jQuery UI datepicker — one z-index for the whole app ============
 * jQuery UI appends #ui-datepicker-div to <body>, so it competes with every modal.
 * Modals here run from Bootstrap's default 1055 up to #softcredit_modal at 4001, and
 * for a long time each page/form shipped its own !important override (1060, 1080,
 * 2100) — whichever happened to come last in the cascade won, so the picker landed
 * behind the modal on any page that guessed low. This single value clears them all.
 * A popup belongs above whatever opened it; do NOT re-declare this per page. */
#ui-datepicker-div { z-index: 4100 !important; }