/*
 * Silicon Stories — admin panel design system.
 *
 * A plain stylesheet injected through a render hook, deliberately NOT a Vite
 * theme. `make:filament-theme` builds to public/build, which is gitignored, and
 * building it needs node — which shared cPanel does not have. A theme that
 * exists only on the machine that built it looks right locally and stock in
 * production. This file is committed, copied to the docroot by deploy.sh's
 * public/css line, and needs no build step ever.
 *
 * It overrides Filament's `fi-*` classes. Those are stable across patch
 * releases but not guaranteed across majors — re-check on a major upgrade.
 * Nothing here is load-bearing: if a selector stops matching the panel falls
 * back to stock Filament, which is the right failure.
 *
 * ---------------------------------------------------------------------------
 * The system in one paragraph
 *
 * Monochrome, because the brand mark is. Whitespace and type weight carry the
 * hierarchy instead of colour, which leaves colour free to mean something —
 * a status, a warning, a destructive act. Tiny tracked uppercase labels sit
 * above large tight numerals; surfaces are white on near-white with a single
 * hairline border and no shadow. Density is high but never cramped: the unit
 * of measure is 4px and most spacing is 8, 12 or 16.
 */

:root {
    /* Surfaces */
    --ss-bg: oklch(0.975 0 0);
    --ss-surface: #fff;
    --ss-surface-sunken: oklch(0.97 0 0);
    --ss-border: oklch(0.922 0 0);
    --ss-border-soft: oklch(0.945 0 0);

    /* Ink */
    --ss-text: oklch(0.205 0 0);
    --ss-text-muted: oklch(0.556 0 0);
    --ss-text-faint: oklch(0.708 0 0);

    /* Geometry. One radius for panels, one for controls inside them. */
    --ss-radius: 0.75rem;
    --ss-radius-sm: 0.5rem;

    /* The label that sits above every number in this panel. */
    --ss-label-size: 0.6875rem;
    --ss-label-tracking: 0.06em;
}

.dark {
    --ss-bg: oklch(0.165 0 0);
    --ss-surface: oklch(0.205 0 0);
    --ss-surface-sunken: oklch(0.185 0 0);
    --ss-border: oklch(0.28 0 0);
    --ss-border-soft: oklch(0.25 0 0);

    --ss-text: oklch(0.97 0 0);
    --ss-text-muted: oklch(0.708 0 0);
    --ss-text-faint: oklch(0.556 0 0);
}

/* ========================================================== page and shell */

.fi-body,
.fi-main-ctn {
    background-color: var(--ss-bg);
}

/* The content column. Wide, but with real gutters — full-bleed text is
   unreadable and full-bleed tables have nowhere to breathe. */
.fi-main {
    padding-inline: 1.5rem;
    padding-block: 1.25rem;
}

@media (max-width: 1024px) {
    .fi-main { padding-inline: 1rem; }
}

/* ---------------------------------------------------------------- topbar */

.fi-topbar > nav {
    background-color: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    box-shadow: none;
}

/* Search reads as a field, not a button. */
.fi-global-search-field .fi-input-wrp {
    border-radius: var(--ss-radius-sm);
    background-color: var(--ss-surface-sunken);
    box-shadow: none;
    border: 1px solid var(--ss-border);
}

/* --------------------------------------------------------------- sidebar */

.fi-sidebar,
.fi-sidebar-nav {
    background-color: var(--ss-surface);
}

.fi-sidebar-header {
    background-color: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border-soft);
    box-shadow: none;
}

/* Group headings: small, quiet, and clearly not clickable rows. */
.fi-sidebar-group-label {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-faint);
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 1.25rem;
}

.fi-sidebar-item-button {
    border-radius: var(--ss-radius-sm);
    padding-block: 0.4375rem;
    font-size: 0.875rem;
    gap: 0.625rem;
}

.fi-sidebar-item-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ss-text-faint);
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: var(--ss-surface-sunken);
}

/* Active: a filled chip, not a coloured label. Colour is reserved for meaning. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: var(--ss-surface-sunken);
    color: var(--ss-text);
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--ss-text);
}

/* The collapse control is a hamburger now; give it the same quiet treatment. */
.fi-sidebar-collapse-btn,
.fi-sidebar-expand-btn {
    color: var(--ss-text-muted);
}

