/* ══════════════════════════════════════════════════════════════════
   1. FONT SETUP (Inter Variable, self-hosted) + 13px base size
   ══════════════════════════════════════════════════════════════════
   Files live in DashboardAssets/fonts/inter (Inter 4, SIL OFL — see
   LICENSE.txt there); no external font request. One variable file per
   style covers every weight 100–900.
   ══════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/InterVariable-Italic.woff2') format('woff2');
}

:root {
    --tblr-font-sans-serif: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    /* 13px app-wide. Tabler's own default is 0.875rem (14px). */
    --tblr-body-font-size: 0.8125rem;
}

body {
    font-family: var(--tblr-font-sans-serif) !important;
    font-size: var(--tblr-body-font-size);
}

/* Tabler hardcodes 0.875rem on these instead of using the body size —
   bring them to 13px too. The -sm / -lg variants keep their own sizes. */
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg),
.input-group-text {
    font-size: var(--tblr-body-font-size);
}

.btn:not(.btn-sm):not(.btn-lg) {
    --tblr-btn-font-size: var(--tblr-body-font-size);
}

.dropdown-menu {
    --tblr-dropdown-font-size: var(--tblr-body-font-size);
}

.pagination {
    --tblr-pagination-font-size: var(--tblr-body-font-size);
}

.toast {
    --tblr-toast-font-size: var(--tblr-body-font-size);
}


/* ══════════════════════════════════════════════════════════════════
   2. COLOR PALETTE OVERRIDE  —  #0054a6 → #530372 (Purple)
   ══════════════════════════════════════════════════════════════════
   Primary:        #530372  (83, 3, 114)
   Darken:         #4a0266  (~10% darker — hover / active)
   Light (lt):     #ede5f0  (badges, bg-subtle)
   Text emphasis:  #21012d  (dark text on light bg)
   BG subtle:      #e5d9e9  (alert / card backgrounds)
   Border subtle:  #c2a6cd  (subtle borders)
   Dark mode:      fill #8b3fc1, text accent #c9a0ec  (see 2.2)

   Hover / Active Strategy:
   btn-primary hover/active → rgba(83,3,114,0.80)
   80% opacity = premium "dim" feel — standard Tabler approach
   ══════════════════════════════════════════════════════════════════ */

/* ── 2.1 Light Mode Variables ───────────────────────────────────── */
:root,
:host,
[data-bs-theme=light] {
    --tblr-primary: #530372 !important;
    --tblr-primary-rgb: 83, 3, 114 !important;
    --tblr-primary-fg: var(--tblr-light) !important;
    --tblr-primary-darken: #4a0266 !important;
    --tblr-primary-lt: #ede5f0 !important;
    --tblr-primary-lt-rgb: 237, 229, 240 !important;
    --tblr-primary-text-emphasis: #21012d !important;
    --tblr-primary-bg-subtle: #e5d9e9 !important;
    --tblr-primary-border-subtle: #c2a6cd !important;

    --tblr-link-color: #530372 !important;
    --tblr-link-color-rgb: 83, 3, 114 !important;
    --tblr-link-hover-color: #42025b !important;
    --tblr-link-hover-color-rgb: 66, 2, 91 !important;

    --tblr-focus-ring-color: rgba(83, 3, 114, 0.25) !important;

    /* Tabler brand alias */
    --tblr-tabler: #530372 !important;
    --tblr-tabler-rgb: 83, 3, 114 !important;
    --tblr-tabler-darken: #4a0266 !important;
    --tblr-tabler-lt: #ede5f0 !important;

    /* Brand ACCENT — purple used as TEXT / icon / border colour (sidebar
       active link, .text-primary, focus borders...). Same as primary in
       light mode; see 2.2 for why it splits off in dark mode. */
    --wb-accent: #530372;
    --wb-accent-rgb: 83, 3, 114;
    --wb-accent-hover: #42025b;
    --wb-accent-bg: #ede5f0;      /* active sidebar item / soft tint */
}

