/* Styles of the generator, account and Pro pages. No inline styles anywhere (the CSP has no 'unsafe-inline'). */

:root {
    --text: #1d2125;
    --muted: #5c6670;
    --border: #dde2e7;
    --border-strong: #c3cbd3;
    --background: #f4f6f8;
    --surface: #ffffff;
    --accent: #1f5f99;
    --accent-hover: #174a78;
    --accent-soft: #e8f0f8;
    --accent-text: #ffffff;
    --error: #b3261e;
    --error-background: #fdf0ef;
    --warning: #8a4b00;
    --warning-border: #e0a100;
    --warning-background: #fff8e1;
    --success: #1e6b34;
    --success-background: #edf7ef;
    --radius: 8px;
    --content-width: 1200px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--background);
}

a {
    color: var(--accent);
}

h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.25;
}

h2 {
    margin: 0 0 12px;
    font-size: 17px;
}

/* Public pages: thin header over the full width, content and footer centered */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 12px max(16px, calc((100% - var(--content-width)) / 2));
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* Promo banner of an ad campaign (R3:M6), above the header of the public pages. */
.promo-banner {
    margin: 0;
    padding: 8px 16px;
    color: var(--accent-text);
    background: var(--accent);
    font-weight: 600;
    text-align: center;
}

/* Consent bar of the campaign cookie (R3:M6): both buttons look the same (§ 25 TDDDG, no nudging). */
.consent-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding: 12px max(16px, calc((100% - var(--content-width)) / 2));
    border-bottom: 1px solid var(--border);
    background: var(--accent-soft);
}

.consent-bar p {
    flex: 1 1 320px;
    margin: 0;
}

.consent-buttons {
    display: flex;
    gap: 8px;
}

.consent-button {
    min-width: 96px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    background: var(--surface);
    cursor: pointer;
}

.site-name {
    margin: 0;
    font-weight: 600;
}

.site-name a {
    color: var(--accent);
    text-decoration: none;
}

.page-nav {
    display: flex;
    gap: 16px;
    align-items: center;
}

.page-nav a {
    text-decoration: none;
}

.page-nav-register {
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

/* DE | EN: the current language is plain text colored, the other one a link */
.language-switcher {
    display: flex;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.language-switcher a[aria-current] {
    color: inherit;
    font-weight: 600;
}

main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 24px 16px 0;
}

.page-footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 32px 16px;
    color: var(--muted);
    font-size: 14px;
}

.page-footer p {
    margin: 0 0 4px;
}

/* The legal pages on the website (R3:M6) */
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.page-intro {
    margin-bottom: 24px;
}

.page-intro p {
    max-width: 760px;
    margin: 0 0 12px;
    color: var(--muted);
}

/* Nothing is stored, so the user must not overlook that archiving is their task */
.notice {
    padding: 12px 16px;
    border-left: 4px solid var(--accent);
    color: var(--text);
    background: var(--accent-soft);
}

.page-intro .notice {
    color: var(--text);
}

/* Problems of an invalid invoice: a summary above the form and each text at its field */
.problems {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--error);
    border-radius: var(--radius);
    color: var(--error);
    background: var(--error-background);
}

.problems p,
.problems ul {
    margin: 0;
}

.problems ul {
    margin-top: 8px;
    padding-left: 20px;
}

/* Sections as cards; the legend is floated, so it sits inside the card like a heading */
fieldset {
    min-width: 0;
    margin: 0 0 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

legend {
    float: left;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
}

legend + * {
    clear: both;
}

/* Numbered sections instead of tabs: everything stays visible, so no problem is ever on a hidden part of the form */
.form-sections {
    counter-reset: section;
}

.form-sections > .seller-collapsible .section-title::before,
.form-sections > .buyer-collapsible .section-title::before,
.form-sections > .note-collapsible .section-title::before,
.form-sections > .payment-section > .payment-collapsible .section-title::before,
.form-sections > .payment-section > fieldset > legend::before,
.form-sections > fieldset > legend::before {
    counter-increment: section;
    content: counter(section);
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    border-radius: 50%;
    color: var(--accent-text);
    background: var(--accent);
    font-size: 14px;
    line-height: 26px;
    text-align: center;
}

/* Pro: the seller as a card that collapses to a summary of the stored company data, and the optional note, collapsed
   until the user adds one. The summary is the heading, so the legend of the fieldset inside is only read by screen
   readers. The selected customer is shown the same way. */
.seller-collapsible,
.buyer-collapsible,
.payment-collapsible,
.note-collapsible {
    margin: 0 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.seller-collapsible > summary,
.buyer-collapsible > summary,
.payment-collapsible > summary,
.note-collapsible > summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    list-style: none;
    cursor: pointer;
}

.seller-collapsible > summary::-webkit-details-marker,
.buyer-collapsible > summary::-webkit-details-marker,
.payment-collapsible > summary::-webkit-details-marker,
.note-collapsible > summary::-webkit-details-marker {
    display: none;
}

.seller-collapsible-head,
.buyer-collapsible-head,
.payment-collapsible-head,
.note-collapsible-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    justify-content: space-between;
}

.seller-collapsible .section-title,
.buyer-collapsible .section-title,
.payment-collapsible .section-title,
.note-collapsible .section-title {
    font-size: 17px;
    font-weight: 600;
}

.seller-collapsible-edit,
.buyer-collapsible-edit,
.payment-collapsible-edit,
.note-collapsible-add {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    color: var(--accent);
    font-size: 14px;
}

.seller-collapsible .chevron,
.buyer-collapsible .chevron,
.payment-collapsible .chevron,
.note-collapsible .chevron {
    transition: transform 0.15s;
}

.seller-collapsible[open] .chevron,
.buyer-collapsible[open] .chevron,
.payment-collapsible[open] .chevron,
.note-collapsible[open] .chevron {
    transform: rotate(180deg);
}

.seller-collapsible-items,
.buyer-collapsible-items,
.payment-collapsible-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: var(--muted);
    font-size: 14px;
}

.seller-collapsible-items > span,
.buyer-collapsible-items > span,
.payment-collapsible-items > span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
}

.seller-collapsible-items svg,
.buyer-collapsible-items svg,
.payment-collapsible-items svg {
    flex: none;
}

.seller-collapsible-source,
.buyer-collapsible-source,
.payment-collapsible-source {
    color: var(--muted);
    font-size: 13px;
}

.seller-collapsible[open] > summary,
.buyer-collapsible[open] > summary,
.payment-collapsible[open] > summary,
.note-collapsible[open] > summary {
    border-bottom: 1px solid var(--border);
}

.seller-collapsible > fieldset,
.buyer-collapsible > fieldset,
.payment-collapsible > fieldset,
.note-collapsible > fieldset {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.seller-collapsible legend,
.buyer-collapsible legend,
.payment-collapsible legend,
.note-collapsible legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Pro: customer search of the invoice form. The results are buttons below the field (no listbox semantics: each one
   fills the buyer at once), closed by customer-search.js on Escape or a click elsewhere. */
.customer-picker .field {
    margin-bottom: 0;
}

.customer-results-list {
    margin: 4px 0 0;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    list-style: none;
    max-height: 360px;
    overflow-y: auto;
}

.customer-results-list .hint {
    margin: 0;
    padding: 6px 10px;
}

.customer-result,
.customer-new {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.customer-result:hover,
.customer-result:focus-visible,
.customer-new:hover,
.customer-new:focus-visible {
    background: var(--accent-soft);
}

.customer-result-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.customer-result-city {
    color: var(--muted);
    font-size: 14px;
}

.customer-new {
    color: var(--accent);
}

.customer-new::before {
    content: "+";
}

.customer-switch {
    margin: 0 0 12px;
}

/* A button that looks like a link: an action on the page (htmx), not a navigation */
.link-button {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.field {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    margin-bottom: 14px;
    min-width: 0;
}

/* Honeypot of the contact form: out of sight for people, bots fill it in */
.contact-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-short {
    flex: 0 1 140px;
}

/* CSS instead of a script: follows the checked type at once and after a re-render; browsers without :has show it */
.invoice-form:has(input[name="type"][value="INVOICE"]:checked) .preceding-invoice {
    display: none;
}

.label {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
}

.optional,
.hint {
    color: var(--muted);
    font-size: 14px;
    font-weight: normal;
}

.hint {
    margin: 4px 0 0;
}

/* The typed number is that of the last invoice: a warning, not a problem (the invoice is still generated). No display
   set, so the hidden attribute still hides it. */
.warning {
    margin: 4px 0 0;
    color: var(--warning);
    font-size: 14px;
    font-weight: 500;
}

p.hint + .field {
    margin-top: 14px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

input,
select,
textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}

input,
select {
    height: 42px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 3px solid var(--accent-soft);
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    height: auto;
    accent-color: var(--accent);
}

.choice {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 8px;
}

button {
    padding: 8px 16px;
    font: inherit;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
}

button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.generate,
.account-form button[type="submit"],
.invoice-form > button[type="submit"],
.invoice-form > fieldset > button[type="submit"] {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent);
    font-weight: 600;
}

.generate:hover,
.account-form button[type="submit"]:hover,
.invoice-form > button[type="submit"]:hover,
.invoice-form > fieldset > button[type="submit"]:hover {
    color: var(--accent-text);
    background: var(--accent-hover);
}

/* Settings: the save button inside the card of the part it saves */
.invoice-form > fieldset > button[type="submit"] {
    margin-top: 4px;
}

/* A second button next to the save button (design preview): a plain button, so saving stays the main action */
.invoice-form > fieldset > button.secondary-button {
    margin-left: 8px;
}

.invoice-form > fieldset > button.secondary-button,
.design-preview > button.secondary-button {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface);
    font-weight: normal;
}

.invoice-form > fieldset > button.secondary-button:hover,
.design-preview > button.secondary-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
}

/* Lines: stacked on narrow sections, one row each when the section is wide enough (container query, because the
   width of the section depends on the sidebar and the summary, not only on the screen) */
#lines {
    container-type: inline-size;
}

.line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
    align-items: end;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.line:first-child {
    padding-top: 0;
}

.line .field {
    margin-bottom: 8px;
}

.line .line-description,
.line-error {
    grid-column: 1 / -1;
}

.line-remove {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 2px 0;
    border: 0;
    color: var(--muted);
    background: none;
    font-size: 14px;
}

.line-remove:hover {
    color: var(--error);
}

@container (min-width: 640px) {
    .line {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.8fr);
    }

    .line .line-description {
        grid-column: auto;
    }

    /* The labels of the first line head the columns; the others keep them for screen readers only */
    .line + .line .label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.line-add {
    margin-top: 12px;
}

.line-add::before {
    content: "+ ";
}

/* Generator: the sections, and the summary beside them while the main column is wide enough; the summary stays in
   view unless the screen is too low for it */
main {
    container-type: inline-size;
}

.generator-form {
    display: grid;
    gap: 0 24px;
}

/* Company profile: one column, as wide as the sections of the generator */
.invoice-form:not(.generator-form) {
    max-width: 880px;
}

