/* ============================================================
   BURGI GARDEN — Components
   ============================================================ */

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
    text-decoration: none; transition: all var(--transition-normal);
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn-primary { background: var(--accent-emerald); color: var(--bg-deepest); }
.btn-primary:hover { background: var(--accent-emerald-hover); box-shadow: var(--glow-emerald); transform: translateY(-1px); }
.btn-secondary { background: transparent; border-color: var(--accent-emerald); color: var(--accent-emerald); }
.btn-secondary:hover { background: rgba(16, 185, 129, 0.10); }
.btn-ghost { background: transparent; border-color: var(--glass-border); color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); border-color: rgba(16,185,129,0.4); }
.btn-gold { background: var(--accent-gold); color: var(--bg-deepest); }
.btn-gold:hover { background: var(--accent-gold-hover); box-shadow: var(--glow-gold); }
.btn-sm { padding: 4px 10px; font-size: var(--font-size-xs); }

/* ── Forms ── */
input[type="text"], input[type="number"], input[type="date"], input[type="file"], select, textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent-emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
input[type="date"] { color-scheme: dark; }
label { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Badges / Pills ── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: var(--radius-pill);
    font-size: var(--font-size-xs); font-weight: 600;
}
.badge-emerald { background: rgba(16,185,129,0.15); color: var(--accent-emerald); }
.badge-gold    { background: rgba(224,179,65,0.15); color: var(--accent-gold); }
.badge-bloom   { background: rgba(255,111,181,0.15); color: var(--accent-bloom); }
.badge-sky     { background: rgba(56,189,248,0.15); color: var(--accent-sky); }
.badge-muted   { background: rgba(110,138,121,0.15); color: var(--text-secondary); }

/* Health pills */
.health-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: var(--font-size-xs); font-weight: 600;
}
.health-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.health-Výborné, .health-Dobré { background: rgba(16,185,129,0.15); color: var(--accent-emerald); }
.health-Výborné::before, .health-Dobré::before { background: var(--accent-emerald); box-shadow: var(--glow-emerald); }
.health-Oslabené { background: rgba(224,179,65,0.15); color: var(--accent-gold); }
.health-Oslabené::before { background: var(--accent-gold); }
.health-Nemocné { background: rgba(224,122,95,0.18); color: var(--accent-clay); }
.health-Nemocné::before { background: var(--accent-clay); }
.health-Uhynulé { background: rgba(110,138,121,0.15); color: var(--text-muted); }
.health-Uhynulé::before { background: var(--text-muted); }
.health-Neznámé { background: rgba(110,138,121,0.12); color: var(--text-muted); }
.health-Neznámé::before { background: var(--text-muted); }

/* ── Tables ── */
.table-container {
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th {
    background: var(--bg-elevated); text-align: left; padding: 10px 14px;
    font-size: var(--font-size-xs); font-weight: 600; color: var(--accent-emerald);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--glass-border);
}
td { padding: 10px 14px; color: var(--text-secondary); border-bottom: 1px solid rgba(16,185,129,0.06); }
tbody tr:hover { background: rgba(16,185,129,0.04); }
tr:last-child td { border-bottom: none; }

/* ── Chart card ── */
.chart-card {
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
    padding: var(--space-lg); margin-bottom: var(--space-lg);
}
.chart-card h3 {
    font-size: var(--font-size-sm); font-weight: 700; margin-bottom: var(--space-md);
    display: flex; align-items: center; gap: var(--space-sm); color: var(--text-primary);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.chart-card h3 .material-symbols-outlined { color: var(--accent-sky); font-size: 20px; }
.chart-wrap { position: relative; height: 300px; }

/* ── Empty state ── */
.empty-state {
    text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--text-muted);
}
.empty-state .material-symbols-outlined { font-size: 48px; color: var(--accent-emerald); opacity: 0.6; }
.empty-state h3 { color: var(--text-secondary); margin: var(--space-md) 0 var(--space-sm); font-weight: 600; }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn var(--transition-slow) ease; }