/* ═══════════════════════════════════════════════════════════════════════════
   Nocturne — Huzurevi paneli görsel katmanı
   ───────────────────────────────────────────────────────────────────────────
   Bu dosya derlenmiş admin.style.min.css'in ÜZERİNE yüklenir (admin_layout.tpl
   ve login.tpl'de, tema <style> bloğundan sonra). Amaç: panelin renk, tipografi,
   yarıçap ve gölge dilini tek bir token setine bağlamak — mobil uygulamanın
   Nocturne tasarım sistemiyle aynı kaynak.

   Neden ayrı dosya: cms/src/Core/Assets/Frontend altındaki webpack/Tailwind
   derlemesi node_modules gerektiriyor. Kalıcı çözüm bu token'ları
   tailwind.config.js'e taşımak; bu katman o iş yapılana kadar build gerektirmeden
   aynı sonucu veriyor ve tek <link> satırı kaldırılarak geri alınabilir.

   Koyu tema: <html data-theme="dark">. Panelde ?theme=dark / ?theme=light ile
   değiştirilir (tercih localStorage'da saklanır, bkz. admin_layout.tpl).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — açık tema (varsayılan) — */
  --nc-bg:        #f2f2f8;
  --nc-surface:   #fdfdff;
  --nc-text:      #262833;
  --nc-divider:   color-mix(in srgb, #262833 15%, transparent);

  /* nötr rampa: 100 = metne en yakın, 900 = zemine en yakın.
     Koyu temada ters çevrilir, böylece aynı değişken her iki temada da doğru. */
  --nc-n-100: #262833; --nc-n-200: #383b48; --nc-n-300: #4b4e5e;
  --nc-n-400: #636779; --nc-n-500: #7f8395; --nc-n-600: #9a9eb0;
  --nc-n-700: #c6c9d6; --nc-n-800: #e4e6f0; --nc-n-900: #f0f1f8;

  --nc-accent:    #6f61c9;
  --nc-accent-2:  #7e74c9;
  --nc-accent-100:#2b2741; --nc-accent-700:#cec9f6;
  --nc-accent-800:#e6e3fc; --nc-accent-900:#f0eeff;

  --nc-ok:   oklch(0.55 0.12 158); --nc-ok-deep:   oklch(0.93 0.05 158);
  --nc-warn: oklch(0.58 0.12 82);  --nc-warn-deep: oklch(0.94 0.07 82);
  --nc-crit: oklch(0.55 0.18 24);  --nc-crit-deep: oklch(0.93 0.05 24);

  --nc-shadow-sm: 0 0 0 1px #e4e6f0;
  --nc-shadow-md: 0 0 0 1px #d9dce9, 0 6px 18px rgba(38,40,70,.10);
  --nc-shadow-lg: 0 0 0 1px #c6c9d6, 0 16px 40px rgba(38,40,70,.16);

  --nc-radius-sm: 4px; --nc-radius-md: 8px; --nc-radius-lg: 14px;
  --nc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  --nc-bg:        #161826;
  --nc-surface:   #232532;
  --nc-text:      #e9e9ed;
  --nc-divider:   color-mix(in srgb, #e9e9ed 16%, transparent);
  --nc-n-100: #f3f5fe; --nc-n-200: #e4e7f5; --nc-n-300: #cfd3e5;
  --nc-n-400: #b2b6ca; --nc-n-500: #9397ab; --nc-n-600: #75798c;
  --nc-n-700: #595d6c; --nc-n-800: #3f424d; --nc-n-900: #292b31;
  --nc-accent:    #9184d9;
  --nc-accent-2:  #a7a1db;
  --nc-accent-100:#f5f4ff; --nc-accent-700:#5d5294;
  --nc-accent-800:#423a6a; --nc-accent-900:#2b2741;
  --nc-ok:   oklch(0.74 0.1 158); --nc-ok-deep:   oklch(0.35 0.055 158);
  --nc-warn: oklch(0.8 0.1 82);   --nc-warn-deep: oklch(0.37 0.055 82);
  --nc-crit: oklch(0.7 0.14 24);  --nc-crit-deep: oklch(0.34 0.08 24);
  --nc-shadow-sm: 0 0 0 1px #3f424d;
  --nc-shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --nc-shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ── tipografi ───────────────────────────────────────────────────────────── */
/* Inter zaten admin.scss:7'de yükleniyordu ama tailwind.config.js sans olarak
   Roboto veriyordu; burada gerçekten kullanılıyor. */
body, button, input, select, textarea, .font-sans {
  font-family: var(--nc-font);
}
body {
  background-color: var(--nc-bg);
  color: var(--nc-text);
  line-height: 1.55;                 /* 14px metne 17px satır aralığı çok sıkışıktı */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }
/* DİKKAT: .text-sm / .text-base gibi Tailwind utility'lerinin line-height'ini
   BURADAN ezmeyin. View.php:682 floating etiketi 'text-sm leading-[6px]' ile
   ince bir şerit olarak konumlandırıyor; aynı spesifiklikte bir .text-sm kuralı
   sonra yüklendiği için leading-[6px]'i ezip etiketi input'un içine taşırıyor
   ve alanın değerini örtüyordu. Tipografi yalnızca body seviyesinde ayarlanır. */

/* Sayfa başlığı: admin_layout.tpl'in tema bloğu (else dalı) buna sabit #000000
   veriyor — koyu temada okunmaz kalıyordu. */
.page-title-text { color: var(--nc-text); }

/* ── yüzeyler ────────────────────────────────────────────────────────────── */
/* :not([class*="bg-opacity"]) ÖNEMLİ — Tailwind bu utility'leri
   rgb(... / var(--tw-bg-opacity)) olarak yazıyor, düz bir renk verince
   bg-opacity-* kademesi sessizce iptal oluyor. Sol menüdeki
   "bg-white bg-opacity-20" avatar bu yüzden yarı saydam daire yerine OPAK beyaz
   olup üstündeki beyaz harfi yutmuştu. Opaklıkla birlikte kullanılanlar
   Tailwind'in kendi davranışında kalır. */
.bg-white:not([class*="bg-opacity"])     { background-color: var(--nc-surface); }
.bg-slate-100:not([class*="bg-opacity"]) { background-color: var(--nc-bg); }
.bg-gray-50:not([class*="bg-opacity"])   { background-color: var(--nc-n-900); }
.bg-gray-100:not([class*="bg-opacity"])  { background-color: var(--nc-n-800); }
.bg-gray-200:not([class*="bg-opacity"])  { background-color: var(--nc-n-800); }
.hover\:bg-gray-50:hover  { background-color: var(--nc-n-900); }
.hover\:bg-gray-100:hover { background-color: var(--nc-n-800); }

/* Checkbox alanları (part/checkbox.tpl) TİKLİ durumu ASLA GÖSTERMİYORDU —
   ölçüldü (M11): girdinin sınıfı `bg-white checked:bg-blue-600` taşıyor,
   ikisi de aynı özgüllükte ((0,2,0), yukarıdaki `.bg-white:not(...)` kuralı)
   ve bu dosya derlenmiş Tailwind'den SONRA yüklendiği için `:checked` her
   zaman kaybediyordu — kutu her durumda `--nc-surface` (boş) kalıyordu.
   Panel genelinde HER onay kutusu (bu, "Nesne Özellikleri" ekranındaki
   "Liste"/"Zorunlu" dahil) tikli/tiksiz ayrımını KAYBETMİŞTİ; kullanıcı bir
   alanı listeden çıkardığını göremediği için değişikliğin tuttuğuna
   güvenemiyordu. Üç sınıflı seçici özgüllüğü (0,3,1) yukarısını kesin yener. */
input.form-check-input.checked\:bg-blue-600:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* ── metin ───────────────────────────────────────────────────────────────── */
.text-black, .text-gray-900, .text-slate-900 { color: var(--nc-text); }
.text-gray-800 { color: var(--nc-n-200); }
.text-gray-700 { color: var(--nc-n-300); }
.text-gray-600, .text-slate-600 { color: var(--nc-n-400); }
.text-gray-500, .text-slate-500 { color: var(--nc-n-500); }
.text-gray-400, .text-slate-400 { color: var(--nc-n-600); }
.text-white { color: #fff; }

/* ── kenarlıklar ─────────────────────────────────────────────────────────── */
.border-gray-200, .border-gray-300, .border-black, .border-slate-200 {
  border-color: var(--nc-divider);
}
.divide-gray-200 > * + * { border-color: var(--nc-divider); }

/* ── marka rengi: turuncu → Nocturne aksanı ──────────────────────────────── */
.bg-orange-full, .bg-orange-600, .bg-orange-700 { background-color: var(--nc-accent); }
.hover\:bg-orange-full\/90:hover, .hover\:bg-orange-full:hover { background-color: var(--nc-accent-2); }
.text-orange-full, .text-orange-600 { color: var(--nc-accent); }
.border-orange, .border-orange-full { border-color: var(--nc-accent); }
.bg-indigo-600, .bg-indigo-full { background-color: var(--nc-accent); }
.text-indigo-600, .text-indigo-full, .text-blue-600, .text-blue-700 { color: var(--nc-accent); }
.hover\:bg-indigo-700:hover { background-color: var(--nc-accent-2); }
a { color: var(--nc-accent); }
a:hover { color: var(--nc-accent-2); }

/* durum renkleri */
.text-red-500, .text-red-600, .text-red-full { color: var(--nc-crit); }
.text-green-600, .text-green-full { color: var(--nc-ok); }
.bg-red-50  { background-color: var(--nc-crit-deep); }
.bg-green-50{ background-color: var(--nc-ok-deep); }
.bg-yellow-50, .bg-amber-50 { background-color: var(--nc-warn-deep); }

/* ── yarıçap ve yükseklik ────────────────────────────────────────────────── */
.rounded    { border-radius: var(--nc-radius-sm); }
.rounded-md { border-radius: var(--nc-radius-md); }
.rounded-lg { border-radius: var(--nc-radius-md); }
.rounded-xl, .rounded-2xl { border-radius: var(--nc-radius-lg); }
.shadow-sm { box-shadow: var(--nc-shadow-sm); }
.shadow, .shadow-md { box-shadow: var(--nc-shadow-md); }
.shadow-lg, .shadow-xl { box-shadow: var(--nc-shadow-lg); }

/* ── form alanları ───────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="tel"], input[type="url"],
select, textarea, .field__input, .form-control {
  background-color: var(--nc-surface);
  color: var(--nc-text);
  border-color: var(--nc-divider);
  border-radius: var(--nc-radius-md);
}
input:hover:not([disabled]), select:hover:not([disabled]), textarea:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--nc-text) 45%, transparent);
}
:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--nc-accent); }
::placeholder { color: var(--nc-n-600); }
.field__label { color: color-mix(in srgb, var(--nc-text) 70%, transparent); }
.field__hint  { color: var(--nc-n-500); }

/* Floating etiket, input'un kenarlığını kendi zeminiyle keser; ikisi de
   View.php'de bg-[#FCFCFC] ile geliyordu, ikisini birden token'a alıyoruz
   yoksa etiketin arkasında farklı renkte bir şerit kalır. */
.bg-\[\#FCFCFC\] { background-color: var(--nc-surface); }
.text-\[\#90919D\] { color: var(--nc-n-500); }

/* ── butonlar ────────────────────────────────────────────────────────────── */
.btn__primary, .submitForm, .basicBtn {
  border-radius: var(--nc-radius-md);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
.options__button, .filter__button {
  border-radius: var(--nc-radius-md);
  border-color: var(--nc-divider);
  background-color: var(--nc-surface);
  color: var(--nc-text);
}
.options__button:hover, .filter__button:hover {
  background-color: color-mix(in srgb, var(--nc-text) 7%, transparent);
}

/* ── sekmeler ────────────────────────────────────────────────────────────── */
.tab-link {
  border-radius: 0;
  color: color-mix(in srgb, var(--nc-text) 60%, transparent);
  border-bottom: 2px solid transparent;
}
.tab-link.active {
  color: var(--nc-text);
  border-bottom-color: var(--nc-accent);
  background-color: transparent;
}

/* ── tablolar: Nocturne'ün uçları solan satır çizgisi ─────────────────────── */
#object-list, .table__primary, .table__secondary { border-collapse: collapse; }
#object-list thead th, .table__primary thead th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--nc-text) 60%, transparent);
  background: transparent;
  border-bottom: 1px solid var(--nc-divider);
}
#object-list tbody tr, .table__primary tbody tr {
  background-color: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--nc-text) 8%, transparent);
}
#object-list tbody tr:hover, .table__primary tbody tr:hover {
  background-color: color-mix(in srgb, var(--nc-text) 4%, transparent);
}
#object-list td, .table__primary td { color: var(--nc-text); }

/* ── üst bar ──────────────────────────────────────────────────────────────
   admin_layout.tpl'de içerik sarmalayıcısının en üstündeki .nc-topbar şeridi.
   dashboard__content'in lg:p-6 (24px) dolgusunun DIŞINA taşması için negatif
   kenar boşluğu kullanıyor — böylece çubuk kenardan kenara uzanıyor. */
/* DÜZEN (2026-09-11): Yeni Konuk · Vital Raporu · [arama — esner] · Vardiya
   Raporu · Günlük Rapor · tema · zil · olay. Tek satır, asla kırılmaz
   (flex-wrap: nowrap); genişlik farkını YALNIZ arama kutusu emer. Eskiden
   buradaki kırıntı yolu margin-right:auto ile her şeyi sağa itiyordu — kırıntı
   kalktı, o boşluğu artık arama dolduruyor.

   Sol menü açık/kapalı durumu bu hesabı DEĞİŞTİRMEZ: .dashboard__menu
   position:fixed ve 70px; hover'da 280px'e açılırken içeriğin ÜSTÜNE biner,
   .dashboard__content'in 70px'lik sol boşluğu sabit kalır. */
.nc-topbar {
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  padding: 9px 22px;
  margin: -24px -24px 20px;
  background-color: var(--nc-surface);
  border-bottom: 1px solid var(--nc-divider);
}
/* Arama: görünüşü kutu, aslında mevcut hızlı arama tetikleyicisi
   (.js-open-to-search-box → #menu_popup). Sabit 240px yerine KALAN genişliğin
   tamamını alır: ekran büyüdükçe uzar, küçüldükçe kısalır. min-width tabanı,
   dar ekranda butonlar sığdıktan sonra kutunun tanınır kalacağı en kısa boy;
   metin ellipsis ile kısalır, kutu satır kırmaz. */
.nc-topbar__search {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1 1 auto; width: auto; min-width: 160px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-md);
  background-color: var(--nc-bg);
  color: color-mix(in srgb, var(--nc-text) 55%, transparent);
  font-size: 13px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.nc-topbar__search:hover {
  border-color: color-mix(in srgb, var(--nc-text) 30%, transparent);
  background-color: var(--nc-surface);
}
/* Odakta mor çerçeve + halka (input odağının görünümü). Global :focus-visible
   outline'ı burada kapatılıyor, yoksa halkanın 2px dışında ikinci bir çerçeve
   çizilir. Renkler tema değişkeninden — koyu temada da doğru ton. */
.nc-topbar__search:focus,
.nc-topbar__search:focus-visible {
  outline: none;
  border-color: var(--nc-accent);
  background-color: var(--nc-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc-accent) 22%, transparent);
}
.nc-topbar__search svg { width: 16px; height: 16px; flex: none; }
.nc-topbar__search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Üst bardaki aksiyon butonları biraz daha kompakt — çubuk 36px yüksekliğinde.
   flex:none → butonlar ASLA küçülmez; daralmayı arama emer. */
