/* Shared styles for the four customer-facing admin pages.
 * Linked by /admin (landing), /admin/keys, /admin/webhooks, /admin/gdpr,
 * /admin/usage. Each page brings its own inline styles for things specific
 * to it (e.g. /admin/usage has a sparkline). Common chrome lives here. */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#f5f7fa;color:#0f172a;font-family:'Inter',-apple-system,sans-serif;line-height:1.5;font-size:14px}
.container{max-width:1200px;margin:0 auto;padding:32px 24px 96px}

header{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;border-bottom:1px solid #e2e8f0;padding-bottom:24px;flex-wrap:wrap;gap:12px}
header img{height:28px;vertical-align:middle}
.crumb{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;color:#64748b;text-transform:uppercase;margin-left:14px}
header nav{display:flex;gap:16px;font-size:13px}
header nav a{color:#475569;text-decoration:none;font-weight:600;padding:6px 10px;border-radius:6px}
header nav a:hover{background:#f1f5f9;color:#1e40af}
header nav a.active{background:#eff6ff;color:#1e40af}

h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.lead{color:#475569;font-size:14.5px;margin:0 0 24px}
h2.section{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;margin:32px 0 14px;color:#0f172a}

a{color:#1e40af;text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px}

/* ── Auth gate ─────────────────────────────────────────────────────────── */
#gate{max-width:520px;margin:48px auto;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:32px}
#gate h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
#gate p{color:#64748b;font-size:13px;margin:0 0 18px}
#gate input{width:100%;font-family:'JetBrains Mono',monospace;font-size:13px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;margin-bottom:14px}
#gate input:focus{outline:none;border-color:#1e40af;box-shadow:0 0 0 3px rgba(30,64,175,.15)}
#gate button{width:100%;background:#1e40af;color:#fff;border:none;border-radius:8px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer}
#gate button:hover{background:#1e3a8a}
#gate .help{margin-top:14px;font-size:12.5px;color:#64748b}
#gate .help a{font-weight:600}
#gate .err{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin-top:14px;font-size:13px;display:none}

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:18px}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.panel-header h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#475569;margin:0}
.panel-body{padding:0}
.panel-body.padded{padding:18px 22px}

/* ── KPIs (used by /admin landing + /admin/usage) ──────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px}
.kpi .label{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.kpi .value{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.kpi .sub{font-size:12px;color:#64748b;margin-top:2px}
.kpi.danger .value{color:#b91c1c}
.kpi.warn .value{color:#a16207}

/* ── Tables ──────────────────────────────────────────────────────────────── */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#475569;text-align:left;padding:12px 16px;border-bottom:2px solid #e2e8f0;background:#f8fafc;white-space:nowrap}
table.data td{padding:11px 16px;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle}
table.data td.code{font-family:'JetBrains Mono',monospace;font-size:12px;color:#475569}
table.data td.num{font-family:'JetBrains Mono',monospace;text-align:right;white-space:nowrap}
table.data td.actions{text-align:right;white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:none}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600;border:none;cursor:pointer;background:#1e40af;color:#fff;text-decoration:none;font-family:inherit}
.btn:hover{background:#1e3a8a;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:#fff;color:#1e40af;border:1px solid #cbd5e1}
.btn.secondary:hover{border-color:#1e40af;background:#eff6ff}
.btn.danger{background:#b91c1c}
.btn.danger:hover{background:#991b1b}
.btn.ghost{background:transparent;color:#64748b;padding:4px 10px}
.btn.ghost:hover{background:#f1f5f9;color:#0f172a}
.btn.small{padding:4px 10px;font-size:12px}

/* ── Status badges ──────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#854d0e}
.badge.danger{background:#fee2e2;color:#991b1b}
.badge.muted{background:#f1f5f9;color:#64748b}
.badge.primary{background:#eff6ff;color:#1e40af}

.empty{padding:36px 16px;text-align:center;color:#94a3b8;font-style:italic}

/* ── Reveal-once secret box (shown after rotate / register) ─────────────── */
.reveal{margin:14px 0;background:#fef9c3;border:2px solid #facc15;border-radius:10px;padding:18px 22px}
.reveal h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#854d0e;margin:0 0 8px}
.reveal .secret{font-family:'JetBrains Mono',monospace;font-size:14px;background:#fff;border:1px solid #facc15;border-radius:6px;padding:10px 12px;word-break:break-all;color:#0f172a;display:flex;justify-content:space-between;align-items:center;gap:12px}
.reveal .secret button{padding:4px 12px;font-size:12px;background:#1e40af;color:#fff;border:none;border-radius:4px;cursor:pointer;flex-shrink:0}
.reveal p{margin:10px 0 0;font-size:12.5px;color:#854d0e;line-height:1.55}
.reveal p strong{color:#78350f}

/* ── Dialog (lightweight, used for confirmations) ───────────────────────── */
.dialog-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.dialog{background:#fff;border-radius:12px;padding:28px;max-width:480px;width:90%;box-shadow:0 20px 60px rgba(15,23,42,.25)}
.dialog h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.dialog p{color:#64748b;font-size:13.5px;margin:0 0 20px;line-height:1.55}
.dialog input,.dialog textarea,.dialog select{width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;font-size:13.5px;margin-bottom:14px;font-family:inherit}
.dialog textarea{min-height:70px;resize:vertical;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.dialog .field-label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px}
.dialog .actions{display:flex;justify-content:flex-end;gap:8px}
.dialog .err{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:8px 12px;border-radius:6px;font-size:13px;margin-bottom:12px;display:none}

/* ── Filters row (used by /admin/keys, /admin/webhooks) ─────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;align-items:center}

.meta{font-size:12.5px;color:#94a3b8;margin-top:18px;text-align:right;font-family:'JetBrains Mono',monospace}
.meta button{background:none;border:1px solid #cbd5e1;border-radius:6px;padding:4px 10px;font-size:12px;color:#1e40af;cursor:pointer;margin-left:8px;font-family:'Inter',sans-serif}
.meta button:hover{border-color:#1e40af}