/* The two @import rules that used to sit here - bootstrap-icons from jsDelivr and Outfit from
 * fonts.googleapis.com - are gone on purpose. Both files are now served from this origin and
 * linked directly in App.razor: css/fonts.css and lib/bootstrap-icons/font/bootstrap-icons.css.
 *
 * An @import is invisible to the browser's preload scanner. It cannot start either request
 * until app.css itself has arrived and been parsed, which turned two parallel downloads into a
 * four-deep serial chain across three origins. Do not reintroduce one here: a stylesheet added
 * this way looks harmless in the diff and costs a full round trip in production.
 */

/* ── Design Tokens ── */
:root {
    /* Legacy tokens (used by existing views — migrate view-by-view) */
    --primary: #3498db;
    --secondary: #2c3e50;
    --light: #252a33;
    --dark: #1a1d24;
    --text: #e1e1e1;
    --text-secondary: #b0b7c3;
    --border: #2f3541;

    /* New design system (from Landing v2 — adopt per view) */
    --tl-bg: #1b1d23;
    --tl-bg-raised: #22242b;
    --tl-bg-hover: #282a32;
    --tl-border: #2e3038;
    --tl-border-light: #383a44;
    --tl-text: #edeae5;
    --tl-text-muted: #85858c;
    --tl-text-dim: #5c5c64;
    --tl-accent: #f5a623;
    --tl-accent-soft: rgba(245, 166, 35, 0.10);
    --tl-accent-border: rgba(245, 166, 35, 0.25);
    --tl-purple: #818cf8;
    --tl-purple-soft: rgba(129, 140, 248, 0.10);
    --tl-green: #34d399;
    --tl-green-soft: rgba(52, 211, 153, 0.10);
    --tl-coral: #f87171;
    --tl-coral-soft: rgba(248, 113, 113, 0.10);
    --tl-radius-sm: 12px;
    --tl-radius-md: 20px;
    --tl-radius-lg: 24px;
    --tl-radius-pill: 100px;
    --tl-font: 'Outfit', sans-serif;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--tl-bg);
    color: #eee;
}

a, .btn-link {
    color: #5aa6e6;
}

/* Custom Button Styles */
.btn,
.timelane-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn::after,
.timelane-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.btn:hover,
.timelane-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn:hover::after,
.timelane-btn:hover::after {
    transform: translateY(0);
}

.btn:active,
.timelane-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Primary Button */
.btn-primary,
.timelane-btn-primary {
    background: linear-gradient(135deg, #3498db, #2c5082);
    color: white;
}

.btn-primary:hover,
.timelane-btn-primary:hover {
    background: linear-gradient(135deg, #3ea1e6, #2c5082);
    color: white;
}

/* Secondary Button */
.btn-secondary,
.timelane-btn-secondary {
    background: linear-gradient(135deg, #444, #333);
    color: #eee;
}

.btn-secondary:hover,
.timelane-btn-secondary:hover {
    background: linear-gradient(135deg, #555, #444);
    color: #eee;
}

/* Info Button */
.btn-info,
.timelane-btn-info {
    background: linear-gradient(135deg, #226644, #184f34);
    color: #eee;
}

.btn-info:hover,
.timelane-btn-info:hover {
    background: linear-gradient(135deg, #2a7a51, #226644);
    color: #eee;
}

/* Danger Button */
.btn-danger,
.timelane-btn-danger {
    background: linear-gradient(135deg, #772222, #661919);
    color: #eee;
}

.btn-danger:hover,
.timelane-btn-danger:hover {
    background: linear-gradient(135deg, #8a2828, #772222);
    color: #eee;
}

/* Outline Buttons */
.btn-outline-primary,
.timelane-btn-outline-primary {
    background-color: transparent;
    color: #3498db;
    border: 2px solid #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.btn-outline-primary:hover,
.timelane-btn-outline-primary:hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3ea1e6;
    color: #3ea1e6;
}

.btn-outline-secondary,
.timelane-btn-outline-secondary {
    background-color: transparent;
    color: #aaa;
    border: 2px solid #aaa;
    box-shadow: 0 2px 8px rgba(170, 170, 170, 0.1);
}

.btn-outline-secondary:hover,
.timelane-btn-outline-secondary:hover {
    background-color: rgba(170, 170, 170, 0.1);
    border-color: #bbb;
    color: #bbb;
}

/* Button Sizes */
.btn-sm,
.timelane-btn-sm {
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
}

.btn-lg,
.timelane-btn-lg {
    padding: 0.875rem 2.5rem;
    font-size: 1.25rem;
}

/* Block Buttons */
.btn-block,
.timelane-btn-block {
    display: flex;
    width: 100%;
}

/* Outline Button */
.timelane-btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.timelane-btn-outline:hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3ea1e6;
    color: #3ea1e6;
}

.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus,
.timelane-btn:focus {
  box-shadow: 0 0 0 0.1rem #333, 0 0 0 0.25rem #3498db;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e55858;
}

.validation-message {
    color: #e55858;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45OTMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: #888;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Dark Mode Styles */
.table {
    color: #ddd !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2a2a !important;
    color: #eee !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #232323 !important;
    color: #eee !important;
}

.table-striped > tbody > tr:hover {
    background-color: #333 !important;
}

.table thead {
    background-color: #2c2c2c !important;
}

.modal-content {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #444 !important;
}

.modal-header {
    border-bottom-color: #444 !important;
}

.modal-footer {
    border-top-color: #444 !important;
}

.form-control, .form-select {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #555 !important;
}

.form-control:focus, .form-select:focus {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #2c5082 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 80, 130, 0.25) !important;
}

.input-group-text {
    background-color: #555 !important;
    color: #eee !important;
    border-color: #666 !important;
}

.alert-info {
    background-color: #1e3a5f !important;
    color: #eee !important;
    border-color: #2c5082 !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.alert {
    background-color: #1e3a5f !important;
    color: #eee !important;
    border-color: #2c5082 !important;
}

/* Adding to the existing dark mode styles */

/* Fix for card text being unreadable */
.card {
    background-color: #2a2a2a !important;
    color: #eee !important;
    border-color: #444 !important;
}

/* Fix time dropdown background */
input[type="time"], 
input[type="date"],
input[type="datetime-local"] {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix for any remaining form elements */
select, 
option {
    background-color: #444 !important;
    color: #eee !important;
}

/* Ensure modal backdrops are dark */
.modal-backdrop {
    background-color: #000 !important;
}

/* Add styles for pagination if used */
.pagination > li > a,
.pagination > li > span {
    background-color: #333 !important;
    border-color: #555 !important;
    color: #eee !important;
}

.pagination > .active > a, 
.pagination > .active > span {
    background-color: #2c5082 !important;
    border-color: #1e3a5f !important;
}

/* Fix table styling - more specific selectors to override Bootstrap */
table.table,
.table,
table {
    background-color: #222 !important;
    color: #ffffff !important; /* Brighter white text */
    border-color: #444 !important;
}

table.table > thead > tr > th,
.table > thead > tr > th,
table > thead > tr > th {
    background-color: #1e1e1e !important;
    color: #ffffff !important; /* Brighter white text */
    border-color: #444 !important;
    border-bottom: 2px solid #444 !important;
    font-weight: 600 !important; /* Make headers slightly bolder */
}

table.table > tbody > tr > td,
.table > tbody > tr > td,
table > tbody > tr > td {
    border-color: #444 !important;
    background-color: transparent !important;
    color: #ffffff !important; /* Brighter white text */
}

/* Fix for table-striped rows */
.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #252525 !important;
    color: #ffffff !important; /* Brighter white text */
}

.table-striped > tbody > tr:nth-of-type(even),
table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #2a2a2a !important;
    color: #ffffff !important; /* Brighter white text */
}

/* Fix time/date inputs with higher specificity */
input[type="time"],
input[type="date"],
input[type="datetime-local"],
.form-control[type="time"],
.form-control[type="date"],
.form-control[type="datetime-local"],
input.form-control[type="time"],
input.form-control[type="date"],
input.form-control[type="datetime-local"] {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix time/date input dropdowns */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Style DateTime picker dropdown */
.calendar-popup,
.time-popup,
.datetime-popup {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix input placeholders */
::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/* Dark mode styling for date/time picker popup elements */

/* Invert calendar icon colors */
::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.8) !important;
    background-color: transparent !important;
}

/* Target Chrome/Edge date input popup styling */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-color: transparent !important;
    color-scheme: dark !important;
}

/* Force dark color scheme for datetime pickers */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    color-scheme: dark !important;
}

/* Ensure dark background for any popup content */
::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-week-field,
::-webkit-inner-spin-button,
::-webkit-calendar-picker-indicator,
::-webkit-clear-button {
    color: #eee !important;
    background-color: transparent !important;
}

/* Custom styles for Firefox date/time pickers */
@-moz-document url-prefix() {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"] {
        background-color: #333 !important;
        color: #eee !important;
    }
}

/* Additional control for date picker styling in all browsers */
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus {
    color: #eee !important;
    background-color: #333 !important;
    border-color: #2c5082 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 80, 130, 0.25) !important;
}

/* For browsers that support it, force dark UI controls */
@supports (color-scheme: dark) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    select {
        color-scheme: dark;
    }
}

/* Dark mode styling for browser autocomplete dropdowns - consolidated rules */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #2c3e50 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Chrome, Safari, Edge autofill background */
input.form-control:-webkit-autofill {
    background-color: #2c3e50 !important;
}

/* Firefox specific autofill styling */
@-moz-document url-prefix() {
    input.form-control:-moz-autofill,
    input.form-control:-moz-autofill-preview {
        background-color: #2c3e50 !important;
        color: #ffffff !important;
    }
}

/* Style for the autocomplete options */
input:-webkit-autofill-selected {
    background-color: #34495e !important;
    color: #ffffff !important;
}

/* Fix for selected text color in inputs */
::selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Ensure text color is white when autocompleted and selected */
input::selection,
input::-moz-selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Fix for Chrome/Safari/Edge selected text in autocompleted fields */
input:-webkit-autofill::selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Additional styling for input text color */
input, select, textarea {
    color: #ffffff !important;
}

/* Disable spell check and text suggestions red underlines */
input, textarea {
    spellcheck: false !important;
    -webkit-spell-check: none !important;
    -ms-spellcheck: false !important;
}

/* Force autocomplete dropdown styling - more aggressive approach */
input:-webkit-autofill option,
datalist option,
input option {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* Additional selector for autofill dropdown items */
option, select option {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* ── Legal pages (Privacy, Impressum, Disclaimer) ── */
.legal-wrap {
    font-family: var(--tl-font);
    background: var(--tl-bg);
    color: var(--tl-text);
    min-height: 100vh;
    padding: 60px 24px 80px;
}

.legal-container {
    max-width: 720px;
    margin: 0 auto;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tl-border);
}

.legal-header h1 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0;
}

.legal-back {
    background: transparent;
    text-decoration: none;
    border: 1px solid var(--tl-border-light);
    color: var(--tl-text-muted);
    padding: 8px 20px;
    border-radius: var(--tl-radius-pill);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--tl-font);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.legal-back:hover {
    color: var(--tl-text);
    border-color: var(--tl-text-muted);
}

.legal-intro {
    font-size: 17px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
}

.legal-body section {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--tl-border);
}

.legal-body section:last-of-type {
    border-bottom: none;
}

.legal-body h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--tl-accent);
    margin-bottom: 16px;
}

.legal-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tl-text);
    margin-top: 20px;
    margin-bottom: 8px;
}

.legal-body p {
    font-size: 15px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-body a {
    color: var(--tl-accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

.legal-body a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.legal-body ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.legal-body ul li {
    font-size: 15px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    padding: 6px 0 6px 28px;
    position: relative;
}

.legal-body ul li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--tl-accent);
    font-weight: 600;
}

.legal-updated {
    font-size: 13px;
    color: var(--tl-text-dim);
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--tl-border);
}

@media (max-width: 640px) {
    .legal-wrap {
        padding: 40px 16px 60px;
    }

    .legal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── Auth pages (Login, Verify) ── */
.auth-wrap {
    font-family: var(--tl-font);
    background: var(--tl-bg);
    color: var(--tl-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Top padding clears the fixed top bar. */
    padding: 80px 24px 32px;
    position: relative;
    overflow: hidden;
}

/* Every public page carries a grid module (see Landing.razor.css). The auth pages had none,
   which is why they read as unfinished rather than quiet: a card floating in flat void. Here
   the module is a fine horizontal rule every 24px — ruled paper, because what these screens
   hand you is a document. Faded to an ellipse so the sheet sits in a pool of light instead of
   tiling to the edges like wallpaper. */
.auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 23.5H24' fill='none' stroke='%23ffffff' stroke-opacity='.025' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 100%);
}

/* Top bar: gives the brand a home and, more importantly, a way back to the site — the login
   page had exactly one link on it, and that was the disclaimer. Mirrors the landing nav. */
.auth-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 clamp(16px, 4vw, 32px);
    border-bottom: 1px solid var(--tl-border);
    background: rgba(27, 29, 35, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 2;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--tl-text);
    text-decoration: none;
}

.auth-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tl-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.auth-brand-mark img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.auth-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--tl-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.auth-topbar-back:hover,
.auth-topbar-back:focus-visible {
    color: var(--tl-text);
}

/* ── Auth as a document ──────────────────────────────────────────────────────
   Timelane's product is a document, so the sign-in sheet is built like one: an accent rule
   across the top, an issuer block on the left, a meta column on the right, and a dashed line
   where a real invoice would start its line items. The point is not decoration — the facts a
   passwordless login has to state (what the procedure is, how long the code lives, that there
   is no password) become the meta column instead of three grey footnotes nobody reads. */
.auth-doc {
    position: relative;
    z-index: 1;
    width: 560px;
    max-width: 100%;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.auth-doc-rule {
    height: 4px;
    background: var(--tl-accent);
}

.auth-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 34px 24px;
    border-bottom: 1px dashed var(--tl-border-light);
}

.auth-doc-issuer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-doc-issuer .auth-doc-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.auth-doc-issuer .auth-doc-line {
    font-size: 12.5px;
    color: var(--tl-text-dim);
    line-height: 1.6;
}

.auth-doc-meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 7px 16px;
    align-self: start;
    margin: 0;
    font-size: 12.5px;
}

.auth-doc-meta dt {
    color: var(--tl-text-dim);
    white-space: nowrap;
}

.auth-doc-meta dd {
    margin: 0;
    text-align: right;
    color: var(--tl-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* For values that can legitimately be long — an email address — wrapping beats overflowing. */
.auth-doc-meta dd.auth-doc-meta-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 22ch;
}

.auth-doc-body {
    padding: 28px 34px 30px;
    text-align: left;
}

.auth-doc-body h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--tl-text);
}

.auth-doc-body .auth-subtitle {
    margin-bottom: 24px;
    font-size: 14.5px;
}

.auth-doc-foot {
    padding: 0 34px 28px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tl-text-dim);
}

.auth-doc-foot a {
    color: var(--tl-accent);
    text-decoration: none;
}

.auth-doc-foot a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .auth-doc-head {
        flex-direction: column;
        gap: 18px;
        padding: 26px 22px 20px;
    }

    /* Stacked, the meta column reads better as label-left/value-left than as a right-aligned
       column with nothing to align against. */
    .auth-doc-meta {
        grid-template-columns: auto 1fr;
    }

    .auth-doc-meta dd {
        text-align: left;
    }

    .auth-doc-body {
        padding: 24px 22px 26px;
    }

    .auth-doc-foot {
        padding: 0 22px 24px;
    }
}

/* Answers the question a passwordless login always raises before the user asks it. */
.auth-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 4px 12px;
    border-radius: var(--tl-radius-pill);
    background: var(--tl-accent-soft);
    border: 1px solid var(--tl-accent-border);
    color: var(--tl-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-card {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    padding: 48px 40px;
    width: 420px;
    max-width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.auth-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 24px;
    background: var(--tl-accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo img {
    width: 26px;
    height: 26px;
    filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1);
}

.auth-card h1 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--tl-text);
}

.auth-subtitle {
    font-size: 15px;
    color: var(--tl-text-muted);
    margin: 0 0 32px;
    line-height: 1.6;
}

.auth-subtitle strong {
    color: var(--tl-accent);
}

.auth-field {
    text-align: left;
    margin-bottom: 20px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tl-text-muted);
    margin-bottom: 6px;
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--tl-bg);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-sm);
    color: var(--tl-text);
    font-size: 15px;
    font-family: var(--tl-font);
    transition: border-color 0.2s;
    outline: none;
}

.auth-input:focus {
    border-color: var(--tl-accent);
    box-shadow: 0 0 0 3px var(--tl-accent-soft);
}

.auth-input-code {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.5em;
    padding: 14px 16px;
}

.auth-error {
    color: var(--tl-coral);
    font-size: 13px;
    margin-top: 6px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: var(--tl-radius-pill);
    background: var(--tl-accent);
    color: var(--tl-bg);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--tl-font);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-debug {
    width: 100%;
    padding: 10px;
    border-radius: var(--tl-radius-pill);
    background: transparent;
    color: var(--tl-text-dim);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--tl-font);
    border: 1px dashed var(--tl-border-light);
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn-debug:hover {
    color: var(--tl-text-muted);
    border-color: var(--tl-text-dim);
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(27, 29, 35, 0.3);
    border-top-color: var(--tl-bg);
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
}

@@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-message {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: var(--tl-radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

.auth-message-success {
    background: var(--tl-green-soft);
    color: var(--tl-green);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.auth-message-error {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.auth-timer {
    margin-top: 24px;
    text-align: center;
}

.auth-timer span {
    font-size: 14px;
    color: var(--tl-text-muted);
}

.auth-progress {
    height: 4px;
    background: var(--tl-border);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.auth-progress-bar {
    height: 100%;
    background: var(--tl-green);
    border-radius: 2px;
    transition: width 1s linear;
}

.auth-back-link {
    color: var(--tl-text-muted);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.auth-back-link:hover {
    color: var(--tl-text);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 36px 24px;
    }

    .auth-input-code {
        font-size: 22px;
        letter-spacing: 0.3em;
    }
}

/* ── Timelane UI Components (shared across views) ── */

/* Page layout */
.tl-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0;
}

/* Title on the left, actions on the right.

   Both halves are flex items, and a flex item shrinks by default — so on pages whose title block
   carries a paragraph of explanation, the paragraph won every time and the buttons were crushed
   until their labels wrapped. The actions keep their natural width now and the prose gives way,
   which is the right order: a sentence reflows, a button label does not.

   Wrapping instead of overflowing once even that is not enough, so a narrow window moves the
   actions onto their own line rather than pushing them off the page. */
.tl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 28px;
}

.tl-page-header > :first-child {
    min-width: 0;
}

/* The document header (TlDocHeader). Same shape as .tl-page-header — it is the same idea, applied
   consistently — but with its own name so a scan test can tell "a document page" from "any page
   with a heading". */
.tl-doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 28px;
}

.tl-doc-header-title {
    min-width: 0;
}

.tl-doc-header-title h1 {
    margin: 0;
}

/* Facts under the title: counts, sums, a warning. Kept on one line where it fits and allowed to
   wrap where it does not — never truncated, because a number nobody can read is worse than none. */
.tl-doc-subtitle {
    margin-top: 4px;
    color: var(--tl-text-muted);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.tl-doc-subtitle .tl-warn {
    color: var(--tl-accent);
    font-weight: 600;
}

/* A warning that filters the list when clicked — the number and the way to act on it are the
   same thing, so they are the same control. */
a.tl-warn {
    text-decoration: none;
}

a.tl-warn:hover {
    text-decoration: underline;
}

.tl-doc-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* Document pages: the toolbar always on its own line under the title, whether it is two buttons
   or six. Otherwise the layout depends on how long the document number happens to be. */
.tl-doc-header-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.tl-doc-header-stacked .tl-doc-header-actions {
    justify-content: flex-start;
}

/* The finalised document: lock line, facts, PDF, checksum — in that order on all six kinds. */
.tl-doc-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tl-text-muted);
}

.tl-doc-locked .bi {
    color: var(--tl-accent);
}

.tl-doc-facts {
    margin-bottom: 24px;
}

.tl-fact-value {
    min-height: 21px;
}

.tl-fact-strong {
    font-weight: 600;
}

/* Only when there is something to its left. A header with a single child is that child, and
   pinning its width would let a long title overflow instead of wrapping. */
.tl-page-header > :last-child:not(:first-child) {
    flex-shrink: 0;
}

.tl-page-header h1 {
    font-size: 26px;
    font-weight: 300;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Buttons */
.tl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--tl-radius-pill);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--tl-font);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    /* A button label is one line. Without this, a squeezed header wrapped "Neuer API-Schlüssel"
       over three lines and the pill radius turned it into a blob — see .tl-page-header below for
       why it was being squeezed in the first place. */
    white-space: nowrap;
}

/* Ein `tl-btn` ohne Variante hat hier weder Grund noch Schriftfarbe — er verlässt sich darauf,
   dass der Browser einen <button> von sich aus einfärbt. Bei einem <a> tut der Browser das nicht:
   derselbe Klassenname ergab eine helle Pille auf dem Knopf und einen blauen Link daneben. Zu
   sehen war das auf vier Seiten — „Auftrag erstellen" am finalisierten Angebot, „Lieferschein
   erstellen" am Auftrag, „Zu den Freigaben", „Zur Rechnung" — jedes Mal die Aktion, die den Beleg
   weiterführt, also gerade die, die wie ein Knopf aussehen soll.

   ButtonFace/ButtonText statt eigener Werte, damit die beiden nicht nur heute gleich aussehen: es
   sind dieselben Systemfarben, die der Browser dem <button> daneben gibt, und sie folgen dem
   color-scheme mit, wenn es sich ändert. */
a.tl-btn:not(.tl-btn-accent):not(.tl-btn-ghost):not(.tl-btn-danger):not(.tl-btn-mini) {
    background: ButtonFace;
    color: ButtonText;
}