/* ── 2.2 Dark Mode Variables ─────────────────────────────────────────
   #530372 is too dark for Tabler's dark surface (#182433): as a FILL
   (buttons, table / modal headers, checkboxes) it reads as a muddy
   near-black block, and as TEXT it is only 1.2:1 — invisible. So dark
   mode splits the brand colour in two:
   - fills use a lighter royal purple, #8b3fc1 (white text on it 5.9:1);
   - text / icon / border uses switch to the lavender --wb-accent
     (#c9a0ec: 7.3:1 on the surface, 5.8:1 on the #352e5a tint used for
     active items and *-lt badges).
   Tabler parts that colour TEXT with --tblr-primary get the accent in §9.1.
   ──────────────────────────────────────────────────────────────── */
[data-bs-theme=dark] {
    --tblr-primary: #8b3fc1 !important;
    --tblr-primary-rgb: 139, 63, 193 !important;
    --tblr-primary-fg: var(--tblr-light) !important;
    --tblr-primary-darken: #7a32ad !important;
    --tblr-primary-lt: #352e5a !important;
    --tblr-primary-lt-rgb: 53, 46, 90 !important;
    --tblr-primary-text-emphasis: #c9a0ec !important;
    --tblr-primary-bg-subtle: #231d3b !important;
    --tblr-primary-border-subtle: #4a3a73 !important;

    --tblr-link-color: #c9a0ec !important;
    --tblr-link-color-rgb: 201, 160, 236 !important;
    --tblr-link-hover-color: #dcc2f7 !important;
    --tblr-link-hover-color-rgb: 220, 194, 247 !important;

    --tblr-focus-ring-color: rgba(201, 160, 236, 0.25) !important;

    --tblr-tabler: #8b3fc1 !important;
    --tblr-tabler-rgb: 139, 63, 193 !important;
    --tblr-tabler-darken: #7a32ad !important;
    --tblr-tabler-lt: #352e5a !important;

    --wb-accent: #c9a0ec;
    --wb-accent-rgb: 201, 160, 236;
    --wb-accent-hover: #dcc2f7;
    --wb-accent-bg: #352e5a;
}

/* ── 2.3 Hardcoded Hex Overrides ────────────────────────────────────
   tabler.css uses raw #0054a6 hex in some selectors instead of CSS
   variables — un sab ko yahan override kiya gaya hai.
   ──────────────────────────────────────────────────────────────── */
.btn-link {
    color: var(--wb-accent) !important;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: var(--wb-accent-hover) !important;
}

.text-primary-emphasis {
    color: var(--tblr-primary-text-emphasis) !important;
}

.status-primary {
    --tblr-status-color: var(--wb-accent) !important;
}

.status-blue {
    --tblr-status-color: var(--wb-accent) !important;
}

.toast-primary {
    --tblr-toast-color: var(--wb-accent) !important;
}

.border-primary {
    border-color: var(--wb-accent) !important;
}

/* ── 2.4 Text on a primary fill ─────────────────────────────────────
   Tabler's .badge text is its grey --tblr-secondary, so a bg-primary
   badge with no text-* class (the list toolbar's filter count) is grey
   on purple — 3:1 in light mode, 1.3:1 on the dark-mode fill. Give it
   the fill's own foreground; text-* utilities (!important) still win.
   ──────────────────────────────────────────────────────────────── */
.badge.bg-primary {
    --tblr-badge-color: var(--tblr-primary-fg);
}


/* ══════════════════════════════════════════════════════════════════
   3. FORM INPUTS — Focus States & Number Spinners
   ══════════════════════════════════════════════════════════════════ */

/* ── 3.1 Focus border/shadow color (input, select, textarea) ───── */
input:focus {
    outline: none !important;
    border-color: var(--wb-accent) !important;
    box-shadow: none !important;
}

select:focus {
    outline: none !important;
    border-color: var(--wb-accent) !important;
    box-shadow: none !important;
}

