/* ---------------------------------------------------------------
   Billing System
   Application chrome + invoice styles.

   The application UI is deliberately colourful and modern; the invoice
   itself stays clean, white and print-friendly.
   --------------------------------------------------------------- */

:root {
    --sidebar-width: 250px;

    /* Brand palette */
    --brand-600: #4f46e5;
    --brand-500: #6366f1;
    --brand-400: #818cf8;
    --brand-50: #eef2ff;

    --accent-500: #0ea5e9;
    --success-600: #059669;
    --success-50: #ecfdf5;
    --danger-500: #e11d48;
    --warning-50: #fffbeb;

    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-300: #cbd5e1;
    --ink-100: #f1f5f9;
    --ink-50: #f8fafc;

    --surface: #ffffff;
    --page-bg: #f4f5fb;

    --radius: 12px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
}

body {
    background-color: var(--page-bg);
    color: var(--ink-900);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------- Layout ------------------------- */

.app-sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 55%, #3730a3 100%);
    color: #fff;
}

.sidebar-brand {
    padding: 1.25rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.15;
}

.sidebar-subtitle {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

@media (min-width: 768px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        flex-direction: column;
    }

    .app-main {
        margin-left: var(--sidebar-width);
    }
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: rgba(255, 255, 255, .78);
    border-radius: var(--radius-sm);
    padding: .62rem .8rem;
    margin-bottom: .18rem;
    font-size: .93rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.app-sidebar .nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .85;
}

.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .09);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, .17);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent-500);
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------------------------- Pieces -------------------------- */

.page-title {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.page-subtitle {
    color: var(--ink-500);
    font-size: .9rem;
}

.card {
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--ink-50);
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 600;
    font-size: .95rem;
}

.form-label {
    font-weight: 550;
    font-size: .875rem;
    color: var(--ink-700);
    margin-bottom: .3rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .16);
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 550;
}

.btn-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #4338ca;
    border-color: #4338ca;
}

.btn-outline-primary {
    color: var(--brand-600);
    border-color: var(--brand-400);
}

.btn-outline-primary:hover {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.alert {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background-color: var(--success-50);
    color: #065f46;
    border-left: 4px solid var(--success-600);
}

.alert-danger {
    background-color: #fff1f2;
    color: #9f1239;
    border-left: 4px solid var(--danger-500);
}

.alert-warning {
    background-color: var(--warning-50);
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.alert-info {
    background-color: var(--brand-50);
    color: #3730a3;
    border-left: 4px solid var(--brand-500);
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
}

.table thead th {
    background-color: var(--ink-50);
    color: var(--ink-700);
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, .09);
}

/* ------------------- Bill history stats + bulk bar ------------- */

.stat-label {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: .15rem;
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.border-start-danger {
    border-left: 4px solid var(--danger-500);
}

.border-start-success {
    border-left: 4px solid var(--success-600);
}

/* Appears only once rows are ticked. */
.bulk-bar {
    background: var(--brand-50);
    border-bottom: 1px solid rgba(15, 23, 42, .07);
}

/* A faint warm tint marks rows that still owe money. */
tr.row-unpaid > td {
    background-color: #fffbf4;
}

.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-500);
}

.empty-state svg {
    width: 42px;
    height: 42px;
    opacity: .35;
    margin-bottom: .75rem;
}

/* ------------------------ Summary panel ----------------------- */

.summary-card {
    background: linear-gradient(160deg, #312e81 0%, #4338ca 100%);
    color: #fff;
    border: 0;
}

.summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .85);
}

.summary-card .summary-divider {
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: .5rem 0 .25rem;
}

.summary-card .summary-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: .5rem;
    color: #fff;
}

.summary-card .summary-grand .label {
    font-size: 1rem;
    font-weight: 600;
}

.summary-card .summary-grand .value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* -------------------------- Billing form ---------------------- */

.items-table th {
    white-space: nowrap;
}

.items-table td {
    vertical-align: middle;
}

.items-table input[readonly] {
    background-color: var(--ink-100);
    font-weight: 600;
}

.items-table .row-number {
    color: var(--ink-500);
    font-size: .85rem;
    text-align: center;
}

