/* Easy TOC - Frontend Styles v1.0.0 */
.easy-toc {
  --toc-bg: #ffffff;
  --toc-border: #e5e7eb;
  --toc-text: #1f2937;
  --toc-muted: #6b7280;
  --toc-accent: #2563eb;
  --toc-header-bg: #fafafa;
  --toc-link: #374151;
  --toc-hover-color: #2563eb;
  --toc-hover: rgba(37, 99, 235, 0.06);
  --toc-radius: 12px;
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: var(--toc-radius);
  padding: 0;
  margin: 28px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Nastaliq Urdu", sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  line-height: 1.6;
}

.easy-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--toc-header-bg);
  border-bottom: 1px solid var(--toc-border);
  cursor: pointer;
  user-select: none;
}

.easy-toc.is-collapsed .easy-toc-header {
  border-bottom: none;
}

.easy-toc-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.easy-toc-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--toc-accent, #2563eb) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.easy-toc-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: #ffffff !important;
}

.easy-toc-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--toc-text) !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}

.easy-toc-toggle {
  background: var(--toc-accent, #2563eb) !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.easy-toc-toggle:hover {
  opacity: 0.9 !important;
  transform: scale(1.05) !important;
}

.easy-toc-chevron {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: #ffffff !important;
  stroke-width: 2.5px !important;
  fill: none !important;
  transition: transform 0.25s ease !important;
}

.easy-toc.is-collapsed .easy-toc-chevron {
  transform: rotate(-90deg);
}

.easy-toc-body {
  padding: 12px 8px 16px 8px;
}

.easy-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.easy-toc-list .easy-toc-list {
  margin-left: 16px !important;
  margin-top: 4px !important;
  border-left: 2px solid #f0f0f0;
  padding-left: 12px !important;
}

.easy-toc-item {
  margin: 0 !important;
  padding: 0 !important;
}

.easy-toc-item a {
  display: block;
  padding: 7px 12px;
  color: var(--toc-link, #374151) !important;
  text-decoration: none !important;
  font-size: 14.5px;
  border-radius: 8px;
  transition: all 0.15s ease;
  line-height: 1.5;
  border-left: 2px solid transparent;
  box-shadow: none !important;
}

.easy-toc-item a:hover {
  background: var(--toc-hover);
  color: var(--toc-hover-color, var(--toc-accent)) !important;
  border-left-color: var(--toc-hover-color, var(--toc-accent));
  transform: translateX(2px);
}

.easy-toc-item.is-active > a {
  background: var(--toc-hover);
  color: var(--toc-hover-color, var(--toc-accent)) !important;
  font-weight: 600;
  border-left-color: var(--toc-hover-color, var(--toc-accent));
}

/* Level styling */
.easy-toc-level-3 a { font-size: 14px; color: #4b5563 !important; }
.easy-toc-level-4 a { font-size: 13.5px; color: #6b7280 !important; }
.easy-toc-level-5 a, .easy-toc-level-6 a { font-size: 13px; color: #6b7280 !important; }

/* THEMES */
.easy-toc-theme-bordered {
  background: #fff;
  border: 2px solid #111827;
  box-shadow: 4px 4px 0 #111827;
}
.easy-toc-theme-bordered .easy-toc-header { background: #fff; }

.easy-toc-theme-dark {
  --toc-bg: #1f2937;
  --toc-border: #374151;
  --toc-text: #f9fafb;
  --toc-muted: #9ca3af;
  --toc-accent: #60a5fa;
  --toc-hover: #374151;
}
.easy-toc-theme-dark .easy-toc-header { background: #111827; }
.easy-toc-theme-dark .easy-toc-item a { color: #d1d5db !important; }
.easy-toc-theme-dark .easy-toc-item.is-active > a { background: #374151; }
.easy-toc-theme-dark .easy-toc-toggle { background: #374151; border-color: #4b5563; color: #d1d5db; }

.easy-toc-theme-colorful {
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2px;
}
.easy-toc-theme-colorful .easy-toc-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-bottom: none;
}
.easy-toc-theme-colorful .easy-toc-title { color: #fff !important; }
.easy-toc-theme-colorful .easy-toc-icon { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); }
.easy-toc-theme-colorful .easy-toc-body { background: #fff; border-radius: 0 0 10px 10px; }
.easy-toc-theme-colorful .easy-toc-toggle { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); color: #fff; }

/* STICKY */
.easy-toc-sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Smooth scroll offset */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

/* Mobile */
@media (max-width: 768px) {
  .easy-toc { margin: 20px 0; border-radius: 10px; }
  .easy-toc-header { padding: 14px 16px; }
  .easy-toc-title { font-size: 15px !important; }
  .easy-toc-item a { font-size: 14px; padding: 8px 10px; }
  .easy-toc-sticky { position: static; max-height: none; }
}

/* Print hide */
@media print {
  .easy-toc { display: none; }
}

/* Scrollbar styling for sticky */
.easy-toc-sticky::-webkit-scrollbar { width: 6px; }
.easy-toc-sticky::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }