:root {
  --admin-bg: #f5f7fb;
  --admin-card: #ffffff;
  --admin-text: #111827;
  --admin-muted: #6b7280;
  --admin-accent: #0f766e;
  --admin-border: #d1d5db;
}

body[data-theme="dark"] {
  --admin-bg: #0b1220;
  --admin-card: #111827;
  --admin-text: #e5e7eb;
  --admin-muted: #9ca3af;
  --admin-accent: #14b8a6;
  --admin-border: #374151;
}

/* ── Loading spinner ─────────────────────────────────── */
.admin-loading { display:flex; align-items:center; justify-content:center; padding:24px 0; }
.admin-spinner { width:24px; height:24px; border:3px solid var(--admin-border); border-top-color:var(--admin-accent); border-radius:50%; animation:admin-spin 0.7s linear infinite; }
@keyframes admin-spin { to { transform:rotate(360deg); } }

/* ── Toast notifications (created by JS) ─────────────── */
.admin-toast { position:fixed; top:24px; right:24px; bottom:auto; background:#16a34a; color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; z-index:9999; box-shadow:0 4px 16px rgba(0,0,0,0.3); opacity:0; transform:translateY(12px); transition:opacity 0.25s ease, transform 0.25s ease; pointer-events:none; max-width:400px; word-break:break-word; }
.admin-toast-error { background:#dc2626; color:#fff; }
.admin-toast-visible { opacity:1; transform:translateY(0); }
.admin-toast-hiding { opacity:0; transform:translateY(12px); }
@media (prefers-reduced-motion:reduce) { .admin-toast,.admin-toast-visible,.admin-toast-hiding { transition:none; } }

/* ── Status / Role badges ────────────────────────────── */
.admin-status-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; }
.admin-status-draft { color:#d97706; border:1px solid rgba(217,119,6,0.5); background:rgba(217,119,6,0.12); }
.admin-status-active { color:#16a34a; border:1px solid rgba(22,163,74,0.5); background:rgba(22,163,74,0.12); }
.admin-status-inactive { color:#dc2626; border:1px solid rgba(220,38,38,0.5); background:rgba(220,38,38,0.12); }
.admin-role-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; border:1px solid var(--admin-border); }
.admin-role-company { color:#2563eb; border-color:rgba(37,99,235,0.5); background:rgba(37,99,235,0.12); }
.admin-role-branch { color:#7c3aed; border-color:rgba(124,58,237,0.5); background:rgba(124,58,237,0.12); }

/* ── Domain cell + copy ──────────────────────────────── */
.admin-domain-cell { display:inline-flex; align-items:center; gap:4px; max-width:260px; }
.admin-copy-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; padding:2px; color:var(--admin-muted); border-radius:4px; transition:color 0.15s, background 0.15s; }
.admin-copy-btn:hover { color:var(--admin-accent); background:rgba(15,118,110,0.1); }
.admin-url-link { color:var(--admin-accent); text-decoration:none; cursor:pointer; }
.admin-url-link:hover { text-decoration:underline; }

/* ── Buttons used by JS dynamic HTML ─────────────────── */
.admin-action-group { display:inline-flex; gap:6px; }
.admin-button { display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:1px solid var(--admin-accent); background:var(--admin-accent); color:#fff; border-radius:8px; padding:10px 22px; font-size:14px; cursor:pointer; }
.admin-button-icon { display:inline-block; width:16px; height:16px; flex:none; vertical-align:middle; }
.admin-button-secondary { background:transparent; color:var(--admin-text); }
.admin-button-sm { padding:6px 10px; font-size:12px; line-height:1; }
.admin-button-sm .admin-button-icon { width:14px; height:14px; }
.admin-button-danger { border-color:#dc2626; background:#dc2626; }

/* ── KV grid (site-view config/user) ─────────────────── */
.admin-kv-grid { display:grid; grid-template-columns:1fr 1fr; }
.admin-kv-item { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--admin-border); }
.admin-kv-item:nth-last-child(-n+2) { border-bottom:none; }
.admin-kv-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--admin-muted); }
.admin-kv-key { font-size:12px; color:var(--admin-muted); min-width:80px; flex-shrink:0; }
.admin-kv-value { font-size:13px; font-weight:500; word-break:break-all; }

/* ── Stat cards in sidebar (site-view) ───────────────── */
.admin-stat-card-static { display:flex; align-items:center; gap:12px; padding:12px 0; }
.admin-stat-card-static + .admin-stat-card-static { border-top:1px solid var(--admin-border); padding-top:14px; }
.admin-stat-card-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:var(--admin-accent); background:rgba(15,118,110,0.1); }
.admin-stat-card-body { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.admin-stat-card-value { font-size:20px; font-weight:700; line-height:1.2; }
.admin-stat-card-title { font-size:12px; color:var(--admin-muted); }

/* ── Graph bars (site-view) ──────────────────────────── */
.admin-graph-row { display:grid; grid-template-columns:100px 1fr 40px; gap:8px; align-items:center; }
.admin-graph-label { font-size:13px; color:var(--admin-muted); }
.admin-graph-track { height:10px; border-radius:999px; border:1px solid var(--admin-border); background:rgba(255,255,255,0.04); overflow:hidden; min-width:60px; }
.admin-graph-bar { display:block; height:100%; background:linear-gradient(90deg, var(--admin-accent), rgba(20,184,166,0.5)); }
.admin-graph-value { font-size:13px; color:var(--admin-muted); }

/* ── Site identity hero (site-view) ──────────────────── */
.admin-site-hero { margin-bottom:24px; }
.admin-site-identity { display:flex; align-items:center; gap:16px; background:var(--admin-card); border:1px solid var(--admin-border); border-radius:12px; padding:20px 24px; }
.admin-site-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; color:var(--admin-accent); background:rgba(15,118,110,0.1); }
.admin-site-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.admin-site-name { font-size:20px; font-weight:700; line-height:1.2; text-transform:capitalize; }
.admin-site-meta { display:flex; gap:6px; flex-wrap:wrap; }
.admin-site-domain { flex-shrink:0; }
.admin-site-domain .admin-url-link { font-size:14px; }

/* ── Filter stat cards (sites grid) ──────────────────── */
.admin-stat-card { display:flex; align-items:center; gap:14px; background:var(--admin-card); border:2px solid var(--admin-border); border-radius:12px; padding:18px; cursor:pointer; font-family:inherit; font-size:14px; transition:border-color 0.15s, box-shadow 0.15s; color:var(--admin-text); text-align:left; width:100%; }
.admin-stat-card:hover { border-color:var(--admin-accent); }
.admin-stat-card.is-active { border-color:var(--admin-accent); box-shadow:0 0 0 2px rgba(15,118,110,0.2); }
.admin-stat-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; color:var(--admin-accent); background:rgba(15,118,110,0.1); }
.admin-stat-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.admin-stat-label { font-weight:600; font-size:15px; line-height:1.3; }
.admin-stat-desc { font-size:12px; color:var(--admin-muted); line-height:1.3; }
.admin-stat-value { flex-shrink:0; font-size:24px; font-weight:700; line-height:1; color:var(--admin-text); min-width:36px; text-align:right; }

/* ── Search bar ──────────────────────────────────────── */
.admin-search-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.admin-search-field { position:relative; flex:1 1 280px; min-width:0; }
.admin-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--admin-muted); pointer-events:none; }
.admin-search-field input { width:100%; border:1px solid var(--admin-border); background:var(--admin-bg); color:var(--admin-text); border-radius:8px; padding:10px 10px 10px 34px; font-size:14px; }

