/* =========================================================================
   Al Hassan web theme system
   Mirrors lib/themes/app_palette.dart (8 seed colors) and app_theme.dart
   (14-16px rounded corners, flat/no-shadow surfaces with thin outlines,
   filled inputs, pill chips) so the web front-end and mobile app feel like
   one product.

   How it works: [data-theme-color] on <html> selects one of 8 palettes,
   [data-theme-mode="dark"] switches to the dark variant of that palette.
   Everything else in admin/*.blade.php should consume the CSS custom
   properties below (--surface, --primary, --radius, etc.) rather than
   hard-coded colors, so new pages automatically follow the active theme.
   ========================================================================= */

:root {
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --border-width: 1.6px;
    --font-sans: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Palette seeds (light mode) ---- */
html[data-theme-color="ocean"]   { --seed: #2563EB; }
html[data-theme-color="emerald"] { --seed: #059669; }
html[data-theme-color="indigo"]  { --seed: #6D28D9; }
html[data-theme-color="amber"]   { --seed: #D97706; }
html[data-theme-color="rose"]    { --seed: #E11D48; }
html[data-theme-color="slate"]   { --seed: #475569; }
html[data-theme-color="teal"]    { --seed: #0D9488; }
html[data-theme-color="crimson"] { --seed: #B91C1C; }

html {
    --primary: var(--seed, #2563EB);
    --primary-contrast: #ffffff;
    --bg: #F3F5F8;
    --surface: #ffffff;
    --surface-alt: #F7F8FA;
    --text: #1B1F27;
    --text-muted: #616873;
    --outline: #E1E4EA;
    --success: #059669;
    --danger: #DC2626;
    --warning: #D97706;
}

/* ---- Dark mode: same seed, dark surfaces ---- */
html[data-theme-mode="dark"] {
    --primary-contrast: #0E1116;
    --bg: #14171C;
    --surface: #1B1F27;
    --surface-alt: #20242D;
    --text: #E7E9EE;
    --text-muted: #9AA1AC;
    --outline: #2C313B;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

/* ---- Flat, rounded, outlined "card" surface used across the app ---- */
.ah-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: none;
}

.ah-card + .ah-card { margin-top: 16px; }

.ah-page-title {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--text);
    margin: 0 0 16px;
    text-align: left;
}

/* ---- Buttons: flat, rounded ---- */
.ah-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease, border-color .15s ease;
}
.ah-btn:hover { filter: brightness(0.94); text-decoration: none; }

/* ---- Dashboard quick-action row: equal-width buttons that wrap on narrow screens ---- */
.ah-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-quick-actions .ah-btn { flex: 1 1 110px; justify-content: center; }
.ah-btn-primary { background: var(--primary); color: var(--primary-contrast); }
.ah-btn-outline { background: transparent; border-color: var(--outline); color: var(--text); }
.ah-btn-danger { background: var(--danger); color: #fff; }

/* ---- Inputs: filled, borderless until focus ---- */
.ah-field {
    display: block;
    width: 100%;
    background: var(--surface-alt);
    border: var(--border-width) solid var(--outline);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--text);
    font-size: 0.95rem;
}
.ah-field:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
}

/* ---- Select2 (account/currency pickers): style.default.css (leftover
   pre-redesign vendor CSS, loaded earlier in css.blade.php) hardcodes the
   selection box to a white background with a bordered arrow segment via
   !important — clashes with dark mode and reads as two separate boxes
   glued together. Overridden here (loaded after it) to match .ah-field. ---- */
/* select2 wraps the box in an inline <span class="selection">, so the box
   shrank to its text instead of filling the container's width. */
.select2-container > .selection { display: block; }
.select2-container .select2-selection--single {
    width: 100%;
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
    border: var(--border-width) solid var(--outline) !important;
    border-radius: var(--radius) !important;
    height: 42px !important;
    padding: 0 !important;
    box-sizing: border-box;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--text) !important;
    line-height: 40px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    background-color: transparent !important;
    border-left: none !important;
    height: 40px !important;
    top: 0 !important;
    right: 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-muted) transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}
.select2-dropdown {
    background: var(--surface) !important;
    border: var(--border-width) solid var(--outline) !important;
    color: var(--text) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--surface-alt) !important;
    border: var(--border-width) solid var(--outline) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
}
.select2-container--default .select2-results__option {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected {
    background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
    color: var(--text) !important;
}

/* ---- Toggle switches (Settings: Single Currency, Show Profit Input, ...):
   a self-contained pill toggle independent of Bootstrap's .form-switch,
   which was rendering as a plain square checkbox here — likely a CSS
   specificity/appearance conflict with the legacy vendor stylesheet above. ---- */
.ah-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ah-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ah-toggle .ah-toggle-track {
    width: 44px;
    height: 24px;
    background: var(--surface-alt);
    border: var(--border-width) solid var(--outline);
    border-radius: 999px;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
    flex-shrink: 0;
}
.ah-toggle .ah-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform .15s ease;
}
.ah-toggle input:checked + .ah-toggle-track {
    background: var(--primary);
    border-color: var(--primary);
}
.ah-toggle input:checked + .ah-toggle-track::after {
    transform: translateX(20px);
}
.ah-toggle-label { color: var(--text); font-size: 0.9rem; }

/* Native date-picker calendar icon: browser-default light glyph clashes with
   dark surfaces — invert it so it reads as a light-on-dark icon instead of a
   jarring white square. Only the icon itself is themeable via CSS; the popup
   calendar body remains OS/browser-drawn. */
html[data-theme-mode="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) hue-rotate(180deg);
    cursor: pointer;
}

.ah-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ---- Pill chips / badges ---- */
.ah-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}
.ah-chip-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }

/* Ledger "Ref. Account" column — same soft badge treatment as the mobile
   app's ledger and the ledger PDF export's ref-badge class. */
.ah-ref-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--info, #2980b9) 14%, transparent);
    color: var(--info, #2980b9);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.ah-chip-danger  { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.ah-chip-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }

/* ---- Tables ---- */
.ah-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--outline); }
table.ah-table { width: 100%; border-collapse: collapse; background: var(--surface); }
table.ah-table th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-alt);
    padding: 10px 14px;
    border-bottom: 1px solid var(--outline);
    white-space: nowrap;
}
table.ah-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--outline);
    color: var(--text);
    font-size: 0.88rem;
}
table.ah-table tr:last-child td { border-bottom: none; }

