/* ═══ Znovupoužiteľné komponenty ═══ */

/* ── Karta ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
}
.card--hero {
    border-radius: var(--r-xl);
    padding: 22px;
    background: linear-gradient(140deg,#141B24,#10161D);
    box-shadow: var(--shadow-card);
}
.card__title {
    font-family: var(--font-head);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-2);
    margin-bottom: 14px;
}

/* ── Tlačidlá ── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-weight: 700; font-size: 13.5px;
    cursor: pointer;
    background: var(--surface-3);
    color: var(--text);
    transition: background .12s, border-color .12s;
    min-height: 40px;
}
.btn:hover { background: #26313d; }
.btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--success { background: var(--success); color: #04180D; font-weight: 800; }
.btn--info    { background: var(--info); color: #02121F; font-weight: 800; }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--ghost   { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-2); }
.btn--outline-accent { background: #151C25; border-color: rgba(245,130,43,.4); color: var(--accent); }
.btn--sm { padding: 6px 12px; min-height: 32px; font-size: 12.5px; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Badge / pilulka stavu ── */
.badge {
    display: inline-block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 9px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.badge--success { background: var(--tint-success); color: var(--success); }
.badge--warning { background: var(--tint-warning); color: var(--warning); }
.badge--danger  { background: var(--tint-danger);  color: var(--danger); }
.badge--info    { background: var(--tint-info);    color: var(--info); }
.badge--accent  { background: var(--tint-accent);  color: var(--accent); }
.badge--muted   { background: var(--surface-3);    color: var(--text-dim); }

/* ── Progress bar ── */
.progress { height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent-grad); border-radius: var(--r-pill); }

/* ── Tabuľky ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.table { min-width: 640px; }
.table thead th {
    background: var(--surface-2);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
    text-align: left;
    padding: 12px 18px;
}
.table tbody td { padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.table tbody tr:hover { background: var(--surface-2); }
.table .u-right { text-align: right; }

/* ── Formuláre ── */
.field { display: block; margin-bottom: 14px; }
.field__label {
    display: block; margin-bottom: 6px;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 600;
}
.input, .select, .textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--r-md);
    background: var(--input-bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 13.5px;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; }
.field__error { color: var(--danger); font-size: 11.5px; margin-top: 4px; }

/* ── Chipy (filtre) ── */
.chip {
    display: inline-block;
    padding: 6px 14px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 700;
    background: #151C25; color: var(--text-2);
    border: 1px solid var(--border-strong);
    cursor: pointer;
}
.chip--active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ── Flash / toast ── */
.flash {
    padding: 12px 16px; border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    margin-bottom: 16px; font-size: 13px;
}
.flash--success { background: var(--tint-success); border-color: rgba(47,191,113,.4); }
.flash--error   { background: var(--tint-danger);  border-color: rgba(239,68,68,.4); }
.flash--info    { background: var(--tint-info);    border-color: rgba(59,155,240,.4); }

#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
    padding: 12px 16px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card); font-size: 13px; max-width: 340px;
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }

/* ── Modál ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(4,7,11,.7); backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.modal {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-modal);
    width: 100%; max-width: 440px;
}
.modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
}
.modal__title { font-family: var(--font-head); font-size: 21px; letter-spacing: .05em; }
.modal__close {
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: var(--surface-3); border: none; color: var(--text-2);
    font-size: 18px; cursor: pointer;
}
.modal__body { padding: 18px; }
.modal__foot { display: flex; gap: 10px; padding: 0 18px 18px; }

/* ── Prázdny stav ── */
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }