/* WM-Tippspiel 2026 – Custom Styles (Smartline CI) */

/* ─── Layout ──────────────────────────────────── */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}
main {
    flex: 1;
}

/* ─── Navbar ──────────────────────────────────── */

.navbar {
    border-bottom: 3px solid var(--accent);
}
.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.navbar .nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.navbar .nav-link:hover {
    color: var(--accent) !important;
}

/* ─── Cards ───────────────────────────────────── */

.card {
    border-radius: 10px;
    border-color: #cbd5c6;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 70, 57, .08) !important;
}
.card-header {
    background: var(--primary);
    color: #fff;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
}

/* ─── Buttons ─────────────────────────────────── */

.btn-primary,
.btn[style*="background: var(--primary)"] {
    border: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.15s;
}
.btn[style*="background: var(--primary)"]:hover {
    opacity: 1;
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.btn-outline-secondary {
    border-color: #cbd5c6;
    color: var(--text);
}
.btn-outline-secondary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ─── Tables ──────────────────────────────────── */

.table-dark {
    --bs-table-bg: var(--primary);
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255,255,255,.15);
}
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(1, 70, 57, .04);
}
.table-warning {
    --bs-table-bg: rgba(169, 183, 162, .15);
    --bs-table-border-color: #cbd5c6;
}

/* ─── Badges ──────────────────────────────────── */

.badge.bg-success {
    background: var(--primary) !important;
}
.badge.bg-secondary {
    background: #848f7f !important;
}
.badge.bg-primary {
    background: var(--primary) !important;
}

/* ─── Flash-Messages ──────────────────────────── */

.alert {
    border-radius: 8px;
}
.alert-success {
    background: rgba(1, 70, 57, .08);
    border-color: var(--accent);
    color: var(--primary);
}
.alert-info {
    background: rgba(169, 183, 162, .15);
    border-color: #cbd5c6;
    color: var(--text);
}

/* ─── Tipp-Inputs ─────────────────────────────── */

.tipp-input {
    width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    border-color: #cbd5c6;
}
.tipp-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(1, 70, 57, .15);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(1, 70, 57, .15);
}

/* ─── Rangliste ───────────────────────────────── */

.rank-up { color: var(--primary); }
.rank-down { color: #b83232; }
.rank-same { color: #848f7f; }

/* ─── Countdown ───────────────────────────────── */

#countdown {
    font-variant-numeric: tabular-nums;
}
#countdown .fs-2 {
    color: var(--primary);
}

/* ─── Footer ──────────────────────────────────── */

footer {
    border-top: 3px solid var(--accent);
}
footer a {
    transition: color 0.2s;
}
footer a:hover {
    color: var(--accent) !important;
}

/* ─── Profil-Avatar ───────────────────────────── */

.card-body .fs-1 {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading);
}

/* ─── Nav Pills (Spielplan) ───────────────────── */

.nav-pills .nav-link {
    color: var(--text);
    font-weight: 500;
    border-radius: 8px;
}
.nav-pills .nav-link.active {
    background: var(--primary);
    color: #fff;
}

/* ─── Pagination ──────────────────────────────── */

.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}
.page-link {
    color: var(--primary);
}
.page-link:hover {
    color: var(--secondary);
}

/* ─── Punktevergabe-Karten (Home) ─────────────── */

.card .fs-3[style*="--primary"],
.card .fs-4[style*="--primary"] {
    font-family: var(--font-heading);
}

/* ─── Responsive ──────────────────────────────── */

@media (max-width: 576px) {
    .tipp-input {
        width: 40px;
        font-size: 1rem;
    }
    h1, .h3 {
        font-size: 1.4rem;
    }
}

/* ─── Reduced Motion ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .nav-link,
    footer a {
        transition: none !important;
    }
    a.card:hover {
        transform: none;
    }
}