/* ---- Sticky header (all .ah-table listings) ---- */
/* .ah-table-wrap already implicitly becomes a scroll container on both axes
   once overflow-x:auto is set (per the CSS spec: when one of overflow-x/y is
   non-"visible", the other is computed as "auto" too), so `position: sticky`
   on <thead> cells sticks relative to that wrap with no extra markup needed.
   Harmless on ledger/cash-book/trial-balance tables too (no visual change
   unless the wrap actually scrolls vertically, i.e. only with .ah-table-scroll
   below). */
table.ah-table thead th { position: sticky; top: 0; z-index: 2; }
table.ah-table tfoot th, table.ah-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface-alt);
    border-top: 2px solid var(--outline);
    font-weight: 700;
}

/* ---- Bounded-height internal scroll, opt-in per table (CP/CR/JV listings):
   DataTables already paginates these to 10-100 rows/page via the length
   menu, so a giant internal scrollbox isn't needed for the common case, but
   a user picking "100" rows/page can still produce a very tall table — cap
   it so the sticky thead/tfoot above actually have somewhere to stick,
   without shrinking short result sets. ---- */
/* Every DataTables listing opts in (initAhTable adds this class), so the header
   and totals footer stay pinned at any page size. The box fills the screen
   below the toolbar rather than a fixed 70vh, with a floor for short windows. */
