/*Fastnet Design System v1.0 — CSS Tokens & Global Styles
                           Single Responsibility: owns all design tokens and global style overrides.
                           Never place layout or structure here; never place scripts here.*/
@font-face {
    font-family: 'SaudiRiyalSymbol';
    src: url('../../fonts/saudiriyalsymbol.woff2') format('woff2'),
url('../../fonts/saudiriyalsymbol.woff') format('woff'),
url('../../fonts/saudiriyalsymbol.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+20C1;
}

/* ═══════════════════════════════════════════════════
       DESIGN TOKENS — Light Theme (default)
    ═══════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
    --font-ui: 'Plus Jakarta Sans', sans-serif;
    --font-numeric: 'JetBrains Mono', monospace;
    --font-riyal-symbol: "SaudiRiyalSymbol","Noto Sans" ,"Noto Naskh Arabic", "Segoe UI Symbol",'sans-serif';
    --fn-footer-height: 49px;

    --bg-page: #EEF0F5;
    --bg-topbar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-sidebar: #17181C;
    --bg-input: #F4F5F8;

    --tx-h1: #0D0F14;
    --tx-h2: #1A1D2B;
    --tx-body: #1D2130;
    --tx-secondary: #4A5168;
    --tx-muted: #8C93A8;
    --tx-title-blue: #6B8BED;
    --tx-link: #3B5BDB;
    --tx-sidebar: #9099AF;
    --tx-sidebar-light: #b0bedf;
    --tx-sidebar-on: #FFFFFF;
    --tx-sidebar-lbl: #434C62;

    --accent: #3B5BDB;
    --accent-lt: #EEF2FF;
    --accent-glow: rgba(59, 91, 219, 0.15);

    --success: #2F9E44;
    --success-lt: #EBFBEE;
    --warning: #E67700;
    --warning-lt: #FFF3BF;
    --danger: #C92A2A;
    --danger-lt: #FFF5F5;
    --neutral: #495057;
    --neutral-lt: #F1F3F5;

    --border: #E2E5ED;
    --border-strong: #C8CDD9;
    --divider: #ECEEF3;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.09);

    --tab-active-bg: #17181C;
    --tab-active-tx: #FFFFFF;
    --tab-bg: #ECEEF3;
    --row-stripe: #FAFBFC;
    --row-stripe-odd: #ffffff;
    --row-hover: #F0F4FF;

    --sid-hover: rgba(255, 255, 255, 0.055);
    --sid-active: rgba(255, 255, 255, 0.10);

    --field-label-color: #8C93A8;
    --field-value-color: #1D2130;
    --section-head-color: #0D0F14;
    --gi-avatar-bg: #EEF2FF;
    --gi-avatar-tx: #3B5BDB;
    --active-tab-bg: #1C1F2A;
    --np-prgress-bg: #E2E5ED;
    --np-progress-bar: linear-gradient(to right, #4c6ef5, #74c0fc);
    --np-progress-glow: #74c0fc;
    --role-action-bg:hsl(0deg 0% 92% / 41%);;
}

/* ═══════════════════════════════════════════════════
       DESIGN TOKENS — Dark Theme
    ═══════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg-page: #0F1117;
    --bg-topbar: #161820;
    --bg-card: #1C1F2A;
    --bg-sidebar: #0F1117;
    --bg-input: #13151E;

    --tx-h1: #F4F6FF;
    --tx-h2: #E2E6F5;
    --tx-body: #C8CDDD;
    --tx-secondary: #8A93AD;
    --tx-muted: #8C93A8;
    --tx-title-blue: #6B8BED;
    --tx-link: #7B9CFF;
    --tx-sidebar: #6B7288;
    --tx-sidebar-on: #FFFFFF;
    --tx-sidebar-lbl: #333A52;

    --accent: #5C7CFA;
    --accent-lt: rgba(92, 124, 250, 0.13);
    --accent-glow: rgba(92, 124, 250, 0.20);

    --success: #40C057;
    --success-lt: rgba(64, 192, 87, 0.12);
    --warning: #FCC419;
    --warning-lt: rgba(252, 196, 25, 0.12);
    --danger: #FA5252;
    --danger-lt: rgba(250, 82, 82, 0.12);
    --neutral: #ADB5BD;
    --neutral-lt: rgba(173, 181, 189, 0.12);

    --border: #252836;
    --border-strong: #323649;
    --divider: #262a3f;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.5);

    --tab-active-bg: #EEF0F8;
    --tab-active-tx: #0F1117;
    --tab-bg: #1C1F2A;
    --row-stripe: rgba(255, 255, 255, 0.015);
    --row-stripe-odd: rgba(36, 36, 36, 0.015);
    --row-hover: rgba(92, 124, 250, 0.07);

    --sid-hover: rgba(255, 255, 255, 0.04);
    --sid-active: rgba(255, 255, 255, 0.08);

    --field-label-color: #6B8BED;
    --field-value-color: #D4D9EC;
    --section-head-color: #E2E6F5;
    --gi-avatar-bg: rgba(92, 124, 250, 0.15);
    --gi-avatar-tx: #7B9CFF;
    --active-tab-bg: #4569eb;
    --np-prgress-bg: #323649;
    --np-progress-bar: linear-gradient(to right, #5c7cfa, #a5d8ff);
    --np-progress-glow: #a5d8ff;
    --role-action-bg:#2D3748;
}

/* ═══════════════════════════════════════════════════
       BASE
    ═══════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui) !important;
    background-color: var(--bg-page) !important;
    color: var(--tx-body) !important;
    font-size: 14px;
    line-height: 1.65;
    overflow-y: auto;
    zoom: 1;
}

/* ── Scrollbar ── webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 8px;
    border: 2px solid var(--bg-page);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
}

::-webkit-scrollbar-corner {
    background: var(--bg-page);
}

/* ── Scrollbar ── Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--bg-page);
}

/* ── NProgress top bar ── */
#nprogress .bar {
    background: var(--np-progress-bar) !important;
    height: 3px !important;
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    z-index: 999999 !important;
    width: 100% !important;
}

#nprogress .peg {
    box-shadow: 0 0 12px var(--np-progress-glow), 0 0 6px var(--np-progress-glow) !important;
    opacity: 1;
}

@media (min-width: 1200px) {
    body {
        zoom: 0.9;
    }
}

button,
input,
select,
textarea {
    font-family: var(--font-ui) !important;
}

/* ═══════════════════════════════════════════════════
       TYPOGRAPHY
     ═══════════════════════════════════════════════════ */
h1,
.h1 {
    font-family: var(--font-ui) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    color: var(--tx-h1) !important;
}

h2,
.h2 {
    font-family: var(--font-ui) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--tx-h2) !important;
}

h3,
.h3 {
    font-family: var(--font-ui) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--tx-h1) !important;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    color: var(--tx-h2) !important;
}

.text-muted {
    color: var(--tx-muted) !important;
}

/* Utility: eyebrow / field label */
.fn-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
}

/* Utility: monospace data values */
.fn-mono,
.mono,
[data-font="numeric"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
.gi-value.mono,
.sum-value,
.prog-pct,
.perf-number,
.perf-rate,
.row-num,
.inv-no,
.date-val,
.amt,
#advance_balance,
#receivable_balance,
#payable_balance,
#avg_invoice_value,
#outstanding_amount,
#total_payments,
#total_invoices,
#total_items,
#total_services,
#avg_value,
.vno {
    font-family: var(--font-numeric) !important;
    font-variant-numeric: tabular-nums;
}

.fn-mono {
    font-size: 12.5px;
    font-weight: 500;
}

.fn-money {
    /* --fn-money-symbol-scale: 1.08;
        --fn-money-gap: 2px; */
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--font-numeric) !important;
    font-variant-numeric: tabular-nums;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.fn-money-sign,
.fn-money-symbol,
.fn-money-gap {
    font-family: var(--font-riyal-symbol) !important;
}

.fn-money-sign {
    margin-inline-end: 1px;
    color: inherit;
    font-weight: 700;
    font-size: 1em;
    line-height: 1;
}

.fn-money-symbol {
    font-size: calc(1em * var(--fn-money-symbol-scale));
    font-weight: 700;
    /* color: var(--tx-secondary); */
    line-height: 1;
    transform: translateY(0.02em);
}

.fn-money-gap {
    opacity: 0.65;
    margin: 0 var(--fn-money-gap);
}

.fn-money-value {
    font-weight: 600;
    font-size: 1.1em;
    line-height: inherit;
    letter-spacing: 0.01em;
    padding-top: 3px !important;
}

.fn-money-negative .fn-money-value {
    color:inherit;
}

.fn-money--compact {
    --fn-money-symbol-scale: 1.03;
    --fn-money-gap: 1px;
}

.fn-money--table {
    --fn-money-symbol-scale: 1.1;
    --fn-money-gap: 1.5px;
}

.fn-money--card {
    --fn-money-symbol-scale: 1;
    --fn-money-gap: 2px;
}

.fn-money--hero {
    --fn-money-symbol-scale: 1.16;
    --fn-money-gap: 3px;
}

table .fn-money,
.table .fn-money,
.dataTable .fn-money,
.dt-amount.fn-money,
.paymentFooter .fn-money {
    --fn-money-symbol-scale: 1.45;
    --fn-money-gap: 1.5px;
}

.metric-value .fn-money,
.vat-metric .fn-money,
h1 .fn-money,
h2 .fn-money,
.h1 .fn-money,
.h2 .fn-money,
.display-1 .fn-money,
.display-2 .fn-money,
.card .fn-mono .fn-money {
    --fn-money-symbol-scale: 1.20;
    --fn-money-gap: 2.5px;
}

.badge .fn-money,
.btn .fn-money,
small .fn-money,
.small .fn-money,
.dropdown-item .fn-money,
.nav-link .fn-money {
    --fn-money-symbol-scale: 1.03;
    --fn-money-gap: 1px;
}

.item-price-sale .fn-money-symbol,
.item-price-sale .fn-money-value {
    color: var(--success) !important;
}

.item-price-purchase .fn-money-symbol,
.item-price-purchase .fn-money-value {
    color: var(--accent) !important;
}
.fn-items-card{
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

/* ═══════════════════════════════════════════════════
       PAGE LAYOUT
    ═══════════════════════════════════════════════════ */
.wrapper {
    background-color: var(--bg-page) !important;
}

.body {
    padding: 24px 24px calc(24px + var(--fn-footer-height)) !important;
}

.fn-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.fn-page-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tx-h1);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.fn-page-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-muted);
    margin-top: 2px;
}

/* ── Customer / supplier card view (theme-aware) ──
       The cards are defined inline in customers/index + suppliers/index;
       these dark-theme overrides swap the hard-coded light colors so the
       same markup looks correct under both themes without touching the
       component-level CSS. */
