/* ============================================================
   ZWISO – Design-Tokens
   Primär: gedecktes Tannengrün (Vertrauen, "im Dienst")
   Akzent: warmes Bernstein (Stempel-/Aktionsfarbe)
   Typo: Manrope (Headings/UI) + Inter (Fließtext/Daten)
   ============================================================ */

:root {
    --tt-primary: #8E7BB8;
    --tt-primary-dark: #716293;
    --tt-primary-light: #9E8EC2;
    --tt-accent: #384180;
    --tt-accent-dark: #2C3466;
    --tt-bg: #F6F5F0;
    --tt-surface: #FFFFFF;
    --tt-text: #1F2422;
    --tt-text-muted: #6B7570;
    --tt-border: #E4E1D6;
    --tt-success: #3E8914;
    --tt-success-bg: #EAF4E3;
    --tt-danger: #C1432E;
    --tt-danger-bg: #FBEAE6;
    --tt-warning-bg: #FCF1DE;
    --tt-radius: 0.7rem;
    --tt-font-display: 'Manrope', system-ui, sans-serif;
    --tt-font-body: 'Inter', system-ui, sans-serif;

    --bs-primary: var(--tt-primary);
    --bs-primary-rgb: 142, 123, 184;
    --bs-body-font-family: var(--tt-font-body);
    --bs-body-color: var(--tt-text);
    --bs-body-bg: var(--tt-bg);
}

body {
    background: var(--tt-bg);
    color: var(--tt-text);
}

/* ============================================================
   Bootstrap kompiliert Button-/Badge-Zustände (v. a. :checked,
   :hover, :active) teils mit fest eincompilierten Blau-Werten statt
   lebenden CSS-Variablen -- das Überschreiben von --bs-primary allein
   reicht dafür nicht aus. Deshalb hier explizite, robuste
   Überschreibungen mit der Firmenfarbe, gilt konsistent für alle
   Module (nicht nur einzelne Formulare).
   ============================================================ */
.btn-primary {
    background-color: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--tt-primary-dark) !important;
    border-color: var(--tt-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: #fff !important;
}
.text-primary { color: var(--tt-primary) !important; }
.bg-primary { background-color: var(--tt-primary) !important; }
.form-check-input:checked {
    background-color: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
}
.form-range::-webkit-slider-thumb { background-color: var(--tt-primary) !important; }
a:not(.btn) { color: var(--tt-primary); }
.page-link { color: var(--tt-primary); }
.page-item.active .page-link { background-color: var(--tt-primary) !important; border-color: var(--tt-primary) !important; }
.nav-link.active { color: var(--tt-primary) !important; }
.spinner-border.text-primary { color: var(--tt-primary) !important; }

h1, h2, h3, h4, h5, h6, .tt-display {
    font-family: var(--tt-font-display);
    letter-spacing: -0.01em;
}

/* ---------- Top-Navbar ---------- */
.tt-navbar {
    background: var(--tt-primary);
    color: #fff;
    padding: 0.65rem 1rem;
}
.tt-navbar .tt-brand {
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.tt-navbar .tt-brand .dot { color: var(--tt-accent); }
.tt-logo-dark { display: none; }
[data-theme="dark"] .tt-logo-light { display: none; }
[data-theme="dark"] .tt-logo-dark { display: inline-block; }

/* ---------- Sidebar ---------- */
.tt-sidebar {
    background: var(--tt-primary-dark) !important;
    min-height: 100vh;
    color: #E9EFEC;
    --bs-offcanvas-bg: var(--tt-primary-dark);
    --bs-offcanvas-color: #E9EFEC;
}
.tt-sidebar .nav-link {
    color: #C7D6D1 !important;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: var(--tt-radius);
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.15rem;
}
.tt-sidebar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.06); }
.tt-sidebar .nav-link.active { color: var(--tt-primary-dark) !important; background: var(--tt-accent) !important; }
.tt-sidebar .nav-section-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #7C9A92 !important;
    padding: 0.9rem 0.9rem 0.3rem;
}
/* Verschachtelte Untergruppen innerhalb einer Sektion, z. B. "Mitarbeiter"
   mit darunter eingerückten "Zeiten bearbeiten", "AZG-Kontrolle" usw. */
.tt-sidebar .nav-sub-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #C7D6D1 !important;
    padding: 0.35rem 0.9rem 0.1rem 1.3rem;
    opacity: 0.75;
}
.tt-sidebar .nav-sub-item .nav-link {
    padding-left: 2.1rem;
    font-size: 0.86rem;
}

