/* admin.css
 * Extracted verbatim from components/admin-sidebar.php's inline <style>.
 * The PHP version re-sent this block on every admin page render; as a real
 * stylesheet it can be cached once. Colours, spacing and the light-theme
 * override are unchanged from the original.
 */
/* ══ Admin Shell ════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --sb-bg:#0c0c10;--sb-border:rgba(255,255,255,.06);
  --sb-text:#9aa0b0;--sb-text-h:#e2e8f0;--sb-active-bg:rgba(217,119,6,.1);
  --sb-active:#D97706;--sb-hover:rgba(255,255,255,.04);
  --sb-section:#4a5568;--sb-logo:#D97706;
  --main-bg:#0a0a0f;--main-surface:#111118;--main-border:rgba(255,255,255,.07);
  --main-text:#e2e8f0;--main-text-h:#f1f5f9;--main-muted:#64748b;
  --main-accent:#D97706;--main-accent-hov:#B45309;
  --main-green:#22c55e;--main-red:#ef4444;--main-amber:#F59E0B;
}
body.light{
  --sb-bg:#ffffff;--sb-border:rgba(0,0,0,.08);
  --sb-text:#6b7280;--sb-text-h:#111827;--sb-active-bg:rgba(180,83,9,.08);
  --sb-active:#B45309;--sb-hover:rgba(0,0,0,.04);
  --sb-section:#9ca3af;--sb-logo:#B45309;
  --main-bg:#f8fafc;--main-surface:#ffffff;--main-border:#e2e8f0;
  --main-text:#334155;--main-text-h:#0f172a;--main-muted:#94a3b8;
  --main-accent:#B45309;--main-accent-hov:#92400e;
  --main-green:#16a34a;--main-red:#dc2626;--main-amber:#d97706;
}
html,body{height:100%;background:var(--main-bg);color:var(--main-text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

/* Sidebar */
.admin-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:220px;
  background:var(--sb-bg);border-right:1px solid var(--sb-border);
  display:flex;flex-direction:column;z-index:200;
  transition:background .2s,border-color .2s;
}
.sb-brand{
  padding:20px 18px 16px;border-bottom:1px solid var(--sb-border);
  display:flex;align-items:center;gap:10px;
}
.sb-brand-logo{
  width:30px;height:30px;background:var(--sb-logo);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;flex-shrink:0;letter-spacing:-.03em;
}
.sb-brand-name{font-weight:800;font-size:.88rem;color:var(--sb-text-h);letter-spacing:-.02em;line-height:1.2;}
.sb-brand-sub{font-size:.65rem;color:var(--sb-text);letter-spacing:.04em;text-transform:uppercase;}

/* Nav sections */
.sb-nav{flex:1;overflow-y:auto;padding:12px 0;}
.sb-nav::-webkit-scrollbar{width:3px;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.sb-section-label{
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-section);padding:10px 18px 4px;margin-top:4px;
}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px;margin:1px 8px;border-radius:7px;
  font-size:.82rem;font-weight:500;color:var(--sb-text);
  text-decoration:none;cursor:pointer;border:none;background:none;width:calc(100% - 16px);
  transition:background .12s,color .12s;
}
.sb-item:hover{background:var(--sb-hover);color:var(--sb-text-h);}
.sb-item.active{background:var(--sb-active-bg);color:var(--sb-active);font-weight:700;}
.sb-item .sb-icon{width:18px;text-align:center;font-size:.9rem;flex-shrink:0;}
.sb-item .sb-badge{
  margin-left:auto;font-size:.6rem;font-weight:700;padding:2px 6px;
  border-radius:99px;background:var(--sb-active-bg);color:var(--sb-active);
}
.sb-divider{height:1px;background:var(--sb-border);margin:8px 18px;}

/* Footer */
.sb-footer{
  border-top:1px solid var(--sb-border);padding:12px 8px;
  display:flex;flex-direction:column;gap:2px;
}
.sb-theme-btn{
  display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:7px;
  font-size:.82rem;color:var(--sb-text);background:none;border:none;cursor:pointer;
  transition:background .12s,color .12s;width:100%;
}
.sb-theme-btn:hover{background:var(--sb-hover);color:var(--sb-text-h);}
.sb-logout{
  display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:7px;
  font-size:.82rem;color:#ef4444;text-decoration:none;
  transition:background .12s;
}
.sb-logout:hover{background:rgba(239,68,68,.08);}