[data-coreui-theme="dark"] .fn-record-card,
[data-theme="dark"] .fn-record-card {
    background: var(--bg-card, #1f2430) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tx-body, #e6e9ef);
}
[data-coreui-theme="dark"] .fn-record-card:hover,
[data-theme="dark"] .fn-record-card:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
}
[data-coreui-theme="dark"] .fn-record-card .fn-record-head,
[data-theme="dark"] .fn-record-card .fn-record-head {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-coreui-theme="dark"] .fn-record-card .fn-record-name,
[data-theme="dark"] .fn-record-card .fn-record-name {
    color: var(--tx-h1, #f3f4f6) !important;
}
[data-coreui-theme="dark"] .fn-record-card .fn-record-sub,
[data-coreui-theme="dark"] .fn-record-card .fn-record-meta,
[data-theme="dark"] .fn-record-card .fn-record-sub,
[data-theme="dark"] .fn-record-card .fn-record-meta {
    color: var(--tx-secondary, #c2c8d3) !important;
}
[data-coreui-theme="dark"] .fn-record-card .fn-record-meta .fn-meta-row i,
[data-theme="dark"] .fn-record-card .fn-record-meta .fn-meta-row i {
    color: var(--tx-muted, #8b93a3) !important;
}
[data-coreui-theme="dark"] .fn-record-card .fn-record-foot,
[data-theme="dark"] .fn-record-card .fn-record-foot {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* View-mode toggle (table / card) inactive button — light/dark variants */
[data-coreui-theme="dark"] .fn-view-toggle .btn,
[data-theme="dark"] .fn-view-toggle .btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tx-secondary, #c2c8d3) !important;
}
[data-coreui-theme="dark"] .fn-view-toggle .btn.active,
[data-theme="dark"] .fn-view-toggle .btn.active {
    background: linear-gradient(180deg, rgba(82, 110, 255, 0.85), rgba(53, 63, 87, 0.95)) !important;
    color: #fff !important;
    border-color: rgba(82, 110, 255, 0.4) !important;
}

/* Theme-safe override: a lot of admin pages use `<h1 class="text-dark">`,
       which Bootstrap pins to a literal dark color and looks unreadable in
       dark mode. Map it onto the design-token heading color instead. */
[data-coreui-theme="dark"] .text-dark,
[data-theme="dark"] .text-dark {
    color: var(--tx-h1) !important;
}
[data-coreui-theme="dark"] .card-header.bg-light,
[data-theme="dark"] .card-header.bg-light {
    background: var(--bg-page) !important;
    color: var(--tx-h1) !important;
}
[data-coreui-theme="dark"] .table-light,
[data-coreui-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th {
    background: var(--bg-page) !important;
    color: var(--tx-h1) !important;
}

/* ═══════════════════════════════════════════════════
       SIDEBAR — Always dark regardless of theme
    ═══════════════════════════════════════════════════ */
.sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
}

.sidebar-header {
    padding: 20px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar-brand {
    font-family: var(--font-ui) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.02em !important;
}

.sidebar-nav .nav-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--tx-sidebar-lbl);
    padding: 0 8px;
    margin-bottom: 4px;
}



.sidebar-nav .nav-link {
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    /* color: var(--tx-sidebar) !important; Old Color */
    color: var(--tx-sidebar-light) !important;
    margin: 0 10px 2px !important;
    padding: 8px 12px !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
}

.sidebar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: var(--sid-hover) !important;
    transform: translateX(1px);
}

.sidebar-nav .nav-link.active {
    color: var(--tx-sidebar-on) !important;
    background: var(--sid-active) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.sidebar-nav .nav-icon {
    color: var(--tx-sidebar) !important;
    transition: color 0.15s !important;
}

.sidebar-nav .nav-link:hover .nav-icon,
.sidebar-nav .nav-link.active .nav-icon {
    color: var(--tx-sidebar-on) !important;
}

.sidebar-nav .nav-icon.material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
    user-select: none;
}

.sidebar-nav .nav-group-toggle::after {
    filter: opacity(0.45) !important;
    margin-inline-end: 2px !important;
    color: var(--tx-sidebar-lbl) !important;
}

.sidebar-nav .nav-group.show>.nav-group-toggle::after {
    color: var(--tx-sidebar-lbl) !important;
    filter: opacity(0.8) !important;
}

.sidebar-nav .nav-group {
    margin-bottom: 2px !important;
}

.sidebar-nav .nav-group-items {
    padding: 2px 0 6px !important;
}

.sidebar-nav .nav-group-items .nav-link {
    font-size: 13.5px !important;
    margin-left: 20px !important;
    padding-left: 38px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
}

.sidebar-nav .nav-group-items .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 10px !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-50%) !important;
}

.sidebar-nav .nav-group-items .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar-nav .nav-group-items .nav-link.active {
    color: #FFFFFF !important;
}

.sidebar-nav .nav-group-items .nav-group .nav-link {
    margin-left: 28px !important;
    padding-left: 38px !important;
}

.sidebar-nav .nav-group-items .nav-group .nav-link::before {
    left: 18px !important;
}

.sidebar-nav .nav-group-items .nav-group-items .nav-link {
    margin-left: 38px !important;
}

.sidebar-nav .nav-group-items .nav-group-items .nav-link::before {
    left: 16px !important;
    width: 8px !important;
}

@media (max-width: 991.98px) {
    body {
        zoom: 1 !important;
    }

    .wrapper {
        --cui-sidebar-occupy-start: 0;
        --cui-sidebar-occupy-end: 0;
    }

    .sidebar {
        --cui-sidebar-width: min(16rem, calc(100vw - 24px));
        width: var(--cui-sidebar-width);
        max-width: calc(100vw - 24px);
        min-height: 100vh;
        min-height: 100dvh;
    }

    .sidebar-backdrop {
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
}

/* ═══════════════════════════════════════════════════
       TOPBAR / HEADER
    ═══════════════════════════════════════════════════ */
.header {
    background-color: var(--bg-topbar) !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    transition: box-shadow 0.2s ease !important;
    animation: fadeUp .38s ease backwards;
    animation-delay: .04s;
}

.header.shadow-sm {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.header-toggler {
    color: var(--tx-secondary) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: background 0.15s, color 0.15s !important;
}

.header-toggler:hover {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
}

.header .nav-link {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tx-secondary) !important;
}

.header .nav-link:hover {
    color: var(--accent) !important;
}

.fn-header-inner {
    height: 52px !important;
    padding: 0 20px !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.fn-breadcrumb-shell {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.breadcrumb {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.breadcrumb-item a {
    color: var(--tx-muted) !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.breadcrumb-item.active {
    color: var(--tx-secondary) !important;
    font-size: 13px !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--tx-muted) !important;
}

.fn-breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
    padding-top: 10px !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    animation: fn-breadcrumb-slide 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fn-breadcrumb .breadcrumb-item {
    opacity: 0;
    transform: translateY(-4px);
    animation: fn-breadcrumb-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fn-breadcrumb .breadcrumb-item:nth-child(1) { animation-delay: 0.05s; }
.fn-breadcrumb .breadcrumb-item:nth-child(2) { animation-delay: 0.12s; }
.fn-breadcrumb .breadcrumb-item:nth-child(3) { animation-delay: 0.19s; }
.fn-breadcrumb .breadcrumb-item:nth-child(4) { animation-delay: 0.26s; }
.fn-breadcrumb .breadcrumb-item:nth-child(n+5) { animation-delay: 0.32s; }

@keyframes fn-breadcrumb-slide {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fn-breadcrumb-item-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* RTL: mirror entry direction + flip default chevron separator */
[dir="rtl"] .fn-breadcrumb {
    animation-name: fn-breadcrumb-slide-rtl;
}
@keyframes fn-breadcrumb-slide-rtl {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .fn-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-right: 0.5rem !important;
    padding-left: 0 !important;
}
[dir="rtl"] .fn-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .fn-breadcrumb,
    .fn-breadcrumb .breadcrumb-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.fn-breadcrumb .breadcrumb-item {
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.fn-breadcrumb-link {
    display: inline-block !important;
    max-width: 100% !important;
    color: var(--tx-muted) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
}

.fn-breadcrumb-link:hover {
    color: var(--accent) !important;
}

.fn-breadcrumb-current {
    display: inline-block !important;
    max-width: 100% !important;
    color: var(--tx-body) !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fn-mobile-only {
    display: none !important;
}

.fn-business-switcher-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx-secondary);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.fn-business-switcher-trigger:hover,
.fn-business-switcher-trigger.show {
    background: rgba(59, 91, 219, 0.08);
    border-color: rgba(59, 91, 219, 0.14);
    color: var(--accent);
}

.fn-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.fn-lang-toggle,
.fn-dir-toggle,
.fn-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(59, 91, 219, 0.12) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)) !important;
    color: var(--tx-secondary) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(10px) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    cursor: pointer !important;
}

[data-theme="dark"] .fn-lang-toggle,
[data-theme="dark"] .fn-dir-toggle,
[data-theme="dark"] .fn-theme-toggle {
    background: linear-gradient(180deg, rgba(25, 33, 54, 0.95), rgba(16, 22, 38, 0.92)) !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.28) !important;
}

.fn-lang-toggle:hover,
.fn-dir-toggle:hover,
.fn-theme-toggle:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(59, 91, 219, 0.28) !important;
    color: var(--accent) !important;
    box-shadow: 0 14px 30px rgba(59, 91, 219, 0.18) !important;
}

.fn-lang-toggle {
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.fn-dir-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

.fn-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

.fn-theme-icon {
    pointer-events: none !important;
}

.fn-user-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    padding: 4px 6px 4px 4px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--tx-secondary) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.fn-user-trigger:hover,
.fn-user-trigger.show {
    background: var(--accent-lt) !important;
    border-color: rgba(59, 91, 219, 0.15) !important;
}

.fn-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: var(--gi-avatar-bg) !important;
    color: var(--gi-avatar-tx) !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(59, 91, 219, 0.08) !important;
}

.fn-user-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.fn-user-avatar-fallback {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

.fn-user-meta {
    text-align: left !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
}

.fn-user-name {
    max-width: 148px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--tx-h2) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

.fn-user-role,
.fn-user-menu-email {
    color: var(--tx-muted) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
}

.fn-user-caret {
    color: var(--tx-muted) !important;
    flex-shrink: 0 !important;
}

.fn-user-menu {
    min-width: 220px !important;
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-hover) !important;
}

.fn-user-menu-head {
    padding: 8px 10px 10px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--divider) !important;
}

.fn-user-menu-label {
    color: var(--tx-title-blue) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 3px !important;
}

