/*
 * Reusable segmented ON/OFF toggle ("bit-seg") — a pill-style replacement for a
 * boolean checkbox / Bootstrap switch, used app-wide for enabled-style settings.
 *
 * The pill markup is generated at runtime by the Stimulus controllers
 * `segmented-checkbox` (wraps a checkbox) or `segmented-select` (wraps a Yes/No
 * <select>). You only write the wrapped field — see the _bit_toggle.html.twig
 * macro for the one-line helper. Example:
 *
 *   <div data-controller="segmented-checkbox">
 *     {{ form_widget(form.enabled, {'attr': {'data-segmented-checkbox-target': 'checkbox'}}) }}
 *   </div>
 *
 * Labels default to ON / OFF; override with
 *   data-segmented-checkbox-on-label-value="Show"
 *   data-segmented-checkbox-off-label-value="Hide"
 */
.bit-seg {
    display: inline-flex;
    background: #eef1f6;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    vertical-align: middle;
}

.bit-seg button {
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #6c7686;
    padding: 5px 16px;
    cursor: pointer;
    line-height: 1.4;
    transition: color 0.12s ease, background 0.12s ease;
}

.bit-seg button:hover {
    color: #1f2630;
}

.bit-seg button.on {
    background: #fff;
    color: #112a54;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Boolean ON/OFF coloring: the active segment turns green when ON is selected
   and dark red when OFF is selected. Applies to `segmented-checkbox`
   (data-on="1"/"0") and boolean `segmented-select` (data-value="1"/"0").
   Any non-boolean segmented control keeps the neutral white pill above. */
.bit-seg button.on[data-on="1"],
.bit-seg button.on[data-value="1"] {
    background: #1b8446;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.bit-seg button.on[data-on="0"],
.bit-seg button.on[data-value="0"] {
    background: #b42318;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Locked state: used when a dependent toggle is forced and can't be changed
   (e.g. "Show In-Person Classes" while IPC is not offered). */
.seg-locked .bit-seg {
    opacity: 0.45;
    pointer-events: none;
}

/*
 * Single ON/OFF pill switch used for the Behind-the-Wheel "Completed" roster
 * toggle (see _roster_toggles.html.twig btw_toggle). ON = lesson completed.
 * A native checkbox drives state; the track/thumb/label are the visible switch.
 */
.roster-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.roster-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.roster-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 99px;
    background: #d3d9e2;
    transition: background 0.15s ease;
}

.roster-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.roster-switch.is-on .roster-switch__track {
    background: #1d9e52;
}

.roster-switch.is-on .roster-switch__thumb {
    transform: translateX(18px);
}

.roster-switch__text {
    font-size: 0.76rem;
    font-weight: 700;
    color: #6c7686;
    min-width: 66px;
    transition: color 0.12s ease;
}

.roster-switch.is-on .roster-switch__text {
    color: #0f7b3f;
}

.roster-switch__input:focus-visible + .roster-switch__track {
    outline: 2px solid #2674a6;
    outline-offset: 2px;
}