@font-face {
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/fira-sans-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/fira-sans-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/fira-sans-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/FiraSansCondensed-Bold.woff2") format("woff2"),
         url("fonts/fira-sans-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
    --ink: #10243f;
    --muted: #5d6e80;
    --navy: #0d2137;
    --navy-2: #16324d;
    --teal: #0e8f78;
    --teal-2: #14b8a6;
    --paper: #f3f6f5;
    --card: #ffffff;
    --line: #d5e3de;
    --warn: #c9852a;
    --danger: #c2413a;
    --ok: #0e8f78;
    --shadow: 0 10px 28px rgba(16, 36, 63, 0.08);
    --font: "Fira Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html, body, button, input, select, textarea, label, th, td, a, span, p, h1, h2, h3, legend, summary, strong, small {
    font-family: var(--font);
    font-weight: 700;
}
body {
    color: var(--ink);
    background: var(--paper);
    font-size: 16.5px;
    font-weight: 700;
}
button, input, select, textarea { font-size: 0.8125rem; font-weight: 700; }
a { color: var(--teal); font-weight: 700; }

.page {
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
}
.page-body { display: flex; flex: 1; min-height: 0; }
.sidebar {
    width: 15.2rem;
    flex: 0 0 15.2rem;
    background: linear-gradient(180deg, #10283f 0%, #0b1c2e 100%);
    color: #e7eef3;
    overflow: auto;
    border-right: 1px solid #0a1826;
}
.nav-collapsed .sidebar { width: 3.5rem; flex-basis: 3.5rem; }
.nav-collapsed .nav-label,
.nav-collapsed .nav-group-btn span,
.nav-collapsed .side-foot { display: none; }
main { flex: 1; min-width: 0; display: flex; min-height: 0; }
article.content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem 0.75rem;
}
article.content:has(.dash-page),
article.content:has(.inv-browser-page) {
    overflow: hidden;
}
.dash-page,
.inv-browser-page {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.dash-top { flex: 0 0 auto; }
.dash-invoices {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
}
.inv-browser {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.inv-browser .page-bar,
.inv-browser .alert { flex: 0 0 auto; }
.inv-browser .tb-grid-wrap {
    flex: 1 1 0;
    min-height: 12rem;
    max-height: none;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: 3.2rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.85rem;
    background: #fff;
    border-bottom: 4px solid var(--teal);
    box-shadow: 0 6px 16px rgba(13, 33, 55, 0.06);
    z-index: 20;
}
.btn-nav-toggle, .icon-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid #c9ddd6;
    border-radius: 0.35rem;
    background: #f4faf8;
    color: var(--navy);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.brand-name { font-weight: 700; letter-spacing: 0.01em; line-height: 1; }
.brand-sub { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 500; }
.biz-switch { min-width: 12rem; max-width: 18rem; }
.header-user { margin-left: auto; text-align: right; line-height: 1.05; }
.header-user strong { display: block; font-size: 0.86rem; }
.header-user span { color: var(--muted); font-size: 0.72rem; }
.signout {
    border: 0;
    background: var(--navy);
    color: #fff;
    border-radius: 0.35rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
}
.signout:hover { background: var(--teal); }

.side-nav { padding: 0.55rem 0.45rem 1rem; }
.nav-link, .nav-group-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    color: #d5e2ea;
    text-decoration: none;
    border: 0;
    background: transparent;
    border-radius: 0.4rem;
    padding: 0.42rem 0.55rem;
    cursor: pointer;
    text-align: left;
}
.nav-link:hover, .nav-group-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: rgba(20, 184, 166, 0.18); color: #fff; }
.nav-icon { width: 1.1rem; text-align: center; color: var(--teal-2); }
.nav-group-body { padding-left: 0.35rem; }
.nav-group-body .nav-link { font-size: 0.84rem; }
.side-foot { color: #8ea3b5; font-size: 0.68rem; padding: 0.8rem 0.7rem; }

.page-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.page-title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.page-note { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.78rem; }
.page-bar .tools { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }

.btn {
    border: 1px solid transparent;
    border-radius: 0.35rem;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
}
.btn-sm { padding: 0.22rem 0.5rem; font-size: 0.75rem; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #0c7b68; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #16324d; }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-danger { background: #fff; border-color: #efc7c4; color: var(--danger); }
.btn-primary { background: #163a9a; color: #fff; }
.btn-primary:hover { background: #0b1f6b; }
.btn-success { background: #0e8f78; color: #fff; }
.btn-success:hover { background: #0c7b68; }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger {
    background: #fff;
    border-color: #c9d9d3;
    color: var(--ink);
}
.btn-outline-primary { border-color: #9eb6d4; color: #0b1f6b; }
.btn-outline-primary:hover { background: #eef5fb; }
.btn-outline-secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.secret-field {
    position: relative;
    display: flex;
    align-items: center;
}
.secret-field .form-control { padding-right: 2.2rem; }
.secret-eye {
    position: absolute;
    right: 0.2rem;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}
.secret-eye:hover { color: var(--navy); }

.stat-grid, .chart-grid { display: grid; gap: 0.7rem; margin-bottom: 0.75rem; }
.stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Status card matches one Total amount card (1/4 of the 4-col stat row); month chart gets 3/4 */
.chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.stat-card, .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    box-shadow: var(--shadow);
}
button.stat-card {
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
}
.stat-card {
    padding: 0.75rem 0.85rem 0.7rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--teal);
}
.stat-card.amber::before { background: var(--warn); }
.stat-card.navy::before { background: var(--navy-2); }
.stat-card.red::before { background: var(--danger); }
.stat-card.tone-created { background: #e8eefc; }
.stat-card.tone-created::before { background: #1e3a8a; }
.stat-card.tone-posted { background: #e5f7f1; }
.stat-card.tone-posted::before { background: #0c6b5b; }
.stat-card.tone-pending { background: #fff4e2; }
.stat-card.tone-pending::before { background: #c2410c; }
.stat-card.tone-failed { background: #fdecec; }
.stat-card.tone-failed::before { background: #b91c1c; }
.stat-card.tone-total { background: #e7f3f1; }
.stat-card.tone-total::before { background: #0f766e; }
.stat-card.tone-tax { background: #e8f6e9; }
.stat-card.tone-tax::before { background: #15803d; }
.stat-card.tone-final { background: #f3e8ff; }
.stat-card.tone-final::before { background: #7e22ce; }
.stat-card.tone-further { background: #fff1e6; }
.stat-card.tone-further::before { background: #ea580c; }
.stat-card.tone-excl { background: #e8f1fb; }
.stat-card.tone-excl::before { background: #1d4ed8; }
.stat-card.tone-discount { background: #f4f0e8; }
.stat-card.tone-discount::before { background: #92400e; }
.stat-card.tone-extra { background: #fde8f3; }
.stat-card.tone-extra::before { background: #be185d; }
.stat-card.tone-today { background: #e7f6fb; }
.stat-card.tone-today::before { background: #0369a1; }
.stat-k { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.stat-v { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-card small { color: var(--muted); font-size: 0.72rem; }
.panel { padding: 0.75rem 0.85rem; }
.panel h2 { margin: 0 0 0.45rem; font-size: 0.92rem; }
.chart-box { height: 240px; position: relative; }
.chart-box-mix { height: 200px; }
.chart-month-mix { margin-bottom: 0.75rem; }
.chart-status h2 { text-align: center; }
.chart-box-center {
    width: min(100%, 220px);
    height: 220px;
    margin: 0 auto;
}

.tb-grid-wrap {
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: var(--shadow);
    max-height: min(62svh, 720px);
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    overflow: hidden;
}
/* Master tabs (Businesses/Users/…) — fill leftover content so the grid cannot collapse to 0 */
article.content > .page-bar,
article.content > .alert,
article.content > .form-card,
article.content > .banner { flex: 0 0 auto; }
article.content > .tb-grid-wrap {
    flex: 1 1 0;
    min-height: 16rem;
    max-height: none;
}
.inv-browser .tb-grid-wrap {
    max-height: none;
    flex: 1 1 0;
}
.tb-grid-scroll {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.inv-browser .tb-grid-scroll,
.dash-invoices .tb-grid-scroll {
    flex: 1 1 0;
    min-height: 0;
}
.tb-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
    table-layout: fixed;
}
.tb-grid th, .tb-grid td {
    padding: 0.28rem 0.28rem;
    border-bottom: 1px solid #e7efec;
    white-space: nowrap;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-grid thead th {
    position: sticky;
    top: 0;
    background: var(--navy);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 3;
}
.tb-grid .filter th {
    top: 1.5rem;
    background: #f7fbfa;
    color: var(--ink);
    cursor: default;
    padding: 0.18rem;
    z-index: 3;
}
.tb-grid .filter input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d5e3de;
    border-radius: 0.25rem;
    padding: 0.12rem 0.25rem;
    background: #fff;
    color: var(--ink);
    font-size: 0.68rem;
}
.tb-grid tbody tr:hover { background: #f3faf8; }
/* Invoice list: posted / open / invalid — light tints */
.tb-grid tbody tr.row-posted td { background: #e7f6ef; }
.tb-grid tbody tr.row-open td { background: #eef4fc; }
.tb-grid tbody tr.row-invalid td { background: #fdeeee; }
.tb-grid tbody tr.row-posted:hover td { background: #d7f0e4; }
.tb-grid tbody tr.row-open:hover td { background: #e0ebf8; }
.tb-grid tbody tr.row-invalid:hover td { background: #fadcdc; }
.tb-grid td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #eceff1;
    border-top: 2px solid #90a4ae;
    border-bottom: 0;
    font-weight: 800;
    color: #0b1f6b;
    box-shadow: 0 -3px 8px rgba(13, 33, 55, 0.06);
}
.tb-grid tfoot .tb-foot-count { text-align: left; color: #16324d; }
.tb-grid tfoot .num { color: #0c6b5b; }
/* Fit page width — no horizontal scroll on desktop */
.tb-grid .col-inv { width: 7%; }
.tb-grid .col-date { width: 5.5%; }
.tb-grid .col-biz { width: 9%; }
.tb-grid .col-type { width: 6%; }
.tb-grid .col-buyer { width: 9%; }
.tb-grid .col-ntn { width: 6%; }
.tb-grid .col-env { width: 5%; }
.tb-grid .col-sc { width: 4%; }
.tb-grid .col-status { width: 5.5%; }
.tb-grid .col-fbr { width: 8%; }
.tb-grid .col-amt { width: 5.5%; }
.tb-grid .col-fur { width: 5.5%; min-width: 0; max-width: none; }
/* Master grids (products/customers/…) — auto so Id/Actions are not crushed or padded with empty space */
article.content > .tb-grid-wrap .tb-grid {
    table-layout: auto;
}
.tb-grid .col-id {
    width: 3.25rem;
    min-width: 3rem;
    max-width: 4rem;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}
.tb-grid .col-pname { min-width: 7rem; }
.tb-grid .col-hs { min-width: 5.5rem; }
.tb-grid .col-pdesc { min-width: 8rem; max-width: 14rem; }
.tb-grid .col-sale { min-width: 6rem; }
.tb-grid .col-prate,
.tb-grid .col-psro,
.tb-grid .col-puom { min-width: 3.5rem; }
.tb-grid .col-pprice { min-width: 4.5rem; }
.tb-grid .col-pact { width: 3.5rem; text-align: center; }
/* Actions hug the buttons (1% + nowrap); invoice/dash override below */
.tb-grid th.actions,
.tb-grid td.actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
    padding-left: 0.35rem;
    padding-right: 0.3rem;
}
.inv-browser .tb-grid,
.dash-page .tb-grid {
    table-layout: fixed;
}
.inv-browser .tb-grid th.actions,
.inv-browser .tb-grid td.actions,
.dash-page .tb-grid th.actions,
.dash-page .tb-grid td.actions {
    width: 10.25rem;
    max-width: 10.25rem;
    overflow: hidden;
}
.tb-grid thead th.actions {
    cursor: default;
    background: var(--navy);
    color: #fff;
}
.tb-grid .filter th.actions { background: #f7fbfa; }
.tb-grid .actions-bar {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}
.tb-grid .actions .btn,
.tb-grid .btn-sm {
    font-size: 0.68rem;
    white-space: nowrap;
    padding: 0.15rem 0.35rem;
    min-height: 1.45rem;
}
.empty { padding: 1rem; color: var(--muted); }

.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.st-pending { background: #fff4e2; color: #8a5a10; }
.st-submitted { background: #e5f7f3; color: #0c6b5b; }
.st-failed { background: #fdecec; color: #9d2c2c; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: var(--shadow); padding: 0.8rem; margin-bottom: 0.75rem; }
.form-label { display: block; margin: 0 0 0.12rem; font-size: 0.72rem; font-weight: 600; color: #526274; }
.form-label.req::after { content: " *"; color: #b42318; font-weight: 800; }
.prod-form .prod-hs-desc { min-height: 4.5rem; resize: vertical; }
.prod-form .prod-actions-cell {
    display: flex;
    flex-direction: column;
}
.prod-form .prod-actions-cell .btn-schedule {
    width: 100%;
    min-height: 1.9rem;
    height: 1.9rem;
    padding: 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #c45a12;
    border-radius: 0.35rem;
    background: #e8792f;
    color: #fff;
    cursor: pointer;
}
.prod-form .prod-actions-cell .btn-schedule:hover:not(:disabled) {
    background: #c45a12;
}
.prod-form .prod-actions-cell .btn-schedule:disabled {
    opacity: 0.65;
    cursor: default;
}
.prod-form .prod-check-row { display: flex; align-items: flex-end; padding-bottom: 0.2rem; }
.prod-form .prod-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #16324d;
    margin: 0;
}
.form-control, .form-select {
    width: 100%;
    min-height: 1.9rem;
    border: 1px solid #c9d9d3;
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    background: #fff;
    color: var(--ink);
}
.form-control:focus, .form-select:focus { outline: 2px solid rgba(14, 143, 120, 0.25); border-color: var(--teal); }

/* Keyboard nav theme */
.tb-keys-theme .form-control:focus,
.tb-keys-theme .form-select:focus,
.tb-keys-theme .tb-nav:focus {
    outline: 2px solid rgba(14, 143, 120, 0.35);
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 143, 120, 0.12);
    background: #f7fcfa;
}
.tb-keys-theme .tb-lookup:focus-within {
    outline: 2px solid rgba(14, 143, 120, 0.28);
    border-radius: 0.4rem;
}
.tb-keys-theme .tb-lookup:focus-within .form-control {
    box-shadow: none;
    outline: none;
}
.tb-lookup-drop button.tb-hi,
.tb-lookup-drop button.tb-hi:hover {
    background: linear-gradient(90deg, #e3f6f1, #eef8f5);
    color: var(--navy);
    box-shadow: inset 3px 0 0 var(--teal);
}
.tb-keys-hint {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0.25rem 0 0;
}
.tb-keys-hint kbd {
    display: inline-block;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border: 1px solid #c9d9d3;
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: #fff;
    color: var(--navy-2);
}
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem 0.7rem; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }
.section-title { margin: 0.2rem 0 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-2); }
.totals { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; font-variant-numeric: tabular-nums; }
.totals strong { font-size: 1rem; }
.alert { border-radius: 0.45rem; padding: 0.45rem 0.65rem; margin-bottom: 0.65rem; font-size: 0.84rem; }
.alert-ok { background: #e7f7f3; color: #0c6b5b; }
.alert-bad { background: #fdecec; color: #9d2c2c; }
.banner {
    background: linear-gradient(90deg, #0d2137, #135446);
    color: #fff;
    border-radius: 0.7rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.banner h1 { margin: 0; font-size: 1.15rem; }
.banner p { margin: 0.15rem 0 0; color: #d5ebe4; font-size: 0.8rem; }

/* DateEdit (typed + calendar) — DevExpress-like */
.tb-date { position: relative; }
.tb-date-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
}
.tb-date-field .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tb-date-btn {
    min-width: 1.9rem;
    border: 1px solid #c9d9d3;
    border-left: 0;
    border-radius: 0 0.35rem 0.35rem 0;
    background: #eef5f2;
    color: var(--teal);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0 0.4rem;
}
.tb-date-btn:hover:not(:disabled) { background: #e3f6f1; }
.tb-date-btn:disabled { opacity: 0.55; cursor: default; }
.tb-date.open .tb-date-btn,
.tb-date.open .form-control {
    border-color: var(--teal);
}
.tb-date-drop {
    position: absolute;
    z-index: 40;
    left: 0;
    top: calc(100% + 3px);
    width: min(268px, 92vw);
    background: #fff;
    border: 1px solid #c9d9d3;
    border-radius: 0.45rem;
    box-shadow: var(--shadow);
    padding: 0.45rem;
}
.tb-date-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.tb-date-nav-btn, .tb-date-month {
    border: 0;
    background: transparent;
    color: var(--navy);
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0.3rem;
    min-height: 1.7rem;
}
.tb-date-nav-btn { width: 1.7rem; }
.tb-date-nav-btn:hover, .tb-date-month:hover { background: #eef8f5; }
.tb-date-month { width: 100%; }
.tb-date-dow, .tb-date-grid, .tb-date-months {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.12rem;
}
.tb-date-months { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.2rem 0; }
.tb-date-dow span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    padding: 0.15rem 0;
}
.tb-date-day, .tb-date-month-cell {
    border: 0;
    background: #fff;
    border-radius: 0.3rem;
    min-height: 1.7rem;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--ink);
    cursor: pointer;
}
.tb-date-day.muted { color: #9aaeb8; }
.tb-date-day.today { box-shadow: inset 0 0 0 1px var(--teal); }
.tb-date-day.selected, .tb-date-month-cell.selected {
    background: var(--teal);
    color: #fff;
}
.tb-date-day.cursor:not(.selected) { background: #e3f6f1; }
.tb-date-day:hover, .tb-date-month-cell:hover { background: #eef8f5; }
.tb-date-day.selected:hover, .tb-date-month-cell.selected:hover { background: #0c7a66; color: #fff; }
.tb-date-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid #e4eeea;
}

.tb-lookup { position: relative; }
.tb-lookup-drop {
    position: absolute;
    z-index: 30;
    left: 0; right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid #c9d9d3;
    border-radius: 0.4rem;
    box-shadow: var(--shadow);
    max-height: 240px;
    overflow: auto;
}
.tb-lookup-drop button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}
.tb-lookup-drop button:hover, .tb-lookup-drop button.active, .tb-lookup-drop button.tb-hi { background: #eef8f5; }
.tb-lookup-drop .key { color: var(--teal); font-weight: 700; margin-right: 0.35rem; }

.modal-back {
    position: fixed; inset: 0;
    background: rgba(13, 33, 55, 0.45);
    display: grid; place-items: center;
    z-index: 50;
}
.modal {
    width: min(440px, calc(100% - 2rem));
    background: #fff;
    border-radius: 0.8rem;
    padding: 1rem;
    box-shadow: var(--shadow);
}
.modal-json {
    width: min(820px, calc(100% - 2rem));
    max-height: min(88svh, 900px);
    display: flex;
    flex-direction: column;
}
.modal h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.modal p { margin: 0 0 0.8rem; color: var(--muted); }
.modal .tools { display: flex; justify-content: flex-end; gap: 0.4rem; }
.json-view {
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: 60svh;
    overflow: auto;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: #0d2137;
    color: #d5ebe4;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: pre-wrap;
    word-break: break-word;
}
.btn-fbr-link {
    border: 0;
    background: transparent;
    color: #0e8f78;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.btn-fbr-link:hover { color: #0c6b5b; }
.modal-qr {
    width: min(420px, calc(100% - 2rem));
    text-align: center;
}
.qr-fbr-no {
    margin: 0.2rem 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--navy);
    word-break: break-all;
}
.qr-stage {
    display: grid;
    place-items: center;
    margin: 0 auto 0.9rem;
    padding: 0.7rem;
    width: fit-content;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: var(--shadow);
}
.qr-amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}
.qr-amt {
    border-radius: 0.55rem;
    padding: 0.55rem 0.6rem;
    text-align: right;
    border: 1px solid transparent;
}
.qr-amt span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.qr-amt strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.qr-amt.excl {
    background: #eef5fb;
    border-color: #b7cce0;
    color: #16324d;
}
.qr-amt.excl span { color: #3d5f7a; }
.qr-amt.excl strong { color: #16324d; }
.qr-amt.final {
    background: #e8f7f4;
    border-color: #9ed0c5;
    color: #0c6b5b;
}
.qr-amt.final span { color: #0e8f78; }
.qr-amt.final strong { color: #0c6b5b; }

.login-shell {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.9fr);
    background: #07131f;
    overflow: hidden;
}
.login-art {
    position: relative;
    color: #fff;
    padding: 2.2rem 2.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(7, 19, 31, 0.2) 0%, rgba(14, 143, 120, 0.12) 48%, transparent 70%),
        linear-gradient(160deg, #0a1a2c 0%, #10283f 42%, #0d3d38 100%);
}
.login-art-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    animation: login-drift 12s ease-in-out infinite alternate;
}
.login-art-glow-a {
    width: 22rem;
    height: 22rem;
    top: -6rem;
    left: -4rem;
    background: rgba(20, 184, 166, 0.28);
}
.login-art-glow-b {
    width: 18rem;
    height: 18rem;
    right: -3rem;
    bottom: 10%;
    background: rgba(30, 138, 239, 0.18);
    animation-delay: -4s;
}
.login-art-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 72%);
    pointer-events: none;
}
.login-art-top,
.login-art-main,
.login-art-foot {
    position: relative;
    z-index: 1;
}
.login-art-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.login-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}
.login-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #14b8a6, #0e8f78);
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.04em;
    box-shadow: 0 10px 24px rgba(14, 143, 120, 0.35);
}
.login-mark-sm {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    font-size: 0.9rem;
}
.login-brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.login-pill {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.login-art-main { max-width: 34rem; flex: 1 1 auto; }
.login-eyebrow {
    margin: 0 0 0.35rem;
    color: #7fd9c9;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.login-hero {
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 4.1rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 800;
}
.login-lead {
    margin: 0.85rem 0 1.35rem;
    max-width: 32rem;
    color: #c9dde8;
    font-size: 1.05rem;
    line-height: 1.45;
}
.login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}
.login-features li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.85rem;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    animation: login-rise 0.7s ease both;
}
.login-features li:nth-child(2) { animation-delay: 0.08s; }
.login-features li:nth-child(3) { animation-delay: 0.16s; }
.login-feat-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    display: grid;
    place-items: center;
    background: rgba(20, 184, 166, 0.18);
    color: #7fd9c9;
    font-size: 1.05rem;
}
.login-features strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
}
.login-features span {
    display: block;
    color: #a9c2d1;
    font-size: 0.82rem;
    line-height: 1.35;
}
.login-art-foot { margin-top: auto; }
.login-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.login-stats div {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.7rem;
    padding: 0.55rem 0.65rem;
    background: rgba(0,0,0,0.18);
}
.login-stats strong { display: block; font-size: 0.78rem; color: #7fd9c9; }
.login-stats span { color: #c5d8e3; font-size: 0.78rem; }

.login-panel {
    position: relative;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    background:
        radial-gradient(circle at 85% 12%, rgba(20, 184, 166, 0.12), transparent 28%),
        linear-gradient(180deg, #eef6f4 0%, #f7faf9 45%, #e8f1ee 100%);
}
.login-panel::before {
    content: "";
    position: absolute;
    inset: 1.2rem;
    border: 1px solid rgba(13, 33, 55, 0.06);
    border-radius: 1.4rem;
    pointer-events: none;
}
.login-card {
    width: min(420px, 100%);
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(201, 217, 211, 0.95);
    border-radius: 1.25rem;
    padding: 1.55rem 1.45rem 1.35rem;
    box-shadow:
        0 24px 50px rgba(13, 33, 55, 0.12),
        0 2px 0 rgba(255,255,255,0.8) inset;
    backdrop-filter: blur(10px);
}
.login-card-enter { animation: login-rise 0.65s ease both; }
.login-card-brand {
    display: none;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    color: var(--navy);
    font-size: 1.1rem;
    font-weight: 800;
}
.login-card h2 {
    margin: 0;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
    color: var(--navy);
}
.login-card-sub {
    margin: 0.35rem 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
}
.login-error { margin-bottom: 0.85rem; }
.login-form { display: grid; gap: 0.85rem; }
.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.1rem 0 0;
    color: #3d5163;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.login-remember input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--teal);
    cursor: pointer;
}
.login-field .form-label { margin-bottom: 0.28rem; color: #3d5163; }
.login-input {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input > i {
    position: absolute;
    left: 0.7rem;
    color: #7a909f;
    font-size: 1rem;
    pointer-events: none;
}
.login-input .form-control {
    min-height: 2.55rem;
    padding-left: 2.25rem;
    padding-right: 2.4rem;
    border-radius: 0.65rem;
    border-color: #c5d7d0;
    background: #fbfefd;
    font-size: 0.95rem;
}
.login-input .form-control:focus {
    background: #fff;
    border-color: var(--teal);
    outline: 2px solid rgba(14, 143, 120, 0.18);
}
.login-eye {
    right: 0.35rem;
    width: 2rem;
    height: 2rem;
}
.login-submit {
    width: 100%;
    min-height: 2.7rem;
    margin-top: 0.2rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    box-shadow: 0 12px 24px rgba(14, 143, 120, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(14, 143, 120, 0.34);
}
.login-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    background: #eef8f5;
    border: 1px solid #d0e8e1;
    color: #3d5a54;
    font-size: 0.8rem;
    line-height: 1.35;
}
.login-hint i { color: var(--teal); margin-top: 0.1rem; }
.login-foot-note {
    margin: 0.85rem 0 0;
    text-align: center;
    color: #8a9bab;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
@keyframes login-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes login-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18px, 14px, 0) scale(1.06); }
}
.hint { color: var(--muted); font-size: 0.8rem; }

.print-toolbar { padding: 0.7rem 1rem; display: flex; gap: 0.45rem; }
.print-sheet { max-width: 920px; margin: 1rem auto; background: #fff; padding: 1.2rem 1.35rem; color: #10243f; }
.print-head {
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #0d2137;
}
.print-title {
    text-align: center;
    min-width: 0;
}
.print-title h1 {
    margin: 0 0 0.25rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0d2137;
    line-height: 1.15;
}
.print-sub {
    margin: 0.1rem 0;
    font-size: 0.84rem;
    color: #35506a;
}
.print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}
.print-card {
    border: 1px solid #c9d9d3;
    border-radius: 0.45rem;
    background: #f8fbfa;
    padding: 0.65rem 0.8rem 0.75rem;
    min-width: 0;
}
.print-card-invoice {
    background: linear-gradient(180deg, #f3f8fc 0%, #f8fbfa 100%);
    border-color: #b7c9d8;
}
.print-card h2 {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d2137;
}
.print-dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.75rem;
}
.print-dl > div { min-width: 0; }
.print-dl .span-all { grid-column: 1 / -1; }
.print-dl dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a7f90;
}
.print-dl dd {
    margin: 0.08rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #10243f;
    word-break: break-word;
}
.print-sheet table { width: 100%; border-collapse: collapse; margin-top: 0.55rem; }
.print-sheet th, .print-sheet td { border: 1px solid #d5e3de; padding: 0.3rem 0.4rem; font-size: 0.82rem; }
.print-sheet th { background: #0d2137; color: #fff; }
.print-foot {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.print-amounts {
    margin-left: auto;
    width: min(320px, 100%);
    border: 1px solid #c9d9d3;
    border-radius: 0.4rem;
    overflow: hidden;
}
.print-amt {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid #e4eeea;
    font-size: 0.86rem;
}
.print-amt:last-child { border-bottom: 0; }
.print-amt span { color: #35506a; font-weight: 600; }
.print-amt strong {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.print-amt.net {
    background: #0d2137;
    color: #fff;
}
.print-amt.net span, .print-amt.net strong { color: #fff; font-weight: 800; }
.print-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d5e3de;
}
.print-logo, .print-qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}
.print-qr-box span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #084f80;
    line-height: 1.2;
}
.fbr-logo {
    width: 120px;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    display: block;
}
.print-qr {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    background: #fff;
    border: 1px solid #d5e3de;
    padding: 0.2rem;
}
.print-qr:not([src]),
.print-qr[src=""] {
    background:
        linear-gradient(#e8eef2, #e8eef2) center/40% 2px no-repeat,
        linear-gradient(#e8eef2, #e8eef2) center/2px 40% no-repeat,
        #fff;
}
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    .print-sheet {
        margin: 0;
        max-width: none;
        box-shadow: none;
        padding: 0;
    }
    .fbr-logo, .print-qr, .print-amt.net, .print-sheet th, .print-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
@media (max-width: 720px) {
    .print-meta { grid-template-columns: 1fr; }
    .print-brand-row { flex-wrap: wrap; justify-content: center; }
    .print-amounts { width: 100%; margin-left: 0; }
}

.sidebar-backdrop { display: none; }
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
    .span-2, .span-4 { grid-column: span 2; }
}
@media (max-width: 980px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-art {
        min-height: auto;
        padding: 1.4rem 1.25rem 1.1rem;
        gap: 1rem;
    }
    .login-hero { font-size: 2.4rem; }
    .login-lead { margin-bottom: 0.9rem; font-size: 0.95rem; }
    .login-features { grid-template-columns: 1fr; }
    .login-features li:nth-child(n+3) { display: none; }
    .login-card-brand { display: inline-flex; }
    .login-panel { padding: 1.1rem 0.9rem 1.4rem; }
    .login-panel::before { inset: 0.55rem; }
}
/* Tablet / phone shell */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        z-index: 40;
        top: 3.2rem;
        bottom: 0;
        left: 0;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        width: min(16.5rem, 86vw);
        flex-basis: min(16.5rem, 86vw);
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.28);
    }
    .nav-collapsed .sidebar {
        width: min(16.5rem, 86vw);
        flex-basis: min(16.5rem, 86vw);
    }
    .nav-collapsed .nav-label,
    .nav-collapsed .nav-group-btn span,
    .nav-collapsed .side-foot { display: initial; }
    .nav-mobile-open .sidebar { transform: none; }
    .nav-mobile-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 3.2rem 0 0 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 30;
    }
    .app-header {
        gap: 0.4rem;
        padding: 0 0.5rem;
        flex-wrap: nowrap;
    }
    .brand-sub { display: none; }
    .brand-name { font-size: 0.95rem; }
    .biz-switch {
        display: block;
        min-width: 0;
        flex: 1 1 7rem;
        max-width: 11rem;
        font-size: 0.74rem;
        padding: 0.2rem 0.3rem;
    }
    .header-user { margin-left: 0; min-width: 0; }
    .header-user strong { font-size: 0.74rem; max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-user span { display: none; }
    .app-header .btn-ghost { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
    .signout { padding: 0.3rem 0.45rem; font-size: 0.72rem; }
    article.content { padding: 0.55rem 0.55rem 0.75rem; }
    .page-bar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.45rem;
    }
    .page-bar .tools {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }
    .banner .btn { align-self: stretch; text-align: center; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
    .chart-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .span-2, .span-4 { grid-column: span 2; }
    .tb-keys-hint { display: none; }
    /* Dashboard: page scrolls so invoice list is never clipped away */
    article.content:has(.dash-page) {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dash-page {
        display: block;
        flex: none;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .dash-top { margin-bottom: 0.65rem; }
    .dash-invoices {
        flex: none;
        min-height: 0;
        overflow: visible;
    }
    .dash-invoices .inv-browser {
        flex: none;
        min-height: 0;
        overflow: visible;
    }
    .dash-invoices .tb-grid-wrap {
        flex: none;
        min-height: 16rem;
        max-height: none;
        height: auto;
    }
    .dash-invoices .tb-grid-scroll {
        flex: none;
        max-height: min(55svh, 28rem);
        overflow: auto;
    }
    .chart-box { height: 160px; }
    .chart-box-center { max-width: 100%; }
    /* Hide less-critical columns so invoices fit on phone */
    .dash-page .tb-grid .col-env,
    .dash-page .tb-grid .col-sc,
    .dash-page .tb-grid .col-type,
    .dash-page .tb-grid .col-biz,
    .dash-page .tb-grid .col-fur { display: none; }
    .dash-page .tb-grid .col-inv { width: 12%; }
    .dash-page .tb-grid .col-date { width: 11%; }
    .dash-page .tb-grid .col-buyer { width: 18%; }
    .dash-page .tb-grid .col-status { width: 10%; }
    .dash-page .tb-grid .col-excl,
    .dash-page .tb-grid .col-tax { width: 12%; }
    .dash-page .tb-grid .col-net { width: 14%; }
    .tb-grid { font-size: 0.68rem; }
    .tb-grid th, .tb-grid td { padding: 0.22rem 0.22rem; }
    .tb-grid-scroll {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overflow-x: auto;
    }
    /* Stack actions so Net sits flush against a narrow button column */
    .tb-grid th.actions,
    .tb-grid td.actions {
        width: 4.6rem;
        max-width: 4.6rem;
        padding-left: 0.2rem;
        padding-right: 0.15rem;
        white-space: normal;
        vertical-align: middle;
    }
    .tb-grid .actions-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.12rem;
        width: 100%;
    }
    .tb-grid .actions .btn {
        padding: 0.14rem 0.2rem;
        font-size: 0.62rem;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .modal { width: min(440px, calc(100% - 1rem)); }
    .modal-json { width: min(820px, calc(100% - 1rem)); }
}
@media (max-width: 560px) {
    .stat-grid, .chart-grid, .form-grid { grid-template-columns: 1fr; }
    .span-2, .span-4 { grid-column: auto; }
    .app-header a.btn-ghost { display: none; }
    .biz-switch { max-width: none; flex: 1 1 auto; }
    .header-user { display: none; }
    .login-stats { grid-template-columns: 1fr; }
    .print-sheet { padding: 0.7rem; margin: 0.4rem; }
    .print-title h1 { font-size: 1.15rem; }
    .print-dl { grid-template-columns: 1fr; }
    .dash-page .tb-grid .col-ntn,
    .dash-page .tb-grid .col-fbr,
    .dash-page .tb-grid .col-excl { display: none; }
    .dash-page .tb-grid .col-tax { width: 14%; }
    .dash-page .tb-grid .col-net { width: 16%; }
    .dash-page .tb-grid .col-buyer { width: 20%; }
    .dash-invoices .tb-grid-scroll { max-height: min(60svh, 26rem); }
}