/* ============================================================================
   EIflexi — zdieľané UI komponenty. Načítané PO theme.css (smie ho dolaďovať)
   aj po Tabler ikonách. Cieľ: jednotné tlačidlá / modal / toast / badge /
   ikony naprieč shellom a stránkami (koniec per-stránka duplicity).
   ============================================================================ */

/* ---- Ikony (Tabler webfont) ---- */
.ti { vertical-align: -0.125em; line-height: 1; }
.btn .ti, button .ti { margin-right: 0.4rem; }
.btn-icon .ti, .icon-only .ti { margin: 0; }

/* ============================================================================
   Tlačidlá — hierarchia. theme.css definuje button/.btn = PRIMARY (navy pill).
   Tu pridávame: secondary (outline pill), ghost (bez okraja), icon-only, sm.
   ============================================================================ */
.btn-primary { /* alias pre čitateľnosť v šablónach */
    background: var(--accent); color: var(--accent-text);
    border: 1px solid var(--accent); border-radius: var(--radius-pill);
}
.btn-outline {
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent); border-radius: var(--radius-pill);
}
.btn-outline:hover { background: var(--accent-soft); border-color: var(--accent-hover); color: var(--accent-hover); }

.btn-ghost {
    background: transparent; color: var(--text-soft);
    border: 1px solid transparent; border-radius: var(--radius);
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; font-size: 1.1rem;
    background: transparent; color: var(--text-dim);
    border: 1px solid transparent; border-radius: var(--radius);
}
.btn-icon:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn-icon.danger { background: transparent; color: var(--err); border-color: transparent; }
.btn-icon.danger:hover { background: var(--err-soft); color: var(--err-hover); }

.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
.btn-icon.btn-sm { width: 30px; height: 30px; font-size: 1rem; }

/* ============================================================================
   Badge / chip
   ============================================================================ */
.eif-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.55rem;
    border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
}
.eif-badge.ok   { background: var(--ok-soft);   color: var(--ok-ink); }
.eif-badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.eif-badge.err  { background: var(--err-soft);  color: var(--err-ink); }
.eif-badge.gold { background: var(--gold-soft); color: var(--gold); }

/* ============================================================================
   Modal (zdieľaný) — eifConfirm / eifPrompt / vlastné dialógy
   ============================================================================ */
.eif-modal-bg {
    position: fixed; inset: 0; background: rgba(10, 13, 30, 0.45); z-index: 1000;
    display: none; align-items: flex-start; justify-content: center;
    /* na nízkych displejoch musí byť dialóg doscrollovateľný, inak sú tlačidlá pod okrajom */
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 0 0 2rem;
}
.eif-modal-bg.show { display: flex; }
.eif-modal {
    background: var(--panel); margin-top: 12vh; margin-bottom: 2rem; width: min(440px, 94vw);
    border-radius: 14px; border: 1px solid var(--border); border-top: 3px solid var(--gold-bronze);
    box-shadow: 0 18px 50px rgba(10, 13, 30, 0.28); overflow: hidden;
    animation: eifModalIn 0.16s ease;
}
@keyframes eifModalIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.eif-modal-h { display: flex; align-items: center; gap: 0.55rem; padding: 1.05rem 1.25rem 0.4rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.eif-modal-h .ti { color: var(--accent); font-size: 1.25rem; }
.eif-modal-h.danger .ti { color: var(--err); }
.eif-modal-b { padding: 0.2rem 1.25rem 1rem; color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; }
.eif-modal-b input { margin-top: 0.7rem; }
.eif-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.2rem 1.25rem 1.15rem; }

/* ============================================================================
   Toast
   ============================================================================ */
.eif-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: flex; flex-direction: column; gap: 0.5rem; }
.eif-toast {
    display: flex; align-items: center; gap: 0.55rem; min-width: 220px; max-width: 360px;
    padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    box-shadow: 0 8px 24px rgba(10, 13, 30, 0.16); font-size: 0.88rem;
    transition: opacity 0.2s, transform 0.2s; animation: eifToastIn 0.18s ease;
}
.eif-toast .ti { font-size: 1.15rem; color: var(--accent); }
.eif-toast.ok  { border-left-color: var(--ok); }  .eif-toast.ok .ti  { color: var(--ok); }
.eif-toast.err { border-left-color: var(--err); } .eif-toast.err .ti { color: var(--err); }
@keyframes eifToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ============================================================================
   Mobilné doladenie zdieľaných komponentov (audit 2026-08-17)
   ============================================================================ */
/* Ikona v tabe nesmie byť cieľom kliknutia — showTab() v nástrojoch používa
   event.target, takže tap na ikonu pridal .active ikone a nie tabu (žiaden tab
   sa netváril ako aktívny). Ikona je dekoratívna, preto ju vyradíme z hit-testu. */
.tabs .tab > .ti, .tabs .tab > i { pointer-events: none; }

@media (max-width: 640px) {
    .eif-modal { margin-top: 6vh; width: min(440px, 96vw); }
    .eif-modal-actions button { min-height: 38px; }
    /* toast: kontajner mal len right:18px → na 320 px sa roztiahol až k ľavému okraju */
    .eif-toasts { left: 12px; right: 12px; bottom: 12px; }
    .eif-toast { max-width: 100%; min-width: 0; }
}