.fn-user-menu .dropdown-item,
.fn-user-menu-item {
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: var(--tx-body) !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

button.fn-user-menu-item {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

.fn-user-menu .dropdown-item svg,
.fn-user-menu-item svg {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

.fn-user-menu .dropdown-item:hover,
.fn-user-menu-item:hover {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
}

.fn-user-menu-item.is-disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

.fn-user-menu-divider {
    height: 1px !important;
    background: var(--divider) !important;
    margin: 6px 2px !important;
}

.fn-user-menu-icon-shell {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: rgba(59, 91, 219, 0.08) !important;
    color: var(--accent) !important;
}

[data-theme="dark"] .fn-user-menu-icon-shell {
    background: rgba(59, 91, 219, 0.16) !important;
}

.fn-user-menu-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
}

.fn-user-menu-item-label {
    color: var(--tx-body) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.fn-user-menu-item-meta {
    color: var(--tx-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fn-user-menu-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(59, 91, 219, 0.10) !important;
    color: var(--accent) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    flex-shrink: 0 !important;
}

.fn-user-menu-item-danger {
    color: var(--danger) !important;
}

.fn-user-menu-item-danger:hover {
    background: var(--danger-lt) !important;
    color: var(--danger) !important;
}

.fn-table-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    vertical-align: middle !important;
}

.fn-table-actions.btn-group {
    gap: 6px !important;
}

.fn-table-actions .btn,
.fn-table-actions .change-invoice-status,
.fn-table-actions > a,
.fn-table-actions > button,
.fn-table-actions-form {
    margin: 0 !important;
}

.fn-table-actions-form {
    display: inline-flex !important;
}

.fn-table-actions > form,
.trash-action-group > form {
    display: inline-flex !important;
}

.fn-table-actions .btn,
.fn-table-actions .change-invoice-status {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(59, 91, 219, 0.12) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 249, 252, 0.96)) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

[data-theme="dark"] .fn-table-actions .btn,
[data-theme="dark"] .fn-table-actions .change-invoice-status {
    background: linear-gradient(180deg, rgba(25, 33, 54, 0.95), rgba(16, 22, 38, 0.94)) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.3) !important;
}

.fn-table-actions .btn:hover,
.fn-table-actions .change-invoice-status:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14) !important;
}

.fn-table-actions .btn i,
.fn-table-actions .change-invoice-status i {
    font-size: 13px !important;
    transition: color 0.18s ease !important;
}

.fn-table-actions .btn-info,
.fn-table-actions .btn-outline-info {
    color: var(--accent) !important;
    background: linear-gradient(180deg, rgba(232, 239, 255, 0.96), rgba(244, 247, 255, 1)) !important;
    border-color: rgba(59, 91, 219, 0.16) !important;
}

.fn-table-actions .btn-info i,
.fn-table-actions .btn-outline-info i,
.fn-table-actions .btn-info .text-white,
.fn-table-actions .btn-outline-info .text-white {
    color: var(--accent) !important;
}

.fn-table-actions .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--accent), #2f4dc4) !important;
    border-color: rgba(59, 91, 219, 0.36) !important;
    box-shadow: 0 10px 20px rgba(59, 91, 219, 0.22) !important;
}

.fn-table-actions .btn-primary i,
.fn-table-actions .btn-primary .text-white {
    color: #ffffff !important;
}

.fn-table-actions .btn-secondary {
    color: var(--tx-secondary) !important;
    background: linear-gradient(180deg, rgba(242, 244, 248, 1), rgba(249, 250, 252, 1)) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.fn-table-actions .btn-secondary i,
.fn-table-actions .btn-secondary .text-white {
    color: var(--tx-secondary) !important;
}

.fn-table-actions .btn-success {
    color: var(--success) !important;
    background: linear-gradient(180deg, rgba(231, 250, 236, 0.96), rgba(244, 253, 247, 1)) !important;
    border-color: rgba(43, 138, 62, 0.2) !important;
}

.fn-table-actions .btn-success i,
.fn-table-actions .btn-success .text-white {
    color: var(--success) !important;
}

.fn-table-actions .btn-warning {
    color: var(--warning) !important;
    background: linear-gradient(180deg, rgba(255, 245, 214, 0.98), rgba(255, 250, 232, 1)) !important;
    border-color: rgba(245, 159, 11, 0.24) !important;
}

.fn-table-actions .btn-warning i,
.fn-table-actions .btn-warning .text-white {
    color: var(--warning) !important;
}

.fn-table-actions .btn-danger {
    color: var(--danger) !important;
    background: linear-gradient(180deg, rgba(255, 235, 234, 0.98), rgba(255, 246, 245, 1)) !important;
    border-color: rgba(201, 42, 42, 0.22) !important;
}

.fn-table-actions .btn-danger i,
.fn-table-actions .btn-danger .text-white {
    color: var(--danger) !important;
}

.fn-table-actions .btn-info:hover,
.fn-table-actions .btn-outline-info:hover {
    border-color: rgba(59, 91, 219, 0.3) !important;
    box-shadow: 0 14px 26px rgba(59, 91, 219, 0.14) !important;
}

.fn-table-actions .btn-primary:hover {
    border-color: rgba(59, 91, 219, 0.42) !important;
    box-shadow: 0 16px 28px rgba(59, 91, 219, 0.28) !important;
}

.fn-table-actions .btn-success:hover {
    border-color: rgba(43, 138, 62, 0.3) !important;
    box-shadow: 0 14px 26px rgba(43, 138, 62, 0.16) !important;
}

.fn-table-actions .btn-warning:hover {
    border-color: rgba(245, 159, 11, 0.3) !important;
    box-shadow: 0 14px 26px rgba(245, 159, 11, 0.18) !important;
}

.fn-table-actions .btn-danger:hover {
    border-color: rgba(201, 42, 42, 0.3) !important;
    box-shadow: 0 14px 26px rgba(201, 42, 42, 0.16) !important;
}

.fn-table-actions--pill .btn,
.trash-action-group .btn {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    gap: 8px !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.trash-action-group,
.fn-table-actions--pill {
    justify-content: flex-start !important;
}

@media (max-width: 767.98px) {
    .fn-table-actions {
        justify-content: flex-start !important;
    }

    .fn-table-actions .btn,
    .fn-table-actions .change-invoice-status {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

/* ═══════════════════════════════════════════════════
       CARDS
    ═══════════════════════════════════════════════════ */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card:hover {
    box-shadow: var(--shadow-hover) !important;
}

.card-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 20px !important;
    border-radius: 14px 14px 0 0 !important;
}

.card-title {
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--section-head-color) !important;
    margin-bottom: 0 !important;
}

.card-body {
    padding: 20px !important;
}

/* Metric card accent stripes */
.card-accent-primary {
    border-left: 3px solid var(--accent) !important;
}

.card-accent-success {
    border-left: 3px solid var(--success) !important;
}

.card-accent-warning {
    border-left: 3px solid var(--warning) !important;
}

.card-accent-danger {
    border-left: 3px solid var(--danger) !important;
}

.card-accent-neutral {
    border-left: 3px solid var(--neutral) !important;
}

/* ═══════════════════════════════════════════════════
       DATA TABLES
    ═══════════════════════════════════════════════════ */
.table {
    font-family: var(--font-ui) !important;
    color: var(--tx-body) !important;
}

.table thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tx-title-blue) !important;
    background-color: var(--bg-page) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 11px 16px !important;
}

.table tbody td {
    font-size: 13px !important;
    color: var(--tx-body) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--divider) !important;
    vertical-align: middle !important;
}

.table tbody tr:nth-child(even) td {
    background-color: var(--row-stripe) !important;
}
.table tbody tr:nth-child(odd) td {
    background-color: var(--row-stripe-odd) !important;
}

.table tbody tr:hover td {
    background-color: var(--row-hover) !important;
    cursor: pointer !important;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    color: var(--tx-body) !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: var(--font-ui) !important;
    font-size: 12.5px !important;
    color: var(--tx-secondary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    border: 1px dotted gray !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════
       FORMS & INPUTS
    ═══════════════════════════════════════════════════ */
.form-control,
.form-select {
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    color: var(--tx-body) !important;
    padding: 8px 12px !important;
    height: 38px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    background-color: var(--bg-card) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--tx-muted) !important;
    font-weight: 400 !important;
}

.form-label {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--tx-secondary) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}

textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* ═══════════════════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════════════════ */
.btn {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    line-height: 1.4 !important;
    transition: all 0.15s ease !important;
}

.btn-sm {
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
}

.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--neutral-lt) !important;
    border-color: var(--border-strong) !important;
    color: var(--tx-secondary) !important;
}

.btn-primary:hover {
    background-color: #2f4dc4 !important;
    border-color: #2f4dc4 !important;
    box-shadow: 0 4px 12px rgba(59, 91, 219, 0.3) !important;
}

.btn-success:hover {
    background-color: #278a3a !important;
    border-color: #278a3a !important;
}

.btn-outline-primary {
    border: 1.5px solid var(--accent) !important;
    color: var(--accent) !important;
    background: transparent !important;
}

.btn-outline-secondary {
    border: 1.5px solid var(--border-strong) !important;
    color: var(--tx-secondary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--accent-lt) !important;
}

.btn-outline-secondary:hover {
    background: var(--neutral-lt) !important;
    color: var(--tx-body) !important;
}

/* ═══════════════════════════════════════════════════
       BADGES & STATUS PILLS
    ═══════════════════════════════════════════════════ */
.badge {
    font-family: var(--font-ui) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
}

.badge.bg-success,
.badge-success {
    background: var(--success-lt) !important;
    color: var(--success) !important;
}

.badge.bg-warning,
.badge-warning {
    background: var(--warning-lt) !important;
    color: var(--warning) !important;
}

.badge.bg-danger,
.badge-danger {
    background: var(--danger-lt) !important;
    color: var(--danger) !important;
}

.badge.bg-primary,
.badge-primary {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
}

.badge.bg-secondary {
    background: var(--neutral-lt) !important;
    color: var(--neutral) !important;
}

/* Semantic status chip */
.fn-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: var(--font-ui);
}

.fn-status-draft {
    background: var(--neutral-lt);
    color: var(--neutral);
}

.fn-status-pending {
    background: var(--warning-lt);
    color: var(--warning);
}

.fn-status-active,
.fn-status-paid,
.fn-status-accepted {
    background: var(--success-lt);
    color: var(--success);
}

.fn-status-overdue,
.fn-status-unpaid,
.fn-status-rejected {
    background: var(--danger-lt);
    color: var(--danger);
}

.fn-status-cancelled,
.fn-status-expired {
    background: var(--neutral-lt);
    color: var(--neutral);
}

.fn-status-partially-paid,
.fn-status-partially-refunded {
    background: var(--warning-lt);
    color: var(--warning);
}

.fn-status-refunded {
    background: var(--accent-lt);
    color: var(--accent);
}

.fn-status-item {
    background: var(--neutral-lt);
    color: var(--neutral);
}

.fn-status-service {
    background: var(--warning-lt);
    color: var(--warning);
}

/* ═══════════════════════════════════════════════════
       MODALS
    ═══════════════════════════════════════════════════ */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 24px !important;
}

.modal-title {
    font-family: var(--font-ui) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--tx-h1) !important;
}

.modal-body {
    padding: 24px !important;
    color: var(--tx-body) !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 16px 24px !important;
}

.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ═══════════════════════════════════════════════════
       DROPDOWN MENUS
    ═══════════════════════════════════════════════════ */
.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 6px !important;
}

.dropdown-item {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tx-body) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: background 0.1s !important;
}

.dropdown-item:hover {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
}

.dropdown-divider {
    border-color: var(--divider) !important;
    margin: 4px 0 !important;
}

/* ═══════════════════════════════════════════════════
       ALERTS
    ═══════════════════════════════════════════════════ */
.alert {
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 14px 18px !important;
}

.alert-success {
    background: var(--success-lt) !important;
    color: var(--success) !important;
}

.alert-warning {
    background: var(--warning-lt) !important;
    color: var(--warning) !important;
}

.alert-danger {
    background: var(--danger-lt) !important;
    color: var(--danger) !important;
}

.alert-info {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════
       TABS
    ═══════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    gap: 4px !important;
}

.nav-tabs .nav-link {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tx-secondary) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 10px 16px !important;
    transition: color 0.15s, background 0.15s !important;
}

.nav-tabs .nav-link:hover {
    color: var(--accent) !important;
    background: var(--accent-lt) !important;
}

.nav-tabs .nav-link.active {
    color: var(--tab-active-tx) !important;
    background: var(--tab-active-bg) !important;
}

/* ═══════════════════════════════════════════════════
       SELECT2 — Design System Override
    ═══════════════════════════════════════════════════ */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    background: var(--bg-input) !important;
    color: var(--tx-body) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.3rem 0.75rem !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.select2-container .select2-selection__rendered {
    color: var(--tx-body) !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
}

.select2-container .select2-selection__placeholder {
    color: var(--tx-muted) !important;
}

.select2-container .select2-selection__arrow {
    height: 36px !important;
    right: 0.5rem !important;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.select2-container .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    padding: 0.25rem 0.4rem !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--accent-lt) !important;
    border: 1px solid rgba(59, 91, 219, 0.2) !important;
    color: var(--accent) !important;
    border-radius: 999px !important;
    padding: 0.1rem 0.45rem !important;
    font-size: 0.8rem !important;
    font-family: var(--font-ui) !important;
}

.select2-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    z-index: 1065 !important;
    position: absolute !important;
    background: var(--bg-card) !important;
}

.select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: var(--font-ui) !important;
    color: var(--tx-body) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--accent) !important;
    color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    background: var(--bg-input) !important;
    color: var(--tx-body) !important;
}

.modal .select2-container--open {
    z-index: 1066 !important;
}

[dir="rtl"] .select2-container .select2-selection__rendered {
    padding-right: 0 !important;
    padding-left: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════ */
.footer {
    position: fixed !important;
    right: var(--cui-sidebar-occupy-end, 0) !important;
    bottom: 0 !important;
    left: var(--cui-sidebar-occupy-start, 0) !important;
    z-index: 1010 !important;
    min-height: var(--fn-footer-height) !important;
    background: var(--bg-topbar) !important;
    border-top: 1px solid var(--border) !important;
    padding: 14px 24px !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--tx-muted) !important;
}

.footer strong {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════
       ANIMATIONS — purposeful, max 400ms
    ═══════════════════════════════════════════════════ */
@keyframes fn-fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fn-anim-in {
    animation: fn-fadeUp 0.35s ease backwards;
}

.fn-anim-in:nth-child(1) {
    animation-delay: 0.04s;
}

.fn-anim-in:nth-child(2) {
    animation-delay: 0.08s;
}

.fn-anim-in:nth-child(3) {
    animation-delay: 0.12s;
}

.fn-anim-in:nth-child(4) {
    animation-delay: 0.16s;
}

/* ═══════════════════════════════════════════════════
       RESPONSIVE — mobile-first, 4px base grid
    ═══════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .body {
        padding: 16px 16px calc(16px + var(--fn-footer-height)) !important;
    }

    .fn-header-inner {
        padding: 0 16px !important;
        gap: 10px !important;
    }

    .fn-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wrapper {
        --cui-sidebar-occupy-start: 0;
    }

    .fn-user-meta {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .card-body {
        padding: 14px !important;
    }

    .fn-header-inner {
        padding: 0 12px !important;
    }

    .fn-breadcrumb-strip {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 991.98px) {
    .fn-desktop-only {
        display: none !important;
    }

    .fn-mobile-only {
        display: flex !important;
    }

    .fn-breadcrumb .breadcrumb-item:not(:last-child):not(:nth-last-child(2)) {
        display: none !important;
    }

    .fn-user-menu {
        min-width: min(280px, calc(100vw - 24px)) !important;
    }

    .fn-user-trigger {
        padding-right: 4px !important;
    }

    .fn-user-caret {
        display: none !important;
    }
}

/* PAGE */
.customer-detail-page {
    padding: 8px 8px 24px;
}

.customer-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.customer-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-tabs {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: var(--shadow-card);
    margin-bottom: 22px;
}

.customer-tabs::-webkit-scrollbar {
    display: none;
}

.customer-tab-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--tx-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.customer-tab-link:hover {
    background: var(--tab-bg);
    color: var(--tx-body);
}

.customer-tab-link.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-tx);
}

.customer-tab-link--external {
    gap: 5px;
    border-left: 1px solid var(--border);
    margin-left: 4px;
    padding-left: 14px;
    color: var(--tx-secondary);
}
.customer-tab-link--external:hover {
    color: var(--accent);
    background: var(--accent-lt);
}

.customer-tab-panel {
    animation: fn-fadeUp .28s ease backwards;
}

.customer-detail-page .bg-light-blue,
.customer-detail-page .bg-card {
    background: var(--bg-input) !important;
}

.customer-detail-page .text-muted-blue {
    color: var(--tx-secondary) !important;
}

.customer-detail-page .text-dark-blue {
    color: var(--tx-h1) !important;
}

.customer-detail-page .border-light-blue {
    border-color: var(--border) !important;
}

.customer-detail-page .table-responsive {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.customer-detail-page .table-responsive table {
    margin-bottom: 0 !important;
}

.customer-detail-page .row.g-3.mb-5>[class*="col-"]>.border,
.customer-detail-page .row.g-4>[class*="col-"]>.border {
    background: var(--bg-card);
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card);
    padding: 18px 20px !important;
    position: relative;
    overflow: hidden;
}

.customer-detail-page .row.g-3.mb-5>[class*="col-"]>.border::before,
.customer-detail-page .row.g-4>[class*="col-"]>.border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}

.customer-detail-page .row.g-4>[class*="col-"]:nth-child(2)>.border::before,
.customer-detail-page .row.g-3.mb-5>[class*="col-"]:nth-child(2)>.border::before {
    background: var(--warning);
}

.customer-detail-page .row.g-4>[class*="col-"]:nth-child(3)>.border::before,
.customer-detail-page .row.g-3.mb-5>[class*="col-"]:nth-child(3)>.border::before {
    background: var(--success);
}

.customer-detail-page .row.g-4>[class*="col-"] p:first-child,
.customer-detail-page .row.g-3.mb-5>[class*="col-"] p:first-child {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue) !important;
    margin-bottom: 8px !important;
}

.customer-detail-page .row.g-4>[class*="col-"] h5,
.customer-detail-page .row.g-3.mb-5>[class*="col-"] h5 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.04em;
    color: var(--tx-h1) !important;
    margin-bottom: 0 !important;
}

.customer-detail-page .table thead th {
    background: var(--bg-page) !important;
}

.page {
    padding: 28px 28px 52px;
    flex: 1;
}

.page-hd {
    margin-bottom: 12px;
}

.page-hd h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--tx-h1);
    letter-spacing: -.03em;
    line-height: 1.2;
}

.page-hd p {
    font-size: 13.5px;
    color: var(--tx-secondary);
    margin-top: 4px;
}

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tabs-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px;
    display: flex;
    gap: 3px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: var(--shadow-card);
}

.tabs-wrap::-webkit-scrollbar {
    display: none;
}

.tab {
    flex-shrink: 0;
    padding: 7px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--tx-secondary);
    border: none;
    background: none;
    transition: all .15s;
    white-space: nowrap;
    font-family: var(--font-ui);
}

.tab:hover {
    color: var(--tx-body);
    background: var(--tab-bg);
}

.tab.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-tx);
    font-weight: 700;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ══════════════════════════════════════════
   SECTION HEADER UTILITY
══════════════════════════════════════════ */
.section-label {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tx-h1);
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════
   GENERAL INFO — IMPROVED DESIGN
══════════════════════════════════════════ */
.gi-hero {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.gi-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--gi-avatar-bg);
    color: var(--gi-avatar-tx);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -.02em;
}

.gi-hero-body {
    flex: 1;
    min-width: 0;
}

.gi-hero-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--tx-h1);
    letter-spacing: -.025em;
    line-height: 1.25;
    margin-bottom: 4px;
}

.gi-hero-sub {
    font-size: 13px;
    color: var(--tx-secondary);
}

.gi-hero-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-active {
    background: var(--success-lt);
    color: var(--success);
}

.badge-warning {
    background: var(--warning-lt);
    color: var(--warning);
}

.badge-info {
    background: var(--accent-lt);
    color: var(--accent);
}

.badge-neutral {
    background: var(--neutral-lt);
    color: var(--neutral);
}

.gi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 16px;
}

.gi-card-head {
    padding: 16px 24px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gi-card-head-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-lt);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gi-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--section-head-color);
    letter-spacing: -.01em;
}

.gi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.gi-field {
    padding: 16px 24px;
    border-bottom: 1px solid var(--divider);
    position: relative;
}

.gi-field:nth-child(odd) {
    border-right: 1px solid var(--divider);
}

.gi-field.full {
    grid-column: 1 / -1;
    border-right: none;
}

/* remove bottom border from last row */
.gi-grid>.gi-field:nth-last-child(1),
.gi-grid>.gi-field:nth-last-child(2) {
    border-bottom: none;
}

.gi-grid>.gi-field.full:last-child {
    border-bottom: none;
}

.gi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 5px;
}

.gi-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--field-value-color);
    line-height: 1.45;
}

.gi-value.mono {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}

.gi-value.link {
    color: var(--tx-link);
    text-decoration: none;
    transition: opacity .15s;
}

.gi-value.link:hover {
    opacity: .75;
    text-decoration: underline;
}

.gi-value.empty {
    color: var(--tx-muted);
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
}

.gi-value.expiry-near {
    color: var(--warning);
}

/* ══════════════════════════════════════════
   FILTER BAR (shared: invoices / proforma)
══════════════════════════════════════════ */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flt-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    transition: all .15s;
    font-family: var(--font-ui);
}

.flt-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.flt-btn.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: opacity .15s;
}

.export-btn:hover {
    opacity: .88;
}

.refresh-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ══════════════════════════════════════════
   SUMMARY STAT CARDS (mini - 4 col)
══════════════════════════════════════════ */
.summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sum-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

.sum-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.sum-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}

.sum-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 8px;
}

.sum-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--tx-h1);
}

.sum-value.sm {
    font-size: 16px;
    letter-spacing: 0;
    font-family: var(--font-ui) !important;
}

.sum-card.c-success::before {
    background: var(--success);
}

.sum-card.c-warning::before {
    background: var(--warning);
}

.sum-card.c-danger::before {
    background: var(--danger);
}

/* ══════════════════════════════════════════
   PERFORMANCE BARS (proforma tab)
══════════════════════════════════════════ */
.perf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    margin-bottom: 22px;
}

.perf-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--tx-h1);
    letter-spacing: -.02em;
    margin-bottom: 20px;
}

.prog-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prog-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.prog-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-secondary);
}

.prog-pct {
    font-size: 12px;
    font-weight: 500;
    color: var(--tx-body);
}

.prog-track {
    height: 7px;
    background: var(--prog-track);
    border-radius: 10px;
    overflow: hidden;
}

.prog-fill {
    height: 100%;
    border-radius: 10px;
}

