:root {
  /* Yatay kayan tablonun kenar gölgesi (bkz. .card:has(table.data-table)). */
  --scroll-shade: rgba(15,30,26,.22);
  --ink: #19192D;
  --ink-soft: #23233F;
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --border: #E2E8EF;
  --accent: #0F4C42;
  --accent-bright: #33D399;
  --accent-soft: #EDFCF4;
  /* Yazı olarak kullanılan vurgu rengi: açıkta koyu yeşil, koyuda parlak yeşil (30.09.2026).
     --accent koyu temada bilerek değişmiyor (düğme/menü ZEMİNİ); yazıda kullanılınca koyu
     zeminde kayboluyordu. Zemini açık-yeşil/kart olan yazılarda bunu kullan. */
  --accent-text: var(--accent);
  --amber: #C9852B;
  --amber-soft: #FBF0DF;
  --red: #C0433D;
  --red-soft: #FAE7E5;
  --text: #19192D;
  --text-muted: #63728C;
  --radius: 14px;
  --radius-pill: 999px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

/* KÖK NEDEN (bulundu 28.07.2026): [hidden] özniteliği tarayıcının varsayılan
   stil sayfasında sadece "display:none" demektir ve bu, .nav-item/.int-tab-btn
   gibi kendi "display:flex" kuralına sahip herhangi bir class tarafından
   ezilebilir (aynı özgüllükte iki kural çakışınca yazar stil sayfası kazanır).
   Sonuç: JS tarafında el.hidden=true doğru şekilde ayarlanıyordu ama öğe görsel
   olarak GÖRÜNMEYE devam ediyordu — yetki gizleme (applyPermissionGating) bu
   yüzden "çalışmıyormuş gibi" görünüyordu. Bu genel kural, hidden'ın her zaman
   kazanmasını garanti eder. */
[hidden] { display: none !important; }

/* Karanlık mod — sidebar'daki 🌙/☀️ butonuyla açılıp kapanır, tercih localStorage'da
   saklanır (bkz. app.js applyTheme). Sayfadaki çoğu renk zaten var(--...) kullandığı
   için burada sadece değişkenleri yeniden tanımlamak yeterli; birkaç yerde inline
   stille yazılmış sabit gri tonlar da aşağıda [style*="..."] seçicileriyle eşleniyor.  */
:root[data-theme="dark"] {
  --scroll-shade: rgba(0,0,0,.55);
  /* --ink ve --accent bilerek DEĞİŞTİRİLMEDİ — bunlar sadece metin rengi değil,
     aynı zamanda buton/sidebar arkaplan rengi olarak da kullanılıyor (ör. .btn-primary
     background:var(--ink) + color:#fff sabit). Bunları açık renge çevirmek "koyu
     arkaplan + beyaz yazı" ikilisini bozup butonu/üst menüyü okunmaz hale getiriyordu. */
  --bg: #12121C;
  --surface: #1B1B29;
  --border: #2E2E42;
  --accent-soft: #16332A;
  --accent-text: #3FD3A0;
  --amber-soft: #3A2E17;
  --red-soft: #3A1D1B;
  --text: #EDEFF7;
  --text-muted: #9096B3;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] [style*="#8a93a6"],
:root[data-theme="dark"] [style*="#63728C"] { color: var(--text-muted) !important; }
:root[data-theme="dark"] [style*="border:1px solid #ddd"],
:root[data-theme="dark"] [style*="border: 1px solid #ddd"],
:root[data-theme="dark"] [style*="#e5e7eb"],
:root[data-theme="dark"] [style*="#e2e6e4"],
:root[data-theme="dark"] [style*="#eee"] { border-color: var(--border) !important; }
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"] { background: var(--surface) !important; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
/* Tarayıcının yerleşik takvim ikonu karanlık temada koyu/bozuk bir leke gibi
   görünüyordu (ör. Randevu Yönetimi arama kutusu) — rengini tersine çeviriyoruz. */
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
:root[data-theme="dark"] table.data-table tr:hover { background: var(--accent-soft); }
:root[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .int-tab-btn.active { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
/* .btn-secondary'nin metni --accent (koyu yeşil) kullanıyor — açık temada soft
   arkaplanla kontrastlı ama karanlık temada accent-soft de koyu olduğu için
   neredeyse görünmez oluyordu (ör. Raporlama'daki CSV/Excel/PDF butonları). */
:root[data-theme="dark"] .btn-secondary { background: var(--accent-soft); color: var(--accent-bright); border-color: var(--accent-soft); }
:root[data-theme="dark"] .btn-secondary:hover { background: var(--accent-bright); color: var(--ink); border-color: var(--accent-bright); }
/* .badge-ok da aynı sebeple (--accent koyu yeşil, karanlıkta değişmiyor) karanlık
   temada okunmuyordu — ör. "Aktif" / "Onaylandı" / "Aktarıldı" rozetleri. */
:root[data-theme="dark"] .badge-ok { color: var(--accent-bright); }
:root[data-theme="dark"] .link { color: var(--accent-bright); }
:root[data-theme="dark"] [style*="#f0f0f4"] { background: var(--border) !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 14px;
}

/* Formların dışında (modal/.filters gibi özel sarmalayıcı olmadan) sayfaya doğrudan
   konan input/select/textarea'lar tarayıcı varsayılanıyla çıplak görünüyordu (ör.
   Bağlı Web Siteleler ekleme satırı, Güvenlik Raporu tarih filtreleri) — bu genel
   kural artık her yerde aynı, temaya uyan görünümü sağlıyor. Daha özel kurallar
   (.filters input, .modal form input vb.) zaten daha yüksek özgüllükle üstüne yazar.
   Checkbox/radio hariç tutulur, onlar tarayıcı varsayılan boyutunda kalır.
*/
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

/* Dosya seçme alanları: genel kuralın kutusunu alıyor ama tarayıcının "Dosya Seç"
   butonu ham kalıyordu. Kesikli çerçeve, alanın tıklanabilir olduğunu belli eder. */
input[type=file] {
  font-size: 13px;
  color: var(--text-muted);
  border-style: dashed;
  background: transparent;
}
input[type=file]::file-selector-button {
  font: inherit;
  margin-right: 10px;
  padding: 5px 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- Login ---------------- */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh; /* mobil Safari'de adres çubuğu görünürken 100vh gerçek viewport'tan büyük olur, kart yanlış ortalanır */
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(51,211,153,0.14), transparent 45%),
    var(--ink);
  position: relative;
}
.login-screen[hidden] { display: none; }

/* ---- Giriş ekranı arka plan animasyonu (25.09.2026, 2. sürüm) ----
   Kullanıcı düzenli çapraz çizgi değil "dağınık çizgi" istedi: ekrana rastgele
   dağılmış, kıvrımlı ince çizgiler. Her çizgi kendi hızında yavaşça süzülür ve
   üzerinde ışık akar (stroke-dash). Yalnızca CSS + satır içi SVG, JS yok.
   "Hareketi azalt" açıksa çizgiler durur, desen kalır. */
.login-screen { overflow: hidden; isolation: isolate; }
.login-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.login-lines path {
  opacity: calc(var(--o) + 0.07);
  stroke-dasharray: 260 140;
  animation: loginLineFlow var(--d) linear infinite, loginLineDrift calc(var(--d) * 1.7) ease-in-out infinite alternate;
  animation-delay: var(--dl), var(--dl);
  transform-box: fill-box;
  transform-origin: center;
}
.login-lines path:nth-child(3n) { stroke-dasharray: 90 60 300 120; }
.login-lines path:nth-child(4n) { stroke-dasharray: none; }
.login-screen::after {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, rgba(51,211,153,0.16), transparent 24%);
  animation: loginGlow 26s ease-in-out infinite alternate;
}
.login-card { position: relative; z-index: 1; }
@keyframes loginLineFlow { to { stroke-dashoffset: -800; } }
@keyframes loginLineDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(40px, -30px, 0) rotate(3deg); }
}
@keyframes loginGlow {
  0%   { transform: translate3d(-8%, -6%, 0) scale(1); }
  50%  { transform: translate3d(10%, 4%, 0) scale(1.15); }
  100% { transform: translate3d(-2%, 10%, 0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .login-lines path, .login-screen::after { animation: none; }
}
.login-powered-by {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.login-card {
  width: 340px;
  background: var(--surface);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 30px 60px rgba(6, 14, 34, 0.35);
  text-align: center;
}

.login-wordmark {
  max-width: 220px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}

.login-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}

.login-brand-title {
  font-size: 18px;
  line-height: 1.3;
}

.login-sub {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.login-sub-company {
  font-weight: 600;
  color: var(--text);
}

.login-sub-tagline {
  margin-bottom: 24px;
}

.lang-toggle {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-footer .lang-toggle {
  margin-top: 0;
}

.login-card .link-btn {
  color: #33D399 !important;
  text-decoration: underline;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.login-card .link-btn:hover { color: #fff !important; }

.login-card form label {
  display: block;
  margin-bottom: 14px;
  text-align: left;
}

.login-card form span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.login-card form label.login-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-card form label.login-checkbox-row input[type="checkbox"] {
  width: auto;
  padding: 0;
  flex: 0 0 auto;
}
.login-card form label.login-checkbox-row span {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 0;
  color: var(--text);
}

.login-card form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FBFBFD;
  color: #1a1a2e;
  color-scheme: light;
}

.login-card form button {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.login-card form button:hover { background: #0B6F73; }

.login-card > button:not(.link-btn):not(.btn-secondary) {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.login-card > button:not(.link-btn):not(.btn-secondary):hover { background: #0B6F73; }

.form-error {
  margin-top: 12px;
  color: var(--red);
  font-size: 13px;
}

/* ---------------- Layout ---------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.app[hidden] { display: none; }

.mobile-menu-btn { display: none; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,33,61,0.4);
  z-index: 65;
}
.sidebar-backdrop[hidden] { display: none; }

.sidebar {
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 26px rgba(15,76,66,.25);
  position: sticky;
  top: 14px;
  z-index: 66;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--accent-bright);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.brand-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.brand-clinic { display: block; font-weight: 400; font-size: 11.5px; color: rgba(255,255,255,0.55); }
.brand-wordmark {
  height: 21px;
  width: auto;
  /* Ust menude TEK RENK BEYAZ (29.09.2026). Renkli logo + ince hale denendi
     (25.08) ama degradenin koyu ucu (#105044) bar zemininden (#0F4C42) ayirt
     edilemiyor: iPad'de "Med" hecesi kayboluyordu (kullanici bildirdi). Renkli
     logo giris ekraninda ve mobilde kalir. */
  filter: brightness(0) invert(1);
}

.nav { display: flex; flex-direction: row; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; overflow: visible; }

.nav-item {
  /* <a> öğesi: alt çizgi ve varsayılan bağlantı rengi istemiyoruz. */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.72);
  border-radius: var(--radius-pill);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* Menü rozeti: okunmamış lead sayısı. Marka yeşili değil kırmızı — "dikkat
   isteyen yeni kayıt" anlamı taşıyor ve yeşil zeminde kaybolurdu. */
.nav-badge {
  margin-left: 6px;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d93025;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.int-tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
/* Sekme ikonu pasif sekmede yazıyla aynı sönük tonda, aktif sekmede marka
   yeşiline döner — yoksa dokuz yeşil ikon hangi sekmenin açık olduğunu
   gölgeliyor. */
.int-tab-btn .hicon { color: currentColor; margin-right: 6px; }
.int-tab-btn.active .hicon { color: var(--accent-bright); }
.int-tab-btn:hover { color: var(--text); }
.int-tab-btn.active { color: var(--accent-text); border-bottom-color: var(--accent-bright); }

.nav-item.active {
  background: var(--accent-bright);
  color: var(--accent);
  font-weight: 700;
}

.nav-count {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-data);
}

.nav-dropdown { position: relative; }
.nav-dropdown[hidden] { display: none; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: 5px; text-align: left; background: none; border: none; color: rgba(255,255,255,.72); padding: 9px 16px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.open { background: rgba(255,255,255,.12); color: #fff; }
.nav-dropdown-trigger.parent-active { background: var(--accent-bright); color: var(--accent); font-weight: 700; }
.nav-caret { font-size: 10px; opacity: .8; }
.nav-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; background: var(--surface); border-radius: 14px; box-shadow: 0 16px 32px rgba(15,30,26,.18); padding: 6px; display: flex; flex-direction: column; min-width: 220px; z-index: 90; }
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-menu .nav-item { color: var(--text); padding: 9px 12px; border-radius: 10px; font-weight: 500; }
.nav-dropdown-menu .nav-item:hover:not(.active) { background: var(--accent-soft); color: var(--text); }
.nav-dropdown-menu .nav-item.active { background: var(--accent); color: #fff; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.me { display: flex; align-items: center; gap: 8px; }
.me-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.me-clinic { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.55); }
.me-name { font-size: 12.5px; font-weight: 600; }
.me-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}

.link-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { color: #fff; }

.icon-btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn-logout:hover { background: rgba(255,255,255,0.14); color: #fff; }
.icon-btn-logout svg { display: block; }

.main { padding: 16px 36px 40px; width: 100%; box-sizing: border-box; }

.view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

/* Başlık ve açıklama alt alta yer kaplamasın diye yan yana — dikeyde yer açar. */
.view-header > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.view-header h1 { margin: 0; font-size: 22px; font-weight: 700; }
.view-sub { margin: 0; color: var(--text-muted); font-size: 13px; }
/* Sayfa başlığı altındaki açıklama satırları kaldırıldı (22.08.2026, kullanıcı
   isteği — lisans paneliyle simetrik). Kart içi/boş durum view-sub'ları etkilenmez. */
.view-header .view-sub { display: none; }

/* Chart.js grafiklerini saran sabit yükseklikli kutu — özellikle doughnut/pie
   grafikler container'ın genişliğine göre 1:1 oranda büyüyüp kart çok genişse
   dev boyutlara ulaşıyordu (bkz. Raporlama > Cihaz dağılımı). */
.chart-box { position: relative; height: 240px; }

/* ---------------- Stat cards ---------------- */
.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);
  padding: 16px 18px;
}

.stat-card .label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  /* İki satıra sarabilen etiketler (ör. "Bugün Stella'ya Aktarılan") diğer
     kutulardaki değerlerin hizasını bozmasın — hepsi iki satır yüksekliğinde. */
  min-height: 34px;
}
.stat-card .label svg { margin-top: 1px; }
.stat-card .label svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-bright); }
.stat-card.alert .label svg { color: var(--red); }

.stat-card .value {
  font-family: var(--font-data);
  font-size: 26px;
  font-weight: 500;
  margin-top: 6px;
}

.stat-card .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.stat-card.alert { border-color: var(--red); background: var(--red-soft); }
/* Birleşik "Bugünkü görüşmeler" kartı (toplam + yanıtsız rozeti + kanal satırları). */
.dash-conv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-conv-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.dash-conv-badge.warn { background: var(--amber-soft); color: var(--amber); }
.dash-conv-badge.warn:hover { outline: 1px solid var(--amber); }
.dash-conv-badge.ok { background: var(--accent-soft); color: var(--accent-text); }
.dash-conv-card.has-unanswered { border-color: var(--amber); }
.dash-conv-badge.bad { background: var(--red-soft); color: var(--red); }
.dash-conv-card.has-failed { border-color: var(--red); }
#dash-lead-card [data-lead-goto] { cursor: pointer; }
#dash-lead-card select.dash-lead-source { width: auto; max-width: 48%; min-height: 0; height: auto; font-size: 12px; padding: 3px 6px; border-radius: 8px; }
.dash-conv-rows { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
.dash-conv-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13px; }
.dash-conv-row:hover { background: var(--surface-2, rgba(127,127,127,.08)); }
.dash-conv-ico { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.dash-conv-name { flex: 1; min-width: 0; color: var(--text); }
.dash-conv-row b { font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.dash-conv-un { font-size: 11.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
/* Kanal satırları 2×2 (kullanıcı isteği, 02.10.2026): kart kısalır, tahsilat/döviz kartlarıyla boy eşitlenir. */
/* Kart çok darsa (dört kart yan yana) kendiliğinden tek sütuna döner. Yanıtsız sayısı
   satırda turuncu küçük rozet (üstteki "N yanıtsız" rozetiyle aynı renk), metni ipucunda. */
#dash-conv-card .dash-conv-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
#dash-conv-card .dash-conv-row { margin: 0; padding: 4px 0; gap: 4px; font-size: 12px; }
#dash-conv-card .dash-conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dash-conv-card .dash-conv-ico { position: relative; margin-right: 5px; }
#dash-lead-card .dash-conv-name { white-space: nowrap; }
#dash-lead-card select.dash-lead-source { min-width: 0; flex: 0 1 auto; }
#dash-conv-card .dash-conv-un { position: absolute; top: -8px; right: -10px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 10px; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
#dash-conv-card .dash-conv-row { padding-top: 6px; }
/* Tıklanınca ilgili sayfayı açan ana sayfa kutusu (ör. Bugünün randevuları → Klinik Akışı). */
.dash-card-link { cursor: pointer; transition: border-color .15s, transform .12s; }
.dash-card-link:hover { border-color: var(--accent-bright); }
.stat-card.alert .value { color: var(--red); }

/* ---------------- Cards / tables ---------------- */
.panel-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
/* Grid içindeki kartların kendi margin'i gap ile üst üste binmesin — aralıklar eşit. */
.panel-grid > .card { margin-bottom: 0; }
/* Grid hücreleri varsayılan olarak içeriğin doğal genişliğinin altına küçülmez
   (min-width:auto) — canvas/tablo gibi geniş içerikler tüm sayfayı yatayda taşırır.
   Bu kural o taşmayı engeller (bkz. CSS Grid "min-width:auto" tuzağı). */
.panel-grid > .card, .stat-grid > .stat-card { min-width: 0; }
/* Ana sayfa kutuları esnek satır (02.10.2026, kullanıcı isteği): Döviz kartı içeriği kadar dar,
   kalan yer görüşme/lead kartlarına kalır (kanal satırları 2×2 sığsın). */
#stat-grid { display: flex; flex-wrap: wrap; }
#stat-grid > .stat-card { flex: 1 1 230px; }
#stat-grid > #dash-fx-card { flex: 0 1 190px; }
#stat-grid > #dash-conv-card { padding-left: 14px; padding-right: 14px; }
/* Kart çok daralırsa (sol menü açık + dört kart yan yana) kanal satırları tek sütuna döner. */
#dash-conv-card { container-type: inline-size; }
@container (max-width: 222px) { #dash-conv-card .dash-conv-rows { grid-template-columns: minmax(0, 1fr); } }
#stat-grid > .stat-card[hidden] { display: none; }
/* Bu satırdaki kartların başlıkları tek satır ve değerler hizalanmak zorunda değil (her kartın
   içeriği farklı) — iki satırlık ayrılan yer başlığın altında boşluk bırakıyordu (kullanıcı bildirdi). */
#stat-grid > .stat-card .label { min-height: 0; }
/* Ana sayfa kutuları tıklanabilir (ilgili ekrana götürür) — hover ile belli olsun. */
.stat-card[data-goto] { transition: transform .12s ease, box-shadow .12s ease; }
.stat-card[data-goto]:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
/* Sekme ikonlarının tamamı marka yeşilinde (22.08.2026, kullanıcı isteği). */
.int-tab-btn svg, .tab-bar svg { color: var(--accent-bright); }

/* Satır içi aksiyon butonları — lisans paneliyle aynı desen (bkz. oradaki .icon-btn). */
.icon-btn { border: 1px solid var(--border); background: var(--surface); padding: 5px 11px; border-radius: 8px; cursor: pointer; color: var(--accent-text); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .12s ease, border-color .12s ease; }
.icon-btn:hover { color: var(--accent-bright); border-color: var(--accent-bright); background: rgba(51, 211, 153, 0.08); }
:root[data-theme="dark"] .icon-btn { color: var(--accent-bright); }
.icon-btn-danger { color: var(--red); }
.icon-btn-danger:hover { color: var(--red); border-color: var(--red); background: rgba(192, 67, 61, 0.08); }

/* Kart başlığı / gösterge etiketi ikonları — üst menüdeki çizgi (stroke) stiliyle
   aynı, marka yeşilinde. Etiketle aynı soluk gride kalınca silik görünüyordu. */
.hicon { vertical-align: -3px; margin-right: 7px; color: var(--accent-bright); }
/* Renkli zeminde (yeşil bant gibi) ikon metinle aynı renkte kalsın. */
.hicon-plain { color: inherit; opacity: .9; }
/* Ortak boş durum kalıbı (lisans paneliyle simetrik): ikon + tek cümle. */
/* Personel listesi: avatar + ad/e-posta hücresi ve bilgi çipleri (iki panelde ortak desen) */
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; letter-spacing: .5px; color: #fff; }
.user-sub { font-size: 11.5px; color: var(--text-muted); }
.user-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: var(--text-muted); border: 1px solid rgba(127, 140, 141, .35); white-space: nowrap; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0; color: var(--text-muted); }
.empty-state span { font-size: 30px; }
.empty-state p { margin: 0; font-size: 13px; }
.card canvas { max-width: 100%; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.card-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.card-row-2 > .card { margin-bottom: 0; }

.payment-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.payment-option:hover { border-color: var(--accent-bright, #33d399); }
.payment-option.selected { border-color: var(--accent-bright, #33d399); background: var(--accent-soft); }
/* Seçili ödeme yöntemi. Eskiden sadece kenarlık + yazı rengi değişiyordu, hangisinin
   seçili olduğu ilk bakışta anlaşılmıyordu — artık dolgulu, kalın ve önüne ✓ konuyor. */
.payment-method-btn { position: relative; font-weight: 600; }
.payment-method-btn.active {
  border-color: var(--accent-bright, #33d399);
  background: var(--accent-bright, #33d399);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(51, 211, 153, 0.22);
}
.payment-method-btn.active::before { content: '✓ '; }
@media (max-width: 760px) { .card-row-2 { grid-template-columns: 1fr; } }

/* Entegrasyon Ayarları kart grid'i (Stella'nın "Sistem > Entegrasyonlar" sayfasındaki
   ikon+etiket+başlık+açıklama kart deseninden esinlenildi) — sekmelerin üstünde bir
   genel bakış/hızlı erişim katmanı, tıklanınca ilgili sekmeye geçer. */
.int-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.int-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}
.int-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,41,.08); border-color: #b6e9d1; }
/* Sabit min-height: bazı kartlarda (ör. Estesoft Stella) birden fazla etiket iki
   satıra taşınca o kartın ikonu diğer kartlara göre aşağı kayıyordu — tüm kartlar
   etiket alanı için aynı yüksekliği ayırsın diye min-height sabitlendi. */
.int-card-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; margin-bottom: 12px; min-height: 54px; }
.int-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #e7f4f0;
  color: #0F4C42;
  padding: 3px 9px;
  border-radius: 999px;
}
.int-card-icon { width: 64px; height: 64px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; }
/* WhatsApp/Instagram/Messenger kartlarında logo yanında "2/3" gibi kullanılan/toplam
   bağlantı rozeti (bkz. app.js loadIntegrationCardLimitBadges) — limit dolunca kırmızıya döner. */
.int-card-limit-badge {
  position: absolute;
  top: 18px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  background: #e7f4f0;
  color: #0F4C42;
  padding: 3px 8px;
  border-radius: 999px;
}
.int-card-limit-badge-full { background: #fbe7e5; color: #b3261e; }
.int-card-icon.wide { width: auto; min-width: 200px; padding: 0 14px; justify-content: flex-start; }
/* Estesoft Stella logosu koyu (siyaha yakın) renkte — koyu temada kutu arka planı
   koyulaşınca metin okunmaz hale geliyordu, bu yüzden koyu temada renkleri
   ters çevirip (siyah -> beyaz) okunur hale getiriyoruz. */
:root[data-theme="dark"] .int-logo-invert-dark { filter: invert(1) brightness(1.6); }
.int-card h3 { font-size: 14.5px; margin: 0 0 6px; font-weight: 700; }
.int-card p { font-size: 12.5px; color: #8a93a6; margin: 0; line-height: 1.45; }
.int-card-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; margin-top: 10px; }
.int-card-status.on { color: #1c9d5b; }
.int-card-status.off { color: #b45309; }
:root[data-theme="dark"] .int-card:hover { border-color: #1c4a3a; }
:root[data-theme="dark"] .int-card-tag { background: rgba(51,211,153,.15); color: #33D399; }
:root[data-theme="dark"] .int-card p { color: #9aa5c0; }

/* Etiket filtresi (kart grid'inin üstünde) — tıklayınca sadece o etikete sahip
   kartlar gösterilir. */
.int-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.int-filter-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: #8a93a6;
}
.int-filter-chip.active { background: #0F4C42; border-color: #0F4C42; color: #fff; }
:root[data-theme="dark"] .int-filter-chip.active { background: #33D399; color: #06231b; }

/* Karta tıklayınca açılan odaklı görünüm: gereksiz sekme çubukları (bunlar artık
   kartlar tarafından karşılanıyor) gizlenir, tek bir kartın içeriği ortalanmış dar
   bir sütunda gösterilir. */
#integrations-detail #integrations-tab-bar,
#integrations-detail #meta-sub-tab-bar,
#integrations-detail #ads-analytics-sub-tab-bar {
  display: none !important;
}
/* Ayar formları iki sütun. Tek sütunda Stella CRM / PayTR gibi 10+ alanlı gruplar
   ekranı aşağı doğru uzatıyordu. Dar ekranda tek sütuna düşer. */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; text-align: left; }
.settings-grid > label { min-width: 0; }
/* Uzun metin alanları (yasal metinler, imza) tek satırı tam kaplasın — iki sütuna
   sıkıştırılınca okunmuyordu. */
.settings-grid > label:has(textarea) { grid-column: 1 / -1; }
.settings-grid textarea { min-height: 90px; max-height: 220px; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

/* Entegrasyon sekmesinde iki kartı yan yana koyan düzen (ör. Stella ayarları +
   webhook). Tek sütunda sayfa iki ekrana taşıyordu. */
.int-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; text-align: left; }
@media (max-width: 980px) { .int-two-col { grid-template-columns: 1fr; } }

#integrations-detail-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
#integrations-detail-inner input, #integrations-detail-inner select { text-align: left; }
#integrations-detail-inner .data-table, #integrations-detail-inner .data-table * { text-align: left; }
#integrations-detail-inner .card > table.data-table { margin: 0 auto; }
#integrations-detail-inner > .btn-primary,
#integrations-detail #integrations-back-btn { margin-left: auto; margin-right: auto; display: flex; width: fit-content; }

.card h2 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
}

/* Geniş veri tabloları dar (mobil) ekranlarda sayfayı yatay taşırmasın diye kendi
   içinde yatay kaydırılabilir hale getirilir — tabloyu içeren kart scroll container olur. */
.card:has(table.data-table) { overflow-x: auto; }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: #FAFBFC; cursor: pointer; }
.mono { font-family: var(--font-data); font-size: 12.5px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--accent-soft); color: var(--accent-text); }
.badge-warn { background: var(--amber-soft); color: var(--amber); }
.badge-bad { background: var(--red-soft); color: var(--red); }

/* ---------------- Filters ---------------- */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filters input, .filters select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.filters input[type=text] { flex: 1; min-width: 220px; }

.date-filter {
  display: flex;
  align-items: center;
  /* Dar ekranda sarmalanmalı: "Günlük Raporu Şimdi Gönder" gibi uzun etiketli
     bir buton eklenince satır ekranı 23px taşırıyordu (ölçüldü). */
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.date-filter input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.btn-secondary, .btn-primary {
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
}
/* Tek tip buton ailesi: primary dolu yeşil, secondary aynı yeşilin çerçeveli/soft hali
   — önceden secondary beyaz/nötr, primary lacivert (--ink) idi, sayfada rastgele
   karışık iki farklı buton varmış gibi duruyordu. */
.btn-secondary { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft); }
.btn-secondary:hover { background: var(--accent-bright); color: #fff; border-color: var(--accent-bright); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #0c3a32; border-color: #0c3a32; }

.inbox-channel-icon-btn {
  width: 44px; height: 44px; border-radius: 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.inbox-channel-icon-btn:hover { background: var(--accent-soft); color: var(--text); }
.inbox-channel-icon-btn.active { background: var(--accent-soft); border-color: var(--accent-bright); color: var(--accent-text); box-shadow: 0 0 0 2px rgba(51,211,153,.25); }
.inbox-channel-icon-btn[data-channel=""] { width: auto; padding: 0 18px; border-radius: 999px; }
.inbox-channel-icon-btn[data-channel=""].active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }

.inbox-mini-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .15s, background .15s, border-color .15s;
}
.inbox-mini-icon-btn:hover { background: var(--accent-soft); }
.inbox-mini-icon-btn.active { background: var(--accent-soft); border-color: var(--accent-bright); color: var(--accent-text); box-shadow: 0 0 0 2px rgba(51,211,153,.25); }

/* ================= Gelen Kutusu — uygulama benzeri tam ekran deneyim =================
   Sayfa başlığı bilinçli olarak gizlenir (bkz. #view-inbox .view-header) ve .main'in
   normal padding'i JS tarafından (applyInboxLayoutMode, app.js) kaldırılır — bir mesajlaşma
   uygulaması gibi kenarlara kadar uzanan bir görünüm hedeflenir, sayfa içinde küçük bir
   "widget" gibi durmaz. */
#view-inbox .view-header { display: none; }
.main.main--inbox-fullbleed { padding: 0; max-width: none; }
.main.main--inbox-fullbleed #view-inbox { height: calc(100dvh - 92px); display: flex; flex-direction: column; }
@media (max-width: 768px) {
  .main.main--inbox-fullbleed #view-inbox { height: 100dvh; }
}

/* ================= Hasta Kartı — Gelen Kutusu ile aynı tam ekran şablonu ================= */
#view-patient-card .view-header { display: none; }
.main.main--patientcard-fullbleed { padding: 0; max-width: none; }
.main.main--patientcard-fullbleed #view-patient-card { height: calc(100dvh - 92px); display: flex; flex-direction: column; }
@media (max-width: 768px) {
  .main.main--patientcard-fullbleed #view-patient-card { height: 100dvh; }
}
#patient-card-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 20px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
}
#patient-card-toolbar input {
  flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit;
}
#patient-card-layout { flex: 1; min-height: 0; display: flex; gap: 0; align-items: stretch; }
#patient-card-list-card, #patient-card-detail {
  height: calc(100vh - 210px);
  height: calc(100dvh - 210px); /* iPad Safari'de 100vh araç çubuğu gizliyken geçerli olan BÜYÜK değerdir; dvh olmadan panel gerçek viewport'u taşıyor */
  overflow-y: auto; border-radius: 0; padding: 0; margin-bottom: 0;
}
.main--patientcard-fullbleed #patient-card-list-card,
.main--patientcard-fullbleed #patient-card-detail { height: auto; }
#patient-card-list-card {
  flex: 0 0 320px; width: 320px; max-width: 320px; overflow-x: hidden;
  border-right: 1px solid var(--border); background: var(--surface);
}
#patient-card-detail { flex: 1; min-width: 320px; padding: 20px; background: var(--bg); }
@media (max-width: 768px) {
  #patient-card-layout { flex-direction: column; }
  #patient-card-list-card { width: 100%; max-width: none; flex: 0 0 auto; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ================= Ortak "app gibi" şablon: Destek, Silme Talepleri, Randevu Yönetimi, Bildirimler =================
   Solda küçük/temel bilgili liste, sağda tam detay; sayfa dolgusu kaldırılır, tüm yüksekliği kaplar. */
.main.main--appview-fullbleed { padding: 0; max-width: none; }
.main.main--appview-fullbleed > .view:not([hidden]) { height: calc(100dvh - 92px); display: flex; flex-direction: column; }
@media (max-width: 768px) {
  .main.main--appview-fullbleed > .view:not([hidden]) { height: 100dvh; }
}
.appview-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 20px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
}
.appview-toolbar input, .appview-toolbar select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.appview-toolbar-title { font-size: 15px; font-weight: 700; margin-right: auto; }
.appview-layout { flex: 1; min-height: 0; display: flex; gap: 0; align-items: stretch; }
.appview-list-card {
  flex: 0 0 340px; width: 340px; max-width: 340px; overflow: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface);
}
.appview-list-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.appview-list-pager { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; }
.appview-detail { flex: 1; min-width: 320px; overflow-y: auto; padding: 20px; background: var(--bg); }
.main--appview-fullbleed .appview-list-card,
.main--appview-fullbleed .appview-detail { height: auto; }
@media (max-width: 768px) {
  .appview-layout { flex-direction: column; }
  .appview-list-card { width: 100%; max-width: none; flex: 0 0 auto; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
}
.appview-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .12s;
}
.appview-row:hover { background: var(--accent-soft); }
.appview-row.selected { background: var(--accent-soft) !important; }

/* Bir kayıt açıldığında liste kenara çekilip detay tam genişlik kullanabilsin diye —
   "Listeyi Göster" butonuyla veya yeni bir arama/liste yenilemesiyle geri açılır. */
.appview-layout.appview-list-hidden .appview-list-card,
#patient-card-layout.appview-list-hidden #patient-card-list-card { display: none; }
.appview-show-list-btn { display: none; align-items: center; gap: 6px; margin-bottom: 14px; }
.appview-layout.appview-list-hidden .appview-show-list-btn,
#patient-card-layout.appview-list-hidden .appview-show-list-btn { display: inline-flex; }

#inbox-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
}
.main--inbox-fullbleed #inbox-toolbar { border-radius: 0; }

#inbox-filter-row-1, #inbox-filter-row-2 { flex-shrink: 0; margin: 0 20px 10px; }
.main--inbox-fullbleed #inbox-filter-row-1, .main--inbox-fullbleed #inbox-filter-row-2 { margin: 10px 20px; }
#inbox-filter-row-1 select,
#inbox-filter-row-1 input,
#inbox-filter-row-2 input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
}
#inbox-filter-row-1 input[type="date"] { color-scheme: light dark; }
.inbox-date-wrap { position: relative; flex: 1 1 140px; min-width: 130px; display: flex; align-items: center; }
.inbox-date-wrap input[type="date"] { width: 100%; }
.inbox-date-wrap span.inbox-date-label {
  position: absolute; left: 13px; pointer-events: none; font-size: 13.5px; color: var(--text-muted);
}
.inbox-date-wrap input[type="date"]:not(:placeholder-shown) + span.inbox-date-label,
.inbox-date-wrap input[type="date"].has-value + span.inbox-date-label { display: none; }
@media (max-width: 768px) {
  #inbox-filter-row-1, #inbox-filter-row-2 { flex-direction: column; }
  #inbox-filter-row-1 select, #inbox-filter-row-1 input, #inbox-filter-row-2 input { width: 100%; }
}

#inbox-layout { flex: 1; min-height: 0; display: flex; gap: 0; align-items: stretch; }
.main--inbox-fullbleed #inbox-layout { padding: 0; }

#inbox-list-card, #inbox-thread-card, #inbox-profile-panel {
  height: calc(100vh - 210px);
  height: calc(100dvh - 210px);
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.main--inbox-fullbleed #inbox-list-card,
.main--inbox-fullbleed #inbox-thread-card,
.main--inbox-fullbleed #inbox-profile-panel { height: auto; }
/* Kişi bilgisi paneli — mobil uygulamadaki kişi bilgisi ekranının aynısı */
#inbox-profile-panel { flex: 0 0 340px; max-width: 340px; padding: 0; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--border); }
#inbox-profile-panel[hidden] { display: none; }
#inbox-profile-panel .ip-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 14px; }
#inbox-profile-panel .ip-top .inbox-mini-icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.ip-hero { display: flex; flex-direction: column; align-items: center; background: var(--surface); padding: 22px 14px 16px; border-bottom: 1px solid var(--border); }
.ip-avatar { width: 92px; height: 92px; border-radius: 50%; color: #fff; font-size: 32px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ip-name { font-size: 20px; font-weight: 800; text-align: center; color: var(--text); overflow-wrap: anywhere; }
.ip-sub { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; color: var(--text-muted); text-align: center; flex-wrap: wrap; justify-content: center; }
.ip-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.ip-act { width: 70px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--accent-bright); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.ip-act:hover { background: var(--accent-soft, rgba(28,157,91,.1)); }
.ip-sec { margin: 12px 12px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ip-sec:last-child { margin-bottom: 14px; }
.ip-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 4px; }
.ip-head > span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.ip-head > em { font-style: normal; font-size: 13px; color: var(--text-muted); }
.ip-link { background: none; border: none; padding: 0; font-size: 13px; font-weight: 700; color: var(--accent-bright); cursor: pointer; }
.ip-summary { font-size: 13.5px; line-height: 1.5; color: var(--text); padding: 2px 14px 12px; white-space: pre-wrap; }
.ip-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.ip-kv > span { color: var(--text-muted); flex: 0 0 auto; }
.ip-kv > b { font-weight: 600; text-align: right; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ip-muted { padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }
.ip-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: none; border: none; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--text); cursor: pointer; text-align: left; }
.ip-row:first-child { border-top: none; }
.ip-head + .ip-row { border-top: 1px solid var(--border); }
.ip-row svg { color: var(--accent-bright); flex: 0 0 auto; }
.ip-row:hover { background: var(--bg); }
.ip-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 10px 10px; }
.ip-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; background: var(--bg); }

#inbox-list-card { border-right: 1px solid var(--border); border-top: none; border-bottom: none; border-left: none; background: var(--surface); }
#inbox-list-card::-webkit-scrollbar { width: 6px; }
#inbox-list-card::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* ---- Görüşme listesi satırları ---- */
.inbox-row { position: relative; }
.inbox-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-bright); transform: scaleY(0); transition: transform .15s;
}
.inbox-row.selected::before { transform: scaleY(1); }
.inbox-row:hover { background: var(--accent-soft) !important; }
.inbox-row.selected { background: var(--accent-soft) !important; }
.inbox-avatar-wrap { position: relative; flex-shrink: 0; }
.inbox-avatar-channel-badge {
  position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.inbox-unread-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-bright);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inbox-event-card {
  align-self: center; max-width: 80%; margin: 6px auto; padding: 8px 12px; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border); font-size: 12.5px; text-align: center; color: var(--text);
}
.inbox-event-card div { margin-top: 2px; }
.inbox-event-card small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.inbox-unread-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 0 2px var(--surface); flex-shrink: 0;
}

/* ---- Görüşme ekranı ---- */
#inbox-thread-card { background: var(--bg); }
/* Sohbet ekranı mobil uygulamayla AYNI dil (29.09.2026, kullanıcı isteği):
   koyu yeşil başlık, CRM şeridi, balon renkleri, devral çubuğu. */
#inbox-thread-card {
  --chat-head: #0F4C42; --chat-head-sub: #CFE7DF;
  --bubble-assistant: #D6F1E4; --bubble-agent: #D5E6F8; --bubble-patient: var(--surface);
  --bubble-assistant-label: #0F4C42; --bubble-agent-label: #1D5FA3; --chat-wall: #ECF1EF;
}
:root[data-theme="dark"] #inbox-thread-card {
  --chat-head: #111820; --chat-head-sub: #9FB3AC;
  --bubble-assistant: #163A30; --bubble-agent: #1A2D45;
  --bubble-assistant-label: #5FD3A6; --bubble-agent-label: #7FB2EA; --chat-wall: #0B0F14;
}
#inbox-thread-header {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px 9px 14px; background: var(--chat-head); color: #fff; flex-shrink: 0;
}
#inbox-thread-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
#inbox-thread-name { display: block; color: #fff; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-handle { font-size: 12px; color: var(--text-muted); margin-left: 6px; font-weight: 400; }
.inbox-thread-handle { font-weight: 400; font-size: 12.5px; opacity: .72; margin-left: 8px; }
#inbox-thread-sub { font-size: 12px; color: var(--chat-head-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
#inbox-thread-header .inbox-avatar-channel-badge { box-shadow: 0 0 0 2px var(--chat-head); }
.inbox-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.inbox-head-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.inbox-head-btn:hover, .inbox-head-btn.active { background: rgba(255,255,255,.14); }
#inbox-mobile-back-btn { display: none; margin-left: -6px; }
#inbox-thread-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: 6px; display: flex; flex-direction: column;
}
#inbox-thread-menu[hidden] { display: none; }
#inbox-thread-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none;
  color: var(--text); font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
#inbox-thread-menu button:hover { background: var(--accent-soft); }
#inbox-thread-menu button svg { color: var(--accent-bright); flex-shrink: 0; }

#inbox-crm-strip {
  display: flex; gap: 7px; align-items: center; padding: 7px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
#inbox-crm-strip[hidden] { display: none; }
.inbox-crm-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--text); border: none; font-family: inherit;
}
.inbox-crm-pill[hidden] { display: none; }
.inbox-crm-link { color: var(--accent-bright); cursor: pointer; }

#inbox-handoff-bar, #inbox-take-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; flex-shrink: 0; font-size: 12.5px;
}
#inbox-handoff-bar[hidden], #inbox-take-bar[hidden] { display: none; }
#inbox-handoff-bar { background: #FFF3CD; color: #8A6D00; font-weight: 600; }
:root[data-theme="dark"] #inbox-handoff-bar { background: #2B2410; color: #D2A106; }
#inbox-handoff-bar span { flex: 1; min-width: 0; }
#inbox-handoff-bar button { border: none; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; padding: 2px 4px; }
#inbox-take-bar { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); }
#inbox-take-bar span { flex: 1; min-width: 0; }
#inbox-take-bar .btn-primary { border-radius: 999px; padding: 7px 14px; font-size: 13px; }

.inbox-day-sep {
  align-self: center; background: var(--surface); color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  border-radius: 8px; padding: 4px 10px; margin: 6px 0; box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.inbox-bubble-who { font-size: 11.5px; font-weight: 700; margin-bottom: 1px; display: flex; align-items: center; gap: 4px; }
.inbox-voice-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-weight: 700; font-size: 13px; }
.inbox-voice-head i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.inbox-voice-text { font-style: italic; }

#inbox-messages {
  background-color: var(--chat-wall);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -8px -8px;
}
:root[data-theme="dark"] #inbox-messages { background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); }

#inbox-thread-search-row { position: relative; z-index: 2; }
#inbox-thread-search-row input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-family: inherit;
}
#inbox-thread-search-row input:focus { outline: none; border-color: var(--accent-bright); }

.inbox-bubble-row { display: flex; flex-direction: column; }
.inbox-msg-bubble {
  padding: 8px 12px 6px !important;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.08) !important;
}
.inbox-msg-bubble.mine { border-radius: 16px 16px 4px 16px !important; }
.inbox-msg-bubble.theirs { border-radius: 16px 16px 16px 4px !important; }
.inbox-msg-time {
  font-size: 10px; opacity: .65; white-space: nowrap; margin-left: 8px; align-self: flex-end;
  display: inline-block; float: right; margin-top: 4px;
}

