/* ===== PP-COLLAPSIBLE COMPONENT =====
 * Merkezi açılır/kapanır menü bileşeni
 * Tüm dropdown menüler (hamburger, user menu vb.) bu stili kullanır
 * ===================================== */

/* === FONT SIZE VARIABLES (TEK KAYNAK) ===
 * Tüm menü font boyutları buradan yönetilir
 */
:root {
  --pp-menu-font-main: 14px;      /* Ana menü: Dashboard, Profil, Dosyalarım */
  --pp-menu-font-sub1: 13px;      /* 1. alt menü: Sorgularım, Uzman Görüşleri */
  --pp-menu-font-sub2: 12px;      /* 2. alt menü: İsteklerim, Gelen Talepler */
  --pp-menu-icon-main: 14px;
  --pp-menu-icon-sub1: 13px;
  --pp-menu-icon-sub2: 12px;
}

/* === WRAPPER === */
.pp-collapsible-wrap {
  grid-column: 1 / -1;
  width: 100%;
}

/* === TOGGLE BUTTON (Ana menü seviyesi) === */
.pp-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  color: #e5e7eb;
  font-size: var(--pp-menu-font-main);
  text-align: left;
}

.pp-collapsible-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pp-collapsible-toggle i:first-child {
  width: 20px;
  text-align: center;
  margin-right: 10px;
  font-size: var(--pp-menu-icon-main);
  color: #9ca3af;
}

.pp-collapsible-toggle span:not(.pp-collapsible-badge) {
  flex: 1;
  font-size: var(--pp-menu-font-main);
  color: #e5e7eb;
  font-weight: 400;
}

/* === CHEVRON ICON === */
.pp-collapsible-chevron {
  margin-left: auto;
  font-size: 11px;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

/* Chevron rotation when open */
.pp-collapsible-toggle[aria-expanded="true"] .pp-collapsible-chevron {
  transform: rotate(180deg);
}

/* === CONTENT (Collapsible Area) === */
.pp-collapsible-content {
  display: none;
  grid-column: 1 / -1;
  padding-left: 0;
  margin: 2px 0 0 0;
  list-style: none;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  margin-left: 18px;
  padding-left: 8px;
}

/* Open state */
.pp-collapsible-content.open {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2px;
}

/* === SUB ITEMS (1. alt menü seviyesi) === */
.pp-collapsible-content .pp-collapsible-item,
.pp-collapsible-content > a,
.pp-collapsible-content > button:not(.pp-collapsible-toggle),
.pp-collapsible-content > .topbar-dropdown > button,
.pp-collapsible-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  font-size: var(--pp-menu-font-sub1) !important;
  color: #d1d5db;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.pp-collapsible-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.pp-collapsible-item i,
.pp-collapsible-content > a i,
.pp-collapsible-content > button:not(.pp-collapsible-toggle) i,
.pp-collapsible-content > .topbar-dropdown > button i {
  width: 18px;
  text-align: center;
  margin-right: 6px;
  font-size: var(--pp-menu-icon-sub1) !important;
  color: #9ca3af;
}

.pp-collapsible-item:hover i {
  color: #d1d5db;
}

.pp-collapsible-item span,
.pp-collapsible-content > a span,
.pp-collapsible-content > button:not(.pp-collapsible-toggle) span,
.pp-collapsible-content > .topbar-dropdown > button span {
  font-size: var(--pp-menu-font-sub1) !important;
  color: inherit;
}

/* === NESTED COLLAPSIBLE (1. alt menü içindeki toggle) === */
/* Uzman Görüşleri gibi alt menü içindeki collapsible toggle'lar */
.pp-collapsible-content .pp-collapsible-wrap {
  margin-top: 2px;
}

.pp-collapsible-content .pp-collapsible-toggle {
  padding: 6px 10px 6px 8px;
  font-size: var(--pp-menu-font-sub1) !important;
}

.pp-collapsible-content .pp-collapsible-toggle i:first-child {
  width: 18px;
  font-size: var(--pp-menu-icon-sub1) !important;
}

.pp-collapsible-content .pp-collapsible-toggle span:not(.pp-collapsible-badge) {
  font-size: var(--pp-menu-font-sub1) !important;
}

.pp-collapsible-content .pp-collapsible-content {
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  margin-left: 16px;
  padding-left: 8px;
}

/* === NESTED ITEMS (2. alt menü seviyesi) === */
.pp-collapsible-nested-item,
.pp-collapsible-content .pp-collapsible-content a,
.pp-collapsible-content .pp-collapsible-content button:not(.pp-collapsible-toggle) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 6px;
  font-size: var(--pp-menu-font-sub2) !important;
  color: #d1d5db;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.pp-collapsible-nested-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.pp-collapsible-nested-item i,
.pp-collapsible-content .pp-collapsible-content i {
  width: 16px;
  text-align: center;
  margin-right: 6px;
  font-size: var(--pp-menu-icon-sub2) !important;
  color: #9ca3af;
}

.pp-collapsible-nested-item:hover i {
  color: #d1d5db;
}

/* === BADGE === */
.pp-collapsible-badge {
  flex: none !important;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Badge in toggle button - adjust margin */
.pp-collapsible-toggle .pp-collapsible-badge {
  margin-right: 8px;
}

/* === DIVIDER === */
.pp-collapsible-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
  grid-column: 1 / -1;
}

/* === DROPDOWN CONTEXT OVERRIDES ===
 * Bu stiller dropdown menü içindeki collapsible'lar için
 */

/* Main menu dropdown context */
#main-menu-dropdown .pp-collapsible-toggle,
#user-menu-dropdown .pp-collapsible-toggle {
  padding: 6px 12px;
}

