/* =====================================================================
   Zeiterfassung – Basis-Stylesheet (handgeschrieben, kein Build-Step)
   Eigenständiges, schlichtes Design. Hell/Dunkel über prefers-color-scheme.
   ===================================================================== */

:root {
    --bg:        #f6f7f9;
    --surface:   #ffffff;
    --surface-2: #f9fafb;
    --text:      #11181c;
    --muted:     #687076;
    --border:    #e6e8eb;
    --primary:   #2f6feb;
    --primary-d: #1d4ed8;
    --primary-soft:#eaf1fe;
    --danger:    #e5484d;
    --danger-soft:#fdeced;
    --ring:      rgba(47,111,235,.35);
    --success-bg:#e7f6ec;
    --success-fg:#1b6b3a;
    --error-bg:  #fdecec;
    --error-fg:  #a51d1d;
    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
    --shadow-lg: 0 10px 30px -12px rgba(16,24,40,.25);
    --maxw:      1040px;
    --font:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:      #0f1216;
        --surface: #181c22;
        --surface-2:#1f242b;
        --text:    #e8eaed;
        --muted:   #9aa3ad;
        --border:  #2a3138;
        --primary: #4b8bff;
        --primary-d:#6ea2ff;
        --primary-soft:#1a2740;
        --danger:  #ff6166;
        --danger-soft:#3a1d1f;
        --ring:    rgba(75,139,255,.4);
        --success-bg:#16301f;
        --success-fg:#7fe0a0;
        --error-bg: #3a1d1d;
        --error-fg: #f6a6a6;
        --shadow:   0 1px 3px rgba(0,0,0,.5);
        --shadow-lg:0 12px 32px -12px rgba(0,0,0,.7);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--primary); }

/* ---- Layout: Topbar ---- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.topbar .brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
    font-size: 1.15rem;
}
.topbar .mainnav {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
}
.topbar .mainnav a {
    text-decoration: none;
    color: var(--muted);
    padding: .25rem 0;
}
.topbar .mainnav a:hover { color: var(--text); }
.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.topbar-right .who { color: var(--muted); font-size: .9rem; }

/* ---- Container ---- */
.container {
    max-width: var(--maxw);
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}

/* ---- App-Shell (mobil) ---- */
.app-shell {
    max-width: 520px;
    margin: 0 auto;
    padding: 1rem;
}

