/* ===== Alapszínek ===== */
:root{
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --fg: #0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --border:#e5e7eb;
  --accent:#3b82f6;
  --accent-fg:#ffffff;
  --shadow: 0 8px 24px rgba(2, 6, 23, .08);
  --sel:#e2e8f0;
}
[data-theme="dark"]{
  --bg: #0b1020;
  --bg-soft:#0f172a;
  --fg:#e5e7eb;
  --muted:#94a3b8;
  --card:#0f172a;
  --border:#1f2a44;
  --accent:#60a5fa;
  --accent-fg:#071018;
  --shadow: 0 8px 24px rgba(0,0,0,.45);
  --sel:#1f2a44;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  background:var(--bg);
  color:var(--fg);
}

/* ===== Fejléc ===== */
.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
.head-inner{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
}
.title{font-size:1.25rem; font-weight:700; letter-spacing:.2px;}
.spacer{flex:1}
.input{
  width:min(360px, 40vw);
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); color:var(--fg);
}
.btn{
  appearance:none; border:1px solid var(--border); background:var(--card); color:var(--fg);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; font-weight:600}
.btn.tiny{padding:6px 8px; border-radius:10px; font-size:.9rem}

/* ===== Rács ===== */
main.container{
  max-width:1100px; margin:18px auto; padding:0 16px;
  display:grid; gap:16px;
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 900px){
  main.container{grid-template-columns: 1fr}
}
.panel{
  border:1px solid var(--border); border-radius:16px; background:var(--card);
  box-shadow: var(--shadow); min-height:60vh;
  display:flex; flex-direction:column; overflow:hidden;
}
.panel .toolbar{
  display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--border);
  flex-wrap:wrap; background:var(--bg-soft);
}
.panel .content{padding:8px 10px; overflow:auto; height:100%}

/* ===== Bal lista ===== */
.u_kategoria{ display:inline-block; padding:6px 8px; font-weight:700; cursor:pointer; border-radius:8px }
.u_kategoria:hover{ background:var(--bg-soft) }
.kateg_elem{ display:block; margin:6px 0 0 14px; padding:6px 8px; cursor:pointer; color:var(--muted); border-radius:8px }
.kateg_elem:hover{ background:var(--bg-soft); color:var(--fg) }
.kateg_elem.active{ background:var(--sel); color:var(--fg) }

/* Drag vizuális jelzés */
.drag-over{ outline:2px dashed var(--accent); border-radius:8px }
.u_kategoria[draggable="true"]{ user-select:none }
.kateg_elem[draggable="true"]{ user-select:none }

/* ===== Jobb olvasópanel ===== */
.olvasnivalo{ display:none; padding:12px; line-height:1.65; }
.placeholder{ color:var(--muted); padding:16px }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(2, 6, 23, .48); z-index:50; }
.modal[aria-hidden="false"]{ display:flex }
.modal-card{
  width:min(880px, 95vw);
  max-height:90vh; overflow:auto;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; box-shadow: var(--shadow); padding:16px;
}
.modal h2{ margin:4px 0 8px 0; font-size:1.1rem }
.grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .grid{ grid-template-columns:1fr } }
label{ font-size:.95rem; font-weight:600 }
input[type="text"], select, textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); color:var(--fg);
}
textarea{ resize:vertical; min-height:180px }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
.muted{ color:var(--muted); font-size:.9rem }

/* ===== Szerkesztő (WYSIWYG + HTML) ===== */
.editor-tabs{ display:flex; gap:8px; margin-top:8px }
.editor-tabs .tab{ padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:var(--card); cursor:pointer }
.editor-tabs .tab.active{ background:var(--accent); color:var(--accent-fg); border-color:transparent }
.editor-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 }
.editor-toolbar .btn.tiny{ border-style:dashed }
.editor-area{ border:1px solid var(--border); border-radius:12px; min-height:220px; padding:10px; background:var(--bg) }
.editor-area[contenteditable="true"]:focus{ outline:2px solid var(--accent) }
.hidden{ display:none !important }
.mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px }

/* ===== Autosave banner ===== */
.autosave-banner{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:60; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:8px 12px;
  box-shadow: var(--shadow);
}

/* ===== Lábléc ===== */
.site-footer{
  max-width:1100px; margin:24px auto 40px; padding:0 16px;
  color:var(--muted); text-align:center
}

/* ===== Nyomtatáshoz ===== */
@media print{
  header.site-head, #bal, .site-footer, .autosave-banner { display:none !important; }
  main.container{ grid-template-columns: 1fr; }
  #jobb .content{ border:none; box-shadow:none; }
}