.pf-pending {
    background: var(--warning);
    width: 66.67%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.pf-accepted {
    background: var(--success);
    width: 33.33%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.pf-rejected {
    background: var(--danger);
    width: 0%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.pf-expired {
    background: var(--neutral);
    width: 0%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

/* vouchers perf */
.pf-voucher-approved {
    background: var(--success);
    width: 83%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.pf-voucher-pending {
    background: var(--warning);
    width: 11%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.pf-voucher-rejected {
    background: var(--danger);
    width: 6%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.perf-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 16px;
}

.perf-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 6px;
}

.perf-number {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
    color: var(--tx-h1);
}

.perf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    background: var(--success-lt);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.perf-rate-box {
    text-align: right;
    flex-shrink: 0;
}

.perf-rate-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 5px;
}

.perf-rate {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--success);
}

/* ══════════════════════════════════════════
   DATA TABLE (shared)
══════════════════════════════════════════ */
.list-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.list-toolbar {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    flex-wrap: wrap;
}

.show-entries {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tx-secondary);
    font-weight: 500;
}

.entries-select {
    padding: 5px 8px;
    border-radius: 7px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--tx-body);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-ui);
    outline: none;
    cursor: pointer;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg {
    position: absolute;
    left: 11px;
    color: var(--tx-muted);
    pointer-events: none;
}

.search-input {
    padding: 7px 12px 7px 34px;
    border-radius: 9px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--tx-body);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-ui);
    width: 210px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, width .2s;
}

.search-input::placeholder {
    color: var(--tx-muted);
    font-weight: 400;
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    width: 252px;
}

.vtable {
    width: 100%;
    border-collapse: collapse;
}

.vtable thead th {
    padding: 11px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    text-align: left;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.vtable tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--tx-body);
    font-weight: 500;
    transition: background .12s;
}

.vtable tbody tr:last-child td {
    border-bottom: none;
}

.vtable tbody tr:nth-child(even) td {
    background: var(--row-stripe);
}

.vtable tbody tr:hover td {
    background: var(--row-hover);
}

.row-num {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--tx-muted);
}

.inv-no {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-body);
    letter-spacing: .01em;
}

.date-val {
    font-size: 12px;
    color: var(--tx-secondary);
}

.amt {
    font-size: 13px;
    font-weight: 500;
}

/* status chips */
.s-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
}

.s-draft {
    background: var(--neutral-lt);
    color: var(--neutral);
}

.s-pending {
    background: var(--warning-lt);
    color: var(--warning);
}

.s-accepted {
    background: var(--success-lt);
    color: var(--success);
}

.s-rejected {
    background: var(--danger-lt);
    color: var(--danger);
}

.s-paid {
    background: var(--success-lt);
    color: var(--success);
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-ui);
}

.view-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-lt);
}

.pager {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    gap: 10px;
    flex-wrap: wrap;
}

.pager-info {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tx-muted);
}

.pager-ctrl {
    display: flex;
    gap: 4px;
}

.pg-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: var(--font-ui);
}

.pg-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-lt);
}

.pg-btn.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pg-btn:disabled {
    opacity: .28;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════
   VOUCHERS TAB SPECIFICS
══════════════════════════════════════════ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.sc-total::before {
    background: var(--accent);
}

.sc-pending::before {
    background: var(--warning);
}

.sc-approved::before {
    background: var(--success);
}

.sc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.sc-total .sc-icon {
    background: var(--accent-lt);
    color: var(--accent);
}

.sc-pending .sc-icon {
    background: var(--warning-lt);
    color: var(--warning);
}

.sc-approved .sc-icon {
    background: var(--success-lt);
    color: var(--success);
}

.sc-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 7px;
}

.sc-value {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--tx-h1);
}

.sc-pending .sc-value {
    color: var(--warning);
}

.sc-approved .sc-value {
    color: var(--success);
}

.sc-hint {
    font-size: 12px;
    color: var(--tx-muted);
    font-weight: 500;
    margin-top: 8px;
}

.filter-pills {
    display: flex;
    gap: 5px;
}

.pill {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    transition: all .15s;
    font-family: var(--font-ui);
}

.pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pill.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.vtype-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 7px;
}

.vt-sales {
    background: var(--accent-lt);
    color: var(--accent);
}

.vt-stock {
    background: var(--warning-lt);
    color: var(--warning);
}

.vno {
    font-size: 12px;
    font-weight: 400;
    color: var(--tx-secondary);
    letter-spacing: .02em;
}

.amt-debit {
    color: var(--danger);
}

.amt-credit {
    color: var(--success);
}

/* ══════════════════════════════════════════
   MOBILE
══════════════════════════════════════════ */
.mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 199;
    backdrop-filter: blur(2px);
}

@media (max-width: 900px) {
    .summary-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .sidebar {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease-in-out !important;
        will-change: transform, opacity;
    }

    .sidebar.open,
    .sidebar.show {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }

    .mob-overlay.show {
        display: block;
    }

    .sidebar-backdrop {
        transition: opacity 0.28s ease-in-out !important;
    }

    .main {
        margin-left: 0;
    }

    .ham-btn {
        display: flex;
    }

    .page {
        padding: 18px 16px 44px;
    }

    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .summary-row {
        grid-template-columns: 1fr 1fr;
    }

    .sc-value {
        font-size: 28px;
    }

    .perf-number {
        font-size: 34px;
    }

    .search-input {
        width: 155px;
    }

    .search-input:focus {
        width: 185px;
    }

    .col-vno,
    .col-debit,
    .col-credit,
    .col-due {
        display: none;
    }

    .topbar {
        padding: 0 16px;
    }

    .gi-grid {
        grid-template-columns: 1fr;
    }

    .gi-field:nth-child(odd) {
        border-right: none;
    }

    .gi-grid>.gi-field:nth-last-child(2) {
        border-bottom: 1px solid var(--divider);
    }

    .gi-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .summary-row {
        grid-template-columns: 1fr;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }

    .tab {
        font-size: 12px;
        padding: 6px 11px;
    }
}

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card {
    animation: fadeUp .4s ease backwards;
}

.stat-card:nth-child(1) {
    animation-delay: .04s;
}

.stat-card:nth-child(2) {
    animation-delay: .10s;
}

.stat-card:nth-child(3) {
    animation-delay: .16s;
}

.perf-card {
    animation: fadeUp .4s .18s ease backwards;
}

.list-card {
    animation: fadeUp .4s .24s ease backwards;
}

.sum-card {
    animation: fadeUp .38s ease backwards;
}

.sum-card:nth-child(1) {
    animation-delay: .03s;
}

.sum-card:nth-child(2) {
    animation-delay: .07s;
}

.sum-card:nth-child(3) {
    animation-delay: .11s;
}

.sum-card:nth-child(4) {
    animation-delay: .15s;
}

.gi-hero {
    animation: fadeUp .35s ease backwards;
}

.gi-card {
    animation: fadeUp .38s ease backwards;
}

.gi-card:nth-child(2) {
    animation-delay: .06s;
}

.gi-card:nth-child(3) {
    animation-delay: .12s;
}

/* Smooth fade-in for the entire main content wrapper.
       Sidebar is outside .body and stays fixed/static. */
main.body {
    animation: fn-content-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fn-content-fade-in {
    /* End on transform: none rather than translateY(0) — any value other
           than `none` keeps a stacking context alive on <main>, which would
           clip Bootstrap modals under the body-level backdrop. */
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Hide simplebar scrollbars until library initialises to avoid the
       brief flash of tracks/icons on the right edge of the sidebar. */
#sidebar .simplebar-track,
#sidebar .simplebar-scrollbar {
    opacity: 0;
    transition: opacity 0.25s ease;
}
#sidebar.simplebar-mouse-entered .simplebar-track,
#sidebar [data-simplebar].simplebar-hover .simplebar-track,
#sidebar:hover .simplebar-track {
    opacity: 1;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop) {
    animation: fadeUp .42s ease backwards;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop):nth-child(1) {
    animation-delay: .04s;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop):nth-child(2) {
    animation-delay: .10s;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop):nth-child(3) {
    animation-delay: .16s;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop):nth-child(4) {
    animation-delay: .22s;
}

.body > :not(script):not(style):not(.modal):not(.modal-backdrop):nth-child(5) {
    animation-delay: .28s;
}

.customer-tabs {
    animation: fadeUp .42s ease backwards;
    animation-delay: .10s;
}

.tabs-wrap {
    animation: fadeUp .42s ease backwards;
    animation-delay: .10s;
}

.customer-detail-page .row.g-3.mb-5>[class*="col-"]>.border,
.customer-detail-page .row.g-4>[class*="col-"]>.border,
.customer-detail-page .table-responsive {
    animation: fadeUp .42s ease backwards;
}

.customer-detail-page .row.g-4>[class*="col-"]:nth-child(1)>.border,
.customer-detail-page .row.g-3.mb-5>[class*="col-"]:nth-child(1)>.border {
    animation-delay: .04s;
}

.customer-detail-page .row.g-4>[class*="col-"]:nth-child(2)>.border,
.customer-detail-page .row.g-3.mb-5>[class*="col-"]:nth-child(2)>.border {
    animation-delay: .10s;
}

.customer-detail-page .row.g-4>[class*="col-"]:nth-child(3)>.border,
.customer-detail-page .row.g-3.mb-5>[class*="col-"]:nth-child(3)>.border {
    animation-delay: .16s;
}

.customer-detail-page .table-responsive {
    animation-delay: .22s;
}

@media (prefers-reduced-motion: reduce) {
    .header,
    .stat-card,
    .perf-card,
    .list-card,
    .sum-card,
    .gi-hero,
    .gi-card,
    .body > :not(script):not(style):not(.modal):not(.modal-backdrop),
    .customer-tabs,
    .tabs-wrap,
    .customer-detail-page .row.g-3.mb-5>[class*="col-"]>.border,
    .customer-detail-page .row.g-4>[class*="col-"]>.border,
    .customer-detail-page .table-responsive {
        animation: none !important;
    }

    .card,
    .sidebar-nav .nav-link,
    .header {
        transition: none !important;
    }

    .card:hover,
    .sidebar-nav .nav-link:hover {
        transform: none !important;
    }
}

.gi-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.gi-pill-success {
    background: var(--success-lt);
    color: var(--success);
}

.gi-pill-warning {
    background: var(--warning-lt);
    color: var(--warning);
}

.gi-pill-info {
    background: var(--accent-lt);
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════
       FASTNET MODALS
    ═══════════════════════════════════════════════════ */
.fn-modal .modal-dialog {
    padding: 18px 0;
}

.fn-modal .modal-content {
    position: relative;
    background: linear-gradient(180deg, var(--bg-topbar) 0%, var(--bg-card) 100%) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 80px var(--accent-glow), 0 0 0 1px var(--border) inset !important;
    overflow: hidden;
    backdrop-filter: blur(14px);
}

.fn-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    border: 0 !important;
    padding: 24px 84px 18px 28px !important;
    background: var(--bg-sidebar) !important;
    color: var(--tx-sidebar-on) !important;
}

.fn-modal .modal-header::after {
    content: "";
    position: absolute;
    inset: auto 28px 0;
    height: 1px;
    background: var(--border);
}

.fn-modal .modal-title,
.fn-modal .modal-header h4,
.fn-modal .modal-header h5 {
    color: var(--tx-sidebar-on) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
}

.fn-modal .modal-header small,
.fn-modal .modal-header p,
.fn-modal .modal-header .opacity-75,
.fn-modal .modal-header .opacity-90 {
    color: var(--tx-sidebar-light) !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.fn-modal .modal-icon,
.fn-modal .bg-white.bg-opacity-20,
.fn-modal .bg-white.bg-opacity-25,
.fn-modal .bg-secondary.bg-opacity-20 {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important;
    background: var(--sid-active) !important;
    border: 1px solid var(--sid-hover) !important;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 var(--sid-hover);
    color: var(--tx-sidebar-on) !important;
}

.fn-modal .modal-header .text-black,
.fn-modal .modal-header .bg-secondary.bg-opacity-20 .text-black {
    color: var(--tx-sidebar-on) !important;
}

.fn-modal .btn-close {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    top: 24px;
    right: 28px;
    border-radius: 12px;
    /* background-color: var(--border) !important; */
    background-size: 11px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* .fn-modal .btn-close:hover {
        background-color: var(--border-strong) !important;

    } */

.fn-modal .modal-body {
    background:
        linear-gradient(180deg, var(--bg-input) 0%, var(--bg-topbar) 100%) !important;
    padding: 24px 28px !important;
    max-height: 72vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.fn-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 18px 28px 22px !important;
    background: var(--bg-topbar) !important;
    border-top: 1px solid var(--divider) !important;
    backdrop-filter: blur(12px);
}

.fn-modal .progress-container,
.fn-modal .fn-modal-stepbar {
    margin: 12px 28px;
    padding: 18px 20px !important;
    background: linear-gradient(180deg, var(--accent-lt), var(--bg-topbar)) !important;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}

.fn-modal .step-line {
    height: 2px;
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--border));
}

.fn-modal .step-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

.fn-modal .step-circle,
.fn-modal .step-number {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-topbar) !important;
    border: 1px solid var(--border) !important;
    color: var(--tx-secondary) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: var(--shadow-card) !important;
    transition: all .18s ease;
}

.fn-modal .step-indicator .step-label,
.fn-modal .step-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tx-muted) !important;
}

.fn-modal .step-indicator.active .step-circle,
.fn-modal .step-indicator.active .step-number {
    background: linear-gradient(180deg, var(--accent), var(--tx-link)) !important;
    color: var(--tx-sidebar-on) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px var(--accent-glow) !important;
}

.fn-modal .step-indicator.completed .step-circle,
.fn-modal .step-indicator.completed .step-number {
    background: linear-gradient(180deg, var(--success), var(--success)) !important;
    color: var(--tx-sidebar-on) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px var(--success-lt) !important;
}

.fn-modal .step-indicator.active .step-label,
.fn-modal .step-indicator.completed .step-label {
    color: var(--tx-h1) !important;
}

.fn-modal .form-step,
.fn-modal .step-content {
    display: none;
    background: var(--bg-topbar);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    animation: fnModalFadeInUp .22s ease;
}

.fn-modal .form-step.active,
.fn-modal .step-content.active {
    display: block;
}

.fn-modal .step-header {
    margin-bottom: 22px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
}

.fn-modal .step-header h5,
.fn-modal .step-header h6 {
    color: var(--tx-h1) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.fn-modal .step-header p {
    color: var(--tx-secondary) !important;
    font-size: 12.5px !important;
    margin-top: 4px !important;
}

.fn-modal .alert,
.fn-modal .card.border-primary,
.fn-modal .fn-modal-highlight {
    background: linear-gradient(180deg, var(--accent-lt), var(--bg-topbar)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-card) !important;
}

.fn-modal .alert-info {
    background: linear-gradient(180deg, var(--accent-lt), var(--bg-topbar)) !important;
    border-color: var(--accent) !important;
    color: var(--tx-h1) !important;
}

.fn-modal .alert-success {
    background: linear-gradient(180deg, var(--success-lt), var(--bg-topbar)) !important;
    border-color: var(--success) !important;
    color: var(--tx-h1) !important;
}

.fn-modal .alert-warning {
    background: linear-gradient(180deg, var(--warning-lt), var(--bg-topbar)) !important;
    border-color: var(--warning) !important;
    color: var(--tx-h1) !important;
}

.fn-modal .alert-danger {
    background: linear-gradient(180deg, var(--danger-lt), var(--bg-topbar)) !important;
    border-color: var(--danger) !important;
    color: var(--tx-h1) !important;
}

.fn-modal .card,
.fn-modal .step-content .card {
    background: var(--bg-topbar) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
}

.fn-modal .card-header {
    background: linear-gradient(180deg, var(--bg-input), var(--bg-topbar)) !important;
    border-bottom: 1px solid var(--divider) !important;
    color: var(--tx-h1) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 16px 18px !important;
}

.fn-modal .card-body {
    padding: 18px !important;
}

.fn-modal .bg-light,
.fn-modal .bg-white {
    background-color: var(--bg-topbar) !important;
}

.fn-modal .text-primary,
.fn-modal .text-info {
    color: var(--accent) !important;
}

.fn-modal .text-success {
    color: var(--success) !important;
}

.fn-modal .text-warning {
    color: var(--warning) !important;
}

.fn-modal .text-danger {
    color: var(--danger) !important;
}

.fn-modal label,
.fn-modal .form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tx-title-blue) !important;
    margin-bottom: 6px !important;
}

.fn-modal .form-control,
.fn-modal .form-select,
.fn-modal textarea,
.fn-modal .form-floating > .form-control,
.fn-modal .form-floating > .form-select {
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-strong) !important;
    background: var(--bg-input) !important;
    color: var(--tx-body) !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
}

.fn-modal textarea {
    min-height: 118px !important;
}

.fn-modal .form-control:focus,
.fn-modal .form-select:focus,
.fn-modal textarea:focus,
.fn-modal .form-floating > .form-control:focus,
.fn-modal .form-floating > .form-select:focus {
    border-color: var(--accent) !important;
    background: var(--bg-topbar) !important;
    box-shadow: 0 0 0 4px var(--accent-glow) !important;
}

.fn-modal .form-floating > label {
    color: var(--tx-muted) !important;
}

.fn-modal .input-group-text {
    border-radius: 14px 0 0 14px !important;
    border: 1.5px solid var(--border-strong) !important;
    background: var(--bg-topbar) !important;
    color: var(--tx-secondary) !important;
    min-width: 58px;
    justify-content: center;
}

.fn-modal .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.fn-modal .input-group .form-control,
.fn-modal .input-group .form-select,
.fn-modal .input-group textarea.form-control {
    border-left: 0 !important;
    min-width: 0;
}

.fn-modal .input-group > .form-control:not(:last-child),
.fn-modal .input-group > .form-select:not(:last-child),
.fn-modal .input-group > textarea.form-control:not(:last-child) {
    border-radius: 0 !important;
    border-right: 0 !important;
}

.fn-modal .input-group > .form-control:last-child,
.fn-modal .input-group > .form-select:last-child,
.fn-modal .input-group > textarea.form-control:last-child {
    border-radius: 0 14px 14px 0 !important;
}

.fn-modal .translate-btn,
.fn-modal .btn-outline-info,
.fn-modal .btn-outline-primary,
.fn-modal .btn-outline-secondary {
    border-radius: 14px !important;
    border-width: 1.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.fn-modal .translate-btn {
    background: var(--accent-lt) !important;
    border-color: var(--border) !important;
    color: var(--accent) !important;
}

.fn-modal .input-group > .translate-btn,
.fn-modal .input-group > .btn-outline-info,
.fn-modal .input-group > .btn-outline-primary {
    min-width: 52px;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
}

.fn-modal .translate-btn:hover {
    background: var(--accent) !important;
    color: var(--tx-sidebar-on) !important;
    border-color: var(--accent) !important;
}

.fn-modal .btn-outline-info,
.fn-modal .btn-outline-primary {
    background: var(--accent-lt) !important;
    border-color: rgba(59, 91, 219, 0.16) !important;
    color: var(--accent) !important;
}

.fn-modal .btn-outline-info:hover,
.fn-modal .btn-outline-primary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--tx-sidebar-on) !important;
}

.fn-modal .btn-primary,
.fn-modal .btn-success,
.fn-modal .btn-info {
    background: linear-gradient(135deg, var(--accent), var(--tx-link)) !important;
    border: 0 !important;
    color: var(--tx-sidebar-on) !important;
    border-radius: 14px !important;
    min-height: 46px;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 12px 24px var(--accent-glow) !important;
}

.fn-modal .btn-success {
    background: linear-gradient(135deg, var(--success), var(--success)) !important;
    box-shadow: 0 12px 24px var(--success-lt) !important;
}

.fn-modal .btn-secondary,
.fn-modal .btn-light,
.fn-modal .btn-outline-secondary {
    background: var(--bg-topbar) !important;
    border: 1.5px solid var(--border-strong) !important;
    color: var(--tx-secondary) !important;
    border-radius: 14px !important;
    min-height: 46px;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.fn-modal .btn-primary:hover,
.fn-modal .btn-success:hover,
.fn-modal .btn-info:hover,
.fn-modal .btn-secondary:hover,
.fn-modal .btn-light:hover,
.fn-modal .btn-outline-secondary:hover {
    transform: translateY(-1px);
}

.fn-modal .upload-area {
    position: relative;
    min-height: 176px;
    border: 1.5px dashed var(--border-strong) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(244, 245, 248, 0.72), rgba(255, 255, 255, 0.98)) !important;
    box-shadow: none !important;
    transition: all .18s ease;
    padding: 12px !important;
}

.fn-modal .upload-area:hover,
.fn-modal .upload-area.dragover {
    border-color: var(--accent) !important;
    background: linear-gradient(180deg, rgba(59, 91, 219, 0.08), rgba(255, 255, 255, 1)) !important;
    transform: translateY(-1px);
}

.fn-modal .upload-area.has-file,
.fn-modal .upload-area.upload-success {
    border-color: rgba(47, 158, 68, 0.38) !important;
    background: linear-gradient(180deg, rgba(47, 158, 68, 0.08), rgba(255, 255, 255, 1)) !important;
}

.fn-modal .upload-content,
.fn-modal .upload-text {
    color: var(--tx-secondary) !important;
}

.fn-modal .upload-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--accent-lt);
    color: var(--accent);
    margin: 0 auto 12px;
}

.fn-modal .form-check-input {
    border-radius: 999px !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}

.fn-modal .form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.fn-modal .form-check-label,
.fn-modal .form-text,
.fn-modal .text-muted {
    color: var(--tx-secondary) !important;
}

.fn-modal .invalid-feedback {
    font-size: 12px !important;
    color: #C92A2A !important;
    font-weight: 600;
}

.fn-modal .was-validated .form-control:invalid,
.fn-modal .was-validated .form-select:invalid,
.fn-modal .was-validated textarea:invalid,
.fn-modal .form-control.is-invalid,
.fn-modal .form-select.is-invalid,
.fn-modal textarea.is-invalid {
    border-color: #C92A2A !important;
    background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 100%) !important;
    box-shadow: 0 0 0 4px rgba(201, 42, 42, 0.10) !important;
}

.fn-modal .was-validated .form-control:valid,
.fn-modal .was-validated .form-select:valid,
.fn-modal .was-validated textarea:valid,
.fn-modal .form-control.is-valid,
.fn-modal .form-select.is-valid,
.fn-modal textarea.is-valid {
    border-color: #2F9E44 !important;
    /* background: linear-gradient(180deg, #F4FFF8 0%, #FFFFFF 100%) !important; */
    box-shadow: 0 0 0 4px rgba(47, 158, 68, 0.10) !important;
}

