/* 03-eer-diagram - oldalspecifikus stilusok:
   modellezo-eszkoztar, oszlop-jelolo dekodolo, azonosito/nem-azonosito valto.
   A szinek a kozos stiluslap (assets/style.css) valtozoibol jonnek. */

/* ---------- modellezo eszkoztar ---------- */
.tb-wrap{display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start;}
.tb-bar{background:var(--panel3); border:1px solid var(--line); border-radius:10px; padding:8px;
        display:flex; flex-direction:column; gap:6px;}
.tb-btn{width:46px; height:40px; border-radius:8px; background:var(--panel2); border:2px solid transparent;
        cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.15rem;
        transition:.12s; padding:0; color:var(--ink);}
.tb-btn:hover{border-color:var(--accent);}
.tb-btn.active{border-color:var(--accent); background:rgba(56,189,248,.2);}
:root[data-theme="light"] .tb-btn.active{background:rgba(3,105,161,.12);}
.tb-sep{height:1px; background:var(--line); margin:4px 2px;}
.tb-info{background:var(--card-in); border:1px solid var(--line); border-left:4px solid var(--accent);
         border-radius:10px; padding:16px 18px; min-height:120px; color:var(--card-in-ink);}
.tb-info h4{margin:0 0 6px; color:var(--accent2);}
.tb-info .placeholder{color:var(--muted); font-style:italic;}
.tb-info .key{display:inline-block; background:var(--icode-bg); border:1px solid var(--line); border-radius:5px;
              padding:1px 7px; font-family:"Cascadia Mono","Consolas",monospace; font-size:.82rem;
              color:var(--orange); margin-top:8px;}

/* ---------- oszlop-jelolo dekodolo ---------- */
.flagrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; background:var(--panel3);
         border:1px solid var(--line); border-radius:10px; padding:12px 14px;
         font-family:"Cascadia Mono","Consolas",monospace; font-size:.9rem;}
.flagrow .col-name{color:var(--accent2); margin-right:6px;}
.flagrow .col-type{color:var(--orange); margin-right:10px;}
.flag{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px;
      padding:0 8px; border-radius:7px; background:var(--panel2); border:2px solid var(--line);
      cursor:pointer; font-weight:700; transition:.12s; color:var(--ink);}
.flag:hover{border-color:var(--accent);}
.flag.on{background:var(--ok-bg); border-color:var(--green); color:var(--ok-ink);}
.flag-info{margin-top:12px; background:var(--card-in); border:1px solid var(--line);
           border-left:4px solid var(--green); border-radius:10px; padding:14px 16px; min-height:54px;
           color:var(--card-in-ink);}
.flag-info .placeholder{color:var(--muted); font-style:italic;}
.flag-info b{color:var(--green);}
.flag-info .d{margin-top:5px;}

/* ---------- azonosito / nem-azonosito valto ---------- */
.rel-toggle{display:flex; gap:10px; margin:6px 0 16px; flex-wrap:wrap;}
.btn.ghost.on{border-color:var(--accent); color:var(--accent2); background:rgba(56,189,248,.12);}
:root[data-theme="light"] .btn.ghost.on{background:rgba(3,105,161,.10);}
.rel-stage{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center;}
.rel-stage svg{max-width:520px; width:100%; height:auto;}
.rel-expl{margin-top:14px;}
.rel-expl h4{margin:0 0 6px;}
.rel-expl h4.h-id{color:var(--green);}
.rel-expl h4.h-non{color:var(--accent2);}

@media(max-width:760px){
  .tb-wrap{grid-template-columns:64px 1fr;}
}