/*
 * CapriZeit design: company colours #3d449a (indigo), orange and white.
 * Loaded after the inline base/admin styles. It maps their colour variables onto the brand palette
 * and restyles the shared components, so every page picks it up without markup changes.
 */
:root {
    /* the two colours below are configurable (Einstellungen · Design); the rest is derived from them */
    --brand: #3d449a;
    --accent: #f28c1e;
    --brand-deep: color-mix(in srgb, var(--brand) 76%, #000);
    --brand-ink: color-mix(in srgb, var(--brand) 52%, #000);
    --brand-soft: color-mix(in srgb, var(--brand) 11%, #fff);
    --brand-wash: color-mix(in srgb, var(--brand) 5%, #fff);
    --accent-deep: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, #fff);
    --on-accent: #1b1f52;
    --surface: #fff;
    --side-from: color-mix(in srgb, var(--brand) 52%, #000);
    --side-to: color-mix(in srgb, var(--brand) 76%, #000);
    --brand-link: var(--brand);
    --ink: color-mix(in srgb, var(--brand) 22%, #111);
    --muted: color-mix(in srgb, var(--brand) 35%, #6b6b6b);
    --line: color-mix(in srgb, var(--brand) 14%, #fff);
    --canvas: color-mix(in srgb, var(--brand) 4.5%, #fff);
    --danger: #b4233f;
    --danger-soft: #fdecef;
    --ok: #1f7a4d;
    --ok-soft: #e4f4ec;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(27, 31, 82, .06), 0 8px 24px -8px rgba(27, 31, 82, .14);

    /* base styles */
    --trusted-blue: var(--brand);
    --trusted-blue-deep: var(--brand-deep);
    --deep-slate: var(--ink);
    --muted-slate: var(--muted);
    --quiet-slate: #9aa0c0;
    --cool-indigo-haze: var(--brand-soft);
    --cool-sky-haze: var(--accent-soft);
    --fine-outline: var(--line);
    --alert-red: var(--danger);
    --alert-red-deep: var(--danger);
    --alert-red-wash: var(--danger-soft);

    /* admin console */
    --admin-ink: var(--ink);
    --admin-muted: var(--muted);
    --admin-line: var(--line);
    --admin-canvas: var(--canvas);
    --admin-navy: var(--side-from);
    --admin-blue: var(--brand);
    --admin-green: var(--accent);
    --admin-amber: var(--accent);
    --admin-pink: var(--danger);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1100px 420px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
        radial-gradient(900px 420px at 0% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
        var(--canvas);
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--brand-link); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--brand-ink); }

/* ---------- cards, headings (employee area and login) ---------- */
.ds-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ds-card--narrow { border-top: 6px solid var(--accent); }
.ds-brand-mark {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 -3px 0 var(--accent);
}
.ds-brand-title { color: var(--brand-ink); }
.ds-page-header {
    margin: -40px -32px 24px;
    padding: 26px 32px 22px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    border-bottom: 5px solid var(--accent);
    color: #fff;
    position: relative;
}
.ds-header-icon { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.ds-header-icon:hover { background: rgba(255, 255, 255, .25); }
.ds-header-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-page-header > .ds-greeting { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.ds-page-header p, .ds-page-header .ds-subtitle { color: rgba(255, 255, 255, .82); margin-bottom: 0; }
.ds-live-clock {
    background: var(--brand-wash);
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    color: var(--brand-ink);
    border-radius: var(--radius);
}
.ds-live-clock time { font-size: clamp(34px, 9vw, 46px); }
.ds-live-clock span { color: var(--muted); }

/* ---------- forms ---------- */
.ds-input-wrap { border-radius: var(--radius); border-color: var(--line); background: var(--surface); }
.ds-input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.ds-field label { color: var(--muted); }

/* ---------- buttons ---------- */
.ds-btn-primary, .ds-btn-secondary { border-radius: var(--radius); min-height: 48px; }
.ds-btn-primary {
    background: linear-gradient(180deg, var(--brand), var(--brand-deep));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent);
}
.ds-btn-primary:not(:disabled) { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); }
.ds-btn-primary:disabled { background: var(--brand-soft); color: var(--muted); text-decoration: none; box-shadow: none; filter: none; }
.ds-btn-secondary { color: var(--brand-ink); border-color: var(--line); }
.ds-btn-secondary:hover { background: var(--brand-soft); border-color: var(--brand); }
/* stamp terminal: Kommt and Geht are the main actions */
.ds-action-grid { gap: 14px; }
.ds-action-grid .ds-btn-primary { min-height: 64px; font-size: 17px; }
.ds-action-grid .ds-btn-primary:nth-child(-n+2):not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
    color: var(--on-accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ds-btn-small { border-radius: 8px; border-color: var(--line); color: var(--brand-ink); }
.ds-btn-small:hover { border-color: var(--brand); background: var(--brand-soft); }
.ds-btn-small--ok { background: var(--brand); border-color: var(--brand); color: #fff; }
.ds-btn-small--ok:hover { background: var(--brand-deep); }
.ds-btn-small--nein { color: var(--danger); }

/* ---------- messages, status ---------- */
.ds-alert { border-left: 4px solid var(--danger); border-radius: 8px; }
.ds-alert--info { border-left-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.ds-status { background: var(--brand-soft); color: var(--brand-ink); }
.ds-status--abgegeben { background: var(--accent-soft); color: var(--accent-deep); }
.ds-status--genehmigt { background: var(--ok-soft); color: var(--ok); }
.ds-status--zurueckgewiesen { background: var(--danger-soft); color: var(--danger); }

/* ---------- tables (employee area) ---------- */
th { color: var(--muted); background: var(--brand-wash); }
tbody tr:nth-child(even) { background: var(--brand-wash); }
tbody tr:hover { background: var(--brand-soft); }

/* ---------- credit and info dialog ---------- */
.ds-credit { border-color: var(--line); }
.ds-credit:hover, .ds-credit:focus-visible { color: var(--brand); border-color: var(--brand); }
.app-info { border-radius: 16px; border-color: var(--line); }
.app-info-bar { background: var(--brand); color: #fff; border-bottom: 4px solid var(--accent); font-weight: 600; padding: 10px 16px; }
.app-info-text { background: var(--brand-wash); }
.app-info-text button { border-radius: 10px; border-color: var(--line); }
.app-info-text button:hover, .app-info-text button:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

/* ---------- admin console ---------- */
body:has(.admin-shell) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--canvas); }
.admin-sidebar {
    background: linear-gradient(180deg, var(--side-from) 0%, var(--side-to) 100%);
    border-right: 4px solid var(--accent);
    width: 256px; flex-basis: 256px;
    position: sticky; top: 0; height: 100vh; min-height: 0; overflow-y: auto;
}
.admin-brand-mark { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.admin-brand small { color: color-mix(in srgb, var(--brand) 30%, #fff); }
.admin-nav { gap: 2px; }
.admin-nav-label { margin: 12px 12px 4px; color: color-mix(in srgb, var(--brand) 30%, #fff); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.admin-nav a, .admin-nav-group summary { color: color-mix(in srgb, var(--brand) 14%, #fff); border-radius: 10px; }
.admin-nav a:hover, .admin-nav a[aria-current="page"], .admin-nav-group summary:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 3px 0 var(--accent); font-weight: 600; }
.admin-nav a.admin-nav-sub { padding-left: 12px; font-size: 14px; }
.admin-nav-group .admin-nav-sub { padding-left: 42px; font-size: 13px; }
.admin-vendor { border-radius: 10px; }
.admin-sidebar-footer { border-top-color: rgba(255, 255, 255, .14); }
.admin-avatar { background: var(--accent); color: var(--on-accent); }
.admin-user span { color: color-mix(in srgb, var(--brand) 30%, #fff); }

.admin-main { padding-top: 28px; }
.admin-topbar h1 { color: var(--brand-ink); font-size: clamp(24px, 3vw, 30px); }
.admin-topbar h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--accent); }
.admin-topbar p { color: var(--muted); font-size: 14px; max-width: 70ch; }
.admin-icon-button { border-radius: 10px; }
.admin-icon-button:hover, .admin-icon-button:focus-visible { border-color: var(--brand); color: var(--brand); }
.admin-icon-button[data-tooltip]::after { background: var(--brand-ink); }

.admin-panel { border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--line); }
.admin-panel-header { background: var(--brand-wash); border-radius: var(--radius) var(--radius) 0 0; }
.admin-panel-header h2 { color: var(--brand-ink); font-size: 17px; }
.admin-stat { border-radius: var(--radius); border-color: var(--line); border-top: 3px solid var(--accent); box-shadow: var(--shadow); }
.admin-stat-icon.blue { background: var(--brand); }
.admin-stat-icon.green, .admin-stat-icon.amber { background: var(--accent); color: var(--on-accent); }
.admin-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 60%, #fff), var(--brand)); }
.stunden-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, #fff), var(--brand)); }
.stunden-bar.ok { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); }
.stunden-track { background: var(--brand-soft); }
.admin-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.admin-link:hover { background: var(--brand-soft); color: var(--brand); }

.admin-table { font-size: 13px; }
.admin-table th { background: var(--brand-wash); color: var(--muted); position: sticky; top: 0; z-index: 1; }
.admin-table th, .admin-table td { padding: 8px 14px; }
.admin-table tbody tr:nth-child(even) { background: var(--brand-wash); }
.admin-table tbody tr:hover { background: var(--brand-soft); }
.admin-badge { background: var(--ok-soft); color: var(--ok); border-radius: 6px; font-size: 11px; padding: 3px 8px; }
.admin-badge.muted { background: var(--brand-soft); color: var(--brand-ink); }
.admin-badge.danger { background: var(--danger-soft); color: var(--danger); }

.admin-form-row select, .admin-form-row input, .admin-fields input, .admin-fields select, .admin-fields textarea { border-radius: 8px; border-color: var(--line); }
.admin-form-row select:focus, .admin-form-row input:focus, .admin-fields input:focus, .admin-fields select:focus, .admin-fields textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand);
}
.admin-fields label { color: var(--muted); font-size: 12px; }
.admin-button { border-radius: 8px; background: var(--brand); height: 36px; font-size: 13px; }
.admin-button:hover { background: var(--brand-deep); filter: none; }
.admin-button--secondary { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.admin-button--secondary:hover { background: var(--brand-soft); }
.admin-table .admin-button { height: 26px; padding: 0 10px; font-size: 12px; }
.admin-table th, .admin-table td { padding-block: 4px; }
.admin-table--dicht th, .admin-table--dicht td { padding: 4px 6px; white-space: nowrap; }
.admin-table--dicht th { white-space: normal; }
.admin-table--dicht .admin-link { display: inline; padding: 0; }
.admin-table--dicht .admin-badge { padding: 0 6px; font-size: 11px; }
.admin-table--dicht .admin-button { height: 20px; padding: 0 8px; font-size: 11px; }
.admin-table--dicht td:nth-child(9) { white-space: normal; min-width: 120px; }
.admin-table--dicht td.umbruch { white-space: normal; }
.admin-table--dicht .ds-status { padding: 0 8px; font-size: 11px; }
.admin-table--dicht .ds-inline { gap: 4px; }
.admin-table--dicht form.ds-inline { margin-top: 0 !important; flex-wrap: nowrap; }
.admin-table--dicht .aktionen { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.admin-table--dicht .aktionen input { width: 170px; flex: none; }
.admin-table--dicht td input { height: 24px; padding: 0 6px; }
.admin-ghost { border-radius: 8px; }
.admin-ghost:hover { border-color: var(--brand); color: var(--brand); }
.admin-flash { border-radius: 10px; border-left: 4px solid var(--ok); background: var(--ok-soft); color: var(--ok); font-size: 14px; }
.admin-flash--error { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.admin-user-list a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.admin-user-list a:hover { background: var(--brand-wash); }
.admin-fieldset legend { color: var(--brand-ink); }

/* ---------- phones and tablets ---------- */
/* the sidebar becomes a drawer, opened by the menu button in the topbar */
@media (max-width: 920px) {
    .admin-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(280px, 85vw); flex-basis: auto; height: 100dvh;
        padding: 20px 14px; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
    }
    .admin-shell.nav-offen .admin-sidebar { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .admin-shell.nav-offen::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(10, 20, 35, .45); }
    .admin-nav a, .admin-nav-group summary { min-height: 42px; }
    .admin-main { padding: 16px 16px 32px; min-width: 0; }
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
/* large monitors: the content grows with the screen instead of staying at 12–14 px (the sidebar keeps its size) */
@media (min-width: 1920px) { .admin-main { zoom: 1.12; } }
@media (min-width: 2400px) { .admin-main { zoom: 1.28; } }
@media (max-width: 600px) {
    .ds-card { padding: 28px 20px; border-radius: 14px; }
    .ds-page-header { margin: -28px -20px 20px; padding: 22px 20px 18px; }
    body { padding: 12px; }
    .admin-topbar { flex-wrap: wrap; }
    .admin-topbar p { max-width: none; }
    .admin-table th, .admin-table td { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}
@media print {
    .admin-sidebar, .ds-credit { display: none !important; }
    body { background: var(--surface); }
}

.admin-table td select, .admin-table td input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.admin-table td select:focus, .admin-table td input:focus { outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); }
.admin-brand-mark { flex: none; }

/* ---------- dark mode: html[data-theme="dark"] (set from Einstellungen · Design, "auto" follows the device) ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --canvas: color-mix(in srgb, var(--brand) 8%, #0b0d1a);
    --surface: color-mix(in srgb, var(--brand) 9%, #151829);
    --ink: #e8eaf8;
    --muted: #a6abcf;
    --line: color-mix(in srgb, var(--brand) 26%, #1a1d33);
    --brand-soft: color-mix(in srgb, var(--brand) 26%, #151829);
    --brand-wash: color-mix(in srgb, var(--brand) 13%, #151829);
    --brand-ink: color-mix(in srgb, var(--brand) 35%, #fff);
    --brand-link: color-mix(in srgb, var(--brand) 50%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, #151829);
    --danger: #ff8fa5;
    --danger-soft: color-mix(in srgb, #b4233f 28%, #151829);
    --ok: #6fd3a0;
    --ok-soft: color-mix(in srgb, #1f7a4d 30%, #151829);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --admin-surface: var(--surface);
    --admin-blue: var(--brand-link);
}
html[data-theme="dark"] body { background: radial-gradient(1100px 420px at 85% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--canvas); }
html[data-theme="dark"] body:has(.admin-shell) { background: var(--canvas); }
html[data-theme="dark"] .ds-card,
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .admin-stat,
html[data-theme="dark"] .admin-icon-button,
html[data-theme="dark"] .ds-btn-secondary,
html[data-theme="dark"] .ds-btn-small,
html[data-theme="dark"] .ds-input-wrap,
html[data-theme="dark"] .ds-credit,
html[data-theme="dark"] .admin-ghost,
html[data-theme="dark"] .admin-user-list,
html[data-theme="dark"] .app-info,
html[data-theme="dark"] .app-info-logo { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .ds-btn-primary { color: #fff; }
html[data-theme="dark"] .ds-btn-small--ok { color: #fff; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: var(--canvas); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .ds-input-wrap input { background: transparent; }
html[data-theme="dark"] .admin-button--secondary { background: var(--surface); color: var(--brand-link); box-shadow: inset 0 0 0 1px var(--brand-link); }
html[data-theme="dark"] .admin-button { color: #fff; }
html[data-theme="dark"] .admin-panel-header,
html[data-theme="dark"] .admin-table th,
html[data-theme="dark"] th { background: var(--brand-wash); color: var(--muted); }
html[data-theme="dark"] .admin-fieldset,
html[data-theme="dark"] .admin-toolbar,
html[data-theme="dark"] .menue-actions,
html[data-theme="dark"] .pausen-actions { border-color: var(--line); }
html[data-theme="dark"] .menue-actions,
html[data-theme="dark"] .pausen-actions,
html[data-theme="dark"] .menue-table thead th { background: var(--brand-wash); }
html[data-theme="dark"] .pausen-option:has(input:checked) { background: var(--brand-soft); }
html[data-theme="dark"] .admin-link:hover,
html[data-theme="dark"] .admin-user-list a:hover { background: var(--brand-soft); }
html[data-theme="dark"] .admin-vendor { background: #fff; }
html[data-theme="dark"] .admin-flash { background: var(--ok-soft); color: var(--ok); }
html[data-theme="dark"] .admin-flash--error { background: var(--danger-soft); color: var(--danger); }
html[data-theme="dark"] .ds-alert { background: var(--danger-soft); color: var(--danger); }
html[data-theme="dark"] .ds-alert--info { background: var(--brand-soft); color: var(--ink); }
html[data-theme="dark"] .ds-live-clock time { color: var(--ink); }
html[data-theme="dark"] .stunden-track { background: var(--brand-soft); }
html[data-theme="dark"] .app-info-text { background: var(--brand-wash); }
html[data-theme="dark"] .app-info-text button { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .app-info-logo img { background: #fff; border-radius: 8px; padding: 8px; }

.admin-main { min-width: 0; }
.admin-panel-header { flex-wrap: wrap; }

/* buttons inside tables: subtle, small */
table .ds-btn-small { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 500; }
table .ds-btn-small:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
table .ds-btn-small--ok { background: var(--brand-soft); color: var(--brand-ink); }
table .ds-btn-small--nein { color: var(--danger); }
table .ds-btn-small--nein:hover { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }

/* compact panel header (title row with month/year selects) */
.admin-panel-header { padding-block: 8px; }
.admin-panel-header .admin-form-row select, .admin-panel-header .admin-form-row input { height: 28px; padding-block: 0; }

/* all panels look like the stat cards */
.admin-panel { border-top: 3px solid var(--accent); }
.admin-panel > .admin-panel-header { background: transparent; border-radius: 0; }

/* dark mode toggle: moon in light mode, sun in dark mode */
[data-darkmode] .dm-sonne, html[data-theme="dark"] [data-darkmode] .dm-mond { display: none; }
html[data-theme="dark"] [data-darkmode] .dm-sonne { display: inline; }
html[data-theme="dark"] [data-darkmode] svg.dm-sonne { display: block; }