.tl-btn-accent {
    background: var(--tl-accent);
    color: var(--tl-bg);
}

.tl-btn-accent:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.tl-btn-ghost {
    background: transparent;
    border: 1px solid var(--tl-border-light);
    color: var(--tl-text-muted);
}

.tl-btn-ghost:hover {
    border-color: var(--tl-text-muted);
    color: var(--tl-text);
}

.tl-btn-danger {
    background: var(--tl-coral);
    color: #fff;
}

.tl-btn-danger:hover {
    filter: brightness(1.1);
}

/* Tables */
.tl-table-wrap {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.tl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tl-table thead th {
    background: var(--tl-bg);
    color: var(--tl-text-dim);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-border);
    text-align: left;
}

.tl-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text);
    background: transparent !important;
}

.tl-table tbody tr:last-child td {
    border-bottom: none;
}

.tl-table tbody tr:hover td {
    background: var(--tl-bg-hover) !important;
}

.tl-td-muted {
    color: var(--tl-text-dim) !important;
}

.tl-td-empty {
    text-align: center;
    color: var(--tl-text-dim) !important;
    padding: 32px 16px !important;
}

.tl-tr-dim td {
    opacity: 0.6;
}

.tl-th-actions {
    width: 100px;
}

/* Badges */
.tl-badge {
    display: inline-block;
    /* A pill is one word by definition. Without this, a narrow column breaks "⛁ Auftrag" after
       the icon and draws a two-line lozenge — which is what the Herkunft column did in every
       document list. Let the column be too narrow instead; the table already scrolls. */
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: var(--tl-radius-pill);
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tl-text-muted);
    border: 1px solid var(--tl-border);
}

.tl-badge-accent {
    background: var(--tl-accent-soft);
    color: var(--tl-accent);
    border-color: var(--tl-accent-border);
}

/* Wer eine Stunde gebucht hat, wenn es nicht der Bereich selbst war. Steht neben der Beschreibung
   in den Buchungslisten und neben der Aufgabe im Rechnungsersteller — dieselbe Marke an beiden
   Stellen, weil es dieselbe Auskunft ist: das hier ist fremde Arbeit. Zurückhaltend gehalten, es
   ist eine Herkunftsangabe und keine Warnung. */
.tl-booked-by {
    margin-left: 8px;
    font-weight: 400;
}

.tl-badge-dim {
    opacity: 0.5;
}

/* Icon buttons */
.tl-actions {
    display: flex;
    gap: 6px;
}

.tl-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--tl-border);
    background: transparent;
    color: var(--tl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}

.tl-icon-btn:hover {
    background: var(--tl-bg-hover);
    color: var(--tl-text);
    border-color: var(--tl-border-light);
}

.tl-icon-btn-danger:hover {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border-color: rgba(248, 113, 113, 0.3);
}

/* Modals */
.tl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 29, 35, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1050;
}

.tl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    z-index: 1060;
    overflow: hidden;
}

/* EditForm inside modal must participate in flex layout */
.tl-modal > form,
.tl-modal > editform,
.tl-modal > [data-permanent] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.tl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tl-border);
}

.tl-modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.tl-modal-close {
    background: none;
    border: none;
    color: var(--tl-text-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s;
}

.tl-modal-close:hover {
    color: var(--tl-text);
}

.tl-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.tl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--tl-border);
}

.tl-modal-lg {
    width: min(700px, 90vw);
}

/* For the one dialog that is really an editor rather than a form: the blog post, whose Markdown
   field is twenty rows tall. Wider than tl-modal-lg because a code-ish text area at 700px wraps
   every second sentence. */
.tl-modal-xl {
    width: min(900px, 94vw);
}

/* A window onto a document rather than a form: the embedded PDF viewers. They need a height as
   well as a width, because an iframe has no content to size itself by. Two pages had this same
   pair of numbers written out by hand and no way to notice if one of them drifted. */
.tl-modal-viewer {
    width: min(1000px, 90vw);
    height: 90vh;
}

/* Button group */
.tl-btn-group {
    display: flex;
    gap: 4px;
}

/* Form fields */
.tl-field {
    margin-bottom: 16px;
}

.tl-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tl-text-muted);
    margin-bottom: 6px;
}

.tl-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--tl-bg) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius-sm);
    color: var(--tl-text) !important;
    font-size: 14px;
    font-family: var(--tl-font);
    transition: border-color 0.2s;
    outline: none;
}

.tl-input:focus {
    border-color: var(--tl-accent) !important;
    box-shadow: 0 0 0 3px var(--tl-accent-soft) !important;
}

.tl-input:disabled {
    opacity: 0.5;
}

.tl-field-error {
    color: var(--tl-coral);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Sections and form grids.

   These rules used to live in a <style> block inside BusinessSettings.razor
   under biz-* names. Five document forms had copied the class name
   "biz-form-grid" into their markup, where it matched nothing at all — a
   component-scoped <style> block only reaches the page while that component is
   rendered, so every one of those forms was laying its fields out in a single
   unstyled column. They live here now, under tl-*, where a class used on one
   page is a class defined for every page.
   --------------------------------------------------------------------------- */

.tl-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-section {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.tl-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    transition: background 0.15s;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--tl-font);
    color: inherit;
}

.tl-section-toggle {
    cursor: pointer;
}

.tl-section-toggle:hover {
    background: var(--tl-bg-hover);
}

.tl-section-header:focus-visible {
    outline: 2px solid var(--tl-accent);
    outline-offset: -2px;
}

.tl-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tl-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tl-accent);
    font-size: 16px;
}

