/* bedrock-server-manager/bedrock_server_manager/web/static/css/controls.css */
/**
 * Custom Form Control Styles
 *
 * Defines styles for non-standard form elements like segmented button controls
 * and toggle switches, aiming for a look consistent with the application theme.
 * Also includes styles for related UI elements like step indicators.
 */

/* ==========================================================================
   Segmented Controls (Radio-like Button Group)
   ========================================================================== */

/* Container for the group of segments */
.segmented-control {
    display: inline-flex; /* Arrange segments horizontally, touching */
    border: 1px solid #555; /* Outer border for the group */
    border-radius: 0; /* Sharp corners */
    overflow: hidden; /* Clip child borders cleanly */
    margin: 4px 0; /* Add some vertical margin */
}

/* Individual segment (styled button) */
.segmented-control .segment {
    /* Reset browser button styles */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none; /* Remove individual button borders */
    /* Add right border as separator (except last) */
    border-right: 1px solid #555;
    margin: 0;
    padding: 7px 14px; /* Inner spacing */

    /* Default (inactive) state appearance */
    background-color: #505050; /* Dark background */
    color: #ccc; /* Light grey text */

    /* Text & Font */
    font-family: inherit; /* Use body font */
    font-size: 0.95em;
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
    cursor: pointer; /* Indicate clickability */

    /* Smooth transitions */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Remove border from the very last segment in the group */
.segmented-control .segment:last-child {
    border-right: none;
}

/* Hover state for inactive segments */
.segmented-control .segment:hover {
    background-color: #606060; /* Slightly lighter background */
    color: #eee;
}

/* Active (selected) segment state */
.segmented-control .segment.active {
    background-color: #4CAF50; /* Use primary green for active state */
    color: #fff; /* White text */
    cursor: default; /* Indicate it's already selected */
}
/* Keep active state style even when hovering over the active segment */
.segmented-control .segment.active:hover {
     background-color: #4CAF50;
     color: #fff;
}


/* ==========================================================================
   Toggle Switches (Checkbox Styled as Switch)
   ========================================================================== */

/* Container for the entire toggle group (label, help text, switch) */
.form-group-toggle-container {
    display: flex; /* Align label group and switch horizontally */
    align-items: center; /* Align items vertically centered */
    justify-content: space-between; /* Push switch to the right */
    padding: 8px 0; /* Vertical padding */
    /* Optional separator */
    /* border-bottom: 1px solid #484848; */
}
/* Adjust spacing for validation errors appearing after toggle */
.form-group-toggle-container + .validation-error {
     margin-top: -5px;
}

/* Group for the label and optional help text */
.form-label-group {
    padding-right: 15px; /* Space between text and the switch */
}
.form-label-group .form-label {
    display: block; /* Ensure label is block for margin */
    margin-bottom: 2px; /* Small space below main label */
    font-weight: 600;
}
.form-label-group .form-help-text {
    display: block; /* Ensure help text is block */
    margin-top: 0;
    font-size: 0.9em; /* Smaller help text */
    color: #bbb; /* Lighter color */
    line-height: 1.3; /* Adjust line height if needed */
}

/* Hide the actual checkbox visually but keep accessible */
.toggle-input {
    position: absolute; /* Remove from layout flow */
    opacity: 0; /* Make invisible */
    width: 0;
    height: 0;
    pointer-events: none; /* Not interactive directly */
}

/* Container for the visual switch label */
/* Allows consistent sizing and positioning, prevents shrinking */
.toggle-switch-container {
    flex-shrink: 0;
}

/* The clickable label that acts as the switch track */
.toggle-switch {
    display: inline-block; /* Allow interaction */
    position: relative; /* Positioning context for the handle */
    width: 50px; /* Track width */
    height: 26px; /* Track height */
    background-color: #555; /* Default OFF track color */
    border: 1px solid #777;
    border-radius: 0px; /* Sharp corners */
    cursor: pointer;
    vertical-align: middle; /* Align nicely if next to text */
    transition: background-color 0.2s ease; /* Smooth color change */
}

/* The sliding handle (pseudo-element) */
.toggle-switch::before {
    content: "";
    position: absolute;
    /* Positioning for OFF state */
    left: 2px; /* Padding from left */
    top: 50%;
    transform: translateY(-50%); /* Vertical centering */
    /* Handle dimensions */
    width: 20px;
    height: 20px;
    /* Handle appearance (OFF state) */
    background-color: #bbb; /* Grey handle */
    border: 1px solid #999;
    border-radius: 0px; /* Sharp corners */
    /* Smooth transition for movement and color */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* --- Styles when the hidden checkbox is CHECKED --- */

/* Change track background when checked */
.toggle-input:checked + .toggle-switch {
    background-color: #4CAF50; /* Green track */
    border-color: #66BB6A;
}

/* Move and style handle when checked */
.toggle-input:checked + .toggle-switch::before {
    /* Move handle to the right side */
    /* Calculation: track_width - handle_width - (2 * padding_left) */
    /* 50px - 20px - (2 * 2px) = 26px. Adjust slightly (e.g., 24px) for visual centering. */
    transform: translate(24px, -50%);
    /* Change handle appearance (ON state) */
    background-color: #fff; /* White handle */
    border-color: #eee;
}

/* --- Focus state for accessibility --- */
/* Add outline/shadow when the hidden checkbox receives focus */
.toggle-input:focus + .toggle-switch {
    /* Example: subtle green glow matching active color */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5); /* Green glow */
}

/* The hidden input used to submit 'false' when checkbox is unchecked */
/* This input should have no visual appearance */
.toggle-hidden-false {
    display: none; /* Visually hidden */
}
/* IMPORTANT: The corresponding JS (`install_config.js`) handles enabling/disabling */
/* this hidden input based on the checkbox state, so only one value (true or false) is submitted. */


/* ==========================================================================
   Step Indicator (Used in multi-step forms)
   ========================================================================== */

.step-indicator {
    font-size: 0.9em;
    color: #bbb; /* Lighter text */
    font-style: italic;
    margin-top: 3px;
    margin-bottom: 15px; /* Add space below indicator */
    display: block; /* Ensure it takes its own line */
}

/* ==========================================================================
   Form Grid Adjustments (Optional)
   ========================================================================== */

/* If using a CSS Grid layout for forms (.form-grid), make toggle groups span full width */
/* This prevents the switch from being pushed far right in a multi-column grid */
.form-grid .form-group-toggle-container {
     grid-column: 1 / -1; /* Span from first to last column line */
}

/* Alternative if not using grid-column span: */
/* If toggle container should align within a single grid cell */
/*
.form-grid > .form-group-toggle-container {
     display: flex;
     align-items: center;
}
*/