/* =====================================================================
   Platform Console — Design System
   Tokens → primitives → components → layout → utilities
   Single source of truth for the control-plane panel UI.
   ===================================================================== */

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* Brand (indigo) */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-300:#a5b4fc;
  --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --accent:var(--brand-600); --accent-hover:var(--brand-700);

  /* Neutrals (slate) */
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;

  /* Sidebar (dark) */
  --side-bg-1:#0f172a; --side-bg-2:#1e293b;
  --side-ink:#cbd5e1; --side-ink-dim:#64748b; --side-active:#ffffff;

  /* Semantic */
  --success:#16a34a; --success-bg:#dcfce7; --success-ink:#166534;
  --warning:#d97706; --warning-bg:#fef9c3; --warning-ink:#854d0e;
  --danger:#dc2626;  --danger-bg:#fee2e2;  --danger-ink:#991b1b;
  --info:#2563eb;    --info-bg:#dbeafe;    --info-ink:#1e40af;

  /* Type / radius / shadow / motion */
  --font:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --shadow-2:0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-3:0 12px 24px -8px rgba(15,23,42,.12);
  --t-fast:120ms ease; --t:180ms ease;
}

/* ---- Base ------------------------------------------------------------ */
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.01em; }
code { background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:12.5px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; color:var(--ink-2); }

/* ---- App shell ------------------------------------------------------- */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