.tl-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--tl-text);
}

.tl-section-hint {
    font-size: 13px;
    color: var(--tl-text-dim);
}

.tl-chevron {
    margin-left: auto;
    color: var(--tl-text-dim);
    font-size: 14px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.tl-section-open > .tl-section-header .tl-chevron {
    transform: rotate(180deg);
}

.tl-section-body {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid var(--tl-border);
}

.tl-section-open > .tl-section-body {
    display: block;
    padding-top: 20px;
}

/* Two columns on a desk, one on a phone. Fields opt out with tl-field-wide. */
.tl-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.tl-form-grid > .tl-field {
    margin-bottom: 0;
}

.tl-field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .tl-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Sparkline (TlSparkline). Inline SVG — no chart library, no CDN. */
.spark {
    width: 100%;
    height: 160px;
    display: block;
    overflow: visible;
}

.spark-grid {
    stroke: var(--tl-border);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

.spark-line {
    fill: none;
    stroke: var(--tl-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.spark-fill {
    fill: var(--tl-accent-soft);
    stroke: none;
}

.spark-peak {
    fill: var(--tl-accent);
    vector-effect: non-scaling-stroke;
}

.spark-axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--tl-text-dim);
}

.spark-peak-label {
    color: var(--tl-text-muted);
}

.spark-empty {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tl-text-dim);
    font-size: 14px;
}

/* The link in a list row's leading cell.

   Every list navigated by double-clicking the row and nothing else — so the rows could not be
   reached with a keyboard, could not be middle-clicked, could not be opened in a second tab, and
   told a screen reader nothing about where they led. A real anchor on the name fixes all four at
   once; the double-click stays for the hands that already know it.

   It inherits the cell's colour rather than turning blue: a table where every first column is a
   link does not need to shout, and the underline on hover is the affordance. */
.tl-row-link {
    color: inherit;
    text-decoration: none;
    outline-offset: 2px;
}

.tl-row-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--tl-accent);
}

.tl-row-link:focus-visible {
    outline: 2px solid var(--tl-accent);
    border-radius: 4px;
}

/* Add a line by hand, or pick one from the catalogue. Both visible, side by side. */
.tl-items-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* The catalogue picker's rows. A whole row is the target — the entries are short and there is
   nothing else on the row to click. */
.tl-picker-row {
    cursor: pointer;
}

.tl-picker-row:hover {
    background: var(--tl-bg-hover);
}

/* A document number is one token. Browsers break after a hyphen, so "RE-2026-08-0001" came apart
   across two lines — and only in the rows where the table happened to be squeezed, which made one
   list look like two. Same reasoning as the badge and the button: identifiers do not reflow. */
.tl-td-id {
    white-space: nowrap;
}

/* Archived document view (TlArchivedDocument): the PDF of a finalised document, and its hash.
   Global rather than component-scoped for the reason stated at the top of this section — the
   same view is used from six pages, and a scoped block would only reach whichever of them
   happens to render the component. */
.tl-archived {
    margin-top: 24px;
}

.tl-archived-frame {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
    height: 85vh;
    min-height: 420px;
}

.tl-archived-frame > iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.tl-archived-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 320px;
    min-height: 0;
    padding: 24px;
    text-align: center;
    color: var(--tl-text-muted);
}

.tl-archived-icon {
    font-size: 32px;
    color: var(--tl-accent);
}

.tl-archived-hash {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    padding: 16px;
    margin-top: 16px;
}

.tl-archived-hash > label {
    color: var(--tl-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tl-archived-hash-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.tl-archived-hash-row > code {
    color: var(--tl-text);
    font-size: 0.8rem;
    word-break: break-all;
    flex: 1;
}

.tl-archived-hash-row > .tl-btn {
    flex-shrink: 0;
}

/* The pencil next to a page heading that names another record (a customer on the project list, a
   project on the task list). Muted until hovered — the heading is the message, not the button. */
/* The pencil beside a heading. It is a .tl-icon-btn, and that class is display:flex — a block, so
   inside an <h1> it dropped onto its own line under the title and the vertical-align below was
   never able to do anything about it. inline-flex is what makes it sit next to the words. */
.tl-heading-edit {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
    width: 26px;
    height: 26px;
    opacity: 0.45;
    text-decoration: none;
    font-size: 0.55em;
}

.tl-heading-edit:hover {
    opacity: 1;
}

/* Badge and hint variants that pages elsewhere already use by name. They were each defined in a
   single component's <style> block, so every other page that named them got nothing. */
.tl-badge-danger {
    background: rgba(227, 100, 100, 0.18);
    color: #e68a8a;
}

.tl-field-hint {
    font-size: 12px;
    color: var(--tl-text-dim);
    margin-top: 4px;
}

/* Label links, eine kleine Aktion rechts daneben — für Felder, die sich auf Wunsch selbst füllen.
   Das Label behält seinen Abstand nach unten, damit die Zeile im Formularraster nicht auffällt. */
.tl-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.tl-field-head label {
    margin-bottom: 0;
}

/* Bewusst leiser als ein tl-btn: die Aktion gehört zum Feld, nicht zum Beleg. */
.tl-btn-mini {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--tl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--tl-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s;
}

.tl-btn-mini:hover {
    opacity: 0.75;
}

.tl-btn-mini:disabled {
    color: var(--tl-text-dim);
    cursor: default;
    opacity: 1;
}

/* Positions table (DocumentItemsEditor). Numbers right-aligned so they can be compared. */
.tl-num {
    text-align: right;
}

.tl-items-table td {
    vertical-align: middle;
}

.tl-items-table .tl-input {
    padding: 7px 10px;
}

.tl-items-actions {
    white-space: nowrap;
}

.tl-items-note {
    color: var(--tl-text-muted);
    font-size: 13px;
    margin: 0 0 10px;
}

.tl-line-total {
    color: var(--tl-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-items-sum td {
    border-top: 1px solid var(--tl-border);
    padding: 12px 14px;
    font-weight: 600;
    color: var(--tl-text);
    font-variant-numeric: tabular-nums;
}

/* The one row of buttons that ends every document form. */
.tl-doc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tl-border);
}

.tl-doc-actions .tl-spacer {
    margin-left: auto;
}

.tl-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--tl-text-muted);
    cursor: pointer;
    margin-bottom: 8px;
}

