/* ============================================================
   hq.marinacapital.hu - sötét, adatvezérelt felület.
   Nincs külső betűtípus és nincs inline stílus (szigorú CSP).
   ============================================================ */
:root{
  --bg:#0b0d10; --panel:#12151a; --panel2:#171b22; --panel3:#1d222b;
  --line:#232a34; --line2:#2e3744;
  --txt:#dfe4ec; --muted:#8b95a5; --dim:#5f6b7c;
  --acc:#4da3ff; --acc-dim:#1c3d5c;
  --pos:#2ecc71; --neg:#ff5c5c; --warn:#ffb020; --neutral:#7f8ea3;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --row:28px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.45 var(--sans);-webkit-text-size-adjust:100%}

/* A fordítás előtti villanás elkerülése. Ha a JS elszállna, 3 másodperc után
   az animáció mindenképp megmutatja a tartalmat. */
@keyframes i18n-reveal{to{visibility:visible}}
html.i18n-pending main{visibility:hidden;animation:i18n-reveal 0s 3s forwards}
.noscript{background:var(--warn);color:#1a1200;margin:0;padding:10px 14px;font-weight:600;text-align:center}

a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button{font:inherit;cursor:pointer}

/* ---------------------------------------------------------- fejléc ------ */
.topbar{display:flex;align-items:center;gap:18px;padding:0 14px;height:48px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand{font:600 14px var(--mono);letter-spacing:.06em;color:var(--txt);white-space:nowrap}
.brand span{color:var(--acc)}
.mainnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.navlink{padding:6px 11px;border-radius:4px;color:var(--muted);font-size:13px;white-space:nowrap}
.navlink:hover{background:var(--panel2);color:var(--txt);text-decoration:none}
.navlink.active{background:var(--panel3);color:var(--txt);box-shadow:inset 0 -2px 0 var(--acc)}
.topright{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.lang-btn{background:transparent;border:0;color:var(--muted);font:11px/1 var(--mono);letter-spacing:.06em;padding:6px 8px}
.lang-btn.active{background:var(--acc);color:#03121f}
.logout{font-size:12px}

/* ---------------------------------------------------------- tartalom ---- */
.view{padding:14px;max-width:1600px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px}
.card+.card{margin-top:12px}
.placeholder{color:var(--muted)}
h2{font-size:13px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* számok: monospace, jobbra igazítva, előjellel */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pos{color:var(--pos)} .neg{color:var(--neg)} .flat{color:var(--neutral)}
.nodata{color:var(--dim);font-style:italic}

/* gombok */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--acc);color:#03121f;border:1px solid var(--acc);border-radius:4px;font-weight:600;font-size:13px}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--acc)}
.btn.subtle{background:var(--panel2);border-color:var(--line2);color:var(--txt);font-weight:500}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* űrlapok */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;padding:7px 9px;background:var(--panel2);color:var(--txt);border:1px solid var(--line2);border-radius:4px;font:14px var(--sans)}
input[type=number],input[type=datetime-local],input[type=date]{font-family:var(--mono)}
textarea{min-height:80px;resize:vertical}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
.check input{width:auto}

/* ---------------------------------------------------------- login ------- */
.login-page{display:flex;min-height:100%;}
.login-wrap{margin:auto;padding:24px 16px;width:100%;max-width:380px}
.login-card{display:flex;flex-direction:column;gap:4px}
.login-card .brand{font-size:15px;margin:0 0 14px;text-align:center}
.login-card label{margin-top:10px}
.login-card .btn{margin-top:18px;justify-content:center}
.login-card .check{margin-top:12px}
.err{background:rgba(255,92,92,.1);border:1px solid var(--neg);color:var(--neg);border-radius:4px;padding:8px 10px;font-size:13px;margin:0 0 10px}
.login-wrap .lang-switch{margin:14px auto 0;width:max-content}

/* ---------------------------------------------------------- toast ------- */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel3);border:1px solid var(--line2);border-radius:5px;padding:9px 14px;font-size:13px;z-index:100;max-width:90vw}
.toast.err{border-color:var(--neg);color:var(--neg)}

@media (max-width:760px){
  .topbar{gap:10px;padding:0 10px}
  .brand{font-size:12px}
  .view{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:-1ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   Modulok: napló, backteszt, dashboard
   ============================================================ */

/* ------------------------------------------------------- alap segédek --- */
.pad{padding:14px}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hidden-input{display:none}
.danger-text{color:var(--neg)}
.btn.danger{background:var(--neg);border-color:var(--neg);color:#210606}
.btn.small{padding:4px 9px;font-size:12px}
.btn.off{opacity:.6}
.hint{color:var(--dim);font-size:12px;margin:4px 0 0}
.err{color:var(--neg)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.sec-head h2,.sec-head h3{margin:0}
h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}

.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.view-head h1{font-size:17px;margin:0;letter-spacing:.01em}
.head-acts{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------------------------------------------------- szűrősáv ---- */
.filter-card{padding:10px 12px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.f-item{display:flex;flex-direction:column;gap:3px;min-width:130px}
.f-item.wide{flex:1;min-width:220px}
.f-item label{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.quick-range{display:flex;gap:4px;flex-wrap:wrap}

.summary{display:flex;gap:18px;flex-wrap:wrap;padding:8px 2px;font-size:13px;color:var(--muted)}
.sum-item{display:inline-flex;align-items:baseline;gap:5px}
.sum-item strong{color:var(--txt);font-family:var(--mono)}

/* ------------------------------------------------------------ táblák ---- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-card{padding:0;overflow:hidden}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th,.data-table td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.data-table th{position:sticky;top:48px;z-index:5;background:var(--panel2);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.data-table th.right,.data-table td.right{text-align:right}
.data-table th.center,.data-table td.center{text-align:center}
.data-table tbody tr{cursor:pointer}
.data-table tbody tr:hover{background:var(--panel2)}
.data-table tbody tr:focus-visible{background:var(--panel3)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tr.is-open td{background:rgba(255,176,32,.05)}

.tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-family:var(--mono);border:1px solid var(--line2);color:var(--muted)}
.tag.long{color:var(--pos);border-color:rgba(46,204,113,.4)}
.tag.short{color:var(--neg);border-color:rgba(255,92,92,.4)}
.tag.res-win{color:var(--pos);border-color:rgba(46,204,113,.4)}
.tag.res-loss{color:var(--neg);border-color:rgba(255,92,92,.4)}
.tag.res-be{color:var(--neutral)}
.tag.ok{color:var(--pos);border-color:rgba(46,204,113,.4)}
.tag.bad{color:var(--warn);border-color:rgba(255,176,32,.4)}
.tag.open{color:var(--warn);border-color:rgba(255,176,32,.4);margin-left:6px}

/* ---------------------------------------------------------------- KPI --- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.kpi.ghost{background:transparent;border-style:dashed;justify-content:center}
.kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi-v{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi-n{font-size:11px;color:var(--dim);font-family:var(--mono)}

/* ----------------------------------------------------------- insights --- */
.insights{margin-bottom:12px}
.insight-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.insight-list li{padding:8px 10px;background:var(--panel2);border-left:2px solid var(--acc);border-radius:0 4px 4px 0;font-size:13.5px;line-height:1.5}
.insight-list .sample{color:var(--dim);font-family:var(--mono);font-size:12px;white-space:nowrap}

/* ---------------------------------------------------------- diagramok --- */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.chart-card{padding:12px}
.chart-card.tall{grid-column:1/-1}
.canvas-wrap{position:relative;height:210px}
.chart-card.tall .canvas-wrap{height:260px}
.center-msg{display:flex;align-items:center;justify-content:center;height:100%;margin:0;font-size:13px}
.note-inline{font-size:11px;color:var(--warn);font-family:var(--mono)}
.seg{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.seg-btn{background:transparent;border:0;color:var(--muted);font:11px/1 var(--mono);padding:5px 9px}
.seg-btn.active{background:var(--acc);color:#03121f}

/* hőtérkép */
.heat{display:grid;grid-template-columns:auto repeat(6,1fr);gap:3px;align-items:stretch}
.heat-corner{}
.heat-h{font:10px var(--mono);color:var(--muted);text-align:center;padding-bottom:2px}
.heat-d{font:11px var(--mono);color:var(--muted);display:flex;align-items:center;padding-right:6px}
.heat-c{min-height:26px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;font:10px var(--mono);color:var(--txt)}
.heat-c.empty{opacity:.35}

/* ---------------------------------------------------------------- modal - */
body.modal-open{overflow:hidden}
.backdrop{position:fixed;inset:0;background:rgba(4,6,9,.72);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:8px;width:100%;max-width:460px;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal.wide{max-width:880px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:14px;text-transform:none;letter-spacing:0;color:var(--txt)}
.modal-body{padding:14px;max-height:calc(100vh - 200px);overflow-y:auto}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.icon-btn{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:4px;padding:3px 7px;font-size:13px}
.icon-btn:hover{background:var(--panel3);color:var(--txt)}
.confirm-msg{margin:0;line-height:1.55}

/* --------------------------------------------------------------- űrlap -- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 12px}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field.span2{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;background:var(--panel2);border:1px solid var(--line2);border-radius:99px;font-size:12px;color:var(--txt);margin:0;cursor:pointer}
.chip input{width:auto;margin:0}
.derived-wrap{margin-top:14px}
.derived-box{display:flex;gap:18px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:9px 12px}
.stat{display:flex;flex-direction:column;gap:1px}
.stat-l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat-v{font-size:14px}

/* --------------------------------------------------------------- képek -- */
.img-panel{margin-top:16px}
.img-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.thumb-wrap{position:relative}
.thumb{padding:0;border:1px solid var(--line2);border-radius:4px;overflow:hidden;background:var(--panel2);display:block;line-height:0}
.thumb img{width:104px;height:74px;object-fit:cover;display:block}
.thumb-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background:var(--panel3);color:var(--muted);font-size:11px;line-height:1;padding:0}
.thumb-del:hover{color:var(--neg);border-color:var(--neg)}
.dropzone{border:1px dashed var(--line2);border-radius:5px;padding:14px;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer}
.dropzone.over{border-color:var(--acc);color:var(--acc);background:rgba(77,163,255,.06)}
.lightbox{display:flex;align-items:center;gap:8px}
.lb-main{flex:1;min-width:0;text-align:center}
.lightbox-img{max-width:100%;max-height:70vh;border-radius:4px}
.lb-nav{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:4px;padding:14px 9px;font-size:18px;line-height:1}

/* --------------------------------------------------------- oszlopkezelő - */
.col-manager h3{margin-top:18px}
.col-list{display:flex;flex-direction:column;gap:4px}
.col-row{display:grid;grid-template-columns:20px minmax(150px,1fr) 130px auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:6px 8px}
.col-row.dragging{opacity:.4}
.col-row.drop-target{border-color:var(--acc)}
.col-row.deleted{grid-template-columns:1fr auto auto}
.grip{cursor:grab;color:var(--dim);text-align:center;user-select:none}
.col-labels{display:flex;gap:6px;min-width:0}
.col-labels input{min-width:0}
.col-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.col-add-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:10px}
.col-deleted{display:flex;flex-direction:column;gap:4px}

/* ------------------------------------------------------------- listák --- */
.list-box{margin-bottom:20px}
.list-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.list-row input{flex:1;min-width:120px}
.list-row.inactive input{opacity:.55}
.list-row.new{border-top:1px dashed var(--line2);padding-top:9px;margin-top:9px}

/* ----------------------------------------------------------- backteszt -- */
.sheet-tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.sheet-tab{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:5px 5px 0 0;color:var(--muted);padding:6px 12px;font-size:13px}
.sheet-tab.active{background:var(--panel3);color:var(--txt);border-bottom-color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc)}
.badge{font:10px var(--mono);background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:0 5px;color:var(--muted)}
.bt-toolbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.grid-card{padding:0;overflow:hidden}
.grid-scroll{max-height:calc(100vh - 300px)}
.grid-table{border-collapse:separate;border-spacing:0;font-size:13px;width:100%}
.grid-table th{position:sticky;top:0;z-index:6;background:var(--panel2);border-bottom:1px solid var(--line2);border-right:1px solid var(--line);padding:0;text-align:left;font-weight:600}
.grid-table th.rownum,.grid-table td.rownum{width:44px;min-width:44px;text-align:right;color:var(--dim);padding-right:8px;background:var(--panel2);position:sticky;left:0;z-index:4}
.grid-table th.rownum{z-index:7}
.grid-table th.rowact,.grid-table td.rowact{width:64px;text-align:center;white-space:nowrap}
.th-btn{width:100%;text-align:left;background:transparent;border:0;color:var(--muted);font:600 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:7px 9px}
.th-btn:hover{color:var(--txt)}
.grid-table th{position:relative}
.rs{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize}
.rs:hover{background:var(--acc)}
.grid-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:5px 9px;white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.grid-table td.cell{cursor:cell}
.grid-table td.cell:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.grid-table td.cell.editing{padding:0;overflow:visible}
.grid-table td.cell.editing input,.grid-table td.cell.editing select{border-radius:0;border-color:var(--acc);height:100%;background:var(--panel3)}
.grid-table tbody tr:hover td{background:rgba(255,255,255,.015)}

/* -------------------------------------------------------------- mobil --- */
@media (max-width:760px){
  .view-head h1{font-size:15px}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .kpi-v{font-size:15px}
  .chart-grid{grid-template-columns:1fr}
  .canvas-wrap{height:190px}
  .data-table th{top:48px}
  .modal-body{max-height:calc(100vh - 170px)}
  .col-row{grid-template-columns:16px 1fr;grid-auto-rows:auto}
  .col-labels{flex-direction:column}
  .heat-h{font-size:9px}
  .grid-scroll{max-height:none}
}

/* menücsoport a fejlécben */
.navgroup{font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-right:4px;white-space:nowrap}
.navsep{width:1px;height:18px;background:var(--line2);margin:0 6px;display:inline-block}
@media (max-width:760px){.navgroup{display:none}}
button.navlink{background:transparent;border:0;font:inherit;font-size:13px;cursor:pointer}