.ah-table-wrap.ah-table-scroll { max-height: max(360px, calc(100vh - 240px)); overflow-y: auto; }

/* ---- Vertical column dividers for financial-statement tables (ledger/cash
   book/trial balance) where columns need clear separation but the rows
   aren't sortable/searchable (running balances would break under reorder). ---- */
table.ah-table.ah-table-bordered th,
table.ah-table.ah-table-bordered td {
    border-right: 1.5px solid var(--outline);
    border-bottom-width: 1.5px;
    font-size: 1rem;
}
/* Not scoped to :last-child — with the CP/CR/JV listings' two-row headers
   (currency group row + Credit/Debit sub-header row), the sub-row's last
   cell isn't actually the table's last column (Remarks/Action follow it),
   so a :last-child exclusion stripped the divider right before Remarks.
   Leaving the border on every cell, including the true last column, is
   harmless — just one extra line before the card's own edge. */
table.ah-table.ah-table-bordered th {
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
}
table.ah-table.ah-table-bordered td.text-center { text-align: center; }

/* ---- CP/CR/JV voucher listing tables: centered/bold headers (matching
   .ah-table-bordered's header treatment) scoped narrowly to these three
   tables' ids rather than the base .ah-table class, since other .ah-table
   listings elsewhere intentionally keep left-aligned headers. ---- */
#tbl-cpv th, #tbl-crv th, #tbl-jv th {
    text-align: center;
    font-weight: 700;
}

/* Leaderboard: all headings centered/bold, and numeric columns' data cells
   centered too (Name/Email stay left — those aren't numbers). */
#tbl-leaderboard th {
    text-align: center;
    font-weight: 700;
}
#tbl-leaderboard td.text-center { text-align: center; }

/* Users admin table: same treatment (Name/Email stay left). */
#tbl-users th {
    text-align: center;
    font-weight: 700;
}
#tbl-users td.text-center { text-align: center; }

/* Action column (edit + delete buttons): keep both buttons on one row
   regardless of viewport/column-squeeze — without this, two inline-flex
   .ah-btn anchors with no wrapping constraint stack top/bottom whenever the
   column narrows (DataTables auto column-width, small viewports, etc). */
.ah-table td.ah-actions {
    /* Must stay a real table cell: display:flex pulled the <td> out of the
       table layout, so its bottom border stopped lining up with the row (the
       stray divider through the middle of the Action column) and the buttons
       sat off centre. The buttons carry the spacing instead; width:1% shrinks
       the column to exactly what they need. */
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    width: 1%;
}
.ah-table td.ah-actions > .ah-btn { display: inline-flex; margin: 2px 3px; }

/* ---- Listings fill their card ---- */
.dataTables_wrapper { width: 100%; }
table.dataTable.ah-table { width: 100% !important; }

/* Bootstrap-version-independent helpers used by the newer pages. */
.ah-content .text-end { text-align: right; }
.ah-content .gap-2 { gap: .5rem; }

/* ---- Page header: title left, actions right ---- */
.ah-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ah-page-head .ah-page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ah-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Square, icon-only button (list actions). */
.ah-btn.ah-btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }

/* A read-only value drawn in the shape of a field, such as the bill number. */
.ah-field.ah-field-static { display: flex; align-items: center; font-weight: 700; cursor: default; min-height: 40px; }

/* ---- Purchase / sale bill form ----
   Tuned for density: the more lines fit on one screen, the less scrolling it
   takes to check a bill against the paper it was written on. Every rule here
   is spacing, never a figure that was dropped to make room. */
.ah-bill-head {
    display: grid;
    /* Bill no and date are as wide as their content ever gets; the party and
       the remarks share what is left, so every label sits on one line. */
    grid-template-columns: 130px 150px minmax(220px, 1.4fr) minmax(180px, 1fr);
    gap: 10px 14px;
    align-items: start;
}
.ah-bill-head > div { min-width: 0; }
.ah-bill-head .ah-section-title { margin: 0 0 4px; white-space: nowrap; }
/* One height for every control in the row, select2 included, so the fields
   line up instead of stepping down as each control sizes itself. */
