/* ==========================================================================
   DorukCRM — 02-shell.css
   Uygulama kabuğu: daraltılmış kenar çubuğu ve hesap menüsü.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın
   FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek
   parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya
   bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın.
   ========================================================================== */

/* --- daraltılmış kenar çubuğu --------------------------------------------
   Durum sunucuda çiziliyor (bkz. _partials/layout.php): uygulama tam sayfa
   yükleniyor ve tercih tarayıcıda tutulsaydı her gezinmede kenar çubuğu bir
   an geniş açılıp sonra daralırdı. CSP satır içi betiği yasakladığı için
   render'dan önce çalışıp bunu önleyecek bir betik de yazılamıyor.

   Etiketler gizlenmiyor, KIRPILIYOR: display:none ile gizlenen bir etiket
   geri gelirken animasyon edilemez, ve simgelerin yerini de oynatır. */
.app--rail .sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-rail-w);
  overflow: hidden;
  z-index: 40;
  transition: width .16s ease, box-shadow .16s ease;
}

/* Üzerine gelince açılır. :focus-within klavye için: sekmeyle gezen biri de
   nereye gittiğini görebilmeli.

   .app--hold, daraltma düğmesine FARE ile basıldığı anda konuyor: imleç o an
   hâlâ kenar çubuğunun üstünde olduğu için :hover kenar çubuğunu aynı karede
   geri açıyor ve düğme çalışmıyor görünüyordu. Kilit imleç ayrılınca kalkar
   (bkz. app.js), dolayısıyla üzerine gelince açılma kaybolmuyor — yalnızca
   o tek tıklama boyunca erteleniyor. */
.app--rail:not(.app--hold) .sidebar:hover,
.app--rail:not(.app--hold) .sidebar:focus-within {
  width: var(--sidebar-w);
  box-shadow: var(--shadow-lg);
}

.app--rail { grid-template-columns: var(--sidebar-rail-w) 1fr; }

/* Etiketler kırpılırken satır atlamamalı. */
.sidebar__label { white-space: nowrap; }

/* Şeritte YALNIZCA simgeler kalır.
   Kırpmak tek başına yetmiyordu: 58px'lik şeritte simge bittikten sonra ~10px
   boşluk kalıyor ve etiketin ilk harfi ("G", "K", "Ş") oradan sızıyordu.
   Şeridi harfin sığmayacağı kadar daraltmak yanlış cevap olurdu — o ölçü
   yazı tipine ve harfe göre değişir, yani her temada yeniden kırılırdı.

   Etiket yine de KALDIRILMIYOR, söndürülüyor. Gerekçe kırpmanınkiyle aynı:
   display:none ile kaldırılan bir etiket geri gelirken animasyon edilemez ve
   yerinden çıktığı anda simgeleri de oynatır. Söndürülen etiket yerinde durur.
   Üstelik erişilebilirlik ağacından da düşmez: ekran okuyucu şerit
   daraltılmışken de bağlantının adını okumaya devam eder. */
.sidebar__label { transition: opacity .12s ease; }
.app--rail .sidebar:not(:hover):not(:focus-within) .sidebar__label,
.app--rail.app--hold .sidebar__label { opacity: 0; }

/* Daralttırılmışken okunmamış sayısı bir noktaya iniyor. Sayının kendisi
   kırpılıp görünmez kalsaydı, kenar çubuğunu daraltmak bildirimi de
   kapatmak olurdu. */
.app--rail .nav-item { position: relative; }
.app--rail .sidebar:not(:hover):not(:focus-within) .nav-badge,
.app--rail.app--hold .nav-badge {
  position: absolute;
  top: 5px;
  left: 27px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Kapat/aç düğmesi. Rayda yalnızca kenar çubuğu açıkken görünür: 58px'e
   sığmıyor ve sığdırmak için simgeyi yerinden oynatmak gerekirdi. */
.sidebar__toggle {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sidebar__toggle:hover { background: var(--surface-3); color: var(--text); }
.sidebar__toggle svg { width: 16px; height: 16px; }
.app--rail .sidebar:not(:hover):not(:focus-within) .sidebar__toggle,
.app--rail.app--hold .sidebar__toggle { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .app--rail .sidebar { transition: none; }
  .sidebar__label { transition: none; }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-item--active { background: var(--brand); color: #fff; }
.nav-item--active:hover { background: var(--brand); color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #04231a;
  font-size: .6875rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.nav-item--active .nav-badge { background: rgba(255,255,255,.25); color: #fff; }

/* Temsilci listesi — gelen kutusunun altında, yalnız yönetici kademesinde.
   Şeritte (rail) tamamen gizli: baş harfli bir sütun daha, simge şeridini
   ikinci bir menü gibi gösterirdi; etiket söndürme kuralı burada yetmiyor. */
.nav-sub { margin: -2px 0 4px 1.375rem; display: flex; flex-direction: column; gap: 1px; }
.nav-sub__item {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .8125rem;
}
.nav-sub__item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-sub__item--active { color: var(--brand); font-weight: 600; }
.avatar--xs { width: 20px; height: 20px; font-size: .625rem; flex-shrink: 0; }
.app--rail .sidebar:not(:hover):not(:focus-within) .nav-sub,
.app--rail.app--hold .nav-sub { display: none; }

/* --- hesap menüsü --------------------------------------------------------- */
/* Başlık şeridinin sağ ucu. Kimlik bir zamanlar kenar çubuğunun dibindeydi;
   orası modüller arasında gezinen sütundu ve çıkış düğmesi gezinme
   bağlantılarının arasında duruyordu.

   Mutlak konumlu, çünkü başlık şeridi her ekranın kendi dosyasında yazılıyor
   ve kabuğun oraya bir şey sokma yolu yok. Yer .topbar'ın sağ dolgusuyla
   açılıyor. */
.account {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: var(--header-account-w);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 .75rem;
}

/* Ayar ekranlarında menü, bölüm rayının tam üstünde duruyor: ayıraç oradan
   yukarı devam ediyor ve başlıktaki düğmelerin neden o noktada bittiği
   görünür oluyor — sütun başlık şeridine kadar çıkıyor, yalnızca üst hücresi
   boş. Rayın olmadığı ekranlarda çizgi de yok.
   :has desteklemeyen bir tarayıcıda eksik olan tek şey bu çizgi. */
.main:has(.settings) .account { border-left: 1px solid var(--border); }

.account__button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .375rem .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account__button:hover { background: var(--surface-2); }
.account__button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.account__button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }

.user-chip__avatar img, .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-chip__avatar {
  overflow: hidden;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-weight: 700; font-size: .75rem;
  flex-shrink: 0;
}

.account__meta { min-width: 0; flex: 1; display: grid; }
.account__name { font-weight: 600; font-size: .8125rem; }
.account__org  { font-size: .75rem; color: var(--text-muted); }
.account__name, .account__org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account__caret { display: inline-flex; color: var(--text-faint); flex-shrink: 0; }
.account__caret svg { width: 15px; height: 15px; }
.account__button[aria-expanded="true"] .account__caret { transform: rotate(180deg); }

.account__menu {
  position: absolute;
  top: calc(var(--header-h) - .375rem);
  right: .75rem;
  min-width: 232px;
  padding: .375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.account__menu[hidden] { display: none; }

.account__head {
  padding: .5rem .625rem .625rem;
  margin-bottom: .375rem;
  border-bottom: 1px solid var(--border);
}
.account__head-name { font-weight: 600; font-size: .875rem; }
.account__head-sub {
  font-size: .75rem;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.account__form { margin: 0; }

.account__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account__item svg { width: 17px; height: 17px; flex-shrink: 0; }
.account__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.account__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.account__item--danger { color: var(--danger); }
.account__item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Sütun AÇIKÇA yazılıyor, otomatik yerleşime bırakılmıyor: şeride geçince
   kenar çubuğu position:absolute oluyor ve grid akışından çıkıyor. O anda
   ızgaranın tek akış çocuğu bu eleman kalır ve otomatik yerleşim onu 1.
   sütuna — 58px'lik şeridin altına — koyar; ekranın geri kalanı boş görünür.
   Geniş durumda da ikinci sütun zaten doğru yer, o yüzden tek satır her iki
   durumu birden karşılıyor. */
/* position:relative — hesap menüsü başlık şeridinin sağ ucuna mutlak
   konumlanıyor ve çapası burası. */
.main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }

.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Sağ dolgu hesap menüsüne ayrılmış boşluk: menü mutlak konumlu olduğu için
     yerini kendisi açamıyor ve dolgu olmasaydı sayfanın düğmeleri onun altına
     girerdi. */
  padding: 0 calc(var(--header-account-w) + var(--gutter)) 0 var(--gutter);
  flex-shrink: 0;
}
.topbar h1 { margin: 0; font-size: 1.0625rem; }
.topbar__spacer { flex: 1; }

/* Şeride gömülü süzgeç formu (Şablonlar ekranındaki hat seçimi). Şeridin
   kendisi flex; form varsayılan blok genişliğiyle kalsaydı başlığı sıkıştırıp
   düğmeleri satır dışına iterdi. Genişlik sınırlı: uzun bir hat adı kutuyu
   şeridin yarısına çıkarabiliyor. */
.topbar__filter { display: flex; align-items: center; gap: .5rem; margin: 0; }
.topbar__filter .select { max-width: 16rem; }

/* Ayar ekranlarında şeridin içi gövdeyle aynı kutuda ortalanıyor. */
.topbar--settings { padding-left: var(--gutter); }
.topbar--settings .topbar__inner {
  width: 100%;
  max-width: var(--settings-body-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* İçeriğin çerçevesi. Dolgu --gutter'dan geliyor ve başlık şeridinin sol
   dolgusu da aynı belirteçten: başlıktaki yazı ile altındaki kartın sol kenarı
   bu yüzden hizada duruyor, ikisi tek değere bağlı. */
.content { flex: 1; overflow-y: auto; padding: var(--gutter); }

/* Dolgusuz kap: içindeki yerleşim kendi kenarını kendisi çiziyor (ayarların
   ray + gövde ikilisi). */
.content--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Tam yüksekliği kaplayan, kendi içinde kayan bir yerleşim için çerçeve —
   gelen kutusu böyle. .content'ten farkı sayfanın DEĞİL panellerin kayması:
   sohbet listesi ile mesaj akışı ayrı ayrı kayar, kap yerinde durur. Boşluk
   yine --gutter, yani gelen kutusu da diğer ekranlarla aynı çerçevede. */
.content--frame {
  flex: 1;
  min-height: 0;
  padding: var(--gutter);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}