/* Elo SQL-gyakorlo - kozos stiluslap (a 04-09 temakorok hasznaljak).
   A szinek a kozos stiluslap (assets/style.css) valtozoibol jonnek. */

.ix.live{border-color:var(--green);}
.ix.live::before{content:"⚡ ÉLŐ SQL"; background:var(--green); color:#04260f;}
:root[data-theme="light"] .ix.live::before{color:#ffffff;}
.btn.green{background:var(--green); color:#04260f;}
:root[data-theme="light"] .btn.green{color:#ffffff;}

.pg-status{font-family:"Cascadia Mono","Consolas",monospace; font-size:.86rem; margin:4px 0 12px;
           padding:6px 10px; border-radius:7px; background:var(--panel2); border:1px solid var(--line);}
.pg-status.ok{color:var(--green); border-color:var(--tip-line);}
.pg-status.load{color:var(--orange);}
.pg-status.err{color:var(--red); border-color:var(--dgr-line);}

/* a szerkeszto "kodterulet": mindket temaban sotet marad, mint a pre blokkok */
.pg-ed{width:100%; min-height:140px; resize:vertical; background:var(--code-bg); color:var(--code-ink);
       border:1px solid var(--line); border-radius:10px; padding:14px 16px;
       font-family:"Cascadia Mono","Consolas","Courier New",monospace; font-size:.92rem; line-height:1.5;}
.pg-bar{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}
.pg-chips{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px;}
.pg-chip{background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:5px 13px;
         font-size:.82rem; cursor:pointer; color:var(--accent2); transition:.12s;}
.pg-chip:hover{border-color:var(--accent); background:rgba(56,189,248,.12);}
:root[data-theme="light"] .pg-chip:hover{background:rgba(3,105,161,.08);}
.pg-chip.warn{color:var(--orange);}
.pg-out{margin-top:8px;}
.pg-msg{font-family:"Cascadia Mono","Consolas",monospace; font-size:.86rem; padding:8px 12px; border-radius:8px; margin:6px 0;}
.pg-msg.ok{background:var(--ok-bg); color:var(--green);}
.pg-msg.err{background:var(--bad-bg); color:var(--red); white-space:pre-wrap;}
.pg-msg.note{background:var(--warn-bg); color:var(--orange); white-space:pre-wrap;}

table.grid{border-collapse:collapse; width:100%; font-size:.85rem; margin:8px 0; animation:pg-fade .25s;}
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);}
table.grid caption{caption-side:top; text-align:left; color:var(--muted); font-size:.8rem; margin-bottom:3px; font-style:italic;}
table.grid .null{color:var(--muted); font-style:italic;}
@keyframes pg-fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}