/* The box itself, not only the row around it.
   Left to the browser this renders as a bright blue system checkbox — the one control in the
   application that was never dressed, and it showed: a light-blue square on a dark form, next to
   inputs that are dark with a thin border. */
.tl-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--tl-border);
    border-radius: 4px;
    background: var(--tl-bg);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.tl-checkbox input[type="checkbox"]:hover {
    border-color: var(--tl-accent);
}

.tl-checkbox input[type="checkbox"]::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tl-bg);
    border-bottom: 2px solid var(--tl-bg);
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform 0.12s ease-out;
}

.tl-checkbox input[type="checkbox"]:checked {
    background: var(--tl-accent);
    border-color: var(--tl-accent);
}

.tl-checkbox input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.tl-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--tl-accent);
    outline-offset: 2px;
}

/* Inside a form field, `.tl-field label { display: block }` outranks `.tl-checkbox` — one class
   plus an element beats one class — so the box and its text stacked instead of sitting side by
   side. That is why this checkbox never looked like the ones elsewhere: not the box, the row. */
.tl-field label.tl-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

/* A checkbox in a two-column form grid has no label above it, so it starts where its neighbour's
   label starts and floats a line too high. This drops it onto the same line as the input beside
   it, which is where the eye expects it. */
.tl-field-check {
    display: flex;
    align-items: flex-end;
    min-height: 62px;
    padding-bottom: 11px;
}

/* Alerts */
.tl-alert {
    padding: 12px 16px;
    border-radius: var(--tl-radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
}

.tl-alert-error {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Loading */
.tl-loading {
    display: flex;
    justify-content: center;
    padding: 60px;
}

.tl-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--tl-border);
    border-top-color: var(--tl-accent);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

/* Empty state */
.tl-empty-state {
    text-align: center;
    padding: 80px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.tl-empty-state h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.tl-empty-state p {
    color: var(--tl-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Utility */
.tl-text-coral {
    color: var(--tl-coral);
}

/* ── Stats cards (Customers, Projects, Tasks) ── */
.cust-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.cust-stat {
    flex: 1;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cust-stat-label {
    font-size: 12px;
    color: var(--tl-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.cust-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--tl-text);
}

.cust-stat-amount {
    font-size: 13px;
    color: var(--tl-text-muted);
}

@media (max-width: 767.98px) {
    .cust-stats {
        flex-direction: column;
        gap: 8px;
    }

    .cust-stat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .cust-stat-value {
        font-size: 16px;
    }

    .cust-stat-amount {
        margin-left: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON (top-row, authenticated shell)
   ═══════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tl-border);
    background: var(--tl-bg-raised);
    color: var(--tl-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    color: var(--tl-accent);
    border-color: var(--tl-border-light);
    background: var(--tl-bg-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE  —  ADDITIVE ONLY.
   Everything above is the untouched dark theme (renders identically when
   data-theme is absent or "dark"). This block only takes effect on the
   authenticated shell when <html data-theme="light"> is set (App.razor
   stamps it from the tl-theme cookie; public pages always stay dark).

   Strategy: redefining the --tl-* / legacy tokens flips every token-based
   component (.tl-*, .auth-*, .legal-*, .cust-*) for free. The blocks after
   the tokens only re-skin the hardcoded Bootstrap !important dark rules and
   the few spots that used a background token as on-accent text.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    color-scheme: light;

    /* New design-system tokens (light) */
    --tl-bg: #fbfaf8;
    --tl-bg-raised: #ffffff;
    --tl-bg-hover: #f4f2ee;
    --tl-border: #ece9e3;
    --tl-border-light: #ddd9d2;
    --tl-text: #1b1d23;
    --tl-text-muted: #62626b;
    --tl-text-dim: #9a9aa2;
    --tl-accent: #f5a623;
    --tl-accent-soft: rgba(245, 166, 35, 0.12);
    --tl-accent-border: rgba(245, 166, 35, 0.38);
    --tl-purple: #5b67dd;
    --tl-purple-soft: rgba(129, 140, 248, 0.13);
    --tl-green: #0f9d63;
    --tl-green-soft: rgba(52, 211, 153, 0.15);
    --tl-coral: #dd514a;
    --tl-coral-soft: rgba(248, 113, 113, 0.13);

    /* Legacy tokens (light) — only the neutral text/border ones; --primary/--secondary
       stay as-is because legacy views pair them with hardcoded companion colors. */
    --text: #1b1d23;
    --text-secondary: #63636b;
    --border: #e5e2dc;
}

/* Accent used as TEXT needs a darker amber for contrast on light surfaces
   (the fills keep the bright --tl-accent). */
html[data-theme="light"] .tl-badge-accent,
html[data-theme="light"] .legal-body h2,
html[data-theme="light"] .legal-body a,
html[data-theme="light"] .auth-subtitle strong,
html[data-theme="light"] .auth-footer a {
    color: #a86a05;
}
html[data-theme="light"] .legal-body ul li::before {
    color: #a86a05;
}

/* On-accent text: these used a background token as "dark text on amber" — pin it dark. */
html[data-theme="light"] .tl-btn-accent,
html[data-theme="light"] .auth-btn-primary {
    color: #1b1d23;
}
html[data-theme="light"] .auth-spinner {
    border-top-color: #1b1d23;
    border-color: rgba(27, 29, 35, 0.25);
}

/* Base document + generic links */
html[data-theme="light"] body {
    color: var(--tl-text);
}
html[data-theme="light"] a,
html[data-theme="light"] .btn-link {
    color: #2f6fb0;
}

/* Softer scrim for the app's own modals */
html[data-theme="light"] .tl-modal-backdrop {
    background: rgba(20, 20, 30, 0.32);
}

/* Neutral outline button */
html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .timelane-btn-outline-secondary {
    color: #6a6a6a;
    border-color: #c9c5be;
}
html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .timelane-btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: #8a8a8a;
    color: #4a4a4a;
}

/* ── Re-skin the hardcoded Bootstrap dark !important rules ── */
html[data-theme="light"] .table {
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="light"] table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(even),
html[data-theme="light"] table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f6f4f1 !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:hover {
    background-color: #f0ede8 !important;
}
html[data-theme="light"] .table thead,
html[data-theme="light"] table.table > thead > tr > th,
html[data-theme="light"] .table > thead > tr > th,
html[data-theme="light"] table > thead > tr > th {
    background-color: #f4f2ee !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] table.table,
html[data-theme="light"] .table,
html[data-theme="light"] table {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] table.table > tbody > tr > td,
html[data-theme="light"] .table > tbody > tr > td,
html[data-theme="light"] table > tbody > tr > td {
    border-color: #e5e2dc !important;
    background-color: transparent !important;
    color: #1b1d23 !important;
}

html[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-header {
    border-bottom-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-footer {
    border-top-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-backdrop {
    background-color: #1b1d23 !important;
}

html[data-theme="light"] .card {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}

/* Form controls + inputs */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] .form-control[type="time"],
html[data-theme="light"] .form-control[type="date"],
html[data-theme="light"] .form-control[type="datetime-local"],
html[data-theme="light"] input.form-control[type="time"],
html[data-theme="light"] input.form-control[type="date"],
html[data-theme="light"] input.form-control[type="datetime-local"],
html[data-theme="light"] select,
html[data-theme="light"] option {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #d7d3cc !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] input[type="date"]:focus,
html[data-theme="light"] input[type="datetime-local"]:focus,
html[data-theme="light"] input[type="month"]:focus,
html[data-theme="light"] input[type="time"]:focus,
html[data-theme="light"] input[type="week"]:focus {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.20) !important;
}
html[data-theme="light"] .input-group-text {
    background-color: #f4f2ee !important;
    color: #1b1d23 !important;
    border-color: #ddd9d2 !important;
}

/* Global input text color (dark theme forces #fff) */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: #1b1d23 !important;
}

/* Native date/time pickers → light UI + dark glyphs */
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="month"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="week"],
html[data-theme="light"] select {
    color-scheme: light !important;
}
html[data-theme="light"] ::-webkit-calendar-picker-indicator {
    filter: none !important;
}
html[data-theme="light"] ::-webkit-datetime-edit,
html[data-theme="light"] ::-webkit-datetime-edit-fields-wrapper,
html[data-theme="light"] ::-webkit-datetime-edit-text,
html[data-theme="light"] ::-webkit-datetime-edit-month-field,
html[data-theme="light"] ::-webkit-datetime-edit-day-field,
html[data-theme="light"] ::-webkit-datetime-edit-year-field,
html[data-theme="light"] ::-webkit-datetime-edit-hour-field,
html[data-theme="light"] ::-webkit-datetime-edit-minute-field,
html[data-theme="light"] ::-webkit-datetime-edit-second-field,
html[data-theme="light"] ::-webkit-datetime-edit-ampm-field,
html[data-theme="light"] ::-webkit-datetime-edit-week-field {
    color: #1b1d23 !important;
}

/* Placeholders */
html[data-theme="light"] ::placeholder {
    color: #9a9aa2 !important;
}

/* Bootstrap close button glyph should be dark on light */
html[data-theme="light"] .btn-close {
    filter: none;
}

/* Alerts */
html[data-theme="light"] .alert,
html[data-theme="light"] .alert-info {
    background-color: #eaf1fb !important;
    color: #1b3a5f !important;
    border-color: #cfe0f2 !important;
}

/* Pagination */
html[data-theme="light"] .pagination > li > a,
html[data-theme="light"] .pagination > li > span {
    background-color: #ffffff !important;
    border-color: #ddd9d2 !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .pagination > .active > a,
html[data-theme="light"] .pagination > .active > span {
    background-color: #2c5082 !important;
    border-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Autofill */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] input:-webkit-autofill:active,
html[data-theme="light"] input.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f4f2ee inset !important;
    -webkit-text-fill-color: #1b1d23 !important;
    caret-color: #1b1d23 !important;
    background-color: #f4f2ee !important;
}
html[data-theme="light"] input:-webkit-autofill option,
html[data-theme="light"] datalist option,
html[data-theme="light"] input option,
html[data-theme="light"] option,
html[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
}

/* Shell: faint plus-grid uses a white stroke (invisible on light) → dark stroke */
html[data-theme="light"] main::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23000000' stroke-opacity='.04' stroke-width='.5'/%3E%3C/svg%3E");
}

/* Error bar: keep native controls light */
html[data-theme="light"] #blazor-error-ui {
    color-scheme: light;
}