/* ── Tables (used by JS dynamic row rendering) ───────── */
#sitesTable th, #sitesTable td,
#queueTable th, #queueTable td,
#logsTable th, #logsTable td {
  border-bottom: 1px solid var(--admin-border);
  padding: 10px;
  font-size: 14px;
  text-align: left;
}
#sitesTable td, #queueTable td,
#logsTable td {
  color: var(--admin-text);
}

/* ── Paginator ───────────────────────────────────────── */
.admin-paginator { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--admin-border); flex-wrap:wrap; }
.admin-paginator button:disabled { opacity:0.4; cursor:not-allowed; }
.admin-page-numbers { display:flex; gap:4px; align-items:center; }
.admin-page-btn { min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--admin-border); border-radius:8px; background:transparent; color:var(--admin-text); cursor:pointer; font-size:13px; padding:0 8px; }
.admin-page-btn:hover { border-color:var(--admin-accent); background:rgba(15,118,110,0.08); }
.admin-page-btn.is-active { border-color:var(--admin-accent); background:var(--admin-accent); color:#fff; cursor:default; }
.admin-page-ellipsis { min-width:26px; text-align:center; color:var(--admin-muted); font-size:13px; user-select:none; }
.admin-page-size-select { margin-left:auto; border:1px solid var(--admin-border); background:var(--admin-bg); color:var(--admin-text); border-radius:8px; padding:8px 10px; font-size:13px; }

/* ── Modal ───────────────────────────────────────────── */
.admin-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; }
.admin-modal { background:var(--admin-card); border:1px solid var(--admin-border); border-radius:14px; padding:24px 28px; max-width:420px; width:90%; box-shadow:0 8px 30px rgba(0,0,0,0.18); }
.admin-modal p { margin:0 0 20px; font-size:15px; line-height:1.5; word-break:break-all; }
.admin-modal-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ── General page head (used in multiple templates) ──── */
.admin-page-head h1 { margin:0; }
.admin-page-head p { color:var(--admin-muted); margin:6px 0 16px; }
.admin-page-head-with-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ── Site-view two-column layout ─────────────────────── */
.admin-site-layout { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
.admin-site-sidebar { display:flex; flex-direction:column; gap:20px; }
.admin-site-main { display:flex; flex-direction:column; gap:20px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:900px) {
  .admin-site-layout { grid-template-columns:1fr; }
  .admin-graph-row { grid-template-columns:1fr; gap:4px; }
}

/* ── Sync badge ──────────────────────────────────────── */
.admin-sync-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; cursor:help; }
.admin-sync-badge-pending { color:#d97706; border:1px solid rgba(217,119,6,0.5); background:rgba(217,119,6,0.12); }
.admin-sync-badge-inprogress { color:#2563eb; border:1px solid rgba(37,99,235,0.5); background:rgba(37,99,235,0.12); }
.admin-sync-badge-completed { color:#16a34a; border:1px solid rgba(22,163,74,0.5); background:rgba(22,163,74,0.12); }
.admin-sync-badge-failed { color:#dc2626; border:1px solid rgba(220,38,38,0.5); background:rgba(220,38,38,0.12); }
.admin-sync-badge-queued { color:#0891b2; border:1px solid rgba(8,145,178,0.5); background:rgba(8,145,178,0.12); }
.admin-sync-badge-processing { color:#2563eb; border:1px solid rgba(37,99,235,0.5); background:rgba(37,99,235,0.12); }
.admin-sync-badge-cancelled { color:#6b7280; border:1px solid rgba(107,114,128,0.5); background:rgba(107,114,128,0.12); }
.admin-sync-badge-listing, .admin-sync-badge-news, .admin-sync-badge-sync, .admin-sync-badge-error, .admin-sync-badge-general { color:#6b7280; border:1px solid var(--admin-border); background:var(--admin-bg); }

/* ── Tab bar ──────────────────────────────────────────── */
.admin-tab-bar { display:flex; gap:0; border-bottom:2px solid var(--admin-border); margin-bottom:20px; }
.admin-tab { padding:10px 24px; font-size:14px; font-weight:500; border:none; background:none; color:var(--admin-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.15s, border-color 0.15s; }
.admin-tab:hover { color:var(--admin-text); }
.admin-tab.active { color:var(--admin-accent); border-bottom-color:var(--admin-accent); }

/* ── Tab panels ───────────────────────────────────────── */
.admin-tab-panel { }

/* ── Select input ─────────────────────────────────────── */
.admin-select { padding:8px 12px; border:1px solid var(--admin-border); border-radius:8px; font-size:13px; background:var(--admin-card); color:var(--admin-text); }

/* ── Text input ───────────────────────────────────────── */
.admin-input { padding:8px 12px; border:1px solid var(--admin-border); border-radius:8px; font-size:13px; background:var(--admin-card); color:var(--admin-text); width:100%; }
.admin-input::placeholder { color:var(--admin-muted); }