/* App-level styles. Bootstrap loaded from CDN in App.razor. */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f6f8fa;
    /* Global default zoom: 80%. Set 2026-06-02 -- the SaaS reads better
       at this density on the typical tax-lawyer customer's 1080p/1440p
       monitor. Users who want bigger can press Ctrl+= and the browser
       multiplies on top of this. Disabled during print (see @media
       print below) so report PDFs come out at native size. */
    zoom: 0.8;
}

@media print {
    /* Reports must print at native 100% -- shrinking to 80% would
       cascade through page-break math and produce ugly half-empty
       last pages. */
    body {
        zoom: 1;
    }
}

main {
    background: #f6f8fa;
}

.card {
    border: 1px solid #e1e4e8;
}

.table-sm td, .table-sm th {
    padding: 0.4rem 0.6rem;
}

/* ============================================================
   Voucher-section tints (2026-05-26).

   Every voucher page is split into four portions -- Header,
   Detail (the items grid), Footer (totals + submit), and Recent
   (last 20 entries). Without tints they all sit on the same
   white card background and the eye loses the boundaries.

   The page wraps everything in a `.vch-area` div with the area's
   colour passed as the --vch-area-color CSS variable (defined on
   the wrapper's inline style). Each section card then gets one of
   the four classes below; the class picks a percentage tint of
   that variable. !important is needed because Bootstrap's
   .card-* classes set their own background-color.

   Area colour map (matches LeftMenuSlider's --lm-area-color):
     Admin            #b0a1ba   (soft lavender)
     Financials       #648de5   (cornflower blue)
     Sales            #9ebc9f   (mint sage)
     Purchase         #8e7dbe   (lavender purple)
     Inventory        #d6ba73   (warm gold)
     IncomeExpense    #578a9e   (slate teal-blue)
     Banking          #00a39e   (vivid teal)
     Commission       #b0c592   (sage green)
     HR / Payroll     #9097c0   (periwinkle)
     Manufacturing    #8f7166   (taupe brown)
   ============================================================ */
.vch-area .vch-header {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 8%, white) !important;
}
.vch-area .vch-detail {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 4%, white) !important;
}
.vch-area .vch-footer {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 14%, white) !important;
}
.vch-area .vch-recent {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 6%, white) !important;
}
/* When the tinted class is the OUTER .card, the inner
   .card-header / .card-body inherit the same tint via transparent
   background -- the whole card reads as one band. */
.vch-area .vch-header > .card-header,
.vch-area .vch-header > .card-body,
.vch-area .vch-detail > .card-header,
.vch-area .vch-detail > .card-body,
.vch-area .vch-footer > .card-header,
.vch-area .vch-footer > .card-body,
.vch-area .vch-recent > .card-header,
.vch-area .vch-recent > .card-body,
.vch-area .vch-recent > .card-footer {
    background: transparent !important;
}
/* Exception: card-footer INSIDE a .vch-detail (the Post-button row
   that lives at the bottom of the items card) -- gets the dedicated
   FOOTER tint. Saves the page from restructuring the detail card +
   footer card into separate siblings. */
.vch-area .vch-detail > .card-footer,
.vch-area .vch-footer > .card-footer {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 14%, white) !important;
}
/* Left-edge accent in the area color so the section's boundary
   is obvious even on screens where colour-mix isn't supported
   (it has 95%+ browser support today; this is the fallback). */
.vch-area .vch-header,
.vch-area .vch-detail,
.vch-area .vch-footer,
.vch-area .vch-recent {
    border-left: 3px solid var(--vch-area-color, #b0a1ba);
}
/* Fallback: any .card inside .vch-area that hasn't been explicitly
   classified gets a soft 3% area tint + a left-edge accent. Keeps
   reports / masters / future pages visually tied to their area
   without per-page tagging. The four .vch-* classes above still
   override this with their stronger tints. */
.vch-area .card:not(.vch-header):not(.vch-detail):not(.vch-footer):not(.vch-recent) {
    background: color-mix(in srgb, var(--vch-area-color, #b0a1ba) 3%, white) !important;
    border-left: 3px solid var(--vch-area-color, #b0a1ba);
}
.vch-area .card:not(.vch-header):not(.vch-detail):not(.vch-footer):not(.vch-recent) > .card-header,
.vch-area .card:not(.vch-header):not(.vch-detail):not(.vch-footer):not(.vch-recent) > .card-body,
.vch-area .card:not(.vch-header):not(.vch-detail):not(.vch-footer):not(.vch-recent) > .card-footer {
    background: transparent !important;
}

/* Print-friendly styles for reports.
   When the user fires window.print() (from the "Print" button on Sales /
   Purchase / Income-Expense / Payroll registers, statements, stock
   ledger, etc.), the printed page should show only the report content
   -- not the top navbar, slider toggle, filter card, or the buttons
   themselves. Save-as-PDF in the print dialog uses the same rules. */
@media print {
    nav,
    .navbar,
    .left-menu-arrow,
    .left-menu-drawer,
    .left-menu-backdrop,
    .btn,
    button,
    a.btn,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    body, main { background: #fff !important; }
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    .card-header, .card-footer {
        background: #f8f9fa !important;
        border-color: #dee2e6 !important;
    }

    /* Repeat table headers on every printed page so multi-page reports
       stay readable. */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    table { page-break-inside: auto; }
    tr    { page-break-inside: avoid; page-break-after: auto; }
}

/* Blazor error UI (default) */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }