/* Rules: docs/design.md. Colors mirror Components/Layout/AppTheme.cs (MudBlazor palette). */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("fonts/AtkinsonHyperlegibleNext.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("fonts/AtkinsonHyperlegibleNext-Italic.ttf") format("truetype");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens (light) ---------- */
:root {
    --rk-primary: #1f5f8b;
    --rk-primary-strong: #174a6d;
    --rk-on-primary: #fcfdfd;
    --rk-text: #1b1f23;
    --rk-text-muted: #4d5761;
    --rk-border: #d5dbe1;
    --rk-input-border: #8a96a3;
    --rk-background: #f3f5f7;
    --rk-surface: #fcfdfd;
    --rk-input-bg: #fcfdfd;
    --rk-input-disabled: #e9edf0;
    --rk-error: #b00020;
    --rk-error-bg: #fbe9ec;
    --rk-success: #1b6e33;
    --rk-success-bg: #e6f2ea;
    --rk-info-bg: #e6eef5;
    --rk-focus: rgba(31, 95, 139, 0.35);
    --rk-focus-ring: #1f5f8b;
    --rk-radius-input: 4px;
    --rk-radius-panel: 8px;
    --rk-radius-dialog: 12px;
    --rk-font: "Atkinson Hyperlegible Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Tokens (dark, the default) ---------- */
[data-theme="dark"] {
    --rk-primary: #7db3dc;
    --rk-primary-strong: #a3c9e6;
    --rk-on-primary: #0f1a22;
    --rk-text: #e3e7ea;
    --rk-text-muted: #a8b1b9;
    --rk-border: #2f363d;
    --rk-input-border: #6b7682;
    --rk-background: #14181b;
    --rk-surface: #1c2126;
    --rk-input-bg: #171b1f;
    --rk-input-disabled: #252b31;
    --rk-error: #f08c8c;
    --rk-error-bg: #3a2023;
    --rk-success: #7cc89a;
    --rk-success-bg: #1d3226;
    --rk-info-bg: #1f2b36;
    --rk-focus: rgba(125, 179, 220, 0.45);
    --rk-focus-ring: #7db3dc;
    color-scheme: dark;
}

/* 17px base: readable without zooming. MudBlazor sizes are rem based and scale along. */
html {
    font-size: 106.25%;
}

body {
    margin: 0;
    font-family: var(--rk-font);
    color: var(--rk-text);
    background: var(--rk-background);
    line-height: 1.5;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: var(--rk-error-bg);
    color: var(--rk-error);
    padding: 1rem;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten.";
    }

/* ---------- App shell (MudBlazor) ---------- */

.rk-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rk-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    margin-left: 0.5rem;
}

.rk-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Panels: border, no shadow. Floating things (dialogs, menus) keep their shadow. */
.mud-paper-outlined,
.mud-table-outlined,
.mud-tabs.mud-paper-outlined {
    border-radius: var(--rk-radius-panel);
}

.mud-dialog {
    border-radius: var(--rk-radius-dialog);
}

/* Upper-case tab labels are harder to read. */
.mud-tab {
    text-transform: none;
    font-size: 1rem;
}

.rk-settings-tabs .mud-tabs-tabbar {
    min-width: 13rem;
}

.rk-settings-tabs .mud-tab {
    justify-content: flex-start;
}

.rk-tab-content {
    width: 100%;
}

.rk-page-title {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 1.5rem;
}

.rk-panel {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-panel);
    padding: 1.5rem;
}

/* ---------- Account pages (static server-rendered, plain HTML forms) ---------- */

.rk-account {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.rk-account-header {
    background: var(--rk-surface);
    border-bottom: 1px solid var(--rk-border);
    padding: 0.9rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

    .rk-account-header a {
        color: var(--rk-text);
        text-decoration: none;
    }

.rk-account-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 22rem);
    gap: 4rem;
    padding: 3rem 1.5rem;
    max-width: 60rem;
}

.rk-account-aside {
    color: var(--rk-text-muted);
    border-left: 1px solid var(--rk-border);
    padding-left: 2rem;
    align-self: start;
}

    .rk-account-aside h2 {
        color: var(--rk-text);
        font-size: 1.1rem;
        margin: 0 0 0.75rem;
    }

    .rk-account-aside ul {
        margin: 0;
        padding-left: 1.2rem;
    }

    .rk-account-aside li {
        margin-bottom: 0.5rem;
    }

/* The form is the page; no box around it. */
.rk-card {
    width: 100%;
}

.rk-card h1 {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.rk-card h2,
.rk-panel h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.rk-lead {
    color: var(--rk-text-muted);
    margin: 0 0 1.5rem;
}

.rk-field {
    margin-bottom: 1.25rem;
}

.rk-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.rk-help {
    color: var(--rk-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.rk-input {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--rk-input-border);
    border-radius: var(--rk-radius-input);
    background: var(--rk-input-bg);
    color: var(--rk-text);
}

    .rk-input:focus {
        outline: 3px solid var(--rk-focus);
        border-color: var(--rk-primary);
    }

    .rk-input:disabled {
        background: var(--rk-input-disabled);
    }

    .rk-input.invalid {
        border-color: var(--rk-error);
    }

.rk-error, .validation-message {
    color: var(--rk-error);
    margin-top: 0.3rem;
    font-size: 0.95rem;
}

.rk-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

    .rk-checkbox input {
        width: 1.25rem;
        height: 1.25rem;
        accent-color: var(--rk-primary);
    }

.rk-btn {
    display: inline-block;
    box-sizing: border-box;
    font: inherit;
    font-weight: 600;
    padding: 0.7rem 1.3rem;
    border-radius: var(--rk-radius-input);
    border: 1px solid var(--rk-input-border);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: transparent;
    color: var(--rk-text);
}

    .rk-btn:hover {
        border-color: var(--rk-text);
    }

.rk-btn-primary {
    background: var(--rk-primary);
    border-color: var(--rk-primary);
    color: var(--rk-on-primary);
}

    .rk-btn-primary:hover {
        background: var(--rk-primary-strong);
        border-color: var(--rk-primary-strong);
    }

.rk-btn-danger {
    background: var(--rk-error);
    border-color: var(--rk-error);
    color: var(--rk-surface);
}

.rk-btn-block {
    width: 100%;
}

.rk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.rk-links {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rk-border);
}

    .rk-links p {
        margin: 0.4rem 0;
    }

.rk-card a:not(.rk-btn),
.rk-panel a:not(.rk-btn),
.rk-account-aside a {
    color: var(--rk-primary);
}

.rk-alert {
    border-radius: var(--rk-radius-input);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.rk-alert-success {
    background: var(--rk-success-bg);
    color: var(--rk-success);
}

.rk-alert-error {
    background: var(--rk-error-bg);
    color: var(--rk-error);
}

.rk-alert-info {
    background: var(--rk-info-bg);
    color: var(--rk-text);
}

.rk-alert p:first-child {
    margin-top: 0;
}

.rk-alert p:last-child {
    margin-bottom: 0;
}

.rk-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    background: var(--rk-input-disabled);
    padding: 0.15rem 0.4rem;
    border-radius: var(--rk-radius-input);
}

.rk-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

/* QR codes need dark modules on a light background to scan reliably, in every theme. */
.rk-qr {
    display: inline-block;
    background: #fcfdfd;
    padding: 0.5rem;
    border-radius: var(--rk-radius-input);
}

    .rk-qr svg {
        width: 12rem;
        height: 12rem;
        display: block;
    }

.rk-manage {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    align-items: start;
}

.rk-manage-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rk-manage-nav a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: var(--rk-radius-input);
    color: var(--rk-text);
    text-decoration: none;
}

    .rk-manage-nav a.active {
        background: var(--rk-info-bg);
        color: var(--rk-primary);
        font-weight: 600;
    }

.rk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 800px) {
    .rk-account-main,
    .rk-manage {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .rk-account-main {
        padding: 1.5rem 1rem;
    }

    .rk-account-aside {
        border-left: none;
        border-top: 1px solid var(--rk-border);
        padding: 1.5rem 0 0;
    }
}

/* ---------- Setup assistant and settings ---------- */

.rk-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.rk-swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.rk-swatch-selected {
    /* Ring with a gap, visible on any swatch color and in both themes. */
    box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 0 6px var(--mud-palette-text-primary);
}

/* The preview stands for a printed sheet, so it stays white in every theme. */
.rk-letter-preview {
    background: #fcfdfd;
    color: #1b1f23;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rk-radius-input);
    padding: 1.5rem;
    aspect-ratio: 1 / 1.1;
    max-width: 26rem;
}

.rk-letter-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.rk-letter-name {
    font-weight: 600;
}

.rk-letter-address {
    font-size: 0.8rem;
    color: #4d5761;
}

.rk-letter-logo {
    max-width: 8rem;
    max-height: 4rem;
    object-fit: contain;
}

.rk-letter-rule {
    height: 3px;
    margin: 1.25rem 0 1rem;
}

.rk-letter-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.rk-letter-lines span {
    display: block;
    height: 0.5rem;
    background: #e3e7eb;
    border-radius: 2px;
    margin-bottom: 0.6rem;
}

    .rk-letter-lines span:nth-child(2) {
        width: 80%;
    }

    .rk-letter-lines span:nth-child(3) {
        width: 60%;
    }

.rk-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.rk-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.rk-step-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-weight: 600;
    font-size: 0.9rem;
}