.nc-topbar__action { flex: none; height: 36px; padding: 0 12px; white-space: nowrap; }

/* DAR lg ARALIĞI (1024–1199px): ikincil butonlar (Vital / Vardiya / Günlük)
   yalnız ikona iner, adları tooltip'te (data-tippy-content) kalır. Birincil
   "Yeni Konuk" hiç küçülmez — küçülen en son o olsun istendi, bu aralıkta
   gerek kalmıyor.

   Eşik hesabı (tahmini genişlikler, Inter 14px/500; ölçülmedi):
   kullanılabilir genişlik = viewport − 70 (sol menü) − 44 (çubuk dolgusu).
     Tam etiketli butonlar: Yeni Konuk ~120 + Vital ~130 + Vardiya ~146 +
       Günlük ~134 + 3 ikon 108 + 7 aralık 70 ≈ 708px.
     1200px'te: 1086 − 708 ≈ 378px arama (Windows kaydırma çubuğu −15 ile ~360).
     İkon kipinde 1024px'te: 910 − (120 + 3×36 + 108 + 70) ≈ 500px arama.
   Yani 1200'ün üstünde tam etiket rahat sığar, altında ikona inmek aramaya
   ve tahmin hatasına geniş pay bırakır. Üst bar lg (1024px) altında zaten
   basılmıyor (#mobile-header devrede), daha dar bir kademe gerekmiyor. */
