/* =============================================================================
   Loyola Billing - application styling
   Built on Bootstrap 5. The aim is a dense, quiet ERP surface: data first,
   decoration last, and fast keyboard-driven entry on the billing screen.
   ========================================================================== */

:root {
    --lb-ink: #1f2933;
    --lb-muted: #6b7785;
    --lb-line: #dfe3e8;
    --lb-surface: #ffffff;
    --lb-canvas: #f4f6f8;
    --lb-brand: #1f4e79;
    --lb-brand-dark: #163a5a;
    --lb-accent: #0b7285;
    --lb-danger: #b42318;
    --lb-warning: #b54708;
    --lb-success: #027a48;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--lb-canvas);
    color: var(--lb-ink);
    /* Tabular figures so columns of money line up on every row. */
    font-feature-settings: "tnum" 1;
    font-size: 0.9rem;
}

/* --- chrome ------------------------------------------------------------- */

.app-navbar {
    background: var(--lb-brand);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
    color: rgba(255, 255, 255, .88);
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
    color: #fff;
}

.app-navbar .nav-link.active {
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .9);
}

.navbar-brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: .5rem;
    border-radius: 5px;
    background: #fff;
    color: var(--lb-brand);
    font-weight: 700;
    font-size: .8rem;
}

.brand-text {
    font-weight: 600;
    letter-spacing: .01em;
}

.app-main {
    flex: 1 0 auto;
    padding: 1.1rem 0 2rem;
}

.app-footer {
    flex-shrink: 0;
    padding: .6rem 0;
    border-top: 1px solid var(--lb-line);
    background: var(--lb-surface);
    font-size: .8rem;
    color: var(--lb-muted);
}

/* --- page furniture ----------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.page-head h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.page-head .subtitle {
    margin: .1rem 0 0;
    font-size: .82rem;
    color: var(--lb-muted);
}

.card {
    border: 1px solid var(--lb-line);
    border-radius: 6px;
    background: var(--lb-surface);
}

.card-header {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--lb-line);
    background: #fbfcfd;
    font-weight: 600;
    font-size: .85rem;
}

/* --- dashboard cards ---------------------------------------------------- */

.stat-tile {
    height: 100%;
    padding: .85rem;
    border: 1px solid var(--lb-line);
    border-left: 3px solid var(--lb-brand);
    border-radius: 6px;
    background: var(--lb-surface);
}

.stat-tile .label {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lb-muted);
}

.stat-tile .value {
    margin-top: .2rem;
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat-tile .hint {
    font-size: .76rem;
    color: var(--lb-muted);
}

.stat-tile.accent { border-left-color: var(--lb-accent); }
.stat-tile.danger { border-left-color: var(--lb-danger); }
.stat-tile.warning { border-left-color: var(--lb-warning); }
.stat-tile.success { border-left-color: var(--lb-success); }

/* --- tables ------------------------------------------------------------- */

.table {
    margin-bottom: 0;
    font-size: .85rem;
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--lb-line);
    background: #f7f9fa;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lb-muted);
    white-space: nowrap;
}

.table > tbody > tr > td {
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f2f7fb;
}

.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.table-sticky {
    max-height: 62vh;
    overflow: auto;
}

.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Wide tables scroll inside their own container rather than pushing the page. */
.table-scroll {
    overflow-x: auto;
}

/* --- status badges ------------------------------------------------------ */

.badge-status {
    padding: .28em .55em;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.badge-draft { background: #eef1f4; color: #52606d; }
.badge-confirmed { background: #e6f4ea; color: var(--lb-success); }
.badge-cancelled { background: #fdeceb; color: var(--lb-danger); }
.badge-unpaid { background: #fdeceb; color: var(--lb-danger); }
.badge-partial { background: #fff4e5; color: var(--lb-warning); }
.badge-paid { background: #e6f4ea; color: var(--lb-success); }
.badge-warning-row { background: #fff4e5; color: var(--lb-warning); }

/* --- forms and the billing grid ---------------------------------------- */

.form-label {
    margin-bottom: .2rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lb-muted);
}

.form-control, .form-select {
    font-size: .85rem;
}

.form-control-sm, .form-select-sm {
    font-size: .82rem;
}

.filter-bar {
    padding: .75rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--lb-line);
    border-radius: 6px;
    background: var(--lb-surface);
}

/* The item grid is built for speed: compact rows, right-aligned money, and
   inputs that fill their cell so tabbing lands exactly where expected. */
#itemGrid input,
#itemGrid select {
    width: 100%;
    min-width: 0;
    padding: .25rem .4rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-size: .85rem;
}

#itemGrid input:hover,
#itemGrid select:hover {
    border-color: var(--lb-line);
}

#itemGrid input:focus,
#itemGrid select:focus {
    border-color: var(--lb-brand);
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(31, 78, 121, .12);
}

#itemGrid input.num {
    text-align: right;
}

#itemGrid td {
    padding: .2rem .3rem;
}

.computed {
    display: block;
    padding: .25rem .4rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--lb-ink);
}

.totals-panel {
    border: 1px solid var(--lb-line);
    border-radius: 6px;
    background: var(--lb-surface);
}

.totals-panel .row-line {
    display: flex;
    justify-content: space-between;
    padding: .3rem .85rem;
    font-size: .85rem;
}

.totals-panel .row-line.grand {
    border-top: 1px solid var(--lb-ink);
    font-size: 1rem;
    font-weight: 700;
}

.totals-panel .row-line .label {
    color: var(--lb-muted);
}

/* --- charts ------------------------------------------------------------- */

/* Charts are inline SVG generated server-side: no chart library, so nothing
   external to load, and they print correctly. */
.chart {
    width: 100%;
    height: auto;
}