/* ---------- Cards / Surfaces ---------- */
.tt-card {
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
}
.tt-kpi .tt-kpi-value {
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 2rem;
    color: var(--tt-primary);
}
.tt-kpi .tt-kpi-label {
    color: var(--tt-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--tt-primary);
    border-color: var(--tt-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--tt-primary-dark);
    border-color: var(--tt-primary-dark);
}
.btn-accent {
    background: var(--tt-accent);
    border-color: var(--tt-accent);
    color: #2A1B04;
    font-weight: 700;
}
.btn-accent:hover { background: var(--tt-accent-dark); border-color: var(--tt-accent-dark); color: #fff; }

/* ---------- Signature: Stempel-Button (mobile Zeiterfassung) ---------- */
.tt-stamp-btn {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 35% 30%, var(--tt-accent), var(--tt-accent-dark));
    color: #2A1B04;
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 1.3rem;
    box-shadow: 0 10px 30px rgba(201, 127, 31, 0.35), inset 0 -6px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tt-stamp-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 14px rgba(201, 127, 31, 0.3), inset 0 -3px 8px rgba(0,0,0,0.16);
}
.tt-stamp-btn .tt-stamp-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.2rem; }
.tt-stamp-btn:disabled {
    background: #E7E4D9;
    color: #9A9484;
    box-shadow: none;
    cursor: not-allowed;
}
.tt-stamp-ring {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 2px dashed rgba(27, 75, 67, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Login ---------- */
.tt-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
}
.tt-login-card {
    background: linear-gradient(160deg, var(--tt-primary-dark) 0%, var(--tt-primary) 55%, var(--tt-primary-light) 100%);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    max-width: 420px;
    width: 100%;
}
.tt-login-card .form-label,
.tt-login-card .text-muted {
    color: rgba(255,255,255,0.75) !important;
}
.tt-login-card .form-control {
    background: rgba(255,255,255,0.96);
    border: none;
}
.tt-login-card .btn-primary {
    background: var(--tt-accent);
    border-color: var(--tt-accent);
    color: #2A1B04;
    font-weight: 700;
}
.tt-login-card .btn-primary:hover {
    background: var(--tt-accent-dark);
    border-color: var(--tt-accent-dark);
    color: #fff;
}
.tt-login-card .btn-link {
    color: rgba(255,255,255,0.85);
}

/* ---------- Installer ---------- */
.tt-install-wrap {
    min-height: 100vh;
    background: var(--tt-bg);
    padding: 2rem 1rem;
}
.tt-install-steps {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}
.tt-install-steps .step {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--tt-border);
}
.tt-install-steps .step.done { background: var(--tt-primary); }
.tt-install-steps .step.current { background: var(--tt-accent); }

.tt-req-ok { color: var(--tt-success); }
.tt-req-fail { color: var(--tt-danger); }

@media (max-width: 767.98px) {
    .tt-stamp-btn { width: 160px; height: 160px; font-size: 1.1rem; }
    .tt-stamp-ring { width: 178px; height: 178px; }
}

/* ============================================================
   Dark Mode – aktiviert über [data-theme="dark"] auf <html>,
   umgeschaltet per Toggle in der Navbar (siehe app.js), Zustand
   wird in localStorage gemerkt (rein optisch, keine sensible Daten)
   ============================================================ */