@media (max-width: 1199.98px) {
  .nc-topbar__action--collapsible { width: 36px; padding: 0; }
  .nc-topbar__action--collapsible .nc-topbar__label { display: none; }
}

.nc-topbar__user {
  width: 32px; height: 32px; flex: none; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: var(--nc-accent-800);
  color: var(--nc-accent-100);
  font-size: 13px; font-weight: 500;
}

.nc-toolbar__btn {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-md);
  background-color: var(--nc-surface);
  color: var(--nc-text);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.nc-toolbar__btn:hover {
  background-color: color-mix(in srgb, var(--nc-text) 7%, transparent);
  border-color: color-mix(in srgb, var(--nc-text) 30%, transparent);
}
.nc-toolbar__btn svg { width: 18px; height: 18px; }
/* Tema ikonu: iki ikon da basılır, görünürlüğü tema belirler (lucide'ın
   argümansız createIcons() çağrısı bu derlemede hata veriyor). */
.nc-icon-sun { display: none; }
html[data-theme="dark"] .nc-icon-moon { display: none; }
html[data-theme="dark"] .nc-icon-sun  { display: inline-flex; }
/* Zil rozeti (M8, 2026-08-27): açık uyarı sayısı, 0 iken hiç basılmaz
   (şablon tarafı gizliyor). Üç haneli sayı "99+" olarak kısaltılır, bu yüzden
   sabit değil min-width + yatay dolgu — .nc-toolbar__btn 36x36, gap 10px:
   +/-4px taşma komşu öğeye değmez (admin_layout.tpl .nc-topbar gap:10px). */