#inbox-composer {
  flex-shrink: 0; padding: 8px 10px; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
/* Mobil uygulamadaki mesaj kutusu: solda +, ortada yuvarlak alan (içinde kamera),
   sağda yuvarlak yeşil gönder; üstünde hazır yanıt çipleri. */
#inbox-composer-row { display: flex; gap: 8px; align-items: center; }
#inbox-plus-btn {
  width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; border-radius: 50%;
  color: var(--accent-bright); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
#inbox-plus-btn:hover, #inbox-plus-btn.open { background: var(--accent-soft); }
#inbox-reply-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px 4px 16px;
}
#inbox-reply-field #inbox-reply-text { flex: 1; }
#inbox-camera-btn {
  border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; flex-shrink: 0;
}
#inbox-camera-btn:hover { color: var(--accent-bright); }
#inbox-quick-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; scrollbar-width: none; }
#inbox-quick-row::-webkit-scrollbar { display: none; }
.inbox-quick-chip {
  flex-shrink: 0; max-width: 240px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--accent-bright);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.inbox-quick-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-quick-chip:hover { background: var(--accent-soft); }
#inbox-plus-panel {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; width: 380px; max-width: calc(100vw - 24px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); padding: 12px 14px 14px;
}
.inbox-plus-section { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 4px 2px 8px; }
.inbox-plus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-bottom: 8px; }
.inbox-plus-item {
  border: none; background: none; color: var(--text); cursor: pointer; padding: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; text-align: center; line-height: 1.2;
}
.inbox-plus-ico {
  width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-bright); transition: transform .12s;
}
.inbox-plus-item:hover .inbox-plus-ico { transform: scale(1.05); }
.inbox-plus-item.t-purple .inbox-plus-ico { background: rgba(124,58,237,.14); color: #7C3AED; }
.inbox-plus-item.t-pink .inbox-plus-ico { background: rgba(190,24,93,.14); color: #BE185D; }
.inbox-plus-item.t-blue .inbox-plus-ico { background: rgba(3,105,161,.14); color: #0369A1; }
.inbox-plus-item.t-amber .inbox-plus-ico { background: rgba(180,83,9,.14); color: #B45309; }
.inbox-plus-item.t-green .inbox-plus-ico { background: rgba(21,128,61,.14); color: #15803D; }
:root[data-theme="dark"] .inbox-plus-item.t-purple .inbox-plus-ico { color: #A78BFA; }
:root[data-theme="dark"] .inbox-plus-item.t-pink .inbox-plus-ico { color: #F472B6; }
:root[data-theme="dark"] .inbox-plus-item.t-blue .inbox-plus-ico { color: #60A5FA; }
:root[data-theme="dark"] .inbox-plus-item.t-amber .inbox-plus-ico { color: #F59E0B; }
:root[data-theme="dark"] .inbox-plus-item.t-green .inbox-plus-ico { color: #4ADE80; }
.inbox-plus-item[hidden] { display: none; }
#inbox-reply-text { border: none !important; background: none !important; padding: 6px 0 !important; min-width: 0; }
#inbox-messages .inbox-msg-bubble { max-width: min(75%, 640px) !important; }
.inbox-row-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; margin-top: 5px; }
.inbox-row-tag.red { background: rgba(192,57,43,.14); color: #c0392b; }
.inbox-row-tag.green { background: var(--accent-soft); color: var(--accent-bright); }
:root[data-theme="dark"] .inbox-row-tag.red { color: #F85149; }
#inbox-reply-text:focus { outline: none; }
#inbox-send-btn {
  width: 44px; height: 44px; border-radius: 50%; padding: 0 !important; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border: none;
  background: var(--accent-bright);
}
#inbox-send-btn:disabled { opacity: .45; cursor: default; }

/* ================= Responsive: tablet & mobil ================= */
@media (max-width: 1024px) {
  /* Tam ekran kişi bilgisi: sağ üstteki menü düğmesinin (z-index 70) ÜSTÜNDE durur, kapatma
     düğmesi mobil uygulamadaki gibi solda (geri) — yoksa menü düğmesi onu örtüyordu. */
  #inbox-profile-panel { position: fixed; inset: 0; z-index: 80; flex: none; max-width: none; width: 100%; height: 100dvh !important; border-radius: 0; border-left: none; }
  #inbox-profile-panel .ip-top { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; }
}

@media (max-width: 768px) {
  /* Gelen Kutusu bu genişlikte gerçek bir uygulama gibi tam ekran açılır — üst menü
     (.sidebar) gizlenir, geri gelmek için sabit ☰ butonu (mobile-menu-btn) kullanılır. */
  body.inbox-mobile-mode .sidebar { display: none; }
  body.inbox-mobile-mode .mobile-menu-btn { display: flex; top: 10px; right: 10px; width: 34px; height: 34px; }
  /* ☰ butonuna basılınca .sidebar'a "open" class'ı eklenir (bkz. app.js openMobileSidebar) —
     yukarıdaki display:none kuralı daha yüksek özgüllükte olduğu için "open" olsa bile
     kapalı kalıyordu; burada sabit konumlu bir çekmece (drawer) olarak açıkça geri açılıyor. */
  body.inbox-mobile-mode .sidebar.open {
    display: flex;
    position: fixed;
    top: 14px; left: 14px; right: 14px;
    z-index: 80;
  }

  #inbox-list-card { width: 100%; max-width: 100% !important; flex: 1 1 auto !important; }
  #inbox-thread-card { display: none !important; width: 100%; max-width: 100% !important; }
  #inbox-layout.inbox-mobile-open-thread #inbox-list-card { display: none !important; }
  #inbox-layout.inbox-mobile-open-thread #inbox-thread-card { display: flex !important; }
  #inbox-mobile-back-btn { display: inline-flex; }

  #inbox-toolbar { padding: 10px 12px; }
  #inbox-thread-header { padding: 8px 6px 8px 10px; }
  #inbox-thread-card { border-radius: 0 !important; }
  #inbox-composer-row { gap: 6px; }
  .inbox-channel-icon-btn { width: 38px; height: 38px; border-radius: 12px; }
}

.pagination {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 12px;
}
.pagination button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font-data);
}
.pagination button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------- Drawer (görüşme detay) ---------------- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,33,61,0.35);
  display: flex; justify-content: flex-end;
  z-index: 80;
}
.drawer-backdrop[hidden] { display: none; }
.drawer {
  width: 480px;
  max-width: 92vw;
  background: var(--surface);
  height: 100%;
  overflow-y: auto;
  padding: 28px 26px;
  position: relative;
  box-shadow: -20px 0 40px rgba(6,14,34,0.15);
}
.drawer-close {
  position: absolute; top: 18px; right: 18px;
  border: none; background: none; font-size: 22px; cursor: pointer; color: var(--text-muted);
}
.drawer h2 { margin: 0 0 2px; font-size: 18px; }
.drawer .meta-row {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.drawer .meta-row .k { color: var(--text-muted); }
.drawer .meta-row .v { font-family: var(--font-data); text-align: right; }
.drawer .section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); margin: 22px 0 10px;
}
.msg { padding: 9px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
.msg-user { background: var(--bg); }
.msg-assistant { background: var(--accent-soft); }
.msg .role { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.transfer-row { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.transfer-row .err { color: var(--red); font-family: var(--font-data); margin-top: 3px; }

/* ---------------- User modal ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,33,61,0.4);
  display: grid; place-items: center; z-index: 60;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 360px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: 14px; padding: 26px;
}
.modal h2 { margin: 0 0 18px; font-size: 17px; }
/* Kart/panel içindeki formlarda label'ın (span üstte, input altta) tutarlı
   dizilmesi için genel kural — .modal form label ile aynı desen, tek tek forma
   inline style yazmak yerine burada tanımlanır (bkz. Profilim görünümünde
   bulunan tutarsızlık: bazı formlar inline style ile, bazıları hiç stilsiz).
   Filtre çubukları gibi kasıtlı yatay diziler <label> kullanmıyor, bu yüzden
   bu kural onları etkilemiyor; kasıtlı yatay label'lar (ör. checkbox satırları)
   kendi inline display:flex'i ile bu kuralı ezmeye devam eder. */
.modal form label, .card form label { display: block; margin-bottom: 12px; }
.modal form label[hidden] { display: none; }
.modal form span, .card form label > span { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.modal form input, .modal form select, .modal form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; font-family: inherit;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.icon-btn {
  border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 12.5px;
  text-decoration: underline;
}

@media (max-width: 860px) {
  /* Üst menü dar ekranda tek satıra sığmadığı için "hamburger" (☰) menüye dönüşür:
     marka/logo her zaman görünür, nav + kullanıcı bilgisi varsayılan gizli, ☰'a
     basılınca aşağı doğru açılan dikey bir liste olarak gösterilir (bkz. app.js
     openMobileSidebar/closeMobileSidebar). */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 70;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15,76,66,.3);
  }

  .sidebar { flex-wrap: wrap; border-radius: 22px; align-items: flex-start; padding-right: 56px; }

  .nav, .sidebar-footer { display: none; width: 100%; }
  .sidebar.open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 10px;
    flex-wrap: nowrap;
    /* Taban .nav'daki flex:1 (basis 0) width:100%'ü eziyor ve menü, markanın
       YANINA dar bir sütun olarak sıkışıyordu — açıkken tam satır kaplasın. */
    flex: 1 1 100%;
  }
  .sidebar.open .sidebar-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border-left: none;
    padding-left: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.18);
    width: 100%;
  }

  .nav-item { width: 100%; }
  /* Footer'daki zil butonu da .nav-item — %100 genişlik alıp footer'ı alt alta
     kırmasın, satırda kalsın. */
  .sidebar-footer .nav-item { width: auto; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,.08);
    margin: 2px 0 2px 14px;
    min-width: 0;
  }
  .nav-dropdown-menu .nav-item { color: #fff; }
  .nav-dropdown-menu .nav-item:hover:not(.active) { background: rgba(255,255,255,.14); color: #fff; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-grid { grid-template-columns: 1fr; }
}

/* Gerçek logo görseli — login-mark ve brand-mark artık <img>, metin yerine simge */
img.login-mark,
img.brand-mark {
  background: transparent;
  object-fit: contain;
  border-radius: 8px;
}

/* "Nasıl Çalışır?" sayfası — panelin gerçek ekran görüntüleriyle anlatım. */
.howto-block {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.howto-block.reverse { flex-direction: row-reverse; }
.howto-shot { flex: 1 1 620px; min-width: 280px; }
.howto-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15,30,26,.12);
}
.howto-text { flex: 1 1 320px; min-width: 260px; }
.howto-text h2 { margin: 0 0 8px; font-size: 17px; }
.howto-text p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 720px) {
  .howto-block, .howto-block.reverse { flex-direction: column; }
}

/* Nasıl Çalışır — dokümantasyon düzeni */
.howto-nav-btn {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: var(--text);
  cursor: pointer; font-family: inherit;
}
.howto-nav-btn:hover { background: var(--accent-soft, rgba(28,157,91,.08)); }
.howto-nav-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .howto-layout { flex-direction: column; }
  #howto-nav { position: static !important; flex-direction: row !important; flex: none !important; width: 100%; overflow-x: auto; gap: 6px !important; padding-bottom: 6px; }
  .howto-nav-btn { white-space: nowrap; width: auto; }
}

/* ---------------- Tarih aralığı seçici (mountDateRange) ---------------- */
/* Hazır aralıklar solda, iki aylık takvim sağda — panelde tarih filtrelemesi
   olan her sayfada aynı bileşen kullanılır. */
.dr-wrap { position: relative; display: inline-block; }
.dr-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13.5px; cursor: pointer;
}
.dr-trigger:hover { border-color: var(--accent-bright); }
.dr-trigger svg { color: var(--accent-bright); flex-shrink: 0; }
.dr-pop {
  /* Sağ kenara yakın açılan seçicilerde takvim ekran dışına taşıyordu
     (sayfa başlığının sağındaki tarih filtresi). Konum JS'te ölçülüp
     .dr-pop-right sınıfıyla sağa yaslanıyor; taşma ihtimaline karşı
     genişlik de ekranla sınırlandı. */
  position: absolute; z-index: 200; top: calc(100% + 6px); left: 0;
  max-width: calc(100vw - 24px);
  display: flex; gap: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(6, 14, 34, 0.28); overflow: hidden;
}
.dr-pop[hidden] { display: none; }
.dr-pop.dr-pop-right { left: auto; right: 0; }
@media (max-width: 640px) { .dr-pop { flex-direction: column; } .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); } }
.dr-presets { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid var(--border); min-width: 116px; }
.dr-preset { text-align: left; background: none; border: 0; padding: 6px 10px; border-radius: 7px; cursor: pointer; color: var(--text); font-size: 13px; white-space: nowrap; }
.dr-preset:hover { background: var(--accent-soft); color: var(--accent-text); }
.dr-cal { padding: 10px 12px 12px; }
.dr-nav { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dr-nav button { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 0 8px; }
.dr-nav button:hover { color: var(--accent-bright); }
.dr-months { display: flex; gap: 18px; }
.dr-month-head { text-align: center; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; text-transform: capitalize; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 1px; }
.dr-dow { font-size: 10.5px; color: var(--text-muted); text-align: center; padding-bottom: 3px; }
.dr-day { width: 30px; height: 28px; border: 0; background: none; color: var(--text); font-size: 12.5px; cursor: pointer; border-radius: 6px; }
.dr-day:hover { background: var(--accent-soft); }
.dr-out { color: var(--text-muted); opacity: .45; }
/* Aralığın iki ucu dolgulu, arası soluk — hangi günlerin kapsandığı bir bakışta. */
.dr-in { background: var(--accent-soft); border-radius: 0; }
.dr-edge { background: var(--accent-bright); color: #fff; font-weight: 700; }
@media (max-width: 720px) {
  .dr-pop { flex-direction: column; left: auto; right: 0; }
  .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .dr-months { flex-direction: column; gap: 10px; }
}

/* Randevu Yönetimi tablo düzeni */
.appt-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.appt-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.appt-page-btn.active, .pager-btn.active { background: var(--accent-bright); color: #fff; border-color: transparent; }
.appt-page-btn[disabled], .pager-btn[disabled] { opacity: .4; cursor: default; }
#appt-tbody tr.selected { background: var(--accent-soft); }
/* Tek tarih seçicide tek ay gösterilir; açılır kutu dar kalsın. */
.dr-pop-single .dr-months { gap: 0; }

/* Çoklu seçim kutusu (mountMultiSelect) */
.ms-trigger { justify-content: space-between; min-width: 165px; }
.ms-trigger.ms-active { border-color: var(--accent-bright); color: var(--accent-text); font-weight: 600; }
.ms-pop { flex-direction: column; min-width: 210px; max-width: 300px; }
.ms-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.ms-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ms-item:hover { background: var(--accent-soft); }
.ms-item input { flex: 0 0 auto; }
.ms-empty { padding: 10px; color: var(--text-muted); font-size: 12.5px; }
.ms-foot { border-top: 1px solid var(--border); padding: 6px; }
.ms-clear { width: 100%; background: none; border: 0; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--text-muted); font-size: 12.5px; }
.ms-clear:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Gösterge kutularındaki para tutarları: rakamlar hizalı ve kutuya sığsın.
   Milyonlu tutarlar varsayılan boyutta kartı taşırıyordu. */
.stat-card .value.stat-amount { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------------- Dosya önizleme (hasta kartı > Dosya & Fotoğraf) ---------------- */
/* Belge yeni sekmede değil ön pencerede açılır; sekme değiştirip geri dönmek
   sık yapılan bir iş için gereksiz ağırdı. */
.file-preview-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(6, 14, 34, 0.68);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.file-preview-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: min(1000px, 100%); height: min(88dvh, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(6, 14, 34, 0.4);
}
.file-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.file-preview-body {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 10px; overflow: auto;
}

/* Üst menüde asistanın canlı olduğunu gösteren nokta (Stella'daki yeşil işaret
   gibi): sayı değil, yalnızca "trafik var" bilgisi. */
.nav-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #3ddc84; margin-left: 6px; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); animation: navLivePulse 2.4s infinite;
}
@keyframes navLivePulse {
  70% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav-live-dot { animation: none; } }

/* Takvimdeki hasta arama kutusu ve sonuç listesi */
.cal-patient-results { flex-direction: column; padding: 6px; min-width: 240px; max-height: 320px; overflow: auto; }
.cal-patient-hit {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: none;
  color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
}
.cal-patient-hit:hover { background: var(--accent-soft); color: var(--accent-text); }
.cal-patient-hit small { color: var(--text-muted); font-size: 11.5px; margin-left: auto; }

/* pcModal bölüm başlığı — lisans panelindeki müşteri formuyla aynı dil.
   Uzun formlar (Yeni Hasta / Hastayı Düzenle) tek sütunda aşağı doğru
   uzayıp kaydırma gerektiriyordu; bölümlere ayrılmış geniş modal bunu
   enlemesine yayıyor. */
.pc-section-title {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 4px 9px;
  border-radius: 6px;
  width: fit-content;
  margin: 10px 0 0;
}
.pc-section-title:first-child { margin-top: 0; }
:root[data-theme="dark"] .pc-section-title { color: var(--accent-bright); background: rgba(51,211,153,0.12); }

/* Giriş ekranı tanıtım satırı iki satıra bölünebilir: metindeki satır sonu
   korunur. <br> KULLANMA — i18n.js çeviriyi textContent ile yazıyor ve
   elemanın çocuklarını siliyor, <br> dil değiştirince kaybolurdu. */
.login-sub-tagline { white-space: pre-line; }

/* Giriş ekranı ikincil aksiyonları: eskiden altı çizili bağlantı görünümündeydi
   (.link-btn), panel tasarım dili gereği buton ailesine alındı — "Şifremi
   unuttum", dil anahtarı ve "Girişe dön".
   DİKKAT: giriş kartındaki ASIL butonu `button:not(.link-btn)` seçicileri
   stilliyor; sınıf değiştiği için bu butonlar oraya düşmesin diye seçicilere
   `:not(.btn-secondary)` eklendi. */
.login-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.login-actions .login-alt-btn { flex: 1; }
.login-actions .lang-toggle { margin-top: 0; }
.login-card .login-alt-btn {
  font-size: 12.5px;
  padding: 8px 12px;
  text-decoration: none;
}
.login-card .login-alt-btn-block { width: 100%; margin-top: 12px; }

/* Hasta kartı "Hızlı İşlemler" menüsü — Stella'nın kendi hasta kartındaki
   şimşek menüsünün karşılığı. Menü öğeleri satır aksiyonu değil, tam
   genişlikte liste düğmeleri. */
.pc-quick-wrap { position: relative; }
.pc-quick-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  background: var(--card, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(6, 14, 34, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-quick-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.pc-quick-menu button:hover { background: var(--accent-soft); color: var(--accent-text); }
:root[data-theme="dark"] .pc-quick-menu button:hover { color: var(--accent-bright); }

/* Buton içi ikon: .hicon marka yeşilini dayatıyor, ama kırmızı "Sil" veya
   dolu yeşil birincil butonda ikon yazıyla aynı renkte olmalı. */
.btn-ico { color: currentColor; margin-right: 6px; vertical-align: -2px; }

/* Modal içindeki tarih seçici: `.dr-trigger` filtre çubuklarında içeriği
   kadar dar bir düğme (orada doğru), ama form ızgarasında hücreyi
   doldurmuyordu — "Hatırlatma Tarihi" komşusu "Durum"dan dar ve kısa
   görünüyordu. Yalnızca pcModal içinde diğer alanlarla aynı ölçüye getirilir. */
#pc-dyn-modal .dr-wrap { display: block; width: 100%; }
#pc-dyn-modal .dr-trigger {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  font-size: 13.5px;
}
/* Yükseklikler de eşitlenir: ölçüldüğünde select 35px, tarih düğmesi 33px,
   `type=time` girdisi 38px çıkıyordu (tarayıcının saat girdisi kendi iç
   düğmesi yüzünden daha yüksek). Çok satırlı alanlar ve çoklu seçim hariç. */

/* TEK SATIRLIK FORM ALANLARI AYNI YÜKSEKLİKTE (15.09.2026 denetimi, iki
   panelde ORTAK). Ölçümle bulundu: aynı satırda select 33-38, metin girdisi
   31-34, `type=time` 38, tarih seçici düğmesi 33 px çıkıyordu; yan yana duran
   alanlar eşit görünmüyordu. Sebep select/time girdilerinin tarayıcı içi
   yüksekliği ve bağlamdan bağlama değişen padding.
   Çok satırlı alanlar (textarea), çoklu seçim listesi ve TABLO İÇİ satır
   kutuları kapsam dışı — onlar bilerek daha küçük. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select:not([multiple]),
.dr-trigger { height: 36px; }
td input, td select, th input, th select, .dr-pop input, .dr-pop select { height: auto; }

/* iOS Safari `type=date` / `type=time` girdilerine kendi ic olcusunu dayatiyor:
   `height` tek basina tutmuyor, kutu diger alanlardan belirgin yuksek ciziliyor
   (kullanicinin iPad ekran goruntusunde "Hatirlatma Saati" boyleydi).
   `appearance: none` yerli cizimi kapatinca yukseklik/hizalama uygulanabiliyor;
   dokunulunca yerli secici yine aciliyor. */
input[type="time"], input[type="date"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  line-height: normal;
}
/* Safari'de yerli cizim kapatilinca deger dikeyde yukari kaciyor. */
input[type="time"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* ── YATAY KAYAN TABLODA GİZLİ İÇERİK GÖRÜNSÜN ────────────────────────────
   Tablolar dar ekranda kartın içinde yatay kayıyordu ama kaydığına dair
   HİÇBİR İŞARET yoktu: telefonda Lead tablosunun sağındaki sütunlar sessizce
   kayboluyor, kullanıcı ekranı "eksik" görüyordu (takvimdeki hatanın aynısı;
   ölçüldü: Randevu Yönetimi tablosu 667px, ekranda 484px → 175px gizli).

   Çözüm SAF CSS, JS dinleyicisi YOK: dört katmanlı arka plan. İki "maske"
   katmanı kartın kendi rengiyle `background-attachment: local` (içerikle
   birlikte kayar), iki "gölge" katmanı `scroll` (kutuya sabit). Kenarda içerik
   kalmadığında maske gölgeyi örter — yani gölge YALNIZCA o yönde gizli içerik
   varken görünür. Yeni bir tablo eklerken ek iş gerekmez, kendiliğinden çalışır.

   Gölge rengi temaya bağlı: koyu temada siyah gölge zeminde kaybolur. */
.card:has(table.data-table),
.table-scroll {
  background-image:
    linear-gradient(to right, var(--surface) 40%, transparent),
    linear-gradient(to left, var(--surface) 40%, transparent),
    linear-gradient(to right, var(--scroll-shade), transparent 15px),
    linear-gradient(to left, var(--scroll-shade), transparent 15px);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Dar ekranda tablolar SIĞMAYA ÇALIŞIR: 560px'lik taban genişlik kalkar,
   yazı ve iç boşluk küçülür. Az sütunlu tablolar böylece hiç kaymadan
   sığar; çok sütunlu olanlar yine kayar ama artık yukarıdaki gölge sayesinde
   kaydığı GÖRÜNÜR. */
/* ── DAR EKRANDA TABLO = SATIR KARTI ──────────────────────────────────────
   `min-width`i düşürmek yetmedi: sığmayan şey içeriğin kendisiydi (uzun ad,
   telefon, kaymayan aksiyon butonları — ölçüldü: Randevu Yönetimi tablosu
   667px, ekran 484px). Telefonda her satır dikey bir karta dönüşür, böylece
   hiçbir sütun gizli kalmaz ve yatay kaydırma tamamen ortadan kalkar.

   Sütun başlıkları `data-label` ile hücrenin soluna basılır (JS tarafı:
   applyTableLabels, tek global gözlemciye bağlı) — yoksa "12.500,00 ₺" gibi
   bir sayının hangi sütuna ait olduğu anlaşılmazdı, ciro raporlarında kritik.
   `colspan`li hücre (boş durum satırı) etiketsiz ve tam genişlik kalır. */
@media (max-width: 640px) {
  .data-table { min-width: 0; font-size: 13px; display: block; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tbody tr {
    display: block;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody td {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    border: 0;
    padding: 3px 0;
    text-align: right;
  }
  /* Etiket solda, sönük ve KISALMAZ; değer sağda ve taşarsa alta sarar. */
  .data-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }
  .data-table tbody td[colspan] { justify-content: center; text-align: center; }
  /* Aksiyon butonları satırın tamamını alıp sağa yaslanır. */
  .data-table tbody td .row-actions { justify-content: flex-end; flex-wrap: wrap; }
  /* Kart düzenine geçince yatay kaydırma kalmadı: gölge işareti de gereksiz. */
  .card:has(table.data-table) { background-image: none; overflow-x: visible; }
}

/* ── Süzgeç satırı + "Daha fazla filtre" (Stella modüllerinde ortak) ───────
   Sık kullanılanlar tek satırda, az kullanılanlar data-filter-more-body kabında
   gizli; düğmedeki rozet gizli kapta etkin süzgeç sayısını gösterir. */
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar.filter-more, .appt-filter-bar.filter-more {
  padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface);
  margin-top: -6px;
}
[data-filter-more-body][hidden] { display: none !important; }
.filter-more-inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-group { display: inline-flex; gap: 6px; align-items: center; }
.filter-label { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.filter-more-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Açıkken dolu yeşil + beyaz yazı: genel .btn-secondary.active zemini yeşile
   boyuyor, yazı da yeşil kalınca "Filtre" okunmuyordu (28.09.2026). */
.filter-more-toggle.active { background: var(--accent-bright); border-color: transparent; color: #fff; }
.filter-more-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--accent-bright); color: #fff; font-size: 11px; font-weight: 700;
}

/* Satır aksiyonu — yalnızca ikon, adı title/aria-label'da. Yazılı butonlar
   dar ekranda satırı taşırıyordu (Dinamik Arama, Teklifler, Lead'ler).
   Ayrı sınıf: eski .icon-btn iki farklı tanımla (603 ve 1203) çakışıyor. */
.act-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent-bright);
  cursor: pointer; vertical-align: middle; text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.act-btn + .act-btn { margin-left: 4px; }
.act-btn:hover { border-color: var(--accent-bright); background: rgba(51, 211, 153, 0.10); }
.act-btn .btn-ico { margin: 0; vertical-align: 0; }
.act-btn.act-danger { color: var(--red); }
.act-btn.act-danger:hover { border-color: var(--red); background: rgba(192, 67, 61, 0.08); }
.act-cell { white-space: nowrap; text-align: right; }

/* Son not balonu (Dinamik Arama) — satır yüksekliği nota göre oynamasın diye
   not hücrede değil burada gösterilir. Tek global öğe, body'ye bağlı. */
.note-pop {
  position: fixed; z-index: 3000; max-width: min(360px, calc(100vw - 24px)); padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap;
  pointer-events: none;
}

/* ── "Dışa Aktar" menüsü (listExport.js, iki panelde ortak) ─────────────── */
.view-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.export-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.export-menu { position: relative; display: inline-flex; }
.export-menu[hidden] { display: none; }
.export-menu-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.export-menu-btn .btn-ico { margin-right: 0; }
.export-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.export-menu-pop[hidden] { display: none; }
.export-menu-pop button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.export-menu-pop button svg { color: var(--accent-bright); flex: 0 0 auto; }
.export-menu-pop button:hover { background: rgba(51, 211, 153, 0.10); }

/* ── Klinik Akışı ─────────────────────────────────────────────────────── */
.cf-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cf-toolbar select, .cf-toolbar input { min-width: 150px; }
.cf-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cf-mode-btn { border: 0; background: transparent; color: var(--text-muted); padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cf-mode-btn.active { background: var(--accent-soft); color: var(--accent-bright); }
.cf-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; margin: 4px 0 14px; }
.cf-stamp { margin-left: auto; }
.cf-muted { color: var(--text-muted); }
.cf-warn-text { color: var(--red); }
/* Sütunlar sığmazsa KAYMAZ, alt satıra sarar (yatay kayma gizli içerik üretir). */
.cf-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.cf-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cf-col, .cf-room { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.cf-col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 700; }
.cf-count { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.cf-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cf-col-arrived .cf-col-head, .cf-col-waiting_procedure .cf-col-head { color: var(--amber); }
.cf-col-in_procedure .cf-col-head, .cf-col-consult .cf-col-head { color: var(--accent-bright); }
.cf-room-busy { border-color: var(--accent-bright); }
.cf-empty { color: var(--text-muted); text-align: center; font-size: 12px; padding: 10px 0; }
.cf-card { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; background: var(--bg); }
.cf-card.cf-warn { border-left-color: var(--amber); }
.cf-card.cf-late { border-left-color: var(--red); background: var(--red-soft); }
.cf-card.cf-unconfirmed { border-left-color: var(--red); }
.cf-card-head { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.cf-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.cf-status { text-align: right; }
.cf-name { font-weight: 700; font-size: 13.5px; color: var(--text); text-decoration: none; }
a.cf-name:hover { color: var(--accent-bright); }
.cf-service { font-weight: 600; }
.cf-timer { margin-top: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-late .cf-timer { color: var(--red); }
.cf-warn .cf-timer { color: var(--amber); }
.cf-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cf-act { border: 1px solid var(--accent-bright); background: transparent; color: var(--accent-bright); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cf-act:hover { background: var(--accent-soft); }
.cf-act-danger { border-color: var(--red); color: var(--red); }
.cf-act-danger:hover { background: var(--red-soft); }
.cf-act:disabled { opacity: .5; cursor: wait; }
@media (max-width: 640px) {
  .cf-board { grid-template-columns: 1fr; }
  .cf-toolbar select, .cf-toolbar input { min-width: 0; flex: 1 1 140px; }
}

/* Ana sayfa "Bugünkü tahsilat": tek kutu genişliğinde (27.09.2026, kullanıcı
   "biraz geniş" dedi). Milyonlu tutar sığsın diye yazı diğer kutulardan küçük,
   birim gerekirse alt satıra iner; yöntem dökümü satır satır, tutarlar sağda. */
.stat-card .value.dash-money { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stat-card .value.dash-money .dash-money-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dash-methods { display: grid; gap: 2px; margin-top: 8px; font-size: 12.5px; }
.dash-methods div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); }
.dash-methods b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Performans raporları: klinik performansında değişim yönü (iyi = yeşil,
   kötü = kırmızı; "gelmeyen arttı" kötü sayılır, yön sunucuda belirlenir). */
.data-table td.crm-trend-up { color: var(--accent-bright); font-weight: 600; }
.data-table td.crm-trend-down { color: var(--red); font-weight: 600; }
.crm-report-note { grid-column: 1 / -1; font-size: 12.5px; color: #b45309; background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.35); border-radius: 10px; padding: 8px 12px; }

/* Kazanılan zaman + Sabah Brifingi yan yana; dar ekranda alt alta. */
.dash-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.dash-top > .card { margin-bottom: 0; min-width: 0; }

/* ── Ana sayfa kutuları (27.09.2026) ── */
/* Dört kutu: 900px üstünde 2×2 (auto-fit 1440'ta 3+1 diziyordu, ölçüldü). */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-grid > .card { margin-bottom: 0; min-width: 0; }
.dash-h-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.dash-body { font-size: 13px; }
.dash-muted { color: var(--text-muted); font-size: 12.5px; }
/* Kutu sayıya göre değil YERE göre dizilir: dar kartta (iPad + sol menü) beş kutu 48px'e iniyor,
   "Bekleniyor" taşıyor, "Gelmedi / İptal" kırılıyordu (02.10.2026). Sığmazsa alt satıra geçer. */
.dash-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dash-mini { border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; text-align: center; }
.dash-mini-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-mini-l { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dash-mini.ok .dash-mini-v { color: var(--accent-bright); }
.dash-mini.bad .dash-mini-v { color: var(--red); }
.dash-sec { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 6px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); }
.dash-chip b { margin-left: 3px; }
.dash-bar-row, .dash-funnel-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 8px; padding: 3px 0; }
.dash-funnel-row { grid-template-columns: minmax(120px, 40%) 1fr 44px 40px; padding: 5px 0; }
.dash-rate { text-align: right; }
.dash-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar { display: block; height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.dash-bar-lg { height: 12px; }
.dash-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-bright); }
.dash-bar-row b, .dash-funnel-row b { font-variant-numeric: tabular-nums; text-align: right; min-width: 24px; }
.dash-funnel-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dash-occ { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.dash-occ-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; padding: 4px 0; border-radius: 8px; }
.dash-occ-cell.today { background: var(--accent-soft); }
a.dash-occ-cell { color: inherit; text-decoration: none; cursor: pointer; transition: background .15s; }
a.dash-occ-cell:hover, a.dash-occ-cell:focus-visible { background: var(--accent-soft); outline: none; }
a.dash-occ-cell.today:hover { box-shadow: inset 0 0 0 1px var(--accent-bright); }
.dash-occ-cell b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dash-occ-bar { height: 90px; width: 70%; display: flex; align-items: flex-end; }
.dash-occ-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent-bright); }
.dash-hm { display: grid; grid-template-columns: 32px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10.5px; }
.dash-hm-h { color: var(--text-muted); text-align: left; }
.dash-hm-d { color: var(--text-muted); line-height: 18px; }
.dash-hm-c { height: 18px; border-radius: 3px; background: var(--accent-bright); }
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-occ { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 10px; }
  .dash-occ-bar { height: 60px; }
  .dash-hm-c { height: 12px; }
  .dash-hm-d { line-height: 12px; }
}

/* Menü rozetleri (27.09.2026, lisans paneliyle aynı): üst seviyedeki öğe ve açılır
   menü başlığında rozet KÖŞE BALONU — metnin yanında durup öğeyi genişletmesin,
   menüyü ikinci satıra atmasın. Açılır menünün içinde satır sonunda kalır.
   Menü başlığındaki balon içerideki rozetlerin toplamıdır (syncNavGroupBadges),
   menü kapalıyken içerideki iş (silme talebi, yeni lead) gözden kaçmasın. */
.nav > .nav-item, .nav-dropdown-trigger { position: relative; }
.nav > .nav-item > .nav-badge, .nav > .nav-item > .nav-count, .nav-dropdown-trigger > .nav-count {
  position: absolute; top: -7px; right: -9px; margin: 0; min-width: 17px; height: 17px;
  line-height: 17px; padding: 0 5px; font-size: 10px; text-align: center;
  box-shadow: 0 0 0 2px var(--accent); pointer-events: none; z-index: 1;
}
@media (max-width: 860px) {
  .nav > .nav-item > .nav-badge, .nav > .nav-item > .nav-count, .nav-dropdown-trigger > .nav-count {
    position: static; margin-left: auto; box-shadow: none;
  }
}
/* Dar masaüstü / iPad yatay (1180-1279px): menü aralığı sıkışır, lisans panelindeki
   kuralın aynısı. Olmadan 1194px'te "CruzSoft" ikinci satıra düşüyordu (ölçüldü,
   rozetlerden bağımsız, eskiden beri). Yazı boyutu ve dikey dolgu değişmez. */
@media (min-width: 861px) and (max-width: 1279px) {
  .sidebar { gap: 10px; }
  .nav { gap: 3px; }
  .nav-item, .nav-dropdown-trigger { padding-left: 10px; padding-right: 10px; }
}

/* Takvim başlığı (28.09.2026): dört grup — aksiyonlar / görünüm / gezinme /
   tarih. Geniş ekranda başlığın yanında tek akış; 640px altında başlığın ALTINA
   iner ve her grup kendi satırını alır. Eskiden tek akıştı, telefonda butonlar
   "Takvim" başlığının yanında dar bir sütuna sıkışıp tarih en alta düşüyordu. */
.cal-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; justify-content: flex-start; }
.cal-grp { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.cal-grp-nav { margin-left: 6px; }
.cal-head-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
@media (max-width: 640px) {
  /* Telefonda başlık bir ızgara: "Takvim" ile tarih seçici aynı satırda, altında
     görünüm + gezinme (28.09.2026, kullanıcı isteği). Yeni Randevu / Randevu
     Listesi / Yenile başlıkta DEĞİL, filtre satırında (.cal-toolbar). */
  #view-calendar .view-header {
    display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; align-items: center;
    grid-template-areas: "title date" "mode nav";
  }
  #view-calendar .view-header > div:first-child { grid-area: title; }
  .cal-head { display: contents; }
  /* Gün/Hafta/Ay tek bitişik segment */
  .cal-grp-mode { grid-area: mode; gap: 0; flex-wrap: nowrap; }
  .cal-grp-mode .appt-cal-mode { border-radius: 0; }
  .cal-grp-mode .appt-cal-mode:first-child { border-radius: 8px 0 0 8px; }
  .cal-grp-mode .appt-cal-mode:last-child { border-radius: 0 8px 8px 0; }
  .cal-grp-mode .appt-cal-mode + .appt-cal-mode { margin-left: -1px; }
  .cal-grp-nav { grid-area: nav; margin-left: 0; justify-self: end; flex-wrap: nowrap; }
  .cal-grp-date { grid-area: date; justify-self: end; flex-wrap: nowrap; }
  /* Gün görünümünde tarih yazısı yok (seçici zaten gösteriyor); hafta/ay
     görünümünde seçici tek gün gösterdiği için aralık yazısı alt satırda kalır. */
  .cal-head-title { grid-column: 1 / -1; font-size: 15px; }
  .cal-head[data-mode="day"] .cal-head-title { display: none; }
  .cal-grp-date #appt-cal-date { flex: none; width: 128px; }
  /* Damga telefonda yer kaplamasın; "Yenile" zaten bir dokunuş uzakta. */
  #appt-cal-stamp { display: none; }
  /* İkinci satır: Yeni Randevu / Randevu Listesi / Yenile yalnızca ikon, yanında
     hasta arama + Filtre (28.09.2026, kullanıcı isteği). Filtre açılınca durum/
     personel/tip kutuları kendi satırına iner. */
  .cal-grp-actions { flex-wrap: nowrap; flex: none; }
  .cal-grp-actions > button { white-space: nowrap; padding: 6px 9px !important; }
  .cal-grp-actions > button > svg { margin: 0; }
  .cal-btn-label, .cal-refresh-label { display: none; }
  #view-calendar .cal-toolbar { gap: 6px !important; }
  #view-calendar .cal-filters { display: contents !important; }
  #view-calendar .cal-filters > .filter-more-toggle { flex: none; }
}

/* Takvim filtre satırı telefonda: hasta arama kalan genişliği alır, Filtre
   düğmesi sağda; açılan durum/personel/tip kutuları tam genişlik. */
@media (max-width: 640px) {
  #view-calendar .cal-patient-search { flex: 1; min-width: 0; }
  #view-calendar .cal-patient-search input { width: 100%; min-width: 0 !important; box-sizing: border-box; }
  #view-calendar [data-filter-more-body="cal"] { width: 100%; flex-basis: 100%; display: grid !important; grid-template-columns: 1fr; }
  #view-calendar [data-filter-more-body="cal"][hidden] { display: none !important; }
  #view-calendar [data-filter-more-body="cal"] .dr-wrap, #view-calendar [data-filter-more-body="cal"] .dr-wrap > button { width: 100%; }
}

/* Görevler sayfası: alt çizgili sekmeler (Hasta Kartı sekmeleriyle aynı dil) */
.tasks-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 14px 0; border-bottom: 1px solid var(--border); }
.tasks-tab { border: 0; background: transparent; color: var(--text-muted); padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tasks-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
#tasks-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  #tasks-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #tasks-stats .stat-card { padding: 10px 12px; }
  #tasks-stats .stat-card .sub { display: none; }
}
.tasks-acts { display: inline-flex; gap: 6px; }

/* Satış / teklif formu TAM SAYFA (28.09.2026, kullanıcı isteği): küçük pencerede
   kalem ve ödeme satırları alt alta sıkışıyordu. Geniş ekranda her kalem ve
   her ödeme TEK SATIR (Stella'nın satış ekranı gibi), dar ekranda iki sütuna
   sarar. Başlık şeridi sabit; kaydet düğmesi hem üstte hem altta. */
.ps-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--bg); overflow: auto; overscroll-behavior: contain; }
.ps-page { min-height: 100%; }
.ps-page-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.ps-page-head h3 { margin: 0; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-back { background: none; border: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.ps-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ps-page-body { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; }
.ps-f { display: block; font-size: 11.5px; color: var(--text-muted); min-width: 0; }
.ps-f > div { margin-top: 3px; }
.ps-head-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ps-f-patient { grid-column: span 2; }
.ps-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent-bright); background: var(--accent-soft, rgba(28,157,91,0.08));
  padding: 4px 9px; border-radius: 6px; width: fit-content; margin: 20px 0 8px;
}
.ps-item, .ps-pay { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
.ps-item-grid { display: grid; grid-template-columns: 110px minmax(240px, 3fr) 80px 90px 90px minmax(120px, 1.2fr) 34px; gap: 8px; align-items: start; }
.ps-pay-grid { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(150px, 1.4fr) minmax(110px, 1fr) 90px 150px 100px 34px; gap: 8px; align-items: start; }
.ps-pay.is-debt { border-left: 3px solid #d68910; }
.ps-del { margin-top: 18px; background: #c0392b; color: #fff; border: none; border-radius: 8px; width: 34px; height: 32px; cursor: pointer; font-size: 15px; }
.ps-pay-flag { padding-top: 24px; font-size: 12.5px; color: var(--text); white-space: nowrap; }
.ps-pay-deposit-wrap { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ps-pay-deposit-wrap[hidden] { display: none; }
.ps-pay-taksit { font-weight: 700; color: #d68910; }
.ps-price-hint { font-size: 11px; margin-top: 3px; }
#ps-totals { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--accent-soft, rgba(28,157,91,0.08)); font-size: 13px; }
.ps-foot-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 1023px) {
  /* Sil düğmesi kartın sağ üst köşesinde — ızgarada tek başına bir satır açıyordu. */
  .ps-item, .ps-pay { position: relative; }
  .ps-item-grid, .ps-pay-grid { padding-right: 38px; }
  .ps-item-grid .ps-del, .ps-pay-grid .ps-del { position: absolute; top: 8px; right: 8px; margin-top: 0; width: 30px; height: 30px; }
  /* Kalem: 1. satır Tip + Hizmet, 2. satır Miktar/İndirim/Kur/Fiyat */
  .ps-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-item-grid .ps-f-kind { grid-column: 1 / 2; }
  .ps-item-grid .ps-f-entity { grid-column: 2 / 5; }
  .ps-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-pay-flag { padding-top: 6px; }
}
@media (max-width: 640px) {
  .ps-page-head { padding: 8px 12px; }
  .ps-head-actions .btn-secondary { display: none; }
  .ps-page-body { padding: 14px 12px 32px; }
  .ps-f-patient { grid-column: auto; }
  .ps-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-item-grid .ps-f-kind, .ps-item-grid .ps-f-entity { grid-column: 1 / -1; }
}

/* Dinamik Arama TEK SATIR (28.09.2026): Referans/Temsilci kayınca satır iki
   katına çıkıyordu. Metin hücreleri "…" ile kısalır, tamamı title'da.
   Dar ekranda (satır kartı) kısaltma kalkar, kartta yer var. */
.ds-table td { white-space: nowrap; }
.ds-trunc { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ds-trunc.ds-name { max-width: 240px; }
@media (max-width: 1279px) {
  .ds-trunc { max-width: 105px; }
  .ds-trunc.ds-name { max-width: 170px; }
  .ds-table th, .ds-table td { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 640px) {
  .ds-table td { white-space: normal; }
  .ds-trunc, .ds-trunc.ds-name { max-width: none; white-space: normal; }
}
.ds-two { display: flex; flex-direction: column; line-height: 1.2; }
.ds-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Ana sayfa kısayolları (29.09.2026) ── */
/* Başlığın SAĞINDA küçük KARE kutular. Kullanıcı: "sayfa aşağı kaymasın, başlık üstte
   dursun, sağdaki boşluğa ne sığıyorsa". Bu yüzden kutular başlık satırını BÜYÜTMEZ:
   akıştan çıkarılıp (absolute) üst menü ile ilk kart arasındaki boşluğa oturur.
   Ölçüm: menü altı → ilk kart arası 70px; 58px kare, alttan 7px pay (bottom:-7px). */
#view-dashboard > .view-header { position: relative; }
.dash-shortcuts { position: absolute; right: 0; bottom: -7px; display: flex; gap: 8px; }
.dash-sc {
  width: 58px; height: 58px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: 700 10px/1.1 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .15s;
}
.dash-sc-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-sc-ico svg { width: 14px; height: 14px; color: var(--accent-bright); }
.dash-sc:hover { border-color: var(--accent-bright); }
.dash-sc[hidden] { display: none; }
/* Sol menüde üstte menü şeridi YOK: başlığın üstünde yalnızca 16px var, kutular sayfanın
   üst kenarından taşıp kesiliyordu (02.10.2026, iPad ekran görüntüsü). Burada başlık satırı
   kutu yüksekliğine çıkar, kutular satırın içinde durur. */
@media (min-width: 641px) {
  :root[data-menu="side"] #view-dashboard > .view-header { min-height: 58px; align-items: center; }
  :root[data-menu="side"] .dash-shortcuts { top: 0; bottom: auto; }
}
/* Telefonda başlığın yanında yer yok: başlığın altında dört eşit kare. */
@media (max-width: 640px) {
  .dash-shortcuts { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .dash-sc { width: auto; height: auto; aspect-ratio: 1 / 1; font-size: 11px; }
}

/* Tahlil Analizi — çok sayfalı belge önizlemesi */
.lab-pages { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.lab-page { position: relative; width: 96px; height: 124px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft, var(--card)); }
.lab-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-page-pdf { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 700; color: var(--accent-bright); }
.lab-page-no { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 7px; }
.lab-page-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 20px; cursor: pointer; padding: 0; }

/* Profilim (29.09.2026) — üstte kimlik kartı, altında üç eşit kutu; kutuların
   içindeki alanlar kutu genişliğini doldurur (eskiden 280px'te kalıp sağda boşluk
   bırakıyordu). */
.profile-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #105044, #2DBD8B); }
.profile-id { flex: 1; min-width: 200px; }
.profile-name { font-size: 20px; font-weight: 700; color: var(--text); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.profile-meta span + span::before { content: '·'; margin-right: 10px; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.profile-chips:empty { display: none; }
.profile-prefs { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.profile-prefs label { display: block; margin: 0; }
.profile-prefs label > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.profile-prefs select { width: 130px; font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.profile-prefs .btn-secondary { white-space: nowrap; }
@media (max-width: 640px) { .profile-prefs { margin-left: 0; width: 100%; } .profile-prefs select { width: 100%; } .profile-prefs label { flex: 1; } }
.profile-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.profile-chip.ok { color: #1c9d5b; border-color: rgba(28,157,91,.35); background: rgba(28,157,91,.08); }
.profile-chip.warn { color: #c77700; border-color: rgba(199,119,0,.35); background: rgba(199,119,0,.08); }
.profile-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.profile-grid > .card.table-card { overflow-x: auto; }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-grid > .card { margin: 0; }
.profile-form { display: flex; flex-direction: column; gap: 12px; }
.profile-form label { display: block; }
.profile-form label > span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.profile-form input, .profile-form select { width: 100%; }
.profile-form > .btn-primary, .profile-form > .btn-secondary { align-self: flex-start; }
.profile-msg { font-size: 12.5px; margin: 0; }
.profile-2fa-status { font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; }

/* Gelen Kutusu: gönderilemeyen (iyimser) mesajın altındaki "Tekrar dene" satırı */
.inbox-pending-retry { align-self: flex-end; background: none; border: none; padding: 2px 4px; margin-top: 2px; font-size: 12px; color: #e74c3c; cursor: pointer; text-align: right; max-width: 75%; }
.inbox-pending-retry b { color: var(--accent-bright); }

/* Yeni sürüm hazır şeridi (sayfa güvenli anda kendiliğinden yenilenir) */
#app-update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #0F4C42; color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
#app-update-bar button { background: #2DBD8B; color: #06231d; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer; }

/* Asistan listesi başı — mobil uygulamadaki liste ekranının aynısı (30.09.2026):
   arama kutusu + süzgeç çipleri + devir uyarı şeridi. Eski kanal ikonları ve ayrı
   arama/süzgeç satırları kaldırıldı (öğeler JS için DOM'da, gizli). */
#inbox-toolbar, #inbox-filter-row-1, #inbox-filter-row-2 { display: none !important; }
#inbox-list-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 12px 0; }
.inbox-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.inbox-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; height: 36px; font-size: 14px; color: var(--text); outline: none; }
#inbox-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
#inbox-chips::-webkit-scrollbar { display: none; }
.inbox-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 0; background: var(--bg); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.inbox-chip.on { background: var(--accent-soft, rgba(28,157,91,.14)); color: var(--accent-text); }
.inbox-chip b { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; text-align: center; }
.inbox-chip b.alert { background: #e74c3c; }
.inbox-chip-channel { padding: 6px 8px; }
.inbox-chip-ico { display: inline-flex; line-height: 0; }
.inbox-chip-channel:not(.on) .inbox-chip-ico { opacity: .85; }
#inbox-pending-banner { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 10px 12px 4px; padding: 11px 12px; border: 0; border-radius: 12px; background: rgba(231,76,60,.10); color: #c0392b; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
#inbox-pending-banner span { flex: 1; }
.inbox-list-title { font-size: 24px; font-weight: 800; letter-spacing: -.4px; color: var(--text); margin: 0 0 8px 2px; }
@media (max-width: 860px) { .inbox-list-title { padding-right: 60px; } } /* sağ üstteki menü düğmesine yer */
/* Masaüstünde fareyle yatay kaydırma zor: çipler alt satıra sarar (telefonda kaydırmalı kalır). */
@media (min-width: 861px) { #inbox-chips { flex-wrap: wrap; overflow: visible; } }

/* Mesajdaki görsel: küçük önizleme, tıklanınca tam boy (openFilePreview). */
.msg-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; white-space: normal; }
.msg-thumb { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; background: rgba(0,0,0,.06); }
@media (max-width: 640px) { .msg-thumb { width: 110px; height: 110px; } }

/* Lead Yönetimi bilgi satırı: bekleyen lead + son dönüşüm (kart değil, düz bilgi). */
.lead-stats-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--text-muted); margin: -4px 0 12px; }
.lead-stats-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.lead-stats-muted { color: var(--text-muted); }