/**
 * DersTeders — Devre Simülatörü PRO katmanı
 * ------------------------------------------------------------------
 * Palet ve özellik paneli görünürlüğü, "Dışa Aktar" menüsü, ince
 * hizalama/fare hatları ve yazdırma düzeni.
 * Kurallar: neon ışıma yok, gökkuşağı yok, emoji yok; yalnızca
 * --surface / --border / --accent (#00D4AA) değişkenleri kullanılır.
 */

/* ==================== DEĞİŞKENLER (geri uyumlu) ==================== */
.sim-app,
.sim-library,
.sim-right,
.export-menu {
  --pro-accent: var(--accent, #00D4AA);
  --pro-accent-dim: var(--accent-dim, rgba(0, 212, 170, 0.12));
  --pro-border: var(--border, #35353C);
  --pro-surface: var(--surface, #1E1E22);
  --pro-surface-2: var(--surface-2, #26262B);
  --pro-surface-3: var(--surface-3, #2E2E34);
  --pro-radius: 12px;
}

/* ==================== SOL KÜTÜPHANE (PALET) ==================== */
.sim-library {
  border-right: none;
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  margin: 8px 0 8px 8px;
  background: var(--pro-surface);
  overflow: hidden;
}

.sim-library .lib-search {
  border-bottom: 1px solid var(--pro-border);
  background: var(--pro-surface);
}

.sim-library .lib-search input {
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  background: var(--pro-surface-2);
}

.sim-library .lib-search input:focus {
  border-color: var(--pro-accent);
  box-shadow: inset 0 0 0 1px var(--pro-accent);
}

.lib-sections {
  padding-top: 8px;
}

/* Bölüm başlıkları: belirgin başlık satırı + sayaç rozeti */
.lib-section h4 {
  gap: 8px;
  border-radius: 8px;
  margin: 2px 6px;
  padding: 9px 8px;
}

.lib-section h4:hover {
  color: var(--ink, #E8E8EC);
}

.lib-section h4 .section-count {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  color: var(--pro-accent);
  background: var(--pro-accent-dim);
  border: 1px solid rgba(0, 212, 170, 0.28);
  letter-spacing: 0.02em;
}

/* Bileşen satırı: ince çerçeve + hafif zemin */
.lib-item {
  border: 1px solid transparent;
  border-radius: 8px;
}

.lib-item:hover,
.lib-item:focus-visible {
  background: var(--pro-accent-dim);
  color: var(--pro-accent);
  outline: 1px solid rgba(0, 212, 170, 0.55);
  outline-offset: -1px;
}

.lib-item:focus-visible {
  outline: 1px solid var(--pro-accent);
}

.lib-item .lib-icon {
  border-radius: 8px;
  border: 1px solid var(--pro-border);
  background: var(--pro-surface-3);
}

.lib-item:hover .lib-icon,
.lib-item:focus-visible .lib-icon {
  border-color: var(--pro-accent);
  background: var(--pro-accent-dim);
}

.lib-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================== SAĞ PANEL / ÖZELLİKLER ==================== */
.sim-right {
  border-left: none;
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  margin: 8px 8px 8px 0;
  background: var(--pro-surface);
  overflow: hidden;
}

.sim-right .right-tabs {
  border-bottom: 1px solid var(--pro-border);
}

.rpanel {
  padding: 14px;
}

.prop-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 10px 10px 12px;
  margin-bottom: 12px;
}

.prop-label {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.prop-divider {
  height: 1px;
  background: var(--pro-border);
  margin: 12px 0;
  opacity: 0.8;
}

.prop-input {
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  background: var(--pro-surface-2);
}

.prop-input:focus {
  border-color: var(--pro-accent);
  box-shadow: inset 0 0 0 1px var(--pro-accent);
}

.prop-btn {
  border-radius: 9px;
  border: 1px solid var(--pro-border);
  transition: var(--transition, all 0.2s ease);
}

.prop-btn:hover {
  border-color: var(--pro-accent);
}

/* ==================== DIŞA AKTAR ▾ MENÜSÜ ==================== */
#btnExportMenu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#btnExportMenu .exp-caret {
  transition: transform 0.18s ease;
  opacity: 0.85;
}

#btnExportMenu[aria-expanded='true'] {
  color: var(--ink, #E8E8EC);
  border-color: var(--pro-accent);
  background: var(--pro-accent-dim);
}

#btnExportMenu[aria-expanded='true'] .exp-caret {
  transform: rotate(180deg);
}

.export-menu {
  position: fixed;
  z-index: 9998;
  min-width: 274px;
  max-width: 320px;
  display: none;
  padding: 6px;
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  font-family: var(--font-main, 'Plus Jakarta Sans', system-ui, sans-serif);
  color: var(--ink, #E8E8EC);
}

.export-menu.open {
  display: block;
  animation: expMenuIn 0.14s ease;
}

@keyframes expMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.export-menu-head {
  padding: 8px 10px 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #6E6E78);
}

.export-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--pro-border);
  opacity: 0.85;
}

.export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink-2, #B0B0B8);
  text-align: left;
  cursor: pointer;
  transition: var(--transition, all 0.18s ease);
}

.export-item:hover,
.export-item:focus-visible {
  background: var(--pro-accent-dim);
  border-color: rgba(0, 212, 170, 0.5);
  color: var(--ink, #E8E8EC);
  outline: none;
}

.export-item-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--pro-surface-3);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  color: var(--pro-accent);
}

.export-item-ico svg {
  width: 16px;
  height: 16px;
}

.export-item-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.export-item-txt strong {
  font-size: 0.78rem;
  font-weight: 600;
}

.export-item-txt em {
  font-style: normal;
  font-size: 0.65rem;
  color: var(--muted, #6E6E78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== TUVAL KENAR / EKSEN VURGUSU ==================== */
.sim-canvas-area {
  background: var(--bg-canvas, #1A1A1E);
}

.canvas-coords,
.canvas-zoom {
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  background: rgba(30, 30, 34, 0.92);
  color: var(--ink-2, #B0B0B8);
  font-variant-numeric: tabular-nums;
}

/* ==================== YAZDIRMA DÜZENİ (→ PDF) ==================== */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  .sim-topbar,
  .sim-library,
  .sim-right,
  .bb-palette,
  .bb-banner,
  .canvas-overlay,
  .dt-share,
  .export-menu,
  .toast,
  #toastContainer,
  #shortcutsOverlay,
  .sim-switch,
  .sim-actions,
  .view-modes,
  #simStats,
  .comp-tooltip,
  #dragGhost,
  #contextMenu {
    display: none !important;
  }

  html,
  body,
  .sim-app,
  .sim-main {
    background: #ffffff !important;
    height: auto !important;
    overflow: visible !important;
  }

  .sim-main {
    display: block !important;
  }

  .sim-canvas-area {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: none !important;
  }

  #circuitCanvas {
    width: 100% !important;
    height: auto !important;
    border: 1px solid #1B1F27 !important;
  }

  #sim3d {
    display: none !important;
  }
}