/* ============================================================
   ZeitFluss – 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: #1B4B43;
    --tt-primary-dark: #103430;
    --tt-primary-light: #2E6B60;
    --tt-accent: #E8A33D;
    --tt-accent-dark: #C97F1F;
    --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: 27, 75, 67;
    --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);
}

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); }

/* ---------- Sidebar ---------- */
.tt-sidebar {
    background: var(--tt-primary-dark);
    min-height: 100vh;
    color: #E9EFEC;
}
.tt-sidebar .nav-link {
    color: #C7D6D1;
    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; background: rgba(255,255,255,0.06); }
.tt-sidebar .nav-link.active { color: var(--tt-primary-dark); background: var(--tt-accent); }
.tt-sidebar .nav-section-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #7C9A92;
    padding: 0.9rem 0.9rem 0.3rem;
}

/* ---------- 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; }
}