/* =============================================================
   FitTrack – style.css
   Modernes Fitness-Dashboard auf Basis von Bootstrap 5.3
   ============================================================= */

:root {
    --ft-accent:        #10b981;   /* Emerald */
    --ft-accent-2:      #06b6d4;   /* Cyan    */
    --ft-accent-rgb:    16, 185, 129;
    --ft-radius:        16px;
    --ft-radius-sm:     12px;
}

/* ---------- Light ---------- */
[data-bs-theme="light"] {
    --ft-bg:          #f4f6fb;
    --ft-card:        #ffffff;
    --ft-card-border: #e6e9f0;
    --ft-muted:       #6b7280;
    --bs-body-bg:     var(--ft-bg);
}

/* ---------- Dark ("Modern Tech") ---------- */
[data-bs-theme="dark"] {
    --ft-bg:          #0d1117;
    --ft-card:        #161b22;
    --ft-card-border: #232b36;
    --ft-muted:       #8b95a5;
    --bs-body-bg:     var(--ft-bg);
    --bs-border-color: var(--ft-card-border);
}

body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(var(--ft-accent-rgb), .10), transparent 60%),
        var(--ft-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }

/* ---------- Navbar ---------- */
.ft-navbar {
    background: var(--ft-card);
    border-bottom: 1px solid var(--ft-card-border);
    backdrop-filter: blur(8px);
}
.ft-logo {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ft-accent), var(--ft-accent-2));
    color: #fff; font-size: 1.05rem;
}
.navbar-brand { color: var(--bs-body-color) !important; }
.ft-navbar .nav-link { border-radius: 10px; padding: .45rem .8rem; color: var(--ft-muted); }
.ft-navbar .nav-link:hover { color: var(--bs-body-color); }
.ft-navbar .nav-link.active {
    color: var(--bs-body-color);
    background: rgba(var(--ft-accent-rgb), .14);
}

/* ---------- Cards ---------- */
.card {
    background: var(--ft-card);
    border: 1px solid var(--ft-card-border);
    border-radius: var(--ft-radius);
}
.card-header { background: transparent; border-bottom: 1px solid var(--ft-card-border); font-weight: 600; }

/* ---------- Stat-Kacheln ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
    background: linear-gradient(135deg, var(--ft-accent), var(--ft-accent-2));
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: var(--ft-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

.stat-icon.bg-blue   { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.stat-icon.bg-orange { background: linear-gradient(135deg,#f59e0b,#f97316); }
.stat-icon.bg-pink   { background: linear-gradient(135deg,#ec4899,#8b5cf6); }
.stat-icon.bg-teal   { background: linear-gradient(135deg,#10b981,#06b6d4); }

/* ---------- Buttons ---------- */
.btn-accent {
    background: linear-gradient(135deg, var(--ft-accent), var(--ft-accent-2));
    border: none; color: #fff;
}
.btn-accent:hover { color: #fff; filter: brightness(1.07); }

/* ---------- Auth-Seite ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
    background: linear-gradient(135deg, var(--ft-accent), var(--ft-accent-2));
}

/* ---------- Tabellen ---------- */
.table { --bs-table-bg: transparent; }

/* ---------- Footer ---------- */
.ft-footer { color: var(--ft-muted); border-top: 1px solid var(--ft-card-border); flex-shrink: 0; }

/* ---------- Badges Intensitaet ---------- */
.badge-leicht { background:#22c55e22; color:#22c55e; }
.badge-mittel { background:#f59e0b22; color:#f59e0b; }
.badge-schwer { background:#ef444422; color:#ef4444; }

/* ---------- Diverse ---------- */
.text-muted-2 { color: var(--ft-muted) !important; }
.cursor-pointer { cursor: pointer; }
canvas { max-width: 100%; }