textarea:focus {
    outline: none !important;
    border-color: var(--wb-accent) !important;
    box-shadow: none !important;
}

/* ── 3.2 Input Group (flat variant) focus state ─────────────────── */
.input-group-flat:focus-within,
.input-group-flat .form-control:focus {
    --tblr-input-focus-border-color: var(--wb-accent) !important;
    --tblr-primary: #530372;               /* agar box-shadow isi se ban rha ho */
    --tblr-input-btn-focus-color: rgba(83, 3, 114, .25) !important;

    outline: none !important;
    box-shadow: none !important;
    border-color: var(--wb-accent) !important;
}

/* ── 3.3 Readonly / Disabled cursor ─────────────────────────────── */
input[readonly],
textarea[readonly],
select[disabled] {
    cursor: not-allowed !important;
}

/* ── 3.4 Number input — hide spinner arrows ─────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/* ══════════════════════════════════════════════════════════════════
   4. TABLE HEADER STYLING
   ══════════════════════════════════════════════════════════════════ */
/* Brand fill: #530372 in light mode, the lighter #8b3fc1 in dark (§2.2). */
.wb-thead th {
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    background-color: var(--tblr-primary) !important;
}

.wb-thead-blue th {
   
    background-color: #7089ec3b !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. MODAL STYLING
   ══════════════════════════════════════════════════════════════════ */
.modal-header {
    background-color: var(--tblr-primary) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--tblr-primary-darken) !important;
}

.modal-header .modal-title {
    color: #fff !important;
}

/* Bootstrap close (X) button — white icon on purple header */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 1 !important;
}

.modal-header .btn-close:hover {
    opacity: .8 !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. ACCORDION — Active Chevron Icon Color
   (URL-encoded SVG fill, %23 = #)
   ══════════════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    color: var(--wb-accent) !important;
    --tblr-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23530372'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

[data-bs-theme=dark] .accordion-button:not(.collapsed) {
    --tblr-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a981b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}


/* ══════════════════════════════════════════════════════════════════
   7. SIDEBAR / VERTICAL NAVBAR
   ══════════════════════════════════════════════════════════════════ */

/* ── 7.0 Sidebar width (desktop) ───────────────────────────────────
   Tabler's default is 15rem; slimmer here. The page's left margin must
   match the width, so both read the same variable. The collapsed state
   (§11, body.sidebar-collapsed) is more specific and still wins with
   margin-left: 0. */
:root {
    --wb-sidebar-width: 15rem;
}

@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg {
        width: var(--wb-sidebar-width);
    }

    .navbar-expand-lg.navbar-vertical ~ .navbar,
    .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: var(--wb-sidebar-width);
    }
}

/* ── 7.1 Active nav-link left border accent ─────────────────────── */
.navbar-vertical .navbar-nav .nav-link.active,
.nav-vertical .nav-link.active {
    border-left-color: var(--wb-accent) !important;
}

/* ── 7.2 Remove default left active border (::after pseudo) ────── */
.navbar-vertical .nav-item.active::after,
.navbar-expand .nav-item.active::after,
.navbar-expand-sm .nav-item.active::after,
.navbar-expand-md .nav-item.active::after,
.navbar-expand-lg .nav-item.active::after,
.navbar-expand-xl .nav-item.active::after,
.navbar-expand-xxl .nav-item.active::after {
    display: none !important;
    content: none !important;
}

/* ── 7.3 Active link / icon / title color ───────────────────────── */
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
    color: var(--wb-accent) !important;
    background: transparent !important;
}

.navbar-vertical .nav-item.active > .nav-link svg,
.navbar-vertical .nav-item.active > .nav-link .icon {
    color: var(--wb-accent) !important;
    stroke: currentColor !important;
}

.navbar-vertical .nav-item.active > .nav-link .nav-link-title {
    color: var(--wb-accent) !important;
}

/* ── 7.4 Nav-link hover state ────────────────────────────────────── */
.navbar-vertical .nav-link:hover {
    color: var(--wb-accent) !important;
}

