/* ============================================================
   Synapse super-admin — design system (v2)
   ============================================================ */
:root {
  --bg: #070b14;
  --bg-2: #0a1020;
  --panel: #101827;
  --panel-2: #0c1322;
  --panel-3: #0a0f1c;
  --elev: #131c2e;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.28);
  --text: #eef3fb;
  --text-2: #c3d0e4;
  --muted: #8395b3;
  --faint: #5b6b88;
  --accent: #5b8cff;
  --accent-2: #22d3ee;
  --accent-ink: #06101f;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --ring: 0 0 0 3px rgba(91, 140, 255, 0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(34, 211, 238, 0.1), transparent 60%),
    radial-gradient(1000px 600px at 5% 0%, rgba(91, 140, 255, 0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-attachment: fixed;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.tiny { font-size: 0.74rem; }
.err { color: var(--err); }
.link { color: var(--accent-2); text-decoration: none; }
.link:hover { text-decoration: underline; }

::selection { background: rgba(91, 140, 255, 0.35); }

/* Scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); background-clip: padding-box; }

/* ---------- Login ---------- */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.4rem 2.2rem;
  width: 360px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.login-card h1 { margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.login-card p { color: var(--muted); margin: 0 0 .4rem; }
.login-card h1 span, .brand span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.login-card input {
  width: 100%; margin: 1.1rem 0 .9rem; padding: .8rem 1rem;
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  font-size: .95rem;
}
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.login-card .btn { width: 100%; justify-content: center; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .8rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 14, 25, 0.72);
  position: sticky; top: 0;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  z-index: 20;
}
.brand {
  font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: .55rem; white-space: nowrap;
}
.brand::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2);
}
.tabs {
  display: flex; gap: .25rem; flex: 1;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border);
  padding: .28rem; border-radius: 999px;
  margin-left: .4rem; width: fit-content; flex: 0 1 auto;
}
.tab {
  background: transparent; border: 0; color: var(--muted);
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  font-size: .9rem; font-weight: 500; transition: color .15s, background .15s;
}
.tab:hover { color: var(--text-2); }
.tab.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(91,140,255,.95), rgba(91,140,255,.8));
  box-shadow: 0 6px 16px -8px rgba(91, 140, 255, 0.8);
}
.topbar #logout-btn { margin-left: auto; }

main { padding: 2rem 1.8rem 4rem; max-width: 1240px; margin: 0 auto; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
h2 {
  margin: .2rem 0 1.2rem; font-size: 1.7rem; letter-spacing: -0.025em; font-weight: 700;
}
h3 { margin: 1.8rem 0 .7rem; font-size: 1.05rem; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn {
  background: var(--elev); border: 1px solid var(--border); color: var(--text);
  padding: .58rem 1.05rem; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .9rem; font-weight: 500; font-family: inherit;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: border-color .15s, transform .05s, background .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--border-strong); background: #182136; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent), #4677f0);
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px -12px rgba(91, 140, 255, 0.9);
}
.btn.primary:hover { filter: brightness(1.07); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(148, 163, 184, 0.08); }
.btn.small { padding: .42rem .75rem; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.1rem; align-items: start; }
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.card-title { font-weight: 650; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; letter-spacing: -0.01em; }
.card-title .muted { font-weight: 400; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }

/* metrics grid inside tenant cards */
.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .6rem;
  margin-bottom: 1rem; padding: .9rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.metrics div { display: flex; flex-direction: column; gap: .18rem; }
.metrics span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.metrics b { font-size: 1.02rem; font-weight: 650; }
.card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }

/* ---------- Config ---------- */
.config-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.cfg-row { display: flex; align-items: center; gap: .6rem; }
.cfg-key { min-width: 230px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .84rem; color: var(--accent-2); }
.cfg-val, .cfg-textarea, .save-row input, .form-grid input, .form-grid select, .form-grid textarea, label.block textarea {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit;
}
.cfg-val { flex: 1; padding: .55rem .75rem; }
.cfg-textarea { width: 100%; padding: .65rem .85rem; font-size: .9rem; resize: vertical; margin-bottom: .3rem; }
.cfg-val:focus, .cfg-textarea:focus, .save-row input:focus, .form-grid input:focus,
.form-grid select:focus, .form-grid textarea:focus, label.block textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
code { background: rgba(34, 211, 238, 0.1); padding: 1.5px 6px; border-radius: 6px; font-size: .82rem; color: var(--accent-2); font-family: ui-monospace, monospace; }
.save-row { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.save-row input { padding: .58rem .8rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.8rem 0; }

/* Switch */
.switch { position: relative; display: inline-block; width: 44px; height: 25px; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: .2s; }
.switch span::before { content: ''; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(19px); }

/* ---------- Forms (provision / skills) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1rem; }
.form-grid label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--muted); font-weight: 500; }
.form-grid input, .form-grid select { padding: .6rem .75rem; }
.form-grid label.wide { grid-column: 1 / -1; }
.out { background: #05080f; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-top: 1rem; white-space: pre-wrap; font-size: .82rem; color: var(--text-2); max-height: 340px; overflow: auto; font-family: ui-monospace, monospace; }

/* Skills editor */
.skill-editor { margin-top: 1.4rem; padding: 1.3rem; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.skill-editor h3 { margin: 0 0 1rem; }
label.block { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--muted); font-weight: 500; }
label.block textarea { width: 100%; padding: .7rem .85rem; font-size: .82rem; resize: vertical; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.form-grid input:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Collapsible card sections (details/summary) ---------- */
.card-section { border-top: 1px solid var(--border); }
.card-section summary {
  cursor: pointer; list-style: none; padding: .7rem 0 .55rem;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); display: flex; align-items: center; gap: .45rem; user-select: none;
}
.card-section summary::-webkit-details-marker { display: none; }
.card-section summary::before {
  content: '▸'; color: var(--muted); font-size: .8rem; transition: transform .15s ease;
}
.card-section[open] summary::before { transform: rotate(90deg); }
.card-section summary:hover { color: var(--text-2); }
.card-section > *:not(summary) { padding-bottom: .85rem; }
.tenant-card .card-actions { margin: 0 0 .3rem; }

/* ---------- BYOK key-mode toggles ---------- */
.keymodes { margin: 0; }
.keymode-title { margin-bottom: .45rem; font-weight: 600; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); }
.keymode-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .3rem 0; }
.keymode-label { font-size: .9rem; }
.keymode-btn.own { border-color: rgba(52, 211, 153, .5); color: var(--ok); }
.keymode-btn.platform { border-color: var(--border-strong); color: var(--muted); }

/* BYOK credential box */
.cred-box {
  margin: .4rem 0 .7rem; padding: .7rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.04);
}
.cred-methods { display: flex; gap: .4rem; margin-bottom: .55rem; flex-wrap: wrap; }
.cred-method {
  padding: .3rem .7rem; font-size: .78rem; border: 1px solid var(--border-strong);
  border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  transition: .15s;
}
.cred-method:hover { color: var(--text-2); }
.cred-method.sel { border-color: var(--accent-2); color: var(--accent-2); background: rgba(34, 211, 238, .08); }
.cred-input-row { display: flex; gap: .45rem; }
.cred-input {
  flex: 1; min-width: 0; padding: .5rem .6rem; font-size: .82rem;
  font-family: ui-monospace, monospace; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--panel-3); color: var(--text);
}
.cred-input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.cred-save { white-space: nowrap; }
.cred-status { margin-top: .45rem; font-size: .76rem; }
.cred-ok { color: var(--ok); }
.cred-empty { color: var(--faint); }

/* ---------- Access (recuperar login) ---------- */
.access-block { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.access-users { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.access-user { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(148,163,184,.04); }
.access-user-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.access-result { margin-top: .5rem; font-size: .82rem; }

/* ---------- Cost summary (plataforma) — faixa KPI full-width ---------- */
.cost-summary { border: 1px solid rgba(52, 211, 153, 0.3); background: linear-gradient(120deg, rgba(52,211,153,.08), rgba(34,211,238,.04) 60%, transparent); }
.cost-summary:hover { transform: none; }
.kpi-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
}
.kpi-lead { max-width: 440px; }
.kpi-lead .card-title { margin-bottom: .25rem; }
.kpi-tiles { display: flex; gap: 2.6rem; flex-wrap: wrap; }
.kpi-tiles div { display: flex; flex-direction: column; gap: .25rem; }
.kpi-tiles span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.kpi-tiles b { font-size: 1.7rem; font-weight: 750; letter-spacing: -0.02em; color: var(--ok); }
.kpi-tiles b.kpi-neutral { color: var(--text); }

/* status accent on tenant cards */
.tenant-card { border-left: 3px solid transparent; }
.tenant-card.is-running { border-left-color: rgba(52, 211, 153, 0.55); }
.tenant-card.is-stopped { border-left-color: rgba(248, 113, 113, 0.55); }
.cost-breakdown { margin: 10px 0; }
.cost-line { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: .85rem; border-bottom: 1px solid var(--border); }
.cost-line:last-child { border-bottom: none; }
.cost-line b { margin-left: auto; }

/* ---------- Cobrança & assinaturas ---------- */
.metric-card { padding: 1rem 1.1rem; text-align: left; }
.metric-card:hover { transform: none; }
.metric-big { font-size: 1.7rem; font-weight: 750; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .2rem; }
.bill-ok-txt { color: var(--ok); }
.bill-warn-txt { color: var(--warn); }
.bill-pend-txt { color: var(--accent-2); }
.bill-off-txt { color: var(--err); }

.bill-badge {
  font-size: .76rem; font-weight: 600; padding: .28rem .7rem;
  border-radius: 999px; border: 1px solid var(--border); white-space: nowrap;
}
.bill-ok { color: var(--ok); background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); }
.bill-warn { color: var(--warn); background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.35); }
.bill-pend { color: var(--accent-2); background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.35); }
.bill-off { color: var(--err); background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); }
.bill-none { color: var(--muted); background: rgba(138,160,189,.08); }

.billing-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.billing-filter .chip {
  cursor: pointer; font-size: .8rem; font-weight: 500; padding: .34rem .8rem; border-radius: 999px;
  background: rgba(148,163,184,.05); border: 1px solid var(--border); color: var(--muted); transition: .15s;
}
.billing-filter .chip:hover { border-color: var(--border-strong); color: var(--text-2); }
.billing-filter .chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--accent), #4677f0);
  box-shadow: 0 6px 16px -8px rgba(91,140,255,.8);
}

/* Summary cards get a tighter min-width so 5-6 fit in a row */
#billing-summary { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: .6rem; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 1.4rem 1rem 3rem; }
  h2 { font-size: 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
}