.remove-item {
    line-height: 1;
    padding: .25rem .5rem;
}

/* Company banner shown at the top of the billing screen. */
.company-banner {
    border-left: 4px solid var(--brand-500);
}

.company-banner-logo {
    max-height: 62px;
    max-width: 150px;
    object-fit: contain;
}

.company-banner-logo.logo-circle {
    width: 62px;
    height: 62px;
    max-width: 62px;
    border-radius: 50%;
    object-fit: cover;
}

.company-banner-name {
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.2;
}

.company-banner-address {
    font-size: .84rem;
    color: var(--ink-500);
    white-space: pre-line;
    line-height: 1.35;
}

.company-banner-gstin {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-top: 2px;
}

.gst-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand-50);
    color: #3730a3;
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .85rem;
    font-weight: 600;
}

.gst-chip.is-off {
    background: var(--ink-100);
    color: var(--ink-500);
}

/* --------------------------- Invoice -------------------------- */

.invoice {
    background: #fff;
    color: #000;
    padding: 30px 34px;
    max-width: 210mm;
    margin: 0 auto;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.invoice-header {
    border-bottom: 2px solid #000;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.invoice-header-center {
    text-align: center;
}

.invoice-header-left {
    display: flex;
    align-items: center;
    gap: 26px;
    text-align: left;
    /* Small inset so the logo is not flush against the page edge. */
    padding-left: 10px;
}

.invoice-header-right {
    padding-right: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row-reverse;
    text-align: right;
}

.invoice-header-left .invoice-identity,
.invoice-header-right .invoice-identity {
    flex: 1;
}

/* Sized so a wide banner logo (roughly 2.5:1) lands near 340x130 and a
   square-ish one stays within 130px tall. */
.invoice-logo {
    max-height: 130px;
    max-width: 340px;
    object-fit: contain;
}

.invoice-header-center .invoice-logo {
    margin-bottom: 10px;
}

/* Circular logos are cropped to a true circle. */
.invoice-logo.logo-circle {
    width: 130px;
    height: 130px;
    max-width: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, .1);
}

.invoice-company-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

.invoice-company-address {
    font-size: .9rem;
    line-height: 1.45;
    margin-bottom: 4px;
    white-space: pre-line;
}

.invoice-gstin {
    font-size: .9rem;
    font-weight: 600;
}

.invoice-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Bill To block + bill meta sit side by side */
.invoice-parties {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid #000;
    margin-bottom: 14px;
}

.invoice-bill-to {
    font-size: .9rem;
    line-height: 1.5;
    max-width: 60%;
}

.invoice-block-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 4px;
}

.invoice-party-name {
    font-size: 1.02rem;
    font-weight: 700;
}

.invoice-party-address {
    white-space: pre-line;
}

