/* ==========================================================================
   brain.css — Şirket Beyni paneli için stiller.

   Ana görsel kimlik admin.css ile aynı: aynı renk tokenları, aynı tipografi,
   aynı auth-gate görünümü. Sayfa düzeni farklı (sidebar + içerik) ve
   önem rozetleri / iş kartları gibi yeni bileşenler eklenmiştir.
   ========================================================================== */

:root {
  --panel: rgba(12, 22, 43, 0.72);
  --panel-strong: rgba(14, 26, 50, 0.82);
  --panel-soft: rgba(15, 28, 56, 0.55);
  --line: rgba(116, 170, 255, 0.24);
  --line-strong: rgba(137, 213, 255, 0.42);
  --muted: #95abc8;
  --accent: #7cf2ff;
  --accent-2: #3a8dff;
  --accent-soft: rgba(124, 242, 255, 0.16);
  --glow: 0 0 0 1px rgba(81, 179, 255, 0.22), 0 18px 48px rgba(5, 14, 30, 0.62);
  --glow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px rgba(2, 8, 22, 0.45);
  --glow-strong: 0 0 0 1px rgba(124, 242, 255, 0.45), 0 0 28px rgba(124, 242, 255, 0.22);
  --button-hover-filter: brightness(1.06);
  --button-hover-border: rgba(137, 213, 255, 0.56);
  --radius-md: 12px;
  --radius-lg: 16px;

  --severity-high: #ff6b6b;
  --severity-medium: #ffba59;
  --severity-low: #7cf2ff;
  --health-good: #4ade80;
  --health-mid: #ffba59;
  --health-bad: #ff6b6b;

  /* Channel colors — keep in sync with styles.css :root. Each
     top-level nav button has one fixed brand color across every
     page so the association is learnable. */
  --color-sohbet-grad: linear-gradient(135deg, #a8e3ff 0%, #5cc6ff 45%, #1f9eff 100%);
  --color-sohbet-shadow: rgba(31, 158, 255, 0.35);
  --color-admin-grad: linear-gradient(135deg, #ffd99f 0%, #ffb866 45%, #f48a2a 100%);
  --color-admin-shadow: rgba(244, 138, 42, 0.35);
  --color-beyin-grad: linear-gradient(135deg, #b3f0c4 0%, #5fda94 45%, #1fb368 100%);
  --color-beyin-shadow: rgba(31, 179, 104, 0.35);
}

* { box-sizing: border-box; }

button,
input,
select,
textarea,
summary,
optgroup,
option {
  font-family: inherit;
}

html {
  scrollbar-color: rgba(124, 242, 255, 0.32) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #eaf3ff;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-color: #060c18;
  background-image:
    radial-gradient(1100px 620px at 8% 12%, rgba(52, 236, 255, 0.10) 0%, transparent 60%),
    radial-gradient(900px 540px at 92% 8%, rgba(111, 121, 255, 0.10) 0%, transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(43, 125, 255, 0.13) 0%, transparent 65%),
    linear-gradient(160deg, #040816 0%, #08101d 42%, #0a1530 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
body::before {
  width: 520px; height: 520px; left: -180px; top: 14%;
  background: radial-gradient(circle, rgba(52, 236, 255, 0.45) 0%, rgba(52, 236, 255, 0.04) 65%);
  opacity: 0.32;
}
body::after {
  width: 460px; height: 460px; right: -160px; bottom: 6%;
  background: radial-gradient(circle, rgba(111, 121, 255, 0.55) 0%, rgba(111, 121, 255, 0.05) 68%);
  opacity: 0.34;
}

::selection { background: rgba(124, 242, 255, 0.32); color: #eaf3ff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 242, 255, 0.28), rgba(58, 141, 255, 0.32));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}

/* ---------- Auth gate (mirrors admin) ---------- */
.auth-gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: 1rem; z-index: 60; overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(52, 236, 255, 0.2) 0%, transparent 36%),
    radial-gradient(circle at 85% 84%, rgba(43, 125, 255, 0.28) 0%, transparent 34%),
    linear-gradient(160deg, #040816 0%, #08101d 42%, #0a1530 100%);
}
.auth-card {
  position: relative; z-index: 1;
  width: min(92vw, 420px);
  border: 1px solid var(--line);
  border-radius: 16px; padding: 1.1rem;
  background: var(--panel); backdrop-filter: blur(18px);
  box-shadow: var(--glow); text-align: center;
}
.brand-label {
  margin: 0; font-size: 0.74rem; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.auth-card h2 { margin: 0.28rem 0 0.5rem; font-weight: 700; }
.auth-desc { margin: 0 0 0.85rem; color: #c4daf5; font-size: 0.92rem; }
.auth-status { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.82rem; }
#google-login-btn { display: inline-flex; justify-content: center; }

.background-shape { display: none; }

/* ---------- Shell + topbar ---------- */
.brain-shell.locked { display: none; }
.brain-shell {
  /* Full viewport width so the rail can hug the LEFT edge of the
     screen. Matches the admin-shell pattern: max-width / centering
     moves OFF the shell and ONTO .brain-main so the rail anchors
     to the viewport, not the centered container. */
  --rail-left-w: 308px;
  --rail-anim-dur: 420ms;
  --rail-anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
  padding: 1rem 0;
  position: relative; z-index: 1;
}

.brain-main {
  /* Both side lanes are permanently reserved:
       margin-left  = left rail (--rail-left-w)
       margin-right = notification panel (same 308px width as the rail)
     so opening either side never resizes the brain content AND
     the notification panel never overlaps it. */
  margin-left: var(--rail-left-w);
  margin-right: var(--rail-left-w);
  padding: 0.1rem 1.25rem 1.4rem 1.25rem;
  max-width: 1280px;
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(10, 20, 38, 0.45) 100%);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
  margin-bottom: 1rem;
}
.topbar h1 {
  margin: 0; font-size: 1.18rem;
  background: linear-gradient(135deg, #d2f1ff 0%, #7cf2ff 50%, #6ba7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#brain-who { display: block; margin-top: 0.3rem; color: #b3c7e5; font-size: 0.82rem; }
.top-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.topbar-status {
  margin: 0; padding: 0; color: #97adca; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28rem;
}
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem; font-weight: 500;
  color: #eaf3ff;
  background: rgba(16, 31, 57, 0.92);
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  text-decoration: none;
}
.btn:not(:disabled):hover {
  filter: var(--button-hover-filter);
  border-color: var(--button-hover-border);
}
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn.primary {
  background: linear-gradient(135deg, #84f7ff 0%, #1dd8ff 45%, #1fa8ff 100%);
  color: #041225;
  border-color: rgba(124, 242, 255, 0.6);
  box-shadow: 0 8px 22px rgba(31, 168, 255, 0.35);
  font-weight: 600;
}
.btn.danger {
  border-color: rgba(255, 107, 107, 0.5);
  color: #ffd3d3;
}
/* Filled red — used for "Sil" (per row) and "Seçilenleri Sil". */
.btn.btn-danger {
  background: linear-gradient(135deg, #ff8888 0%, #ff5252 50%, #d63838 100%);
  color: #1a0606;
  border-color: rgba(255, 90, 90, 0.7);
  box-shadow: 0 6px 18px rgba(214, 56, 56, 0.32);
  font-weight: 600;
}
.btn.btn-danger:disabled {
  background: rgba(80, 30, 30, 0.55);
  color: #c79292;
  box-shadow: none;
  opacity: 0.85;
}
/* Outlined red — used for "Tümünü Sil" (rare, intentionally separated
   from the per-row delete style so accidental clicks are less likely). */
.btn.btn-danger-outline {
  background: transparent;
  color: #ff9b9b;
  border-color: rgba(255, 107, 107, 0.55);
}
.btn.btn-danger-outline:not(:disabled):hover {
  background: rgba(214, 56, 56, 0.18);
  border-color: rgba(255, 90, 90, 0.85);
}

/* Inline link-style button — used in the topic detail modal to expand
   the truncated summary into the full document_summary text. Looks like
   a hyperlink, behaves like a button. */
.btn.btn-link {
  background: transparent;
  border: none;
  color: #1fa8ff;
  padding: 0.15rem 0.25rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.btn.btn-link:hover { color: #66c5ff; }
.btn.btn-link:disabled { color: rgba(159, 175, 200, 0.6); cursor: progress; }

/* Topic detail modal — full-summary expansion + subscore/reason styling.
   These classes are written by showTopicDetail() in brain.js. */
.topic-summary-block {
  margin: 0 0 0.85rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.topic-summary-text {
  white-space: pre-wrap;
  line-height: 1.55;
  color: #d4dcf0;
}
.topic-summary-text-full {
  max-height: 45vh;
  overflow-y: auto;
  padding-right: 0.5rem;
  border-left: 2px solid rgba(120, 160, 220, 0.35);
  padding-left: 0.75rem;
}
.topic-summary-doc-head {
  font-weight: 600;
  color: #cfe6ff;
  margin: 0.6rem 0 0.25rem 0;
}
.topic-summary-doc-head:first-child { margin-top: 0; }
.topic-summary-doc-body {
  color: #c4cfe2;
  margin-bottom: 0.5rem;
}
.muted { color: rgba(159, 175, 200, 0.7); font-size: 0.85em; }

.topic-subscores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 0.4rem 0;
}
.topic-subscore-label {
  color: rgba(190, 205, 230, 0.85);
  font-style: italic;
}
.topic-subscore-hint {
  color: rgba(159, 175, 200, 0.75);
  font-size: 0.85em;
}

.health-reasons { margin: 0.25rem 0 0.75rem 0; padding-left: 1.25rem; }
.health-reasons li { margin-bottom: 0.2rem; line-height: 1.45; }
.reason-scope {
  font-size: 0.82em;
  color: rgba(159, 175, 200, 0.85);
  margin-left: 0.25rem;
}
.reason-value {
  font-size: 0.85em;
  color: rgba(190, 205, 230, 0.85);
  margin-left: 0.35rem;
}
.reason-delta-bad   { color: #ff8a8a; margin-left: 0.35rem; font-weight: 600; }
.reason-delta-good  { color: #6ee7a7; margin-left: 0.35rem; font-weight: 600; }
.reason-delta-neutral { color: rgba(159, 175, 200, 0.85); margin-left: 0.35rem; }

.btn.success {
  border-color: rgba(74, 222, 128, 0.55);
  color: #c8ffe1;
}
.btn.chat-link-btn {
  background: var(--color-sohbet-grad);
  color: #041225; border-color: rgba(124, 159, 255, 0.6);
  box-shadow: 0 8px 22px var(--color-sohbet-shadow); font-weight: 600;
}
.refresh-btn-icon { font-size: 1rem; line-height: 1; }

/* ---------- Layout: content only (sidebar moved to .left-rail) ---------- */
.brain-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: flex-start;
}

.brain-sidebar {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
  position: sticky; top: 0.5rem;
}
.brain-nav-btn {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #b7d5ff;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.brain-nav-btn:hover {
  background: rgba(20, 38, 70, 0.55);
  border-color: var(--line);
}
.brain-nav-btn.active {
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.18) 0%, rgba(58, 141, 255, 0.18) 100%);
  border-color: var(--line-strong);
  color: #eaf3ff;
  box-shadow: 0 0 0 1px rgba(124, 242, 255, 0.18) inset;
}
.brain-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(20, 38, 70, 0.6);
  font-size: 0.95rem;
}
.brain-nav-count {
  margin-left: auto;
  min-width: 1.5rem; padding: 0 0.45rem;
  font-size: 0.75rem; line-height: 1.4rem;
  text-align: center; border-radius: 999px;
  background: rgba(124, 242, 255, 0.18);
  color: #cfeaff;
  display: none;
}
.brain-nav-count.visible { display: inline-block; }

/* ---------- Panels ---------- */
.brain-content { min-width: 0; }
.brain-panel {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  backdrop-filter: blur(14px);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--glow-soft);
}
.brain-panel.active { display: block; }
.panel-head {
  display: flex; flex-wrap: wrap; gap: 0.65rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
}
.panel-head h2 {
  margin: 0; font-size: 1.1rem; font-weight: 600;
  color: #eaf3ff;
}
.panel-head-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}

/* ---------- Form controls ----------
   .brain-select is intentionally aligned to the admin panel's filter /
   role-select look (admin.css → .documents-filter-summary and
   .user-role-select). Native <select> chrome is removed (`appearance:
   none`) and replaced with the same two-triangle chevron the admin uses
   so every dropdown across the two panels reads as one component. */
.brain-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(10, 18, 36, 0.92);
  background-image:
    linear-gradient(45deg, transparent 50%, #a9c8ec 50%),
    linear-gradient(135deg, #a9c8ec 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 8px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  color: #eaf3ff;
  padding: 0.45rem 1.85rem 0.45rem 0.62rem;
  font-size: 0.86rem;
  min-height: 38px;
  min-width: 140px;
  cursor: pointer;
}
.brain-select:hover {
  border-color: rgba(120, 196, 255, 0.55);
}
.brain-select:focus-visible,
.brain-select:focus {
  outline: none;
  border-color: rgba(120, 196, 255, 0.75);
}
/* Native option list still uses the browser theme; force the dark palette
   so the open menu doesn't flash white. */
.brain-select option {
  background: #0a1224;
  color: #eaf3ff;
}

.brain-input {
  background: rgba(8, 16, 31, 0.88);
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: 8px;
  color: #eaf3ff;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 110px;
}
.brain-checkbox {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; color: #cfeaff;
}

/* ---------- Textarea (matches .brain-input on the dark theme) ---------- */
.brain-textarea {
  width: 100%;
  background: rgba(8, 16, 31, 0.88);
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: 8px;
  color: #eaf3ff;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  resize: vertical;
}
.brain-textarea:focus-visible,
.brain-textarea:focus {
  outline: none;
  border-color: rgba(124, 242, 255, 0.6);
}

/* ---------- Conflict resolution ("Karara bağla") form ---------- */
.conflict-resolve-context {
  border-left: 3px solid var(--color-beyin-grad, #3ad29f);
  background: rgba(58, 210, 159, 0.07);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.8rem;
}
.conflict-resolve-context h4 {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.85rem;
}
.conflict-resolve-context ul {
  margin: 0;
  padding-left: 1.1rem;
}
.conflict-resolve-context li {
  margin-bottom: 0.4rem;
}
.conflict-resolve-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.conflict-resolve-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #eaf3ff;
  cursor: pointer;
}
.conflict-resolve-opt input[type="radio"] {
  margin-top: 0.2rem;
  accent-color: #7cf2ff;
}
.btn.btn-primary {
  background: var(--color-beyin-grad, linear-gradient(135deg, #5fda94, #1fb368));
  color: #06251a;
  border: none;
  font-weight: 600;
}

/* ---------- Cards (overview KPIs) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.card {
  border: 1px solid rgba(116, 170, 255, 0.2);
  border-radius: 10px; padding: 0.75rem 0.85rem;
  background: rgba(12, 24, 48, 0.78);
}
.card .label {
  margin: 0; font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.04em;
}
.card .value {
  margin: 0.3rem 0 0; font-size: 1.4rem; font-weight: 700;
  color: #eaf3ff;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}
.overview-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  padding: 0.85rem 0.95rem;
}
.overview-block h3 {
  margin: 0 0 0.5rem; font-size: 0.95rem; color: #cfeaff;
}
.bullet-list { list-style: disc; padding-left: 1.2rem; margin: 0; color: #d6e7ff; font-size: 0.88rem; line-height: 1.5; }
.bullet-list li { margin-bottom: 0.2rem; }
.severity-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.severity-list li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(8, 16, 31, 0.55);
  border: 1px solid rgba(116, 170, 255, 0.18);
  font-size: 0.85rem;
}
.severity-list .item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Narrative blocks (department_analysis, company_analysis,
   executive_summary). Long-form prose produced by the brain LLMs. ---------- */
.brain-narrative {
  margin: 0.75rem 0 0.6rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid rgba(116, 170, 255, 0.55);
  background: rgba(8, 16, 31, 0.45);
  border-radius: 0 8px 8px 0;
}
.brain-narrative-heading {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ecbff;
}
.brain-narrative-body p {
  margin: 0 0 0.55rem;
  color: #e3edff;
  font-size: 0.9rem;
  line-height: 1.55;
}
.brain-narrative-body p:last-child { margin-bottom: 0; }

/* ---------- Journal viewer (period picker over the rolling
   daily/weekly/quarterly analysis) ---------- */
.journal-viewer {
  margin: 0.9rem 0 0.6rem;
  padding: 0.8rem 0.95rem 0.9rem;
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: var(--radius-md);
  background: rgba(8, 16, 31, 0.4);
}
.journal-viewer-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.6rem;
  margin: 0 0 0.45rem;
}
.journal-viewer-head h3,
.journal-viewer-head h4 { margin: 0; }
.journal-period-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem;
}
.journal-period-select { min-width: 14rem; max-width: 100%; }
.journal-viewer-meta {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

/* ---------- Tables ---------- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(8, 14, 28, 0.55);
}
.table-scroll-x { overflow-x: auto; }
.brain-panel table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
}
.brain-panel th,
.brain-panel td {
  border-bottom: 1px solid rgba(116, 170, 255, 0.18);
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  text-align: left;
  vertical-align: middle;
}
.brain-panel th {
  color: #b7d5ff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(12, 24, 48, 0.55);
  position: sticky; top: 0;
}
.brain-panel tbody tr:hover { background: rgba(20, 38, 70, 0.45); }

.row-actions { display: flex; flex-wrap: nowrap; gap: 0.35rem; }
.row-actions .btn {
  padding: 0.28rem 0.55rem; font-size: 0.78rem;
}

/* Small button variant — used inline next to topic names in the
   pivoted (one-row-per-document) topics table. */
.btn.btn-sm {
  padding: 0.22rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  border-radius: 8px;
}

/* ---------- Pivoted topics-by-document table ---------- */

/* Konu cell: scrollable list of editable topic names. Each <li> holds
   the input + Kaydet/Detay/Sil. We cap height so a doc with 20 topics
   doesn't push the row to 600px tall — 7-8 entries fit before the
   internal scrollbar kicks in. */
.topic-konu-cell {
  vertical-align: top;
  min-width: 22rem;
  max-width: 32rem;
  padding: 0.4rem 0.6rem;
}
.konu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 14rem;
  overflow-y: auto;
}
.konu-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.25rem 0.18rem 0.05rem;
  border-radius: 7px;
}
.konu-item:hover { background: rgba(20, 38, 70, 0.45); }
.konu-name-input {
  flex: 1 1 auto;
  min-width: 0;            /* allow shrink inside flex */
  padding: 0.32rem 0.55rem;
  font-size: 0.86rem;
  color: #eaf3ff;
  background: rgba(8, 18, 38, 0.65);
  border: 1px solid rgba(116, 170, 255, 0.22);
  border-radius: 7px;
  font-family: inherit;
}
.konu-name-input:focus {
  outline: none;
  border-color: rgba(124, 242, 255, 0.55);
  background: rgba(8, 18, 38, 0.85);
}
.konu-item-buttons {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* Add-row sits at the bottom of every .konu-list. It mirrors a
   .konu-item shell so it lines up with the editable rows above it,
   but its sole content is a full-width "+" button. After a
   successful add, the list re-renders with the new <li> ABOVE this
   row so the "+" naturally floats back to the bottom. */
.konu-add-item {
  justify-content: stretch;
}
.konu-add-item:hover { background: transparent; }
.konu-add-item .js-topic-add {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(0.32rem * 2 + 0.86rem * 1.4); /* match input height */
  padding: 0.18rem 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: #cfeaff;
  background: rgba(124, 242, 255, 0.08);
  border: 1px dashed rgba(124, 242, 255, 0.35);
  border-radius: 7px;
  cursor: pointer;
}
.konu-add-item .js-topic-add:hover {
  background: rgba(124, 242, 255, 0.16);
  border-style: solid;
  border-color: rgba(124, 242, 255, 0.6);
  color: #eaf6ff;
}
.konu-add-item .js-topic-add:focus-visible {
  outline: 2px solid rgba(124, 242, 255, 0.7);
  outline-offset: 1px;
}

/* The single file_id cell — fixed-width-ish, monospace so long
   uploaded ids stay readable without dominating the row. The Detay
   button sits inline and can wrap to the next line on narrow viewports. */
.topic-doc-cell {
  vertical-align: middle;
  max-width: 22rem;
}
.topic-doc-cell .topic-doc-id {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Menlo", monospace);
  font-size: 0.78rem;
  color: #cfeaff;
  margin-right: 0.45rem;
  word-break: break-all;
  vertical-align: middle;
}
.topic-doc-cell .btn { vertical-align: middle; }

/* ---------- Topics toolbar (bulk-select actions) ---------- */
.topics-toolbar {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0.4rem 0 0.55rem;
  padding: 0.45rem 0.65rem;
  background: rgba(14, 26, 50, 0.55);
  border: 1px solid rgba(116, 170, 255, 0.18);
  border-radius: 10px;
  flex-wrap: wrap;
}
.topics-toolbar-info {
  color: var(--muted);
  font-size: 0.82rem;
  margin-right: auto;
}

/* Pagination bar for the Konular tab — sits directly under the table,
   same chrome as the toolbar so the panel feels framed top and bottom. */
.topics-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.55rem 0 0.4rem;
  padding: 0.45rem 0.65rem;
  background: rgba(14, 26, 50, 0.55);
  border: 1px solid rgba(116, 170, 255, 0.18);
  border-radius: 10px;
  flex-wrap: wrap;
}
.topics-pagination:empty {
  display: none;
}
.topics-pagination-info {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Tight checkbox column — both header and cells. */
.brain-panel th.col-select,
.brain-panel td.col-select {
  width: 32px;
  padding-left: 0.55rem;
  padding-right: 0.25rem;
  text-align: center;
}
.brain-panel td.col-select input[type="checkbox"],
.brain-panel th.col-select input[type="checkbox"] {
  cursor: pointer;
  accent-color: #1fa8ff;
}

/* ---------- Severity / health badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-sev-high {
  background: rgba(255, 107, 107, 0.18);
  color: #ff9b9b; border-color: rgba(255, 107, 107, 0.45);
}
.badge-sev-medium {
  background: rgba(255, 186, 89, 0.18);
  color: #ffd089; border-color: rgba(255, 186, 89, 0.45);
}
.badge-sev-low {
  background: rgba(124, 242, 255, 0.16);
  color: #b8f5ff; border-color: rgba(124, 242, 255, 0.4);
}
.badge-status-open  { background: rgba(255, 186, 89, 0.16); color: #ffd089; border-color: rgba(255, 186, 89, 0.4); }
.badge-status-drafted { background: rgba(124, 242, 255, 0.16); color: #b8f5ff; border-color: rgba(124, 242, 255, 0.4); }
.badge-status-solved { background: rgba(167, 139, 250, 0.18); color: #ddd2ff; border-color: rgba(167, 139, 250, 0.45); }
.brain-solution-block { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 0.6rem; background: rgba(167, 139, 250, 0.08); }
.brain-solution-block h4 { margin: 0 0 0.5rem; }
.brain-solution-block > div { margin-bottom: 0.4rem; }
.brain-solution-draft { white-space: pre-wrap; }
.brain-solution-id { font-size: 0.78rem; opacity: 0.75; }
/* "Verilen Karar" block appended to a resolved conflict's Detay. */
.conflict-decision-block { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid rgba(74, 222, 128, 0.4); border-left-width: 3px; border-radius: 0.6rem; background: rgba(74, 222, 128, 0.09); }
.conflict-decision-block h4 { margin: 0 0 0.5rem; }
.conflict-decision-block > div { margin-bottom: 0.4rem; }
.conflict-decision-verdict { font-weight: 600; }
.conflict-decision-canonical { white-space: pre-wrap; }
.conflict-decision-meta { font-size: 0.78rem; opacity: 0.8; }
.conflict-decision-block.conflict-decision-stale { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
/* Inline "Çözümü Gör" expansion row beneath a problem row. */
.problem-solution-row > td { background: rgba(167, 139, 250, 0.06); padding: 0.25rem 1rem 0.9rem; }
.problem-solution-row .brain-solution-block { margin-top: 0.5rem; }
.badge-status-approved { background: rgba(74, 222, 128, 0.18); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.45); }
.badge-status-resolved { background: rgba(74, 222, 128, 0.14); color: #a5f0bb; border-color: rgba(74, 222, 128, 0.35); }
.badge-status-rejected { background: rgba(255, 107, 107, 0.14); color: #ffb6b6; border-color: rgba(255, 107, 107, 0.4); }
.badge-status-dismissed { background: rgba(148, 163, 184, 0.16); color: #d3dce8; border-color: rgba(148, 163, 184, 0.4); }
.badge-status-published { background: rgba(58, 141, 255, 0.18); color: #cce0ff; border-color: rgba(58, 141, 255, 0.45); }
.badge-status-default { background: rgba(116, 170, 255, 0.14); color: #cfeaff; border-color: rgba(116, 170, 255, 0.32); }

/* Unified Problemler tab — origin (Kaynak) badges */
.badge-source-chat   { background: rgba(124, 242, 255, 0.14); color: #b8f5ff; border-color: rgba(124, 242, 255, 0.35); }
.badge-source-corpus { background: rgba(167, 139, 250, 0.16); color: #d8caff; border-color: rgba(167, 139, 250, 0.35); }
.badge-source-gmail  { background: rgba(251, 191, 36, 0.16); color: #ffe09a; border-color: rgba(251, 191, 36, 0.35); }

/* Unified Problemler tab — kind (Tür) badges */
.badge-type-gap      { background: rgba(255, 186, 89, 0.14); color: #ffd089; border-color: rgba(255, 186, 89, 0.35); }
.badge-type-conflict { background: rgba(255, 107, 107, 0.16); color: #ff9b9b; border-color: rgba(255, 107, 107, 0.4); }
.badge-type-aged     { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); }
.badge-type-problem  { background: rgba(244, 114, 182, 0.16); color: #ffc6e1; border-color: rgba(244, 114, 182, 0.4); }

.health-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  min-width: 3.5rem; justify-content: center;
}
.health-bar {
  position: relative;
  width: 100px; height: 6px;
  background: rgba(116, 170, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
/* Centerline tick — marks the 0 point on the [-100, +100] scale so users
   can immediately see whether health is net-positive (fill grows right)
   or net-negative (fill grows left). */
.health-bar::after {
  content: "";
  position: absolute;
  left: 50%; top: -1px; bottom: -1px;
  width: 1px;
  background: rgba(255, 255, 255, 0.45);
  z-index: 1;
}
.health-bar > span {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 4px;
}
/* Positive scores: bar grows rightward from the centerline. */
.health-bar > span.pos { left: 50%; }
/* Negative scores: bar grows leftward toward the start of the track. */
.health-bar > span.neg { right: 50%; }
.health-good { background: rgba(74, 222, 128, 0.2); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.5); }
.health-good > span { background: linear-gradient(90deg, #4ade80, #2dd4bf); }
.health-mid  { background: rgba(255, 186, 89, 0.2); color: #ffd089; border-color: rgba(255, 186, 89, 0.5); }
.health-mid  > span { background: linear-gradient(90deg, #fbbf24, #fb923c); }
.health-bad  { background: rgba(255, 107, 107, 0.2); color: #ff9b9b; border-color: rgba(255, 107, 107, 0.5); }
.health-bad  > span { background: linear-gradient(90deg, #ef4444, #f97316); }
/* "Veri yok" — null score, surfaced when there's no usage signal AND no
   structural problems yet. Should look distinct from a low score so admins
   don't confuse "we have no data" with "the topic is broken." */
.health-neutral { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); }
.health-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 110px; }

/* ---------- Topic type badges ---------- */
.badge.type-knowledge { background: rgba(99, 179, 237, 0.16); color: #a6d4ff; border-color: rgba(99, 179, 237, 0.35); }
.badge.type-policy    { background: rgba(252, 165, 165, 0.16); color: #fcc4c4; border-color: rgba(252, 165, 165, 0.35); }
.badge.type-process   { background: rgba(167, 139, 250, 0.16); color: #d8caff; border-color: rgba(167, 139, 250, 0.35); }
.badge.type-metric    { background: rgba(45, 212, 191, 0.16); color: #b2f0e6; border-color: rgba(45, 212, 191, 0.35); }
.badge.type-product   { background: rgba(251, 191, 36, 0.16); color: #ffe09a; border-color: rgba(251, 191, 36, 0.35); }
.badge.type-contract  { background: rgba(244, 114, 182, 0.16); color: #ffc6e1; border-color: rgba(244, 114, 182, 0.35); }
.badge.type-report    { background: rgba(125, 211, 252, 0.16); color: #c4e9ff; border-color: rgba(125, 211, 252, 0.35); }
.badge.type-unknown   { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.3); }

/* ---------- Executive briefing (top of Şirket İçgörüleri tab) ---------- */
.exec-briefing {
  margin: 0.6rem 0 1.1rem;
  padding: 0.9rem 1.05rem 1rem;
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(58, 141, 255, 0.08), rgba(12, 24, 48, 0.55));
}
.exec-briefing-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.exec-briefing-head h3 {
  margin: 0; font-size: 1.05rem; color: #e6f0ff;
  letter-spacing: 0.01em;
}
.exec-briefing-head .muted { font-size: 0.78rem; }
.exec-briefing .brain-narrative {
  /* slightly tighter spacing inside the briefing block than the
     standalone narrative blocks elsewhere */
  margin: 0.55rem 0;
}
.strategic-themes {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.85rem 0.65rem;
  border-left: 3px solid rgba(255, 191, 105, 0.6);
  background: rgba(8, 16, 31, 0.45);
  border-radius: 0 8px 8px 0;
}
.strategic-themes-list {
  list-style: none; padding: 0; margin: 0.4rem 0 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.strategic-theme {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(8, 14, 28, 0.5);
  border: 1px solid rgba(116, 170, 255, 0.18);
}
.strategic-theme-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.strategic-theme-title { font-size: 0.95rem; color: #e3edff; }
.strategic-theme-explain {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.87rem; line-height: 1.5; color: #d6e7ff;
}
.strategic-theme-depts {
  display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
}
.insights-list-heading {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.95rem;
  color: #cfeaff;
}

/* ---------- Insights list ---------- */
.insights-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
.insight-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  background: rgba(12, 24, 48, 0.6);
}
.insight-item header {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.insight-item h3 { margin: 0; font-size: 1rem; }
.insight-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  font-size: 0.78rem; color: var(--muted);
}
.insight-departments {
  display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
}
.dept-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 999px;
  background: rgba(58, 141, 255, 0.16);
  border: 1px solid rgba(58, 141, 255, 0.4);
  color: #cce0ff;
}
.insight-summary { margin: 0.3rem 0; font-size: 0.92rem; color: #d6e7ff; line-height: 1.45; }
.insight-rec {
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(124, 242, 255, 0.08);
  border-left: 3px solid var(--accent);
  font-size: 0.85rem;
  color: #d6e7ff;
}

/* ---------- Q&A events (Cevapsız Sorular) ----------
   Tighter row layout than the gaps/conflicts tables since
   this view is high-density. The question column dominates
   and clamps to a single line until the row is clicked. */
.qa-row { cursor: pointer; vertical-align: top; }
.qa-row:hover { background: rgba(124, 242, 255, 0.04); }
.qa-row.expanded { background: rgba(124, 242, 255, 0.06); }
.qa-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.82rem;
}
.qa-question-cell {
  /* Force the question column to absorb table slack. */
  min-width: 280px; max-width: 620px;
}
.qa-question {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #e6f1ff;
  /* Default: single line ellipsis. Expanded state below removes this. */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.qa-row.expanded .qa-question {
  -webkit-line-clamp: unset;
  display: block;
  white-space: pre-wrap;
}

/* Confidence pill — separate from severity/health so the visual
   vocabulary doesn't compete: green = high confidence, amber =
   borderline, red = low. Null score gets a flat neutral dash. */
.qa-confidence {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.qa-confidence-high { background: rgba(74, 222, 128, 0.18); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.4); }
.qa-confidence-mid  { background: rgba(255, 186, 89, 0.18); color: #ffd089; border-color: rgba(255, 186, 89, 0.4); }
.qa-confidence-low  { background: rgba(255, 107, 107, 0.18); color: #ff9b9b; border-color: rgba(255, 107, 107, 0.4); }
.qa-confidence-none { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.32); }
.qa-confidence-cell { white-space: nowrap; }

/* Answer-status badges. "Cevapsız" and "Başarısız" should read
   as warnings, "Kısmi" as caution, "Cevaplandı" as ok. */
.badge-qa-answered   { background: rgba(74, 222, 128, 0.16); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.4); }
.badge-qa-partial    { background: rgba(255, 186, 89, 0.18); color: #ffd089; border-color: rgba(255, 186, 89, 0.45); }
.badge-qa-unanswered { background: rgba(255, 107, 107, 0.18); color: #ff9b9b; border-color: rgba(255, 107, 107, 0.45); }
.badge-qa-failed     { background: rgba(148, 84, 222, 0.18); color: #d8b8ff; border-color: rgba(148, 84, 222, 0.45); }

/* Topic chips — same shape as .dept-chip but in the violet
   palette so an admin scanning a row sees status / confidence /
   topics as three distinct visual lanes. */
.qa-topics-cell {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  align-items: center;
  max-width: 280px;
}
.qa-topic-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #ddd1ff;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-topic-more {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.15rem;
}

/* ---------- Onay Bekleyenler (Approvals Inbox) ----------
   Stacked card layout. Each card is a self-contained section
   with its own header, count badge, help line, and item list.
   Items follow a "main info + action buttons" two-column
   pattern so the buttons line up in a vertical strip on the
   right regardless of how long the title text is. */
.approvals-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.6rem;
}
.approvals-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.55);
  padding: 0.9rem 1rem 1rem;
}
.approvals-card-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.approvals-card-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: #e6f1ff;
}
.approvals-card-icon { font-size: 1.05rem; }
.approvals-card-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(124, 242, 255, 0.16);
  color: #b8f5ff;
  border: 1px solid rgba(124, 242, 255, 0.35);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.approvals-card-help {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
}
.approvals-card-help em {
  font-style: normal;
  color: #cfeaff;
  background: rgba(124, 242, 255, 0.06);
  border-radius: 4px;
  padding: 0 0.3rem;
  border: 1px solid rgba(124, 242, 255, 0.22);
  font-size: 0.78rem;
}

.approvals-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.approvals-item {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 12, 26, 0.55);
}
.approvals-item:hover { background: rgba(6, 12, 26, 0.75); }
.approvals-item-main {
  flex: 1 1 auto; min-width: 0; /* allow text-overflow ellipsis on children */
}
.approvals-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #e6f1ff;
  margin-bottom: 0.3rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  align-items: center;
  word-break: break-word;
}
.approvals-item-meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted);
}
.approvals-meta-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(116, 170, 255, 0.1);
  border: 1px solid rgba(116, 170, 255, 0.25);
  color: #cfeaff;
  font-size: 0.72rem;
}
.approvals-meta-dept {
  background: rgba(58, 141, 255, 0.16);
  border-color: rgba(58, 141, 255, 0.4);
  color: #cce0ff;
}
.approvals-meta-date {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.74rem;
}

.approvals-item-actions {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

/* Old → New visual for the superseded row. */
.approvals-superseded-old {
  text-decoration: line-through;
  color: #ffb6b6;
  opacity: 0.85;
}
.approvals-superseded-arrow {
  color: var(--muted);
  font-weight: 700;
  margin: 0 0.15rem;
}
.approvals-superseded-new {
  color: #b9fbcd;
}

/* Draft-kind badges — sentinel-based distinction between an
   LLM-drafted real document and a "contact someone" notice.
   Visually distinct so the admin doesn't mistake a notice for
   an actual document draft. */
.badge-draft-draft  { background: rgba(124, 242, 255, 0.16); color: #b8f5ff; border-color: rgba(124, 242, 255, 0.4); }
.badge-draft-notice { background: rgba(244, 114, 182, 0.16); color: #ffd0e6; border-color: rgba(244, 114, 182, 0.45); }

/* Empty / loading / error states inside an approvals list. */
.approvals-empty {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px dashed rgba(74, 222, 128, 0.3);
  color: #a5f0bb;
  font-size: 0.85rem;
}
.approvals-loading {
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
}
.approvals-error {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: #ff9b9b;
  font-size: 0.85rem;
}

/* On narrow viewports stack the action buttons under the main
   info column so titles don't get squeezed to a single character. */
@media (max-width: 720px) {
  .approvals-item {
    flex-direction: column;
    align-items: stretch;
  }
  .approvals-item-actions { justify-content: flex-end; }
}

/* ---------- Trendler (time-series tab) ----------
   Four sub-cards on a single column (volume / open-load / confidence /
   department sparklines). Each card holds a help blurb, a square-ish
   SVG chart (viewBox 800×220, scales to container width via
   preserveAspectRatio), and an optional legend strip beneath.

   The segmented "7 / 30 / 90 gün" pill lives in the panel header — it
   shares the topbar's pill-button visual language so the admin can
   eyeball the active window without reading. */

/* Segmented day-range pill — matches existing pill-button styling so
   the trends header feels consistent with the rest of the topbar. */
.trends-range {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(6, 12, 26, 0.55);
}
.trends-range-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease;
}
.trends-range-btn:last-child { border-right: 0; }
.trends-range-btn:hover { color: #cfeaff; background: rgba(124, 242, 255, 0.06); }
.trends-range-btn.active {
  background: rgba(124, 242, 255, 0.16);
  color: #b8f5ff;
  font-weight: 600;
}
.trends-range-btn.active:hover { background: rgba(124, 242, 255, 0.22); }

/* Card grid: single column on narrow screens, two columns when the
   panel is wide enough to make side-by-side legible. */
.trends-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 0.6rem;
}
@media (min-width: 1100px) {
  .trends-grid { grid-template-columns: 1fr 1fr; }
  /* The sparkline card holds many tiny charts; let it span both columns
     so each sparkline gets enough horizontal room. */
  #trends-card-departments { grid-column: 1 / -1; }
}

.trends-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.55);
  padding: 0.9rem 1rem 1rem;
  display: flex; flex-direction: column;
  gap: 0.4rem;
  min-width: 0;          /* allow SVG to shrink inside grid track */
}
.trends-card-head {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.trends-card-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e6f1ff;
}
.trends-card-sub {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.trends-card-help {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Chart container — SVG inside is set to width:100% via viewBox. The
   container has a min-height so the layout doesn't jump while the data
   loads (the empty state takes less vertical space than a populated
   chart). */
.trends-chart {
  width: 100%;
  min-height: 160px;
  margin-top: 0.2rem;
}
.trends-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
}

/* SVG inner element styling — axis labels and grid lines. Kept here
   rather than inline so dark-mode tweaks are one place. */
.trends-axis-label {
  font-size: 10px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  fill: var(--muted);
}
.trends-grid-line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.trends-line {
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Legend strip under a chart. Each chip = a small color swatch plus a
   label. Lines get a horizontal bar swatch; dashed lines use border. */
.trends-legend {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-top: 0.4rem;
}
.trends-legend-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem;
  color: #cfeaff;
  background: rgba(6, 12, 26, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.trends-legend-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
}
.trends-legend-line {
  width: 16px; height: 3px;
  border-radius: 2px;
}
.trends-legend-dashed {
  background: transparent !important;
  border-top: 2px dashed currentColor;
  height: 0;
  width: 18px;
  /* the inline `style="background:<color>"` becomes the text color so the
     dashed border picks it up — overridden in JS via style="color:..." */
}

/* Department sparkline grid — many small lines side-by-side. The
   container CSS-grid flows responsively. */
.trends-sparklines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-top: 0.3rem;
}
.trends-sparkline {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 12, 26, 0.55);
  padding: 0.5rem 0.65rem 0.55rem;
  display: flex; flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.trends-sparkline-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem;
}
.trends-sparkline-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #cfeaff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.trends-sparkline-total {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex-shrink: 0;
}
.trends-sparkline-svg {
  display: block;
  width: 100%;
  height: 48px;
}

/* Empty-state placeholder shown when a window has no data for a
   chart (e.g. no QA events in the last 7 days). Matches the
   approvals-empty styling for consistency. */
.trends-empty {
  padding: 1.1rem 0.9rem;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.04);
  border: 1px dashed rgba(116, 170, 255, 0.25);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Jobs ---------- */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.jobs-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  padding: 0.85rem 1rem;
}
.jobs-card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.jobs-card .muted { font-size: 0.85rem; }
.jobs-card-form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end;
  margin-top: 0.65rem;
}
/* Stacked label + small numeric input so the "Geriye bakış" field
   reads as a labeled control instead of a bare number next to the
   button. Keeps the row layout horizontal — the label takes its
   natural width and the input sits underneath. */
.jobs-card-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.1;
}
.jobs-card-field-label {
  white-space: nowrap;
}
.jobs-card-field .brain-input {
  width: 5.5rem;
}
/* "yakında" job cards — disabled, dimmed, with a small badge in the
   header. Mirrors the .left-rail .brain-nav-btn.is-soon pattern used
   in the side navigation so the visual language matches. */
.jobs-card.is-soon {
  opacity: 0.5;
  filter: grayscale(45%);
  pointer-events: none;
  cursor: not-allowed;
}
.jobs-card.is-soon .btn,
.jobs-card.is-soon .brain-input {
  pointer-events: none;
}
.jobs-card-soon-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(234, 243, 255, 0.7);
  text-transform: lowercase;
  vertical-align: middle;
}

.jobs-history-title { margin: 1rem 0 0.5rem; font-size: 0.95rem; color: #cfeaff; }

.job-status-running   { color: #ffd089; }
.job-status-completed { color: #b9fbcd; }
.job-status-failed    { color: #ff9b9b; }
.job-status-queued    { color: #cce0ff; }

/* ---------- Job phase column ----------
   Stacked label + slim progress bar + percentage. Rendered by
   jobPhaseCell() in brain.js. Stays compact so it fits next to the
   status badge without making the row dramatically taller. The bar
   uses --accent so completed phases match the rest of the UI. */
.job-phase { display: flex; flex-direction: column; gap: 4px; min-width: 11rem; }
.job-phase-label { font-size: 0.78rem; color: #e6f1ff; line-height: 1.2; }
.job-phase-label.muted { color: #8aa3bf; font-style: italic; }
.job-phase-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.job-phase-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5dd2a1, #4aa8ff);
  transition: width 0.4s ease;
}
.job-phase-pct { font-size: 0.7rem; color: #8aa3bf; }

/* Friendly job-detail cell (replaces the old raw-JSON <pre> dump). */
.job-detail { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: #cdd9ea; line-height: 1.35; max-width: 22rem; }
.job-detail > div { white-space: normal; word-break: break-word; }

/* ---------- Eskimiş Belgeler debug widget ----------
   Collapsed-by-default <details> block under the main table. Stays
   visually subdued so it doesn't distract from real review work. */
.brain-debug {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.brain-debug > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: #8aa3bf;
}
.brain-debug-body { margin-top: 0.6rem; }
.brain-debug-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
}
.brain-debug-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: #cfeaff;
}
.brain-debug-check {
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}

/* ---------- Loading overlay ----------
   Full-page veil shown during async fetches (Detay buttons, etc.) so
   the UI doesn't look frozen while the request is in flight. Sits at a
   higher z-index than the modal so it can also cover modals being
   populated. Toggled by brain.js show/hideLoadingOverlay(). */
.loading-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: rgba(6, 12, 24, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: all;
  /* Slight fade-in so it doesn't strobe on very fast responses. */
  animation: loading-overlay-fade 140ms ease-out;
}
.loading-overlay.hidden { display: none; }

.loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(13, 24, 46, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  min-width: 200px;
}
.loading-label {
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.02em;
}
.loading-spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #4ea7ff);
  border-right-color: var(--accent, #4ea7ff);
  animation: loading-spin 0.85s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
@keyframes loading-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Modal / drawer ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: rgba(6, 12, 24, 0.62); backdrop-filter: blur(6px);
  padding: 1rem;
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(94vw, 760px);
  max-height: 86vh; overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.2rem;
  background: rgba(13, 24, 46, 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.6rem;
}
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.modal-body {
  font-size: 0.9rem; color: #d6e7ff; line-height: 1.55;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.modal-body h4 { margin: 0.65rem 0 0.25rem; font-size: 0.92rem; color: #b7d5ff; }
.modal-body ul { margin: 0; padding-left: 1.15rem; }
.modal-body pre {
  white-space: pre-wrap; word-break: break-word;
  background: rgba(8, 16, 31, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  font-size: 0.82rem;
  max-height: 360px; overflow-y: auto;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  margin-top: 0.65rem; flex-wrap: wrap;
}

/* ---------- Departman İçgörüleri (per-department analysis report) ----------
   Full long-form report rendered when the user picks a department in
   the new "Departman İçgörüleri" tab. Visually mirrors the executive
   briefing block (Şirket İçgörüleri) so the two tabs feel like a
   matched pair — the company tab is the rollup, this one is the
   drill-down. Each sub-block stays hidden until its source field is
   populated, so an old summary missing the long-form analysis doesn't
   leave an empty heading on screen. */
.dept-insights-empty {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(116, 170, 255, 0.32);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.4);
  text-align: center;
  font-size: 0.9rem;
}
.dept-insights-report {
  margin: 0.6rem 0 0;
  display: flex; flex-direction: column;
  gap: 0.9rem;
}
.dept-insights-head {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.05rem 1rem;
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(58, 141, 255, 0.08), rgba(12, 24, 48, 0.55));
}
.dept-insights-head h3 {
  margin: 0; font-size: 1.15rem; color: #e6f0ff;
}
.dept-insights-head .muted {
  margin: 0.3rem 0 0; font-size: 0.78rem;
}
.dept-insights-health .health-pill {
  font-size: 1rem;
}
.dept-insights-block {
  padding: 0.85rem 1.05rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.5);
}
.dept-insights-block .brain-narrative-heading {
  margin: 0 0 0.5rem;
}
.dept-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}
.dept-insights-grid > .dept-insights-block { margin: 0; }
.dept-insights-report .brain-narrative {
  padding: 0.85rem 1.05rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.5);
  margin: 0;
}

/* ---------- Observer sources + cross-source synthesis ---------- */
.brain-narrative-subheading {
  margin: 0.6rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dept-insights-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.dept-source-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(124, 242, 255, 0.14);
  border: 1px solid rgba(124, 242, 255, 0.35);
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.dept-source-tag-sm {
  padding: 1px 6px;
  font-size: 0.7rem;
  margin-left: 0.35rem;
}
.dept-insights-source-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem;
}
.dept-source-card {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.35);
}
.dept-source-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

/* ---------- Solution layer (Çözüm Önerileri) ---------- */
.dept-solutions-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.dept-sol-chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.dept-sol-chip {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.72rem;
  border-radius: 999px;
  background: rgba(80, 110, 160, 0.25);
  border: 1px solid rgba(120, 160, 220, 0.35);
  color: #dde7f5;
  letter-spacing: 0.02em;
}
.dept-sol-class-uncovered       { background: rgba(255, 110, 110, 0.18); border-color: rgba(255, 130, 130, 0.55); color: #ffcfcf; }
.dept-sol-class-undiscoverable  { background: rgba(255, 200, 80, 0.18); border-color: rgba(255, 210, 110, 0.55); color: #ffe5b0; }
.dept-sol-class-partial         { background: rgba(150, 180, 255, 0.18); border-color: rgba(160, 190, 255, 0.55); color: #d6e3ff; }
.dept-sol-class-contradictory   { background: rgba(220, 130, 255, 0.18); border-color: rgba(220, 150, 255, 0.55); color: #f1ccff; }
.dept-sol-class-unknown         { background: rgba(120, 130, 145, 0.18); border-color: rgba(150, 160, 175, 0.45); color: #d0d6dd; }

.dept-sol-action-new_doc        { background: rgba(120, 230, 170, 0.20); border-color: rgba(140, 240, 180, 0.55); color: #cfeed8; }
.dept-sol-action-update_doc     { background: rgba(120, 200, 255, 0.20); border-color: rgba(140, 210, 255, 0.55); color: #d6ecff; }
.dept-sol-action-routing_fix    { background: rgba(255, 180, 120, 0.20); border-color: rgba(255, 195, 140, 0.55); color: #ffe1c8; }
.dept-sol-action-owner_review   { background: rgba(255, 130, 180, 0.20); border-color: rgba(255, 150, 195, 0.55); color: #ffd2e3; }
.dept-sol-action-none           { background: rgba(120, 130, 145, 0.18); border-color: rgba(150, 160, 175, 0.45); color: #d0d6dd; }

.dept-sol-conf-low    { opacity: 0.85; }
.dept-sol-conf-medium { opacity: 1; }
.dept-sol-conf-high   { opacity: 1; font-weight: 600; }

.dept-solutions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.dept-sol-card {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 24, 48, 0.35);
}
.dept-sol-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.dept-sol-finding-label {
  font-weight: 600;
  color: #e8eef8;
  margin-bottom: 0.2rem;
}
.dept-sol-finding-desc {
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 0.4rem;
}
.dept-sol-draft-title {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}
.dept-sol-draft-body {
  font-size: 0.88rem;
  color: #dbe3ef;
  line-height: 1.45;
}
.dept-sol-draft summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.3rem 0;
}
.dept-sol-rationale {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.dept-sol-evidence {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(120, 140, 175, 0.25);
  font-size: 0.8rem;
}
.dept-sol-evidence ul {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0 0;
}
.dept-sol-evidence li {
  margin-bottom: 0.35rem;
}
.dept-sol-evidence-title { color: #cfdcef; }
.dept-sol-evidence-preview {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

/* ---------- Misc ---------- */
.empty-row td { color: var(--muted); text-align: center; padding: 1.2rem; font-size: 0.88rem; }
.brain-link-btn {
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.22) 0%, rgba(58, 141, 255, 0.22) 100%) !important;
  border-color: rgba(124, 242, 255, 0.55) !important;
  color: #eaf3ff !important;
  font-weight: 600;
}


/* --------------------------------------------------------------
   Destructive job card ("Beyni Sıfırla")
   -------------------------------------------------------------- */
.jobs-card.jobs-card-danger {
  border-color: rgba(220, 38, 38, 0.55);
  background: linear-gradient(
    180deg,
    rgba(220, 38, 38, 0.06) 0%,
    rgba(220, 38, 38, 0.02) 100%
  );
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.08) inset;
}
.jobs-card.jobs-card-danger h3 {
  color: #b91c1c;
}
.jobs-card.jobs-card-danger code {
  background: rgba(220, 38, 38, 0.1);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.78rem;
}

/* ==========================================================================
   Strategic layer — Yapılandırma Karnesi (Blueprint) + Stratejik Brifing
   (Foresight). Reuses the existing tokens, cards, tables and narrative
   blocks; adds coverage bars, status badges, and the cited-recommendation
   list.
   ========================================================================== */

/* Compact table button (Detay). */
.btn.btn-small {
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
}

/* ---------- Blueprint: per-function coverage bars ---------- */
.blueprint-function-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.bp-function {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem 0.7rem;
  background: rgba(12, 24, 48, 0.55);
}
.bp-function-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.4rem;
}
.bp-function-name { font-size: 0.9rem; color: #e3edff; font-weight: 600; }
.bp-function-pct { font-size: 0.85rem; color: var(--muted); }
.bp-bar-track {
  height: 8px; border-radius: 999px;
  background: rgba(8, 16, 31, 0.7);
  overflow: hidden;
}
.bp-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.bp-bar-good { background: linear-gradient(90deg, #4ade80, #2dd4bf); }
.bp-bar-mid { background: linear-gradient(90deg, #ffba59, #ff9f43); }
.bp-bar-bad { background: linear-gradient(90deg, #ff6b6b, #ff8787); }
.bp-function-counts { margin: 0.4rem 0 0; font-size: 0.76rem; }

/* ---------- Blueprint: status badges ---------- */
.bp-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.74rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bp-status-have { background: rgba(74, 222, 128, 0.18); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.45); }
.bp-status-partial { background: rgba(255, 186, 89, 0.16); color: #ffe0b0; border-color: rgba(255, 186, 89, 0.45); }
.bp-status-stale { background: rgba(255, 186, 89, 0.1); color: #ffd59a; border-color: rgba(255, 186, 89, 0.32); }
.bp-status-missing { background: rgba(255, 107, 107, 0.16); color: #ffc9c9; border-color: rgba(255, 107, 107, 0.45); }
.bp-item-name { color: #e6f0ff; }
.blueprint-date-value { font-size: 0.95rem; }

/* ---------- Foresight: advisory banner ---------- */
.advisory-banner {
  margin: 0.4rem 0 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 186, 89, 0.4);
  border-left: 3px solid var(--severity-medium);
  background: rgba(255, 186, 89, 0.08);
  color: #ffe7c4;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---------- Foresight: executive summary sub-blocks ---------- */
.exec-briefing-heading { margin: 0 0 0.5rem; font-size: 1.05rem; color: #e6f0ff; }
.exec-briefing-body { font-size: 0.92rem; color: #d6e7ff; line-height: 1.55; }
.exec-briefing-body p { margin: 0 0 0.6rem; }
.foresight-meta { margin: 0.6rem 0 0; font-size: 0.78rem; }

/* ---------- Foresight: cited recommendation list ---------- */
.foresight-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.fs-rec {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem 0.95rem;
  background: rgba(12, 24, 48, 0.6);
}
.fs-rec-head {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.45rem;
}
.fs-rec-head h3 { margin: 0; font-size: 1rem; color: #e6f0ff; }
.fs-rec-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fs-category {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.74rem;
  border-radius: 999px;
  background: rgba(58, 141, 255, 0.16);
  border: 1px solid rgba(58, 141, 255, 0.4);
  color: #cce0ff;
}
.fs-confidence {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.74rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.fs-confidence-high { background: rgba(74, 222, 128, 0.18); color: #b9fbcd; border-color: rgba(74, 222, 128, 0.45); }
.fs-confidence-medium { background: rgba(255, 186, 89, 0.16); color: #ffe0b0; border-color: rgba(255, 186, 89, 0.45); }
.fs-confidence-low { background: rgba(255, 107, 107, 0.16); color: #ffc9c9; border-color: rgba(255, 107, 107, 0.45); }
.fs-rec-areas { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.4rem; }
.fs-rec-rationale { margin: 0.3rem 0; font-size: 0.9rem; color: #d6e7ff; line-height: 1.5; }
.fs-rec-step {
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(124, 242, 255, 0.08);
  border-left: 3px solid var(--accent);
  font-size: 0.85rem;
  color: #d6e7ff;
}
.fs-evidence { margin-top: 0.55rem; }
.fs-evidence-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.fs-evidence-list { list-style: none; padding: 0; margin: 0.3rem 0 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fs-evidence-list li { font-size: 0.82rem; }
.fs-evidence-list a { color: var(--accent); text-decoration: none; word-break: break-word; }
.fs-evidence-list a:hover { text-decoration: underline; }
.fs-no-evidence { margin: 0.5rem 0 0; font-size: 0.8rem; font-style: italic; }

/* ======================================================================
   Draft / suggested-document UI additions
   ====================================================================== */

/* Editable markdown body inside the draft detail modal. Visually it
   mimics the previous <pre> block — same dark panel background, same
   blue-tinted border — but it's a real textarea so the admin can click
   in and type. !important + -webkit-text-fill-color override the
   browser's native white textarea styling. `white-space: pre-wrap`
   lets long Markdown lines flow inside the box instead of triggering
   horizontal scroll. */
.draft-content-editor {
  display: block;
  width: 100%;
  min-height: 360px;
  max-height: 60vh;
  resize: vertical;
  box-sizing: border-box;
  margin: 0.5rem 0 0;
  background: rgba(10, 20, 40, 0.72) !important;
  color: #eaf3ff !important;
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-fill-color: #eaf3ff;
  caret-color: #8eeaff;
  appearance: none;
  -webkit-appearance: none;
}
/* The HTML `hidden` attribute (UA `display:none`) loses to the
   `.draft-content-editor { display:block }` rule above, so the editor
   leaked into view even when toggled off. This wins it back: the editor
   stays hidden until the "Düzenle" toggle clears the attribute. */
.draft-content-editor[hidden] { display: none; }
.draft-content-editor:focus {
  border-color: rgba(116, 170, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(116, 170, 255, 0.18);
}
.draft-content-editor::placeholder {
  color: rgba(234, 243, 255, 0.4);
}
.draft-content-hint {
  margin-top: 0.45rem;
  font-size: 0.78rem;
}

/* Rendered draft preview — mirrors the chat agent's document look so
   brain drafts no longer show as raw markdown. The "Düzenle" toggle
   swaps this for the .draft-content-editor textarea above. */
.draft-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.9rem 0 0.2rem;
}
.draft-content-head h4 {
  margin: 0;
}
.draft-rendered {
  margin: 0.5rem 0 0;
  padding: 1rem 1.15rem;
  background: rgba(10, 20, 40, 0.55);
  border: 1px solid rgba(116, 170, 255, 0.22);
  border-radius: 10px;
  color: #eaf3ff;
  font-size: 0.92rem;
  line-height: 1.65;
  max-height: 60vh;
  overflow-y: auto;
}
.draft-rendered > :first-child { margin-top: 0; }
.draft-rendered > :last-child { margin-bottom: 0; }
.draft-rendered h1,
.draft-rendered h2,
.draft-rendered h3,
.draft-rendered h4,
.draft-rendered h5,
.draft-rendered h6 {
  margin: 1.1rem 0 0.5rem;
  line-height: 1.3;
  color: #f3f8ff;
  font-weight: 650;
}
.draft-rendered h1 { font-size: 1.4rem; }
.draft-rendered h2 { font-size: 1.2rem; }
.draft-rendered h3 { font-size: 1.05rem; }
.draft-rendered h4,
.draft-rendered h5,
.draft-rendered h6 { font-size: 0.95rem; }
.draft-rendered p { margin: 0.55rem 0; }
.draft-rendered ul,
.draft-rendered ol { margin: 0.55rem 0 0.55rem 1.4rem; padding: 0; }
.draft-rendered li { margin: 0.2rem 0; }
.draft-rendered code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  background: rgba(116, 170, 255, 0.16);
  padding: 0.08em 0.36em;
  border-radius: 5px;
}
.draft-rendered-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.7rem 0;
  font-size: 0.86rem;
}
.draft-rendered-table th,
.draft-rendered-table td {
  border: 1px solid rgba(116, 170, 255, 0.26);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.draft-rendered-table thead th {
  background: rgba(116, 170, 255, 0.14);
  font-weight: 650;
}
.draft-rendered-empty {
  margin: 0;
  font-style: italic;
}
/* Embedded [[graph:<id>]] images in the rendered draft preview — same
   role as the chat agent's inline charts. */
.draft-rendered-graph-block {
  margin: 0.8rem 0;
  text-align: center;
}
.draft-rendered-graph {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(116, 170, 255, 0.22);
  border-radius: 8px;
  background: #fff;
}
.draft-rendered-graph-fail {
  margin: 0.6rem 0;
  font-style: italic;
}

/* ============================================================
   Left rail — mirrors the chat page's collapsible navigation
   panel. The brain page's section nav lives inside this rail
   (the old .brain-sidebar block was moved into <aside class="left-rail">).
   ============================================================ */

.brain-shell .left-rail {
  /* position: fixed (not absolute) so the rail's height is anchored
     to the viewport instead of the parent .brain-shell. With
     absolute positioning the rail follows whatever height the
     brain content has — short while data is loading, then tall
     — and visibly jumps. Fixed positioning makes the rail full
     viewport height from the first paint. */
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: var(--rail-left-w);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(10, 20, 38, 0.45) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
  transition: opacity var(--rail-anim-dur) var(--rail-anim-ease),
              transform var(--rail-anim-dur) var(--rail-anim-ease);
  z-index: 5;
}

.brain-shell .rail-inner {
  /* Flex column. ``.rail-top-safe`` (first child) is the frozen 56px
     icon-clearance zone; the brand + Sohbet/Admin links + divider
     stay below it as fixed-height flex items; .brain-nav-scroll
     scrolls when the section nav is taller than the available
     space; the pinned ``.rail-account--pinned`` footer always sits
     at the very bottom even when the nav is scrolled. */
  width: 308px;
  height: 100%;
  box-sizing: border-box;
  /* No top padding — ``.rail-top-safe`` owns icon clearance now.
     No bottom padding — the pinned footer reaches the rail edge. */
  padding: 0 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The scrollable nav list. flex:1 lets it consume the leftover
   vertical room; min-height:0 is the standard flex trick that
   actually lets the inner overflow scroll instead of pushing the
   container taller. */
.brain-shell .brain-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* A whisker of right padding so the scrollbar doesn't visually
     overlap nav button content. */
  padding-right: 2px;
  margin-right: -2px;
}

.brain-shell.is-left-collapsed .left-rail {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

/* Frozen top zone (left rail) — reserves 56px the left-rail toggle
   icon paints over. Empty by design; no border. */
.brain-shell .left-rail .rail-top-safe {
  flex: 0 0 56px;
  min-height: 56px;
}

/* Pinned account footer at the bottom of the rail. Negative
   horizontal margin escapes ``.rail-inner``'s padding so the footer
   spans the full rail width, with its own padding for content. */
.brain-shell .left-rail .rail-account--pinned {
  flex: 0 0 auto;
  margin: 0 -1rem;
  padding: 0.65rem 1rem;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

/* ============================================================
   Right rail (unified across chat / admin / brain). Mounted by
   connectors/upload-card.js via injectRightRail. Mirrors the chat
   page's .right-rail positioning so the visual shell matches.
   ============================================================ */
.brain-shell {
  --rail-right-w: 352px;
}
/* Right rail — glass-box positioning + clipping container, matching
   the chat page. The outer rail owns the unifying border/background/
   shadow so the three section cards sit inside a single panel, and
   the bell + right-rail toggle icons land ON the panel rather than
   floating over empty air.
   position: fixed (not absolute) so the rail's height is anchored
   to the viewport instead of the parent .brain-shell — same reasoning
   as the left rail. Otherwise the rail follows the shell's intrinsic
   height and visibly truncates on first paint while .brain-main is
   still empty. */
.brain-shell .right-rail {
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  right: 0;
  width: var(--rail-right-w);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 18px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  transition: opacity var(--rail-anim-dur) var(--rail-anim-ease),
              transform var(--rail-anim-dur) var(--rail-anim-ease);
  z-index: 5;
}
.brain-shell .right-rail .rail-inner {
  width: var(--rail-right-w);
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Frozen top zone — keeps the bell + right-rail toggle icons clear
   of scrolling content. Empty by design. */
.brain-shell .right-rail .rail-top-safe {
  /* Tightened to 44px to match styles.css — just enough clearance for
     the bell + right-rail-toggle icons sitting at viewport y≈28-60. */
  flex: 0 0 44px;
  min-height: 44px;
}
.brain-shell .right-rail .rail-inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.brain-shell.is-right-collapsed .right-rail {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}
.brain-main {
  margin-right: var(--rail-right-w);
}

/* Toggle button — fixed at top-left corner. */
.rail-toggle-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #97adca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  /* Higher than the notification panel (34) and bell (35) so the
     right-rail toggle stays clickable when the notification panel
     slides over the top-right corner. Without this the toggle gets
     visually buried under the panel and looks like it disappeared.
     Mirrors styles.css on the chat page. */
  z-index: 36;
}
.rail-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line);
}
.rail-toggle-btn:active { transform: scale(0.94); }
.rail-toggle-btn svg { display: block; }
.rail-toggle-btn--left  { left:  12px; }
.rail-toggle-btn--right { right: 12px; }

/* Brand block */
.left-rail .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.left-rail .brand h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dff5ff;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}
.left-rail .brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9ff6ff 0%, #27ceff 60%, #0f4f9f 100%);
  box-shadow: 0 0 18px rgba(29, 216, 255, 0.8);
}
.left-rail .brand-label {
  margin: 0;
  font-size: 0.74rem;
  color: #97adca;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Account row */
.left-rail .rail-account {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.left-rail .rail-account-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: #97adca;
}
.left-rail .rail-account-signout {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.left-rail .rail-account-signout:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.left-rail .rail-account-signout:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 2px;
}

/* Primary nav buttons (Sohbet / Admin) */
.left-rail .new-chat-btn {
  width: 100%;
  display: inline-block;
  text-align: center;
  border-radius: 12px;
  padding: 0.72rem 0.92rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #041225;
  background: linear-gradient(135deg, #86f8ff 0%, #1dd8ff 45%, #27a6ff 100%);
  box-shadow: 0 8px 22px rgba(16, 163, 255, 0.4);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.left-rail .new-chat-btn + .new-chat-btn { margin-top: 0.35rem; }
/* Brand-color nav links — each owns one fixed gradient across
   every page so the association sticks. Sohbet=blue, Admin=amber,
   Beyin=green. */
.left-rail .chat-link-btn {
  background: var(--color-sohbet-grad);
  box-shadow: 0 8px 22px var(--color-sohbet-shadow);
}
.left-rail .admin-link-btn {
  background: var(--color-admin-grad);
  box-shadow: 0 8px 22px var(--color-admin-shadow);
}
.left-rail .brain-link-btn {
  background: var(--color-beyin-grad);
  box-shadow: 0 8px 22px var(--color-beyin-shadow);
}

/* Divider */
.left-rail .rail-section-break {
  height: 1px;
  background: var(--line);
  opacity: 0.7;
  margin: 1.25rem 0 1rem;
}

/* Section nav buttons inside the rail keep their existing
   .brain-nav-btn styles (defined further up in this file). We
   just nudge their alignment a bit so they fit the narrower
   rail-inner padding gracefully. */
.left-rail .brain-nav-btn {
  width: 100%;
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
}
.left-rail .brain-nav-btn + .brain-nav-btn {
  margin-top: 0.15rem;
}

/* "yakında…" placeholders — Yapılandırma Karnesi / Stratejik Brifing.
   Dimmed, not clickable, with a small badge so the user sees they're
   coming. */
.left-rail .brain-nav-btn.is-soon {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(60%);
}
.left-rail .brain-nav-btn.is-soon:hover {
  background: transparent;
  border-color: transparent;
}
.left-rail .brain-nav-soon {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(234, 243, 255, 0.7);
  text-transform: lowercase;
}

/* Collapsible group parent ("Detaylar") — looks like a regular nav
   item but its caret rotates and the child list slides open. The
   children themselves keep the .brain-nav-btn style with a small
   left indent so they read as nested. */
.left-rail .brain-nav-group {
  /* No active highlight on the group parent — it never represents
     a section, it just toggles its children. */
}
.left-rail .brain-nav-group .brain-nav-caret {
  margin-left: auto;
  /* Match the chat right-panel collapsible carets (.agent-thoughts
     summary::before), which inherit ~1rem from the summary text. The
     previous 0.75rem made this triangle visibly smaller than the
     chat-side ones. */
  font-size: 1rem;
  line-height: 1;
  color: rgba(234, 243, 255, 0.6);
  transition: transform 160ms ease;
}
.left-rail .brain-nav-group.is-expanded .brain-nav-caret {
  transform: rotate(90deg);
}
.left-rail .brain-nav-group-children {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.15rem;
}
.left-rail .brain-nav-group-children[hidden] { display: none; }
.left-rail .brain-nav-btn.brain-nav-child {
  margin-left: 14px;
  width: calc(100% - 14px);
  font-size: 0.84rem;
}

@media (prefers-reduced-motion: reduce) {
  .brain-shell .left-rail,
  .brain-main {
    transition: none;
  }
}

/* Approve-draft modal: department picker. Recommended row gets a green
   halo so it's obvious why it's pre-checked. */
.approve-modal-intro {
  font-size: 0.85rem;
  color: rgba(234, 243, 255, 0.75);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.approve-dept-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.approve-dept-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.55);
  cursor: pointer;
  font-size: 0.88rem;
}
.approve-dept-row:hover { border-color: rgba(96, 165, 250, 0.45); }
.approve-dept-row.is-recommended {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.55);
}
.approve-dept-row.is-recommended:hover { border-color: rgba(34, 197, 94, 0.85); }
.approve-dept-row input[type="checkbox"] {
  accent-color: #22c55e;
  cursor: pointer;
}
.approve-dept-name { flex: 1 1 auto; color: #eaf3ff; }
.approve-dept-recommended-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.25);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* AI-suggested rows merged into Dokümanlar: purple wash + "Öneriliyor"
   badge so they're instantly distinguishable from agent drafts. */
tr.row-suggested td {
  background: rgba(139, 92, 246, 0.12);
  border-top: 1px solid rgba(139, 92, 246, 0.35);
  border-bottom: 1px solid rgba(139, 92, 246, 0.35);
}
tr.row-suggested:hover td { background: rgba(139, 92, 246, 0.2); }
.badge-suggested {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.22);
  border: 1px solid rgba(139, 92, 246, 0.6);
  border-radius: 999px;
  vertical-align: middle;
}

/* Format pills for the Dokümanlar table: blue for Word, teal/green for
   CSV. Same pill geometry as the status badges so the row visually
   balances. */
.badge-format-docx {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #cfe3ff;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.55);
  border-radius: 999px;
}
.badge-format-csv {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #b9f8d8;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.55);
  border-radius: 999px;
}

/* ================================================================== */
/*  Bildirim sistemi — Bell + Panel (shared across chat / admin /     */
/*  beyin). Selectors all prefixed .notif- so they don't collide with */
/*  page-specific styles. See notifications.js for the JS half.       */
/* ================================================================== */

.notif-bell-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #95abc8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  z-index: 35;
}

.notif-bell-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-bell-btn:active { transform: scale(0.94); }

.notif-bell-btn.is-active {
  background: rgba(29, 216, 255, 0.10);
  border-color: var(--line, rgba(116, 170, 255, 0.24));
  color: #e6f0ff;
}

.notif-bell-btn svg { display: block; }

.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04121f;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(8, 16, 29, 0.95);
  pointer-events: none;
}

.notif-bell-badge[hidden] { display: none; }

/* ---- Panel ----------------------------------------------------- */
.notif-panel {
  position: fixed;
  /* Same vertical span as the left rail so both side
     surfaces mirror each other. The bell button has a
     higher z-index (35 vs 34), so it stays clickable on top
     of the panel — and the header padding-top below makes
     room so the title never sits underneath the bell. */
  top: 1rem;
  bottom: 1rem;
  right: 0;
  /* Same width as the left rail (--rail-left-w) so the
     panel feels like a mirrored sidebar rather than a popover. */
  width: 308px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  background: var(--panel, rgba(12, 22, 43, 0.72));
  backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(81, 179, 255, 0.22),
              0 18px 48px rgba(5, 14, 30, 0.62);
  z-index: 34;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition: opacity var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1));
  overflow: hidden;
}

.notif-panel[hidden] { display: none; }

.notif-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.notif-panel-header {
  /* Title sits on the same row as the bell (bell is
     position:fixed at the panel’s top-right corner); right
     padding reserves a 60px lane so the title text never
     runs under the bell. "Tümünü okundu işaretle" stacks
     directly below the title via the column flex. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 60px 12px 14px;
  border-bottom: 1px solid var(--line, rgba(116, 170, 255, 0.24));
}

.notif-panel-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #ebf4ff);
  letter-spacing: 0.01em;
}

.notif-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notif-mark-all-btn {
  background: transparent;
  border: 0;
  color: var(--muted, #95abc8);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}

.notif-mark-all-btn:hover {
  color: var(--accent, #1dd8ff);
  background: rgba(29, 216, 255, 0.08);
}

.notif-close-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease;
}

.notif-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-empty {
  position: absolute;
  inset: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #95abc8);
  font-size: 13px;
  pointer-events: none;
}

.notif-empty[hidden] { display: none; }

/* ---- Cards ----------------------------------------------------- */
.notif-card {
  position: relative;
  display: block;
  padding: 12px 30px 12px 18px;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-radius: 12px;
  background: rgba(10, 18, 36, 0.55);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease,
              max-height 320ms cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 96px;
}

/* Top-right gray delete (×) on every card. Sits in the right gutter
   reserved by the card's padding-right so it never overlaps the time. */
.notif-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.notif-card-close:hover {
  opacity: 1;
  background: rgba(127, 161, 212, 0.16);
  color: var(--text, #ebf4ff);
}

.notif-card:hover {
  background: rgba(15, 28, 56, 0.7);
  border-color: rgba(137, 213, 255, 0.42);
}

.notif-card.is-expanded {
  max-height: 480px;
}

.notif-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, #1dd8ff);
  opacity: 1;
}

.notif-card.is-read .notif-stripe { opacity: 0.4; }
.notif-card.status-done    .notif-stripe { background: #5fda94; }
.notif-card.status-running .notif-stripe { background: #ffb866; }
.notif-card.status-started .notif-stripe { background: #7cf2ff; }
.notif-card.status-failed  .notif-stripe { background: #ff6e7a; }
.notif-card.status-problem .notif-stripe { background: #ff8b5c; }

.notif-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-card-head {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.notif-card.is-unread .notif-card-head:hover {
  background: rgba(127, 161, 212, 0.08);
  border-radius: 6px;
}

.notif-card-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--muted, #95abc8);
}

.notif-card.status-done    .notif-card-icon { color: #5fda94; }
.notif-card.status-running .notif-card-icon { color: #ffb866; }
.notif-card.status-failed  .notif-card-icon { color: #ff6e7a; }
.notif-card.status-problem .notif-card-icon { color: #ff8b5c; }

.notif-card-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #ebf4ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* When the card is expanded, drop the single-line clamp so the full
   title wraps and stays readable — mirrors the body-text expansion. */
.notif-card.is-expanded .notif-card-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.notif-card-time {
  font-size: 11px;
  color: var(--muted, #95abc8);
  white-space: nowrap;
}

.notif-card-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #95abc8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.notif-card.is-expanded .notif-card-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: auto;
  max-height: 320px;
  color: var(--text, #ebf4ff);
}

.notif-card-goto {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(29, 216, 255, 0.14);
  color: var(--accent, #1dd8ff);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(29, 216, 255, 0.32);
  transition: background 140ms ease, color 140ms ease;
}

.notif-card.is-expanded .notif-card-goto {
  display: inline-flex;
}

.notif-card-goto:hover {
  background: rgba(29, 216, 255, 0.22);
}

/* Action row for backend-driven cards (triage notifications). Unlike
   the goto link, the primary action button stays visible whether or
   not the card is expanded — it's the whole point of the card. */
.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.notif-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(95, 218, 148, 0.14);
  color: #5fda94;
  border: 1px solid rgba(95, 218, 148, 0.34);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.notif-card-action {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04222b;
  font-size: 12.5px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: filter 140ms ease, transform 60ms ease;
}

.notif-card-action:hover { filter: brightness(1.08); }
.notif-card-action:active { transform: translateY(1px); }

/* Cards carrying an action row must never clip it. The collapsed 96px
   clamp hides everything past the first ~2 lines, so drop the clamp for
   action cards — the action button is the point of the card. */
.notif-card.has-action { max-height: none; }

@media (max-width: 480px) {
  .notif-panel {
    top: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
    border-left: 0;
  }
  .notif-bell-btn { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-panel { transition: none; }
  .notif-card  { transition: none; }
}
/* ====================================================================
   Notification extras — bell attention state + toast popups.
   Append-only block; safe to duplicate identically across styles.css,
   admin.css and brain.css.
   ==================================================================== */

/* Bell goes RED whenever there are unread notifications. The
   .is-shaking keyframe is added briefly (~900 ms) on every new
   notification add/upsert so the user gets a side-to-side wiggle
   on top of the colour change. */
.notif-bell-btn.has-unread { color: #ff5d6c; }
.notif-bell-btn.has-unread .notif-bell-badge {
  background: #ff5d6c;
  border-color: rgba(255, 93, 108, 0.6);
  color: #fff;
}
@keyframes notif-bell-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-3px) rotate(-8deg); }
  30%  { transform: translateX(3px)  rotate(8deg);  }
  45%  { transform: translateX(-2px) rotate(-5deg); }
  60%  { transform: translateX(2px)  rotate(5deg);  }
  75%  { transform: translateX(-1px) rotate(-2deg); }
  100% { transform: translateX(0); }
}
.notif-bell-btn.is-shaking {
  animation: notif-bell-shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: center 30%;
}

/* Toast pop-ups — appear top-center, stack downward, auto-dismiss.
   Wired to window.solvaraNotifications.toast({type,message}).
   .is-visible toggles the slide-in transition. */
.notif-toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem 0.65rem 0.85rem;
  min-height: 38px;
  max-width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(18, 28, 50, 0.92);
  color: #ebf4ff;
  font-size: 0.88rem;
  line-height: 1.3;
  box-shadow: 0 18px 48px rgba(2, 8, 22, 0.55), 0 0 0 1px rgba(81, 179, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.36,.07,.19,.97);
}
.notif-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.notif-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  color: #041225;
}
.notif-toast--success .notif-toast-icon { background: #5fda94; }
.notif-toast--error   .notif-toast-icon { background: #ff7a8a; color: #fff; }
.notif-toast--info    .notif-toast-icon { background: #5cc6ff; }
.notif-toast--success { border-color: rgba(95, 218, 148, 0.45); }
.notif-toast--error   { border-color: rgba(255, 122, 138, 0.55); }
.notif-toast--info    { border-color: rgba(92, 198, 255, 0.45); }
.notif-toast-msg { display: inline-block; }

/* ==========================================================================
   Overview page — Departman Sağlığı tablosu, Son Aktiviteler feed,
   İlgilenmen Gereken alerts. Composes existing .overview-block,
   .health-pill, severity styling — only the truly new bits live here.
   ========================================================================== */

.overview-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.55rem;
}
.overview-block-head h3 { margin: 0; font-size: 0.95rem; color: #cfeaff; }

.overview-dept-table { margin-bottom: 0.85rem; }
.dept-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(8, 14, 28, 0.55);
}
.dept-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.dept-health-table thead th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #95abc8);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 24, 48, 0.45);
}
.dept-health-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(116, 170, 255, 0.1);
  color: #e3edff;
  vertical-align: middle;
}
.dept-health-table tbody tr:last-child td { border-bottom: 0; }
/* Informational rows — no click affordance now that there's no
   department dropdown for them to drive. */
.dept-health-table tbody tr.dept-row { transition: background 140ms ease; }
.dept-health-table tbody tr.dept-row:hover {
  background: rgba(58, 141, 255, 0.04);
}
.dept-health-table .dept-name { font-weight: 600; color: #eaf3ff; }
.dept-health-table .dept-lastscan { color: var(--muted, #95abc8); font-size: 0.82rem; }

.dept-count-chip {
  display: inline-block;
  min-width: 1.7rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;
}
.dept-count-chip.count-bad {
  background: rgba(255, 107, 107, 0.16);
  color: #ffc9c9;
  border-color: rgba(255, 107, 107, 0.4);
}
.dept-count-chip.count-mid {
  background: rgba(255, 186, 89, 0.16);
  color: #ffe0b0;
  border-color: rgba(255, 186, 89, 0.4);
}

/* Reuse health-pill's neutral look when there's no signal yet. */
.health-pill.health-neutral {
  background: rgba(120, 130, 145, 0.18);
  color: #d0d6dd;
  border-color: rgba(150, 160, 175, 0.4);
}

/* ---------- Son Aktiviteler feed ---------- */
.activity-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.activity-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(8, 16, 31, 0.55);
  border: 1px solid rgba(116, 170, 255, 0.18);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.activity-item:hover,
.activity-item:focus-visible {
  background: rgba(58, 141, 255, 0.1);
  border-color: rgba(116, 170, 255, 0.4);
  outline: none;
}
.activity-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
  color: #041225;
}
.activity-icon.status-completed { background: #5fda94; }
.activity-icon.status-running   { background: #ffb866; }
.activity-icon.status-failed    { background: #ff6e7a; color: #fff; }
.activity-icon.status-queued    { background: rgba(150, 160, 175, 0.55); color: #fff; }
.activity-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #e3edff;
}
.activity-time { font-size: 0.78rem; flex-shrink: 0; }

/* ---------- İlgilenmen Gereken alerts ---------- */
.alerts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.alert-item {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  line-height: 1.4;
}
.alert-item[role="button"] {
  cursor: pointer;
  transition: background 140ms ease;
}
.alert-item[role="button"]:hover { background: rgba(58, 141, 255, 0.08); }
.alert-dot {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  color: #041225;
}
.alert-text { flex: 1 1 auto; color: #e3edff; }
.alert-text strong { color: #eaf3ff; }
.alert-warn  { background: rgba(255, 186, 89, 0.08); border-color: rgba(255, 186, 89, 0.32); }
.alert-warn  .alert-dot { background: #ffba59; }
.alert-info  { background: rgba(92, 198, 255, 0.08); border-color: rgba(92, 198, 255, 0.32); }
.alert-info  .alert-dot { background: #5cc6ff; }
.alert-error { background: rgba(255, 110, 122, 0.08); border-color: rgba(255, 110, 122, 0.35); }
.alert-error .alert-dot { background: #ff6e7a; color: #fff; }

/* ==========================================================================
   Departman Analizi — card grid + origin-zoom modal
   ==========================================================================
   The Departman Analizi tab is now a grid of clickable department cards.
   Clicking a card opens a body-level modal that scales out from the click
   origin (transform-origin set inline by brain.js based on the clicked
   card's bounding rect). The modal hosts the existing #dept-insights-report
   block unchanged, so all the rendering logic keeps working. */

.dept-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.dept-card {
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(10, 20, 38, 0.45) 100%);
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
}
.dept-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 242, 255, 0.55);
  box-shadow: 0 10px 28px rgba(2, 8, 22, 0.45);
}
.dept-card-name { font-weight: 700; font-size: 1rem; color: #eaf3ff; }
.dept-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--muted, #95abc8);
}
.dept-card-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.dept-card-count-chip {
  padding: 2px 8px; border-radius: 999px; font-size: 0.74rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(116,170,255,0.18);
  color: rgba(234, 243, 255, 0.78);
}
.dept-card-count-chip.count-warn {
  background: rgba(255,184,102,0.16); border-color: rgba(255,184,102,0.5); color: #ffd9a8;
}
.dept-card-count-chip.count-bad {
  background: rgba(255,122,138,0.16); border-color: rgba(255,122,138,0.5); color: #ffd0d6;
}
.dept-card-empty { color: var(--muted, #95abc8); font-size: 0.85rem; }
.dept-card-skeleton {
  color: var(--muted, #95abc8); font-size: 0.85rem;
  padding: 18px; border: 1px dashed rgba(116, 170, 255, 0.24);
  border-radius: 14px;
}

/* ---- Şirket Analizi card: full-width, "spectacular" company box pinned
   to the end of the department grid. Treated like another department but
   visually elevated to read as the whole-company view. ---- */
.dept-card-company {
  /* A normal-sized card that flows in sequence after the last department
     (no full-width span) — just visually elevated. */
  position: relative;
  overflow: hidden;
  gap: 8px;
  border: 1px solid rgba(124, 242, 255, 0.45);
  background:
    radial-gradient(1100px 220px at 8% -50%, rgba(124, 242, 255, 0.22), transparent 60%),
    radial-gradient(900px 200px at 100% 140%, rgba(167, 139, 250, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(34, 28, 82, 0.88) 0%, rgba(13, 39, 84, 0.82) 48%, rgba(10, 20, 40, 0.9) 100%);
  box-shadow: 0 16px 44px rgba(2, 8, 22, 0.5), inset 0 0 0 1px rgba(124, 242, 255, 0.08);
}
/* Slow rotating conic "aurora" behind the content. */
.dept-card-company::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(124, 242, 255, 0) 0deg,
    rgba(124, 242, 255, 0.32) 90deg,
    rgba(167, 139, 250, 0.32) 180deg,
    rgba(124, 242, 255, 0) 300deg);
  filter: blur(26px);
  opacity: 0.55;
  animation: companyAurora 14s linear infinite;
}
@keyframes companyAurora { to { transform: rotate(360deg); } }
.dept-card-company > * { position: relative; z-index: 1; }
.dept-card-company:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 242, 255, 0.85);
  box-shadow: 0 22px 60px rgba(2, 8, 22, 0.62), inset 0 0 0 1px rgba(124, 242, 255, 0.14);
}
.dept-card-company .dept-card-name {
  font-size: 1.08rem;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, #eaf3ff 0%, #a9e8ff 55%, #c9b6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dept-card-company .dept-card-meta { color: rgba(201, 224, 255, 0.82); }
.dept-card-company-badge {
  align-self: flex-start;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 1.6px;
  padding: 3px 11px; border-radius: 999px;
  color: #061018;
  background: linear-gradient(90deg, #7cf2ff, #a78bfa);
  box-shadow: 0 2px 12px rgba(124, 242, 255, 0.4);
}
.dept-card-company-cta {
  margin-top: 2px; font-size: 0.84rem; font-weight: 600; color: #bfe9ff;
}
@media (prefers-reduced-motion: reduce) {
  .dept-card-company::before { animation: none; }
}

/* ---- Company report hero (inside the modal, company mode) ---- */
.company-report-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(124, 242, 255, 0.32);
  background:
    radial-gradient(900px 180px at 10% -40%, rgba(124, 242, 255, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(34, 28, 82, 0.92), rgba(12, 34, 74, 0.86) 55%, rgba(10, 20, 40, 0.92));
}
.company-report-kicker {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 2px; color: #7cf2ff;
}
.company-report-hero h3 {
  margin: 6px 0 6px;
  font-size: 1.6rem;
  background: linear-gradient(90deg, #eaf3ff, #a9e8ff 55%, #c9b6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.company-report-hero-main { min-width: 260px; }
.company-report-hero-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.dept-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 8, 22, 0.62);
  backdrop-filter: blur(6px);
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.dept-modal-backdrop.is-open { opacity: 1; }
.dept-modal-backdrop[hidden] { display: none; }

.dept-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-radius: 18px;
  background: rgba(12, 22, 43, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(2, 8, 22, 0.62), 0 0 0 1px rgba(81, 179, 255, 0.22);
  padding: 28px 28px 32px;
  /* The zoom-from-origin animation — JS sets transform-origin
     based on where the user clicked. */
  transform: scale(0.16);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 220ms ease;
}
.dept-modal-backdrop.is-open .dept-modal {
  transform: scale(1);
  opacity: 1;
}

.dept-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  color: #c6d7ff; font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease, border-color 160ms ease;
  z-index: 2;
}
.dept-modal-close:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

@media (prefers-reduced-motion: reduce) {
  .dept-modal { transition: opacity 120ms ease; transform: scale(1); }
}