/*
 * Force Playground Styles
 *
 * Fullscreen visualization with floating control panel.
 * Follows the site's editorial design system.
 */

/* =============================================================================
   PAGE LAYOUT
   ============================================================================= */

.force-playground-page {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-bg, #fafafa);
}

/* Fullscreen viz container - positioned below site nav */
.force-playground-viz {
  position: fixed;
  top: 60px; /* Height of site nav */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1e1e3a; /* Dark background for network viz */
}

/* SVG container fills the viz area */
.force-playground-viz .svg-container {
  width: 100%;
  height: 100%;
}

/* =============================================================================
   FLOATING CONTROL PANEL
   ============================================================================= */

.force-playground-panel {
  max-height: calc(100vh - 100px); /* Leave room for nav and padding */
  overflow-y: auto;
}

/* Control groups */
.control-group {
  margin-bottom: var(--spacing-md, 16px);
  padding-bottom: var(--spacing-sm, 8px);
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.control-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.control-group h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light, #666);
  margin: 0 0 var(--spacing-xs, 4px) 0;
}

/* =============================================================================
   SELECT DROPDOWN
   ============================================================================= */

.control-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm, 4px);
  background-color: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.control-select:focus {
  outline: none;
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Description text */
.control-description {
  font-size: 0.7rem;
  color: var(--color-text-light, #666);
  margin: var(--spacing-xs, 4px) 0;
  line-height: 1.4;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

/* Button row container */
.button-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Base control button */
.control-button {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm, 4px);
  background-color: white;
  color: var(--color-text, #333);
  cursor: pointer;
  transition: all 0.15s ease;
}

.control-button:hover {
  background-color: var(--color-light, #f5f5f5);
  border-color: var(--color-text-light, #999);
}

.control-button--active {
  background-color: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: white;
}

.control-button--active:hover {
  background-color: var(--color-secondary, #1d4ed8);
  border-color: var(--color-secondary, #1d4ed8);
}

.control-button--secondary {
  background-color: var(--color-light, #f5f5f5);
  margin-top: var(--spacing-xs, 4px);
}

.control-button--accent {
  background-color: #7B1FA2;
  color: white;
  margin-top: var(--spacing-xs, 4px);
}

.control-button--accent:hover {
  background-color: #9C27B0;
}

.control-button--link {
  background: none;
  border: none;
  color: var(--color-primary, #2563eb);
  padding: 4px 0;
  text-decoration: underline;
  margin-top: var(--spacing-xs, 4px);
}

.control-button--link:hover {
  color: var(--color-secondary, #1d4ed8);
}

/* =============================================================================
   TOGGLE BUTTONS (Force toggles)
   ============================================================================= */

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.toggle-button {
  padding: 6px 8px;
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.toggle-button--on {
  background-color: #10b981; /* Green */
  border-color: #10b981;
  color: white;
}

.toggle-button--on:hover {
  background-color: #059669;
  border-color: #059669;
}

.toggle-button--off {
  background-color: var(--color-light, #f5f5f5);
  border-color: var(--color-border, #ccc);
  color: var(--color-text-light, #888);
}

.toggle-button--off:hover {
  background-color: #e5e5e5;
  color: var(--color-text, #333);
}

/* =============================================================================
   CHECKBOX
   ============================================================================= */

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text, #333);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* =============================================================================
   CATEGORY FILTER BUTTONS
   ============================================================================= */

.category-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.category-button {
  padding: 5px 10px;
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: 500;
  border: 2px solid;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.category-button--active {
  color: white;
}

.category-button--inactive {
  background-color: white;
  color: var(--color-text-light, #888);
}

.category-button--inactive:hover {
  background-color: var(--color-light, #f5f5f5);
}

/* =============================================================================
   LOADING & ERROR STATES
   ============================================================================= */

.loading-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 20px 40px;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
  font-size: 1rem;
  color: var(--color-text, #333);
  z-index: 200;
}

.error-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
  font-size: 0.875rem;
  z-index: 200;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  .force-playground-viz {
    top: 50px; /* Smaller nav on mobile */
  }

  .force-playground-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
  }

  .toggle-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}