[data-theme="dark"] {
    --tt-bg: #14181A;
    --tt-surface: #1E2225;
    --tt-text: #E8EAE7;
    --tt-text-muted: #9AA39D;
    --tt-border: #333937;
    --tt-success-bg: #1B2E14;
    --tt-danger-bg: #331915;
    --tt-warning-bg: #332A14;
    /* Helle Varianten der Markenfarben -- die Basis-Farben (--tt-primary,
       --tt-success, --tt-danger) sind auf gute Lesbarkeit auf WEISSEM
       Hintergrund abgestimmt und werden im Dark Mode auf dunklem
       Hintergrund kaum lesbar. Da praktisch der gesamte Code (auch
       Inline-Styles wie style="color: var(--tt-success)") dieselben
       Variablen referenziert, reicht die Neudefinition hier aus, um das
       überall gleichzeitig zu beheben, ohne jede Stelle einzeln zu ändern. */
    /* Markenfarben im Dark Mode: Primär/Sekundär bewusst umgekehrt zum Light
       Mode (siehe :root) -- exakte Vorgabe, auch wenn --tt-primary dadurch
       auf dunklem Kartenhintergrund einen Kontrast von nur ~1.7 hat (WCAG-
       Zielwert 4.5). Bewusst so gewünscht; --tt-success/--tt-danger bleiben
       trotzdem aufgehellt, da dort kein Gestaltungswunsch entgegensteht. */
    --tt-primary: #384180;
    --tt-primary-dark: #2C3466;
    --tt-primary-light: #5F6799;
    --tt-accent: #8E7BB8;
    --tt-accent-dark: #78689C;
    --tt-success: #7FD858;
    --tt-danger: #F0776A;
    --bs-primary-rgb: 56, 65, 128;
}
[data-theme="dark"] body { background: var(--tt-bg); color: var(--tt-text); }
[data-theme="dark"] .tt-card { background: var(--tt-surface); border-color: var(--tt-border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background: var(--tt-surface);
    color: var(--tt-text);
    border-color: var(--tt-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--tt-surface);
    color: var(--tt-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--tt-text-muted); }
[data-theme="dark"] .table { color: var(--tt-text); border-color: var(--tt-border); }
[data-theme="dark"] .table > :not(caption) > * > * { background: var(--tt-surface); color: var(--tt-text); border-color: var(--tt-border); }
[data-theme="dark"] .modal-content { background: var(--tt-surface); color: var(--tt-text); }
[data-theme="dark"] .dropdown-menu { background: var(--tt-surface); color: var(--tt-text); border-color: var(--tt-border); }
[data-theme="dark"] .dropdown-item { color: var(--tt-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--tt-bg); color: var(--tt-text); }
[data-theme="dark"] .dropdown-item-text { color: var(--tt-text-muted); }
[data-theme="dark"] .text-dark { color: var(--tt-text) !important; }
[data-theme="dark"] .text-muted { color: var(--tt-text-muted) !important; }
[data-theme="dark"] .bg-light { background: var(--tt-surface) !important; }
[data-theme="dark"] .border { border-color: var(--tt-border) !important; }
[data-theme="dark"] .btn-outline-secondary { color: var(--tt-text); border-color: var(--tt-border); }
[data-theme="dark"] .badge.text-bg-light {
    background-color: var(--tt-surface) !important;
    color: var(--tt-text) !important;
    border-color: var(--tt-border) !important;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); }
[data-theme="dark"] .tt-login-wrap { background: #0F1214; }
[data-theme="dark"] a { color: var(--tt-accent); }
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .toast {
    background-color: var(--tt-surface) !important;
    color: var(--tt-text) !important;
    border-color: var(--tt-border) !important;
}
[data-theme="dark"] .accordion-button::after { filter: invert(1); }
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] label {
    color: var(--tt-text) !important;
}
[data-theme="dark"] .form-text { color: var(--tt-text-muted) !important; }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--tt-text-muted); border-color: var(--tt-border); }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--tt-text) !important; background-color: var(--tt-surface) !important; border-color: var(--tt-border) !important; }
[data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: var(--tt-text-muted); }
[data-theme="dark"] .list-group-item-action:hover { background-color: var(--tt-bg) !important; }

/* ---------- Theme-Toggle (Pillen-Schalter mit gleitendem Kreis) ---------- */
.tt-theme-switch {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.18);
    cursor: pointer;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    transition: background 0.25s ease;
    flex-shrink: 0;
}
.tt-theme-switch:hover { background: rgba(255,255,255,0.28); }
.tt-theme-switch-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: var(--tt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transform: translateX(0);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
[data-theme="dark"] .tt-theme-switch { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .tt-theme-switch-knob {
    transform: translateX(24px);
    background: var(--tt-accent);
    color: #2A1B04;
}

/* ---------- Tageskarten-Liste (Zeiten bearbeiten) ---------- */
.tt-day-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tt-day-card {
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    padding: 0.85rem 1rem;
}
.tt-day-card.tt-day-muted { opacity: 0.6; }
.tt-day-card.tt-day-holiday { background: var(--tt-info-bg, #E6F2FB); border-color: #BFE0F5; }
.tt-day-card.tt-day-vacation { background: var(--tt-warning-bg); border-color: #F0DCA6; }
[data-theme="dark"] .tt-day-card.tt-day-holiday { background: #14262E; border-color: #1E3A47; }
[data-theme="dark"] .tt-day-card.tt-day-vacation { background: #332A14; border-color: #4A3D1E; }

.tt-day-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.tt-day-card-date { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tt-day-card-hours { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; }

.tt-day-card-body { display: flex; flex-direction: column; gap: 0.4rem; }
.tt-booking-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tt-booking-row select.form-select-sm { flex: 1 1 130px; min-width: 110px; }
.tt-booking-row input[type="time"] { flex: 0 1 110px; min-width: 95px; }
.tt-booking-row input[type="text"] { flex: 2 1 140px; min-width: 100px; }
.tt-booking-row .dn-remove { flex: 0 0 auto; }

.tt-day-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .tt-day-card { padding: 0.75rem 0.8rem; }
    .tt-booking-row select.form-select-sm,
    .tt-booking-row input[type="time"],
    .tt-booking-row input[type="text"] { flex: 1 1 100%; }
    .tt-day-card-foot { flex-direction: row-reverse; }
}