/* =============================================================== surfaces */

/*
 * One card treatment, everywhere. A hairline border and no shadow: at this
 * density stacked shadows turn a dashboard into corrugated iron.
 */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    background-color: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: none;
}

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--ss-radius);
}

.fi-section-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ss-border-soft);
}

.fi-section-header-heading {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

.fi-section-content {
    padding: 1.25rem;
}

/* ============================================================ page header */

.fi-header {
    padding-bottom: 1.25rem;
    gap: 1rem;
}

.fi-header-heading {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ss-text);
}

.fi-header-subheading {
    font-size: 0.8125rem;
    color: var(--ss-text-muted);
}

/* ================================================================= stats */

/*
 * The signature of the reference design: a tiny tracked uppercase label, a
 * large tight numeral, and a quiet one-line footnote. The label tells you what
 * the number is; the number carries the weight; the footnote explains it only
 * if you look.
 */
.fi-wi-stats-overview-stat {
    padding: 1.125rem 1.25rem;
    gap: 0.5rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ss-text);
    /* Numerals line up column to column; proportional digits make a row of
       figures look ragged. */
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    color: var(--ss-text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--ss-border-soft);
    margin-top: 0.25rem;
}

/* ========================================================= dashboard density */

/*
 * The dashboard is one screen per tab, so everything on it is a size smaller
 * than the same component elsewhere in the panel. Scoped to dashboard widgets
 * (.fi-wi-widget): a resource page keeps its breathing room.
 */

/* A row of tiles sits in an uncontained section. The card rule above would
   still draw a box around it — a box of boxes, and a row of the screen. */
.fi-wi-stats-overview .fi-section.fi-section-not-contained {
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.fi-wi-stats-overview .fi-section-not-contained .fi-section-content {
    padding: 0;
}

.fi-wi-stats-overview-stat {
    padding: 0.625rem 0.875rem;
    gap: 0.25rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.25rem;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.6875rem;
    padding-top: 0.25rem;
    margin-top: 0;
}

.fi-wi-widget .fi-section-header {
    padding: 0.625rem 0.875rem;
}

.fi-wi-widget .fi-section-content {
    padding: 0.75rem 0.875rem;
}

/* ================================================================ tables */

.fi-ta-header-cell {
    padding-block: 0.625rem;
    background-color: var(--ss-surface-sunken);
}

.fi-ta-header-cell-label,
.fi-ta-header-cell button {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

.fi-ta-cell .fi-ta-cell-content,
.fi-ta-cell .fi-ta-cell-content-ctn {
    padding-block: 0.625rem;
    font-size: 0.8125rem;
}

.fi-ta-row {
    border-color: var(--ss-border-soft);
}

.fi-ta-row:hover {
    background-color: var(--ss-surface-sunken);
}

/* No zebra striping. With a hairline rule and a hover state it is redundant,
   and it fights the flat surfaces the rest of the system relies on. */

.fi-ta-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ss-border-soft);
}

.fi-ta-header-heading {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

/* Anything numeric lines up. */
.fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
}

/* =============================================================== reports */

/*
 * Report pages draw their own markup (sections of rows from a summary table),
 * so they cannot borrow the table component's classes. These mirror them —
 * the same sunken header band, tracked uppercase labels, hairline rows and
 * tabular figures — so a report reads as part of the panel.
 */
.ss-report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ss-report-period {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.ss-report-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ss-report-label {
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

.ss-report-note {
    font-size: 0.75rem;
    color: var(--ss-text-muted);
}

/* The table runs to the card's edges, as a panel table does. */
.ss-report-section .fi-section-content {
    padding: 0;
}

.ss-report-scroll {
    overflow-x: auto;
}

.ss-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: var(--ss-text);
}

.ss-report-table th {
    padding: 0.625rem 1.25rem;
    background-color: var(--ss-surface-sunken);
    border-bottom: 1px solid var(--ss-border-soft);
    font-size: var(--ss-label-size);
    font-weight: 600;
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    color: var(--ss-text-muted);
    text-align: left;
    white-space: nowrap;
}

.ss-report-table td {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--ss-border-soft);
    white-space: nowrap;
}

