/* 02-mysql-workbench - oldalspecifikus stilusok:
   Workbench-mockup, kapcsolat-lepegeto (stepper), lekerdezes-futtato (query runner).
   A szinek a kozos stiluslap (assets/style.css) valtozoibol jonnek,
   igy a vilagos temaban is olvashatok. */

/* ---------- Workbench mockup ---------- */
.wb{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card-in); user-select:none; font-size:.8rem;}
.wb-menu{background:var(--code-bg); padding:6px 10px; display:flex; gap:16px; color:#94a3b8; border-bottom:1px solid var(--line);}
.wb-tool{background:var(--panel3); padding:7px 10px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line);}
.wb-tbtn{min-width:26px; height:24px; padding:0 4px; border-radius:5px; background:var(--panel2);
         border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.9rem;}
.wb-limit{margin-left:6px; border:1px solid var(--line); border-radius:5px; padding:3px 8px;
          font-size:.7rem; color:var(--muted); background:var(--panel2); white-space:nowrap;}
.wb-lbl{margin-left:auto; color:var(--muted);}
.wb-body{display:grid; grid-template-columns:170px 1fr 150px; grid-template-rows:auto 1fr; min-height:300px;}
.wb-zone{padding:10px; cursor:pointer; transition:.15s; border:2px solid transparent; position:relative;}
.wb-zone:hover{background:rgba(56,189,248,.12);}
.wb-zone.active{border-color:var(--accent); background:rgba(56,189,248,.16);}
:root[data-theme="light"] .wb-zone:hover{background:rgba(3,105,161,.08);}
:root[data-theme="light"] .wb-zone.active{background:rgba(3,105,161,.12);}
.wb-zone strong{color:var(--ink-strong);}
.wb-nav{grid-column:1; grid-row:1 / span 2; background:var(--panel3); border-right:1px solid var(--line);}
.wb-nav .grp{color:var(--accent2); font-weight:700; margin:8px 0 4px; font-size:.78rem;}
.wb-nav .it{padding:2px 0 2px 14px; color:var(--ink);}
.wb-nav .it.sub{padding-left:26px;}
.wb-filter{margin:6px 0 2px; border:1px solid var(--line); border-radius:5px; padding:2px 8px;
           font-size:.72rem; color:var(--muted); background:var(--panel2);}
.wb-navtabs{display:flex; gap:2px; margin-top:10px; border-top:1px solid var(--line);
            padding-top:6px; font-size:.7rem;}
.wb-navtabs span{padding:2px 8px; border-radius:5px; color:var(--muted); border:1px solid transparent;}
.wb-navtabs span.on{color:var(--ink); background:var(--panel2); border-color:var(--line);}
/* A szerkeszto "kodterulet": mindket temaban sotet marad, mint a pre blokkok */
.wb-editor{grid-column:2; grid-row:1; background:var(--code-bg); border-bottom:1px solid var(--line);
           font-family:"Cascadia Mono","Consolas",monospace; color:#cbd5e1; min-height:120px;}
.wb-editor .kw{color:#c792ea;} .wb-editor .num{color:#f78c6c;} .wb-editor .dim{color:#64748b;}
.wb-editor strong{color:#ffffff;}
.wb-result{grid-column:2; grid-row:2; background:var(--card-in); border-right:1px solid var(--line); color:var(--card-in-ink);}
.wb-result table.grid{margin-top:8px; font-size:.74rem;}
.wb-addit{grid-column:3; grid-row:1 / span 2; background:var(--panel3); border-left:1px solid var(--line); color:var(--muted);}
.wb-addit .small{font-size:.72rem;}
.wb-num{display:inline-block; background:var(--orange); color:#3a2a00; font-weight:800; border-radius:50%;
        width:18px; height:18px; line-height:18px; text-align:center; font-size:.72rem; margin-right:6px;}
:root[data-theme="light"] .wb-num{color:#ffffff;}
.wb-info{margin-top:14px; background:var(--card-in); border:1px solid var(--line); border-left:4px solid var(--accent);
         border-radius:10px; padding:14px 16px; min-height:60px; color:var(--card-in-ink);}
.wb-info h4{margin:0 0 6px; color:var(--accent2);}
.wb-info .placeholder{color:var(--muted); font-style:italic;}

/* ---------- kapcsolat-lepegeto (stepper) ---------- */
.stp-dots{display:flex; gap:8px; margin:10px 0 14px; flex-wrap:wrap;}
.stp-dot{flex:1; min-width:60px; height:6px; border-radius:4px; background:var(--line);}
.stp-dot.done{background:var(--green);} .stp-dot.cur{background:var(--accent);}
.stp-card{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-height:150px; color:var(--card-in-ink);}
.stp-card .step-no{color:var(--orange); font-weight:800; font-size:.85rem; letter-spacing:.05em;}
.stp-card h4{margin:4px 0 8px; color:var(--ink-strong); font-size:1.15rem;}
.stp-card b{color:var(--ink-strong);}
.stp-dialog{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-top:12px; font-size:.88rem;}
.stp-dialog .row{display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap;}
.stp-dialog .row:last-child{border:none;}
.stp-dialog .row .v{color:var(--icode-ink); font-family:"Cascadia Mono","Consolas",monospace;}
.stp-note{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:8px;
          padding:10px 13px; margin-top:10px; font-size:.86rem; line-height:1.55;}
.stp-note b:first-child{color:var(--orange);}
.btnrow{display:flex; gap:10px; margin-top:14px; align-items:center;}

/* ---------- lekerdezes-futtato (query runner) ---------- */
.qr-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.qr-tab{background:var(--panel2); border:1px solid var(--line); border-radius:8px 8px 0 0; padding:6px 12px;
        cursor:pointer; font-size:.85rem; color:var(--ink);}
.qr-tab.active{background:var(--code-bg); border-bottom-color:var(--code-bg); color:var(--accent2);}
.qr-editor{background:var(--code-bg); border:1px solid var(--line); border-radius:0 8px 8px 8px; padding:14px 16px;
           font-family:"Cascadia Mono","Consolas",monospace; font-size:.9rem; color:var(--code-ink); white-space:pre-wrap; min-height:70px;}
.qr-run{margin:12px 0;}
.qr-out{margin-top:6px;}
.qr-status{font-size:.85rem; margin:8px 0; font-family:"Cascadia Mono","Consolas",monospace;}
.qr-status.ok{color:var(--green);}
.qr-status.err{color:var(--red);}
.qr-note{font-size:.85rem; color:var(--muted); margin-top:6px;}
table.grid{border-collapse:collapse; width:100%; font-size:.85rem; animation:qr-fade .3s ease;}
table.grid th, table.grid td{border:1px solid var(--line); padding:6px 10px; text-align:left;}
table.grid th{background:var(--panel2); color:var(--accent2);}
@keyframes qr-fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

@media(max-width:760px){
  .wb-body{grid-template-columns:130px 1fr; font-size:.72rem;}
  .wb-addit{display:none;}
}