/* ===== Primal Force Wiki — Admin-Oberfläche ===== */

/* --- Adminleiste --- */
.pf-adminbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius:10px; padding:9px 14px; margin-bottom:20px;
  font-size:.86rem;
}
.pf-adminbar-label{ font-weight:700; color:var(--cyan); }
.pf-adminbar a{ color:var(--ink); font-weight:600; text-decoration:none; }
.pf-adminbar a:hover{ color:var(--cyan); text-decoration:underline; }
.pf-adminbar-guest{ justify-content:flex-end; background:transparent; border-style:dashed; }

/* --- Sektions-Wrapper mit Bearbeiten-Button --- */
.pf-section-wrap{ position:relative; }
.pf-edit-btn{
  position:absolute; top:6px; right:0; z-index:5;
  font-size:.72rem; font-weight:700; text-decoration:none;
  background:var(--cyan); color:#fff;
  padding:4px 11px; border-radius:20px;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.pf-section-wrap:hover .pf-edit-btn{ opacity:1; }
.pf-edit-btn:hover{ transform:translateY(-1px); text-decoration:none; }
@media(hover:none){ .pf-edit-btn{ opacity:.85; } }

/* --- Meldungen --- */
.pf-flash{
  padding:11px 16px; border-radius:9px; margin-bottom:18px;
  font-size:.9rem; border:1px solid;
}
.pf-flash-ok{
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  color: color-mix(in srgb, var(--green) 80%, var(--ink));
}
.pf-flash-err{
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  color: color-mix(in srgb, var(--red) 80%, var(--ink));
}
.pf-flash-warn{
  background: color-mix(in srgb, var(--yellow) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--yellow) 45%, var(--line));
  color: color-mix(in srgb, var(--yellow) 85%, var(--ink));
}

/* --- Buttons --- */
.pf-btn{
  display:inline-block; padding:8px 15px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font-size:.86rem; font-weight:600; text-decoration:none; cursor:pointer;
  transition:border-color .18s ease, transform .15s ease;
}
.pf-btn:hover{ border-color:var(--cyan); transform:translateY(-1px); text-decoration:none; }
.pf-btn-primary{ background:var(--cyan); border-color:var(--cyan); color:#fff; }
.pf-btn-primary:hover{ filter:brightness(1.08); }

/* --- Formulare --- */
.pf-form label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:14px; }
.pf-form input[type=password], .pf-form input[type=text]{
  display:block; width:100%; margin-top:5px; padding:9px 11px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font-size:.95rem;
}
.pf-form input:focus{ outline:2px solid color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset:1px; }

/* --- Editor --- */
.pf-editor-toolbar{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
}
.pf-editor-toolbar input[type=text]{
  flex:1 1 240px; min-width:180px; padding:8px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); font-size:.86rem;
}
#contentArea{
  width:100%; min-height:62vh; padding:16px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;
  font-size:.82rem; line-height:1.6; resize:vertical; tab-size:2;
}
#contentArea:focus{
  outline:2px solid color-mix(in srgb, var(--cyan) 50%, transparent); outline-offset:1px;
}
.pf-preview{
  margin-top:22px; padding:20px;
  border:2px dashed color-mix(in srgb, var(--cyan) 45%, var(--line));
  border-radius:12px; background:var(--bg);
}
.pf-preview-label{
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:12px;
}

/* Im Editor die Sidebar-Navigation ausblenden — mehr Platz */
@media(min-width:901px){
  .pf-editing .sidebar{ display:none; }
  .pf-editing .content{ max-width:1100px; }
}