.ss-report-table tbody tr:last-child td {
    border-bottom: 0;
}

.ss-report-table tbody tr:hover {
    background-color: var(--ss-surface-sunken);
}

/* Figures right-aligned and tabular, so a column of them can be compared. */
.ss-report-table .ss-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ss-report-table .ss-total td {
    font-weight: 600;
    border-top: 1px solid var(--ss-border);
}

.ss-report-empty {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--ss-text-muted);
}

/* ============================================================ badges, pills */

/*
 * Status is the one place colour is allowed to speak, so it is given a shape
 * of its own: a soft pill rather than a saturated block.
 */
.fi-badge {
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-inline: 0.5rem;
}

/* =============================================================== controls */

.fi-btn {
    border-radius: var(--ss-radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
}

.fi-input-wrp {
    border-radius: var(--ss-radius-sm);
}

.fi-fo-field-wrp-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ss-text);
}

/* ============================================================== branding */

/*
 * The mark is fine line art. Give it room and cap its height so it never
 * fights the page title for attention.
 */
.fi-logo {
    padding-block: 0.25rem;
}

.fi-logo img {
    max-height: 1.75rem;
    width: auto;
}

/* ==================================================== internal notes =====

   A staff-only message inside a thread the client can otherwise read.

   The row tint is the THIRD signal, never the only one. The badge reads
   "INTERNAL — STAFF ONLY" with a lock icon, and the body carries its own line
   of text above it, because colour alone fails for the ~8% of men with a
   colour vision deficiency and for everybody on a cheap monitor in a bright
   room — which is most of support work.

   The left border does the heavy lifting: it survives greyscale, it survives a
   screenshot, and it is visible at a glance down a long thread.
*/

.fi-ta-row.fi-ss-internal-note {
    background-color: color-mix(in oklch, var(--danger-500) 4%, transparent);
    border-left: 3px solid var(--danger-500);
}

.dark .fi-ta-row.fi-ss-internal-note {
    background-color: color-mix(in oklch, var(--danger-500) 8%, transparent);
}

.fi-ta-row.fi-ss-internal-note:hover {
    background-color: color-mix(in oklch, var(--danger-500) 7%, transparent);
}

/*
 * ---------------------------------------------------------------------------
 * Invoice document editor — Invoices → New (InvoiceForm::document()).
 *
 * The create form laid out as the invoice it produces: the header band, who
 * it is billed to beside the summary, the lines as rows, the totals, the
 * notes, the footer. The same look as the issued PDF and the client portal.
 *
 * Tablet and wider only (768px, Filament's `md`). Below that every rule here
 * is off except hiding the decorative bands, so a phone gets the ordinary
 * stacked form, which is the point: a document layout on a 390px screen is a
 * worse form, not a better one.
 */

.invoice-doc__header,
.invoice-doc__footer {
    display: none;
}

.invoice-doc__heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ss-text);
}

.invoice-doc__muted {
    color: var(--ss-text-muted);
}

