/* VAT calculator (/vat-calculator): what is its own. Panels, tiles, fields, buttons, the table and the colours come from
   the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* The calculation and the invoice sit in the middle of the stage, at a readable width. */
.vat-landing-app > .filter-landing-stage.ak-stage {
    justify-content: center;
}

.vat-landing-app .vc-quick,
.vat-landing-app .vc-sheet,
.vat-landing-app .ak-stage > .ak-message {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
}

/* The amount to work out: large, as the question of the page. */
.vat-landing-app .vc-amount-wrap {
    max-width: 18rem;
}

.vat-landing-app input.ak-field.vc-amount:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    padding: 0.45rem 0.7rem;
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    caret-color: var(--ak-accent);
}

/* The figure that answers the question (the total when amounts exclude VAT, the net amount when they include it) is
   the main tile, in the green the money apps use for the result. The VAT amount is in the orange they use for tax (the
   finance accent is a green too, and would read as a second result). */
.vat-landing-app .vc-result .ak-stat--main {
    --ak-stat-color: var(--ak-series-3);
}

.vat-landing-app .vc-stat-vat .ak-stat-value {
    color: var(--ak-series-2);
}

.vat-landing-app .vc-formula {
    align-self: flex-start;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-radius: var(--ak-radius-sm);
    background: color-mix(in srgb, var(--ak-accent) 8%, transparent);
    color: var(--ak-muted);
    font-family: var(--ak-font-mono);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.vat-landing-app .vc-formula:empty {
    display: none;
}

/* Invoice */
.vat-landing-app .vc-sheet-title {
    font-size: var(--ak-fs-lg);
}

.vat-landing-app .vc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}

/* The lines: the description takes the room the numbers leave. */
.vat-landing-app .vc-table-wrap {
    max-height: none;
}

.vat-landing-app .vc-table th.vc-col-desc {
    width: 100%;
}

.vat-landing-app .vc-table td {
    padding: 0.25rem 0.35rem;
}

.vat-landing-app .vc-desc {
    min-width: 9rem;
}

.vat-landing-app .vc-small {
    min-width: 4rem;
    max-width: 4rem;
}

.vat-landing-app .vc-price {
    min-width: 6.5rem;
    max-width: 6.5rem;
}

.vat-landing-app .vc-line-rate {
    min-width: 5rem;
}

.vat-landing-app .vc-line-amount {
    font-weight: 600;
}

.vat-landing-app .vc-table tbody tr:focus-within {
    background: color-mix(in srgb, var(--ak-accent) 6%, transparent);
}

.vat-landing-app .vc-remove {
    color: var(--ak-muted);
}

.vat-landing-app .vc-remove:hover {
    border-color: var(--ak-danger);
    color: var(--ak-danger);
}

.vat-landing-app .vc-add {
    align-self: flex-start;
}

/* The totals under the lines, on the right as on an invoice. */
.vat-landing-app .vc-totals {
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 0.3rem 1.5rem;
    font-size: var(--ak-fs-md);
}

.vat-landing-app .vc-totals .vc-grand {
    padding-top: 0.3rem;
    border-top: 2px solid var(--ak-series-3);
    color: var(--ak-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.vat-landing-app .vc-totals dd.vc-grand {
    color: var(--ak-series-3);
}

.vat-landing-app .vc-note {
    font-style: italic;
}

@container (max-width: 640px) {
    .vat-landing-app .vc-amount-wrap {
        max-width: none;
    }

    /* Net and VAT side by side, the total across the full width below them. */
    .vat-landing-app .vc-result.ak-stats > .ak-stat.vc-stat-net:first-child {
        grid-column: auto;
    }

    .vat-landing-app .vc-result.ak-stats > .ak-stat.vc-stat-total {
        grid-column: 1 / -1;
    }

    /* Invoice lines as two-row cards instead of a table that runs off the screen:
       description and remove on top, quantity, price, rate and amount below. */
    .vat-landing-app .vc-table-wrap {
        border: 0;
        background: none;
    }

    .vat-landing-app .vc-table,
    .vat-landing-app .vc-table thead,
    .vat-landing-app .vc-table tbody {
        display: block;
    }

    .vat-landing-app .vc-table tr {
        display: grid;
        grid-template-columns: 3.4rem minmax(0, 1fr) 4.9rem minmax(4.6rem, auto);
        grid-template-areas: "desc desc desc rm" "qty price rate amt";
        gap: 0.35rem;
        align-items: center;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--ak-border);
    }

    .vat-landing-app .vc-table th,
    .vat-landing-app .vc-table td {
        position: static;
        padding: 0;
        border: 0;
        background: none;
        white-space: normal;
    }

    .vat-landing-app .vc-table thead tr {
        padding-top: 0;
    }

    .vat-landing-app .vc-table tr > :nth-child(1) { grid-area: desc; }
    .vat-landing-app .vc-table tr > :nth-child(2) { grid-area: qty; }
    .vat-landing-app .vc-table tr > :nth-child(3) { grid-area: price; }
    .vat-landing-app .vc-table tr > :nth-child(4) { grid-area: rate; }
    .vat-landing-app .vc-table tr > :nth-child(5) { grid-area: amt; white-space: nowrap; }
    .vat-landing-app .vc-table tr > :nth-child(6) { grid-area: rm; justify-self: end; }

    .vat-landing-app .vc-desc,
    .vat-landing-app .vc-small,
    .vat-landing-app .vc-price,
    .vat-landing-app .vc-line-rate {
        min-width: 0;
        max-width: none;
    }
}

/* Print: only the calculation or the invoice, black on white, without the buttons. */
@media print {
    body.vc-printing * {
        visibility: hidden !important;
    }

    body.vc-printing .vat-landing-app .vc-printable:not([hidden]),
    body.vc-printing .vat-landing-app .vc-printable:not([hidden]) * {
        visibility: visible !important;
    }

    body.vc-printing .vat-landing-app .vc-printable:not([hidden]) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        border: 0;
        background: #ffffff;
        color: #000000;
    }

    body.vc-printing .vat-landing-app .vc-noprint {
        display: none !important;
    }

    body.vc-printing .vat-landing-app .vc-printable .ak-field,
    body.vc-printing .vat-landing-app .vc-printable .ak-table-wrap {
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #000000;
        appearance: none;
        padding: 0;
    }
}