/* ===================================================================
   Site Customization Toggle Component
   ===================================================================

   Purpose: Styling for the Enable Custom Site UI & Address toggle
   Location: /portal/manage/?active_tab=site_ui

   Features:
   - Header container with toggle control
   - Disabled state system for setup content
   - Maintains accessibility and visual hierarchy

   Dependencies: Bootstrap 5, _forms.css (for .form-switch-modern)
   ================================================================== */

/* Toggle Header Container
   =====================================================================
   Creates a visually distinct header section that contains the master
   toggle control for enabling/disabling site customization features.

   Design: Gray background box with border and padding to make the
   toggle stand out as the primary control for the entire section.

   Usage: Wraps the toggle switch to provide visual emphasis and
   hierarchy, indicating this control affects all content below.
   ===================================================================== */
.site-customization-toggle-container {
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Disabled State System
   =====================================================================
   Comprehensive disabled styling applied to setup content when the
   toggle is OFF. Provides visual feedback that content is inactive
   while preserving readability of saved values.

   Approach: Uses opacity + pointer-events + visual overlay to create
   a clear disabled state without completely hiding content. This allows
   users to see what they'll be enabling before turning the toggle on.

   Design Philosophy: "Show but don't allow" - users can see the setup
   process and existing values, but cannot interact until enabled.
   ===================================================================== */
.site-setup-disabled-state {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

/* Disabled State Visual Overlay
   =====================================================================
   Adds a subtle white overlay to reinforce the disabled state without
   completely obscuring the content. The overlay is non-interactive and
   sits above the content to prevent any accidental interactions.
   ===================================================================== */
.site-setup-disabled-state::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
    pointer-events: none;
}

/* Disabled Stepper Indicator Styling
   =====================================================================
   Makes the step indicators (Setup Address → Site Theme) appear
   inactive when the toggle is off. Uses grayscale filter and muted
   colors to clearly indicate the steps are not currently accessible.
   ===================================================================== */
.site-setup-disabled-state .stepper {
    filter: grayscale(100%);
}

.site-setup-disabled-state .stepper-item,
.site-setup-disabled-state .stepper-title {
    color: var(--bs-gray-500, #adb5bd) !important;
}

.site-setup-disabled-state .bg-light {
    background-color: var(--bs-gray-300, #e9ecef) !important;
    color: var(--bs-gray-600, #6c757d) !important;
}

/* Disabled Form Elements
   =====================================================================
   Comprehensive styling for all form inputs when in disabled state.
   Uses muted backgrounds and borders while maintaining readability
   so users can see existing saved values.

   Covers: text inputs, selects, textareas, form controls, and selects
   ===================================================================== */
.site-setup-disabled-state input,
.site-setup-disabled-state select,
.site-setup-disabled-state textarea,
.site-setup-disabled-state .form-control,
.site-setup-disabled-state .form-select {
    background-color: var(--bs-gray-100, #f8f9fa);
    border-color: var(--bs-gray-300, #e9ecef);
    color: var(--bs-gray-600, #6c757d);
}

/* Disabled Buttons
   =====================================================================
   Styles buttons to appear clearly disabled with muted colors and
   not-allowed cursor. Uses !important to override Bootstrap's button
   states and ensure consistent disabled appearance.
   ===================================================================== */
.site-setup-disabled-state .btn {
    background-color: var(--bs-gray-300, #e9ecef) !important;
    border-color: var(--bs-border-color, #dee2e6) !important;
    color: var(--bs-gray-600, #6c757d) !important;
    cursor: not-allowed !important;
}

/* Disabled Checkboxes and Radio Buttons
   =====================================================================
   Ensures form check inputs (checkboxes, radio buttons) also appear
   disabled with muted backgrounds and borders.
   ===================================================================== */
.site-setup-disabled-state .form-check-input {
    background-color: var(--bs-gray-100, #f8f9fa);
    border-color: var(--bs-gray-300, #e9ecef);
}

/* Disabled Labels and Help Text
   =====================================================================
   Makes all text labels and help text appear muted to reinforce the
   disabled state while maintaining readability. This includes form
   labels, help text, and checkbox/radio labels.
   ===================================================================== */
.site-setup-disabled-state .form-label,
.site-setup-disabled-state .form-text,
.site-setup-disabled-state .form-check-label {
    color: var(--bs-gray-500, #adb5bd) !important;
}

/* Responsive Design
   =====================================================================
   Adjusts the toggle container padding and margins for mobile devices
   to maintain usability while conserving screen space.
   ===================================================================== */
@media (max-width: 991.98px) {
    .site-customization-toggle-container {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* Accessibility Notes
   =====================================================================
   The disabled state system maintains accessibility by:
   - Preserving content visibility for screen readers
   - Using pointer-events: none instead of hiding content
   - Maintaining sufficient color contrast in disabled states
   - Preserving semantic structure and ARIA attributes
   ===================================================================== */