/* ═══════════════════════════════════════════════════════════════════════════════
   OPTIO SERVICES - v50 CSS Additions
   Add these styles to your console.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   DISABLED NAVIGATION ITEMS
   Grays out disabled sections (Developers, Insights, Tutorials)
   ───────────────────────────────────────────────────────────────────────────────── */

/* Sidebar LTS/LTC buttons when disabled */
.lts-button.disabled,
.ltc-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.lts-button.disabled .sp-lts,
.ltc-button.disabled .sp-ltc {
  color: #4A5568 !important;
}

.lts-button.disabled:hover,
.ltc-button.disabled:hover {
  background: transparent;
}

/* Disabled with "Coming Soon" tooltip */
.lts-button.disabled::after,
.ltc-button.disabled::after {
  content: 'Coming Soon';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  background: rgba(10, 22, 40, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #D4AF37;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-left: 0.5rem;
}

.lts-button.disabled:hover::after,
.ltc-button.disabled:hover::after {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SITEMAP DISABLED ITEMS
   Footer sitemap grayed out sections
   ───────────────────────────────────────────────────────────────────────────────── */

.sitemap-lts.disabled-section {
  opacity: 0.4;
}

.sitemap-lts.disabled-section .lts-header,
.sitemap-lts.disabled-section .ltc-item {
  cursor: not-allowed;
  pointer-events: none;
}

.lts-header.disabled,
.ltc-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   STATUS DOT VARIANTS
   ───────────────────────────────────────────────────────────────────────────────── */

.status-dot.status-pending {
  background: #ED8936 !important;
  box-shadow: 0 0 6px rgba(237, 137, 54, 0.5);
}

.status-dot.status-error {
  background: #E53E3E !important;
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   MODAL Z-INDEX FIX
   Ensures modals appear above everything
   ───────────────────────────────────────────────────────────────────────────────── */

.modal-overlay {
  z-index: 10000 !important;
}