/* Main content area */
.admin-main{
  margin-left:220px;min-height:100vh;
  background:var(--main-bg);transition:background .2s;
}
.admin-topbar{
  height:52px;background:var(--main-surface);border-bottom:1px solid var(--main-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;position:sticky;top:0;z-index:100;
  transition:background .2s,border-color .2s;
}
.topbar-title{font-size:.9rem;font-weight:700;color:var(--main-text-h);}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.admin-body{padding:28px;}

/* Shared UI atoms */
.admin-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.55rem 1.1rem;border-radius:7px;font-size:.82rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .15s,opacity .15s;}
.admin-btn-primary{background:var(--main-accent);color:#fff;}
.admin-btn-primary:hover{background:var(--main-accent-hov);}
.admin-btn-sm{padding:.35rem .75rem;font-size:.75rem;}
.admin-btn-ghost{background:transparent;border:1px solid var(--main-border);color:var(--main-text);}
.admin-btn-ghost:hover{border-color:var(--main-accent);color:var(--main-accent);}
.admin-btn-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--main-red);}
.admin-btn-danger:hover{background:rgba(239,68,68,.2);}
.admin-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;}
.admin-status-published{background:rgba(34,197,94,.1);color:var(--main-green);border:1px solid rgba(34,197,94,.2);}
.admin-status-draft{background:rgba(100,116,139,.1);color:var(--main-muted);border:1px solid rgba(100,116,139,.18);}
.admin-flash{border-radius:8px;padding:.8rem 1rem;font-size:.82rem;margin-bottom:1.5rem;}
.admin-flash.success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);color:var(--main-green);}
.admin-flash.error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:var(--main-red);}
.admin-card{background:var(--main-surface);border:1px solid var(--main-border);border-radius:10px;transition:background .2s,border-color .2s;}
.admin-table-wrap{background:var(--main-surface);border:1px solid var(--main-border);border-radius:10px;overflow:hidden;transition:background .2s,border-color .2s;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table thead{background:rgba(0,0,0,.15);border-bottom:1px solid var(--main-border);}
body.light .admin-table thead{background:rgba(0,0,0,.03);}
.admin-table th{padding:.75rem 1rem;text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--main-muted);font-weight:700;}
.admin-table td{padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.82rem;color:var(--main-text);}
body.light .admin-table td{border-bottom-color:var(--main-border);}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-table tbody tr:hover{background:rgba(255,255,255,.02);}
body.light .admin-table tbody tr:hover{background:rgba(0,0,0,.02);}
.admin-td-title{font-weight:600;color:var(--main-text-h);}
.admin-td-slug{font-family:monospace;font-size:.75rem;color:var(--main-muted);}
.admin-td-actions{display:flex;gap:.4rem;justify-content:flex-end;}
.admin-empty{text-align:center;padding:3rem 2rem;color:var(--main-muted);}
.admin-empty p{margin-bottom:1.25rem;font-size:.9rem;}

/* Responsive */
@media(max-width:768px){
  .admin-sidebar{transform:translateX(-100%);}
  .admin-main{margin-left:0;}
}

/* ── Added in the Workers port ─────────────────────────────────────
   The PHP version applied the light theme from JS after first paint,
   which meant light-theme users saw a dark flash on every navigation.
   A blocking inline script now sets html.pre-light in <head>; this rule
   makes that class carry the same variables as body.light so the page
   renders correctly on the very first frame. */
html.pre-light body {
  --sb-bg:#ffffff;--sb-border:rgba(0,0,0,.08);
  --sb-text:#6b7280;--sb-text-h:#111827;--sb-active-bg:rgba(180,83,9,.08);
  --sb-active:#B45309;--sb-hover:rgba(0,0,0,.04);
  --sb-section:#9ca3af;--sb-logo:#B45309;
  --main-bg:#f8fafc;--main-surface:#ffffff;--main-border:#e2e8f0;
  --main-text:#334155;--main-text-h:#0f172a;--main-muted:#94a3b8;
  --main-accent:#B45309;--main-accent-hov:#92400e;
  --main-green:#16a34a;--main-red:#dc2626;--main-amber:#d97706;
}

/* Form atoms. The PHP edit pages each re-declared these inline, so the
   blog editor and the case-study editor had visibly different inputs. */
.admin-field { margin-bottom: 1.1rem; }
.admin-label {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--main-muted); margin-bottom: .4rem;
}
.admin-input, .admin-textarea, .admin-select {
  width: 100%; padding: .6rem .75rem; border-radius: 7px;
  background: var(--main-bg); border: 1px solid var(--main-border);
  color: var(--main-text); font-size: .85rem; font-family: inherit;
  transition: border-color .15s;
}
.admin-input:focus, .admin-textarea:focus, .admin-select:focus {
  outline: none; border-color: var(--main-accent);
}
.admin-textarea { min-height: 220px; resize: vertical; line-height: 1.6; }
.admin-textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.admin-help { font-size: .72rem; color: var(--main-muted); margin-top: .3rem; }
.admin-error-text { font-size: .72rem; color: var(--main-red); margin-top: .3rem; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .admin-grid-2 { grid-template-columns: 1fr; } }
.admin-form-actions {
  display: flex; gap: .6rem; align-items: center;
  padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--main-border);
}
.admin-section-title {
  font-size: .95rem; font-weight: 700; color: var(--main-text-h);
  margin-bottom: 1rem;
}

/* Visible keyboard focus. The original had none anywhere in the panel,
   so the whole thing was unusable without a mouse. */
.admin-btn:focus-visible, .sb-item:focus-visible, .sb-theme-btn:focus-visible,
.sb-logout:focus-visible, .admin-input:focus-visible, .admin-textarea:focus-visible,
.admin-select:focus-visible {
  outline: 2px solid var(--main-accent); outline-offset: 2px;
}