.ah-bill-head .ah-field,
.ah-bill-head .select2-container .select2-selection--single { height: 38px; min-height: 38px; }
.ah-bill-head .select2-container .select2-selection__rendered { line-height: 36px; }
@media (max-width: 900px) { .ah-bill-head { grid-template-columns: 1fr 1fr; } }

.ah-bill-lines td { vertical-align: middle; padding: 4px 8px; }
.ah-bill-lines th { padding: 6px 8px; }
.ah-bill-lines .ah-field { padding: 5px 9px; height: 34px; }
.ah-bill-lines .select2-container .select2-selection--single { height: 34px; min-height: 34px; }
.ah-bill-lines .select2-container .select2-selection__rendered { line-height: 32px; }
.ah-bill-lines .line-no { color: var(--text-muted); }
.ah-bill-lines .line-amount { font-weight: 700; white-space: nowrap; }
.ah-bill-lines .line-item-cell { min-width: 240px; }
.ah-bill-lines .ah-btn-icon { padding: 5px 8px; }
/* No reserved height: an empty hint collapses its line away entirely. */
.line-hint { font-size: 0.72rem; line-height: 1.25; color: var(--text-muted); }
.line-hint:empty { display: none; }

/* The totals sit in the table's own foot, under the columns they add up, with
   the Add Item button on the same row — one band instead of a second card. */
.ah-bill-lines tfoot td { background: var(--surface-alt); border-top: 2px solid var(--outline); padding: 8px; }
.ah-bill-lines .ah-foot-items { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ah-bill-lines .ah-foot-count { font-weight: 700; white-space: nowrap; }
.ah-bill-lines .ah-foot-total { font-size: 1.15rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.ah-bill-lines .ah-foot-breakdown { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* The posting note: one line, so it costs a strip rather than a card. */
.ah-note-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 14px;
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.82rem;
}
.ah-note-row .ah-note-sep { opacity: .5; }

.ah-bill-totals .ah-total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.92rem; }
.ah-bill-totals .ah-total-net {
    border-top: 1px solid var(--outline);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}
.ah-bill-totals .ah-total-meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 6px; text-align: right; }

/* ---- Voucher entry form (JV): labelled fields on one aligned grid ----
   Two rows share the same columns, so each field sits under its partner:
   Date / Remarks, Credit A/C / Debit A/C, amounts under amounts, and
   Profit / Save in the last column. --ah-amount-cols is set on the element
   (1 or 2, depending on Single Currency). */
.ah-voucher-grid {
    display: grid;
    grid-template-columns:
        minmax(130px, 1fr)
        minmax(220px, 2.4fr)
        repeat(var(--ah-amount-cols, 1), minmax(130px, 1fr))
        minmax(130px, 1fr);
    gap: 12px 14px;
    /* start, not end: a select2 box is 42px and an input 40px, so bottom
       alignment left each label at a slightly different height. */
    align-items: start;
}
.ah-vfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ah-vfield > label {
    font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .03em; margin: 0;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    min-height: 18px;
}
.ah-vfield .select2-container { width: 100% !important; }
/* The rounded box itself must fill the column too — without this it shrank to
   the selected text while the arrow stayed at the far right. */