.fn-modal .select2-hidden-accessible.is-invalid + .select2 .select2-selection--single,
.fn-modal .was-validated select:invalid + .select2 .select2-selection--single {
    border-color: #C92A2A !important;
    background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 100%) !important;
    box-shadow: 0 0 0 4px rgba(201, 42, 42, 0.10) !important;
}

.fn-modal .select2-hidden-accessible.is-valid + .select2 .select2-selection--single,
.fn-modal .was-validated select:valid + .select2 .select2-selection--single {
    border-color: #2F9E44 !important;
    background: linear-gradient(180deg, #F4FFF8 0%, #FFFFFF 100%) !important;
    box-shadow: 0 0 0 4px rgba(47, 158, 68, 0.10) !important;
}

.fn-modal .form-control.is-invalid + .translate-btn,
.fn-modal textarea.is-invalid + .translate-btn,
.fn-modal .was-validated .form-control:invalid + .translate-btn,
.fn-modal .was-validated textarea:invalid + .translate-btn {
    border-color: #C92A2A !important;
    color: #C92A2A !important;
    background: #FFF5F5 !important;
}

.fn-modal .form-control.is-valid + .translate-btn,
.fn-modal textarea.is-valid + .translate-btn,
.fn-modal .was-validated .form-control:valid + .translate-btn,
.fn-modal .was-validated textarea:valid + .translate-btn {
    border-color: #2F9E44 !important;
    color: #2F9E44 !important;
    background: #F4FFF8 !important;
}

.fn-modal .select2-container {
    width: 100% !important;
}

.fn-modal .select2-container--default .select2-selection--single,
.fn-modal .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-strong) !important;
    background: var(--bg-input) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
}

.fn-modal .select2-container--default .select2-selection--single .select2-selection__rendered,
.fn-modal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--tx-body) !important;
    line-height: 1.4 !important;
    padding-left: 0 !important;
    padding-right: 22px !important;
}

.fn-modal .select2-container--default .select2-selection--single .select2-selection__arrow,
.fn-modal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}

.fn-modal .select2-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-hover) !important;
    overflow: hidden;
}

.fn-modal .success-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: min(420px, calc(100% - 48px));
    text-align: center;
    background: linear-gradient(180deg, rgba(47, 158, 68, 0.08), rgba(255, 255, 255, 1));
    border: 1px solid rgba(47, 158, 68, 0.18);
    border-radius: 22px;
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
}

.fn-modal .success-animation .success-icon {
    margin-bottom: 12px;
}

.fn-modal .upload-input,
.fn-modal .file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fn-modal .upload-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(47, 158, 68, 0.20);
    background: linear-gradient(180deg, rgba(47, 158, 68, 0.08), rgba(255, 255, 255, 0.98));
}

.fn-modal .file-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(59, 91, 219, 0.08);
    color: var(--tx-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.fn-modal .upload-progress {
    margin-top: 14px;
}

.fn-modal .upload-progress .progress {
    height: 7px;
    border-radius: 999px;
    background: rgba(59, 91, 219, 0.08);
}

.fn-modal .upload-progress .progress-bar {
    background: linear-gradient(135deg, #3B5BDB, #2748CC);
}

.fn-modal .remove-file {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1px solid rgba(201, 42, 42, 0.14) !important;
    background: #FFFFFF !important;
    color: #C92A2A !important;
    box-shadow: none !important;
}

.fn-modal .remove-file:hover {
    background: #FFF5F5 !important;
}

@keyframes fnModalFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .fn-modal .modal-dialog {
        margin: 10px;
        padding: 0;
    }

    .fn-modal .modal-header,
    .fn-modal .modal-body,
    .fn-modal .modal-footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .fn-modal .modal-header {
        padding-right: 64px !important;
    }

    .fn-modal .btn-close {
        top: 18px;
        right: 18px;
    }

    .fn-modal .progress-container,
    .fn-modal .fn-modal-stepbar {
        margin: 0 18px;
        padding: 14px !important;
    }
}



/* Documents Filter  */

.fn-invoice-index-shell {
    display: grid;
    gap: 20px;
}

.fn-invoice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fn-invoice-filter-card {
    position: relative;
    overflow: hidden;
}

.fn-invoice-filter-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, var(--accent-glow), transparent 80%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.fn-invoice-filter-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: end;
}

.fn-invoice-filter-field {
    display: grid;
    gap: 8px;
}

.fn-invoice-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
}

.fn-invoice-filter-label i {
    font-size: 11px;
}

.fn-invoice-filter-select {
    min-height: 44px;
    border-radius: 12px !important;
    border-width: 1.5px !important;
    background: var(--bg-input) !important;
    padding-inline: 14px !important;
}

.fn-invoice-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-invoice-filter-note {
    position: relative;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--tx-muted);
}

.fn-invoice-filter-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--accent-lt);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .fn-invoice-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fn-invoice-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .fn-invoice-filter-grid {
        grid-template-columns: 1fr;
    }

    .fn-invoice-filter-actions {
        width: 100%;
    }

    .fn-invoice-filter-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Reports overview */

.fn-report-overview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.fn-report-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--divider);
    background:
        radial-gradient(circle at top right, var(--accent-glow), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.98));
}

[data-theme="dark"] .fn-report-overview-head {
    background:
        radial-gradient(circle at top right, rgba(92, 124, 250, 0.18), transparent 48%),
        linear-gradient(180deg, rgba(28, 31, 42, 0.98), rgba(28, 31, 42, 1));
}

.fn-report-overview-copy {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.fn-report-overview-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.fn-report-overview-icon {
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 15px;
    background: var(--accent-lt);
    color: var(--accent);
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(59, 91, 219, 0.08);
}

.fn-report-overview-icon .material-icons {
    font-size: 24px;
}

.fn-report-overview-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 4px;
}

.fn-report-overview-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tx-h1);
}

.fn-report-overview-subtitle {
    max-width: 720px;
    font-size: 13px;
    color: var(--tx-secondary);
    line-height: 1.7;
}

.fn-report-overview-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fn-report-overview-toolbar {
    padding: 18px 24px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(244, 245, 248, 0.78), rgba(255, 255, 255, 0.92));
}

[data-theme="dark"] .fn-report-overview-toolbar {
    background: linear-gradient(180deg, rgba(19, 21, 30, 0.96), rgba(28, 31, 42, 0.98));
}

.fn-report-overview-tabs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-report-tab-pill {
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--tx-secondary);
    border-radius: 12px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.fn-report-tab-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.fn-report-tab-pill.is-active {
    background: var(--tab-active-bg);
    color: var(--tab-active-tx);
    border-color: var(--tab-active-bg);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.fn-report-tab-pill .material-icons,
.filter-pill .material-icons {
    font-size: 16px;
}

.fn-report-filter-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.filter-pill {
    padding: 0 14px;
    min-height: 40px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    border: 1.5px solid;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.filter-pill:hover {
    transform: translateY(-1px);
}

.pill-default {
    border-color: var(--border-strong);
    color: var(--tx-secondary);
    background: transparent;
}

.pill-default:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-lt);
}

.pill-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 12px 24px var(--accent-glow);
}

.fn-report-panel {
    display: none;
    padding: 20px 24px 24px;
}

.fn-report-panel.is-active {
    display: block;
}

.fn-report-table-shell {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.fn-report-table-shell .table-responsive {
    padding: 4px 4px 0;
}

.fn-report-table-shell .dataTables_wrapper {
    padding: 14px 14px 16px;
}

.fn-report-table-shell .dataTables_length,
.fn-report-table-shell .dataTables_filter,
.fn-report-table-shell .dataTables_info,
.fn-report-table-shell .dataTables_paginate {
    margin: 0;
}

.fn-report-table-shell .dataTables_length label,
.fn-report-table-shell .dataTables_filter label {
    width: 100%;
    margin: 0;
    color: var(--tx-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fn-report-table-shell .dataTables_length select {
    min-width: 88px;
    min-height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--tx-body);
    margin: 0 8px;
    padding: 0 12px;
    box-shadow: none;
}

.fn-report-table-shell .dataTables_filter {
    display: flex;
    justify-content: flex-end;
}

.fn-report-table-shell .dataTables_filter input {
    width: min(320px, 100%);
    min-height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--tx-body);
    box-shadow: none;
    margin-left: 0;
    padding: 0 14px;
}

.fn-report-table-shell .dataTables_filter input:focus,
.fn-report-table-shell .dataTables_length select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
    outline: none;
}

.fn-report-table {
    width: 100% !important;
    margin: 0 !important;
}

.fn-report-table thead th {
    background: var(--bg-page) !important;
    color: var(--tx-title-blue) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border) !important;
}

.fn-report-table tbody td {
    color: var(--tx-body) !important;
    vertical-align: middle !important;
}

.fn-report-table.dataTable tbody tr {
    cursor: pointer;
}

.fn-report-table-shell .dataTables_paginate .paginate_button {
    min-width: 36px;
    height: 36px;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--tx-secondary) !important;
    background: transparent !important;
    margin-left: 6px !important;
}

.fn-report-table-shell .dataTables_paginate .paginate_button.current,
.fn-report-table-shell .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px var(--accent-glow);
}

.fn-report-table-shell .dataTables_paginate .paginate_button:hover {
    background: var(--accent-lt) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.fn-report-table-shell .dataTables_info {
    color: var(--tx-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

@media (max-width: 991.98px) {
    .fn-report-overview-head,
    .fn-report-overview-toolbar,
    .fn-report-panel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .fn-report-overview-head,
    .fn-report-overview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fn-report-overview-meta,
    .fn-report-filter-pills {
        justify-content: flex-start;
    }

    .fn-report-table-shell .dataTables_filter {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) {
    .fn-report-overview-title {
        font-size: 18px;
    }

    .fn-report-tab-pill,
    .filter-pill {
        width: 100%;
        justify-content: center;
    }

    .fn-report-filter-pills,
    .fn-report-overview-tabs {
        width: 100%;
    }

    .fn-report-table-shell .dataTables_wrapper {
        padding: 12px;
    }
}

/* Profit & loss report */

.fn-pl-shell {
    display: grid;
    gap: 20px;
}

.fn-pl-hero,
.fn-pl-filter-card,
.fn-pl-metric-card,
.fn-pl-panel,
.fn-pl-insight-card,
.fn-pl-comparison-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.fn-pl-hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background:
        radial-gradient(circle at top right, var(--accent-glow), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 1));
}

[data-theme="dark"] .fn-pl-hero {
    background:
        radial-gradient(circle at top right, rgba(92, 124, 250, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(28, 31, 42, 0.98), rgba(28, 31, 42, 1));
}

.fn-pl-hero-copy {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.fn-pl-hero-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
}

.fn-pl-hero-title {
    margin: 0;
    color: var(--tx-h1);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.fn-pl-hero-subtitle {
    margin: 0;
    max-width: 720px;
    color: var(--tx-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.fn-pl-hero-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fn-pl-filter-card {
    padding: 20px 22px;
}

.fn-pl-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: end;
}

.fn-pl-filter-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.fn-pl-filter-field {
    display: grid;
    gap: 8px;
}

.fn-pl-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
}

.fn-pl-filter-label .material-icons {
    font-size: 12px;
}

.fn-pl-filter-input {
    /* min-height: 46px !important; */
    border-radius: 14px !important;
    border: 1.5px solid var(--border-strong) !important;
    background: var(--bg-input) !important;
    color: var(--tx-body) !important;
    box-shadow: none !important;
    /* padding: 12px 14px !important; */
}

.fn-pl-filter-input:focus {
    border-color: var(--accent) !important;
    background: var(--bg-topbar) !important;
    box-shadow: 0 0 0 4px var(--accent-glow) !important;
}

.fn-pl-filter-toggle {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-input);
    padding: 0 14px;
}

.fn-pl-filter-toggle .form-check-input {
    margin-top: 0;
    box-shadow: none !important;
}

.fn-pl-filter-toggle .form-check-label {
    color: var(--tx-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.fn-pl-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fn-pl-quick-picks {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fn-pl-quick-picks-copy {
    display: grid;
    gap: 4px;
}

.fn-pl-quick-picks-copy strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
}

.fn-pl-quick-picks-copy span {
    font-size: 12.5px;
    color: var(--tx-muted);
}

.fn-pl-quick-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-pl-metric-card {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 18px;
}

.fn-pl-metric-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.fn-pl-metric-card.is-revenue::before {
    background: var(--success);
}

.fn-pl-metric-card.is-expense::before {
    background: var(--danger);
}

.fn-pl-metric-card.is-gross::before {
    background: var(--warning);
}

.fn-pl-metric-card.is-net::before {
    background: var(--accent);
}

.fn-pl-metric-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 12px;
}

.fn-pl-metric-value {
    color: var(--tx-h1);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.fn-pl-metric-meta {
    color: var(--tx-muted);
    font-size: 12px;
    font-weight: 600;
}

.fn-pl-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--divider);
}

.fn-pl-panel-title {
    margin: 0;
    color: var(--tx-h2);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fn-pl-panel-subtitle {
    color: var(--tx-muted);
    font-size: 12px;
    font-weight: 600;
}

.fn-pl-panel-body {
    padding: 20px;
}

.fn-pl-chart-wrap {
    position: relative;
    height: 360px;
}

.fn-pl-insight-card {
    padding: 18px;
    height: 100%;
}

.fn-pl-insight-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-title-blue);
    margin-bottom: 10px;
}

.fn-pl-insight-list {
    display: grid;
    gap: 12px;
}

.fn-pl-insight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
}

.fn-pl-insight-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fn-pl-insight-row strong {
    color: var(--tx-body);
    font-size: 12.5px;
    font-weight: 700;
}

.fn-pl-insight-row span {
    color: var(--tx-muted);
    font-size: 12px;
    font-weight: 600;
}

.fn-pl-comparison-card {
    padding: 18px 20px;
}

.fn-pl-comparison-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.fn-pl-comparison-head p {
    margin: 0;
    color: var(--tx-secondary);
    font-size: 13px;
}

.fn-pl-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fn-pl-change-tile {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(244, 245, 248, 0.64), rgba(255, 255, 255, 0.96));
}

[data-theme="dark"] .fn-pl-change-tile {
    background: linear-gradient(180deg, rgba(19, 21, 30, 0.84), rgba(28, 31, 42, 0.98));
}

.fn-pl-change-label {
    color: var(--tx-title-blue);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fn-pl-change-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px;
}

.fn-pl-change-value.is-positive {
    color: var(--success);
}

.fn-pl-change-value.is-negative {
    color: var(--danger);
}

.fn-pl-change-track {
    height: 8px;
    border-radius: 999px;
    background: var(--divider);
    overflow: hidden;
}

.fn-pl-change-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fn-pl-change-fill.is-positive {
    background: linear-gradient(135deg, var(--success), #38b24d);
}

.fn-pl-change-fill.is-negative {
    background: linear-gradient(135deg, var(--danger), #e35050);
}

.fn-pl-statement-table {
    width: 100%;
    border-collapse: collapse;
}

.fn-pl-statement-table thead th {
    padding: 12px 20px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    color: var(--tx-title-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.fn-pl-statement-table thead th:last-child,
.fn-pl-statement-table tbody td:last-child {
    text-align: right;
}

.fn-pl-statement-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--divider);
    color: var(--tx-body);
    font-size: 13px;
}

.fn-pl-statement-table tbody tr:last-child td {
    border-bottom: 0;
}

.fn-pl-statement-section td {
    background: var(--bg-page);
    color: var(--tx-title-blue) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fn-pl-statement-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fn-pl-statement-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    flex-shrink: 0;
}

.fn-pl-statement-amount.is-positive {
    color: var(--success);
}

.fn-pl-statement-amount.is-negative {
    color: var(--danger);
}

.fn-pl-statement-total td {
    font-weight: 800;
    color: var(--tx-h2);
    background: rgba(59, 91, 219, 0.04);
}

.fn-pl-statement-final td {
    background: linear-gradient(135deg, var(--accent-lt), rgba(255, 255, 255, 0.96));
    font-weight: 800;
    color: var(--tx-h1);
}

[data-theme="dark"] .fn-pl-statement-final td {
    background: linear-gradient(135deg, rgba(92, 124, 250, 0.16), rgba(28, 31, 42, 0.98));
}

.fn-pl-statement-note {
    color: var(--tx-muted);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .fn-pl-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fn-pl-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .fn-pl-filter-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .fn-pl-comparison-grid {
        grid-template-columns: 1fr;
    }

    .fn-pl-chart-wrap {
        height: 320px;
    }
}

@media (max-width: 575.98px) {
    .fn-pl-hero,
    .fn-pl-filter-card,
    .fn-pl-panel-head,
    .fn-pl-panel-body,
    .fn-pl-comparison-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fn-pl-filter-grid {
        grid-template-columns: 1fr;
    }

    .fn-pl-quick-pills,
    .fn-pl-filter-actions {
        width: 100%;
    }

    .fn-pl-quick-pills .filter-pill,
    .fn-pl-filter-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .fn-pl-hero-title,
    .fn-pl-change-value,
    .fn-pl-metric-value {
        font-size: 20px;
    }

    .fn-pl-statement-table thead th,
    .fn-pl-statement-table tbody td {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ──────────────────────────────────────────────────────────────
       DataTables export buttons — themed Export dropdown
       ────────────────────────────────────────────────────────────── */
.dt-buttons {
    display: inline-flex;
    gap: 6px;
    margin-inline-end: 12px;
}
.dt-buttons .btn.fn-dt-export {
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all .15s ease-in-out;
}
.dt-buttons .btn.fn-dt-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.dt-buttons .btn.fn-dt-export i {
    font-size: 0.95em;
}
.dt-button-collection {
    padding: 6px;
    min-width: 180px;
    border-radius: 10px;
    border: 1px solid var(--cui-border-color, #e3e6ed);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    background: var(--cui-body-bg, #fff);
}
.dt-button-collection .dt-button {
    display: flex !important;
    align-items: center;
    width: 100%;
    text-align: start;
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--cui-body-color, #2c2c2c);
    font-size: 0.9rem;
    cursor: pointer;
}
.dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:focus {
    background: rgba(13, 110, 253, 0.08);
    color: var(--cui-primary, #0d6efd);
    outline: 0;
}
.dt-button-collection .dt-button.buttons-print:hover {
    background: rgba(13, 202, 240, 0.10);
}
.dt-button-background {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-coreui-theme="dark"] .dt-button-collection {
    background: var(--cui-tertiary-bg, #1e2329);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-coreui-theme="dark"] .dt-button-collection .dt-button {
    color: var(--cui-body-color, #e6e9ef);
}
[data-coreui-theme="dark"] .dt-button-collection .dt-button:hover {
    background: rgba(99, 156, 255, 0.15);
}

[dir="rtl"] .dt-buttons {
    margin-inline-end: 0;
    margin-inline-start: 12px;
}

/* ─── Kebab / three-dot row-action menu (fn-row-kebab) ──────────────────── */

.fn-row-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fn-row-kebab .fn-kebab-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.fn-row-kebab .fn-kebab-btn:hover,
.fn-row-kebab .fn-kebab-btn:focus-visible,
.fn-row-kebab .fn-kebab-btn[aria-expanded="true"] {
    background: rgba(59, 91, 219, 0.07);
    border-color: rgba(59, 91, 219, 0.18);
    color: var(--accent, #3b5bdb);
    box-shadow: 0 2px 8px rgba(59, 91, 219, 0.1);
    outline: none;
}

.fn-row-kebab .fn-kebab-btn i {
    font-size: 13px;
    pointer-events: none;
}

/* Dropdown menu shell */
.fn-row-kebab-menu {
    min-width: 195px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
    padding: 5px 0;
}

/* Items */
.fn-row-kebab-menu .dropdown-item {
    font-size: 0.8375rem;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    border-radius: 0;
    transition: background 0.12s ease, color 0.12s ease;
    color: var(--tx-primary, #1e293b);
}

.fn-row-kebab-menu .dropdown-item i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.fn-row-kebab-menu .dropdown-item:hover,
.fn-row-kebab-menu .dropdown-item:focus {
    background: rgba(59, 91, 219, 0.06);
    color: var(--accent, #3b5bdb);
}

.fn-row-kebab-menu .dropdown-item.disabled,
.fn-row-kebab-menu span.dropdown-item.disabled {
    opacity: 0.48;
    pointer-events: none;
    cursor: default;
    color: var(--tx-secondary, #64748b);
}

.fn-row-kebab-menu .dropdown-divider {
    margin: 4px 0;
    border-color: rgba(0, 0, 0, 0.07);
}

/* Dark mode */
[data-theme="dark"] .fn-row-kebab .fn-kebab-btn {
    color: var(--tx-secondary, #94a3b8);
}

[data-theme="dark"] .fn-row-kebab .fn-kebab-btn:hover,
[data-theme="dark"] .fn-row-kebab .fn-kebab-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #a5b4fc;
}

[data-theme="dark"] .fn-row-kebab-menu {
    background: var(--surface, #1e2535);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .fn-row-kebab-menu .dropdown-item {
    color: var(--tx-primary, #e2e8f0);
}

[data-theme="dark"] .fn-row-kebab-menu .dropdown-item:hover,
[data-theme="dark"] .fn-row-kebab-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #a5b4fc;
}

[data-theme="dark"] .fn-row-kebab-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.07);
}

/* ═══════════════════════════════════════════════════
       FLATPICKR — OK button for datetime pickers
   ═══════════════════════════════════════════════════ */
.flatpickr-ok-btn {
    display: block !important;
    width: calc(100% - 20px) !important;
    margin: 6px 10px 10px !important;
    padding: 6px 0;
    background: var(--accent, #4361ee) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.03em !important;
    transition: background 0.15s !important;
}
.flatpickr-ok-btn:hover {
    background: var(--accent-hover, #3451d1) !important;
}
[data-theme="dark"] .flatpickr-ok-btn {
    background: var(--accent, #4361ee) !important;
}
[data-theme="dark"] .flatpickr-ok-btn:hover {
    background: var(--accent-hover, #3451d1) !important;
}