:root {
    color-scheme: light;
    --ground: #f4f7f5;
    --panel: #fff;
    --panel-soft: #f8faf8;
    --line: #dce5df;
    --ink: #17251e;
    --muted: #68776f;
    --accent: #18794e;
    --accent-dark: #12613e;
    --danger: #a33232;
    --shadow: 0 12px 35px rgb(28 57 41 / 6%);
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--ink);
    font: 15px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgb(24 121 78 / 28%); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -10000px; top: auto; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--panel); padding: .6rem; }

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 76px;
    padding: .8rem clamp(1rem, 4vw, 3rem);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 32px; width: auto; }
.brand-icon { display: none !important; }
.auth-logo { display: block; width: min(240px, 70%); height: auto; margin: 4vh auto 0; }
.auth-logo + .auth-card { margin-top: 1.5rem; }
.main-navigation { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .2rem; }
.main-navigation a, .main-navigation summary { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .65rem; color: var(--muted); border-radius: 8px; text-decoration: none; }
.main-navigation a:hover, .main-navigation summary:hover { color: var(--ink); background: var(--panel-soft); }
.main-navigation a[aria-current="page"], .main-navigation .is-active > summary { color: var(--accent-dark); background: #e8f3ed; font-weight: 650; }
.main-navigation .navigation-group { position: relative; min-width: 0; }
.main-navigation summary { cursor: pointer; list-style: none; }
.main-navigation summary::-webkit-details-marker { display: none; }
.main-navigation summary::after { content: ''; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.1rem) rotate(45deg); }
.main-navigation details[open] > summary::after { transform: translateY(.1rem) rotate(225deg); }
.main-navigation .navigation-links { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 30; width: min(21rem, calc(100vw - 2rem)); max-height: min(70vh, 36rem); overflow-y: auto; overscroll-behavior: contain; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 35px rgb(28 57 41 / 16%); }
.main-navigation .navigation-links a { overflow-wrap: anywhere; }
.main-navigation .navigation-links a:not([aria-current="page"]) { color: var(--ink); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: 0 0 auto; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logout-form { margin: 0; }

main { width: min(1180px, 100%); margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.25rem; margin-bottom: 1.75rem; }
.page-heading > :first-child { flex: 1 1 18rem; min-width: 0; }
.page-heading > .actions { flex: 0 1 auto; justify-content: flex-end; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.9rem, 4vw, 2.65rem); line-height: 1.13; letter-spacing: -.045em; }
h2 { margin-bottom: 1rem; font-size: 1.15rem; letter-spacing: -.015em; }
.eyebrow { margin: 0 0 .35rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lede { margin: 0; color: var(--muted); font-size: 1rem; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    margin: 0;
    padding: .55rem .95rem;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }
.button:focus-visible { outline: 3px solid rgb(24 121 78 / 28%); outline-offset: 2px; }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.button-quiet { border-color: var(--line); background: var(--panel); color: var(--ink); }
.button-quiet:hover { border-color: #c5d3ca; background: var(--panel-soft); color: var(--ink); }

.panel, .stat-card, .auth-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.panel { min-width: 0; margin-bottom: 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.panel-narrow { max-width: 760px; margin-right: auto; margin-left: auto; }
.content-grid { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.5fr); align-items: start; gap: 1.25rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card { display: grid; gap: .4rem; padding: 1.2rem 1.35rem; }
a.stat-card { color: inherit; text-decoration: none; }
a.stat-card:hover, a.stat-card:focus-visible { border-color: var(--accent, #2f5d50); }
.stat-card small { color: var(--muted); font-size: .85rem; }
.stat-card span { color: var(--muted); font-size: .9rem; }
.stat-card strong { font-size: 1.9rem; line-height: 1.15; letter-spacing: -.04em; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.section-heading h2 { margin-bottom: 0; }
.count { display: grid; min-width: 2rem; min-height: 2rem; place-items: center; border-radius: 50%; background: var(--panel-soft); color: var(--muted); font-size: .85rem; }
.empty-state { padding: 1.1rem 0; color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.dashboard-grid .panel { margin-bottom: 0; }
.dashboard-grid .dashboard-chart:last-child { grid-column: 1 / -1; }
.dashboard-highlight { background: linear-gradient(145deg, #f7fbf9 0%, #fff 100%); }
.highlight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .4rem 0 0; }
.highlight-list div { padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.highlight-list dt { margin: 0 0 .2rem; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.highlight-list dd { margin: 0; font-size: 1.3rem; font-weight: 760; letter-spacing: -.03em; }
.dashboard-chart { min-height: 0; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg-compact { max-width: 760px; margin-top: .35rem; }
.chart-axis { stroke: #cdd8d1; stroke-width: 1; }
.chart-bar { fill: #2d8a5c; }
.chart-bar-alt { fill: #5a9c7a; }
.chart-track { fill: #edf2ee; }
.chart-label { fill: #68776f; font-size: 14px; font-weight: 650; }
.chart-label-left { font-size: 13px; }
.chart-value { fill: #17251e; font-size: 14px; font-weight: 700; }

.dashboard { --muted: #526575; color: #1c3042; }
.dashboard-heading { align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #294b61; border-radius: 18px; background: linear-gradient(120deg, #172f43, #244e62); color: #fff; box-shadow: 0 12px 30px rgb(23 47 67 / 10%); }
.dashboard-heading .eyebrow { color: #99e2ca; }
.dashboard-heading .lede { max-width: 34rem; color: #d7e5ed; }
.dashboard-heading h1 { margin-bottom: .6rem; }
.dashboard-heading .button { border-color: #a7e4ce; background: #a7e4ce; color: #143e30; }
.dashboard-heading .button:hover { border-color: #c3efdf; background: #c3efdf; }
.dashboard-heading .button:focus-visible { outline-color: #fff; }
.dashboard .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dashboard .dashboard-stat { --stat-color: #285d9b; --stat-soft: #edf4fd; align-content: start; gap: .65rem; min-width: 0; padding: 1.1rem; border-top: 3px solid var(--stat-color); }
.dashboard .dashboard-stat-amber { --stat-color: #925915; --stat-soft: #fff5e4; }
.dashboard .dashboard-stat-green { --stat-color: #18794e; --stat-soft: #eaf7ef; }
.dashboard .dashboard-stat-red { --stat-color: #b03942; --stat-soft: #fff0f0; }
.dashboard-stat-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-stat-heading > span:first-child { color: #344b5e; font-size: .9rem; font-weight: 700; }
.dashboard-stat .dashboard-stat-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--stat-soft); color: var(--stat-color); }
.dashboard .dashboard-stat strong { color: var(--stat-color); font-size: clamp(1.8rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard .dashboard-stat small { font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.dashboard a.dashboard-stat:hover { border-color: var(--stat-color); background: var(--stat-soft); }
.dashboard .dashboard-grid { grid-template-areas: "summary turnover" "comparison turnover"; gap: 1.25rem; align-items: stretch; }
.dashboard .dashboard-highlight { grid-area: summary; background: #fff; }
.dashboard .dashboard-turnover { grid-area: turnover; }
.dashboard .dashboard-comparison { grid-area: comparison; }
.dashboard .dashboard-grid .dashboard-chart:last-child { grid-column: auto; }
.dashboard h2 { color: #1c3042; font-size: 1.15rem; }
.dashboard .section-heading { align-items: flex-start; flex-wrap: wrap; }
.dashboard-note { margin: .5rem 0 1.1rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.dashboard-footnote { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.dashboard .highlight-list { gap: .75rem; }
.dashboard .highlight-list div { min-width: 0; padding: .85rem; background: #f5f8fb; border-color: #e0e8ef; }
.dashboard .highlight-list .dashboard-metric-turnover { background: #eef8f2; border-color: #d5ebde; }
.dashboard .highlight-list .dashboard-metric-expenses { background: #eef4fd; border-color: #d9e6f7; }
.dashboard .highlight-list dt { font-size: .72rem; letter-spacing: .025em; }
.dashboard .highlight-list dd { font-size: clamp(1.1rem, 2vw, 1.5rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-metric-turnover dd { color: #166641; }
.dashboard-metric-expenses dd { color: #285d9b; }
.dashboard-bars { display: grid; gap: 1.2rem; margin: 1.4rem 0 0; }
.dashboard-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem; }
.dashboard-bar-row dt { align-self: start; color: #526575; font-size: .85rem; font-weight: 600; }
.dashboard-bar-row dd { display: contents; margin: 0; }
.dashboard-bar-row strong { color: #1c3042; text-align: right; font-size: .95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-bar-track { display: block; grid-column: 1 / -1; width: 100%; height: .65rem; overflow: hidden; border-radius: 5px; background: #edf2f6; }
.dashboard-bar-fill { fill: #27805b; }
.dashboard-bar-negative { fill: #b94b53; }
.dashboard-bar-zero { stroke: #7f929f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dashboard-comparison-bars { gap: 1rem; }
.dashboard-comparison-bars .dashboard-bar-row:last-child .dashboard-bar-fill { fill: #3974b7; }
.dashboard-comparison-bars .dashboard-bar-row .dashboard-bar-negative { fill: #b94b53; }
.dashboard-recent { border-top: 3px solid #3974b7; }
.dashboard-recent .section-heading > a { padding: .35rem 0; font-size: .85rem; font-weight: 700; }
.dashboard-recent .dashboard-note { margin-bottom: .6rem; }
.dashboard-recent th { background: #f1f5f9; color: #41596d; }
.dashboard-recent tbody tr:hover { background: #f8fafc; }
.dashboard-recent td:first-child a { font-weight: 700; }
.dashboard-empty { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1rem; text-align: center; }
.dashboard-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .25rem; border-radius: 12px; color: #285d9b; background: #edf4fd; }
.dashboard-empty h3 { margin: 0; color: #1c3042; font-size: 1rem; }
.dashboard-empty p { margin: 0 0 .5rem; }

.form-stack { display: grid; gap: .55rem; }
.totp-qr-code { display: block; width: 256px; max-width: 100%; height: auto; margin: 1rem auto; background: #fff; }
.totp-setup-steps { padding-left: 1.5rem; }
.totp-setup-steps li + li { margin-top: .5rem; }
label, legend { font-weight: 650; }
input, select, textarea {
    width: 100%;
    min-height: 43px;
    padding: .55rem .7rem;
    border: 1px solid #cbd8d0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid rgb(24 121 78 / 13%); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.form-row > div { display: grid; gap: .55rem; }
.form-stack .hint { margin: -.2rem 0 .35rem; }
.hint, .muted { color: var(--muted); font-size: .87rem; }
.form-stack .subheading { margin: 1rem 0 0; font-size: 1.05rem; }
.form-stack input:disabled { background: #f1f3f2; color: var(--muted); cursor: not-allowed; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; gap: 1.5rem; }
.settings-form { min-width: 0; gap: 1.25rem; }
.settings-section { display: grid; min-inline-size: 0; gap: .65rem; width: 100%; margin: 0; scroll-margin-top: 1.5rem; }
.settings-section legend { padding: 0 .4rem; color: var(--ink); font-size: 1.1rem; }
.settings-section .hint { margin: 0 0 .35rem; line-height: 1.6; }
.settings-sidebar { min-width: 0; }
.settings-sidebar h2 { font-size: 1.05rem; line-height: 1.4; }
.settings-navigation { display: grid; gap: .25rem; }
.settings-navigation a { padding: .55rem .65rem; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .9rem; }
.settings-navigation a:hover, .settings-navigation a:focus-visible { background: var(--panel-soft); color: var(--accent-dark); }
.settings-utility p { line-height: 1.65; }
.settings-utility .button { width: 100%; white-space: normal; }
.settings-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.settings-logo .logo-preview { margin: 0; }
.settings-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; background: var(--panel-soft); }
.settings-save p { flex: 1 1 200px; margin: 0; color: var(--muted); font-size: .9rem; }
.subscription-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.subscription-payment-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.subscription-sections { display: grid; min-width: 0; gap: 1.25rem; }
.subscription-layout .panel { margin: 0; }
.subscription-layout h2 { font-size: 1.2rem; }
.subscription-layout h3 { font-size: 1rem; }
.subscription-layout p { line-height: 1.65; }
.subscription-summary { background: linear-gradient(145deg, #f7fbf9 0%, #fff 100%); }
.subscription-summary .detail-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.subscription-layout .button { white-space: normal; }
.subscription-layout aside .button { width: 100%; }
.subscription-payment-methods { display: grid; gap: 1.5rem; }
.subscription-payment-methods .form-stack { align-content: start; }
.subscription-payment-methods textarea { resize: vertical; }
.subscription-history td:first-child { overflow-wrap: anywhere; }
@media (min-width: 1200px) {
    .subscription-payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .subscription-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .settings-sidebar .panel { margin: 0; }
    .settings-navigation { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .settings-sidebar { grid-template-columns: minmax(0, 1fr); }
    .settings-save .button { width: 100%; }
}
.alert { padding: .8rem 1rem; border: 1px solid #f0c7c7; border-radius: 9px; background: #fff4f4; color: var(--danger); }
.alert-success { border-color: #b9dfd4; background: #eef8f4; color: #17664e; }
.notice { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #cfe3d7; border-radius: 9px; background: #f1f8f4; color: var(--accent-dark); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .78rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td strong { font-weight: 700; }
.numeric { text-align: right; white-space: nowrap; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: max-content; vertical-align: middle; }
.row-actions .inline-form { display: inline-flex; margin: 0; }
.icon-action { display: inline-grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; }
.icon-action .icon { width: 1.15rem; height: 1.15rem; }
.icon-action:hover { border-color: #d5e7dc; background: #edf6f0; color: var(--accent-dark); }
.icon-action:focus-visible { outline: 3px solid rgb(24 121 78 / 28%); outline-offset: 2px; }
.icon-action-danger:hover { border-color: #f0d1ce; background: #fff1f0; color: var(--danger); }
.icon-action-muted { color: #87938c; }
.customer-actions-heading { width: 1%; text-align: right; }
.customer-actions-cell { vertical-align: middle; text-align: right; }
.customer-actions { display: grid; justify-items: end; gap: .4rem; min-width: 96px; }
.customer-actions .icon-action { width: 44px; height: 44px; border-color: var(--line); background: var(--panel-soft); color: var(--accent-dark); }
.customer-actions .icon-action:hover { border-color: #b6d4c2; background: #edf6f0; }
.customer-actions .icon-action-danger { color: var(--danger); background: var(--panel); }
.customer-actions .icon-action-danger:hover { border-color: #f0d1ce; background: #fff1f0; }
.customer-invoice-count { display: inline-block; max-width: 100%; padding: .15rem .5rem; border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.action-note { align-self: center; }
.reminder-view-link { display: inline-flex; align-items: center; gap: .35rem; }
th.sortable a { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
th.sortable a:hover, th.sortable a:focus-visible { color: var(--ink); }
th.sortable[aria-sort="ascending"], th.sortable[aria-sort="descending"] { color: var(--accent-dark); }
.sort-indicator { font-size: .7rem; opacity: .45; }
th.sortable[aria-sort="ascending"] .sort-indicator, th.sortable[aria-sort="descending"] .sort-indicator { opacity: 1; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; }
.pagination-summary { margin: 0; color: var(--muted); font-size: .88rem; }
.pagination-size { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pagination-size select { width: auto; }
.pagination ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: inline-grid; min-width: 2.3rem; min-height: 2.3rem; padding: 0 .65rem; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: .9rem; }
.pagination a:hover { border-color: var(--accent); color: var(--accent-dark); }
.pagination .current { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.pagination .disabled { color: var(--muted); opacity: .55; }
.pagination .gap { border-color: transparent; background: transparent; color: var(--muted); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.filter-field { display: grid; flex: 1 1 9.5rem; gap: .3rem; min-width: 0; }
.filter-field label { font-size: .82rem; }
.filter-field input, .filter-field select { min-width: 0; }
.filter-actions .button { white-space: nowrap; }
.filter-search { flex: 2 1 14rem; }
.filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.status { display: inline-flex; padding: .2rem .6rem; border-radius: 999px; background: #edf1ee; color: #4d5e54; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.status-paid { background: #e6f5ec; color: #17643c; }
.status-open { background: #fff2d9; color: #855819; }
.status-accepted { background: #e3f0fb; color: #1f5583; }
.status-declined { background: #fbe7e6; color: #9a2f27; }
.status-expired { background: #efeeea; color: #5f5d57; }
.status-converted { background: #e6f5ec; color: #17643c; }
.status-overdue { background: #fbe7e6; color: #9a2f27; }
.status-credited { background: #efeeea; color: #5f5d57; }
.status-settled { background: #e6f5ec; color: #17643c; }
.status-unsent { background: #fbe7e6; color: #9a2f27; }

.auth-card { width: min(460px, 100%); margin: 5vh auto; padding: clamp(1.4rem, 5vw, 2.3rem); }
.auth-card h1 { font-size: 2rem; }
.auth-card .lede { margin-bottom: 1.4rem; }
.login-card, .registration-card { width: min(480px, 100%); margin: 2vh auto; }
.login-logo, .registration-logo { display: block; width: 160px; max-width: 65%; height: auto; margin: 0 auto 1.75rem; }
.login-header, .registration-header { margin-bottom: 1.75rem; }
.login-header .lede, .registration-header .lede { margin: .6rem 0 0; }
.login-card h1, .registration-card h1 { font-size: clamp(1.65rem, 5vw, 2rem); }
.login-form, .registration-form { gap: 1.25rem; }
.login-field, .registration-field { display: grid; gap: .55rem; min-width: 0; }
.login-field input, .registration-field input { min-height: 48px; font-size: 1rem; }
.login-field input[aria-invalid="true"], .registration-field input[aria-invalid="true"] { border-color: var(--danger); }
.login-recovery { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; margin-top: -.25rem; font-size: .87rem; }
.login-card .button, .registration-card .button { width: 100%; min-height: 48px; white-space: normal; }
.login-footer, .registration-footer { display: grid; gap: .8rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.login-footer .hint, .registration-footer .hint, .registration-field .hint { margin: 0; }
.registration-note { display: flex; align-items: flex-start; gap: .7rem; margin: 1.25rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); color: var(--muted); font-size: .85rem; }
.registration-note .icon { margin-top: .2rem; color: var(--accent); }
.login-demo-details { padding: .85rem; border-radius: 9px; background: var(--panel-soft); overflow-wrap: anywhere; }
.verification-card { width: min(520px, 100%); }
.verification-header .lede { margin: .8rem 0 0; }
.verification-card h1 { font-size: clamp(1.5rem, 5vw, 2rem); overflow-wrap: anywhere; }
.verification-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.25rem; border: 1px solid #d5e7dc; border-radius: 16px; background: #edf6f0; color: var(--accent-dark); }
.verification-expiry { margin: 1.25rem 0 1.5rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); color: var(--muted); font-size: .87rem; }
.verification-field { display: grid; gap: .65rem; min-width: 0; }
.verification-field input { min-height: 52px; font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .06em; }
.verification-example { white-space: nowrap; }
.verification-form .hint { margin: 0; line-height: 1.6; }
.verification-field .alert { margin: 0; }
.verification-actions { display: grid; gap: .75rem; margin-top: 1.25rem; }
.verification-actions .button { width: 100%; min-height: 48px; white-space: normal; }
.error-card { text-align: center; }
.error-code { margin: 0 0 .4rem; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.error-card .button + .button { margin-left: .5rem; }

.line-items { display: grid; gap: .75rem; margin: .6rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.line-items legend { padding: 0 .35rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invoice-entry { max-width: 900px; }
.entry-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.entry-recipient { display: grid; gap: .5rem; flex: 1 1 55%; }
.entry-recipient > label { color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.entry-address { display: grid; gap: .1rem; min-height: 4.5rem; }
.entry-sender { flex: 0 1 38%; padding: 1rem 1.1rem; border-radius: 10px; background: var(--panel-soft); font-size: .85rem; text-align: left; }
.entry-sender p { margin: .2rem 0 .6rem; }
.entry-sender dl, .entry-meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.entry-sender dt { color: var(--muted); }
.entry-sender dd, .entry-meta dd { margin: 0; overflow-wrap: anywhere; }
.entry-title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.entry-meta { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; max-width: 620px; gap: .7rem 1rem; margin-bottom: 2rem; }
.entry-meta dt, .entry-meta dt label { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
.entry-meta dd input, .entry-meta dd select { width: 100%; }
.entry-meta .hint { margin: .35rem 0 0; }
.entry-lines { margin-bottom: .75rem; border-top: 2px solid var(--accent); }
.entry-lines th { color: var(--accent); }
.entry-lines td { vertical-align: middle; }
.entry-lines td input { width: 100%; text-align: right; }
.entry-lines td select { width: 100%; }
@media (min-width: 701px) {
    .entry-lines { table-layout: fixed; }
    .entry-lines th:nth-child(2), .entry-lines th:nth-child(3), .entry-lines th:nth-child(5) { width: 7.5rem; }
    .entry-lines th:nth-child(4) { width: 5.5rem; }
}
.button-danger { border-color: var(--danger); background: var(--panel); color: var(--danger); }
.button-danger:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.button-danger:focus-visible { outline-color: rgb(163 50 50 / 28%); }
.inline-form { display: inline; margin: 0; }
.link-button { padding: 0; border: 0; background: none; color: var(--danger); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.entry-notes { display: grid; gap: .4rem; margin-top: 1.5rem; }
.invoice-entry > .hint { margin: 1.5rem 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.invoice-entry > .form-actions { margin-bottom: 0; }
.invoice-notes { margin-top: 1.5rem; white-space: pre-line; }
.invoice-notes h3 { margin: 0 0 .3rem; font-size: 1rem; }
.entry-totals { width: min(380px, 100%); margin: 1.5rem 0 1rem auto; }
.entry-total-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.entry-vat-breakdown { margin: .25rem 0; font-size: .85rem; background: var(--panel-soft); }
.entry-vat-breakdown th, .entry-vat-breakdown td { padding: .35rem .5rem; border-bottom: 0; }
.entry-grand-total { border-top: 2px solid var(--ink); border-bottom: 0; font-size: 1.15rem; }

.document-editor { max-width: none; margin: 0; }
.document-editor .editor-section { border-color: #dce5eb; }
.editor-section-heading { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.5rem; }
.editor-section-heading > div { min-width: 0; }
.editor-section-heading h2 { margin: .1rem 0 .3rem; color: #203d50; font-size: 1.1rem; }
.editor-section-heading p { margin: 0; color: #526575; font-size: .85rem; }
.editor-section-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 10px; color: #285d9b; background: #edf4fd; }
.document-editor .entry-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; margin: 0; padding: 0; border: 0; }
.document-editor .entry-recipient { align-content: start; min-width: 0; }
.document-editor .entry-recipient > label { color: #344b5e; font-size: .9rem; text-transform: none; letter-spacing: normal; }
.document-editor .entry-address { min-height: 0; padding: .4rem 0; color: #526575; font-size: .9rem; overflow-wrap: anywhere; }
.document-editor .entry-sender { min-width: 0; padding: 1rem 1.25rem; border: 1px solid #e0e8ef; background: #f5f8fb; color: #344b5e; }
.document-editor .entry-sender .editor-sender-label { margin: 0 0 .5rem; color: #526575; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.document-editor .entry-sender strong { color: #203d50; overflow-wrap: anywhere; }
.document-editor .entry-sender dl { grid-template-columns: max-content minmax(0, 1fr); }
.document-editor .entry-meta { max-width: none; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem 1.5rem; margin: 0; }
.document-editor .entry-meta dd { min-width: 0; }
.document-editor .entry-meta dd input, .document-editor .entry-meta dd select, .document-editor .entry-meta .date-field { max-width: 36rem; }
.editor-number { padding: .6rem .8rem; border: 1px dashed #cddbe5; border-radius: 8px; background: #f5f8fb; color: #526575; font-size: .85rem; }
.document-editor .entry-lines { margin: 0; border-top: 0; }
.document-editor .entry-lines th { padding: .8rem .6rem; background: #f1f5f9; color: #41596d; }
.document-editor .entry-lines td { padding: .85rem .6rem; }
.document-editor .entry-lines tbody tr:last-child td { border-bottom: 0; }
.editor-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.editor-line-actions .hint { margin: 0; }
.editor-summary-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.editor-summary-grid > .panel { margin-bottom: 0; }
.document-editor .entry-notes { margin-top: 0; }
.document-editor .entry-notes label { color: #344b5e; font-size: .85rem; }
.document-editor .entry-notes textarea { min-height: 9rem; }
.document-editor .editor-summary { border-top: 3px solid #18794e; background: #f8fcfa; }
.editor-summary > h2 { color: #203d50; }
.document-editor .entry-totals { width: 100%; margin: 0; font-variant-numeric: tabular-nums; }
.document-editor .entry-total-row { flex-wrap: wrap; }
.document-editor .entry-total-row strong { overflow-wrap: anywhere; }
.document-editor .entry-grand-total { align-items: center; margin-top: .6rem; padding: 1rem; border: 0; border-radius: 9px; background: #e5f3eb; color: #145f3e; }
.document-editor .editor-footer { margin-bottom: 0; border-top: 3px solid #285d9b; }
.editor-footer > .hint { margin: 0 0 1.25rem; color: #526575; line-height: 1.7; }
.editor-footer > .form-actions { margin-bottom: 0; }
@media (min-width: 701px) {
    .document-editor .entry-lines th:nth-child(2) { width: 6rem; }
    .document-editor .entry-lines th:nth-child(3), .document-editor .entry-lines th:nth-child(5) { width: 8rem; }
    .document-editor .entry-lines th:nth-child(4) { width: 5rem; }
}
@media (max-width: 700px) {
    .document-editor .entry-top, .editor-summary-grid { grid-template-columns: 1fr; }
    .document-editor .entry-top { gap: 1rem; }
    .document-editor .entry-meta { grid-template-columns: 1fr; gap: .4rem; }
    .document-editor .entry-meta dt:not(:first-child) { margin-top: .6rem; }
    .document-editor .entry-meta dd { margin: 0; }
    .document-editor .entry-lines.stack-on-mobile td { padding: .6rem 0; }
}

.invoice-paper { max-width: 900px; margin: 0 auto; padding: clamp(1.2rem, 5vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.invoice-header { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.invoice-header h2 { margin: .4rem 0; font-size: 1.3rem; }
.invoice-logo { display: block; max-width: 220px; max-height: 100px; width: auto; height: auto; margin-bottom: 1.5rem; }
.logo-preview { display: block; max-width: 240px; max-height: 120px; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; }
.invoice-header p { margin-bottom: .35rem; color: var(--muted); }
.invoice-meta { display: grid; align-content: start; gap: .4rem; text-align: right; color: var(--muted); }
.invoice-meta strong { color: var(--ink); font-size: 1.25rem; }
.invoice-customer { display: grid; gap: .15rem; margin: 2rem 0; }
.invoice-customer .eyebrow { margin-bottom: .4rem; }
.invoice-table th { white-space: nowrap; }
.invoice-totals { width: min(340px, 100%); margin: 1.2rem 0 0 auto; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.invoice-totals .grand-total { padding-top: .8rem; border-bottom: 0; font-size: 1.2rem; }
.payment-detail { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.invoice-payment { margin-top: 2rem; }
.actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.actions > form, .form-actions > form { display: flex; margin: 0; }
.site-footer { padding: 1.5rem 1rem 2rem; color: var(--muted); text-align: center; font-size: .84rem; }

.expense-form { max-width: 960px; }
.expense-form .panel > label, .expense-form .panel > input, .expense-form .panel > textarea { margin-top: .5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.form-grid > div { display: grid; align-content: start; gap: .4rem; }
.form-grid .hint { margin: 0; }
.form-grid-wide { grid-column: 1 / -1; }
.choice-group { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 1.1rem; padding: 0; border: 0; }
.choice-group legend { width: 100%; margin-bottom: .45rem; padding: 0; }
.choice { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer; }
.choice input { width: auto; min-height: 0; accent-color: var(--accent); }
.expense-form [data-mode-panel] .hint { margin-top: 0; }
@media (min-width: 701px) {
    .expense-entry-table th:nth-child(n) { width: auto; }
    .expense-entry-table th:first-child { width: 40%; }
}
.form-actions { margin-bottom: 1.25rem; }
.form-stack .form-actions { margin: .6rem 0 0; }
.credit-entry-table input { max-width: 8.5rem; margin-left: auto; text-align: right; }
.credit-entry-table td { vertical-align: middle; }
.credit-summary h3 { margin: 0 0 .5rem; }
.credit-summary ul { margin: 0; padding-left: 1.1rem; }
.credit-summary li { margin-bottom: .35rem; }
.credit-summary .status { margin-left: .35rem; }
.button-small { min-height: 0; padding: .4rem .75rem; font-size: .85rem; white-space: nowrap; }
.reminder-letter-meta { display: grid; gap: .25rem; margin: 0 0 2rem; }
.reminder-letter h2.reminder-title { margin: 0 0 1.2rem; font-size: 1.4rem; }
.reminder-letter p { line-height: 1.6; }
.reminder-letter .invoice-totals { margin-bottom: 1.5rem; }
.reminder-signature { margin-top: 2rem; }
.summary-strip { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--panel-soft); }
.summary-strip div { display: grid; gap: .1rem; }
.summary-strip dt { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.summary-strip dd { margin: 0; font-weight: 700; }
.attachment-badge { display: inline-flex; margin-left: .4rem; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; vertical-align: middle; }
.attachment-preview { display: block; max-width: 100%; max-height: 520px; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.attachment-name { overflow-wrap: anywhere; color: var(--muted); font-size: .9rem; }
.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0 0 1.5rem; }
.detail-list dt { color: var(--muted); font-weight: 600; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.preserve-lines { white-space: pre-line; }
.stack { display: grid; align-content: start; min-width: 0; }
.expense-detail { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .85fr); }
.vat-report-table td:first-child { width: 5rem; font-weight: 700; }
.vat-report-result { margin: 1rem 0 0; font-size: 1.15rem; text-align: right; }
.hint-list { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.hint-list li + li { margin-top: .45rem; }
.report-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin-bottom: 1.25rem; }
.report-period > div { display: grid; gap: .3rem; }
.report-period select { width: auto; min-width: 8rem; }

.install-button { margin-left: .75rem; min-height: 34px; padding: .25rem .7rem; font-size: .84rem; }

@media (min-width: 851px) and (max-width: 1099px) {
    .main-navigation { order: 3; flex-basis: 100%; }
}

@media (max-width: 850px) {
    .masthead { align-items: center; padding-right: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right)); padding-left: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left)); }
    .main-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        width: auto;
        margin: 0;
        padding: .25rem max(.25rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(.25rem, env(safe-area-inset-left));
        border-top: 1px solid var(--line);
        background: var(--panel);
        box-shadow: 0 -6px 20px rgb(28 57 41 / 8%);
    }
    .main-navigation > a, .main-navigation summary { flex-direction: column; justify-content: center; gap: .15rem; min-width: 0; min-height: 52px; padding: .35rem .1rem; font-size: .62rem; line-height: 1.15; text-align: center; letter-spacing: -.01em; }
    .main-navigation > a .icon, .main-navigation summary .icon { width: 1.45rem; height: 1.45rem; }
    .main-navigation summary::after { position: absolute; top: .3rem; right: .35rem; transform: rotate(225deg); }
    .main-navigation details[open] > summary::after { transform: rotate(45deg); }
    .main-navigation .navigation-links { position: fixed; top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); width: auto; max-height: calc(100vh - 88px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); max-height: calc(100dvh - 88px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); }
    .icon-action { width: 2.75rem; height: 2.75rem; }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .masthead { min-height: 60px; }
    .content-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    input, select, textarea { font-size: 16px; }
    .button { min-height: 44px; }
    .link-button { min-height: 44px; padding: 0 .4rem; }
}

@media screen and (max-width: 700px) {
    .stack-on-mobile, .stack-on-mobile tbody, .stack-on-mobile tr, .stack-on-mobile td { display: block; width: 100%; }
    .stack-on-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .stack-on-mobile tbody tr { margin-bottom: .8rem; padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
    .stack-on-mobile tbody tr:last-child { margin-bottom: 0; }
    .stack-on-mobile td { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .stack-on-mobile td:last-child { border-bottom: 0; }
    .stack-on-mobile td:empty { display: none; }
    .stack-on-mobile td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .1rem; color: var(--muted); font-size: .74rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
    .stack-on-mobile td.numeric { white-space: normal; }
    .entry-lines.stack-on-mobile { border-top: 0; }
    /* Sortable headers stay usable on mobile as a row of sort buttons. */
    .stack-on-mobile thead:has(th.sortable) { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: .8rem; }
    .stack-on-mobile thead:has(th.sortable) tr { display: flex; flex-wrap: wrap; gap: .4rem; }
    .stack-on-mobile thead th { display: none; }
    .stack-on-mobile thead th.sortable { display: block; padding: 0; border: 0; text-align: left; }
    .stack-on-mobile th.sortable a { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
    .stack-on-mobile th.sortable[aria-sort="ascending"] a, .stack-on-mobile th.sortable[aria-sort="descending"] a { border-color: var(--accent); background: #e8f3ed; }
    .pagination { justify-content: center; }
    .filter-bar { gap: .55rem; padding: .7rem; }
    .filter-field { flex-basis: calc(50% - .3rem); }
    .filter-search, .filter-date, .filter-actions { flex-basis: 100%; }
    .filter-actions .button { flex: 1; }
    .pagination-summary { width: 100%; text-align: center; }
    .pagination li:not(:first-child):not(:last-child):not(:has(.current)) { display: none; }
    .entry-lines td:first-child::before { display: none; }
    .entry-lines td:first-child { display: block; }
    .entry-lines td input { width: 100%; text-align: left; }
    .invoice-paper .table-wrap { overflow: visible; }
}

@media (max-width: 560px) {
    .brand-full { display: none !important; }
    .brand-icon { display: block !important; }
    main { padding-top: 1.5rem; padding-right: max(1rem, env(safe-area-inset-right)); padding-left: max(1rem, env(safe-area-inset-left)); }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading > :first-child { flex-basis: auto; }
    .button { white-space: normal; }
    .stats-grid { grid-template-columns: 1fr; gap: .6rem; }
    .stat-card { padding: .9rem 1rem; }
    .stat-card strong { font-size: 1.5rem; }
    .chart-label, .chart-label-left, .chart-value { font-size: clamp(20px, 5vw, 24px); }
    .highlight-list { grid-template-columns: 1fr; }
    .dashboard .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .dashboard .dashboard-stat { padding: .85rem; }
    .dashboard-stat-heading { flex-wrap: wrap-reverse; }
    .dashboard-stat-heading > span:first-child { flex-basis: 100%; }
    .dashboard .dashboard-grid { grid-template-areas: "summary" "turnover" "comparison"; }
    .dashboard .highlight-list { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-list { grid-template-columns: 1fr; gap: .1rem; }
    .detail-list dd { margin-bottom: .5rem; }
    .invoice-header { flex-direction: column; gap: 1rem; }
    .invoice-meta { text-align: left; }
    .invoice-paper { padding: 1rem; }
    .entry-top { flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; }
    .entry-sender { flex-basis: auto; }
    .entry-meta { grid-template-columns: 1fr; gap: .15rem; }
    .entry-meta dt, .entry-meta dt label { margin-top: .4rem; }
    .entry-meta dd { margin-bottom: .6rem; }
    .entry-title { font-size: 1.6rem; }
    .actions, .form-actions { flex-direction: column; align-items: stretch; }
    .actions .button, .actions > form, .form-actions .button, .form-actions > form { width: 100%; }
    .auth-card { margin-top: 1rem; }
    .site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
    .install-button { display: flex; margin: .8rem auto 0; }
}

@media (min-width: 561px) and (max-width: 900px) {
    .dashboard .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard .dashboard-grid { grid-template-columns: 1fr; grid-template-areas: "summary" "turnover" "comparison"; }
}

@media (display-mode: standalone) {
    .masthead { padding-top: max(.8rem, env(safe-area-inset-top)); }
}

@media print {
    body { background: #fff; color: #111; font-size: 12px; }
    .masthead, .site-footer, .no-print, .install-button { display: none !important; }
    main { width: 100%; max-width: none; padding: 0; }
    .invoice-paper { max-width: none; padding: 0; border: 0; box-shadow: none; }
    a { color: inherit; text-decoration: none; }
    th, td { border-color: #bbb; }
}

/* Confirmation modal */
.confirm-dialog {
    width: min(26rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 60px rgb(16 32 24 / 28%);
}
.confirm-dialog[open] { animation: confirm-dialog-in .16s ease-out; }
.confirm-dialog::backdrop { background: rgb(16 28 22 / 45%); backdrop-filter: blur(2px); }
.confirm-dialog-body { display: grid; justify-items: center; gap: .6rem; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.confirm-dialog-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #e5f2eb;
    color: var(--accent);
}
.confirm-dialog.is-danger .confirm-dialog-icon { background: #f8e6e6; color: var(--danger); }
.confirm-dialog-title { margin: .25rem 0 0; font-size: 1.15rem; }
.confirm-dialog-message { margin: 0; color: var(--muted); line-height: 1.5; }
.confirm-dialog-actions { display: flex; justify-content: center; gap: .6rem; width: 100%; margin-top: .9rem; }
.confirm-dialog-actions .button { flex: 1; }
.confirm-dialog.is-danger .confirm-dialog-confirm { border-color: var(--danger); background: var(--danger); color: #fff; }
.confirm-dialog.is-danger .confirm-dialog-confirm:hover { border-color: #8a2828; background: #8a2828; }
@keyframes confirm-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .confirm-dialog[open] { animation: none; }
}
@media print {
    .confirm-dialog { display: none; }
}

/* Date field: always dd-mm-jjjj, with a calendar button */
.date-field { position: relative; display: block; width: 100%; }
.date-field > input[type="text"] { padding-right: 2.6rem; }
.date-field-button {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}
.date-field-button:hover, .date-field-button:focus-visible { background: var(--panel-soft); color: var(--accent); }
.date-field-button:disabled { cursor: default; opacity: .5; }
/* Kept rendered (not display:none) so showPicker() can open the calendar beneath the field. */
.date-field-picker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Honeypot field: hidden from people, filled in by spam bots. */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }