:root {
  --bg:#0f1115; --panel:#181b22; --line:#2a2f3a; --text:#e6e8ec; --muted:#9aa3b2;
  --accent:#4c8dff; --warn:#f0a500; --ok:#3ecf8e; --bad:#ff5c5c;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg); color:var(--text);
}
.muted { color:var(--muted); }
.error { color:var(--bad); }
.error-wrap { display:flex; align-items:center; gap:10px; }
.link { color:var(--accent); background:none; border:none; cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
.link.danger { color:var(--bad); }

.topbar {
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.brand { font-weight:600; }
.spacer { flex:1; }
button {
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:7px 14px; cursor:pointer; font:inherit;
}
button:hover { filter:brightness(1.1); }

main { padding:18px; max-width:1100px; margin:0 auto; }

.summary-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:22px; }
.tile {
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px;
  display:flex; flex-direction:column; gap:4px; cursor:pointer; user-select:none;
  transition:background-color .12s ease, border-color .12s ease;
}
.tile:hover { border-color:var(--accent); }
.tile.warn { border-color:var(--warn); }
/* Seçili filtre: belirgin ama soluk — dolgu tonu accent/warn'ın kendisi değil,
   %16 karışımı (bkz. renderSummary/tile filterKey tıklaması, panel.js). */
.tile.selected { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.tile.selected .tile-value { color:var(--accent); }
.tile.warn.selected { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, var(--panel)); }
.tile.warn.selected .tile-value { color:var(--warn); }
.tile-value { font-size:24px; font-weight:700; }
.tile-label { color:var(--muted); font-size:12px; }

.list-header { display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
.list-header h2 { margin:0; }
.list-header-right { margin-left:auto; display:flex; align-items:baseline; gap:12px; }

.pagination { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px; }
.pagination button.link:disabled { color:var(--muted); text-decoration:none; cursor:default; }
.pagination select { padding:5px 7px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }

.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; }
tr:last-child td { border-bottom:none; }
table.kv th { width:180px; }

.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.badge.s-active, .badge.h-healthy { color:var(--ok); border-color:var(--ok); }
.badge.s-suspended, .badge.h-stale { color:var(--warn); border-color:var(--warn); }
.badge.s-archived { color:var(--muted); }
.badge.h-unknown, .badge.h-stale { color:var(--warn); }
.badge.s-provisioning, .badge.h-provisioning { color:var(--accent); border-color:var(--accent); }

pre { background:#0b0d11; border:1px solid var(--line); border-radius:6px; padding:12px; overflow-x:auto; }

/* "Loglar" sekmesindeki konteyner log kutusu — çok satırlı, kaydırılabilir. */
.log-box { max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
/* Log satır renklendirme (bkz. highlightLogLine, panel.js): zaman damgası/URL
   turuncu, [etiket] kalın lacivert, HTTP durum kodu kalın yeşil/kırmızı. */
.log-ts { color:var(--warn); }
.log-tag { color:#5b7fd6; font-weight:700; }
.log-status-ok { color:var(--ok); font-weight:700; }
.log-status-bad { color:var(--bad); font-weight:700; }
.log-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.log-toolbar select { padding:4px 6px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
.log-follow { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
/* Loglar/Denetim izi araç çubuklarındaki "yazdıkça ara" kutusu (bkz.
   renderDetail applyLogFilter/applyAuditFilter) — sağa yaslı, ağa gitmeden
   o an yüklü satırları/kayıtları filtreler. */
.search-box {
  margin-left:auto; min-width:200px; padding:4px 8px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit;
}
/* SRE panelinden "Olay" tıklamasıyla eşleşen satırlar (bkz. goToTenantLogs,
   highlightLogLinesForEvent) — 20sn süren geçici gri vurgu. */
.log-line { display:block; border-radius:3px; transition:background-color .2s ease; }
.log-line--highlight { background:color-mix(in srgb, var(--muted) 35%, transparent); }
/* Denetim izi tablosu da Loglar gibi sabit yükseklikte kaydırılır (bkz.
   renderDetail auditWrap) — uzun geçmişte sayfa sonsuza uzamasın. */
.audit-scroll { max-height:340px; overflow:auto; }

/* Denetim izi: tıklanabilir satır + açılır tam ayrıntı. */
.audit-table td, .audit-table th { vertical-align:top; }
.audit-row { cursor:pointer; }
.audit-row:hover td { background:color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.audit-row--error td { color:var(--bad); }
.audit-caret { display:inline-block; color:var(--muted); transition:transform .12s ease; }
.audit-row.is-open .audit-caret { transform:rotate(90deg); }
.audit-preview { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.audit-detail-row td { background:#0b0d11; }
.audit-detail {
  margin:0; max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-word;
  font-size:12px; border:none; background:none; padding:4px 0;
}

/* Sekmeli görünüm (Denetim izi / Loglar) — bkz. renderTabs(), panel.js. */
.tabbar { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.tab {
  background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);
  padding:8px 12px; font:inherit; cursor:pointer; border-radius:6px 6px 0 0;
}
.tab:hover { color:var(--text); }
.tab.is-active { color:var(--text); border-bottom-color:var(--accent); }

.action-row { display:flex; gap:8px; }

#new-tenant, #rollout, #sre, #list { margin-bottom:18px; }
#sre h2, #list h2 { margin:0 0 8px; font-size:16px; }

/* SRE/Kiracılar başlık satırı: h2 solda, sağ üstte tek eylem düğmesi. */
.panel-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.panel-header h2 { margin:0 0 8px; }

/* SRE ve Kiracılar aynı kart görünümünü paylaşır (bkz. panel.html). */
.panel-box { margin-top:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
#rollout-body.panel-box { margin-top:12px; }
.panel-box h3 { margin:16px 0 8px; font-size:14px; }
.panel-box .summary-grid { margin-bottom:6px; }
#list-body .list-header { margin-top:12px; }
#rollout-form { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:10px; }
#rollout-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
#rollout-form label.checkbox { flex-direction:row; align-items:center; gap:6px; }
#rollout-form input:not([type=checkbox]) { padding:7px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
#rollout-form button { grid-column:1 / -1; justify-self:start; }
#rollout-form p { grid-column:1 / -1; margin:0; }
#rollout-form .field-hint { font-size:11px; color:var(--muted); opacity:.75; }
#new-tenant-form { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
/* Doğrudan çocuk: .ms-* bileşeni kendi iç label/input/button'larını yönetir. */
#new-tenant-form > label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
#new-tenant-form > label input, #new-tenant-form > label select { padding:7px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
#new-tenant-form > button { grid-column:1 / -1; justify-self:start; }
#new-tenant-form > p { grid-column:1 / -1; margin:0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.actions button { background:var(--panel); border:1px solid var(--line); color:var(--text); }
.actions button:hover:not(:disabled) { border-color:var(--accent); }
.actions button:disabled { opacity:.5; cursor:default; }
.actions button.danger { border-color:var(--bad); color:var(--bad); }
.actions button.danger:hover:not(:disabled) { background:var(--bad); color:#fff; }

.feature-group { margin:8px 0 4px; }
.feature-boxes { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0; }
.feature-toggle { display:inline-flex; align-items:center; gap:4px; font-size:14px; }
.feature-group > label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); max-width:420px; margin:6px 0; }
.feature-group > label input, .feature-group > label select {
  padding:7px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit;
}
/* Checkbox alanı (ör. sürüm değiştirmede "Migration çalıştır"): metin girişi
   gibi kutulanmaz, satır olarak tik kutusu + etiket yan yana durur. */
.feature-group > label.checkbox {
  flex-direction:row; align-items:center; gap:6px; max-width:none;
}
.feature-group > label.checkbox input {
  width:auto; padding:0; border:none; background:none; accent-color:var(--accent);
}
.feature-group button { background:var(--panel); border:1px solid var(--line); color:var(--text); }
.feature-group button:hover:not(:disabled) { border-color:var(--accent); }
.feature-group button:disabled { opacity:.5; cursor:default; }

.login-body { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px; width:320px; }
.login-card h1 { margin:0 0 4px; font-size:20px; }
.login-card form { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.login-card label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.login-card input { padding:8px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }

/* Sihirbaz alanı (label ile aynı dizilim, ama içinde özel bileşen var) */
#new-tenant-form .field { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
#new-tenant-form .field-hint { font-size:11px; color:var(--muted); opacity:.75; }
#new-tenant-form input::placeholder { color:var(--muted); opacity:.55; }
#new-tenant-form .field > .ms { font-size:14px; }

/* Çoklu seçim kutusu (modüller / entegrasyonlar) */
.ms { position:relative; }
.ms-toggle {
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:7px; font:inherit; font-size:13px;
}
.ms-toggle:hover { filter:none; border-color:var(--accent); }
.ms.open .ms-toggle { border-color:var(--accent); }
.ms-value { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-value.empty { color:var(--muted); }
.ms-caret { color:var(--muted); font-size:11px; }
.ms-panel {
  position:absolute; z-index:20; top:calc(100% + 4px); left:0;
  min-width:100%; width:max-content; max-width:min(360px, 88vw);
  background:var(--panel); border:1px solid var(--accent); border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); padding:8px;
}
/* Sağ kenara taşarsa panel.js .flip-left ekler (son sütundaki kutu). */
.ms-panel.flip-left { left:auto; right:0; }
.ms-tools { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ms-search {
  flex:1 1 120px; min-width:0; padding:6px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:13px;
}
.ms-preset { background:var(--bg); border:1px solid var(--line); color:var(--text); padding:5px 9px; font-size:12px; }
.ms-preset:hover { border-color:var(--accent); filter:none; }
.ms-list { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.ms-option { display:flex; align-items:flex-start; gap:8px; padding:5px 6px; border-radius:4px; cursor:pointer; }
.ms-option:hover { background:var(--bg); }
.ms-option input { margin-top:2px; flex:none; }
.ms-option-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ms-option-label { color:var(--text); font-size:13px; }
.ms-option-desc { color:var(--muted); font-size:11px; }