/* =============================================================
   evidence-os.css — a SAJÁT stílusréteg (stack-dok. 9. pont)
   -------------------------------------------------------------
   Ez az EGYETLEN hely, ahol saját stílus élhet. A vendor (Tabler)
   CSS-hez soha nem nyúlunk; itt csak:
     1) a márkaszínek rákötése a Tabler --tblr-* változóira,
     2) az alkalmazás-héj három oszlopa (oldalsáv / tartalom / AI),
     3) a néhány, Tablerben nem létező apróság (haladás-gyűrű,
        chat-buborék, gépelésjelző, szekció-kiemelés).
   A nyitóoldal saját stílusa külön fájlban él (landing.css).
   ============================================================= */

/* ---------- 1) MÁRKA: zöld, mint korábban (theme.css öröksége) ---------- */
:root {
  --tblr-primary: #16a34a;
  --tblr-primary-rgb: 22, 163, 74;
  --tblr-primary-darken: #0f8a3e;
  --tblr-green: #16a34a;
  --tblr-green-rgb: 22, 163, 74;
  --tblr-link-color: #0f8a3e;
  --tblr-link-color-rgb: 15, 138, 62;
  --tblr-body-font-size: 1rem;
  /* az oldalsáv mélyzöldje (a korábbi --side/--side2) */
  --eos-side: #0e2a1c;
  --eos-side-2: #123522;
  --eos-side-line: #20402c;
}

body.app-body { background: #eef3ee; }

/* ---------- 2) ALKALMAZÁS-HÉJ ---------- */
.app-page { display: flex; flex-direction: column; height: 100vh; }
.app-topbar { flex: 0 0 auto; background: var(--eos-side) !important; }
.app-topbrand { font-size: 1.05rem; letter-spacing: .2px; }

.app-columns { display: flex; flex: 1 1 auto; min-height: 0; }

/* — oldalsáv — */
.app-side {
  flex: 0 0 320px; width: 320px; max-width: 320px;
  background: linear-gradient(180deg, var(--eos-side), var(--eos-side-2)) !important;
  border-right: 1px solid var(--eos-side-line);
  padding: 0; overflow: hidden;
}
.app-side-in { display: flex; flex-direction: column; height: 100%; width: 100%; }
.app-side-brand { display: flex; align-items: center; padding: 1rem; margin: 0; }
.app-side-brand h1 { color: #fff; }
.app-side-progress {
  display: flex; gap: .75rem; align-items: center;
  margin: 0 1rem .75rem; padding: .75rem;
  border: 1px solid var(--eos-side-line); border-radius: var(--tblr-border-radius);
  background: rgba(255, 255, 255, .04); color: #c8d3e0;
}
.app-side-link { color: var(--tblr-green); cursor: pointer; font-size: .85rem; }
.app-side-search { padding: 0 1rem .5rem; }
.app-search-right { left: auto; right: 0; display: flex; align-items: center; gap: .25rem; pointer-events: auto; }
.app-search-right kbd { background: rgba(255,255,255,.12); color: #c8d3e0; border-radius: 4px; padding: 1px 6px; font-size: .7rem; }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: 0 .75rem 1rem; }
.app-mod { margin-bottom: .35rem; }
.app-mod-h {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; color: #c8d3e0; padding: .5rem .35rem;
  border-radius: var(--tblr-border-radius); text-align: left; cursor: pointer;
}
.app-mod-h:hover { background: rgba(255, 255, 255, .06); }
.app-mod-t { flex: 1 1 auto; min-width: 0; }
.app-mod-t b { display: block; color: #fff; font-size: .92rem; }
.app-mod-t span { display: block; color: #6b7c93; font-size: .78rem; }
.app-chev { transition: transform .15s; display: inline-flex; }
.app-mod:not(.closed) .app-chev { transform: rotate(90deg); }
.app-mod-bar { margin: 0 .35rem .25rem; background: rgba(255, 255, 255, .08); }
.app-mod.closed .app-les, .app-mod.closed .app-mod-bar { display: none; }
.app-les { margin: 0; padding: 0 0 .25rem; }
.app-les-item {
  display: flex; gap: .5rem; align-items: flex-start; width: 100%;
  padding: .45rem .35rem; border-radius: var(--tblr-border-radius);
  color: #c8d3e0; text-decoration: none; font-size: .86rem;
}
.app-les-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-les-item.active { background: rgba(22, 163, 74, .25); color: #fff; }
.app-dot { flex: 0 0 auto; margin-top: .2rem; position: relative; }
.app-dot .ti { font-size: .7rem; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.app-les-t { min-width: 0; }
.app-les-c { display: block; color: #6b7c93; font-size: .74rem; font-family: var(--tblr-font-monospace); }
.app-les-s { display: block; color: #6b7c93; font-size: .74rem; }
.app-side-results { display: none; overflow-y: auto; padding: 0 .75rem 1rem; }
.app-side.is-searching .app-nav { display: none; }
.app-side.is-searching .app-side-results { display: block; flex: 1 1 auto; }

/* keresési találatok */
.app-res-head { color: #6b7c93; font-size: .78rem; margin: .25rem .25rem .5rem; }
.app-res {
  display: block; width: 100%; text-align: left; padding: .5rem;
  border: 1px solid var(--eos-side-line); border-radius: var(--tblr-border-radius);
  background: rgba(255, 255, 255, .04); margin-bottom: .5rem; color: #c8d3e0;
  text-decoration: none;
}
.app-res:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.app-res-h { display: flex; gap: .5rem; align-items: center; margin-bottom: .15rem; }
.app-res-t { display: block; font-weight: 600; color: #fff; font-size: .85rem; }
.app-res-snip { display: block; font-size: .78rem; color: #9fb0c3; }
.app-res-snip mark { background: rgba(22, 163, 74, .4); color: #fff; padding: 0 2px; border-radius: 3px; }
.app-res-empty { color: #9fb0c3; font-size: .85rem; padding: .5rem; }

/* haladás-gyűrű (Tablerben nincs ilyen elem — saját, a --p változóval) */
.app-ring {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(closest-side, var(--eos-side) 79%, transparent 80% 100%),
    conic-gradient(var(--tblr-green) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .14) 0);
  display: flex; align-items: center; justify-content: center;
}
.app-ring i { font-style: normal; font-weight: 700; color: #fff; font-size: .8rem; }

/* — fő oszlop — */
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-mainbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; flex: 0 0 auto; }
.app-tabs .nav-link { cursor: pointer; }
.app-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.app-content { max-width: 980px; padding-top: 1.25rem; padding-bottom: 3rem; }
.app-lhead { margin-bottom: 1rem; }
.app-lmeta .ti { opacity: .7; }

/* szekciók: színes állapotcsík + számozás (Tabler card-status-start + avatar) */
.app-sec .card-header { align-items: center; }
.app-sec-n { background: var(--tblr-green-lt, rgba(22,163,74,.15)); color: var(--tblr-green); font-weight: 700; }
.app-sec-goal .card-status-start { background: var(--tblr-green); }
.app-sec-background .card-status-start { background: var(--tblr-azure); }
.app-sec-prerequisites .card-status-start { background: var(--tblr-indigo); }
.app-sec-steps .card-status-start { background: var(--tblr-primary); }
.app-sec-mistakes .card-status-start { background: var(--tblr-red); }
.app-sec-tips .card-status-start { background: var(--tblr-yellow); }
.app-sec-practice .card-status-start { background: var(--tblr-purple); }
.app-sec-self_check .card-status-start { background: var(--tblr-teal); }
@keyframes app-flash-kf { 0% { box-shadow: 0 0 0 4px rgba(22,163,74,.45); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.app-flash { animation: app-flash-kf 1.4s ease-out 1; }

/* kvíz opciók */
.app-opt { cursor: pointer; }
.app-opt-mk { width: 1.25rem; display: inline-flex; justify-content: center; color: var(--tblr-green); }
.app-opt-l { flex: 0 0 auto; }
.app-opt-sel { background: var(--tblr-green-lt, rgba(22,163,74,.12)); border-inline-start: 3px solid var(--tblr-green); }
.app-opt-correct { background: var(--tblr-success-lt, rgba(47,179,68,.12)); }
.app-opt-correct .app-opt-mk { color: var(--tblr-success, #2fb344); }
.app-opt-wrong { background: var(--tblr-danger-lt, rgba(214,57,57,.12)); }
.app-opt-wrong .app-opt-mk { color: var(--tblr-danger, #d63939); }
button.app-opt[disabled] { cursor: default; opacity: 1; }

/* — AI-panel — */
.app-ai {
  flex: 0 0 380px; width: 380px; margin: .75rem; margin-left: 0;
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.app-ai-h { display: flex; align-items: center; padding: .6rem .75rem; flex: 0 0 auto; }
.app-ai-ctx { padding: .5rem .75rem; font-size: .82rem; border-bottom: 1px solid var(--tblr-border-color); flex: 0 0 auto; }
.app-chat { flex: 1 1 auto; overflow-y: auto; padding: .75rem; min-height: 0; }
.app-msg { border-radius: 12px; padding: .55rem .7rem; margin-bottom: .6rem; max-width: 92%; font-size: .875rem; }
.app-msg.u { background: var(--tblr-primary); color: #fff; margin-left: auto; }
.app-msg.a { background: var(--tblr-bg-surface-secondary, #f3f5f7); border: 1px solid var(--tblr-border-color); }
.app-msg.sys { background: var(--tblr-green-lt, rgba(22,163,74,.1)); border: 1px dashed var(--tblr-green); }
.app-msg.a blockquote { border-left: 3px solid var(--tblr-green); margin: .4rem 0; padding: .1rem .6rem; color: var(--tblr-secondary); }
.app-chat-ill img { max-width: 70%; }
.app-srcs { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.app-src {
  display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem;
  border: 1px solid var(--tblr-border-color); border-radius: 8px;
  background: #fff; text-decoration: none; color: inherit; font-size: .8rem;
}
.app-src:hover { border-color: var(--tblr-green); }
.app-fb { margin-top: .5rem; }
.app-chips { padding: .5rem .75rem; display: flex; flex-wrap: wrap; gap: .35rem; flex: 0 0 auto; border-top: 1px solid var(--tblr-border-color); }
.app-ai-in { padding: .5rem; flex: 0 0 auto; }
.app-ai-in textarea { resize: none; max-height: 120px; }

/* gépelésjelző (htmx-indicator: kérés közben látszik) */
.app-typing { display: none; gap: 5px; padding: .25rem .9rem; flex: 0 0 auto; }
.app-typing.htmx-request { display: flex; }
.app-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tblr-green);
  animation: app-typing-kf 1s infinite;
}
.app-typing i:nth-child(2) { animation-delay: .16s; }
.app-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes app-typing-kf { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* előzmények-panel (az AI-panelre borul) */
.app-hist { position: absolute; inset: 0; background: var(--tblr-bg-surface, #fff); display: flex; flex-direction: column; border-radius: inherit; z-index: 5; }
.app-hist-list { flex: 1 1 auto; overflow-y: auto; padding: 0 .5rem .5rem; }
.app-hist-item { border: 1px solid var(--tblr-border-color); border-radius: 8px; padding: .35rem; margin-bottom: .4rem; }
.app-hist-main { background: none; border: 0; min-width: 0; cursor: pointer; }

/* oszlop-összecsukás */
#app.side-closed .app-side { display: none; }
#app.ai-closed .app-ai { display: none; }
.app-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; display: none; }
#app.ai-closed ~ .app-fab, #app.ai-closed .app-fab { display: inline-flex; }
body:has(#app.ai-closed) .app-fab { display: inline-flex; }

/* mobil: oldalsáv rácsúszó, sötétítő réteggel */
.app-scrim { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 40; }
@media (max-width: 991px) {
  .app-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .app-side { transform: none; }
  body.nav-open .app-scrim { display: block; }
  #app.side-closed .app-side { display: flex; }
}
@media (max-width: 1179px) {
  .app-ai { position: fixed; right: 0; top: 0; bottom: 0; z-index: 45; margin: 0; border-radius: 0; width: min(380px, 92vw); }
}

/* gomb-állapot (gencard): tétlen/elfoglalt felirat */
.when-busy { display: none; }
.htmx-request .when-idle, .htmx-request.when-idle { display: none; }
.htmx-request .when-busy, .htmx-request.when-busy { display: inline; }
@keyframes app-spin-kf { to { transform: rotate(360deg); } }
.app-spin { display: inline-block; animation: app-spin-kf .8s linear infinite; }

/* fájl-dobózóna: a láthatatlan input lefedi a kártyát */
.app-drop { position: relative; border: 2px dashed var(--tblr-border-color); }
.app-drop.over { border-color: var(--tblr-green); background: var(--tblr-green-lt, rgba(22,163,74,.08)); }
.app-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* csevegés-figyelmeztetés */
.app-chatwarn { font-size: .82rem; }

/* ---------- NYITÓOLDAL: modálok a #gate rétege fölött ----------
   A landing.css a #gate-et fix, z-index:99999 rétegként jeleníti meg.
   A Bootstrap modal alapból 1055 -> a gate MÖGÉ kerülne (láthatatlan).
   Ezért a nyitóoldalon a modalt és a hátteret a gate fölé emeljük. */
body.lp-body .modal { z-index: 100055; }
body.lp-body .modal-backdrop { z-index: 100050; }

/* ================================================================
   v4 — ÉLÉNKÍTŐ RÉTEG az alkalmazás-felületen (mértékkel)
   ================================================================ */

/* textúrás, finoman színezett háttér a homogén szürkészöld helyett */
body.app-body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(1000px 560px at 4% 0%,rgba(22,163,74,.07),transparent 60%),
  radial-gradient(820px 520px at 100% 34%,rgba(45,212,191,.055),transparent 62%),
  #eef3ee}

/* fejléc alatti finoman vándorló fény-csík */
.app-topbar{position:relative}
.app-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#16a34a,#2dd4bf,#a3e635,#16a34a);
  background-size:280% 100%;animation:eos-shimmer 10s linear infinite;opacity:.9}
@keyframes eos-shimmer{to{background-position:280% 0}}

/* oldalsáv: halvány pöttyminta + mélységi fény */
.app-side{background:
  radial-gradient(circle at 100% 0%,rgba(74,222,128,.10),transparent 46%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"),
  linear-gradient(180deg, var(--eos-side), var(--eos-side-2)) !important}

/* haladás-gyűrű: lágy derengés */
.app-ring{filter:drop-shadow(0 0 9px rgba(74,222,128,.35))}

/* tananyag-szekciók: finom emelkedés hoverre */
.app-sec{transition:box-shadow .2s}
.app-sec:hover{box-shadow:0 12px 34px -20px rgba(13,51,32,.4)}

/* számonkérés-CTA kártya: enyhe zöld derengésű keret */
.app-cta{border:1px solid rgba(22,163,74,.28);
  background:linear-gradient(135deg,#ffffff,#f2faf5)}

@media (prefers-reduced-motion: reduce){
  .app-topbar::after{animation:none}
}

/* ================================================================
   v4c — SZELLŐSEBB ALKALMAZÁS + oldalankénti apró élmények
   ================================================================ */

/* nagyobb levegő a tartalomban */
.app-content{padding-top:2.2rem;padding-bottom:4.5rem;max-width:960px}
.app-lhead{margin-bottom:1.75rem}
.app-sec{margin-bottom:1.35rem}
.app-sec .card-body{padding:1.4rem 1.5rem}
.app-cta .card-body{padding:1.4rem 1.5rem}
.app-mainbar{padding:.65rem 1rem}
.app-overview .row-cards{margin-bottom:.75rem}
.app-quiz .card{margin-bottom:1.25rem}

/* — belépő animáció: a fő tartalom elemei finoman felúsznak (minden nézet) — */
@keyframes eos-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#main-content > * > *{animation:eos-rise .45s cubic-bezier(.2,.7,.2,1) both}
#main-content > * > *:nth-child(2){animation-delay:.05s}
#main-content > * > *:nth-child(3){animation-delay:.1s}
#main-content > * > *:nth-child(4){animation-delay:.15s}
#main-content > * > *:nth-child(5){animation-delay:.2s}
#main-content > * > *:nth-child(6){animation-delay:.25s}
#main-content > * > *:nth-child(7){animation-delay:.3s}
#main-content > * > *:nth-child(8){animation-delay:.35s}
#main-content > * > *:nth-child(n+9){animation-delay:.4s}

/* — Haladás: a sávok kinőnek, a számok felpörögnek (számláló az adapterben) — */
@keyframes eos-grow{from{transform:scaleX(0)}}
.app-overview .progress-bar{transform-origin:left;animation:eos-grow .9s .2s cubic-bezier(.2,.7,.2,1) both}

/* — Kvíz: finom nyomás-visszajelzés + konfetti a sikerhez (adapter szórja) — */
.app-opt:not([disabled]):active{transform:scale(.995)}
.eos-confetti{position:absolute;width:8px;height:12px;border-radius:2px;pointer-events:none;
  animation:eos-fall linear both}
@keyframes eos-fall{
  from{transform:translateY(-10px) rotate(0)}
  to{transform:translateY(46vh) rotate(660deg);opacity:0}}

/* — Feltöltés: hívogatóan ringatózó felhő-ikon, dobásnál pulzáló keret — */
@keyframes eos-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.app-drop .avatar{animation:eos-bob 3.2s ease-in-out infinite}
@keyframes eos-ring{0%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}100%{box-shadow:0 0 0 14px rgba(22,163,74,0)}}
.app-drop.over{animation:eos-ring 1s ease-out infinite}

/* — AI-panel: az üzenetek felúsznak, a szikra-ikon időnként megcsillan — */
@keyframes eos-msg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.app-msg{animation:eos-msg .28s ease-out both}
@keyframes eos-twinkle{0%,88%,100%{transform:scale(1);filter:none}94%{transform:scale(1.18);filter:drop-shadow(0 0 6px rgba(74,222,128,.8))}}
.app-ai-h .avatar .ti{display:inline-block;animation:eos-twinkle 5s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  #main-content > * > *,.app-msg,.app-overview .progress-bar{animation:none}
  .app-drop .avatar,.app-drop.over,.app-ai-h .avatar .ti{animation:none}
}

/* ================================================================
   v6 — az alkalmazás-oldalak gazdagítása (statikus finomságok)
   ================================================================ */
.app-content{padding-top:2.8rem;padding-bottom:5rem}
.app-lhead{margin-bottom:2rem}
.app-lhead .page-title{font-size:1.9rem;letter-spacing:-.01em}
.app-sec{margin-bottom:1.6rem;border-radius:14px}
.app-sec .card-body{padding:1.6rem 1.7rem}
.app-sec .card-header{background:linear-gradient(90deg,rgba(22,163,74,.07),transparent 60%)}
.app-sec-n{background:linear-gradient(135deg,#16a34a,#2dd4bf);color:#fff}
.app-cta{border-radius:14px}
.app-quiz .h1{font-size:2.6rem}
.app-quiz .card{border-radius:14px}
.app-overview .card-sm .card-body{background:linear-gradient(180deg,#ffffff,#f4fbf6);
  border-radius:inherit}
.app-drop{padding:2.2rem 1.6rem}
.app-msg.u{background:linear-gradient(135deg,#16a34a,#0f8a3e)}
.app-les-item.active{box-shadow:inset 3px 0 0 var(--tblr-green)}