@container (min-width: 960px) {
    .generator-form {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}

/* Design page: the form and the sample PDF side by side when there is room, otherwise the preview under the form */
.design-page {
    display: grid;
    gap: 24px;
}

.design-preview iframe {
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    background: #fff;
}

@container (min-width: 960px) {
    .design-page {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        align-items: start;
    }
}

@media (min-height: 700px) {
    @container (min-width: 960px) {
        .design-preview {
            position: sticky;
            top: 16px;
        }

        /* Room for the button and its hint under the frame; the PDF viewer scrolls the page inside */
        .design-preview iframe {
            max-height: calc(100vh - 140px);
        }
    }
}

@media (min-height: 700px) {
    @container (min-width: 960px) {
        .form-summary {
            position: sticky;
            top: 16px;
        }
    }
}

.form-summary {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.form-summary fieldset {
    margin: 16px 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.form-summary legend {
    margin-bottom: 8px;
    font-size: 15px;
}

.form-summary .generate {
    width: 100%;
    padding: 12px 16px;
}

.totals table {
    width: 100%;
    border-collapse: collapse;
}

.totals th,
.totals td {
    padding: 3px 0;
    vertical-align: top;
    font-size: 15px;
}

.totals th {
    color: var(--muted);
    font-weight: normal;
    text-align: left;
}

.totals td {
    padding-left: 12px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.totals .totals-gross th,
.totals .totals-gross td {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
}

.terms,
.upgrade {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.error {
    display: block;
    margin: 4px 0 0;
    color: var(--error);
    font-size: 14px;
}

.field:has(.error) input,
.field:has(.error) select,
.field:has(.error) textarea,
.field.invalid input,
.field.invalid select {
    border-color: var(--error);
}

/* htmx request indicator; htmx's own injected stylesheet is turned off (htmx-config in the page) */
.htmx-indicator {
    opacity: 0;
    visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in;
}

/* Account pages: one narrow card in the middle; in the Pro area at the left of the content */
.account-page {
    max-width: 440px;
    padding-top: 48px;
}

.account-page > p {
    color: var(--muted);
}

.account-form {
    margin: 16px 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.account-form button[type="submit"] {
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px;
}

.app-content .account-page {
    padding-top: 24px;
}

/* Admin area: the list of tenants has more columns than the customers, so it takes the whole width */
.admin-page .customer-actions,
.admin-page .customer-list {
    max-width: none;
}

.admin-statistics h2 {
    margin-top: 32px;
}

/* Admin statistics: the period links and the requests-per-second chart (admin-statistics.js) */
.admin-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.admin-ranges a[aria-current] {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.admin-chart {
    position: relative;
    height: 320px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Admin statistics: heat maps by weekday and time of day, shade 0 (nothing) to 5 (the highest value) */
.heat-map th,
.heat-map td {
    padding: 8px 12px;
}

/* Lines between the columns as well as between the rows; the table's own frame is the border of .customer-list */
.customer-list.heat-map th + th,
.customer-list.heat-map th + td,
.customer-list.heat-map td + td {
    border-left: 1px solid var(--border);
}

/*
 * The number shows only while the pointer is over its cell (the shades alone give the overview); it stays in the
 * page, so screen readers and copying still get it. The text color is set for every shade (dark on the light ones,
 * white on the dark ones, each at least 4.5:1), with .customer-list in the selector, so it wins over the muted color of
 * .customer-list td:not(:first-child).
 */
.customer-list.heat-map thead th + th {
    text-align: center;
}

.customer-list.heat-map tbody td {
    color: transparent;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.customer-list.heat-map tbody td:hover {
    color: var(--text);
}

.customer-list.heat-map tbody td.heat-4:hover,
.customer-list.heat-map tbody td.heat-5:hover {
    color: var(--accent-text);
}

.customer-list.heat-map td.heat-1 {
    background: #e8f0f8;
}

.customer-list.heat-map td.heat-2 {
    background: #c5d9ec;
}

.customer-list.heat-map td.heat-3 {
    background: #8fb4d9;
}

.customer-list.heat-map td.heat-4 {
    background: #3b74ad;
}

.customer-list.heat-map td.heat-5 {
    background: var(--accent);
}

/* Admin campaign page: the total row under the months of a campaign */
.admin-statistics tr.total {
    font-weight: 600;
}

.admin-paging {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
}

.admin-details {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 8px 24px;
    max-width: 880px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.admin-details dt {
    color: var(--muted);
}

.admin-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    max-width: 880px;
    margin-top: 16px;
}

.error-page {
    max-width: 560px;
    margin-top: 48px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.error-page h1 {
    font-size: 24px;
}

/* Pro pages (logged in): header over the full width, sidebar with the main menu left, content right. Small screens:
   the sidebar opens below the header by the menu button (app-menu.js). */
.app-header {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.app-header .site-name {
    flex: 1;
}

.trial-notice {
    margin: 0;
    font-size: 0.875rem;
}

.trial-notice .link-button {
    margin-left: 4px;
}

/* The subscription status on the subscription page, colored by its state: running access green, a trial or a cancelled
   subscription (access ends soon) yellow, expired red */
.subscription-status {
    padding: 12px 16px;
    border-left: 4px solid var(--border-strong);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.subscription-status-active,
.subscription-status-lifetime,
.subscription-status-lifetime_scheduled {
    border-left-color: var(--success);
    background: var(--success-background);
}

.subscription-status-trial,
.subscription-status-cancelled {
    border-left-color: var(--warning-border);
    background: var(--warning-background);
}

.subscription-status-expired {
    border-left-color: var(--error);
    background: var(--error-background);
}

/* The subscription page: status, then the buttons to Stripe side by side */
.subscription-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
}

/* Our own invoices for the subscription: a small table that scrolls on its own on narrow screens */
.subscription-invoices {
    margin-top: 24px;
    overflow-x: auto;
}

.subscription-invoices h2 {
    margin: 0 0 8px;
    font-size: 16px;
}

.subscription-invoices table {
    width: 100%;
    border-collapse: collapse;
}

.subscription-invoices th,
.subscription-invoices td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.subscription-invoices th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.subscription-invoices .amount {
    text-align: right;
}

/* The expired start page: the renewal button and the link to the free generator side by side, wrapping on phones */
.expired-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.menu-toggle,
.user-menu-toggle {
    display: flex;
    padding: 6px;
    border-color: var(--border);
    color: var(--text);
}

.user-menu {
    position: relative;
}

/* The FAQ on the website (R3:M6) */
.help-link {
    font-size: 0.875rem;
    text-decoration: none;
}

.user-menu-items {
    display: none;
    position: absolute;
    right: 0;
    z-index: 10;
    min-width: 200px;
    margin-top: 4px;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.user-menu-items.open {
    display: block;
}

.user-menu-items a,
.user-menu-items button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    color: var(--text);
    background: none;
    text-align: left;
    text-decoration: none;
}

.user-menu-items form {
    margin: 0;
}

.user-menu-items a:hover,
.user-menu-items button:hover {
    color: var(--text);
    background: var(--background);
}

.app-nav {
    display: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.app-nav.open {
    display: block;
}

.app-nav ul {
    margin: 0;
    padding: 12px 8px;
    list-style: none;
}

.app-nav a {
    display: block;
    margin-bottom: 2px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}

.app-nav a:hover {
    background: var(--background);
}

.app-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.app-content {
    min-width: 0;
}

.app-content main,
.app-content .page-footer {
    margin: 0;
}

/* Customers: search and "new customer" in one row, the list as a table that scrolls on its own on narrow screens */
.customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 880px;
    margin: 16px 0;
}

.customer-search {
    display: flex;
    flex: 1 1 320px;
    gap: 12px;
    align-items: flex-end;
    max-width: 560px;
}

.customer-search .field {
    margin-bottom: 0;
}

a.button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent-text);
    background: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

a.button:hover {
    background: var(--accent-hover);
}

/* The list is a card like the form sections; the wrapper scrolls, so the table itself keeps its full width */
.customer-list {
    max-width: 880px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.customer-list table {
    width: 100%;
    border-collapse: collapse;
}

.customer-list th,
.customer-list td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.customer-list th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--muted);
    background: var(--background);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.customer-list tbody tr:last-child td {
    border-bottom: 0;
}

/* The whole row is the link: the link's ::after covers the row, which is its containing block */
.customer-list tbody tr {
    position: relative;
}

.customer-list tbody tr:hover {
    background: var(--accent-soft);
}

.customer-list td a {
    font-weight: 600;
    text-decoration: none;
}

.customer-list td a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.customer-list td a:focus-visible {
    outline: none;
}

.customer-list tbody tr:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.customer-list td:not(:first-child) {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.customer-delete {
    margin-top: 24px;
}

.customer-delete button,
.logo-delete button {
    border-color: var(--error);
    color: var(--error);
}

/* Company page: the logo below the company data */
.logo-section {
    margin-top: 40px;
}

.logo-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.logo-preview {
    max-width: 240px;
    max-height: 120px;
    padding: 8px;
    border: 1px solid var(--border);
    background: #fff;
}

@media (min-width: 768px) {
    body.app {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }

    .app-header {
        grid-column: 1 / -1;
    }

    .menu-toggle {
        display: none;
    }

    .app-nav {
        display: block;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .app-content main,
    .app-content .page-footer {
        padding-left: 24px;
        padding-right: 24px;
    }
}