.nc-toolbar__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background-color: var(--nc-crit);
  color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--nc-surface);
}

/* ── dashboard rapor kartları ─────────────────────────────────────────────
   Kartların kabuğu (.rw-card) ve içindeki KPI stilleri (.hz-*) sabit açık tema
   renkleriyle yazılmış — kart kabuğu düz beyaz, etiket #6b7280, değer #111827.
   Bu stiller cms_report_queries.query içindeki <style> bloğundan geliyor (bkz.
   Upgrade::huzureviAnaSayfaPanosuModulu), yani şablonda değil VERİDE duruyorlar;
   token'a burada bağlanıyorlar. */
.rw-card, .rw-card--bare {
  background-color: var(--nc-surface) !important;
  color: var(--nc-text);
  /* Kenarlık ve gölge de sabit açık tonlardı (ölçtüm: kenarlık
     rgb(234,236,240), gölge rgba(16,24,40,.04)) — koyu kartın çevresinde
     beyaz bir çerçeve olarak kalıyorlardı. */
  border-color: var(--nc-divider) !important;
  box-shadow: var(--nc-shadow-sm) !important;
}
/* Kartın köşesindeki düzenleme düğmesi de aynı sabit kenarlığı taşıyor. */
.rw-card__edit {
  border-color: var(--nc-divider) !important;
  background-color: var(--nc-surface) !important;
  color: var(--nc-text) !important;
}
.rw-card__edit:hover { background-color: color-mix(in srgb, var(--nc-text) 8%, transparent) !important; }

/* Widget içindeki tablo çizgileri de sabit gri (rgb(229,231,235)) geliyordu. */
.rw-card table,
.rw-card table th,
.rw-card table td,
.rw-card table tr { border-color: var(--nc-divider) !important; }
.hz-label { color: color-mix(in srgb, var(--nc-text) 60%, transparent) !important; }
.hz-value { color: var(--nc-text) !important; }
.hz-bar-track { background: color-mix(in srgb, var(--nc-text) 12%, transparent) !important; }

