/* ============================================================
   CityEvents – Custom CSS
   Bootstrap Dark/Light Theme + eigene Anpassungen
   ============================================================ */

/* ── Dark Mode Variablen ─────────────────────────────────────── */
[data-bs-theme="dark"] {
    --accent:      #ff6b35;
    --accent-dim:  rgba(255, 107, 53, 0.15);
    --accent-glow: rgba(255, 107, 53, 0.3);
    --bg:          #0d0d0f;
    --bg-card:     #141418;
    --bg-card-hover: #1a1a20;
    --border:      rgba(255,255,255,0.08);
    --text-sub:    #888;
}
 
/* ── Light Mode Variablen ────────────────────────────────────── */
[data-bs-theme="light"] {
    --accent:      #e85d20;
    --accent-dim:  rgba(232, 93, 32, 0.1);
    --accent-glow: rgba(232, 93, 32, 0.2);
    --bg:          #f5f0eb;
    --bg-card:     #ffffff;
    --bg-card-hover: #fdf8f4;
    --border:      rgba(0,0,0,0.09);
    --text-sub:    #555;
}

/* ── Basis ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg) !important;
    transition: background-color 0.2s, color 0.2s;
}

/* ── Navbar ──────────────────────────────────────────────────── */
[data-bs-theme="dark"] .navbar {
    background: rgba(13,13,15,0.88) !important;
    border-bottom: 1px solid var(--border);
}
[data-bs-theme="light"] .navbar {
    background: rgba(245,240,235,0.92) !important;
    border-bottom: 1px solid var(--border);
}
.navbar { backdrop-filter: blur(12px); }
.navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: var(--accent) !important; }
.nav-link { color: var(--text-sub) !important; }
.nav-link:hover { color: var(--accent) !important; }
.nav-link.admin-link { color: var(--accent) !important; font-weight: 600; }

/* ── Theme Toggle Button ─────────────────────────────────────── */
#theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 0.25rem 0.65rem;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-sub);
    transition: border-color 0.2s, color 0.2s;
    line-height: 1.4;
}
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Accent Button ───────────────────────────────────────────── */
.btn-accent {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
}
.btn-accent:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.event-card:hover {
    border-color: rgba(255,107,53,0.45) !important;
    box-shadow: 0 0 28px var(--accent-glow) !important;
    transform: translateY(-3px);
    text-decoration: none;
}

.event-card-img { height: 180px; object-fit: cover; }
.event-placeholder {
    height: 180px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
}
[data-bs-theme="dark"] .event-placeholder { background: linear-gradient(135deg,#1a1a22,#222230); color:#444; }
[data-bs-theme="light"] .event-placeholder { background: linear-gradient(135deg,#ede8e2,#e0d9d0); color:#aaa; }

/* ── Formulare ───────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim) !important;
}

/* ── Tabellen ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .table { color: #888 !important; }

/* ── Admin Sidebar ───────────────────────────────────────────── */
.admin-sidebar .nav-link { border-radius: 6px; font-size: 0.88rem; }
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
}

/* ── Karte ───────────────────────────────────────────────────── */
#map { height: 280px; border-radius: 0.375rem; }

/* ── Kommentare ──────────────────────────────────────────────── */
.comment {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.comment-author { color: var(--accent); font-size: 0.8rem; font-weight: 600; }
.comment-date   { color: var(--text-sub); font-size: 0.75rem; }
.comment-text   { color: var(--text-sub); font-size: 0.88rem; }

/* ── Badge Kategorie ─────────────────────────────────────────── */
.badge-category {
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
}

/* ── Footer ──────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); font-size: 0.82rem; }

/* ── Leer-Zustand ────────────────────────────────────────────── */
.empty-state { padding: 4rem 2rem; text-align: center; color: var(--text-sub); }

/* ── Einblend-Animation ──────────────────────────────────────── */
.event-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease,
                border-color 0.25s, box-shadow 0.25s;
}
.event-card.visible { opacity: 1; transform: translateY(0); }