.navbar-vertical .nav-link:hover svg {
    color: var(--wb-accent) !important;
    stroke: currentColor !important;
}

/* ── 7.5 Sidebar dropdown item hover ────────────────────────────── */
.navbar-vertical .dropdown-item:hover,
.navbar-vertical .dropdown-item:focus {
    color: var(--wb-accent) !important;
}

.navbar-vertical .dropdown-item:hover {
    color: var(--wb-accent) !important;
    background: transparent !important;
}
/* ── 7.6 Active dropdown item — lt primary background ───────────── */
.navbar-vertical .dropdown-menu .dropdown-item.active,
.navbar-vertical .dropdown-item.active:hover,
.navbar-vertical .dropdown-item.active:focus {
    background-color: var(--wb-accent-bg) !important;
    color: var(--wb-accent) !important;
}


 

/* ── 7.7 Nav count badge — simple, small, static (no animation) ──── */
.nav-count-badge {
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    min-width: 16px;
}

/* ── 7.88 Ensure dropdown-toggle nav-links stay flex + vertically
   centered, so a badge placed inside never jumps to the top-right
   corner (it stays right-center, before the caret arrow) ────────── */
.navbar-vertical .nav-link.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
}

/* ── 7.9 Ensure dropdown-item flex items align nicely ───────────── */
.navbar-vertical .dropdown-item.d-flex {
    gap: 8px;
}

/* ── 7.10 Fix nav-count-badge absolute positioning (Tabler default
   places .badge on icons via position:absolute — breaks vertical
   centering when there's no icon, e.g. Approvals/Purchases links) ── */
.navbar-vertical .nav-link .nav-count-badge,
.navbar-vertical .dropdown-item .nav-count-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: center;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   8. SCROLLBARS — app-wide, vertical AND horizontal
   ══════════════════════════════════════════════════════════════════
   One design everywhere (sidebar, page, tables, modals, dropdowns,
   TomSelect lists...): a thin 3px thumb, transparent at rest, in the
   brand accent only while that scroll area is hovered, no arrow buttons.
   Colour follows the theme via --wb-accent-rgb (purple in light mode,
   lavender in dark — see §2). Replaces Tabler's grey `*`/.modal-body
   scrollbar rules.

   Why two branches: Chromium (Chrome/Edge/Brave 121+) switches to its
   own native scrollbar — arrow buttons included — and IGNORES every
   ::-webkit-scrollbar rule as soon as scrollbar-width / scrollbar-color
   are set on an element (Tabler sets scrollbar-color on `*`). So:
   - browsers that support ::-webkit-scrollbar (Chromium, Safari) get
     those properties reset to `auto` and are styled with the pseudo
     elements, which can hide the arrows and draw an exact 3px thumb;
   - Firefox (no ::-webkit-scrollbar) gets the standard properties.
   ══════════════════════════════════════════════════════════════════ */