/* ---- Karten ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.card h1 { margin: 0 0 .5rem; font-size: 1.4rem; }
.auth-card { max-width: 420px; margin: 3rem auto; }

/* ---- Formulare ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=date],
.field select {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.field input:focus,
.field select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}
.field-check label { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.field small.muted { display: block; margin-top: .3rem; }

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: .55rem .9rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    background: var(--bg);
    border-color: var(--border);
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-small { padding: .35rem .6rem; font-size: .85rem; }
.inline { display: inline; }

/* ---- Tabellen ---- */
.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th, .table td {
    text-align: left;
    padding: .6rem .65rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.row-actions { display: flex; gap: .4rem; }

/* ---- Meldungen ---- */
.alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.alert-success { background: var(--success-bg); color: var(--success-fg); }
.alert-error   { background: var(--error-bg);   color: var(--error-fg); }

.muted { color: var(--muted); }

/* ---- Footer ---- */
.site-footer {
    max-width: var(--maxw);
    margin: 2rem auto;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .85rem;
}
.lang-switch a { margin-left: .6rem; text-decoration: none; }

/* ===================================================================
   Phase 2 – Zeiterfassung
   =================================================================== */

/* Farb-Punkt für Zeitarten */
.dot {
    display: inline-block;
    width: .8em; height: .8em;
    border-radius: 50%;
    margin-right: .4em;
    vertical-align: middle;
}

.badge {
    display: inline-block;
    font-size: .7rem;
    padding: .1rem .4rem;
    border-radius: 6px;
    background: var(--border);
    color: var(--muted);
    margin-left: .4rem;
    vertical-align: middle;
}
.badge-today {
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    margin-left: .5rem;
}

/* Timer-Widget */
.timer-widget { padding: 1rem 1.25rem; }
.timer-start {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}
.timer-start select,
.timer-start input[type=text] {
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.timer-start input[type=text] { flex: 1 1 12rem; }
.timer-running {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.timer-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.timer-clock {
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 700;
}
.timer-running form { margin-left: auto; }
.timer-note { font-size: .85rem; }
.sr-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Wochennavigation */
.week-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.week-label { font-weight: 600; }

/* Tageskarten */
.day-card { padding: 1rem 1.25rem; }
.day-card.day-today { border-color: var(--primary); }
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}
.day-head h2 { font-size: 1.05rem; margin: 0; }
.day-actions { display: flex; align-items: center; gap: .6rem; }
.day-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.no-entries { margin: .3rem 0 0; }

.table-entries td { border-bottom: 1px solid var(--border); }
.table-entries .col-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-entries .col-dur  { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.table-entries .col-note { color: var(--muted); }
.table-entries .col-actions { white-space: nowrap; }
.table-entries .col-actions .inline { margin-left: .3rem; }

.week-sum { text-align: right; font-size: 1.05rem; }

/* Formular: Zeit/Dauer nebeneinander */
.field-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.field-group legend { font-weight: 600; padding: 0 .4rem; }
.field-group .hint { margin: 0 0 .6rem; }
.row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.row .field { flex: 1 1 8rem; margin-bottom: 0; }

/* Dashboard-KPI */
.dashboard-today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.kpi { display: flex; flex-direction: column; }
.kpi-label { color: var(--muted); font-size: .85rem; }
.kpi-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================================================================
   Phase 3 – Zeitmodelle & Saldo
   =================================================================== */

.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* KPI-Reihe (Dashboard + Saldo) */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}
.kpi-row .kpi { min-width: 6rem; }

/* Saldo-Farben */
.saldo-pos  { color: #16a34a; }
.saldo-neg  { color: #dc2626; }
.saldo-zero { color: var(--muted); }

/* Tabellen: numerische Spalten rechtsbündig */
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-balance tfoot th { border-top: 2px solid var(--border); }
.table-balance .weekend td { background: rgba(127,127,127,.06); }

/* Wochentags-Raster im Modellformular */
.weekday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .8rem;
}
.weekday-grid .field { margin-bottom: 0; }

/* Zuordnungs-Karten */
.assign-card { padding: 1rem 1.25rem; }
.assign-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.assign-head h2 { font-size: 1.05rem; margin: 0; }
.assign-current { font-weight: 600; }
.assign-form {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}
.assign-form select,
.assign-form input[type=date] {
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.inline-label { display: inline-flex; align-items: center; gap: .4rem; }
.assign-history { margin-top: .7rem; }
.assign-history summary { cursor: pointer; color: var(--muted); }
.assign-history ul { list-style: none; padding: .4rem 0 0; margin: 0; }
.assign-history li { display: flex; align-items: center; gap: .6rem; padding: .2rem 0; }

.person-select select {
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.dashboard-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ===================================================================
   Phase 4 – Feiertage & Urlaub (Status-Badges)
   =================================================================== */

/* Status-Badges (erweitern die Basis-.badge). Eigene Farben statt
   margin-left, damit sie auch frei in Tabellenzellen stehen können. */
.badge-warn,
.badge-ok,
.badge-err {
    display: inline-block;
    font-size: .72rem;
    padding: .12rem .5rem;
    border-radius: 6px;
    vertical-align: middle;
    font-weight: 600;
}
.badge-warn { background: #fef3c7; color: #92400e; }  /* beantragt  */
.badge-ok   { background: #dcfce7; color: #166534; }  /* genehmigt  */
.badge-err  { background: #fee2e2; color: #991b1b; }  /* abgelehnt  */

/* Feiertagszeile in der Saldotabelle */
.table-balance .holiday td { background: rgba(37,99,235,.06); }
.day-holiday { color: var(--primary); font-size: .8rem; }

@media (prefers-color-scheme: dark) {
    .badge-warn { background: #4d3b10; color: #fde68a; }
    .badge-ok   { background: #14401f; color: #bbf7d0; }
    .badge-err  { background: #4a1414; color: #fecaca; }
}

/* ===================================================================
   Phase 5 – Projekte & Budget
   =================================================================== */

/* Projekt-Tag (in Listen und Timer) */
.proj-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    padding: .08rem .45rem;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    margin-right: .4rem;
    white-space: nowrap;
}

/* Fortschrittsbalken Budgetauslastung */
.bar {
    position: relative;
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    min-width: 90px;
}
.bar-lg { height: 14px; }
.bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
    background: var(--primary);
}
.bar-ok   { background: #16a34a; }
.bar-warn { background: #d97706; }
.bar-over { background: #dc2626; }
.bar-label { font-size: .72rem; margin-left: .4rem; }

/* Timer-Projektauswahl: gleiche Optik wie Zeitart-Select */
.timer-start select {
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

/* ===================================================================
   Phase 6 – Statistik & Export
   =================================================================== */

.stat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: flex-end;
    margin-bottom: .8rem;
}
.stat-filter input[type=date],
.stat-filter select {
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.export-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Balkendiagramme (reines CSS) */
.statbars { display: flex; flex-direction: column; gap: .5rem; }
.statbar-row {
    display: grid;
    grid-template-columns: 9rem 1fr 4rem;
    align-items: center;
    gap: .6rem;
}
.statbar-label { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statbar-track { background: var(--border); border-radius: 999px; height: 14px; overflow: hidden; }
.statbar-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; transition: width .3s ease; }
.statbar-val { font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
    .statbar-row { grid-template-columns: 7rem 1fr 3.4rem; }
}

/* ===================================================================
   Phase 7 – Design-Refresh & Icons
   =================================================================== */

/* Icons erben Textfarbe, sitzen optisch auf der Grundlinie */
.icon { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }

/* ---- Topbar moderner ---- */
.topbar {
    gap: .5rem;
    padding: .6rem 1.1rem;
    backdrop-filter: saturate(1.2);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .brand { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.topbar .brand::before {
    content: "";
    width: 22px; height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--primary), var(--primary-d));
    display: inline-block;
}

/* Navigation als Pills mit Icon + Label */
.topbar .mainnav { gap: .15rem; margin-left: .75rem; flex-wrap: wrap; }
.topbar .mainnav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .7rem;
    border-radius: 9px;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.topbar .mainnav a:hover { background: var(--surface-2); color: var(--text); }
.topbar .mainnav a.is-active { background: var(--primary-soft); color: var(--primary-d); }
.topbar .mainnav a.is-active .icon { color: var(--primary); }

.topbar-right .who { display: inline-flex; align-items: center; gap: .4rem; }
.iconbtn-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--muted); text-decoration: none;
    padding: .35rem .55rem; border-radius: 8px;
}
.iconbtn-link:hover { background: var(--surface-2); color: var(--text); }

/* ---- Buttons mit Icon ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: var(--radius-sm);
    transition: background .15s, box-shadow .15s, border-color .15s, transform .02s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn .icon { margin: 0; }

/* Reine Icon-Schaltfläche (z. B. in Tabellen) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.row-actions, .col-actions { display: flex; gap: .35rem; align-items: center; }
.row-actions form, .col-actions form { display: inline-flex; margin: 0; }

/* ---- Cards weicher ---- */
.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.card-head h1 { letter-spacing: -.02em; }

/* ---- Flash-Meldungen mit Icon ---- */
.alert { display: flex; align-items: center; gap: .6rem; }
.alert .icon { flex: 0 0 auto; }

/* ---- Timer-Buttons ---- */
.timer-start .btn, .timer-running .btn { white-space: nowrap; }

/* ---- Mobile: Navigation als scrollbare Leiste ---- */
@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; }
    .topbar .mainnav {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .topbar .mainnav::-webkit-scrollbar { display: none; }
    .topbar .mainnav a { white-space: nowrap; }
}

/* App-Layout (PWA/mobil): Nav-Labels unter dem Icon zentriert */
.layout-app .mainnav a { flex-direction: column; gap: .15rem; font-size: .72rem; }

/* ===================================================================
   Phase 8 – CSV-Import
   =================================================================== */
.import-hints { margin: .5rem 0 1rem; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; }
.import-hints li { margin: .25rem 0; }
.import-summary { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.import-summary .badge-ok, .import-summary .badge-err { display: inline-flex; align-items: center; gap: .3rem; }
.import-confirm { margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
input[type=file] {
    font: inherit;
    padding: .5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    width: 100%;
    max-width: 420px;
}