:root {
  --ink: #19192D;
  --ink-soft: #23233F;
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --border: #E2E8EF;
  --accent: #0F4C42;
  --accent-bright: #33D399;
  --accent-soft: #EDFCF4;
  --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"] {
  /* --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;
  --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 {
  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);
}

: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; }
.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) {
  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):hover { background: #0B6F73; }

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

/* ---------------- Layout ---------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  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;
}

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

.nav-item {
  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; }

.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;
}
.int-tab-btn:hover { color: var(--text); }
.int-tab-btn.active { color: var(--accent); 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; }

/* 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: center;
  gap: 6px;
}
.stat-card .label svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.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); }
.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 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; }
.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; }
@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; }
.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;
  margin-bottom: 12px;
}
.int-card-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 12px; }
.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; }

.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); }
.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;
  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); 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); 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); 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); 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);
  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; }
#inbox-profile-panel { padding: 16px; }

#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-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); }
#inbox-thread-header {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#inbox-mobile-back-btn { display: none; }

#inbox-messages {
  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: 10px 14px; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
#inbox-composer-row {
  display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 8px 6px 16px;
}
#inbox-reply-text { border: none !important; background: none !important; padding: 6px 0 !important; }
#inbox-reply-text:focus { outline: none; }
#inbox-send-btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0 !important; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent) !important; border-color: var(--accent) !important;
}

/* ================= Responsive: tablet & mobil ================= */
@media (max-width: 1024px) {
  #inbox-profile-panel { position: fixed; inset: 0; z-index: 55; max-width: none; width: 100%; height: 100dvh !important; border-radius: 0; }
}

@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: 10px 12px; }
  .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;
  }
  .sidebar.open .sidebar-footer {
    display: flex;
    flex-wrap: wrap;
    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%; }
  .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; }
}