/* ============================================================
   NarClinic HIS — Uygulama stili
   Tasarım dili: Epic Systems ilhamı, açık tonlar, sade işlevsellik
   ============================================================ */

:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --border: #E3E9EF;
  --text: #22303E;
  --muted: #64748B;
  --primary: #B5384E;
  --primary-soft: #FAECEF;
  --accent: #0E7C7B;
  --success: #15803D;
  --warning: #B45309;
  --danger: #B91C1C;

  --radius: 10px;
  --shadow: 0 1px 2px rgb(16 24 40 / .06);
  --shadow-lg: 0 4px 12px rgb(16 24 40 / .10);

  --sidebar-w: 232px;
  --sidebar-w-narrow: 64px;
  --topbar-h: 60px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 8px 14px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Kabuk düzeni ---------- */
.shell {
  display: flex;
  min-height: 100vh;
}

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Sol navigasyon ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo img { height: 34px; width: auto; display: block; }
.sidebar-logo .logo-mark { display: none; height: 34px; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.nav-item:hover { background: var(--bg); text-decoration: none; }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
}
.nav-item svg { flex: 0 0 20px; width: 20px; height: 20px; }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
/* Üst maddenin alt maddesi (örn. Geri Çağırma -> Randevular'ın altında) */
.nav-subitem {
  padding-left: 32px; font-size: 13px; font-weight: 400; color: var(--muted);
}
.nav-subitem svg { flex: 0 0 16px; width: 16px; height: 16px; }
.nav-subitem.active { color: var(--primary); }

.sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Üst çubuk ---------- */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.global-search {
  position: relative;
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
}
.global-search-icon {
  position: absolute;
  left: 10px;
  color: var(--muted);
  display: flex;
  pointer-events: none;
}
.global-search-icon svg { width: 16px; height: 16px; }
#globalSearch {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
}
#globalSearch:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 60;
}
.gsr-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
}
.gsr-item:hover, .gsr-item[aria-selected="true"] { background: var(--primary-soft); text-decoration: none; }
.gsr-item .gsr-name { font-weight: 500; }
.gsr-item .gsr-meta { color: var(--muted); font-size: 12px; }
.gsr-empty { padding: 12px; color: var(--muted); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.conn-badge.ok .conn-dot { background: var(--success); }
.conn-badge.err .conn-dot { background: var(--danger); }
.conn-badge.ok { color: var(--success); }
.conn-badge.err { color: var(--danger); }

/* ---------- İçerik ---------- */
.content {
  padding: 24px;
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; }
.page-head .page-sub { color: var(--muted); font-size: 13px; }

/* ---------- Kartlar ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card + .card { margin-top: 16px; }
/* Pano — ikincil/arka plan kart (örn. Randevu Durum Dağılımı, artık
   Bugün Bekleyen Hasta Kabulü'nün ALTINDA ve daha küçük) */
.card-kompakt { padding: 12px 16px; }
.card-kompakt .card-title { font-size: 12px; margin-bottom: 8px; }
.card-kompakt .hbar-row { padding: 3px 0; font-size: 12px; grid-template-columns: 80px 1fr 40px; }
.card-kompakt .hbar-track { height: 7px; }
.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title svg { width: 16px; height: 16px; color: var(--muted); }

/* Kart başlığı hem etiket hem açılır-kapanır (pulldown) tetikleyici olabilir
   — ör. Hastalar'daki "Son 12 Ay Muayene" (kullanıcı kararı, 2026-09-12). */
button.dropdown-toggle {
  width: 100%; border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
}
button.dropdown-toggle:hover { color: var(--primary); }
.dropdown-ok { margin-left: auto; color: var(--muted); transition: transform .15s; }
button.dropdown-toggle[aria-expanded="true"] .dropdown-ok { transform: rotate(180deg); }

/* ---------- Stat kartları ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: inherit; text-decoration: none; /* <a>-tabanlı kart olabilir */
}
.stat-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  background: var(--primary-soft);
  color: var(--primary);
}
.stat-icon.accent { background: #E6F4F4; color: var(--accent); }
.stat-icon.success { background: #E9F7EE; color: var(--success); }
.stat-icon.warning { background: #FBF3E6; color: var(--warning); }
.stat-icon svg { width: 20px; height: 20px; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font-size: 20px; font-weight: 700; line-height: 1.2; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* ---------- Izgara yardımcıları ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.grid-2-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--primary-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* SMS gönderim günlüğü: LOG satırı = mesaj DIŞARI ÇIKMADI (test modu vb.).
   Gerçek gönderimlerden ilk bakışta ayrılsın diye soluk + sol şeritli. */
table.data tbody tr.sms-log-satir td {
  background: var(--bg);
  color: var(--muted);
  font-style: italic;
}
table.data tbody tr.sms-log-satir td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- Rozetler ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-success { background: #E9F7EE; color: var(--success); }
.badge-warning { background: #FBF3E6; color: var(--warning); }
.badge-danger  { background: #FBEAEA; color: var(--danger); }
.badge-muted   { background: #EEF2F6; color: var(--muted); }
.badge-info    { background: #E6F4F4; color: var(--accent); }
.badge-arsiv   { background: #F0E9FA; color: #6D3FA0; }

/* DoktorTakvimi arşivi klinik randevulardan bilinçli olarak ayrı görünür. */
.dt-arsiv-kart { border-left: 4px solid #8B5BB5; margin-top: 16px; }
.dt-arsiv-tablo tbody tr { background: #FCFAFE; }
.dt-arsiv-filtreler { padding: 14px; background: #F8F3FC; border-radius: var(--radius); }
.btn-arsiv { border-color: #8B5BB5; color: #6D3FA0; }
.dt-arsiv-link-satiri { margin: -4px 0 16px; text-align: right; }
.dt-arsiv-link { color: #6D3FA0; font-size: 13px; font-weight: 600; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.btn:hover { background: var(--bg); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: #9E2F43; }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #931515; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- Form elemanları ---------- */
.input, select.input {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
label.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.field-sabit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-etiket {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.field-deger {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: default;
}

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .spacer { flex: 1; }

/* ---------- Sayfalama ---------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Sekmeler ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 9px 14px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ---------- Hasta storyboard düzeni ---------- */
.chart-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}
.patient-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.patient-card .p-name { font-size: 17px; font-weight: 700; }
.patient-card .p-sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.p-field {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.p-field .k { color: var(--muted); }
.p-field .v { font-weight: 500; text-align: right; word-break: break-all; }

/* ---------- Zaman çizelgesi (epikriz) ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -19px; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.timeline-date { font-size: 12px; color: var(--muted); font-weight: 600; }
.timeline-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 5px;
  font-size: 13px;
}
.timeline-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.timeline-body dt { color: var(--muted); font-weight: 500; }
.timeline-body dd { margin: 0; }

/* ---------- Klinik kart (şikayet/bulgu/...) ---------- */
.clinical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.clinical-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.clinical-cell .c-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.clinical-cell .c-value { font-size: 13px; white-space: pre-wrap; }
.clinical-cell .c-empty { color: var(--muted); font-style: italic; }

/* ---------- Hasta belgeleri ---------- */
.belge-araclar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}
.belge-dosya-input { flex: 1; min-width: 220px; }
.belge-bolum + .belge-bolum { margin-top: 22px; }
.belge-bolum-baslik { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.belge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.belge-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  min-width: 0;
}
.belge-onizleme { display: block; color: inherit; }
.belge-onizleme img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
}
.belge-meta { display: flex; flex-direction: column; gap: 2px; padding: 9px 36px 9px 10px; font-size: 12px; }
.belge-adi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belge-sil { position: absolute; right: 6px; bottom: 6px; color: var(--danger); padding: 5px; }
.belge-liste { display: flex; flex-direction: column; gap: 8px; }
.belge-liste-item { display: flex; align-items: center; gap: 10px; padding: 10px; }
.belge-liste-link { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.belge-liste-meta { font-size: 12px; white-space: nowrap; margin-right: 34px; }

/* ---------- Grafikler ---------- */
.chart-bar rect.bar { fill: var(--primary); }
.chart-bar rect.bar:hover { fill: #9E2F43; }
.chart-axis { font-size: 10px; fill: var(--muted); }
.chart-tooltip {
  position: fixed;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}

/* Yatay dağılım barları (randevu durumları) */
.hbar-row {
  display: grid;
  grid-template-columns: 92px 1fr 52px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}
.hbar-track {
  height: 10px;
  background: var(--bg);
  border-radius: 5px;
  overflow: hidden;
}
.hbar-fill { height: 100%; border-radius: 5px; }
.hbar-count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- İş listesi ---------- */
.task-list { display: flex; flex-direction: column; }
.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: var(--primary-soft); text-decoration: none; }
/* Bugün tamamlanmış (Healthy'deki gibi soluklaşıp alta sarkan) satır */
.task-item-sonuk { opacity: .55; }
.task-item-sonuk:hover { opacity: 1; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-sub { font-size: 12px; color: var(--muted); }

/* ---------- Skeleton / boş / hata durumları ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #EDF1F5;
  border-radius: 6px;
  min-height: 14px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .7), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.skel-row { height: 38px; margin-bottom: 6px; }
.skel-card { height: 76px; }

.empty-state, .error-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted);
}
.empty-state svg, .error-state svg {
  width: 40px; height: 40px;
  margin-bottom: 10px;
  color: var(--border);
}
.error-state svg { color: var(--danger); }
.empty-state .e-title, .error-state .e-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.error-state .e-detail { white-space: pre-line; }
.error-state .btn { margin-top: 12px; }
/* TUR 48 — "Yeniden dene" + "Sorun Bildir" yan yana, tek satır. */
.error-state-eylemler { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.error-state-eylemler .btn { margin-top: 12px; }

/* TUR 48 — Sorun bildirimleri (YONETICI ekranı). */
.sorun-bildirim-liste { display: flex; flex-direction: column; gap: 12px; }
.sorun-bildirim-satir { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sorun-bildirim-ust { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sorun-bildirim-mesaj { margin-top: 4px; white-space: pre-line; }
.sorun-bildirim-baglam { margin-top: 4px; font-size: 12px; }

/* Yetki kısıtı (403) bir ARIZA değildir: kırmızı uyarı ikonu yerine nötr
   kilit. Metin ve buton `hataDurumu()` içinde kurulur (bkz. ui.js). */
.error-state--yetki svg { color: var(--muted); }

/* Kapalı modül (TUR 41) de bir ARIZA değildir — aynı nötr ton. Metin ve
   buton `modulKapaliDurumu()` içinde kurulur (bkz. ui.js). */
.error-state--modul svg { color: var(--muted); }

/* ---------- Bilgi kartları ---------- */
.notice {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.notice-info { background: #E6F4F4; border-color: #BFE3E2; color: #0A5C5B; }
.notice-warning { background: #FBF3E6; border-color: #EBD9B4; color: var(--warning); }
.notice-danger { background: #FBEAEA; border-color: #F0C9C9; color: var(--danger); }

/* ---------- Donut açıklaması ---------- */
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.legend-item .l-val { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- AI özet ---------- */
.ai-summary {
  background: var(--primary-soft);
  border: 1px solid #F0CBD3;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 13px;
  white-space: pre-wrap;
}
.ai-summary .ai-meta { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ---------- Para / sayı renkleri ---------- */
.money-pos { color: var(--success); font-weight: 600; }
.money-neg { color: var(--danger); font-weight: 600; }
/* Bedel/Ödenen/Kalan kutusu — mevcut .p-field deseninin vurgulu satırı */
.p-field.p-total { border-top-width: 2px; font-size: 14px; }
.p-field.p-total .k { color: var(--text); font-weight: 600; }
.text-muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-2, .grid-2-even { grid-template-columns: 1fr; }
  .chart-layout { grid-template-columns: 1fr; }
  .patient-card { position: static; }
  .clinical-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { width: var(--sidebar-w-narrow); flex-basis: var(--sidebar-w-narrow); }
  .sidebar-logo { justify-content: center; padding: 12px 8px; }
  .sidebar-logo .logo-full { display: none; }
  .sidebar-logo .logo-mark { display: block; }
  .nav-item { justify-content: center; padding: 10px; }
  .nav-item .nav-label { display: none; }
  .sidebar-version { display: none; }
  .content { padding: 16px; }
}

/* ---------- İptal edilmiş epikriz (hasta grafiği zaman çizelgesi) ---------- */
.timeline-item.is-iptal { opacity: .55; }
.timeline-item.is-iptal::before { border-color: var(--danger); }

/* ---------- İlerleme çubuğu (geri çağırma toplu çekme) ---------- */
.progress {
  height: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 5px;
  transition: width .25s ease;
}

/* ---------- Faz-3: toast bildirimleri ---------- */
.toast-kapsul {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 300;
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  font-size: 13px;
  animation: toast-gel .2s ease;
}
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--accent); }
.toast .toast-icon { display: flex; margin-top: 1px; color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--accent); }
.toast.is-gidiyor { opacity: 0; transform: translateX(12px); transition: all .25s ease; }
@keyframes toast-gel {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Faz-3: modal ---------- */
.modal-ort {
  position: fixed;
  inset: 0;
  background: rgb(16 24 40 / .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  z-index: 250;
  overflow-y: auto;
}
.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  padding: 18px;
}
.modal-baslik { font-size: 15px; font-weight: 600; margin-bottom: 14px; padding-right: 30px; }
.modal-kapat {
  position: absolute;
  top: 10px; right: 10px;
  border: none;
  background: none;
  color: var(--muted);
  padding: 6px;
  border-radius: 6px;
  display: flex;
}
.modal-kapat:hover { background: var(--bg); color: var(--text); }
.modal-eylemler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Faz-3: kullanıcı chip'i ---------- */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}
.chip-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.chip-name { font-size: 13px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-grup::before { display: none; }

/* ---------- Faz-3: giriş ekranı ---------- */
.giris-sahne {
  min-height: calc(100vh - var(--topbar-h) - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.giris-kart {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 28px 26px;
}
.giris-kart img { height: 44px; margin-bottom: 18px; }
.giris-kart form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.giris-hata {
  background: #FBEAEA;
  border: 1px solid #F0C9C9;
  color: var(--danger);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
}
.giris-not {
  font-size: 12px;
  color: var(--muted);
  max-width: 380px;
  text-align: center;
}

/* Kurulum göstergesi: hangi kurulumda ve hangi veritabanına bağlı olunduğunu
   söyler. Nottan daha sönük — bilgi taşır ama dikkati giriş alanlarından
   çalmaz. `hidden` iken görünmez (health okunamazsa hiç gösterilmez). */
.giris-kurulum {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- Faz-3: form doğrulama ---------- */
.input-hata, textarea.input-hata, select.input-hata { border-color: var(--danger) !important; }
.input-hata:focus { box-shadow: 0 0 0 3px #FBEAEA !important; }
.form-hata { color: var(--danger); font-size: 12px; margin-top: 2px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .tam { grid-column: 1 / -1; }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }

/* ---------- Faz-3: otomatik tamamlama (ICD-10 / hasta arama) ---------- */
.ac-wrap { position: relative; }
.ac-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 80;
}
.ac-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.ac-item:hover, .ac-item[aria-selected="true"] { background: var(--primary-soft); }
.ac-item .ac-kod { font-weight: 600; flex: 0 0 auto; }
.ac-item .ac-adi { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-bos { padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* ---------- Faz-3: chip (seçili ICD / seçili hasta) ---------- */
.sec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E6F4F4;
  color: var(--accent);
  border: 1px solid #BFE3E2;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.sec-chip button {
  border: none;
  background: none;
  color: inherit;
  display: flex;
  padding: 2px;
  border-radius: 50%;
}
.sec-chip button:hover { background: rgb(0 0 0 / .08); }

/* ---------- Faz-3: şablon paleti ---------- */
.tpl-palet {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 320px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  z-index: 220;
}
.tpl-palet .tpl-baslik {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tpl-liste { overflow-y: auto; }
.tpl-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.tpl-item:hover, .tpl-item[aria-selected="true"] { background: var(--primary-soft); }
.tpl-item .tpl-kisa { font-weight: 600; color: var(--primary); margin-right: 8px; }
.tpl-item .tpl-ozet { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Faz-3: muayene çalışma alanı ---------- */
.muayene-serit {
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.muayene-serit .m-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.muayene-serit .m-ad { font-weight: 600; }
.muayene-serit .m-meta { color: var(--muted); font-size: 12px; }
.muayene-serit .m-spacer { flex: 1; }

@media (max-width: 768px) {
  .topbar { height: auto; min-height: var(--topbar-h); padding: 10px 12px; gap: 8px; flex-direction: column; align-items: stretch; }
  .global-search { width: 100%; max-width: none; min-width: 0; flex: none; }
  .topbar-right { width: 100%; min-width: 0; margin-left: 0; gap: 8px; flex-wrap: wrap; }
  .user-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: 1 1 160px; min-width: 0; gap: 2px 6px; border-radius: 10px; padding: 5px 8px; }
  .user-chip .chip-avatar { display: none; }
  .user-chip .chip-name { grid-column: 1; min-width: 0; max-width: 100%; }
  .user-chip .chip-grup { grid-column: 1; justify-self: start; }
  .user-chip .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
  .conn-badge { flex: 0 0 auto; white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
  .tpl-palet { width: min(320px, calc(100vw - 32px)); }
}

/* ---------- Yazdırma ---------- */
.print-header { display: none; }

@media print {
  .sidebar,
  .topbar,
  .breadcrumb,
  .skip-link,
  .no-print,
  .btn { display: none !important; }

  html, body { background: #fff; }
  .shell { display: block; }
  .main-col { display: block; }
  .content { padding: 0; max-width: none; margin: 0; }

  .card {
    box-shadow: none;
    border: 1px solid #C9D2DB;
    border-radius: 6px;
    break-inside: avoid;
  }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }

  .page-head { margin-bottom: 10px; }
  .page-head h1 { font-size: 18px; }

  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--text);
    padding-bottom: 8px;
    margin-bottom: 14px;
  }
  .print-header .ph-title { font-size: 16px; font-weight: 700; }
  .print-header .ph-date { font-size: 12px; color: var(--muted); }

  .timeline::before { background: #C9D2DB; }
  .timeline-body { background: #fff; }

  a { color: inherit; text-decoration: none; }
}


/* Scoped clinical transfer preview: literal text, narrow-screen-safe controls. */
.aktarim-modal fieldset { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; min-width:0; }
.aktarim-modal fieldset label { display:flex; gap:6px; align-items:center; }
.aktarim-modal .modal-eylemler { flex-wrap:wrap; }
.aktarim-modal section { min-width:0; overflow-wrap:anywhere; }
.aktarim-modal h3 { font-size:15px; margin:16px 0 8px; }
.aktarim-modal h4 { font-size:12px; margin:8px 0 4px; }
.aktarim-metin { white-space:pre-wrap; overflow-wrap:anywhere; padding:8px; background:var(--bg); border-radius:6px; }
.aktarim-kontrolleri { margin-top:16px; }
.aktarim-kontrolleri [role="status"] { overflow-wrap:anywhere; }

.modal-ort:has(.aktarim-modal) { padding:16px 8px; align-items:center; overflow:hidden; }
.modal:has(.aktarim-modal) { display:flex; flex-direction:column; max-height:calc(100dvh - 32px); min-height:0; }
.modal:has(.aktarim-modal) > .modal-baslik { flex-shrink:0; }
.modal-govde:has(.aktarim-modal) { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:3px; }
.aktarim-eylemler { flex-shrink:0; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); }


/* Giriş / zorunlu şifre değişimi: uygulama kabuğu gizlenir.
   Oturum yokken sol gezinme ve üst çubuk görünüyordu; menüler tıklanabilir
   duruyor ama hepsi girişe geri atıyordu. Kabuk gizlenince ekranda yalnız
   giriş formu kalır. */
body.kabuksuz .sidebar,
body.kabuksuz .topbar { display: none; }
body.kabuksuz .content { margin: 0; }
body.kabuksuz { display: block; }

/* Pano — hızlı işlemler (sekreterde 12 aylık grafiğin yerini alır) */
.hizli-eylem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .hizli-eylem-grid { grid-template-columns: 1fr; } }
.hizli-eylem {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit; background: var(--card);
  transition: border-color .15s, transform .15s;
}
.hizli-eylem:hover, .hizli-eylem:focus-visible {
  border-color: var(--accent); transform: translateY(-1px);
}
.hizli-eylem-baslik { font-weight: 600; }

/* Pano — açık protokol kartı tıklanabilir, liste yerinde açılır */
.stat-card.tiklanabilir { cursor: pointer; }
.stat-card.tiklanabilir:hover, .stat-card.tiklanabilir:focus-visible {
  border-color: var(--accent);
}
/* Pano — 12 aylık grafik kartı tıklanınca Hastalar sayfasına gider */
.tiklanabilir-kart {
  cursor: pointer; transition: border-color .15s;
  display: block; color: inherit; text-decoration: none;
}
.tiklanabilir-kart:hover, .tiklanabilir-kart:focus-visible {
  border-color: var(--accent);
}
.acik-protokol-liste {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card);
}
/* HATA (2026-09-15, sahada bulundu): yukaridaki `display: flex` yazar
   kurali, `hidden` HTML ozelliginin tarayici varsayilan `[hidden]{display:
   none}` kuralini SPESIFIKLIK/KOKEN geregi HER ZAMAN ezer -- JS `kutu.hidden`
   ile dogru gecis yapiyordu ama kutu HER ZAMAN gorunur kaliyordu, tiklama
   gorsel olarak hicbir sey degistirmiyordu. `[hidden]` durumunu ACIKCA
   yazmak zorundayiz. */
.acik-protokol-liste[hidden] { display: none; }
.acik-protokol-satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
}
.acik-protokol-satir:hover, .acik-protokol-satir:focus-visible {
  background: var(--hover, rgba(0,0,0,.04));
}
/* TUR 34 — satır (link) + iptal butonu yan yana; buton link İÇİNE değil
   YANINA konur (iç içe interaktif eleman kaçınılır). */
.acik-protokol-satir-kapsul {
  display: flex; align-items: center; gap: 4px;
}
.acik-protokol-satir-kapsul .acik-protokol-satir { flex: 1; min-width: 0; }
.acik-protokol-iptal { flex-shrink: 0; }

/* Pano — hekimin günün hasta listesi */
.gun-saat {
  font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 46px; color: var(--muted, #667);
}

/* Şifre alanı + göster düğmesi (2026-09-15) */
.sifre-sarmal { display: block; }
.sifre-alan { position: relative; display: block; }
.sifre-alan .input { padding-right: 76px; width: 100%; }
.sifre-goster {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  font-size: 13px; color: var(--muted, #6b7280); border-radius: 6px;
}
.sifre-goster:hover { background: rgba(0,0,0,.05); color: inherit; }
.sifre-sayac { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, #6b7280); }

/* ---------- Sorun bildirimi: ekran görselleri (2026-09-23) ---------- */
.sorun-bildir-panel { display: flex; flex-direction: column; gap: 10px; }
.sorun-ek-yapistir {
  border: 1.5px dashed var(--border, #c9ced6); border-radius: 8px; padding: 14px;
  text-align: center; font-size: 13px; color: var(--text-muted, #667); cursor: pointer;
}
.sorun-ek-yapistir:focus-visible, .sorun-ek-yapistir.uzerinde { border-color: var(--primary, #2f6fde); outline: none; }
.sorun-ek-yapistir.dolu { cursor: default; opacity: .6; }
.sorun-ek-onizleme, .sorun-ek-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.sorun-ek-kucuk { position: relative; }
.sorun-ek-kucuk img, .sorun-ek-kucuk-img {
  height: 72px; max-width: 128px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border, #c9ced6);
}
.sorun-ek-kucuk-img { cursor: zoom-in; }
.sorun-ek-kaldir {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--danger, #c0392b); color: #fff; line-height: 20px; cursor: pointer;
}
.sorun-ek-buyuk-img { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; }
.sorun-ek-uyari { font-size: 12px; }
.sorun-ek-durum { font-size: 13px; min-height: 1em; }
.sorun-ek-liste { margin-top: 8px; }
/* Üst çubuk kalıcı "Sorun Bildir" düğmesi — göze batmayan ama bulunur. */
.btn-sorun-bildir-ust { white-space: nowrap; }