/**
 * ProRank Toggle Standards
 * MANDATORY design patterns for ALL toggles across the plugin
 * This ensures 100% consistency and premium appearance
 */

/* ============================================
   STANDARD TOGGLE ROW - USE EVERYWHERE
   Every toggle MUST be in this container
   ============================================ */
.prorank-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff;
  min-height: 48px;
  transition: all 0.2s ease;
  position: relative;
}

.prorank-toggle-row:hover {
  border-color: #d0d0d0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.prorank-toggle-row:last-child {
  margin-bottom: 0;
}

/* Label styling - ALWAYS on the left */
.prorank-toggle-row .prorank-toggle-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0;
  padding-right: 16px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.prorank-toggle-row .prorank-toggle-label strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.prorank-toggle-row .prorank-toggle-label span {
  display: block !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
}

/* Toggle switch slider - on the RIGHT side */
.prorank-toggle-row .prorank-toggle-slider {
  flex-shrink: 0 !important;
  margin-left: 16px !important;
}

/* Professional toggle component override */
.prorank-toggle-row .prorank-toggle-professional {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.prorank-toggle-row .prorank-toggle-info {
  flex: 1 !important;
  padding-right: 16px !important;
}

.prorank-toggle-row .prorank-toggle-title {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 4px !important;
}

.prorank-toggle-row .prorank-toggle-description {
  display: block !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
}

/* Status indicator (optional) */
.prorank-toggle-row .prorank-toggle-status {
  margin-left: 12px !important;
  padding: 2px 8px !important;
  background: #f0f0f0 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #666 !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* ============================================
   TOGGLE GROUPS
   For organizing related toggles
   ============================================ */
.prorank-toggle-group {
  margin-bottom: 32px !important;
}

.prorank-toggle-group-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.prorank-toggle-group-description {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin-bottom: 16px !important;
}

/* ============================================
   CARD WITH TOGGLES
   Standard card structure for settings
   ============================================ */
.prorank-card .prorank-toggle-row:first-child {
  margin-top: 0 !important;
}

.prorank-card-header + .prorank-card-body .prorank-toggle-row:first-child {
  margin-top: 0 !important;
}

/* ============================================
   TAB PAGE SPECIFIC FIXES
   For module tab pages
   ============================================ */
.prorank-tab-content .prorank-toggle-row {
  margin: 12px 0 !important;
}

/* Keep tab toggles visible (ModuleNav uses them for per-module switches) */

/* Tab header toggle replacement */
.prorank-module-tab {
  position: relative !important;
}

.prorank-module-tab .prorank-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
}

/* ============================================
   DISABLED STATE
   ============================================ */
.prorank-toggle-row.disabled {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.prorank-toggle-row .prorank-toggle[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ============================================
   LOCKED/PRO FEATURES
   ============================================ */
.prorank-toggle-row.locked {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

.prorank-toggle-row.locked::after {
  content: "PRO" !important;
  position: absolute !important;
  top: 12px !important;
  right: 60px !important;
  padding: 2px 6px !important;
  background: linear-gradient(135deg, #fb923c, #f97316) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .prorank-toggle-row {
    padding: 10px 12px !important;
    min-height: 44px !important;
  }

  .prorank-toggle-row .prorank-toggle-label {
    font-size: 13px !important;
  }

  .prorank-toggle-row .prorank-toggle-label span {
    font-size: 12px !important;
  }
}

/* ============================================
   MIGRATION HELPERS
   Fix common issues from old implementations
   ============================================ */

/* Fix absolute positioning issues */
.prorank-settings-page label[style*="position: absolute"],
.prorank-settings-page label[style*="position:absolute"] {
  position: relative !important;
}

/* Fix WordPress ToggleControl conflicts */
.components-toggle-control {
  margin-bottom: 0 !important;
}

.components-toggle-control .components-base-control__field {
  margin-bottom: 0 !important;
}

/* Remove WordPress default margins */
.prorank-toggle-row .components-base-control {
  margin-bottom: 0 !important;
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */
.prorank-toggle-row .prorank-toggle-track {
  transition: background-color 0.2s ease !important;
}

.prorank-toggle-row .prorank-toggle-thumb {
  transition: transform 0.2s ease !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.prorank-toggles-compact .prorank-toggle-row {
  margin-bottom: 8px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
}

.prorank-toggles-large .prorank-toggle-row {
  margin-bottom: 16px !important;
  min-height: 56px !important;
  padding: 16px 20px !important;
}

/* ============================================
   CRITICAL OVERRIDES
   Force correct layout even with conflicts
   ============================================ */
.prorank-toggle-row > * {
  position: relative !important;
}

.prorank-toggle-row label {
  position: relative !important;
  display: block !important;
}

/* Toggle slider positioning */
.prorank-toggle-row > .prorank-toggle-slider {
  margin-left: auto !important;
}