/* public/css/admin.css — admin panel styles */

.admin-body {
  background: var(--bg);
  min-height: 100vh;
}

/* ── Admin Header ─────────────────────────────────── */
.admin-header {
  position: relative; z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: var(--bg2);
  border-bottom: 2px solid var(--border2);
  box-shadow: 0 0 20px rgba(192,80,216,.15);
}
.admin-title {
  font-family: var(--font-title);
  font-size: 30px;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent2);
  letter-spacing: 2px;
}

/* ── Login ─────────────────────────────────────────── */
.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 70px);
  position: relative; z-index: 5;
}
.login-box {
  width: 100%; max-width: 380px;
  padding: 36px;
  border: 2px solid var(--border2);
  background: rgba(14,0,16,.9);
  box-shadow: 0 0 50px rgba(192,80,216,.18);
  position: relative;
}
.login-box::before {
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(192,80,216,.12); pointer-events:none;
}
.login-box h2 {
  font-family: var(--font-title);
  font-size: 30px;
  color: var(--glow);
  text-align: center;
  margin-bottom: 22px;
  text-shadow: 0 0 10px var(--accent2);
}

/* ── Admin Panel wrapper ────────────────────────────── */
.admin-view {
  position: relative; z-index: 5;
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 20px;
}

/* ── Tabs ──────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  border-bottom: 2px solid var(--border2);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.tab-btn {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 22px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text-bright) }
.tab-btn.active { color:var(--glow); border-bottom-color:var(--accent) }

/* ── Section titles ─────────────────────────────────── */
.section-title {
  font-family: var(--font-title);
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 20px;
  text-shadow: 0 0 8px var(--accent2);
}
.subsection-title {
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ── Form layout ─────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .form-row { grid-template-columns:1fr } }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 560px) { .settings-grid { grid-template-columns:1fr } }

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 8px;
}

.form-msg {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  margin-top: 6px;
  min-height: 20px;
  letter-spacing: 1px;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border2);
  margin: 24px 0 20px;
}

/* ── Rich text editor ────────────────────────────────── */
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border2);
  border-bottom: none;
}
.rte-toolbar button {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  background: rgba(192,80,216,.08);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, color .15s;
  min-width: 32px;
}
.rte-toolbar button:hover { background:rgba(192,80,216,.28); color:var(--glow) }

.rte-area {
  background: rgba(0,0,0,.6);
  border: 1px solid var(--border2);
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 17px;
  padding: 14px;
  min-height: 260px;
  outline: none;
  line-height: 1.75;
  transition: border-color .2s, box-shadow .2s;
}
.rte-area:focus { border-color:var(--accent); box-shadow:0 0 8px rgba(192,80,216,.22) }
.rte-area p    { margin-bottom:10px }
.rte-area h2   { font-family:var(--font-fell); font-style:italic; color:var(--accent); margin:14px 0 8px }
.rte-area blockquote {
  border-left:3px solid var(--accent2); margin:10px 0;
  padding:6px 14px; background:rgba(192,80,216,.06);
  font-style:italic; color:var(--text-dim);
}
.rte-area pre {
  background:rgba(0,0,0,.5); border:1px solid var(--border);
  padding:10px; font-family:var(--font-mono); font-size:15px;
  color:var(--glow); overflow-x:auto;
}
.rte-area hr { border:none; border-top:1px dashed var(--border2); margin:12px 0 }

/* ── Manage list ─────────────────────────────────────── */
.manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  gap: 10px;
  flex-wrap: wrap;
}
.manage-row:last-child { border-bottom:none }
.manage-info { display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 }
.manage-title {
  font-family: var(--font-fell);
  font-style: italic;
  color: var(--text-bright);
  font-size: 17px;
}
.manage-date { font-family:var(--font-mono); font-size:13px; color:var(--text-dim) }
.manage-actions { display:flex; gap:7px; flex-shrink:0 }

.no-content, .loading-txt {
  font-family:var(--font-mono); font-size:15px;
  color:var(--text-dim); padding:20px 0; letter-spacing:1px;
}