/* get.stopersolutions.com — dashboard kabuğu.
   .content/.left-panel/.right-panel/.middle-panel iskeleti ana sitenin
   lazer.kesim.teklif.al.css'inden AYNEN alınmıştır (kanıtlanmış çalışan
   desen) — sihirbaz sayfaları bu sınıfları kendi step listeleriyle
   kullanmaya devam eder. Aşağıdaki dash-* sınıfları YENİ, sadece bu
   dashboard kabuğuna özel. */

:root {
	--stoper-blue: #005095;
	--stoper-blue-bg: #f6f8fd;
	--stoper-border: #e4e8eb;
	--stoper-text: #5c6c7a;
}

html, body.dash-body {
	height: 100%;
	margin: 0;
	overflow: hidden;
}
body.dash-body {
	display: flex;
	flex-direction: column;
	/* font-family BİLEREK burada set edilmiyor — stylesheet.css'teki
	   `body { font-family: 'Inter', ... }` kuralı uygulansın diye (önceki
	   sürümde buradaki `inherit` o kuralı eziyordu — düzeltildi). */
}

/* ---- Üst bar ---- */
.dash-topbar {
	flex-shrink: 0;
	height: 64px;
	background: #fff;
	border-bottom: 1px solid var(--stoper-border);
}
.dash-topbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
}
.dash-logo img { width: 136px; height: auto; display: block; }

/* Sol panel başlığı — HER sayfada (Tekliflerim/Siparişlerim/Kütüphanem) arama
   kutusunun ÜSTÜNDE, aynı tema (kullanıcı isteği: tutarlı tasarım). */
.dash-sol-baslik {
	font-size: 18px;
	font-weight: 700;
	color: #1d2939;
	margin: 0 0 14px;
}

/* Arama çubuğu — sol panelin (left-panel) en üstünde kullanılır, üst barda DEĞİL */
.dash-search {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--stoper-border);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 16px;
}
.dash-search input {
	border: 0;
	background: transparent;
	outline: none;
	width: 100%;
	font-size: 14px;
	color: var(--stoper-text);
}
.dash-search-icon { color: var(--stoper-text); font-size: 14px; opacity: .8; }
.dash-nav {
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	flex: 1;
}
.dash-nav li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	margin: 0 10px;
	color: var(--stoper-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	border-bottom: 2px solid transparent;
}
.dash-nav li a:hover { color: var(--stoper-blue); }
.dash-nav li.active a { color: var(--stoper-blue); font-weight: 600; border-bottom-color: var(--stoper-blue); }
.dash-badge {
	background: var(--stoper-blue);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}
.dash-user { display: flex; align-items: center; gap: 6px; }
/* Sepet ikonu (kullanıcı menüsünün yanında) — ödemeye HAZIR parça sayısı. */
.dash-sepet-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	color: var(--stoper-text);
	font-size: 22px;
	text-decoration: none;
}
.dash-sepet-btn:hover { background: var(--stoper-blue-bg); color: var(--stoper-blue); }
.dash-sepet-badge {
	position: absolute;
	top: 2px;
	right: 2px;
}
.dash-user-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	padding: 4px 8px;
	border-radius: 999px;
}
.dash-user-btn:hover { background: var(--stoper-blue-bg); }
.dash-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--stoper-border); }
.dash-user-name { font-size: 14px; color: var(--stoper-text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- İçerik iskeleti (ana siteden aynen) ---- */
.content {
	margin-top: 0px;
	flex: 1;
	min-height: 0;
	display: flex;
	overflow: hidden;
}
.left-panel {
	width: 300px;
	min-width: 300px;
	/* Kartların boyutuna/sayısına göre KÜÇÜLMESİN — her sayfada/filtrede sabit
	   genişlik ve konum (kullanıcı isteği). */
	flex-shrink: 0;
	flex-grow: 0;
	background-color: #f0f2f6;
	height: 100%;
	overflow: hidden;
	border-right: 1px solid #ddd;
}
.right-panel {
	flex-grow: 1;
	height: 100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	padding: 0;
	background-color: #fff;
}
.middle-panel {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	overflow: hidden;
}

/* ---- Varsayılan dashboard sidebar (liste sayfaları) ---- */
.dash-sidebar { display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.dash-sidebar-inner { padding: 20px 16px; }
.dash-sidebar-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--stoper-text); margin-bottom: 12px; }
.dash-sidebar-list { list-style: none; margin: 0; padding: 0; }
.dash-sidebar-list li {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--stoper-text);
	cursor: default;
}
.dash-sidebar-list li.active { background: #fff; color: var(--stoper-blue); font-weight: 600; border: 1px solid var(--stoper-border); }
.dash-sidebar-back { padding: 14px 16px; border-top: 1px solid var(--stoper-border); }
.dash-sidebar-back a { font-size: 12.5px; color: var(--stoper-text); text-decoration: none; }
.dash-sidebar-back a:hover { color: var(--stoper-blue); }

/* Dar/geniş moda göre görünürlük. Bu iki sınıf ÖNCEDEN CSS'siz duruyordu
   (yani hiçbir şey yapmıyordu) — bu yüzden menü daraltılınca "Ana Sayfasına
   Dön" yazısı olduğu gibi kalıyordu. Artık dar modda yerini favicon
   boyutunda küçük marka simgesi alıyor. */
.dash-menu-dar-only { display: none; }
body.dash-menu-dar .dash-menu-genis-only { display: none !important; }
body.dash-menu-dar .dash-menu-dar-only { display: inline-block; }
.dash-back-ikon { border-radius: 4px; opacity: .85; vertical-align: middle; }
.dash-sidebar-back a:hover .dash-back-ikon { opacity: 1; }
body.dash-menu-dar .dash-sidebar-back { padding: 14px 0; }
body.dash-menu-dar .dash-sidebar-back a { display: flex; justify-content: center; }

/* ---- Çoklu-seçim toolbar'ı (SADECE Tekliflerim sayfasında; ≥1 seçimde görünür).
   Kullanıcı isteği (2026-07-28, ekran görüntüsüyle netleşti): DIŞ konteyner
   (border/kutu) OLMASIN — sadece butonlar yan yana dursun, her buton kendi
   stilini taşır. Sayfa scroll edilse de üstte kalır (sticky, başlığa yakın).
   .dash-upload-area'nın üst padding'i artık 0 (kullanıcı isteği, devtools ile
   doğrulandı) — toolbar/sayaç bu yüzden ÜSTTEN negatif margin GEREKTİRMİYOR,
   doğrudan üst bara dayanıyor. Sol/sağ -28px negatif margin hâlâ gerekli
   (alanın 28px yatay padding'ini delip sol menü ayracına/sağ kenara tam
   dayanmak için); İÇ padding aynı yatay boşluğu geri veriyor. */
.dash-secim-toolbar {
	display: none;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 -28px 18px;
	padding: 14px 28px 10px;
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
}
.dash-secim-toolbar.acik { display: flex; }
/* Seçili kart yokken (toolbar "kapalı" görünümde), aynı konumda "X / Y" sayacı. */
.dash-secim-sayac {
	display: none;
	align-items: center;
	font-weight: 700;
	font-size: 14px;
	color: #1d2939;
	margin: 0 -28px 18px;
	padding: 14px 28px 10px;
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
}
.dash-secim-sayac.acik { display: flex; }
.dsecim-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--stoper-border);
	background: #fff;
	color: var(--stoper-text);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.dsecim-btn:hover { background: var(--stoper-blue-bg); color: var(--stoper-blue); border-color: var(--stoper-blue); }
.dsecim-btn.dsecim-primary { background: #002951; color: #fff; border-color: #002951; }
.dsecim-btn.dsecim-primary:hover { background: #003f75; border-color: #003f75; color: #fff; }
.dsecim-btn:disabled { opacity: .6; cursor: not-allowed; }

/* "Seçilenleri Sepete Ekle" — 3-nokta AYRI bir buton/bölüm DEĞİL, tek renkli
   "hap"ın İÇİNDE solda, ARADA HİÇBİR AYRAÇ/ÇİZGİ YOK (kullanıcı isteği,
   ekran görüntüsüyle netleşti: 2026-07-28). */
/* (KÖK NEDEN #1 — 2026-07-30) overflow:hidden ÖNCEDEN .dsecim-split-btn'deydi
   (hap şeklini kırpmak için) — .dsecim-more-menu AYNI konteynerin ÇOCUĞU
   olduğundan görünmez kılınıyordu. ÇÖZÜM: overflow:hidden'a hiç gerek yok —
   çocuk butonlar background:transparent olduğundan, hap'ın kendi border-radius
   + background'ı (kırpmadan) zaten doğru görünüyor.
   (KÖK NEDEN #2 — 2026-07-30) İlk düzeltmede hover tetikleyicisi TÜM
   .dsecim-split-btn'e (yani "Seçilenleri Sepete Ekle" butonunu da kapsayacak
   şekilde) bağlıydı — kullanıcı SADECE 3-nokta alanına yaklaşınca açılmasını
   istiyor. Bu yüzden hover + menü artık SADECE 3-nokta'yı saran
   .dsecim-more-wrap'a bağlı (Sepetim sayfasındaki .dsl-more-wrap ile AYNI dar
   kapsamlı desen). */
.dsecim-split-btn { position: relative; display: flex; align-items: stretch; border-radius: 8px; background: #002951; }
.dsecim-split-btn:hover { background: #003f75; }
.dsecim-more-wrap { position: relative; display: flex; }
.dsecim-split-more, .dsecim-split-ana {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}
.dsecim-split-more {
	width: 26px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dsecim-split-ana { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 4px; }
.dsecim-more-menu {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	z-index: 30;
	min-width: 140px;
	background: #fff;
	border: 1px solid var(--stoper-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(29, 41, 57, .14);
	padding: 4px;
}
.dsecim-more-menu.acik { display: block; }
/* Boşluk (3-nokta butonu ile menü arası) fare hareketinde menünün erken
   kapanmaması için ::before ile köprüleniyor — SADECE .dsecim-more-wrap
   genişliğinde (26px), pill'in geri kalanına taşmıyor. */
.dsecim-more-wrap::before {
	content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px;
}
.dsecim-more-wrap:hover .dsecim-more-menu { display: block; }
.dsecim-more-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: none;
	padding: 9px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #c0392b;
	cursor: pointer;
	text-align: left;
}
.dsecim-more-menu button:hover { background: #fdecea; }

/* ---- Mobil ---- */
@media (max-width: 991.98px) {
	html, body.dash-body { height: auto; overflow: visible; }

	/* (2026-08-16) Üst barın SABİT 64px yüksekliği mobilde sıfırlanmıyordu:
	   alt satıra saran sekmeler kutunun dışına taşıp sol paneldeki
	   "Tekliflerim" başlığının ÜSTÜNE biniyordu. */
	.dash-topbar { height: auto; }
	.dash-topbar-inner { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; justify-content: space-between; }

	/* NOT (2026-08-16): girişsiz kullanıcıdaki "Giriş Yap / Hesap Oluştur"
	   butonunun mobil (ikon) hâli BİLEREK burada değil, piece/_dash-header.php
	   içinde satır içi <style> olarak duruyor — bazı sayfalar dash.css'i
	   sürümsüz linklediği için buradaki kural eski önbellekten gelen sürümde
	   bulunmayabilir ve buton metinli/geniş kalırdı. */

	/* Sekmeler küçülüp iki satıra kırılmasın ("Parça Kütüphanem" ikiye
	   bölünüyordu); tek satırda kalsın, sığmazsa yatay kaydırılsın. */
	.dash-nav { order: 3; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.dash-nav::-webkit-scrollbar { display: none; }
	.dash-nav li { flex-shrink: 0; }
	.dash-nav li a { white-space: nowrap; margin: 0 6px; }

	.content { flex-direction: column; height: auto; overflow: visible; }
	.left-panel { width: 100% !important; min-width: 100% !important; height: auto !important; overflow: visible; border-right: none; }
	.right-panel { width: 100% !important; min-width: 100% !important; height: auto !important; overflow: visible; border-right: none; padding: 0; flex-direction: column !important; }

	/* İçerik ÖNCE, kenar menüsü (arama/klasörler/filtreler) SONRA gelsin —
	   yükleme alanı / kart listesi ilk ekranda görünsün diye. */
	.left-panel { order: 2; }
	.right-panel { order: 1; }
	.dash-sidebar { justify-content: flex-start; }

	/* Menü daraltma masaüstü özelliğidir; mobilde genişlik zaten %100.
	   Buton gizlenir ve masaüstünde localStorage ile açık kalmış "dar mod"
	   kuralları etkisizleştirilir (yoksa başlık/arama/klasörler kaybolur). */
	.dash-menu-ust { display: none !important; }
	body.dash-menu-dar .dash-sidebar-inner > *:not(.dash-menu-ust):not(.dt-filtre-list) { display: block !important; }
	body.dash-menu-dar .dash-search { display: flex !important; }
	body.dash-menu-dar .dash-sol-baslik { display: block !important; }
	body.dash-menu-dar .dt-filtre > span { display: revert !important; }
	body.dash-menu-dar .dt-filtre,
	body.dash-menu-dar .dt-klasor { justify-content: flex-start; padding: 9px 12px; gap: 0; }
	body.dash-menu-dar .dash-alt-ikon { margin-right: 9px; }
}

/* ==========================================================================
   ORTAK SOL KENAR MENÜSÜ + GEMİNİ TARZI DARALTMA (2026-08-01, kullanıcı isteği)
   Sol menü SAYFAYA ÖZEL ALT MENÜLERİ gösterir — üst menüdeki sayfalar burada
   TEKRARLANMAZ. Daraltılınca yazılar gizlenir, minimal alt menü simgeleri kalır.
   ========================================================================== */

.left-panel { transition: width .18s ease, min-width .18s ease; }

/* --- Daraltma butonu (menünün sağ üstü) --- */
.dash-menu-ust { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.dash-menu-daralt-btn {
	background: none;
	border: 0;
	padding: 6px;
	border-radius: 8px;
	color: var(--stoper-text);   /* yazı karakteriyle AYNI renk — minimal */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}
.dash-menu-daralt-btn:hover { background: rgba(0, 80, 149, .08); color: var(--stoper-blue); }

/* --- Alt menü satırlarındaki simge --- */
.dash-alt-ikon { flex: 0 0 auto; margin-right: 9px; opacity: .85; }
.dt-filtre.active .dash-alt-ikon,
.dt-klasor.active .dash-alt-ikon { opacity: 1; }

/* Simge eklenince satırlar "ikon + yazı ... sayı" düzenine geçsin */
.dt-filtre, .dt-klasor { justify-content: flex-start; }
.dt-filtre > span:first-of-type,
.dt-klasor > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt-filtre .dt-filtre-sayi { flex: 0 0 auto; }

/* ==========================================================================
   DARALTILMIŞ HÂL — sadece minimal alt menü simgeleri
   ========================================================================== */
body.dash-menu-dar .left-panel { width: 68px; min-width: 68px; }
body.dash-menu-dar .dash-sidebar-inner { padding: 20px 10px; }

/* (2026-08-01) İZİN LİSTESİ mantığı — tek tek "şunu da gizle" demek yerine,
   dar modda menünün DOĞRUDAN çocuklarından SADECE daraltma butonu ve ikonlu
   filtre listesi görünür; kalan HER ŞEY otomatik gizlenir.
   Neden: önce gizlenecekleri tek tek sayıyordum ve JS ile üretilen
   "Henüz klasör yok. '+' ile ekle." satırı (.dt-klasor-bos) o listede
   olmadığı için dar menüde sıkışık şekilde görünüyordu (kullanıcı ekran
   görüntüsüyle yakaladı). İzin listesi ileride eklenecek öğelerde de aynı
   sorunun tekrarlanmasını önler. */
body.dash-menu-dar .dash-sidebar-inner > *:not(.dash-menu-ust):not(.dt-filtre-list) {
	display: none !important;
}
/* Satır içi metinler de gizlenir — geriye sadece ikon kalır */
body.dash-menu-dar .dt-filtre > span,
body.dash-menu-dar .dash-sol-baslik { display: none !important; }

/* Simgeler ortalanır, satırlar kareleşir */
body.dash-menu-dar .dt-filtre,
body.dash-menu-dar .dt-klasor {
	justify-content: center;
	padding: 11px 0;
	gap: 0;
}
body.dash-menu-dar .dash-alt-ikon { margin-right: 0; }
body.dash-menu-dar .dash-menu-ust { justify-content: center; }

/* Dar menüde aktif öğe: çerçeve yerine yumuşak dolgu */
body.dash-menu-dar .dt-filtre.active,
body.dash-menu-dar .dt-klasor.active {
	background: rgba(0, 80, 149, .10);
	border-color: transparent;
}

/* Simgesi olmayan (eski) satırlar dar modda tamamen gizlensin —
   boş kutucuk görünmesin */
body.dash-menu-dar .dt-filtre:not(:has(.dash-alt-ikon)),
body.dash-menu-dar .dt-klasor:not(:has(.dash-alt-ikon)) { display: none; }

/* ==========================================================================
   FORM GÖNDER BUTONLARI SAĞA HİZALI (2026-08-01, kullanıcı isteği)
   "Kaydet", "Şifreyi güncelle", "Tercihleri kaydet" gibi butonlar formun
   solunda değil SAĞ altında dursun. Genişliği %100 olan (giriş/kayıt modalı)
   butonlar bundan ETKİLENMEZ — onlarda margin-left:auto görsel fark yaratmaz.
   ========================================================================== */
form > button[type="submit"].dash-auth-btn {
	display: block;
	margin-left: auto;
}

/* Boş durum illüstrasyonu (siparişlerim, parça kütüphanem — 2026-08-01).
   Kaynak: image/page/model-nope.svg (CNC sihirbazının boş ekranıyla aynı). */
.dash-bos-gorsel { width: 100%; max-width: 260px; height: auto; margin-bottom: 12px; }

/* (2026-08-06) Profil menüsündeki "Mesajlarım" satırının okunmamış sayacı.
   Önce yalnızca mesajlarim.php'nin inline style'ındaydı — bu yüzden sayaç
   DİĞER sayfalarda biçimsiz görünüyordu. Menü öğesi düz .dropdown-item
   olduğu için sayaç metnin ardından normal akışta gelir (flex/absolute yok;
   d-flex denemesi satırı diğer öğelerden farklı hizalıyordu). */
.dash-menu-sayac {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e8505b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}