@supports selector(::-webkit-scrollbar) {
    *,
    .modal-body {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    /* 9px hit area, but the transparent border + background-clip keep
       the visible thumb at 3px (it widens to 5px under the pointer). */
    *::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
        width: 9px;   /* vertical bars */
        height: 9px;  /* horizontal bars */
    }

    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-corner,
    .modal-body::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-corner {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb {
        background-color: transparent;
        background-clip: padding-box;
        border: 3px solid transparent;
        border-radius: 10px;
        box-shadow: none;
    }

    *:hover::-webkit-scrollbar-thumb,
    .modal-body:hover::-webkit-scrollbar-thumb {
        background-color: rgba(var(--wb-accent-rgb), 0.22);
        box-shadow: none;
    }

    *::-webkit-scrollbar-thumb:hover,
    .modal-body::-webkit-scrollbar-thumb:hover {
        background-color: rgba(var(--wb-accent-rgb), 0.4);
        border-width: 2px;
    }

    *::-webkit-scrollbar-button,
    .modal-body::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
}

@supports not selector(::-webkit-scrollbar) {
    *,
    .modal-body {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    *:hover,
    .modal-body:hover {
        scrollbar-color: rgba(var(--wb-accent-rgb), 0.22) transparent;
    }
}


/* ══════════════════════════════════════════════════════════════════
   9. DARK MODE — component fixes
   ══════════════════════════════════════════════════════════════════
   Tabler themes most components itself; these are the spots where
   either our dark brand purple or a light-only utility class would
   otherwise vanish or glare on the dark surface. Light mode untouched
   (every rule here is scoped to [data-bs-theme=dark]).
   Theme switch: Layouts/partials/theme-toggle.blade.php.
   ══════════════════════════════════════════════════════════════════ */

/* ── 9.1 Brand purple used as text / outline → lavender accent ──── */
[data-bs-theme=dark] .text-primary,
[data-bs-theme=dark] .link-primary,
[data-bs-theme=dark] .bg-primary-lt {
    color: var(--wb-accent) !important;
}

[data-bs-theme=dark] .link-primary:hover,
[data-bs-theme=dark] .link-primary:focus {
    color: var(--wb-accent-hover) !important;
}

[data-bs-theme=dark] .btn-outline-primary {
    --tblr-btn-color: var(--wb-accent);
    --tblr-btn-border-color: var(--wb-accent);
}

[data-bs-theme=dark] .btn-ghost-primary {
    --tblr-btn-color: var(--wb-accent);
}

/* Tabler parts that draw their active / selected TEXT in --tblr-primary
   (the fill — only 2.7:1 on the surface): status tabs (x-index.tabs),
   the current country in the switcher, alerts, ticked selectgroups. */
[data-bs-theme=dark] .nav-pills {
    --tblr-nav-pills-link-active-color: var(--wb-accent);
    --tblr-nav-pills-link-active-bg: var(--wb-accent-bg);
}

[data-bs-theme=dark] .dropdown-menu {
    --tblr-dropdown-link-active-color: var(--wb-accent);
}

[data-bs-theme=dark] .alert-primary {
    --tblr-alert-color: var(--wb-accent);
    --tblr-alert-link-color: var(--wb-accent);
}

/* :where() keeps Tabler's own weight, so a page that fills a ticked
   label itself (Roles/form: white on purple) still wins. */
:where([data-bs-theme=dark]) .form-selectgroup-input:checked + .form-selectgroup-label,
:where([data-bs-theme=dark]) .form-selectgroup-input:focus + .form-selectgroup-label {
    color: var(--wb-accent);
    border-color: var(--wb-accent);
}

:where([data-bs-theme=dark]) .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-title {
    color: var(--wb-accent);
}

/* A plain .btn (no colour variant) draws its pressed / toggled / open
   state in --tblr-primary — e.g. the Incl. / Excl. tax switch on Orders.
   Point it at the accent on that button, only in those states, so a
   bg-primary count badge inside a resting button keeps the fill.
   Coloured variants set their own active colours and never read it. */
[data-bs-theme=dark] .btn:not([class*="-primary"]):is(.active, .show, :active) {
    --tblr-primary: var(--wb-accent);
    --tblr-primary-rgb: var(--wb-accent-rgb);
}

/* A white pill on a coloured header keeps its dark purple text. */
[data-bs-theme=dark] .bg-white.text-primary {
    color: #530372 !important;
}

/* Inline <svg fill="#530372"> action (gear) icons in list tables —
   CSS beats a presentation attribute, so no per-view edits needed. */
[data-bs-theme=dark] svg[fill="#530372"] {
    fill: var(--wb-accent);
}

/* ── 9.2 Light-only utilities → dark surface equivalents ─────────── */
[data-bs-theme=dark] .bg-light {
    background-color: var(--tblr-bg-surface-secondary) !important;
    color: var(--tblr-body-color);
}

/* Not on a coloured badge (e.g. bg-warning text-dark keeps dark text). */
[data-bs-theme=dark] .text-dark:not([class*="bg-"]) {
    color: var(--tblr-body-color) !important;
}

/* ── 9.3 Contextual table rows/cells: pastel → tinted ────────────── */
[data-bs-theme=dark] .table-light,
[data-bs-theme=dark] .table-info,
[data-bs-theme=dark] .table-warning,
[data-bs-theme=dark] .table-success,
[data-bs-theme=dark] .table-danger,
[data-bs-theme=dark] .table-secondary,
[data-bs-theme=dark] .table-primary {
    --tblr-table-color: var(--tblr-body-color);
    --tblr-table-border-color: var(--tblr-border-color);
    --tblr-table-striped-color: var(--tblr-body-color);
    --tblr-table-active-color: var(--tblr-body-color);
    --tblr-table-hover-color: var(--tblr-body-color);
    color: var(--tblr-body-color);
    border-color: var(--tblr-border-color);
}

[data-bs-theme=dark] .table-light {
    --tblr-table-bg: var(--tblr-bg-surface-secondary);
    --tblr-table-striped-bg: #1f2e41;
    --tblr-table-active-bg: #1f2e41;
    --tblr-table-hover-bg: #1f2e41;
}

[data-bs-theme=dark] .table-info {
    --tblr-table-bg: rgba(66, 153, 225, .14);
    --tblr-table-striped-bg: rgba(66, 153, 225, .2);
    --tblr-table-active-bg: rgba(66, 153, 225, .24);
    --tblr-table-hover-bg: rgba(66, 153, 225, .2);
}

[data-bs-theme=dark] .table-warning {
    --tblr-table-bg: rgba(247, 103, 7, .14);
    --tblr-table-striped-bg: rgba(247, 103, 7, .2);
    --tblr-table-active-bg: rgba(247, 103, 7, .24);
    --tblr-table-hover-bg: rgba(247, 103, 7, .2);
}

[data-bs-theme=dark] .table-success {
    --tblr-table-bg: rgba(47, 179, 68, .14);
    --tblr-table-striped-bg: rgba(47, 179, 68, .2);
    --tblr-table-active-bg: rgba(47, 179, 68, .24);
    --tblr-table-hover-bg: rgba(47, 179, 68, .2);
}

[data-bs-theme=dark] .table-danger {
    --tblr-table-bg: rgba(214, 57, 57, .16);
    --tblr-table-striped-bg: rgba(214, 57, 57, .22);
    --tblr-table-active-bg: rgba(214, 57, 57, .26);
    --tblr-table-hover-bg: rgba(214, 57, 57, .22);
}

[data-bs-theme=dark] .table-secondary {
    --tblr-table-bg: rgba(255, 255, 255, .05);
    --tblr-table-striped-bg: rgba(255, 255, 255, .08);
    --tblr-table-active-bg: rgba(255, 255, 255, .1);
    --tblr-table-hover-bg: rgba(255, 255, 255, .08);
}

[data-bs-theme=dark] .table-primary {
    --tblr-table-bg: rgba(var(--wb-accent-rgb), .12);
    --tblr-table-striped-bg: rgba(var(--wb-accent-rgb), .18);
    --tblr-table-active-bg: rgba(var(--wb-accent-rgb), .22);
    --tblr-table-hover-bg: rgba(var(--wb-accent-rgb), .18);
}

/* ── 9.4 Bulk "Select all" bar (CashFlow/pending) ────────────────── */
.wb-select-bar {
    background: #fffbe6;
}

[data-bs-theme=dark] .wb-select-bar {
    background: rgba(245, 159, 0, .1);
}

/* ── 9.5 Coloured badge / text tones ─────────────────────────────
   Tabler keeps each hue at its light-mode strength in dark mode, so on
   the dark tints several fall below 4.5:1 (blue *-lt is 2.0:1, red and
   secondary ~3:1). Each is lightened toward white only as far as needed
   for 5:1 on its own *-lt tint — same hue, same meaning. A white pill
   (.bg-white) keeps the normal tone for contrast against white. */
[data-bs-theme=dark] .bg-blue-lt,
[data-bs-theme=dark] .text-blue:not(.bg-white) {
    color: #6b9ccb !important;
}

[data-bs-theme=dark] .bg-azure-lt,
[data-bs-theme=dark] .text-azure:not(.bg-white) {
    color: #57a4e4 !important;
}

[data-bs-theme=dark] .bg-info-lt,
[data-bs-theme=dark] .text-info:not(.bg-white) {
    color: #57a4e4 !important;
}

[data-bs-theme=dark] .bg-indigo-lt,
[data-bs-theme=dark] .text-indigo:not(.bg-white) {
    color: #7e95f1 !important;
}

[data-bs-theme=dark] .bg-purple-lt,
[data-bs-theme=dark] .text-purple:not(.bg-white) {
    color: #c87cda !important;
}

[data-bs-theme=dark] .bg-pink-lt,
[data-bs-theme=dark] .text-pink:not(.bg-white) {
    color: #e3749b !important;
}

[data-bs-theme=dark] .bg-red-lt,
[data-bs-theme=dark] .text-red:not(.bg-white) {
    color: #e37878 !important;
}

[data-bs-theme=dark] .bg-danger-lt,
[data-bs-theme=dark] .text-danger:not(.bg-white) {
    color: #e37878 !important;
}

[data-bs-theme=dark] .bg-teal-lt,
[data-bs-theme=dark] .text-teal:not(.bg-white) {
    color: #29b188 !important;
}

[data-bs-theme=dark] .bg-cyan-lt,
[data-bs-theme=dark] .text-cyan:not(.bg-white) {
    color: #31acc0 !important;
}

[data-bs-theme=dark] .bg-secondary-lt {
    color: #929ca6 !important;
}

[data-bs-theme=dark] .bg-muted-lt {
    color: #929ca6 !important;
}


/* ══════════════════════════════════════════════════════════════════
   10. ATTACHMENT MANAGER
   ══════════════════════════════════════════════════════════════════
   Shared by every create/edit form (Layouts/partials/
   attachment-manager.blade.php; behaviour in custom.js §5).
   ══════════════════════════════════════════════════════════════════ */
.attachment-manager .am-removed {
    text-decoration: line-through;
    opacity: .55;
}

.attachment-manager .am-file-list:empty {
    display: none;
}


/* ══════════════════════════════════════════════════════════════════
   11. DESKTOP SIDEBAR COLLAPSE (>=992px)
   ══════════════════════════════════════════════════════════════════
   body.sidebar-collapsed is set by custom-init.js before the page
   paints (remembered choice) and toggled by #sidebar-desktop-toggle
   in Layouts/header.blade.php (custom.js §2). Tabler's own
   .navbar-vertical rule already ships a `transition: transform .3s`
   at the lg breakpoint — this just slides it fully off-canvas and
   reclaims the space its siblings (.navbar / .page-wrapper) normally
   reserve for it via margin-left. Mobile's hamburger + Bootstrap
   collapse (#sidebar-menu) is untouched — see §12.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    body.sidebar-collapsed #app-sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-collapsed #app-sidebar ~ .navbar,
    body.sidebar-collapsed #app-sidebar ~ .page-wrapper {
        margin-left: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   12. MOBILE LAYOUT (<992px)
   ══════════════════════════════════════════════════════════════════
   Sidebar ka apna Tabler collapse behaviour chhera nahi gaya — sirf
   top row (toggler | brand | How to Use + theme + country + avatar)
   ko ek line par rakha gaya hai, kyunki header.blade d-none d-lg-flex
   hai aur phone par render hi nahi hota.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    #app-sidebar {
        position: sticky;
        top: 0;
        z-index: 1030;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }

    /* wrap ZAROORI hai: .navbar-collapse tabhi neeche apni row me
       jata hai. nowrap laga do to menu brand ke bagal me chala
       jata hai. */
    #app-sidebar > .container-fluid {
        flex-wrap: wrap;
        align-items: center;
        padding: .5rem .75rem;
    }

    #app-sidebar .navbar-toggler {
        flex: 0 0 auto;
        margin: 0;
    }

    #app-sidebar .navbar-brand {
        flex: 0 1 auto;
        margin: 0 .5rem;
        padding: 0;
    }

    #app-sidebar .navbar-brand-image {
        max-height: 32px;
        width: auto;
        object-fit: contain;
    }

    /* Help + theme + country + avatar: dayen taraf, ek hi line me.
       Spacing margin se nahi, gap se aati hai. */
    #app-sidebar .sidebar-mobile-actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: .25rem;
    }

    #app-sidebar .sidebar-mobile-actions > .nav-item,
    #app-sidebar .sidebar-mobile-actions > div {
        margin: 0 !important;
    }

    /* How to Use + dark/light icons: 40px tap target, bara icon. */
    #app-sidebar .sidebar-mobile-actions [data-theme-toggle],
    #app-sidebar .sidebar-mobile-actions .ix-mobile-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: .5rem;
    }

    #app-sidebar .sidebar-mobile-actions [data-theme-toggle] .ti,
    #app-sidebar .sidebar-mobile-actions .ix-mobile-icon .ti {
        font-size: 1.4rem;
    }

    #app-sidebar .sidebar-mobile-actions [data-theme-toggle]:hover,
    #app-sidebar .sidebar-mobile-actions .ix-mobile-icon:hover {
        background: rgba(128, 128, 128, .14);
    }

    /* §7.3 forces `background: transparent !important` on active
       nav-links; the ID here is what lets the tint win. */
    #app-sidebar .sidebar-mobile-actions .ix-mobile-icon.active {
        background: var(--wb-accent-bg) !important;
    }

    #app-sidebar .sidebar-mobile-actions a[aria-label="Switch country"] {
        min-height: 40px;
        padding: 0 .25rem;
    }

    #app-sidebar .sidebar-mobile-actions span:not(.avatar) {
        display: inline-block;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: .8125rem;
    }

    #app-sidebar .sidebar-mobile-actions .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }

    /* Menu apni poori row leta hai aur lamba hone par scroll. */
    #app-sidebar .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Desktop ka collapsed state mobile par leak na kare. */
    body.sidebar-collapsed #app-sidebar {
        transform: none !important;
    }

    body.sidebar-collapsed #app-sidebar ~ .navbar,
    body.sidebar-collapsed #app-sidebar ~ .page-wrapper {
        margin-left: 0 !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
        overflow-x: hidden;
    }

    .page-wrapper .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .page-header .page-title { font-size: 1.125rem; }
    .card-header { flex-wrap: wrap; gap: .5rem; }
    .btn-list { flex-wrap: wrap; }
    .footer .list-inline-item { flex-wrap: wrap; justify-content: center; }
}

/* Phone: icons ke sath country ka naam jagah nahi paata, sirf flag +
   caret dikhta hai (poora naam dropdown me hai). Pehle 400px tha; How to
   Use icon aane ke baad 480px tak naam ke sath row ek line me nahi aati. */
@media (max-width: 479.98px) {
    #app-sidebar .sidebar-mobile-actions span:not(.avatar) { display: none; }
}

/* Chhoti phones (360px wagera): row ek line me rakhne ke liye thora tight. */
@media (max-width: 389.98px) {
    #app-sidebar > .container-fluid {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    #app-sidebar .navbar-brand {
        margin: 0 .25rem;
    }

    #app-sidebar .navbar-brand-image {
        max-height: 28px;
    }

    #app-sidebar .sidebar-mobile-actions [data-theme-toggle],
    #app-sidebar .sidebar-mobile-actions .ix-mobile-icon {
        width: 36px;
        height: 36px;
    }
}