/* Zynex web – base styles. Bootstrap 5 does most of the work. */
:root {
    --zx-sidebar-bg: #16202e;
    --zx-sidebar-fg: #b9c3d1;
    --zx-sidebar-active: #2f6fed;
    --zx-page-bg: #f4f6f9;
    --zx-border: #e2e6ec;
    --zx-sidebar-width: 248px;
}

body {
    background: var(--zx-page-bg);
    font-size: .925rem;
}

.validation-summary-valid {
    display: none;
}

/* ---------- Shell ---------- */
.zx-shell {
    display: flex;
    min-height: 100vh;
}

.zx-sidebar {
    width: var(--zx-sidebar-width);
    flex: 0 0 var(--zx-sidebar-width);
    background: var(--zx-sidebar-bg);
    color: var(--zx-sidebar-fg);
    padding: 0 0 1rem;
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
}

.zx-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    position: sticky;
    top: 0;
    background: var(--zx-sidebar-bg);
    z-index: 2;
}

.zx-brand-logo {
    border: 0;
    background: none;
    padding: 2px;
    border-radius: .5rem;
    line-height: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.zx-brand-logo:hover,
.zx-brand-logo:focus-visible { background: rgba(255, 255, 255, .08); }

.zx-brand-logo img { width: 34px; height: 34px; object-fit: contain; }

.zx-brand-name {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    letter-spacing: .01em;
}

.zx-brand-name span { font-weight: 400; color: #8fb4ff; }
.zx-brand-name:hover { color: #fff; }

/* ---------- Menu groups (Zoho Books style): click a group to open its screens ---------- */
.zx-menu { padding: .5rem 0; }

.zx-group-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: calc(100% - 1rem);
    margin: 1px .5rem;
    padding: .55rem .75rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--zx-sidebar-fg);
    text-align: left;
    text-decoration: none;
    font-size: .925rem;
}

.zx-group-head > .bi:first-child { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.zx-group-head:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.zx-group-link.active { background: var(--zx-sidebar-active); color: #fff; }
.zx-group.current > .zx-group-head { color: #fff; }
.zx-group-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zx-short { display: none; }
.zx-caret { font-size: .75rem; transition: transform .15s ease; }
.zx-group.open > .zx-group-head .zx-caret { transform: rotate(180deg); }

.zx-group-items { display: none; padding-left: 1.4rem !important; margin-bottom: .25rem !important; }
.zx-group.open > .zx-group-items { display: block; }
.zx-group-items .zx-nav-link { padding: .38rem .7rem; font-size: .875rem; }
.zx-fly-title { display: none; }

/* ---------- Collapsed menu: icons with short names (GL, AR, AP, INV, FA…); hover shows the screens ---------- */
@media (min-width: 992px) {
    html.zx-collapsed { --zx-sidebar-width: 76px; }
    html.zx-collapsed .zx-brand { justify-content: center; padding: .75rem .25rem; }
    html.zx-collapsed .zx-brand-name,
    html.zx-collapsed .zx-group-title,
    html.zx-collapsed .zx-caret { display: none; }
    html.zx-collapsed .zx-group-head {
        flex-direction: column;
        gap: .1rem;
        width: calc(100% - .5rem);
        margin: 2px .25rem;
        padding: .5rem .1rem;
        text-align: center;
    }
    html.zx-collapsed .zx-group-head > .bi:first-child { font-size: 1.25rem; width: auto; }
    html.zx-collapsed .zx-short { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
    html.zx-collapsed .zx-group.current > .zx-group-head { background: rgba(47, 111, 237, .35); }
    html.zx-collapsed .zx-group > .zx-group-items { display: none; }
    html.zx-collapsed .zx-group.fly > .zx-group-items {
        display: block;
        position: fixed;
        left: calc(var(--zx-sidebar-width) - 4px);
        top: var(--zx-fly-top, 60px);
        min-width: 230px;
        max-height: calc(100vh - var(--zx-fly-top, 60px) - 8px);
        overflow-y: auto;
        padding: .4rem !important;
        background: var(--zx-sidebar-bg);
        border-radius: 0 .5rem .5rem 0;
        box-shadow: 4px 6px 18px rgba(0, 0, 0, .3);
        z-index: 1050;
    }
    html.zx-collapsed .zx-fly-title {
        display: block;
        padding: .3rem .7rem .4rem;
        font-size: .7rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #8fb4ff;
    }
}

.zx-nav {
    list-style: none;
    margin: 0;
    padding: 0 .5rem;
}

.zx-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border-radius: .375rem;
    color: var(--zx-sidebar-fg);
    text-decoration: none;
}

.zx-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.zx-nav-link.active {
    background: var(--zx-sidebar-active);
    color: #fff;
}

.zx-nav-link.disabled {
    opacity: .45;
    cursor: default;
}

.zx-nav-link.disabled:hover { background: none; color: var(--zx-sidebar-fg); }

.zx-nav-link small {
    margin-left: auto;
    font-size: .65rem;
    text-transform: uppercase;
}

.zx-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zx-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--zx-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.zx-context {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin-right: auto;
}

.zx-company { font-weight: 600; }

.zx-fy small { color: #6c757d; }

.zx-content {
    padding: 1.5rem;
}

/* ---------- Page pieces (shared by every module) ---------- */
.zx-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.zx-login-brand span { font-weight: 400; }

.zx-card {
    background: #fff;
    border: 1px solid var(--zx-border);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
}

.zx-card-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.zx-card-value {
    font-size: 1.15rem;
    font-weight: 600;
    margin: .15rem 0;
}

.zx-table {
    background: #fff;
}

.zx-table th {
    background: #f8f9fb;
    font-weight: 600;
    white-space: nowrap;
}

/* Money columns: right-aligned, tabular digits */
.zx-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Account category badges (1st level) */
.zx-cat { font-weight: 500; }
.zx-cat-asset { background: #e3effd; color: #1d4f91; }
.zx-cat-liability { background: #fdeceb; color: #9a2b23; }
.zx-cat-equity { background: #efe9fb; color: #5a3b99; }
.zx-cat-income { background: #e5f5ea; color: #1e6b3a; }
.zx-cat-expense { background: #fdf3e1; color: #8a5a0b; }
.zx-cat-other { background: #eceff3; color: #4a5562; }

/* Account hierarchy preview on the form */
.zx-hierarchy {
    padding: .6rem .85rem;
    background: #f8f9fb;
    border: 1px dashed var(--zx-border);
    border-radius: .375rem;
    font-size: .875rem;
    color: #4a5562;
}

.zx-hierarchy .bi { font-size: .7rem; color: #9aa4b1; margin: 0 .2rem; }

/* Journal voucher grid */
.zx-jv-table th { font-size: .8rem; white-space: nowrap; }
.zx-jv-table td { padding: .2rem .25rem; }
.zx-jv-table .form-control-sm, .zx-jv-table .form-select-sm { font-size: .85rem; }

/* ---------- Login (backgrounds from Img/Background images, web copies in wwwroot/img) ---------- */
.zx-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
    background-color: #16202e;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Sign-in: dark desk, objects on the left – the card sits on the right */
.zx-login-login {
    background-image: linear-gradient(90deg, rgba(10, 14, 20, 0) 35%, rgba(10, 14, 20, .55) 100%), url("../img/login-bg.jpg");
    background-position: 30% top;   /* keep the top (coffee cup, laptop) in view on wide screens */
    justify-content: flex-end;
    padding-right: max(1rem, 8vw);
}

/* Company / fiscal year: light desk, objects at the bottom – the card sits near the top */
.zx-login-select {
    background-color: #f3e9dc;
    background-image: url("../img/select-bg.jpg");
    background-position: center bottom;
    align-items: flex-start;
    padding-top: max(1.5rem, 7vh);
}

.zx-login-card {
    width: 100%;
    max-width: 410px;
    background: rgba(255, 255, 255, .96);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
}

.zx-login-select .zx-login-card { box-shadow: 0 1rem 2.5rem rgba(60, 40, 10, .18); }

.zx-login-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--zx-sidebar-active);
    margin-bottom: 1.25rem;
}

.zx-login-foot {
    position: absolute;
    bottom: .75rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

.zx-login-select .zx-login-foot { color: rgba(60, 50, 40, .6); }
.zx-login-foot a { color: inherit; text-decoration: none; }
.zx-login-foot a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .zx-login-login { justify-content: center; padding-right: 1rem; background-position: 20% center; }
    .zx-login-card { padding: 1.5rem; }
}

/* ---------- Small screens: sidebar slides in ---------- */
@media (max-width: 991.98px) {
    .zx-sidebar {
        position: fixed;
        left: calc(-1 * var(--zx-sidebar-width));
        z-index: 1040;
        transition: left .2s ease;
    }

    .zx-sidebar.open { left: 0; }

    .zx-content { padding: 1rem; }

    .zx-topbar { padding: .6rem 1rem; }
}

/* ---------- Print header / letterhead (shown only on paper) ---------- */
.zx-print-header { margin-bottom: 10px; }
.zx-letterhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
}
.zx-print-logo { max-height: 18mm; max-width: 40mm; object-fit: contain; }
.zx-print-company { font-size: 15pt; font-weight: 700; line-height: 1.15; }
.zx-print-line { font-size: 8.5pt; line-height: 1.35; }
.zx-print-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 6px 0 4px;
    border-bottom: 1px solid #000;
}
.zx-print-title { font-size: 12pt; font-weight: 700; }
.zx-print-subtitle { font-size: 9pt; margin-top: 1px; }
.zx-print-meta { font-size: 8pt; text-align: right; color: #333; }

/* ---------- Printing: reports, ledger, vouchers ---------- */
@page {
    margin: 0;               /* no browser header / footer (date, title, URL); paper size / orientation from the print dialog or the Print menu */
}

@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 9pt;
    }

    /* Hide the application around the document */
    .zx-sidebar, .zx-topbar, .zx-page-header, .breadcrumb, .alert, .btn,
    form, .d-print-none, [data-filter-count] {
        display: none !important;
    }

    /* On pages with a printable area, print only that area */
    .zx-content:has(.zx-print-area) > *:not(.zx-print-area) {
        display: none !important;
    }

    .zx-shell, .zx-main { display: block !important; min-height: 0 !important; }
    .zx-content { padding: 0 !important; }

    /* Page margins (repeated on every printed page) */
    .zx-print-area {
        padding: 12mm 12mm 14mm !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .table-responsive { overflow: visible !important; }

    /* Tables: plain black lines, header repeats on every page */
    .zx-print-area table { width: 100%; border-collapse: collapse !important; font-size: 8.5pt; }
    .zx-print-area thead { display: table-header-group; }
    .zx-print-area tfoot { display: table-row-group; }
    .zx-print-area tr { page-break-inside: avoid; break-inside: avoid; }
    .zx-print-area th, .zx-print-area td {
        color: #000 !important;
        background: transparent !important;
        padding: 3px 5px !important;
        border-color: #999 !important;
    }
    .zx-print-area thead th {
        border-top: 1px solid #000 !important;
        border-bottom: 1px solid #000 !important;
        font-weight: 700;
    }
    .zx-print-area .zx-total-row td {
        border-top: 1px solid #000 !important;
        border-bottom: 3px double #000 !important;
        font-weight: 700;
    }
    .zx-print-area .zx-opening-row td,
    .zx-print-area .zx-group-row { font-weight: 700; }
    .zx-print-area .zx-subtotal-row td { border-top: 1px solid #000 !important; color: #000 !important; }

    .zx-print-area a { color: #000 !important; text-decoration: none !important; }
    .zx-print-area .badge {
        color: #000 !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: inherit;
        font-weight: 700;
    }
    .text-muted { color: #333 !important; }

    /* Landscape: wider page, slightly larger text */
    .zx-print-landscape .zx-print-area table { font-size: 9.5pt; }
    .zx-print-landscape .zx-print-area { padding: 10mm 12mm 12mm !important; }

    .zx-signatures {
        margin-top: 22mm !important;
        page-break-inside: avoid;
    }
}

/* ---------- Financial statements ---------- */
.zx-fs-table td { border-bottom-color: transparent; }
.zx-fs-heading td { font-weight: 700; padding-top: .7rem; }
.zx-fs-heading.zx-fs-level-0 td { text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--zx-border); }
.zx-fs-heading.zx-fs-level-1 td { padding-left: 1rem; font-style: italic; }
.zx-fs-subtotal td { font-weight: 600; }
.zx-fs-subtotal td.zx-amount { border-top: 1px solid #6c757d; }
.zx-fs-total td { font-weight: 700; }
.zx-fs-total td.zx-amount { border-top: 1px solid #000; border-bottom: 3px double #000; }

/* ---------- Invoice / bill layout (screen and paper; agreed 20-Oct-2026) ---------- */
.zx-inv {
    --zx-inv-accent: #1f6fd1;
    --zx-inv-soft: #f1f4f9;
    --zx-inv-due: #e3eefc;
    max-width: 900px;
    margin: 0 auto;
    color: #212529;
    font-size: .9rem;
}
.zx-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1rem; }
.zx-inv-logo img { max-height: 80px; max-width: 200px; object-fit: contain; }
.zx-inv-initial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--zx-inv-accent); color: #fff; font-size: 2rem; font-weight: 700;
}
.zx-inv-company { text-align: right; line-height: 1.45; }
.zx-inv-company-name { font-weight: 700; font-size: 1.05rem; margin-bottom: .15rem; }
.zx-inv-title { display: flex; align-items: center; gap: 1rem; margin: .75rem 0 1rem; }
.zx-inv-title::before, .zx-inv-title::after { content: ""; flex: 1; border-top: 1px solid #ced4da; }
.zx-inv-title span { font-size: 1.35rem; letter-spacing: .06em; font-weight: 500; }
.zx-inv-parties { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; line-height: 1.45; }
.zx-inv-label { font-size: .78rem; color: #495057; }
.zx-inv-strong { font-weight: 600; }
.zx-inv-docno { font-weight: 700; font-size: 1.05rem; }
.zx-inv-muted { color: #6c757d; font-size: .8rem; }

.zx-inv table { width: 100%; border-collapse: collapse; }
.zx-inv th { text-align: left; }
.zx-inv th.text-end { text-align: right; }
.zx-inv th.zx-inv-num { text-align: center; }
.zx-inv-band { margin-bottom: 1.25rem; border: 1px solid #dee2e6; }
.zx-inv-band th { background: var(--zx-inv-accent); color: #fff; font-weight: 500; padding: .45rem .6rem; border-right: 1px solid rgba(255, 255, 255, .5); }
.zx-inv-band td { padding: .45rem .6rem; border-right: 1px solid #dee2e6; }
.zx-inv-items { border: 1px solid #dee2e6; }
.zx-inv-items thead th { background: var(--zx-inv-accent); color: #fff; font-weight: 500; padding: .45rem .6rem; }
.zx-inv-items tbody td { padding: .6rem; vertical-align: top; border-bottom: 1px solid #e9ecef; }
.zx-inv-num { width: 36px; text-align: center; border-right: 1px solid #e9ecef; }
.zx-inv-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 0; }
.zx-inv-words { padding-top: 1rem; flex: 1; }
.zx-inv-totals { width: 340px !important; flex: 0 0 340px; background: var(--zx-inv-soft); }
.zx-inv-totals td { padding: .45rem .75rem; }
.zx-inv-totals td:last-child { text-align: right; white-space: nowrap; }
.zx-inv-totals .zx-inv-total td { font-weight: 700; border-top: 1px solid #ced4da; }
.zx-inv-totals .zx-inv-due td { font-weight: 700; background: var(--zx-inv-due); }
.zx-inv-terms { margin-top: 1.5rem; font-size: .85rem; line-height: 1.5; }
.zx-inv-small { font-size: .85em; }
.zx-inv-bank { margin-top: 1.25rem; font-size: .85rem; line-height: 1.45; }
.zx-inv .zx-inv-bank table { width: auto; }
.zx-inv-bank td { padding: 0 1.25rem 0 0; }
.zx-inv-bank td:first-child { color: #495057; }
.zx-inv-sign { display: flex; gap: 2rem; margin-top: 3.5rem; font-size: .85rem; }
.zx-inv-sign-line { border-top: 1px solid #495057; min-width: 200px; padding-top: .25rem; text-align: center; }
.zx-inv-sign { align-items: flex-end; }
.zx-inv-sign-box { text-align: center; max-width: 320px; }
.zx-inv-sign-above { font-weight: 600; margin-bottom: .25rem; }
.zx-inv-sign-img { display: block; margin: 0 auto .35rem; max-height: 60px; max-width: 220px; object-fit: contain; }   /* sits just above the line, not on it */
.zx-inv-footer { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid #e9ecef; text-align: center; font-size: .78rem; color: #6c757d; }

/* phones only: an A4 page is about 720px wide, so without "screen" the printed invoice stacked like a phone */
@media screen and (max-width: 767.98px) {
    .zx-inv-head, .zx-inv-parties, .zx-inv-bottom { flex-direction: column; }
    .zx-inv-company, .zx-inv-parties .text-end { text-align: left !important; }
    .zx-inv-totals { width: 100% !important; flex-basis: auto; }
}

@media print {
    .zx-inv-card { padding: 10mm 12mm 12mm !important; }
    .zx-inv { font-size: 9pt; max-width: none; color: #000; }
    .zx-inv.zx-inv-small { font-size: 8pt; }
    .zx-inv-sign { margin-top: 18mm; }
    .zx-inv-sign-line { min-width: 50mm; border-top-color: #000; }
    .zx-inv-sign-img { max-height: 16mm; max-width: 55mm; }
    .zx-inv * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .zx-inv-logo img { max-height: 22mm; max-width: 50mm; }
    .zx-inv-title span { font-size: 15pt; }
    .zx-inv-head, .zx-inv-parties, .zx-inv-bottom { flex-direction: row !important; }
    .zx-inv-company, .zx-inv-parties .text-end { text-align: right !important; }
    .zx-inv-totals { width: 300px !important; flex: 0 0 300px !important; }
    /* keep the invoice colours: stronger than the plain report table rules above */
    .zx-print-area .zx-inv table.zx-inv-band thead th,
    .zx-print-area .zx-inv table.zx-inv-items thead th {
        background: var(--zx-inv-accent) !important;
        color: #fff !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        padding: 4px 6px !important;
        font-weight: 500;
    }
    .zx-print-area .zx-inv table.zx-inv-items tbody td { padding: 5px 6px !important; border-bottom: 1px solid #ddd !important; }
    .zx-print-area .zx-inv table.zx-inv-totals td { background: var(--zx-inv-soft) !important; padding: 4px 8px !important; }
    .zx-print-area .zx-inv table.zx-inv-totals .zx-inv-due td { background: var(--zx-inv-due) !important; }
    .zx-print-area .zx-inv .zx-inv-muted { color: #555 !important; }
}

/* Confirmation dialog (site.js confirmDialog) */
.zx-confirm .modal-content { border: 0; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(16, 24, 40, .18); }
.zx-confirm .modal-body { padding: 1.25rem 1.25rem .75rem; }
.zx-confirm .modal-footer { border-top: 0; padding: .5rem 1.25rem 1.25rem; gap: .5rem; }
.zx-confirm .modal-footer > * { margin: 0; }
.zx-confirm-icon { flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                   font-size: 1.25rem; background: #e8f0fe; color: #2f6fed; }
.zx-confirm-danger .zx-confirm-icon { background: #fdecec; color: #c0392b; }
.zx-confirm-text { font-size: .9rem; line-height: 1.45; white-space: pre-line; }

/* User photo next to the name (top bar); the initial shows when there is no photo */
.zx-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
             background: #e8f0fe; color: #2f6fed; font-size: .75rem; font-weight: 700; overflow: hidden; vertical-align: middle; margin-right: .35rem; }
.zx-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }