/* ============================================================
   NodeWorks Social — marka teması (Postiz üzerine override)
   Enjeksiyon: nginx sub_filter ile </head> öncesine <link>
   Kaynak palet: www.nodeworks.at (Obsidian-Amber, koyu + altın)
   GÜNCELLEME GÜVENLİ: Postiz imajı değişse de bu dosya kalır;
   yalnız CSS değişken adları değişirse uyarlamak gerekir.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- Tema değişkenleri (Postiz dark temasını NodeWorks paletine çevirir) ---- */
:root .dark {
  --new-back-drop: rgba(0, 0, 0, 0.75);
  --new-bgColor: #0a0a0b;            /* zemin */
  --new-bgColorInner: #141416;       /* panel/yüzey */
  --new-bgLineColor: #1f1f22;
  --new-big-strips: #101012;
  --new-small-strips: #121214;
  --new-blockSeparator: #262629;
  --new-border: #262629;
  --new-box-hover: #1c1c1f;
  --new-boxFocused: #fff2c8;         /* odaklı kutu: açık altın (mor yerine) */
  --new-btn-primary: #f5b544;        /* birincil buton: altın */
  --new-ai-btn: #d0a249;             /* AI butonu: koyu altın (pembe yerine) */
  --new-btn-simple: #2a2a2e;
  --new-col-color: #2b2b2e;
  --new-menu-dots: #6b6b6e;
  --new-sep: #3a3a3e;
  --new-settings: #1c1c1f;
  --new-table-border: #262629;
  --new-table-header: #18181a;
  --new-table-text: #b8b3a8;         /* soluk metin: ılık gri (okunurluk için parlatıldı) */
  --new-table-text-focused: #f5b544; /* odak vurgusu: altın (parlak pembe yerine) */
  --new-textColor: 242 237 228;      /* #f2ede4 krem (RGB üçlüsü formatı) */
  --new-textItemBlur: #b8b3a8;       /* sidebar/menü soluk metni — okunur ton */
  --new-textItemFocused: #16130b;    /* KRİTİK: açık-altın boxFocused üstünde koyu yazı */
}

/* Açık-altın odak/hover zeminlerinde her zaman koyu yazı (kontrast garantisi) */
.dark .bg-boxFocused, .dark .bg-boxFocused *,
.dark .hover\:bg-boxFocused:hover, .dark .hover\:bg-boxFocused:hover *,
.dark .text-textItemFocused { color: #16130b !important; }

/* ---- İkinci değişken sistemi: --color-* (CTA'lar, zeminler) ---- */
:root .dark {
  --color-primary: #0a0a0b;        /* sayfa zemini */
  --color-secondary: #0e0e10;
  --color-third: #0d0d0f;
  --color-forth: #f5b544;          /* ana CTA (Sign in vb.): altın */
  --color-seventh: #d0a249;
  --color-text: #f2ede4;
  /* mor ailesi → altın tonları (platform önizleme renklerine dokunulmadı) */
  --color-custom4: #d0a249;
  --color-custom7: #d0a249;
  --color-custom11: #e8c547;
  --color-custom12: #f5d99a;
  --color-custom28: #e8c547;
  --color-custom29: #2a2415;
  --color-custom30: #b88a35;
  --color-custom41: #f5d99a;
  --color-custom45: #d0a249;
  --color-custom50: #2a2415;
  --color-custom51: #d0a249;
}

/* Altın CTA'larda koyu yazı (buton 'text-white' hardcoded geliyor) */
.dark .bg-forth, .dark .bg-forth * { color: #16130b !important; }

/* ---- Altın zeminli butonlarda koyu yazı (kontrast) ----
   NOT: --new-btn-text DEĞİŞTİRİLMEDİ; genel metinlerde de kullanılıyor. */
.dark .bg-btnPrimary, .dark .bg-btnPrimary *,
.dark .bg-ai, .dark .bg-ai *,
.dark .group:hover .group-hover\:bg-btnPrimary,
.dark .group:hover .group-hover\:bg-btnPrimary * {
  color: #16130b !important;
}

/* ---- Hardcoded Postiz moru kullanan Tailwind arbitrary sınıfları ---- */
[class*="bg-[#612bd3]"], [class*="bg-[#612BD3]"] {
  background-color: rgba(245, 181, 68, 0.12) !important;
}
[class*="hover:bg-[#612BD3]"]:hover, [class*="hover:bg-[#612bd3]"]:hover {
  background-color: rgba(245, 181, 68, 0.85) !important;
  color: #16130b !important;
}
[class*="hover:border-[#612BD3]"]:hover, [class*="hover:border-[#612bd3]"]:hover {
  border-color: rgba(245, 181, 68, 0.5) !important;
}
[class*="to-[#8b5cf6]"] { --tw-gradient-to: #d0a249 !important; }
[class*="from-[#612bd3]"], [class*="from-[#612BD3]"] { --tw-gradient-from: #f5b544 !important; }

/* ---- Analitik grafikleri / SVG'lerde hardcoded mor -> altın ---- */
.dark [stroke="#612bd3"], .dark [stroke="#612BD3"],
.dark [stroke="#7236f1"], .dark [stroke="#8b5cf6"],
.dark [stroke="#6d4ed6"], .dark [stroke="#7950f2"] { stroke: #f5b544 !important; }
.dark [fill="#612bd3"], .dark [fill="#612BD3"],
.dark [fill="#7236f1"], .dark [fill="#8b5cf6"],
.dark [fill="#6d4ed6"], .dark [fill="#7950f2"] { fill: #f5b544 !important; }
.dark [stop-color="#612bd3"], .dark [stop-color="#612BD3"],
.dark [stop-color="#7236f1"], .dark [stop-color="#8b5cf6"],
.dark [stop-color="#6d4ed6"], .dark [stop-color="#7950f2"] { stop-color: #f5b544 !important; }

/* ---- Login/auth sayfasının hardcoded zeminleri ---- */
.dark .bg-\[\#0E0E0E\] { background-color: #0a0a0b !important; }
.dark .bg-\[\#1A1919\] { background-color: #141416 !important; }

/* ---- Auth sayfasındaki Postiz pazarlama paneli (testimonial/20.000+) gizle,
       kartı ortala ---- */
div[class*="pt-[88px]"][class*="hidden"] { display: none !important; }
div[class*="lg:w-[600px]"] { margin-left: auto !important; margin-right: auto !important; }

/* ---- Logo: Postiz wordmark SVG'sini NodeWorks wordmark ile değiştir ---- */
svg[viewBox="0 0 101 33"] {
  background: url('/nw-brand/nw-wordmark.svg') no-repeat left center / contain;
  width: 172px !important;
  height: 30px !important;
}
svg[viewBox="0 0 101 33"] > * { display: none; }

/* ---- Tipografi: Inter (nodeworks.at ile aynı) ---- */
body, body[class*="jakarta"] {
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---- İnce dokunuşlar ---- */
.dark ::selection { background: rgba(245, 181, 68, 0.35); }
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #2c2c30; border-radius: 6px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #3a3a3e; }
.dark ::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Tablet iyileştirmeleri (en-iyi-çaba; Postiz resmen responsive
   değil — issue #1008). Ekran testi bulgularına göre genişletilir.
   ============================================================ */
@media (max-width: 1180px) {
  html { -webkit-text-size-adjust: 100%; }
  /* yatay taşmalarda sayfa yerine konteyner kaydırılsın */
  body { overflow-x: hidden; }
}


/* ---- Marka kalıntısı: auth-gated sidebar'daki 60×60 Postiz "P" markası
       → NodeWorks ikon tile'ı (login'deki kareyle aynı). @media DIŞINDA:
       masaüstü+mobil her yerde geçerli. ---- */
svg[viewBox="0 0 60 60"][class*="min-h-[60px]"] {
  background: url('/nw-brand/favicon.svg') no-repeat center center / contain !important;
  border-radius: 12px;
}
svg[viewBox="0 0 60 60"][class*="min-h-[60px]"] > * { display: none !important; }

/* ============================================================
   NodeWorks Social — MOBİL DÜZELTMELERİ (aday, iterasyonla geliştiriliyor)
   Postiz resmen responsive değil (#1008). Bu katman içerik kabuğunu
   mobilde kullanılabilir hale getirir: yan panelleri yığar, sabit
   genişlikleri tam genişliğe çeker, kesileni pan edilebilir yapar.
   Hedef: telefon (≤768px). Tablet/masaüstü dokunulmaz.
   ============================================================ */
@media (max-width: 768px) {

  /* 0) Uygulama kabuğu padding'ini kıs (12px → 6px) — dar ekranda alan kazan */
  div.min-h-screen.min-w-screen { padding: 6px !important; min-width: 0 !important; }

  /* 1) İÇ İÇERİK SATIRI: [yan panel/alt-menü][ana içerik] yan yana → DİKEY yığ.
        Bu satır masaüstünde flex-row; mobilde alt alta gelsin ki ana içerik
        tam genişliğe açılsın, kesilmesin. */
  .flex.flex-1.gap-\[1px\] { flex-direction: column !important; }

  /* 2) Sabit genişlikli yan paneller (preview/sidebar) → tam genişlik */
  .w-\[300px\], .w-\[320px\], .max-w-\[200px\] {
    width: 100% !important; max-width: 100% !important;
  }

  /* 2b) Takvimdeki collapse'lı "Channels" önizleme rayı kuralı, kırık tablet
        bölgesini de (769–1024px) kapsasın diye AŞAĞIYA ayrı bloğa taşındı. */

  /* 3) Ana içerik konteyneri taşmayı KESMESİN; gerekiyorsa yatay pan edilsin
        (hiçbir şey kalıcı olarak erişilemez kalmasın) */
  .flex-1.bg-newBgLineColor.overflow-hidden { overflow-x: auto !important; }

  /* 4) Üst başlık çubuğu (h-[80px]): yatay padding'i kıs, taşarsa pan edilsin
        (wrap YAPMA — wrap başlıkları üst üste bindiriyordu) */
  .flex.bg-newBgColorInner.h-\[80px\] {
    padding-left: 12px !important; padding-right: 12px !important;
    overflow-x: auto !important;
  }

  /* 5) Settings/benzeri 2-sütun: alt-menü üstte tam genişlik, içerik altında */
  .bg-newBgColorInner.flex-1.flex-col.p-\[20px\] { padding: 14px !important; }

  /* 6) Takvim hafta görünümü: zaman sütunu + 7 gün 390px'e sığmaz.
        Sütunları okunur genişliğe çek + ızgarayı yatay pan edilebilir yap
        (başlıklar üst üste binmesin). */
  [class*="grid-template-columns:136px"] {
    grid-template-columns: 64px repeat(7, minmax(92px, 1fr)) !important;
    min-width: 712px !important;
  }
  /* takvim gövdesini saran kapsayıcı yatay scroll alsın */
  .flex.flex-col.text-textColor.flex-1 > .flex-1.flex,
  .flex.flex-1.gap-\[1px\] > .flex-1 { overflow-x: auto !important; }

  /* 7) İkon rayı 80px kalsın ama etiketler okunur olsun (10px→11px) */
  .text-\[10px\] { font-size: 11px !important; }
}

/* ============================================================
   TABLET KIRIK BÖLGE (≤1024px): Postiz takviminin collapse'lı "Channels"
   önizleme rayı bu aralıkta da (769–1024) absolute içeriğiyle tarih çubuğuna
   ve ızgaraya biniyor. Mobildeki gibi gizle → takvim tam genişlik, çakışma yok.
   ≥1025px'te ray normal görünür (orada layout zaten ferah).
   ============================================================ */
@media (max-width: 1024px) {
  .flex.relative.flex-col.w-\[260px\] { display: none !important; }
}