.ah-vfield .select2-container .select2-selection--single { width: 100% !important; display: block; }
.ah-vfield .ah-field, .ah-vfield .ah-btn { height: 42px; box-sizing: border-box; }
.ah-side-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ah-side-dot.credit { background: var(--success); }
.ah-side-dot.debit { background: var(--warning); }
.ah-vfield input[readonly] { background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface)); cursor: default; }
.ah-voucher-divider { grid-column: 1 / -1; height: 1px; background: var(--outline); margin: 2px 0; }
.ah-voucher-note {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 14px 0 0; font-size: 0.78rem; color: var(--text-muted);
}
.ah-voucher-note i { color: var(--info); margin-top: 2px; }
@media (max-width: 992px) {
    .ah-voucher-grid { grid-template-columns: 1fr 1fr; }
    .ah-voucher-grid .ah-vfield-wide, .ah-voucher-grid .ah-voucher-divider { grid-column: 1 / -1; }
    .ah-voucher-grid .ah-vspacer { display: none; }
}
@media (max-width: 520px) {
    .ah-voucher-grid { grid-template-columns: 1fr; }
}

/* ---- Dialog (receive payment on Dues & Aging) ---- */
dialog.ah-dialog {
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 20px 22px;
    width: min(420px, calc(100vw - 32px));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
dialog.ah-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ah-dialog-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
.ah-dialog-sub { color: var(--text-muted); font-size: .85rem; }

/* ---- Inventory reports ---- */
.ah-report-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ah-report-filters > div { min-width: 160px; }
.ah-report-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
table.ah-table tr.ah-group-band td { background: var(--surface-alt); font-weight: 700; }
table.ah-table tr.ah-group-subtotal td { font-weight: 700; border-top: 1.5px solid var(--outline); }
table.ah-table td.ah-indent { padding-left: 28px; }
.ah-stock-low { color: var(--danger); font-weight: 700; }

.ah-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ---- App shell: top bar + left nav ---- */
.ah-shell { display: flex; min-height: 100vh; }
.ah-sidebar {
    width: 184px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--outline);
    padding: 16px 12px;
    overflow: hidden;
    box-sizing: border-box;
    transition: width .2s ease, padding .2s ease, border-color .2s ease;
}
.ah-sidebar .brand { font-weight: 800; font-size: 0.95rem; padding: 8px 8px 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-nav-group { margin-bottom: 12px; }
.ah-nav-group h6 {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 0 8px; margin: 0 0 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-nav-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-size: 0.72rem; font-weight: 600;
    white-space: nowrap; overflow: hidden;
}
.ah-nav-link span { overflow: hidden; text-overflow: ellipsis; }
.ah-nav-link:hover, .ah-nav-link.active { background: var(--surface-alt); color: var(--primary); text-decoration: none; }
.ah-nav-link i { width: 14px; text-align: center; color: var(--text-muted); font-size: 0.78rem; }
.ah-nav-link:hover i, .ah-nav-link.active i { color: var(--primary); }

.ah-main { flex: 1; min-width: 0; }
.ah-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface); border-bottom: 1px solid var(--outline);
    padding: 10px 20px; position: sticky; top: 0; z-index: 20;
    gap: 8px;
}
/* Both direct groups (left: toggle+title, right: theme/settings/logout
   buttons) need to be allowed to shrink — without min-width:0 a flex child
   never shrinks below its content size, and on a narrow phone the combined
   natural width of both groups (toggle + username + 3 action buttons incl.
   a "Logout" text label) is wider than a 375-414px viewport, overflowing the
   sticky topbar horizontally. */
.ah-topbar > div { min-width: 0; }
.ah-topbar .title {
    font-weight: 700; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-content { padding: 20px; }

@media (max-width: 480px) {
    /* Reclaim width on very narrow phones: drop the "Logout" text label
       (icon stays, so the action is still available) and tighten gaps. */
    .ah-topbar { padding: 8px 12px; gap: 6px; }
    .ah-topbar > div { gap: 8px !important; }
    .ah-topbar .title { max-width: 90px; }
    #logout-form .ah-btn span,
    #logout-form .ah-btn { font-size: 0; gap: 0; padding: 9px 10px; }
    #logout-form .ah-btn i { font-size: 1rem; }
}

/* ---- Theme picker swatches ---- */
.ah-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
}
.ah-swatch.active { border-color: var(--text); }