@media (min-width: 768px) {
    .invoice-doc {
        background: var(--ss-surface);
        border: 1px solid var(--ss-border);
        border-radius: var(--ss-radius);
        overflow: hidden;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    }

    /* Bands run edge to edge; the document has no inner padding of its own. */
    .invoice-doc > .fi-sc {
        gap: 0;
    }

    .invoice-doc__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background: #000;
        padding: 1.75rem 2.5rem;
    }

    .invoice-doc__header img {
        height: 2.25rem;
        width: auto;
    }

    .invoice-doc__title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #fff;
        line-height: 1.2;
    }

    .invoice-doc__title span {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .invoice-doc__title small {
        font-size: 0.75rem;
        color: oklch(0.8 0 0);
    }

    /* Billed to + summary: the tinted band. */
    .invoice-doc__band {
        background: var(--ss-surface-sunken);
        padding: 2rem 2.5rem;
        align-items: start;
    }

    .invoice-doc__client {
        line-height: 1.6;
        font-size: 0.875rem;
    }

    .invoice-doc__summary {
        background: var(--ss-surface);
        border-radius: var(--ss-radius);
        padding: 1.25rem;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    }

    .invoice-doc__strong .fi-fo-placeholder,
    .invoice-doc__strong {
        font-weight: 600;
    }

    /* The lines: each repeater item is a row of the invoice, not a card. */
    .invoice-doc__lines {
        padding: 1.75rem 2.5rem 0.5rem;
    }

    .invoice-doc__lines .fi-fo-repeater-item {
        border: 0;
        border-bottom: 1px solid var(--ss-border-soft);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .invoice-doc__lines .fi-fo-repeater-item-header {
        padding-inline: 0;
        border-bottom: 0;
    }

    .invoice-doc__lines .fi-fo-repeater-item-content {
        padding: 0.25rem 0 1.25rem;
        border-top: 0;
    }

    /* Field labels read as the invoice's column headings. */
    .invoice-doc__lines .fi-fo-field-label-content,
    .invoice-doc__band .fi-fo-field-label-content,
    .invoice-doc__lines .fi-in-entry-label,
    .invoice-doc__summary .fi-in-entry-label {
        font-size: var(--ss-label-size);
        letter-spacing: var(--ss-label-tracking);
        text-transform: uppercase;
        font-weight: 600;
        color: var(--ss-text-muted);
    }

    .invoice-doc__amount {
        font-weight: 600;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* Totals sit right, under the lines, as they print. */
    .invoice-doc__totals {
        width: min(22rem, 100%);
        margin-left: auto;
        padding: 0.5rem 2.5rem 1.5rem;
        font-variant-numeric: tabular-nums;
    }

    /* Placeholders render as entries: label left, figure right, as printed. */
    .invoice-doc__totals .fi-in-entry,
    .invoice-doc__summary .fi-in-entry {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .invoice-doc__totals .fi-in-entry-content-ctn {
        justify-content: flex-end;
        text-align: right;
    }

    .invoice-doc__grand {
        border-top: 1px solid var(--ss-border);
        padding-top: 0.5rem;
        font-size: 1.125rem;
        font-weight: 700;
    }

    .invoice-doc__notes {
        border-top: 1px solid var(--ss-border-soft);
        padding: 1.5rem 2.5rem;
    }

    .invoice-doc__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background: var(--ss-surface-sunken);
        padding: 1.25rem 2.5rem;
        font-size: 0.75rem;
        color: var(--ss-text-muted);
    }

    .invoice-doc__footer img {
        height: 1.5rem;
        width: auto;
    }

    .dark .invoice-doc__footer img {
        filter: invert(1);
    }
}

/*
 * ---------------------------------------------------------------------------
 * Invoice view page — the invoice drawn as a document (InvoiceInfolist,
 * filament/invoices/document/show.blade.php). Read-only, so it reflows rather
 * than falling back: tighter padding and a scrolling line table on a phone,
 * the full layout from 768px.
 */

.invoice-sheet {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    overflow: hidden;
    color: var(--ss-text);
    font-size: 0.875rem;
}

.invoice-sheet h2,
.invoice-sheet h3,
.invoice-sheet p,
.invoice-sheet dl,
.invoice-sheet ul {
    margin: 0;
}

.invoice-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #000;
    padding: 1.25rem 1rem;
}

.invoice-sheet__header img {
    height: 1.75rem;
    width: auto;
}

.invoice-sheet__pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: oklch(0.95 0 0);
    color: oklch(0.3 0 0);
}

.invoice-sheet__pill--blue { background: oklch(0.93 0.04 250); color: oklch(0.42 0.14 255); }
.invoice-sheet__pill--green { background: oklch(0.93 0.05 155); color: oklch(0.42 0.11 155); }
.invoice-sheet__pill--amber { background: oklch(0.94 0.06 85); color: oklch(0.45 0.1 70); }
.invoice-sheet__pill--red { background: oklch(0.93 0.04 20); color: oklch(0.48 0.17 25); }

.invoice-sheet__band {
    background: var(--ss-surface-sunken);
    padding: 1.5rem 1rem;
    display: grid;
    gap: 1.5rem;
}

