/* ============================================================
   ACCOUNTANT — Onboarding / Súgó bemutató (dependency-free tour)
   ============================================================ */

.ob-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: transparent;
    opacity: 0;
    transition: opacity .25s ease, background .25s ease;
}
.ob-backdrop.ob-show { opacity: 1; }
.ob-backdrop.ob-dim { background: rgba(15, 23, 42, .72); }

/* A kiemelő "reflektor" — a box-shadow elhomályosítja a környezetet,
   a doboz belseje (a kijelölt elem) tiszta marad. */
.ob-spotlight {
    position: fixed;
    z-index: 20001;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .72),
                0 0 0 3px rgba(124, 58, 237, .95),
                0 0 26px 7px rgba(99, 102, 241, .55);
    transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
                width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1);
}

.ob-tooltip {
    position: fixed;
    z-index: 20002;
    width: min(370px, calc(100vw - 28px));
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, .16);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .45);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, top .25s ease, left .25s ease;
}
.ob-tooltip.ob-show { opacity: 1; transform: translateY(0); }

.ob-tooltip__bar { height: 5px; background: linear-gradient(90deg, #7c3aed, #6366f1 55%, #0ea5e9); }

.ob-x {
    position: absolute;
    top: 12px; right: 12px;
    width: 26px; height: 26px;
    border: none; border-radius: 8px;
    background: rgba(148, 163, 184, .15);
    color: #64748b;
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.ob-x:hover { background: rgba(239, 68, 68, .14); color: #ef4444; }

.ob-tooltip__body { padding: 20px 20px 6px; }
.ob-tooltip__icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; font-size: 1.15rem;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}
.ob-tooltip__title { font-size: 1.08rem; font-weight: 700; margin: 0 0 7px; letter-spacing: -.01em; }
.ob-tooltip__text { font-size: .875rem; line-height: 1.55; color: #475569; margin: 0; }
.ob-tooltip__text ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.ob-tooltip__text li { margin-bottom: .2rem; }
.ob-tooltip__text strong { color: #334155; }

.ob-dots { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 20px 0; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; transition: all .2s; }
.ob-dot--active { background: linear-gradient(135deg, #7c3aed, #2563eb); transform: scale(1.3); }
.ob-dot--done { background: #a5b4fc; }

.ob-tooltip__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 16px; gap: 10px;
}
.ob-step-count { font-size: .76rem; color: #94a3b8; font-weight: 600; }
.ob-actions { display: flex; gap: 8px; }
.ob-btn {
    border: none; border-radius: 9px;
    padding: .45rem .9rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.ob-btn--ghost { background: #f1f5f9; color: #475569; }
.ob-btn--ghost:hover { background: #e2e8f0; }
.ob-btn--primary { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
.ob-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Lebegő súgó gomb (jobb alsó sarok) */
.ob-fab {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 1500;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; font-size: 1.3rem;
    box-shadow: 0 10px 26px rgba(99, 102, 241, .45);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ob-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 32px rgba(99, 102, 241, .55); }

@media (max-width: 768px) {
    .ob-fab { right: 14px; bottom: 70px; width: 44px; height: 44px; font-size: 1.15rem; }
}

/* ============================================================
   Lebegő radiális gyorsmenü (jobb alsó sarok)
   A hamburger gomb köré nyílik ki: AI chat, súgó, hibabejelentő.
   ============================================================ */
.fab-hub {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 1500;
    width: 56px; height: 56px;
}
/* Nyitva (hover az asztali gépen, vagy .open kattintásra) a hub akkora hit-területté
   nő, ami az egész ívet lefedi — így a kurzor a hamburgertől a gombokig úgy ér el,
   hogy közben nem lép ki a hover-zónából, és a menü nem csukódik be. */
.fab-hub:hover, .fab-hub.open { width: 152px; height: 152px; }

/* Az eredeti lebegő AI chat gomb helyett a hub vezérli az AI chatet */
#ai-chat-toggle { display: none !important; }

.fab-hub-main {
    position: absolute;
    right: 0; bottom: 0;
    z-index: 2;
    width: 56px; height: 56px;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    box-shadow: 0 10px 26px rgba(99, 102, 241, .45);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.fab-hub-main:hover { box-shadow: 0 14px 32px rgba(99, 102, 241, .55); }
.fab-hub.open .fab-hub-main { transform: rotate(90deg); }

.fab-hub-icon { position: absolute; font-size: 1.4rem; transition: opacity .18s ease, transform .18s ease; }
.fab-hub-icon--close { opacity: 0; transform: scale(.4); }
.fab-hub.open .fab-hub-icon--open { opacity: 0; transform: scale(.4); }
.fab-hub.open .fab-hub-icon--close { opacity: 1; transform: scale(1); }

.fab-hub-items { position: absolute; inset: 0; z-index: 1; }

.fab-item {
    position: absolute;
    right: 5px; bottom: 5px;   /* a fő gomb középpontjában indul, onnan animál ki */
    width: 46px; height: 46px;
    border: none; border-radius: 50%;
    color: #fff; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    opacity: 0;
    transform: scale(.3);
    pointer-events: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    transition-delay: calc((3 - var(--fab-i, 1)) * .04s);
}
.fab-item--ai   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.fab-item--help { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.fab-item--bug  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.fab-item:hover { filter: brightness(1.08); }

/* Megnyitva (hover asztali gépen, vagy .open kattintásra) — ívben szétnyílik felfelé és balra */
.fab-hub:hover .fab-item,
.fab-hub.open  .fab-item {
    opacity: 1;
    pointer-events: auto;
    transition-delay: calc((var(--fab-i, 1) - 1) * .04s);
}
.fab-hub:hover .fab-item--ai,
.fab-hub.open  .fab-item--ai   { transform: translate(0, -80px) scale(1); }
.fab-hub:hover .fab-item--help,
.fab-hub.open  .fab-item--help { transform: translate(-57px, -57px) scale(1); }
.fab-hub:hover .fab-item--bug,
.fab-hub.open  .fab-item--bug  { transform: translate(-80px, 0) scale(1); }

@media (max-width: 768px) {
    .fab-hub { right: 16px; bottom: 76px; }
}

/* Súgó modal extra stílus */
.help-card {
    border: 1px solid rgba(124, 58, 237, .14);
    border-radius: 14px;
    padding: 16px;
    height: 100%;
    background: #fff;
    transition: all .2s;
}
.help-card:hover { border-color: rgba(124, 58, 237, .35); box-shadow: 0 8px 22px rgba(99, 102, 241, .12); }
.help-card__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff; margin-bottom: 10px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}
.help-card h6 { font-weight: 700; margin-bottom: 6px; }
.help-card p { font-size: .83rem; color: #64748b; margin: 0; }

/* A tailwind.css '.collapse{visibility:collapse}' utility-je ütközik a Bootstrap
   accordion/collapse '.collapse' osztályával: a kinyitott elem a végén eltűnt.
   Itt visszaállítjuk a láthatóságot a megnyitott Bootstrap collapse-eknek. */
.collapse.show,
.accordion-collapse.show,
.collapsing { visibility: visible !important; }

/* Kattintható témaválasztó kártya a Súgóban */
.help-card--btn { cursor: pointer; text-align: left; width: 100%; position: relative; }
.help-card--btn:hover { transform: translateY(-2px); }
.help-card--btn .help-card__play {
    position: absolute; top: 12px; right: 12px;
    font-size: .72rem; font-weight: 700; color: #7c3aed;
    display: inline-flex; align-items: center; gap: 4px;
}

/* ============================================================
   Képes (screenshot) bemutató — fix oldalsó leírópanel + nyíl
   ============================================================ */
.obi-overlay {
    position: fixed; inset: 0;
    z-index: 20050;
    display: none;
    background: rgba(15, 23, 42, .35);
}
.obi-overlay.ob-show { display: flex; flex-direction: row; }

/* Bal oldal: a képernyőkép */
.obi-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 3vh 1.2vw;
}
.obi-img {
    display: block;
    max-width: 100%; max-height: 90vh;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

/* Jobb oldal: a FIX helyen maradó leírópanel */
.obi-panel {
    flex: 0 0 390px;
    max-width: 42vw;
    display: flex; align-items: center;
    padding: 3vh 22px 3vh 0;
}

.obi-spot {
    position: fixed;
    z-index: 20051;
    pointer-events: none;
    border-radius: 8px;
    opacity: 0;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .80),
                0 0 0 3px rgba(124, 58, 237, .95),
                0 0 22px 6px rgba(99, 102, 241, .6);
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

/* A nyíl a paneltől a kiemelt régióig */
.obi-arrow {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 20052;
    pointer-events: none;
}
.obi-arrow-path {
    fill: none;
    stroke: #c4b5fd;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 6px rgba(99, 102, 241, .55));
}

.obi-tip {
    position: relative;
    z-index: 20053;
    width: 100%;
    background: #fff; color: #1e293b;
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, .16);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .5);
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.obi-tip.ob-show { opacity: 1; transform: translateY(0); }
.obi-tip__body { padding: 16px 20px 6px; }
.obi-tip__imgtitle {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #7c3aed; margin-bottom: 6px;
}

.obi-close {
    position: fixed;
    top: 16px; right: 18px;
    z-index: 20054;
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff; font-size: 1.45rem; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.obi-close:hover { background: rgba(255, 255, 255, .3); }

/* Keskeny képernyőn a panel alulra kerül */
@media (max-width: 900px) {
    .obi-overlay.ob-show { flex-direction: column; }
    .obi-stage { flex: 1 1 auto; padding: 2vh 12px 1vh; }
    .obi-img { max-height: 56vh; }
    .obi-panel { flex: 0 0 auto; max-width: none; width: 100%; padding: 0 12px 2vh; align-items: flex-start; }
}