/* ---------- Admin panel styling (extends style.css) ---------- */
.admin-pill{
  font-size: 11px; font-weight:700; color: var(--accent);
  background: var(--accent-soft); padding: 4px 10px; border-radius: 20px;
}
/* Proper, distinct Sign out button — separate from the plain "Exit" text link */
.signout-btn{
  font-size: 12.5px; font-weight:700; color: #B4443A;
  background: #FBEDEC; border: 1px solid #F3D5D1;
  padding: 7px 14px; border-radius: 20px; cursor:pointer;
}
.signout-btn:active{ background:#F5DAD6; }
.admin-exit{
  font-size: 12px; font-weight:600; color: var(--ink-soft); text-decoration:none;
}

.admin-main{ max-width: 100%; width:100%; margin: 0; padding: 76px 24px 60px; }

/* ---------- Sub-header: section tabs ----------
   Sticky (not fixed): margin-top clears the fixed 60px header exactly
   once, then position:sticky keeps it pinned there while scrolling —
   and because it's a normal-flow element, the main content below it
   is always pushed down by whatever height the tabs actually take up,
   even if they wrap onto two or three lines. Nothing can overlap. */
.admin-tabs{
  position: sticky; top: 60px; margin-top: 60px; z-index: 90;
  display:flex; flex-wrap:wrap; gap:4px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 6px 24px;
}

/* ---------- Gate (username + password only) ---------- */
.admin-gate{ display:flex; align-items:center; justify-content:center; min-height: 60vh; }
.gate-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; max-width: 340px; width:100%;
}
.gate-card h2{ font-size:18px; margin-bottom:16px; }
.gate-card .field-input{ margin-bottom:12px; }
.gate-error{ color:#B4443A; font-size:12.5px; margin-top:6px; }

/* ---------- Tabs ---------- */
.admin-tab{
  font-size: 13px; font-weight:700; color: var(--ink-soft);
  padding: 9px 14px; white-space:nowrap; border-radius: 20px;
}
.admin-tab:hover{ background: var(--bg); }
.admin-tab.active{ color:#fff; background: var(--accent); }

/* ---------- Panel layout: forms/lists stay readable width; data-heavy tabs use the full width ---------- */
.admin-panel-tab{ width:100%; }
[data-panel="publish"] .admin-section,
[data-panel="sections"] .admin-section,
[data-panel="branding"] .admin-section,
[data-panel="footer"] .admin-section,
[data-panel="pending"] .admin-section,
[data-panel="live"] .admin-section{
  max-width: 900px; margin-left:auto; margin-right:auto;
}

/* ---------- Sections ---------- */
.admin-section{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}
.admin-section-title{ font-size: 16px; font-weight:700; margin-bottom:4px; }
.admin-section-sub{ font-size: 12.5px; color: var(--ink-soft); margin-bottom:16px; line-height:1.5; }
.admin-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.admin-stats-grid > div{ padding:12px; border:1px solid var(--line); border-radius:10px; text-align:center; }
.admin-stats-grid strong{ display:block; font-size:24px; color:var(--accent); }
.admin-stats-grid span{ display:block; margin-top:3px; color:var(--ink-soft); font-size:11px; }
@media (max-width:600px){ .admin-stats-grid{ grid-template-columns:1fr; } }

.admin-form{ display:flex; flex-direction:column; }
.form-row{ display:flex; gap:12px; }
.form-row .form-field{ flex:1; }

/* ---------- Admin list / cards (pending + live + sections) ---------- */
.admin-list{ display:flex; flex-direction:column; gap:12px; max-width: 900px; margin: 0 auto; }
.admin-empty{ font-size:13px; color: var(--ink-soft); padding: 10px 0; }

.admin-item{ border:1px solid var(--line); border-radius: 12px; padding:12px; display:flex; gap:12px; }
.admin-item-thumb{ width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; background: var(--accent-soft); }
.admin-item-body{ flex:1; min-width:0; }
.admin-item-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.admin-item-tag{ font-size: 10.5px; font-weight:700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 20px; }
.admin-item-status{ font-size: 10.5px; font-weight:700; padding:2px 8px; border-radius:20px; }
.admin-item-status.pending{ background:#FBEDEC; color:#B4443A; }
.admin-item-status.live{ background: var(--accent-soft); color: var(--accent); }
.admin-item-author{ font-size:11px; color: var(--ink-soft); }
.admin-item-title{ font-size: 14px; font-weight:700; margin-bottom:2px; }
.admin-item-text{ font-size: 12.5px; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.admin-item-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.admin-btn{ font-size: 12px; font-weight:700; padding: 6px 12px; border-radius:8px; }
.admin-btn.approve{ background: var(--accent); color:#fff; }
.admin-btn.edit{ background: var(--bg); border:1px solid var(--line); color: var(--ink); }
.admin-btn.delete{ background:#FBEDEC; color:#B4443A; }
.admin-btn.view{ background: var(--bg); border:1px solid var(--line); color: var(--ink); }

.edit-inline{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.edit-inline textarea{ min-height:70px; }

/* ---------- Google Sign-In tab ---------- */
.gsi-steps{ margin: 0 0 14px 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.gsi-steps li{ font-size: 13px; line-height:1.6; color: var(--ink); }
.gsi-steps a{ color: var(--accent); font-weight:600; }
.field-hint code{ background: var(--accent-soft); padding:2px 6px; border-radius:5px; color: var(--accent); }

/* ---------- Branding tab ---------- */
.brand-preview-row{ display:flex; align-items:center; gap:10px; margin: 8px 0 4px; }
.brand-preview-img{ height:34px; width:auto; border-radius:6px; border:1px solid var(--line); }

/* ---------- Images tab ---------- */
.images-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:10px; }
.image-grid-item{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line); background: var(--accent-soft); }
.image-grid-item img{ width:100%; height:100px; object-fit:cover; display:block; }
.image-grid-item .img-tag{
  position:absolute; left:5px; bottom:5px; font-size:9.5px; font-weight:700;
  background: rgba(0,0,0,0.55); color:#fff; padding:2px 6px; border-radius:10px;
}
.admin-item-views{ color:var(--ink-soft); font-size:12px; font-weight:600; margin-top:6px; }
.engagement-item{ align-items:flex-start; }
.engagement-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 52px; background:var(--accent-soft); }
.engagement-avatar--empty{ display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:700; }
.engagement-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.engagement-stats span{ background:var(--accent-soft); color:var(--accent); border-radius:20px; padding:4px 8px; font-size:11px; font-weight:600; }

/* ---------- Database tab ---------- */
.db-table-block{ margin-bottom:22px; }
.db-table-actions{ display:flex; gap:8px; margin: 10px 0 12px; flex-wrap:wrap; align-items:center; }
.db-table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table.db-table{ border-collapse: collapse; width:100%; font-size:12px; }
table.db-table th{
  background: var(--bg); text-align:left; padding:8px 10px; font-weight:700;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.db-table td{ padding:0; border-bottom:1px solid var(--line); vertical-align:top; height:56px; }
table.db-table td[contenteditable]{
  padding:8px 10px; min-width:140px; max-width:280px; outline:none;
  white-space:pre-wrap; word-break:break-word;
  height:56px; max-height:56px; overflow-y:auto; line-height:1.4;
}
table.db-table td[contenteditable]:focus{ background: var(--accent-soft); }
/* rich-content columns (e.g. "text") render as formatted paragraphs, not raw HTML tags */
table.db-table td[data-rich="1"]{
  white-space:normal;
}
table.db-table td[data-rich="1"] b, table.db-table td[data-rich="1"] strong{ font-weight:700; }
table.db-table td[data-rich="1"] u{ text-decoration:underline; }
table.db-table td[data-rich="1"] ul{ margin:4px 0 4px 16px; }
.db-row-delete{ padding:8px 10px; height:56px; }
.db-file-input{ font-size:11.5px; }

@media (max-width: 480px){
  .form-row{ flex-direction:column; }
  .admin-pill{ display:none; }
}