.chart .bar { fill: var(--lb-brand); }
.chart .bar:hover { fill: var(--lb-accent); }
.chart .axis { stroke: var(--lb-line); stroke-width: 1; }
.chart .grid { stroke: #eef1f4; stroke-width: 1; }
.chart .label { font-size: 9px; fill: var(--lb-muted); }
.chart .value-label { font-size: 9px; fill: var(--lb-ink); }
.chart .line { fill: none; stroke: var(--lb-brand); stroke-width: 2; }
.chart .point { fill: var(--lb-brand); }

/* --- empty and busy states --------------------------------------------- */

.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--lb-muted);
}

.empty-state .title {
    font-weight: 600;
    color: var(--lb-ink);
}

.app-busy {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .55);
}

.app-busy .spinner-border {
    color: var(--lb-brand);
}

/* --- invoice -------------------------------------------------------------
   Reproduces the company's printed invoice. Every colour, weight and column
   width here was sampled from the reference invoice rather than chosen, so the
   web view, the print view and the PDF all look like the same document. */

.invoice-sheet {
    --inv-navy: #0a3b6e;
    --inv-gold: #e4a81a;
    --inv-ink: #1a1f2b;
    --inv-muted: #5c6b7f;
    --inv-panel: #f7f9fb;
    --inv-panel-head: #e2e8ef;
    --inv-total-row: #edf2f6;
    --inv-border: #cad4e1;
    --inv-note: #baf6cf;
    --inv-note-edge: #16a349;

    max-width: 210mm;
    margin: 0 auto;
    padding: 15mm;
    background: #fff;
    border: 1px solid var(--lb-line);
    color: var(--inv-ink);
    font-size: .8rem;
}

.invoice-sheet .muted {
    color: var(--inv-muted);
    font-size: .74rem;
}

/* --- letterhead --- */

.lh-rule {
    height: 1.5px;
    background: var(--inv-gold);
}

.lh-mark img {
    height: 32px;
    width: auto;
}

/* The monogram is set as type on the printed invoice, so it is drawn rather
   than requiring an image file. */
.lh-monogram {
    font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
}

.lh-monogram .a { color: var(--inv-navy); }
.lh-monogram .b { color: var(--inv-gold); }

.lh-registration {
    color: var(--inv-navy);
    font-size: .8rem;
    line-height: 1.35;
}

.lh-name {
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 1.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--inv-navy);
    line-height: 1.1;
}

.lh-address {
    text-align: center;
    font-size: .78rem;
    color: var(--inv-navy);
    line-height: 1.3;
}

/* --- TAX INVOICE banner --- */

.inv-banner {
    margin-top: .55rem;
    padding: .28rem 0;
    background: var(--inv-navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
}

/* --- consignee / details panels --- */

.inv-panels {
    margin-top: .55rem;
}

.inv-panel {
    border: 1px solid var(--inv-border);
    background: var(--inv-panel);
}

.inv-panel-head {
    padding: .18rem .45rem;
    background: var(--inv-panel-head);
    color: var(--inv-navy);
    font-size: .72rem;
    font-weight: 700;
}

.inv-panel-body {
    padding: .35rem .45rem;
    line-height: 1.45;
}

.inv-panel-body.small {
    font-size: .74rem;
}

.consignee-name {
    font-size: .84rem;
    font-weight: 700;
    color: var(--inv-navy);
}

/* --- item table --- */

.inv-items {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.inv-items thead th {
    padding: .3rem .35rem;
    background: var(--inv-navy);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border: 0;
    vertical-align: bottom;
}

.inv-items tbody td {
    padding: .28rem .35rem;
    border-bottom: 1px solid var(--inv-border);
    vertical-align: top;
}

.inv-items .goods-name {
    font-weight: 700;
}

.inv-items tfoot td {
    padding: .3rem .35rem;
    background: var(--inv-total-row);
    border-bottom: 1px solid var(--inv-border);
    color: var(--inv-navy);
    font-weight: 700;
}

/* --- amount in words --- */

.inv-words {
    margin-top: .55rem;
    padding: .3rem .45rem;
    background: var(--inv-navy);
    color: #fff;
    font-size: .74rem;
}

/* --- totals stack --- */

.inv-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.inv-totals td {
    padding: .16rem .35rem;
}

.inv-totals tr.grand td {
    padding: .3rem .35rem;
    background: var(--inv-navy);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
}

.inv-totals tr.balance td {
    color: var(--inv-navy);
    font-weight: 700;
}

/* --- important note --- */

.inv-note {
    margin-top: .6rem;
    padding: .35rem .5rem;
    background: var(--inv-note);
    border-left: 3px solid var(--inv-note-edge);
    font-size: .74rem;
    line-height: 1.4;
}

/* --- terms and signature --- */

.terms-head {
    color: var(--inv-navy);
    font-size: .72rem;
    font-weight: 700;
}

.inv-signature {
    height: 42px;
    width: auto;
    margin: .15rem 0;
}

.inv-footer {
    margin-top: .8rem;
    padding-top: .3rem;
    border-top: 1px solid var(--inv-border);
    color: var(--inv-muted);
    font-size: .66rem;
}

/* A cancelled invoice must never be mistaken for a live one. */
.cancelled-stamp {
    color: var(--lb-danger);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
}

/* --- print -------------------------------------------------------------- */

@media print {
    .app-navbar,
    .app-footer,
    .no-print,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 10pt;
    }

    .app-main {
        padding: 0;
    }

    .invoice-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Keep a table row from being split across two pages. */
    tr, .stat-tile, .card {
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 767.98px) {
    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .table {
        font-size: .8rem;
    }

    .invoice-sheet {
        padding: 4mm;
    }
}