.rk-step-current {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

    .rk-step-current .rk-step-number {
        background: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

.rk-step-done {
    color: var(--mud-palette-text-primary);
}

.rk-row-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

    .rk-row-link:hover,
    .rk-row-link:focus-visible {
        text-decoration: underline;
    }

/* ---------- Invoice editor ---------- */

.rk-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
}

.rk-editor-side {
    position: sticky;
    top: calc(var(--mud-appbar-height) + 1rem);
}

.rk-editor-side-inner {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rk-radius-panel);
    padding: 1.25rem;
}

.rk-section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .rk-section:last-child {
        border-bottom: none;
    }

.rk-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.rk-subsection-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.5rem 0 0.75rem;
}

.rk-address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.rk-muted {
    color: var(--mud-palette-text-secondary);
}

.rk-save-state {
    color: var(--mud-palette-text-secondary);
}

.rk-lines {
    display: flex;
    flex-direction: column;
}

/* Lines adapt to the width of the editor column (not the window), which depends on the totals column beside it. */
.rk-editor-main {
    container-type: inline-size;
    min-width: 0;
}

/* Wide: one row per line. */
.rk-line {
    display: grid;
    grid-template-columns: 2rem minmax(10rem, 1fr) 6rem 7.5rem 8.5rem 5.5rem 8rem 7rem auto;
    grid-template-areas: "num main qty unit price vat discount amount actions";
    gap: 0.6rem;
    align-items: start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .rk-line:first-child {
        border-top: none;
    }

.rk-line-number { grid-area: num; }
.rk-line-main { grid-area: main; }
.rk-line-qty { grid-area: qty; }
.rk-line-unit { grid-area: unit; }
.rk-line-price { grid-area: price; }
.rk-line-vat { grid-area: vat; }
.rk-line-discount { grid-area: discount; }
.rk-line-amount { grid-area: amount; }
.rk-line-actions { grid-area: actions; }

/* Medium: text on top, numbers in two rows of three. */
@container (max-width: 1050px) {
    .rk-line {
        grid-template-columns: 2rem repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "num main main main"
            "num qty unit price"
            "num vat discount amount"
            "num . . actions";
    }

    .rk-line-actions {
        justify-content: flex-end;
    }
}

/* Narrow (phones): everything stacked in two columns. */
@container (max-width: 520px) {
    .rk-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "num num"
            "main main"
            "qty unit"
            "price vat"
            "discount amount"
            "actions actions";
    }
}

.rk-line-number {
    font-weight: 600;
    padding-top: 0.6rem;
    color: var(--mud-palette-text-secondary);
}

.rk-line-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0.6rem;
}

.rk-line-total {
    font-weight: 600;
}

.rk-line-discount-note {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.rk-line-actions {
    display: flex;
    padding-top: 0.2rem;
}

.rk-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}

.rk-totals-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
}

.rk-totals-grand {
    font-weight: 700;
    font-size: 1.15rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.4rem;
    padding-top: 0.6rem;
}

.rk-totals-note {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
}

.rk-missing {
    margin-top: 1.25rem;
    font-size: 0.95rem;
}

.rk-missing-title {
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.rk-plain-list {
    margin: 0;
    padding-left: 1.1rem;
}

    .rk-plain-list li {
        margin-bottom: 0.25rem;
    }

@media (max-width: 1100px) {
    .rk-editor {
        grid-template-columns: 1fr;
    }

    .rk-editor-side {
        position: static;
    }
}


.rk-technical {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

    .rk-technical summary {
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
    }

    .rk-technical code {
        font-size: 0.85rem;
        word-break: break-word;
    }

.rk-fix-link {
    color: var(--mud-palette-primary);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rk-section {
    scroll-margin-top: calc(var(--mud-appbar-height) + 1rem);
}

/* Read-only invoice view */
.rk-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1.5rem;
    margin: 1rem 0 0;
}

.rk-facts dt {
    color: var(--rk-text-muted);
}

.rk-facts dd {
    margin: 0;
}

.rk-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Links in running text are underlined, not only colored (WCAG 1.4.1); MudBlazor removes the underline. */
.mud-main-content :is(p, li, span, dd, .rk-alert) > a:not(.rk-row-link):not(.mud-button-root) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Visible keyboard focus on everything clickable (WCAG 2.4.7); solid, so it reaches 3:1 against the background.
   Text fields show focus through their own border. */
:is(a, button, [role="button"], [role="tab"], [role="radio"], [role="checkbox"], summary, .mud-button-root):focus-visible {
    outline: 3px solid var(--rk-focus-ring);
    outline-offset: 2px;
}

/* Overview figures: bordered flat panels, one figure each. */
.rk-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.rk-figure {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: var(--mud-palette-surface);
}

.rk-figure p {
    margin: 0;
}

.rk-figure-label {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.rk-figure-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rk-figure-warning {
    color: var(--mud-palette-error);
}