/* KPI ikonlarının pastel zeminleri her kartta INLINE geliyor (background:#fff7ed
   gibi) ve koyu zeminde göz alıyor; koyu temada ikonun kendi renginin şeffaf bir
   tonuna çevriliyor. */
html[data-theme="dark"] .hz-icon {
  background: color-mix(in srgb, currentColor 16%, transparent) !important;
}

/* Widget içeriğindeki sabit metin renkleri (liste başlıkları ve ikincil metin)
   yine inline yazılmış; koyu temada okunur tonlara çevriliyor. */
html[data-theme="dark"] .rw-card h3,
html[data-theme="dark"] .rw-card [style*="#111827"] { color: var(--nc-text) !important; }
html[data-theme="dark"] .rw-card [style*="#6b7280"] { color: var(--nc-n-500) !important; }
/* Widget tablolarının başlık satırı derlenmiş CSS'ten sabit açık bir zemin
   alıyor (ölçtüm: rgb(251,251,253)) ve koyu kartın üstünde beyaz bir şerit
   olarak kalıyordu. Zemini kaldırıp Nocturne'ün ince ayırıcısına bırakıyoruz. */
.rw-card table th {
  background-color: transparent !important;
  border-bottom: 1px solid var(--nc-divider) !important;
  color: color-mix(in srgb, var(--nc-text) 60%, transparent) !important;
}
.rw-card table thead tr { background: transparent !important; }
.rw-card table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--nc-text) 8%, transparent); }
.rw-card table tbody tr:hover { background-color: color-mix(in srgb, var(--nc-text) 4%, transparent); }

/* ── sayfa başlığı satırı (dashboard) ─────────────────────────────────────
   index.tpl'in rapor dalına eklenen selamlama + aksiyon satırı. */
.nc-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--nc-radius-lg); flex-wrap: wrap;
  margin: 0 0 22px;
}
.nc-page-head__text { display: flex; flex-direction: column; gap: 4px; }
.nc-page-head__title {
  margin: 0; font-size: 26px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--nc-text);
}
.nc-page-head__sub { font-size: 13px; color: color-mix(in srgb, var(--nc-text) 55%, transparent); }
.nc-page-head__actions { display: flex; gap: 8px; }

/* Nocturne butonları — panelin kendi buton sınıflarından bağımsız, yeni
   eklenen yüzeylerde kullanılır. */
