/**
 * ================================================
 * CLD Diagram Accessibility Improvements
 * ================================================
 * بهبود خوانایی و دسترسی‌پذیری دیاگرام‌های CLD
 * با تمرکز بر:
 * - افزایش اندازه فونت و کنتراست
 * - بهبود‌های موبایل
 * - زوم هوشمند
 * - تعاملات بهتر
 */

/* ================================================
   1. بهبود خوانایی متن در دیاگرام
   ================================================ */

/* افزایش اندازه فونت پایه در نودها */
#cy {
  /* بهبود کیفیت رندر */
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   2. بهبود کنتراست و رنگ‌شناسی
   ================================================ */

:root {
  /* رنگ‌های بهبود یافته با کنتراست بالاتر */
  --node-fill-improved: #f0f4f8;           /* خاکستری روشن‌تر برای نودها */
  --node-border-improved: #64748b;         /* border واضح‌تر */
  --node-text-improved: #0f172a;           /* متن تیره‌تر برای کنتراست بهتر */

  --edge-pos-improved: #16a34a;            /* سبز روشن‌تر (کنتراست 4.5:1) */
  --edge-neg-improved: #dc2626;            /* قرمز روشن‌تر (کنتراست 4.5:1) */
  --edge-width-base: 3px;                  /* عرض پایه خطوط */

  --bg-diagram-dark: #0a0f14;              /* پس‌زمینه تیره‌تر */

  /* سایه برای متن */
  --text-shadow-contrast: 1px 1px 3px rgba(0, 0, 0, 0.8);

  /* اندازه‌های فونت واکنش‌گرا */
  --font-size-node-desktop: 16px;
  --font-size-node-tablet: 18px;
  --font-size-node-mobile: 20px;

  --font-size-edge-desktop: 13px;
  --font-size-edge-tablet: 14px;
  --font-size-edge-mobile: 15px;

  /* اندازه نودها */
  --node-min-width-desktop: 160px;
  --node-min-height-desktop: 72px;
  --node-padding-desktop: 20px;

  --node-min-width-mobile: 180px;
  --node-min-height-mobile: 84px;
  --node-padding-mobile: 24px;
}

/* پس‌زمینه دیاگرام با کنتراست بهتر */
#cy-wrap {
  background: var(--bg-diagram-dark);
}

/* ================================================
   3. بهبود‌های موبایل (Mobile-First)
   ================================================ */

/* موبایل: فونت بزرگ‌تر و نودهای بزرگ‌تر */
@media (max-width: 640px) {
  /* Container دیاگرام */
  #cy-wrap {
    min-height: 500px;
    touch-action: pan-x pan-y pinch-zoom;
    overflow: auto;
  }

  #cy {
    min-height: 480px;
  }

  /* کنترل‌های بزرگ‌تر برای لمس */
  .toolbar .btn,
  .toolbar select,
  .toolbar input[type="range"] {
    min-height: 44px;
    min-width: 44px;
    font-size: 14px;
    padding: 10px 14px;
  }

  /* فیلترها */
  .filters {
    gap: 12px;
  }

  /* Legend بزرگ‌تر در موبایل */
  #cld-legend.cld-legend {
    font-size: 14px;
    padding: 14px 16px;
    max-width: calc(100% - 16px);
    right: 8px;
    top: 8px;
  }

  #cld-legend .legend-line {
    width: 44px;
    border-top-width: 4px;
  }
}

/* تبلت: اندازه میانه */
@media (min-width: 641px) and (max-width: 1024px) {
  #cy-wrap {
    min-height: 560px;
  }

  .toolbar .btn,
  .toolbar select {
    min-height: 40px;
    font-size: 13px;
  }

  #cld-legend.cld-legend {
    font-size: 13px;
  }
}

/* دسکتاپ: اندازه استاندارد */
@media (min-width: 1025px) {
  #cy-wrap {
    min-height: 640px;
  }
}

/* ================================================
   4. بهبود Legend (راهنما)
   ================================================ */

#cld-legend.cld-legend {
  /* کنتراست بهتر */
  background: rgba(10, 15, 20, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #f8fafc;

  /* سایه برای جدایی بهتر */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* فونت بزرگ‌تر */
  font-size: 14px;
  line-height: 1.8;
}

#cld-legend .legend-text {
  font-weight: 500;
  color: #f8fafc;
}

#cld-legend .legend-line {
  border-top-width: 5px;
  width: 52px;
}

#cld-legend .line-pos {
  border-top-color: var(--edge-pos-improved);
}

#cld-legend .line-neg {
  border-top-color: var(--edge-neg-improved);
}

#cld-legend .badge {
  font-size: 12px;
  font-weight: 700;
  border-width: 2px;
}

/* ================================================
   5. بهبود تعاملات (Interactive)
   ================================================ */

/* Hover states بهتر */
.toolbar .btn:hover,
.toolbar select:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.toolbar .btn:active,
.toolbar select:active {
  transform: translateY(0);
}

/* Focus states بهتر برای keyboard navigation */
.toolbar .btn:focus-visible,
.toolbar select:focus-visible,
.toolbar input:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

/* ================================================
   6. دکمه‌های کنترل زوم (Zoom Controls)
   ================================================ */

#cld-zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 20, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px;
  backdrop-filter: blur(8px);
}

.cld-zoom-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(30, 41, 59, 0.8);
  color: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.cld-zoom-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.cld-zoom-btn:active {
  transform: scale(0.95);
}

.cld-zoom-btn:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

/* ================================================
   7. بهبود Tooltips
   ================================================ */

.tippy-box[data-theme~='cld'] {
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.tippy-box[data-theme~='cld'] .tippy-arrow {
  color: rgba(15, 23, 42, 0.95);
}

/* ================================================
   8. Loading State
   ================================================ */

#cy-wrap.loading::after {
  content: "در حال بارگذاری دیاگرام...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

/* ================================================
   9. Panel Controls Improvements
   ================================================ */

#cld-control-hub {
  margin-bottom: 12px;
}

.ac-card > summary {
  font-size: 14px;
  padding: 12px 14px;
}

.ac-body {
  padding: 12px 14px;
}

/* ================================================
   10. Accessibility - Screen Reader
   ================================================ */

.cld-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================
   11. High Contrast Mode Support
   ================================================ */

@media (prefers-contrast: high) {
  #cld-legend.cld-legend {
    border-width: 3px;
    background: rgba(0, 0, 0, 0.95);
  }

  .toolbar .btn,
  .toolbar select {
    border-width: 2px;
  }

  .cld-zoom-btn {
    border-width: 2px;
  }
}

/* ================================================
   12. Reduced Motion Support
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .toolbar .btn:hover,
  .cld-zoom-btn:hover {
    transform: none;
  }
}

/* ================================================
   13. Print Styles
   ================================================ */

@media print {
  #cld-legend.cld-legend {
    position: static;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    page-break-inside: avoid;
  }

  #cld-zoom-controls {
    display: none;
  }

  .toolbar {
    display: none;
  }

  #cy-wrap {
    border: 1px solid #000;
  }
}

/* ================================================
   14. دکمه Fullscreen
   ================================================ */

#cld-fullscreen-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(30, 41, 59, 0.8);
  color: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

#cld-fullscreen-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

#cld-fullscreen-btn:active {
  transform: scale(0.95);
}

#cld-fullscreen-btn:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

/* Fullscreen mode */
#cy-wrap.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--bg-diagram-dark);
}

#cy-wrap.fullscreen #cy {
  width: 100%;
  height: 100%;
}