/*
 * TezIndia UI v2 — design tokens + theme layer for the admin and user panels.
 * Loaded after the template CSS on every tenant. The brand colour comes
 * from companies.theme_settings and is printed by the layout as
 * :root { --tz-primary: #hex; --tz-primary-rgb: r,g,b; }
 */

/* ── Tokens (light) ─────────────────────────────────────────────── */
:root {
    --tz-primary: #1D4ED8;
    --tz-primary-rgb: 29, 78, 216;
    --tz-on-primary: #ffffff;
    --tz-primary-soft: rgba(var(--tz-primary-rgb), .10);
    --tz-primary-ink: color-mix(in srgb, var(--tz-primary) 92%, #000);

    --tz-bg: #F5F6F8;
    --tz-surface: #FFFFFF;
    --tz-surface-2: #F8F9FB;
    --tz-text: #0F172A;
    --tz-text-2: #334155;
    --tz-muted: #5B6474;
    --tz-border: #E4E7EC;
    --tz-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .04);
    --tz-radius: 14px;
    --tz-radius-sm: 10px;
    --tz-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --tz-ok-bg: #E7F6EE;   --tz-ok-ink: #126B3F;   --tz-ok: #16A34A;
    --tz-pend-bg: #FFF4DB; --tz-pend-ink: #8A5A00; --tz-pend: #D97706;
    --tz-fail-bg: #FDE8E8; --tz-fail-ink: #B42318; --tz-fail: #DC2626;
    --tz-info-bg: #EEF1F5; --tz-info-ink: #344054; --tz-info: #64748B;
}