/* ---- Stat cards (dashboard) ---- */
/* One row, however many cards there are: auto-flow column gives each card an
   equal share of the width instead of wrapping the last few onto a second
   line. Below the min width they scroll sideways rather than shrink into
   illegibility, and on a phone they go back to wrapping. */
.ah-stat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}
@media (max-width: 720px) {
    .ah-stat-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        overflow-x: visible;
    }
}
.ah-stat-card {
    background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
    min-width: 0;
}
.ah-stat-card:hover { border-color: var(--primary); text-decoration: none; color: inherit; }
.ah-stat-card .icon-row { display: flex; align-items: center; justify-content: space-between; }
.ah-stat-card .label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-stat-card .value { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.ah-stat-card .icon { width: 32px; height: 32px; flex-shrink: 0; font-size: .9rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }

/* ---- Sidebar toggle (hamburger button in topbar, always visible) ---- */
.ah-sidebar-toggle {
    display: inline-flex;
    background: transparent; border: var(--border-width) solid var(--outline);
    border-radius: var(--radius-sm); color: var(--text); width: 38px; height: 38px;
    align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem;
    flex-shrink: 0;
}
.ah-sidebar-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ---- Sidebar: a normal flex item in the page row, not an overlay — it
   collapses to zero width when closed (pushing the content to fill the
   space) instead of floating on top of the page content. Hidden by
   default; the hamburger toggle opens/closes it and the choice is
   remembered (see header.blade.php's localStorage-backed toggle script). ---- */
.ah-sidebar {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
}
body.ah-sidebar-open .ah-sidebar {
    width: 184px;
    padding: 16px 12px;
    border-right-color: var(--outline);
}

@media (max-width: 992px) {
    .ah-content { padding: 14px; }
}

/* =========================================================================
   DataTables — client-side sort + search bolted onto existing .ah-table
   listings (see initAhTable() in admin/js.blade.php). Overrides DataTables'
   own stock CSS (jquery.dataTables.min.css, loaded via CDN in admin/css.blade.php)
   so its search box / length menu / pagination / sort arrows read as part of
   the .ah-* theme instead of a foreign widget, in both light and dark mode.
   NOT applied to ac_ledger / cash_book / trail_balance (running-balance
   reports — see docs/web-redesign.md for why those are excluded).
   ========================================================================= */
.dataTables_wrapper { color: var(--text); font-size: 0.88rem; }

.dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_filter input {
    background: var(--surface-alt);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.88rem;
    margin-left: 0;
    min-width: 200px;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.dataTables_wrapper .dataTables_length { float: left; margin-bottom: 12px; }
.dataTables_wrapper .dataTables_length label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_length select {
    background: var(--surface-alt);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text);
}

/* DataTables Buttons extension (Excel export + Print), themed as .ah-btn-ish
   pills instead of the stock unstyled <button class="dt-button">. */
.ah-dt-buttons { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.dataTables_wrapper .dt-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.dataTables_wrapper .dt-buttons .dt-button.ah-dt-btn,
.dataTables_wrapper .dt-buttons button.dt-button {
    background: var(--surface-alt);
    border: var(--border-width) solid var(--outline);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dataTables_wrapper .dt-buttons .dt-button.ah-dt-btn:hover,
.dataTables_wrapper .dt-buttons button.dt-button:hover,
.dataTables_wrapper .dt-buttons .dt-button.ah-dt-btn:focus,
.dataTables_wrapper .dt-buttons button.dt-button:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
    outline: none;
}

.dataTables_wrapper .dataTables_info { color: var(--text-muted); font-size: 0.8rem; padding-top: 10px; }

.dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--outline) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 11px !important;
    margin-left: 4px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-alt) !important;
    border-color: var(--outline) !important;
    color: var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-muted) !important;
    background: var(--surface) !important;
    border-color: var(--outline) !important;
}

