/* ═══════════════════════════════════════════════════════════════
   Advanced ICT Features - CSS
   - Premium/Discount zones
   - Trendline liquidity
   - Breaker/Mitigation Order Blocks
   - Internal/External structure
   ═══════════════════════════════════════════════════════════════ */

/* ─── Premium/Discount Zones ─── */

.smc-item.pd-premium {
  border-left: 3px solid #ef4444;
  background: linear-gradient(to left, rgba(239, 68, 68, 0.08), transparent);
}

.smc-item.pd-discount {
  border-left: 3px solid #10b981;
  background: linear-gradient(to left, rgba(16, 185, 129, 0.08), transparent);
}

.smc-item.pd-equilibrium {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(to left, rgba(245, 158, 11, 0.06), transparent);
}

/* Position bar visual */
.pd-bar {
  position: relative;
  height: 6px;
  background: linear-gradient(to right,
    rgba(16, 185, 129, 0.3) 0%,
    rgba(16, 185, 129, 0.3) 47.5%,
    rgba(245, 158, 11, 0.5) 47.5%,
    rgba(245, 158, 11, 0.5) 52.5%,
    rgba(239, 68, 68, 0.3) 52.5%,
    rgba(239, 68, 68, 0.3) 100%
  );
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.pd-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to right,
    rgba(16, 185, 129, 0.6),
    rgba(245, 158, 11, 0.8) 50%,
    rgba(239, 68, 68, 0.6)
  );
  pointer-events: none;
  display: none;
}

.pd-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--text-primary, #fff);
  border: 1px solid #000;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ─── Trendline Liquidity ─── */

.smc-item.liq-trendline {
  position: relative;
  border-left-style: dashed;
  border-left-width: 3px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), transparent);
}

.smc-item.liq-trendline::before {
  content: '📐';
  position: absolute;
  top: 4px;
  left: 4px;
  opacity: 0.4;
  font-size: 0.85rem;
}

/* ─── Order Block Variants ─── */

.smc-item.ob-breaker {
  border-left-width: 4px;
  border-left-color: #f59e0b !important;
  background: linear-gradient(to left, rgba(245, 158, 11, 0.12), transparent) !important;
  position: relative;
}

.smc-item.ob-breaker::after {
  content: 'BREAKER';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.65rem;
  background: #f59e0b;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}

.smc-item.ob-mitigation {
  border-left-style: dotted !important;
  border-left-width: 3px;
  background: linear-gradient(to left, rgba(168, 85, 247, 0.08), transparent) !important;
}

/* ─── Internal vs External Structure ─── */

.struct-internal {
  font-size: 0.75rem;
  opacity: 0.7;
  font-style: italic;
}

.struct-external {
  font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
  .pd-bar {
    height: 5px;
  }
  .pd-marker {
    width: 1.5px;
    height: 8px;
  }
  .smc-item.ob-breaker::after {
    font-size: 0.6rem;
    padding: 1px 4px;
  }
}