.sidebar {
  background:linear-gradient(180deg,var(--side-bg-1),var(--side-bg-2));
  color:var(--side-ink); display:flex; flex-direction:column; padding:18px 14px;
  position:sticky; top:0; height:100vh;
}
.sidebar__brand { display:flex; align-items:center; gap:10px; padding:6px 8px 18px; }
.sidebar__logo {
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:var(--shadow-2);
}
.sidebar__brand b { color:#fff; font-size:15px; line-height:1.1; display:block; }
.sidebar__brand span { color:var(--side-ink-dim); font-size:11px; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.nav-link {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:var(--side-ink); font-weight:500; transition:background var(--t-fast),color var(--t-fast);
}
.nav-link:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.nav-link.active { background:rgba(99,102,241,.18); color:var(--side-active); box-shadow:inset 2px 0 0 var(--brand-500); }
.nav-link svg { width:18px; height:18px; flex:none; opacity:.9; }
.sidebar__spacer { flex:1; }
.sidebar__user { border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
.sidebar__user .who { display:flex; align-items:center; gap:9px; padding:4px 8px; color:#fff; font-weight:600; }
.sidebar__user .avatar { width:28px; height:28px; border-radius:var(--r-full); background:var(--brand-600);
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; flex:none; }
.sidebar__user .links { display:flex; gap:6px; margin-top:8px; }
.sidebar__user .links a, .sidebar__user .links button {
  flex:1; font-size:12.5px; color:var(--side-ink); background:rgba(255,255,255,.05);
  border:0; border-radius:8px; padding:7px; text-align:center; cursor:pointer; font-family:inherit; }
.sidebar__user .links a:hover, .sidebar__user .links button:hover { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }

.content { display:flex; flex-direction:column; min-width:0; }
.topbar { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border); padding:0 32px; height:60px; display:flex; align-items:center; gap:16px; }
.topbar h1 { font-size:18px; }
.topbar .spacer { flex:1; }
.main { padding:26px 32px 64px; max-width:1220px; width:100%; }

/* Login / unauthenticated */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 500px at 50% -10%,var(--brand-50),var(--bg)); }

/* ---- Cards ----------------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:20px; }
.card__title { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; }

/* Metric card */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric { position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:16px 18px; overflow:hidden; }
.metric__label { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.metric__value { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:6px; color:var(--ink); }
.metric__sub { font-size:12px; color:var(--ink-2); margin-top:4px; }
.metric__icon { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:var(--brand-50); color:var(--accent); }
.metric__icon svg { width:18px; height:18px; }
.metric--accent { background:linear-gradient(135deg,var(--brand-600),var(--brand-700)); border-color:transparent; }
.metric--accent .metric__label { color:rgba(255,255,255,.75); }
.metric--accent .metric__value, .metric--accent .metric__sub { color:#fff; }
.metric--accent .metric__icon { background:rgba(255,255,255,.16); color:#fff; }

/* ---- Grid helpers ---------------------------------------------------- */
.row { display:grid; gap:16px; }
.row--2 { grid-template-columns:1.4fr 1fr; }
.stack { display:flex; flex-direction:column; gap:16px; }
.section-gap { margin-top:20px; }

/* ---- Buttons --------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-sm); padding:8px 14px; transition:background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast); white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn--primary { background:var(--accent); color:#fff; box-shadow:var(--shadow-1); }
.btn--primary:hover { background:var(--accent-hover); }
.btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
.btn--ghost:hover { background:var(--surface-2); }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger:hover { filter:brightness(.94); }
.btn--sm { padding:5px 10px; font-size:12.5px; }
.btn--block { width:100%; justify-content:center; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn svg { width:15px; height:15px; }

/* ---- Badges ---------------------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-full);
  font-size:12px; font-weight:600; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge--active { background:var(--success-bg); color:var(--success-ink); }
.badge--suspended { background:var(--danger-bg); color:var(--danger-ink); }
.badge--pending { background:var(--warning-bg); color:var(--warning-ink); }
.badge--plain { background:var(--surface-2); color:var(--ink-2); }

/* ---- Table ----------------------------------------------------------- */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); overflow:hidden; }
table.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); background:var(--surface-2); padding:11px 16px; border-bottom:1px solid var(--border); }
.table td { padding:13px 16px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr { transition:background var(--t-fast); }
.table tbody tr:hover { background:var(--surface-2); }
.table .muted { color:var(--ink-3); }
.table-name { font-weight:600; color:var(--ink); }

/* ---- Forms ----------------------------------------------------------- */
.field { display:block; margin-bottom:14px; }
.field > span, label.field-label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.input, select.input, .field input, .field select {
  display:block; width:100%; padding:9px 11px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.input:focus, .field input:focus, .field select:focus { outline:none; border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(99,102,241,.18); }
/* Checkbox/radio: yukarıdaki genel width:100% kuralı bunlara uygulanırsa kutu tüm
   satırı kaplayıp etiketi dar sütuna sıkıştırır (partner yetki kapsamı bug'ı). */
.field input[type=checkbox], .field input[type=radio] {
  display:inline-block; width:auto; padding:0; }

/* Capability checkbox grid (partner yetki kapsamı / anahtar kapsamı) */
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:8px 18px; margin-top:8px; }
.check { display:flex; align-items:flex-start; gap:9px; font-weight:400;
  font-size:13.5px; line-height:1.4; cursor:pointer; }
.check input[type=checkbox] { margin-top:2px; flex:none; accent-color:var(--accent); }

/* ---- Alerts ---------------------------------------------------------- */
.alert { padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; border:1px solid transparent; }
.alert--success { background:var(--success-bg); color:var(--success-ink); border-color:#bbf7d0; }
.alert--error { background:var(--danger-bg); color:var(--danger-ink); border-color:#fecaca; }
.alert--info { background:var(--info-bg); color:var(--info-ink); border-color:#bfdbfe; }

/* ---- Activity feed --------------------------------------------------- */
.feed { display:flex; flex-direction:column; gap:2px; }
.feed__item { display:flex; gap:12px; padding:10px 4px; border-bottom:1px solid var(--border); }
.feed__item:last-child { border-bottom:0; }
.feed__dot { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; }
.feed__dot svg { width:16px; height:16px; }
.feed__dot--danger { background:var(--danger-bg); color:var(--danger-ink); }
.feed__dot--success { background:var(--success-bg); color:var(--success-ink); }
.feed__dot--info { background:var(--info-bg); color:var(--info-ink); }
.feed__body { min-width:0; flex:1; }
.feed__body p { margin:0; font-size:13px; }
.feed__body .time { font-size:11.5px; color:var(--ink-3); }

/* ---- Misc ------------------------------------------------------------ */
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.page-head .spacer { flex:1; }
.toolbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .field { margin-bottom:0; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:13px; margin-bottom:14px; }
.muted { color:var(--ink-3); }
.empty { text-align:center; color:var(--ink-3); padding:36px 16px; font-size:13.5px; }
.chart-box { height:260px; position:relative; }
.kv { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.kv:last-child { border-bottom:0; }
.kv span:first-child { color:var(--ink-2); }
.kv span:last-child { font-weight:600; }
.inline-form { display:inline; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:980px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .sidebar__spacer { display:none; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .row--2 { grid-template-columns:1fr; }
  .main, .topbar { padding-left:18px; padding-right:18px; }
}

/* ---- Sortable header + pager + numeric cells ------------------------ */
.table th a { color:inherit; display:inline-flex; align-items:center; gap:4px; }
.table th a:hover { color:var(--ink-2); text-decoration:none; }
.table th a .arr { font-size:10px; color:var(--accent); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.pager { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13px; color:var(--ink-2); }
.pager .spacer { flex:1; }

/* ---- Theme toggle ---------------------------------------------------- */
.theme-toggle { background:transparent; border:1px solid var(--border-strong); color:var(--ink-2);
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer; flex:none;
  transition:background var(--t-fast); }
.theme-toggle:hover { background:var(--surface-2); }
.theme-toggle svg { width:18px; height:18px; }

/* ---- Dark theme (higher specificity than :root so order-independent) -- */
:root[data-theme="dark"] {
  --bg:#0b1120; --surface:#0f172a; --surface-2:#1e293b;
  --border:#1e293b; --border-strong:#334155;
  --ink:#e2e8f0; --ink-2:#94a3b8; --ink-3:#64748b;
  --brand-50:#1e1b4b;
}
:root[data-theme="dark"] .topbar { background:rgba(15,23,42,.8); }
:root[data-theme="dark"] .metric__icon { color:var(--brand-300); }
:root[data-theme="dark"] code { color:var(--brand-300); }

/* ---- Operational health strip ---------------------------------------- */
.health { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.health__item { display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); }
.health__dot { width:10px; height:10px; border-radius:50%; margin-top:4px; flex:none; }
.health__dot--ok { background:var(--success); }
.health__dot--warn { background:var(--warning); }
.health__dot--bad { background:var(--danger); }
.health__label { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.health__value { font-size:13.5px; font-weight:600; color:var(--ink); margin-top:2px; }
.health__sub { font-size:12px; color:var(--ink-2); margin-top:2px; }

/* ---- Audit row metadata toggle ---------------------------------------- */
details.audit-meta summary { cursor:pointer; color:var(--accent); font-size:12px; user-select:none; }
details.audit-meta pre { margin:6px 0 0; padding:8px 10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:11.5px; white-space:pre-wrap; word-break:break-word; max-width:560px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; color:var(--ink-2); }

/* ---- Onboarding funnel ---------------------------------------------- */
.funnel { display:flex; flex-direction:column; gap:10px; }
.funnel__row { display:flex; align-items:center; gap:14px; }
.funnel__label { width:190px; flex:none; font-size:13px; color:var(--ink-2); }
.funnel__track { flex:1; background:var(--surface-2); border-radius:var(--r-full); height:24px; overflow:hidden; }
.funnel__bar { height:100%; border-radius:var(--r-full); min-width:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-700)); transition:width .3s; }
.funnel__val { width:104px; flex:none; text-align:right; font-weight:700; font-size:14px; }
.funnel__val .muted { font-weight:500; font-size:12px; margin-left:4px; }
@media (max-width:980px) { .funnel__label { width:120px; } }