.invoice-meta {
    font-size: .9rem;
    line-height: 1.6;
    text-align: right;
    white-space: nowrap;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.invoice-table th,
.invoice-table td {
    border: 1px solid #000;
    padding: 7px 9px;
    vertical-align: top;
}

.invoice-table thead th {
    background-color: #f1f1f1;
    color: #000;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-size: .9rem;
}

.invoice-totals {
    width: 320px;
    margin-left: auto;
    margin-top: 14px;
    font-size: .95rem;
}

.invoice-totals td {
    padding: 5px 0;
}

.invoice-totals .label {
    text-align: right;
    padding-right: 18px;
}

.invoice-totals .value {
    text-align: right;
    white-space: nowrap;
}

.invoice-grand-total td {
    border-top: 2px solid #000;
    padding-top: 9px;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Bank details (left) and signature (right) share the invoice footer.
   The bank block is top-aligned so it sits just under the totals rather than
   stranded at the bottom of the page; the signature is pushed lower. */
.invoice-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 18px;
}

.invoice-bank {
    font-size: .85rem;
    line-height: 1.45;
    max-width: 55%;
}

.invoice-bank-table td {
    padding: 1px 0;
    vertical-align: top;
}

.invoice-bank-table td:first-child {
    padding-right: 12px;
    white-space: nowrap;
    color: #555;
}

.invoice-bank-table td:last-child {
    font-weight: 600;
}

.invoice-company-contact {
    font-size: .9rem;
    line-height: 1.45;
}

.invoice-signature {
    margin-top: 46px;
    text-align: right;
}

.invoice-signature-line {
    display: inline-block;
    min-width: 230px;
    border-top: 1px solid #000;
    padding-top: 6px;
    font-size: .9rem;
}

.invoice-footer-logo {
    max-height: 70px;
    max-width: 190px;
    object-fit: contain;
    margin-bottom: 8px;
}

.invoice-footer-logo.logo-circle {
    width: 70px;
    height: 70px;
    max-width: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.text-end-num {
    text-align: right;
    white-space: nowrap;
}

/* ----------------------------- Auth --------------------------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6d28d9 100%);
}

.auth-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .28);
}

.auth-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--brand-500), var(--accent-500));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}

/* ------------------------ Invoice templates -------------------- */
/*
   Each template sets --tpl-accent (+ a soft tint) and a header style.
   The rules below consume those variables, so adding a colour is a
   one-line addition plus a matching entry in App\Support\InvoiceTemplate.
*/

.invoice {
    --tpl-accent: #111827;
    --tpl-soft: #f1f1f1;
    --tpl-on-accent: #ffffff;
}

.invoice.tpl-classic  { --tpl-accent: #111827; --tpl-soft: #f1f1f1; }
.invoice.tpl-indigo   { --tpl-accent: #4f46e5; --tpl-soft: #eef2ff; }
.invoice.tpl-emerald  { --tpl-accent: #059669; --tpl-soft: #ecfdf5; }
.invoice.tpl-ruby     { --tpl-accent: #be123c; --tpl-soft: #fff1f2; }
.invoice.tpl-amber    { --tpl-accent: #b45309; --tpl-soft: #fffbeb; }
.invoice.tpl-midnight { --tpl-accent: #1e293b; --tpl-soft: #f1f5f9; }
.invoice.tpl-teal     { --tpl-accent: #0d9488; --tpl-soft: #f0fdfa; }
.invoice.tpl-ocean    { --tpl-accent: #0369a1; --tpl-soft: #f0f9ff; }
.invoice.tpl-royal    { --tpl-accent: #6d28d9; --tpl-soft: #f5f3ff; }
.invoice.tpl-rose     { --tpl-accent: #be185d; --tpl-soft: #fdf2f8; }
.invoice.tpl-slate    { --tpl-accent: #334155; --tpl-soft: #f8fafc; }
.invoice.tpl-forest   { --tpl-accent: #166534; --tpl-soft: #f0fdf4; }

/* Shared: accent-driven table, totals and Bill To block. */
.invoice .invoice-table thead th {
    background-color: var(--tpl-soft);
    border-color: var(--tpl-accent);
}

.invoice .invoice-table th,
.invoice .invoice-table td {
    border-color: var(--tpl-accent);
}

.invoice .invoice-title {
    color: var(--tpl-accent);
}

.invoice .invoice-block-label {
    color: var(--tpl-accent);
}

.invoice .invoice-grand-total td {
    border-top-color: var(--tpl-accent);
    color: var(--tpl-accent);
}

.invoice .invoice-parties {
    border-bottom-color: var(--tpl-accent);
}

.invoice .invoice-signature-line {
    border-top-color: var(--tpl-accent);
}

/* --- Header style: solid colour band --- */
.invoice.tpl-indigo .invoice-header,
.invoice.tpl-emerald .invoice-header,
.invoice.tpl-ruby .invoice-header,
.invoice.tpl-amber .invoice-header,
.invoice.tpl-midnight .invoice-header {
    background-color: var(--tpl-accent);
    color: var(--tpl-on-accent);
    border-bottom: 0;
    padding: 20px 22px;
    margin: -30px -34px 18px;
    border-radius: var(--radius) var(--radius) 0 0;
}

.invoice.tpl-indigo .invoice-gstin,
.invoice.tpl-emerald .invoice-gstin,
.invoice.tpl-ruby .invoice-gstin,
.invoice.tpl-amber .invoice-gstin,
.invoice.tpl-midnight .invoice-gstin,
.invoice.tpl-indigo .invoice-company-address,
.invoice.tpl-emerald .invoice-company-address,
.invoice.tpl-ruby .invoice-company-address,
.invoice.tpl-amber .invoice-company-address,
.invoice.tpl-midnight .invoice-company-address {
    color: rgba(255, 255, 255, .9);
}

/* Give a banded circular logo a light ring so it reads on the colour. */
.invoice.tpl-indigo .invoice-logo.logo-circle,
.invoice.tpl-emerald .invoice-logo.logo-circle,
.invoice.tpl-ruby .invoice-logo.logo-circle,
.invoice.tpl-amber .invoice-logo.logo-circle,
.invoice.tpl-midnight .invoice-logo.logo-circle {
    border-color: rgba(255, 255, 255, .6);
    background: #fff;
}

/* --- Header style: thick coloured rule --- */
.invoice.tpl-classic .invoice-header,
.invoice.tpl-teal .invoice-header,
.invoice.tpl-ocean .invoice-header,
.invoice.tpl-royal .invoice-header,
.invoice.tpl-rose .invoice-header {
    border-bottom: 3px solid var(--tpl-accent);
}

.invoice.tpl-teal .invoice-company-name,
.invoice.tpl-ocean .invoice-company-name,
.invoice.tpl-royal .invoice-company-name,
.invoice.tpl-rose .invoice-company-name {
    color: var(--tpl-accent);
}

/* --- Header style: minimal --- */
.invoice.tpl-slate .invoice-header,
.invoice.tpl-forest .invoice-header {
    border-bottom: 1px solid var(--tpl-accent);
}

.invoice.tpl-slate .invoice-title,
.invoice.tpl-forest .invoice-title {
    letter-spacing: 4px;
    font-weight: 600;
}

.invoice.tpl-slate .invoice-table thead th,
.invoice.tpl-forest .invoice-table thead th {
    background-color: transparent;
    border-bottom-width: 2px;
}

/* ---------------------- Template picker UI --------------------- */

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: .75rem;
}

.template-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.template-card {
    display: block;
    cursor: pointer;
    border: 2px solid rgba(15, 23, 42, .12);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

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

.template-option input:checked + .template-card {
    border-color: var(--tpl-swatch, var(--brand-600));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

/* Miniature invoice preview inside each card. */
.template-preview {
    height: 74px;
    padding: 7px 8px;
    background: #fff;
}

.template-preview .tp-band {
    height: 17px;
    border-radius: 2px;
    background: var(--tpl-swatch);
    margin-bottom: 5px;
}

.template-preview .tp-rule {
    height: 8px;
    border-bottom: 2px solid var(--tpl-swatch);
    margin-bottom: 6px;
}

.template-preview .tp-plain {
    height: 8px;
    border-bottom: 1px solid var(--tpl-swatch);
    margin-bottom: 6px;
}

.template-preview .tp-line {
    height: 4px;
    border-radius: 2px;
    background: rgba(15, 23, 42, .13);
    margin-bottom: 4px;
}

.template-preview .tp-line.short {
    width: 55%;
}

.template-preview .tp-total {
    height: 5px;
    width: 42%;
    margin-left: auto;
    border-radius: 2px;
    background: var(--tpl-swatch);
}

.template-name {
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    padding: .35rem .25rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
    color: var(--ink-700);
}

.template-option input:checked + .template-card .template-name {
    background: var(--tpl-swatch);
    color: #fff;
}

.template-current {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--ink-500);
}

.template-current .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--tpl-swatch);
    display: inline-block;
}

/* ----------------------------- Print -------------------------- */

@page {
    size: A4;
    margin: 12mm;
}

@media print {
    html, body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }

    /* Hide every piece of application chrome. */
    .no-print,
    .app-sidebar,
    .navbar,
    .offcanvas,
    .offcanvas-backdrop,
    .alert,
    .btn,
    button,
    form.d-print-none {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    .app-shell,
    .app-main {
        display: block !important;
    }

    .invoice {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /*
       Print sizing.

       The invoice fills the whole A4 content box (297mm less the 12mm top and
       bottom margins) and lays its blocks out as a column, so the bank details
       and signature are pushed to the foot of the page instead of leaving a
       large gap underneath a short bill. Type is sized so a typical 7-line
       bill looks well proportioned while a 12-line one still fits.
    */
    /*
       Sized so a seven-line bill fills an A4 page. Everything scales together;
       the fixed item columns are narrowed so the description still fits on one
       line at this larger type, which is what keeps a row to a single line.
    */
    .invoice {
        font-size: 17px;
    }

    .invoice-footer {
        margin-top: 26px;
    }

    .invoice-logo {
        max-height: 125px !important;
        max-width: 320px !important;
    }

    .invoice-logo.logo-circle {
        width: 125px !important;
        height: 125px !important;
        max-width: 125px !important;
    }

    .invoice-header {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    /*
       Sizes are in px, not rem: rem resolves against the 16px root, which
       would ignore the .invoice font-size above and render everything larger
       than intended (and wrap the description column onto a second line).
    */
    .invoice-company-name {
        font-size: 27px;
        margin-bottom: 4px;
    }

    .invoice-company-address,
    .invoice-company-contact,
    .invoice-gstin {
        font-size: 15.5px;
        line-height: 1.35;
    }

    .invoice-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .invoice-parties {
        padding-bottom: 14px;
        margin-bottom: 14px;
    }

    .invoice-bill-to,
    .invoice-meta {
        font-size: 15.5px;
        line-height: 1.4;
    }

    .invoice-party-name {
        font-size: 17.5px;
    }

    .invoice-block-label {
        font-size: 13px;
    }

    .invoice-table {
        page-break-inside: auto;
        font-size: 16px;
    }

    .invoice-table th,
    .invoice-table td {
        padding: 7px 9px;
        line-height: 1.3;
    }

    /*
       Narrow the fixed numeric columns so the description column gets enough
       room to stay on one line at this type size. !important is needed because
       the widths are set as inline styles on the table headers.
    */
    .invoice-table th:nth-child(1),
    .invoice-table td:nth-child(1) { width: 32px !important; }

    .invoice-table th:nth-child(5),
    .invoice-table td:nth-child(5) { width: 64px !important; }

    .invoice-table th:nth-child(6),
    .invoice-table td:nth-child(6) { width: 92px !important; }

    .invoice-table th:nth-child(7),
    .invoice-table td:nth-child(7) { width: 108px !important; }

    .invoice-totals {
        margin-top: 14px;
        font-size: 17px;
    }

    .invoice-totals td {
        padding: 4px 0;
    }

    .invoice-grand-total td {
        padding-top: 10px;
        font-size: 20px;
    }

    .invoice-bank {
        font-size: 15px;
        line-height: 1.4;
    }

    .invoice-signature-line {
        font-size: 15.5px;
    }

    .invoice-signature {
        margin-top: 30px;
    }

    .invoice-footer-logo {
        max-height: 68px !important;
        max-width: 185px !important;
        margin-bottom: 6px;
    }

    .invoice-footer-logo.logo-circle {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
    }

    .invoice-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    .invoice-table thead {
        display: table-header-group;
    }

    .invoice-signature,
    .invoice-bank,
    .invoice-footer {
        page-break-inside: avoid;
    }

    /* Keep template colours, table shading and logo cropping when printing. */
    .invoice,
    .invoice-header,
    .invoice-table thead th,
    .invoice-title,
    .invoice-grand-total td,
    .invoice-logo,
    .invoice-footer-logo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /*
       On screen the coloured header band bleeds out over the .invoice padding
       via negative margins. In print that padding is removed, so the negative
       margins would push the band off the page - reset them and pad instead.
    */
    .invoice.tpl-indigo .invoice-header,
    .invoice.tpl-emerald .invoice-header,
    .invoice.tpl-ruby .invoice-header,
    .invoice.tpl-amber .invoice-header,
    .invoice.tpl-midnight .invoice-header {
        margin: 0 0 16px !important;
        padding: 16px 18px !important;
        border-radius: 0 !important;
    }
}

/* Bare print page (no application chrome at all). */
.print-page {
    background: #fff;
}

.print-page .invoice {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}

.print-toolbar {
    max-width: 210mm;
    margin: 16px auto 0;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}