/* ── Tokens (dark) — the template switches with data-layout-mode ── */
[data-layout-mode="dark"] {
    --tz-primary-soft: rgba(var(--tz-primary-rgb), .18);
    --tz-primary-ink: color-mix(in srgb, var(--tz-primary) 55%, #fff);

    --tz-bg: #0B0F17;
    --tz-surface: #121826;
    --tz-surface-2: #0F1520;
    --tz-text: #E8EBF0;
    --tz-text-2: #C9CFD9;
    --tz-muted: #9AA3B2;
    --tz-border: #232B3A;
    --tz-shadow: none;

    --tz-ok-bg: rgba(34, 197, 94, .16);   --tz-ok-ink: #86EFAC;   --tz-ok: #22C55E;
    --tz-pend-bg: rgba(245, 158, 11, .16); --tz-pend-ink: #FCD34D; --tz-pend: #F59E0B;
    --tz-fail-bg: rgba(239, 68, 68, .16);  --tz-fail-ink: #FCA5A5; --tz-fail: #EF4444;
    --tz-info-bg: rgba(148, 163, 184, .16); --tz-info-ink: #CBD5E1; --tz-info: #94A3B8;
}

/* ── Theme layer (template overrides) — owned by the theme-engine work ── */

/*
 * Clean fintech look: white cards, soft shadow, 14px radius, one brand colour,
 * Manrope, tabular numbers. Wrapped in @media screen so printed invoices,
 * receipts and reports keep the plain template look (see @media print below).
 */
@media screen {

    /* Template variables follow the brand / tokens */
    :root, [data-layout-mode="dark"] {
        --vz-link-color: var(--tz-primary);
        --vz-link-hover-color: var(--tz-primary-ink);
        --vz-border-color: var(--tz-border);
        --vz-heading-color: var(--tz-text);
        --vz-vertical-menu-item-hover-color: var(--tz-primary-ink);
        --vz-vertical-menu-item-active-color: var(--tz-primary-ink);
        --vz-vertical-menu-sub-item-hover-color: var(--tz-primary-ink);
        --vz-vertical-menu-sub-item-active-color: var(--tz-primary-ink);
        --vz-topnav-item-color-active: var(--tz-primary-ink);
        --vz-header-bg-dark: #1E2532;
        --vz-topbar-user-bg-dark: #2A3243;
        --vz-header-item-color-dark: rgba(255, 255, 255, .72);
    }
    [data-layout-mode="dark"] {
        --vz-header-bg-dark: #121826;
        --vz-topbar-user-bg-dark: #1A2232;
    }

    /* Page */
    body {
        font-family: var(--tz-font);
        background-color: var(--tz-bg);
        color: var(--tz-text-2);
        font-variant-numeric: tabular-nums;
        -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--tz-font); color: var(--tz-text); }
    .page-content { background-color: var(--tz-bg); }
    a { color: var(--tz-primary); }
    a:hover { color: var(--tz-primary-ink); }
    .text-muted { color: var(--tz-muted) !important; }
    .table, .form-control, .form-select, .btn, .badge, .dropdown-menu, .modal { font-variant-numeric: tabular-nums; }

    /* Cards */
    .card {
        background-color: var(--tz-surface);
        border: 1px solid var(--tz-border);
        border-radius: var(--tz-radius);
        box-shadow: var(--tz-shadow);
    }
    .card-header {
        background-color: var(--tz-surface);
        border-bottom: 1px solid var(--tz-border);
        border-radius: var(--tz-radius) var(--tz-radius) 0 0 !important;
    }
    .card-footer { background-color: var(--tz-surface); border-top: 1px solid var(--tz-border); border-radius: 0 0 var(--tz-radius) var(--tz-radius) !important; }
    .card-title, .card-header .card-title { color: var(--tz-text); font-weight: 700; }

    /* Buttons */
    .btn { border-radius: var(--tz-radius-sm); font-weight: 600; }
    .btn-primary {
        background-color: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary);
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle,
    .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary {
        background-color: var(--tz-primary-ink); border-color: var(--tz-primary-ink); color: var(--tz-on-primary);
    }
    .btn-primary:focus, .btn-primary:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .3); }
    .btn-primary:disabled, .btn-primary.disabled { background-color: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary); opacity: .6; }
    .btn-soft-primary { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); border-color: transparent; }
    .btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active {
        background-color: var(--tz-primary); color: var(--tz-on-primary); border-color: var(--tz-primary);
    }
    .btn-outline-primary { color: var(--tz-primary-ink); border-color: var(--tz-primary); }
    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active,
    .btn-check:checked + .btn-outline-primary {
        background-color: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary);
    }
    .btn-light { background-color: var(--tz-surface-2); border-color: var(--tz-border); color: var(--tz-text); }
    .btn-light:hover, .btn-light:focus, .btn-light:active { background-color: var(--tz-border); border-color: var(--tz-border); color: var(--tz-text); }
    .btn-link { color: var(--tz-primary); }

    /* Forms */
    .form-control, .form-select {
        border-color: var(--tz-border);
        border-radius: var(--tz-radius-sm);
        color: var(--tz-text);
    }
    .form-control:focus, .form-select:focus,
    .input-group:focus-within .form-control, .input-group:focus-within .form-select, .input-group:focus-within .input-group-text {
        border-color: var(--tz-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .18);
    }
    .input-group .form-control:focus, .input-group .form-select:focus { z-index: 3; }
    .input-group-text { background-color: var(--tz-surface-2); border-color: var(--tz-border); color: var(--tz-muted); }
    .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .form-label { color: var(--tz-text-2); font-weight: 600; }
    .form-check-input:checked { background-color: var(--tz-primary); border-color: var(--tz-primary); }
    .form-check-input:focus { border-color: var(--tz-primary); box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .18); }

    /* Tables */
    .table { color: var(--tz-text-2); border-color: var(--tz-border); }
    .table > :not(caption) > * > * { border-bottom-color: var(--tz-border); }
    .table thead th, .table > thead > tr > th, thead.table-light th {
        background-color: var(--tz-surface-2);
        color: var(--tz-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--tz-border);
        white-space: nowrap;
    }
    .table-light, thead.table-light { --vz-table-bg: var(--tz-surface-2); }
    .table tbody tr:hover > * { background-color: var(--tz-primary-soft); }
    .table-bordered > :not(caption) > * > * { border-color: var(--tz-border); }
    .table-striped > tbody > tr:nth-of-type(odd) > * { --vz-table-accent-bg: var(--tz-surface-2); }

    /* DataTables */
    .dataTables_wrapper { color: var(--tz-text-2); }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        border: 1px solid var(--tz-border); border-radius: var(--tz-radius-sm);
        background-color: var(--tz-surface); color: var(--tz-text); padding: .3rem .6rem;
    }
    .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus {
        outline: 0; border-color: var(--tz-primary); box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .18);
    }
    .dataTables_wrapper .dataTables_info { color: var(--tz-muted); }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--tz-primary) !important; border-color: var(--tz-primary) !important; color: var(--tz-on-primary) !important; border-radius: 8px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tz-primary-soft) !important; border-color: transparent !important; color: var(--tz-primary-ink) !important; }
    div.dataTables_wrapper div.dataTables_processing { background: var(--tz-surface); color: var(--tz-text); border: 1px solid var(--tz-border); border-radius: var(--tz-radius-sm); box-shadow: var(--tz-shadow); }
    table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px var(--tz-primary-soft); color: var(--tz-text); }
    .dt-buttons .btn, .dt-buttons .dt-button { border-radius: var(--tz-radius-sm); }

    /* Pagination */
    .pagination .page-link { color: var(--tz-primary-ink); border-color: var(--tz-border); background-color: var(--tz-surface); }
    .pagination .page-link:hover { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); }
    .pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .18); }
    .pagination .page-item.active .page-link, .page-item.active .page-link {
        background-color: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary);
    }
    .pagination .page-item.disabled .page-link { color: var(--tz-muted); background-color: var(--tz-surface-2); }

    /* Badges & status colours */
    .badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }
    .bg-success-subtle, .bg-soft-success, .badge-soft-success { background-color: var(--tz-ok-bg) !important; color: var(--tz-ok-ink) !important; }
    .bg-warning-subtle, .bg-soft-warning, .badge-soft-warning { background-color: var(--tz-pend-bg) !important; color: var(--tz-pend-ink) !important; }
    .bg-danger-subtle, .bg-soft-danger, .badge-soft-danger { background-color: var(--tz-fail-bg) !important; color: var(--tz-fail-ink) !important; }
    .bg-info-subtle, .bg-soft-info, .badge-soft-info,
    .bg-secondary-subtle, .bg-soft-secondary, .badge-soft-secondary,
    .bg-dark-subtle, .bg-soft-dark, .badge-soft-dark { background-color: var(--tz-info-bg) !important; color: var(--tz-info-ink) !important; }
    .bg-primary-subtle, .bg-soft-primary, .badge-soft-primary { background-color: var(--tz-primary-soft) !important; color: var(--tz-primary-ink) !important; }
    .badge.bg-success { background-color: var(--tz-ok) !important; }
    .badge.bg-warning { background-color: var(--tz-pend) !important; color: #fff !important; }
    .badge.bg-danger { background-color: var(--tz-fail) !important; }
    .badge.bg-info { background-color: var(--tz-info) !important; }
    .badge.bg-primary { background-color: var(--tz-primary) !important; color: var(--tz-on-primary) !important; }
    .text-success { color: var(--tz-ok) !important; }
    .text-warning { color: var(--tz-pend) !important; }
    .text-danger { color: var(--tz-fail) !important; }
    .text-primary { color: var(--tz-primary) !important; }
    [data-layout-mode="dark"] .text-primary { color: var(--tz-primary-ink) !important; }
    .bg-primary { background-color: var(--tz-primary) !important; }

    /* Alerts */
    .alert { border-radius: var(--tz-radius-sm); }
    .alert-success { background-color: var(--tz-ok-bg); color: var(--tz-ok-ink); border-color: transparent; }
    .alert-warning { background-color: var(--tz-pend-bg); color: var(--tz-pend-ink); border-color: transparent; }
    .alert-danger { background-color: var(--tz-fail-bg); color: var(--tz-fail-ink); border-color: transparent; }
    .alert-info, .alert-secondary, .alert-light { background-color: var(--tz-info-bg); color: var(--tz-info-ink); border-color: transparent; }
    .alert-primary { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); border-color: transparent; }
    .alert .alert-link { color: inherit; }

    /* Modals */
    .modal-content {
        background-color: var(--tz-surface); border: 1px solid var(--tz-border);
        border-radius: var(--tz-radius); box-shadow: 0 20px 50px rgba(16, 24, 40, .18);
    }
    .modal-header { border-bottom-color: var(--tz-border); }
    .modal-footer { border-top-color: var(--tz-border); }
    .modal-title { color: var(--tz-text); font-weight: 700; }

    /* Tabs & pills */
    .nav-tabs { border-bottom-color: var(--tz-border); }
    .nav-tabs .nav-link { color: var(--tz-muted); font-weight: 600; }
    .nav-tabs .nav-link:hover { color: var(--tz-primary-ink); }
    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: var(--tz-primary-ink); background-color: var(--tz-surface);
        border-color: var(--tz-border) var(--tz-border) var(--tz-surface);
        box-shadow: inset 0 -2px 0 var(--tz-primary);
    }
    .nav-tabs-custom .nav-item .nav-link.active { color: var(--tz-primary-ink); }
    .nav-tabs-custom .nav-item .nav-link::after { background: var(--tz-primary); }
    .nav-pills .nav-link { border-radius: var(--tz-radius-sm); color: var(--tz-text-2); font-weight: 600; }
    .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--tz-primary); color: var(--tz-on-primary); }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--tz-surface); border: 1px solid var(--tz-border);
        border-radius: var(--tz-radius-sm); box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
    }
    .dropdown-item { color: var(--tz-text-2); }
    .dropdown-item:hover, .dropdown-item:focus { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); }
    .dropdown-item.active, .dropdown-item:active { background-color: var(--tz-primary); color: var(--tz-on-primary); }
    .dropdown-divider { border-top-color: var(--tz-border); }

    /* Page title / breadcrumb */
    .page-title-box { background-color: transparent; box-shadow: none; border-bottom: 0; }
    .page-title-box h4 { color: var(--tz-text); font-weight: 800; text-transform: none; font-size: 1.15rem; letter-spacing: -.01em; }
    .breadcrumb-item, .breadcrumb-item > a { color: var(--tz-muted); }
    .breadcrumb-item.active { color: var(--tz-text-2); font-weight: 600; }
    .breadcrumb-item + .breadcrumb-item::before { color: var(--tz-muted); }

    /* Plugins: select2 / choices / flatpickr / SweetAlert2 */
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        border-color: var(--tz-border) !important; border-radius: var(--tz-radius-sm) !important; background-color: var(--tz-surface);
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--tz-primary) !important; box-shadow: 0 0 0 .2rem rgba(var(--tz-primary-rgb), .18);
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: var(--tz-primary) !important; color: var(--tz-on-primary) !important;
    }
    .select2-dropdown { border-color: var(--tz-border) !important; border-radius: var(--tz-radius-sm) !important; background-color: var(--tz-surface); }
    .choices__inner { border-color: var(--tz-border); border-radius: var(--tz-radius-sm) !important; }
    .is-focused .choices__inner, .is-open .choices__inner { border-color: var(--tz-primary); }
    .choices__list--multiple .choices__item { background-color: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary); }
    .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); }
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
    .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
        background: var(--tz-primary); border-color: var(--tz-primary); color: var(--tz-on-primary);
    }
    .flatpickr-day.inRange { background: var(--tz-primary-soft); border-color: transparent; box-shadow: -5px 0 0 var(--tz-primary-soft), 5px 0 0 var(--tz-primary-soft); }
    .flatpickr-day.today { border-color: var(--tz-primary); }
    .flatpickr-months, .flatpickr-weekdays, span.flatpickr-weekday,
    .flatpickr-months .flatpickr-month { background: var(--tz-primary) !important; color: var(--tz-on-primary) !important; fill: var(--tz-on-primary) !important; }
    .swal2-popup { border-radius: var(--tz-radius) !important; font-family: var(--tz-font); background: var(--tz-surface); color: var(--tz-text-2); }
    .swal2-title { color: var(--tz-text) !important; }
    .swal2-styled.swal2-confirm, .swal2-confirm.btn-primary, .swal2-popup .swal2-actions .btn-primary {
        background-color: var(--tz-primary) !important; border-color: var(--tz-primary) !important; color: var(--tz-on-primary) !important;
        border-radius: var(--tz-radius-sm) !important;
    }
    .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(var(--tz-primary-rgb), .35) !important; }

    /* Topbar */
    #page-topbar { box-shadow: 0 1px 0 var(--tz-border); }
    [data-topbar="light"] #page-topbar { background-color: var(--tz-surface); border-bottom: 1px solid var(--tz-border); }
    [data-topbar="light"] .navbar-header .btn-topbar { color: var(--tz-text-2); }
    [data-topbar="light"] .navbar-header .btn-topbar:hover { background-color: var(--tz-primary-soft); color: var(--tz-primary-ink); }

    /* Sidebar / horizontal menu */
    .app-menu.navbar-menu { border-right-color: var(--tz-border); }
    [data-sidebar="light"] .app-menu.navbar-menu { background-color: var(--tz-surface); }
    [data-layout="horizontal"][data-sidebar="light"] .app-menu.navbar-menu { background-color: var(--tz-surface); border-bottom: 1px solid var(--tz-border); box-shadow: none; }
    .navbar-menu .navbar-nav .nav-link { border-radius: var(--tz-radius-sm); font-weight: 600; }
    [data-sidebar="light"] .navbar-menu .navbar-nav .nav-link:hover,
    [data-layout="horizontal"][data-sidebar="light"] .navbar-menu .navbar-nav .nav-link:hover {
        color: var(--tz-primary-ink); background-color: var(--tz-primary-soft);
    }
    [data-sidebar="light"] .navbar-menu .navbar-nav .nav-link.active,
    [data-sidebar="light"] .navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"],
    [data-layout="horizontal"][data-sidebar="light"] .navbar-menu .navbar-nav .nav-link.active {
        color: var(--tz-primary-ink); background-color: var(--tz-primary-soft);
    }
    [data-sidebar="light"] .navbar-menu .navbar-nav .nav-sm .nav-link.active { background-color: transparent; font-weight: 700; }
    [data-sidebar="light"] .navbar-menu .navbar-nav .nav-link.active i,
    [data-layout="horizontal"][data-sidebar="light"] .navbar-menu .navbar-nav .nav-link.active i { color: var(--tz-primary-ink); }
    [data-sidebar="dark"] .navbar-menu .navbar-nav > .nav-item > .nav-link.active,
    [data-sidebar^="gradient"] .navbar-menu .navbar-nav > .nav-item > .nav-link.active {
        color: #fff; background-color: rgba(var(--tz-primary-rgb), .35); box-shadow: inset 3px 0 0 var(--tz-primary);
    }
    [data-layout="horizontal"][data-sidebar="dark"] .navbar-menu .navbar-nav > .nav-item > .nav-link.active,
    [data-layout="horizontal"][data-sidebar^="gradient"] .navbar-menu .navbar-nav > .nav-item > .nav-link.active { box-shadow: inset 0 -2px 0 var(--tz-primary); }
    .menu-title span { color: var(--tz-muted); font-weight: 700; letter-spacing: .06em; }

    /* Footer */
    .footer { background-color: var(--tz-surface); border-top: 1px solid var(--tz-border); color: var(--tz-muted); }

    /* Dark mode readability */
    [data-layout-mode="dark"] .form-control, [data-layout-mode="dark"] .form-select,
    [data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter input,
    [data-layout-mode="dark"] .dataTables_wrapper .dataTables_length select {
        background-color: var(--tz-surface-2); color: var(--tz-text); border-color: var(--tz-border);
    }
    [data-layout-mode="dark"] .modal-content, [data-layout-mode="dark"] .dropdown-menu { box-shadow: none; }
}

/* Print: keep receipts / invoices / reports plain */
@media print {
    body, .page-content, .card, .card-header, .card-footer, .modal-content, .table thead th {
        background: #fff !important;
        box-shadow: none !important;
    }
    .table tbody tr:hover > * { background: transparent !important; }
}