/* ===================================================================
   egerer consulting – Zeiterfassung · Theme
   Markenfarben zentral als CSS-Variablen (an einer Stelle anpassbar).
   =================================================================== */
:root {
    --brand:        #14304d;   /* Navy / Ink */
    --brand-700:    #1b3d5f;
    --brand-600:    #244c70;
    --brand-500:    #2e5e88;
    --accent:       #c8a24a;   /* dezentes Gold */
    --accent-600:   #b08e3c;
    --ink:          #1f2733;
    --muted:        #5b6573;
    --surface:      #f4f6f9;   /* App-Hintergrund */
    --card:         #ffffff;
    --card-border:  #e6e8ec;
    --radius:       .6rem;
    --shadow-sm:    0 1px 2px rgba(20, 48, 77, .06), 0 1px 3px rgba(20, 48, 77, .08);
    --shadow-md:    0 4px 16px rgba(20, 48, 77, .10);
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background-color: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--brand);
}

h1 { font-size: 1.6rem; margin-bottom: .25rem; }

a, .btn-link { color: var(--brand-500); }
a:hover { color: var(--brand-700); }

/* --- Buttons --- */
.btn-primary {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover {
    background-color: var(--brand);
    border-color: var(--brand);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .2rem rgba(46, 94, 136, .25);
}

/* --- Cards --- */
.card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background-color: #fbfcfd;
    border-bottom: 1px solid var(--card-border);
    font-weight: 600;
    color: var(--brand);
}

/* Akzent für Kennzahlen-Karten auf dem Dashboard */
.card .text-muted { color: var(--muted) !important; }

/* --- Tabellen --- */
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th {
    color: var(--muted);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--card-border);
}

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

/* --- Formular-Validierung --- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ===================================================================
   Login-Seite (zweispaltiges Layout)
   =================================================================== */
.auth-shell { min-height: 100vh; }

.auth-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 100vh;
}

/* Linkes Markenpanel */
.auth-brand {
    position: relative;
    overflow: hidden;
    color: #eaf0f7;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(200,162,74,.18), transparent 60%),
        linear-gradient(160deg, var(--brand) 0%, #0d2138 70%);
    display: flex;
    align-items: center;
    padding: 3rem;
}
.auth-brand::after {
    /* dezentes Liniengitter im Hintergrund */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 75%);
}
.auth-brand-inner { position: relative; z-index: 1; max-width: 420px; }

.auth-brand h2 {
    color: #fff;
    font-size: 1.9rem;
    margin: 1.6rem 0 .6rem;
}
.auth-brand p { color: #c2cedd; font-size: 1.02rem; line-height: 1.55; }

.auth-points { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.auth-points li {
    display: flex; align-items: center; gap: .65rem;
    padding: .35rem 0; color: #d7e0eb; font-size: .95rem;
}
.auth-points li::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--accent); flex: 0 0 auto;
}

/* Rechte Formularseite */
.auth-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; background: var(--surface);
}
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2.4rem 2.2rem;
}
.auth-card .form-control { padding: .6rem .75rem; }
.auth-card .btn-primary { padding: .6rem; font-weight: 600; }

/* Wortmarke „egerer consulting“ */
.brand-wordmark { display: inline-flex; align-items: baseline; gap: .12rem; line-height: 1; }
.brand-wordmark .wm-1 { font-weight: 700; }
.brand-wordmark .wm-2 { font-weight: 300; }
.brand-wordmark .wm-dot { color: var(--accent); font-weight: 700; }
.auth-brand .brand-wordmark { font-size: 1.7rem; color: #fff; }

@media (max-width: 800px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
}

/* --- Blazor-Fehleranzeige --- */
.blazor-error-boundary {
    background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white;
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten." }

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