.nc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  padding: 9px 14px; border-radius: var(--nc-radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.nc-btn svg { width: 16px; height: 16px; }
.nc-btn--secondary {
  border-color: var(--nc-divider);
  background-color: var(--nc-surface);
  color: var(--nc-text);
}
.nc-btn--secondary:hover {
  background-color: color-mix(in srgb, var(--nc-text) 7%, transparent);
  color: var(--nc-text);
}
.nc-btn--solid {
  background-color: var(--nc-accent);
  border-color: var(--nc-accent);
  color: #fff;
}
.nc-btn--solid:hover { background-color: var(--nc-accent-2); border-color: var(--nc-accent-2); color: #fff; }

/* ── liste ekranı ─────────────────────────────────────────────────────────
   Üstteki birincil aksiyon ("Yeni Ekle") bg-green-700 kullanıyor; o da
   tailwind.config.js'deki bozuk yeşil skalasının bir kademesi — ton değil
   %70 OPAKLIK (rgba(36,206,149,.7)), yani arkasındaki her şeyi sızdırıyor.
   Panelin birincil aksiyon rengine alıyoruz. */
.top-menu__action-buton {
  background-color: var(--nc-accent) !important;
  color: #fff !important;
  border-radius: var(--nc-radius-md);
  padding: 6px 12px;
  font-weight: 500;
}
.top-menu__action-buton:hover { background-color: var(--nc-accent-2) !important; }

/* İşlem sütunu yatay kaydırmada okunur kalsın diye OPAK zemin taşıyor ve bunu
   zebra renginden (bg-white / bg-gray-50) alıyor. Satırların zebrası Nocturne'de
   kalktığı için sağda tek başına gri şeritler kalıyordu; hücreyi yüzeye
   sabitleyip hover'da satırla aynı tona geçiriyoruz (karışım opak, yoksa
   altındaki zebra yine görünür). */
#object-list td.js-action-buttons,
.table__primary td.js-action-buttons {
  background-color: var(--nc-surface) !important;
}
#object-list tbody tr:hover td.js-action-buttons,
.table__primary tbody tr:hover td.js-action-buttons {
  background-color: color-mix(in srgb, var(--nc-text) 4%, var(--nc-surface)) !important;
}

/* ── marka işareti ────────────────────────────────────────────────────────
   Sol menüde iki sürüm birden basılıyor; hangisinin görüneceğine tema karar
   verir. Şeffaf sürümün A'sı koyu olduğu için koyu zeminde kaybolurdu. */
.nc-logo-dark { display: none; }
html[data-theme="dark"] .nc-logo-light { display: none; }
html[data-theme="dark"] .nc-logo-dark  { display: block; border-radius: 7px; }

/* ── giriş ekranı: yükleniyor animasyonu ──────────────────────────────────
   Renkler eski Pickle paletindendi (#00CEF5 / #5C5EF1) ve yeni marka
   işaretiyle uyuşmuyordu; artık logonun kendi tonları kullanılıyor:
   lacivert gövde #1e3a5f, hilal mavisi #6b8cb8. */
.animation-loading__ball {
  border-color: color-mix(in srgb, #8fb0d9 40%, transparent) !important;
}
/* Giriş ekranı ve yükleniyor overlay'i marka zeminini kullanır — tema
   değişkenlerini DEĞİL. Ölçtüğümde body #161826 (Nocturne koyu tema zemini)
   geliyordu, çünkü tema tercihi giriş sayfasına da uygulanıyor; marka ekranı
   temaya göre kaymamalı. İşaret koyu zeminli sürüm, halkalar logonun açık
   tonları — koyu A ve lacivert halka bu zeminde görünmüyordu. */
/* Yükleniyor ekranının zemini: login/style.scss'te

       .animation:not(.loaded) { background: linear-gradient(354deg,
           #B22ADE, #5C5EF1, #00CEF5, #00CEF5); }

   yani mor→indigo→cyan bir GRADYAN basılıyor. Bu bir background-image olduğu
   için background-color ile ezilmiyordu (ilk denemede sayfada hiçbir değişiklik
   olmamasının sebebi buydu) — shorthand ile yazıp gradyanı marka tonlarına
   çeviriyoruz. Sınıf yalnızca yükleme sürerken duruyor; yüklenince .loaded
   ekleniyor, o yüzden :has(.auth) ile giriş ekranının kendisi de kapsanıyor. */
body.animation:not(.loaded),
body:has(.auth) {
  background: linear-gradient(354deg, #142943 0%, #1e3a5f 45%, #3d6790 80%, #6b8cb8 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.animation-loading__ball img { border-radius: 50%; }
.spinner        { border-color: rgba(143, 176, 217, 0.14) !important; }
.spinner:before { border-top-color: #8fb0d9 !important; }
.spinner:after  { border-top-color: #c6d6ea !important; }

/* ── logo şeridi (üst bar hizası) ─────────────────────────────────────────
   Logo, sol menünün tepesinde üst barla AYNI yükseklikte bir şeride oturuyor
   (üst bar: 9px dolgu + 36px içerik + 9px dolgu + 1px çizgi = 55px), böylece
   ikisi aynı satırda hizalanıyor. Şeridin kendi alt çizgisi üst barınkiyle
   birleşiyor. Logo 40px'ten 30px'e küçültüldü ki 55px'e rahat otursun;
   altındaki workspace seçici ve menü de bu kadar yukarı kayıyor. */
.dashboard__logo-container {
  height: 55px;
  min-height: 55px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--nc-divider);
  flex: none;
}
/* İşaret dist CSS'te width/min/max ile 40px'e sabitlenmiş; büyütmek için üçünü
   birden ezmek gerekiyor. 46px, 55px'lik şeritte üstte/altta ~4px bırakır.

   ORTALAMA: şeritte işaretin yanında kurum adı da var ve daraltılmış menüde
   opacity:0 olmasına rağmen YER KAPLAMAYA devam ediyor; doğrudan
   justify-content:center vermek ikisini birlikte ortalayıp işareti menünün
   dışına itiyordu (ölçtüm: x = -58). Bu yüzden daraltılmış halde kurum adını
   düzenden tamamen çıkarıp öyle ortalıyoruz; menü açılınca ad geri gelir ve
   işaret yeniden sola yaslanır. */
.dashboard__logo-container {
  overflow: hidden;
}
.dashboard__menu:not(:hover) .dashboard__app-name { display: none; }
.dashboard__menu:not(:hover) .dashboard__logo-container {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.dashboard__menu:hover .dashboard__logo-container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.dashboard__logo-container img.dashboard__logo,
.dashboard__logo-container .dashboard__logo img {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: auto;
  max-height: 46px;
}

/* Workspace seçici artık logonun boşalttığı yere geliyor */
.dashboard__menu .ws-trigger { margin-top: 0; }
.dashboard__menu > .relative:has(.ws-trigger) { margin-top: 10px; }

/* ── sol menü ─────────────────────────────────────────────────────────────
   !important burada bilinçli: admin_layout.tpl'deki tema <style> bloğu bir tema
   SEÇİLİYSE hâlâ .dashboard__menu'ye !important'lı renk basıyor. Nocturne artık
   panelin tasarım dili olduğu için burada o bloğu geçiyoruz. */
.dashboard__menu, .bg-pickle-menu {
  background-color: var(--nc-surface) !important;
  border-right: 1px solid var(--nc-divider);
}
.dashboard__menu:hover { box-shadow: var(--nc-shadow-md); }
/* Menü koyu zeminden açık yüzeye geçtiği için kurum adı görünmez kalıyordu.
   Yalnızca o: workspace seçicinin zemini workspaces_menu.tpl'de inline
   style="background: <renk>" ile geliyor, oradaki beyaz metin beyaz kalmalı. */
.dashboard__app-name { color: var(--nc-text) !important; }
.main-left-menu__link, .main-left-menu__sub a {
  color: color-mix(in srgb, var(--nc-text) 78%, transparent) !important;
  border-radius: var(--nc-radius-md);
}
.main-left-menu__item:hover > .main-left-menu__link,
.main-left-menu__link:hover, .main-left-menu__sub a:hover {
  background-color: color-mix(in srgb, var(--nc-text) 6%, transparent) !important;
  color: var(--nc-text) !important;
}
.main-left-menu__link.active, .main-left-menu__sub a.active_menu,
.main-left-menu__sub a.active_menu:hover {
  background-color: color-mix(in srgb, var(--nc-accent) 14%, transparent) !important;
  color: var(--nc-accent) !important;
}
.main-left-menu__separator { background-color: var(--nc-divider) !important; }

/* SOL MENÜNÜN SABİT ALT BLOĞU — profil + çıkış (2026-09-09).
   Kaydırılabilir <ul id="menu"> ile KARDEŞ; `flex: none` sayesinde liste ne
   kadar uzarsa uzasın küçülmez ve yerinde kalır. Menü daraltılmış (ikon-only)
   moddayken içerideki .main-left-menu__link markup'ı listedekiyle birebir aynı
   olduğu için ayrı bir kural gerekmiyor.

   ── İLK DENEME NEDEN DİBE YAPIŞMADI (canlı ekran görüntüsü, 2026-09-09)
   Kullanıcının cümlesi: *"aşağıya sabitle, bottom: 0 olsun."* Blok menünün
   PEŞİNE takılıyor, altında büyük bir boşluk kalıyordu. İki ayrı sebep vardı
   ve ikisi de aşağıda kapatıldı:

   1. Listenin `flex-1`i footer'ı ancak SARMALAYICI gerçekten uzunsa iter.
      Sarmalayıcının yüksekliği satır içi bir `calc(100vh - 172px)` idi ve o
      172px workspace şeridi için düşülüyordu — şerit `single_workspace`
      açıkken hiç BASILMIYOR (bu depo öyle çalışıyor), yani sabit, ~70px'lik
      bir ölü alan menünün dibinde duruyordu. `.nc-menu-body` artık sabit
      yerine `flex: 1 1 auto` ile KALAN yeri alıyor; satır içi `height`
      `!important` ile eziliyor (satır içi stili yenmenin tek yolu bu —
      nocturne bu dosyada aynı gerekçeyle zaten `!important` kullanıyor).
   2. `margin-top: auto` — asıl dayanağı bu. Flex sütununda kalan boşluğun
      TAMAMINI bloğun üstüne alır, yani menü kısa olsa da blok dibe iner.
      `flex-1`in aksine sarmalayıcının yüksekliğinin doğru çözülmesine
      BAĞIMLI DEĞİL: 1. madde yarın yeniden bozulsa bile bu kural tutar.
      İkisi birlikte duruyor, biri diğerinin yedeği.

   Menü ekranı aşarsa `#menu`nun `min-height:0 + overflow-y-auto`su devrede
   kalır: liste kendi içinde kayar, footer yine dipte görünür.

   `position: fixed/absolute` KULLANILMADI — menü zaten kendi `position:fixed`
   kolonunda (`.dashboard__menu`, 70px ↔ 280px hover geçişli); ikinci bir
   çıkarma katmanı daraltılmış modda ve kısa ekranlarda yeni hizalama
   sorunları doğururdu. */
.nc-menu-body {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}
/* Ayırıcı çizgi son menü maddesine yapışmasın — boşluk `margin-top`tan
   GELEMEZ, çünkü orası `auto` (bloğu dibe iten kural). Bu yüzden nefes payı
   listenin altına ve çizginin altına ayrı ayrı veriliyor; menü uzun olup
   kaydırıldığında da, kısa olup blok dipteyken de aynı görünür. */
#menu { padding-bottom: 12px; }
.nc-menu-footer {
  flex: none;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--nc-divider);
}
.ws-item:hover { background-color: color-mix(in srgb, var(--nc-text) 6%, transparent) !important; }
.ws-item:hover .ws-item-name, .ws-item:hover .ws-item-sub, .ws-item:hover .ws-item-icon {
  color: var(--nc-text) !important;
}
.ws-item.active { background-color: color-mix(in srgb, var(--nc-accent) 12%, transparent) !important; }

/* Menüdeki yarı saydam avatarlar koyu zemine göre çizilmiş: bg-white/20 daire
   üstünde beyaz harf. Açık yüzeyde ikisi de kaybolduğu için tona çeviriyoruz. */
.dashboard__menu [class*="bg-white"][class*="bg-opacity"] {
  background-color: color-mix(in srgb, var(--nc-text) 10%, transparent) !important;
  color: var(--nc-text) !important;
}

/* ── durum (state machine) kutusu ─────────────────────────────────────────
   part/state.tpl bu kutuya sol menüyle AYNI .box__menu sınıfını veriyor ve içini
   koyu zemine göre çiziyor (başlık .text-white, geçiş butonları .bg-white).
   Kutu bilinçli olarak KOYU kalıyor — panelin içinde durumu öne çıkaran tek koyu
   yüzey — ama artık Nocturne paletinden: accent ailesinin en koyu tonu. Kendi
   yerel token'larını tanımlıyor, çünkü nötr/accent rampaları temaya göre ters
   dönüyor ve kutunun her iki temada da koyu kalması gerekiyor.

   Yapı (state.tpl:15-40): .box__menu > div > .text-white > .leading-[20px]
   içinde alan adı (.text-[16px]) ve mevcut durum (.text-[14px]); altında
   .actionBar içinde geçiş butonları. Seçiciler .box__menu ile kapsamlı. */
.box__menu {
  --box-bg:     #2b2741;   /* Nocturne accent ailesinin en koyu tonu */
  --box-fg:     #f0eeff;   /* aynı ailenin en açık tonu — metin */
  --box-accent: #b5abfc;   /* vurgular ve buton kenarlığı */
  background-color: var(--box-bg) !important;
  color: var(--box-fg) !important;
  border-radius: var(--nc-radius-md);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--box-accent) 22%, transparent);
}
html[data-theme="dark"] .box__menu { --box-bg: #241f38; }
.box__menu .text-white { color: var(--box-fg) !important; }

/* alan adı → kicker; mevcut durum → kartın başlığı */
.box__menu .leading-\[20px\] { line-height: 1.3; }
.box__menu .leading-\[20px\] .text-\[16px\] {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--box-accent);
  margin-bottom: 3px;
}
.box__menu .leading-\[20px\] .text-\[14px\] {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--box-fg);
}

/* geçiş butonları: beyaz dolgu yerine koyu zemine oturan açık outline */
.box__menu .actionBar > a,
.box__menu .actionBar > button {
  background-color: transparent !important;
  color: var(--box-accent) !important;
  border: 1px solid color-mix(in srgb, var(--box-accent) 55%, transparent);
  border-radius: var(--nc-radius-md);
  font-weight: 500;
  padding: 7px 14px;
  transition: background-color .15s ease, border-color .15s ease;
}
.box__menu .actionBar > a:hover,
.box__menu .actionBar > button:hover {
  background-color: color-mix(in srgb, var(--box-accent) 16%, transparent) !important;
  border-color: var(--box-accent);
  color: var(--box-fg) !important;      /* koyu zeminde açık metin — beyaza kaçmaz */
}
/* çalıştırılamayan geçiş (sebebi tooltip'te) kritik renge geçer */
.box__menu .actionBar > a.transition-error {
  color: #ff9a8f !important;
  border-color: color-mix(in srgb, #ff9a8f 55%, transparent);
}
.box__menu .actionBar > a.transition-error:hover {
  background-color: color-mix(in srgb, #ff9a8f 16%, transparent) !important;
  border-color: #ff9a8f;
  color: #ffd9d4 !important;
}
/* bulkedit sayacı (3/7) */
.box__menu .actionBar .text-gray-500 {
  color: color-mix(in srgb, var(--box-fg) 60%, transparent) !important;
}

/* ── üst çubuk ───────────────────────────────────────────────────────────── */
.top-menu, .top-menu__profile {
  background-color: var(--nc-surface);
  border-color: var(--nc-divider);
}

/* ── birincil aksiyon butonları ──────────────────────────────────────────── */
.btn__primary, .submitForm {
  background-color: var(--nc-accent) !important;
  color: #fff !important;
  border-color: var(--nc-accent) !important;
}
.btn__primary:hover, .submitForm:hover {
  background-color: var(--nc-accent-2) !important;
  color: #fff !important;
}

/* ── modal / bildirim ────────────────────────────────────────────────────── */
.modal, .modal__content, .swal2-popup {
  background-color: var(--nc-surface);
  color: var(--nc-text);
  border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow-lg);
}

/* ── obje bazlı liste görünümü (M11, 26.08.47) ───────────────────────────── */
/* "ID" sütunu bir object_specs satırı DEĞİL — CmsObject\Base::listAction()
   auto_increment kolonu için elle tanımlı bir spec yoksa list_column=1 sabit
   bir sahte satırı listenin başına ekliyor (çekirdek davranışı, TÜM ERP'de
   aynı). "Nesne Özellikleri" ekranında düzenlenecek bir satır yok, çünkü
   satır hiç yok — bu yüzden DB'den kapatılamıyor. `data-object-table`
   (object/listing/table.tpl) ile SADECE konuk listesini, SADECE ID
   sütununu hedefliyoruz; edit formuna ve başka hiçbir objeye dokunmuyor.
   Gerekçenin tamamı Upgrade::huzureviSakinlerListeSutunlariniAzalt()
   docblock'unda. */
table[data-object-table="huzurevi_sakinler"] th[data-object-spec-id="-1"],
table[data-object-table="huzurevi_sakinler"] td[data-column-name="id"] {
  display: none;
}

/* ── koyu temada ayrıca düzeltilmesi gerekenler ──────────────────────────── */
html[data-theme="dark"] img[src*="astrosoft-icon"] { filter: none; }
html[data-theme="dark"] .bg-black { background-color: var(--nc-n-800); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--nc-n-700); }