/* Sort arrows on table.ah-table headers */
table.ah-table.dataTable > thead > tr > th.sorting,
table.ah-table.dataTable > thead > tr > th.sorting_asc,
table.ah-table.dataTable > thead > tr > th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 24px !important;
}
table.ah-table.dataTable > thead > tr > th.sorting::before,
table.ah-table.dataTable > thead > tr > th.sorting::after,
table.ah-table.dataTable > thead > tr > th.sorting_asc::after,
table.ah-table.dataTable > thead > tr > th.sorting_desc::before {
    color: var(--text-muted);
    opacity: 0.6;
    right: 8px;
    bottom: auto;
}
table.ah-table.dataTable > thead > tr > th.sorting_asc::after,
table.ah-table.dataTable > thead > tr > th.sorting_desc::before {
    opacity: 1;
    color: var(--primary);
}
table.ah-table.dataTable tbody tr:hover > * { background: var(--surface-alt); }
table.ah-table.dataTable > tbody > tr.odd,
table.ah-table.dataTable > tbody > tr.even { background: transparent; }

@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { float: none; width: 100%; }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        /* The base rule's min-width:200px is a floor meant for wide layouts;
           on a narrow phone with the sidebar pushed open, available width can
           drop below 200px, and an unreset min-width would force this input
           wider than its card and overflow the page horizontally. */
        min-width: 0;
        margin-top: 4px;
    }
}

/* ---------------------------------------------------------------------------
   Bootstrap 5 gutter classes, backported.

   The views use `<div class="row g-2">` / `g-3` / `g-0` in 57 places, but this
   app ships Bootstrap *4*, where `.g-*` doesn't exist — the classes were
   silently dead, so every wrapped or stacked column sat flush against the row
   above it with zero vertical spacing (that's the cramped, "messy" look on
   multi-field forms like User Settings once columns wrap).

   Bootstrap 4's `.row` negative margins + `.col-*` 15px padding already give
   the HORIZONTAL gutter, so these only need to supply the vertical one.
   Values follow Bootstrap 5's spacer scale.
--------------------------------------------------------------------------- */
.row.g-1 { row-gap: 0.25rem; }
.row.g-2 { row-gap: 0.5rem; }
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }
.row.g-5 { row-gap: 3rem; }

/* g-0 means "no gutters at all" — cancel BS4's negative row margin and the
   matching column padding too, not just the row-gap. */
.row.g-0 { row-gap: 0; margin-right: 0; margin-left: 0; }
.row.g-0 > * { padding-right: 0; padding-left: 0; }

/* ---------------------------------------------------------------------------
   Voucher photo thumbnail + zoom lightbox.

   The mobile app has let users attach a photo to a CP/CR/JV voucher for a
   while (API\VouchersController::saveVoucherImage stores it under
   public/uploads/vouchers and returns the relative path), but the web admin
   never rendered it anywhere — no <img> existed in any voucher view. These
   back the fixed 100x100 thumbnail and the click-to-zoom overlay.
--------------------------------------------------------------------------- */
.ah-voucher-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--outline);
    background: var(--surface-alt);
    cursor: zoom-in;
    display: block;
}

.ah-voucher-thumb-empty {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 1px dashed var(--outline);
    background: var(--surface-alt);
    color: var(--muted, #9ca3af);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* Inside a listing the 100px thumbnail made every row ~120px tall and pushed
   the Action column off the right edge; a compact one still opens the zoom. */
.ah-table .ah-voucher-thumb,
.ah-table .ah-voucher-thumb-empty { width: 44px; height: 44px; margin: 0 auto; font-size: 15px; border-radius: 6px; }
table.dataTable.ah-table thead th { white-space: nowrap; }

.ah-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.85);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}

.ah-lightbox.show { display: flex; }

.ah-lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ah-lightbox .ah-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.85;
}

.ah-lightbox .ah-lightbox-close:hover { opacity: 1; }