#main-menu-dropdown .pp-collapsible-item,
#user-menu-dropdown .pp-collapsible-item {
  padding: 4px 10px 4px 8px;
}

/* === USER MENU COLLAPSIBLE FIX ===
 * Kullanıcı menüsündeki Dosyalarım alt menüsünün hamburger menü ile
 * aynı görünmesi için özel düzeltmeler
 */

/* Auth-only collapsible wrapper - display: flex yerine block */
#user-menu-dropdown .pp-collapsible-wrap.auth-only {
  display: block !important;
  width: 100%;
}

/* Sorgularım wrapper - dropdown stillerini sıfırla */
#user-menu-dropdown .pp-collapsible-content .topbar-dropdown,
#main-menu-dropdown .pp-collapsible-content .topbar-dropdown {
  position: static !important;
  z-index: auto;
  padding-bottom: 0;
  margin-bottom: 0;
  width: 100%;
}

#user-menu-dropdown .pp-collapsible-content .topbar-dropdown.open,
#main-menu-dropdown .pp-collapsible-content .topbar-dropdown.open {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Sorgularım dropdown menu - collapsible content içinde özel stil */
#user-menu-dropdown .pp-collapsible-content #myQueriesList,
#main-menu-dropdown .pp-collapsible-content #myQueriesList {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  min-width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  z-index: auto;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  margin-left: 16px;
  padding-left: 8px;
  margin-top: 4px;
}

/* Sorgularım: Taleplerim ile aynı pp-collapsible-wrap dalında — ekstra sol çizgi/girinti yok */
#user-menu-dropdown .pp-collapsible-content > #menuMyQueriesGroup #myQueriesList,
#main-menu-dropdown .pp-collapsible-content > #menuMyQueriesGroup #myQueriesList {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
  margin-top: 0;
}

#user-menu-dropdown .pp-collapsible-content #myQueriesList.open,
#user-menu-dropdown .pp-collapsible-content .topbar-dropdown.open > #myQueriesList,
#user-menu-dropdown .pp-collapsible-content #my-queries-submenu.open > #myQueriesList,
#main-menu-dropdown .pp-collapsible-content #myQueriesList.open,
#main-menu-dropdown .pp-collapsible-content .topbar-dropdown.open > #myQueriesList,
#main-menu-dropdown .pp-collapsible-content #my-queries-submenu.open > #myQueriesList {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Sorgularım listesindeki öğeler
 * Üst menü (Sorgularım butonu) sub1=13px, bu öğeler 1px küçük = sub2=12px */
#user-menu-dropdown .pp-collapsible-content #myQueriesList .my-query-item,
#user-menu-dropdown .pp-collapsible-content #myQueriesList a,
#user-menu-dropdown .pp-collapsible-content #myQueriesList button,
#main-menu-dropdown .pp-collapsible-content #myQueriesList .my-query-item,
#main-menu-dropdown .pp-collapsible-content #myQueriesList a,
#main-menu-dropdown .pp-collapsible-content #myQueriesList button {
  display: flex;
  align-items: center;
  padding: 5px 8px 5px 6px;
  font-size: var(--pp-menu-font-sub2) !important;
  color: #d1d5db;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

#user-menu-dropdown .pp-collapsible-content #myQueriesList .my-query-item:hover,
#user-menu-dropdown .pp-collapsible-content #myQueriesList a:hover,
#user-menu-dropdown .pp-collapsible-content #myQueriesList button:hover,
#main-menu-dropdown .pp-collapsible-content #myQueriesList .my-query-item:hover,
#main-menu-dropdown .pp-collapsible-content #myQueriesList a:hover,
#main-menu-dropdown .pp-collapsible-content #myQueriesList button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Sorgularım listesi span'ları - sidebar.css'teki .toggle-btn span override'ını ez */
#user-menu-dropdown .pp-collapsible-content #myQueriesList .toggle-btn span,
#user-menu-dropdown .pp-collapsible-content #myQueriesList button span,
#main-menu-dropdown .pp-collapsible-content #myQueriesList .toggle-btn span,
#main-menu-dropdown .pp-collapsible-content #myQueriesList button span {
  font-size: var(--pp-menu-font-sub2) !important;
}

#user-menu-dropdown .pp-collapsible-content #myQueriesList i,
#main-menu-dropdown .pp-collapsible-content #myQueriesList i {
  width: 16px;
  text-align: center;
  margin-right: 6px;
  font-size: var(--pp-menu-icon-sub2) !important;
  color: #9ca3af;
}

/* Uzman Görüşleri nested collapsible - hamburger menüyle uyumlu */
#user-menu-dropdown .pp-collapsible-content > .pp-collapsible-wrap {
  margin-top: 0;
}

#user-menu-dropdown .pp-collapsible-content > .pp-collapsible-wrap > .pp-collapsible-toggle {
  padding: 4px 10px 4px 8px;
  font-size: 12px;
}

#user-menu-dropdown .pp-collapsible-content > .pp-collapsible-wrap > .pp-collapsible-toggle i:first-child {
  width: 18px;
  font-size: 12px;
  margin-right: 6px;
}

#user-menu-dropdown .pp-collapsible-content > .pp-collapsible-wrap > .pp-collapsible-content {
  margin-top: 0;
}

#user-menu-dropdown .pp-collapsible-content,
#user-menu-dropdown .pp-collapsible-content.open {
  gap: 0;
  margin-top: 0;
}

#user-menu-dropdown .pp-collapsible-content #myQueriesList {
  margin-top: 0;
}

/* === ACCESSIBILITY === */
.pp-collapsible-toggle:focus-visible,
.pp-collapsible-item:focus-visible,
.pp-collapsible-nested-item:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* === DARK MODE (default) === */
/* Component varsayılan olarak dark mode için tasarlandı */

/* === ANIMATION === */
@media (prefers-reduced-motion: no-preference) {
  .pp-collapsible-content {
    transition: opacity 0.15s ease;
  }
  
  .pp-collapsible-content.open {
    animation: pp-collapsible-fade-in 0.15s ease;
  }
}

@keyframes pp-collapsible-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}