/* 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 var(--border-color); /* 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 var(--border-color);
  margin: 0;
  padding: 7px 14px; /* Inner spacing */
  /* Default (inactive) state appearance */
  background-color: var(--button-background-color); /* Dark background */
  color: var(--button-text-color); /* 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: var(
    --button-hover-background-color
  ); /* Slightly lighter background */
  color: var(--button-hover-text-color);
}

/* Active (selected) segment state */
.segmented-control .segment.active {
  background-color: var(
    --primary-button-background-color
  ); /* Use primary green for active state */
  color: var(--primary-button-text-color); /* 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: var(--primary-button-background-color);
  color: var(--primary-button-text-color);
}

/* ==========================================================================
   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: var(
    --toggle-switch-off-background-color
  ); /* Default OFF track color */
  border: 1px solid var(--toggle-switch-off-border-color);
  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: var(
    --toggle-switch-off-handle-background-color
  ); /* Grey handle */
  border: 1px solid var(--toggle-switch-off-handle-border-color);
  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: var(--toggle-switch-on-background-color); /* Green track */
  border-color: var(--toggle-switch-on-border-color);
}

/* 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: var(
    --toggle-switch-on-handle-background-color
  ); /* White handle */
  border-color: var(--toggle-switch-on-handle-border-color);
}

/* --- 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;
}
*/