.invoice-sheet__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}

.invoice-sheet__title h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.invoice-sheet__title p,
.invoice-sheet__number p {
    color: var(--ss-text-muted);
    margin-top: 0.25rem;
}

.invoice-sheet__number strong {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.invoice-sheet__parties {
    display: grid;
    gap: 1.25rem;
}

.invoice-sheet h3 {
    font-size: 1rem;
    font-weight: 600;
}

.invoice-sheet__label {
    margin-top: 0.75rem !important;
    font-size: var(--ss-label-size);
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ss-text-muted);
}

.invoice-sheet__client {
    margin-top: 0.35rem;
    line-height: 1.6;
}

.invoice-sheet__client-name {
    font-weight: 600;
}

.invoice-sheet__summary,
.invoice-sheet__totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem 1.5rem;
    font-variant-numeric: tabular-nums;
}

.invoice-sheet__summary {
    background: var(--ss-surface);
    border-radius: var(--ss-radius);
    padding: 1.1rem 1.25rem;
    align-self: start;
}

.invoice-sheet__summary dt,
.invoice-sheet__muted {
    color: var(--ss-text-muted);
}

.invoice-sheet__summary dd,
.invoice-sheet__totals dd {
    text-align: right;
}

.invoice-sheet__strong {
    font-weight: 600;
    color: var(--ss-text) !important;
}

.invoice-sheet__body {
    padding: 1.5rem 1rem;
}

.invoice-sheet__table-wrap {
    overflow-x: auto;
}

.invoice-sheet__table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
}

.invoice-sheet__table th {
    text-align: left;
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--ss-border);
    font-size: var(--ss-label-size);
    letter-spacing: var(--ss-label-tracking);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ss-text-muted);
}

.invoice-sheet__table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--ss-border-soft);
    vertical-align: top;
}

.invoice-sheet__num {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.invoice-sheet__desc {
    font-weight: 500;
}

.invoice-sheet .invoice-sheet__totals {
    /* Outranks `.invoice-sheet dl { margin: 0 }`, which reset the auto margin
       and left the totals stranded on the left. */
    margin: 1.25rem 0 0 auto;
    max-width: 22rem;
    padding: 0 0.75rem;
}

.invoice-sheet__grand {
    border-top: 1px solid var(--ss-border);
    padding-top: 0.6rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.invoice-sheet__note {
    margin-top: 1rem !important;
    font-size: 0.75rem;
    color: var(--ss-text-muted);
}

.invoice-sheet__section {
    border-top: 1px solid var(--ss-border-soft);
    padding: 1.25rem 1rem;
}

.invoice-sheet__prewrap {
    white-space: pre-line;
    margin-top: 0.35rem !important;
}

.invoice-sheet__list {
    list-style: none;
    padding: 0;
    margin-top: 0.5rem !important;
}

.invoice-sheet__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ss-border-soft);
    font-variant-numeric: tabular-nums;
}

.invoice-sheet__list li:last-child {
    border-bottom: 0;
}

.invoice-sheet__list em {
    font-style: normal;
    color: var(--ss-text-muted);
    margin-left: 0.5rem;
}

.invoice-sheet__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--ss-surface-sunken);
    padding: 1rem;
    font-size: 0.75rem;
    color: var(--ss-text-muted);
}

.invoice-sheet__footer img {
    height: 1.4rem;
    width: auto;
}

.dark .invoice-sheet__footer img {
    filter: invert(1);
}

@media (min-width: 768px) {
    .invoice-sheet__header { padding: 1.75rem 2.5rem; }
    .invoice-sheet__header img { height: 2.25rem; }
    .invoice-sheet__band { padding: 2rem 2.5rem; }
    .invoice-sheet__parties { grid-template-columns: 1fr minmax(16rem, 20rem); }
    .invoice-sheet__body { padding: 2rem 2.5rem; }
    .invoice-sheet__section { padding: 1.5rem 2.5rem; }
    .invoice-sheet__footer { padding: 1.25rem 2.5rem; }
    .invoice-sheet__title h2 { font-size: 2rem; }
}