/**
 * @file components.css
 * @brief Shared stylesheet for the interactive UI component primitives (issue #291, ADR-0005, EPIC #277 UI consistency).
 * @note Single styling source for the Toggle/Switch primitive rendered by
 *       \GTenderControlSystem\ToggleRenderer. It builds a true Bootstrap-lineage
 *       switch with a PILL track (border-radius: var(--gt-toggle-track-radius),
 *       999px) and a CIRCULAR knob (border-radius: var(--gt-toggle-knob-radius),
 *       50%) — never the rounded-rectangle look of the legacy hand-rolled
 *       .toggle-switch. The on-state fills with the tokenized brand success green
 *       (--gt-toggle-track-on), the white knob carries a soft drop shadow
 *       (--gt-toggle-knob-shadow), and both move on a 0.25s transition per the
 *       owner's visual contract (issue #291). Every colour and geometry value references a --gt-toggle-*
 *       design token from assets/css/tokens.css; this file contains NO raw palette
 *       literal (hex / rgb / hsl), so it satisfies .devrules/10-ui-consistency-policy.md
 *       and the ui-consistency-drift-check gate. Linked after bootstrap in
 *       BootstrapRenderer::renderHead() so it can override the default form-switch
 *       knob/background. Runtime behaviour (keyboard, container click, change,
 *       aria-checked sync) lives in assets/js/components.toggle.js.
 * @copyright Copyright (c) 2026 GLT Design. All rights reserved.
 */

/* Toggle/Switch — pill track + circular knob, tokenized. */
.gt-toggle .gt-toggle-input {
    position: relative;
    width: var(--gt-toggle-track-width);
    height: var(--gt-toggle-track-height);
    margin-top: 0;
    background-image: none;
    background-color: var(--gt-toggle-track-off);
    border: 1px solid var(--gt-toggle-track-border);
    border-radius: var(--gt-toggle-track-radius);
    transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
    cursor: pointer;
}

/* The knob is a real circular element (border-radius: 50%), not a background SVG. */
.gt-toggle .gt-toggle-input::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--gt-toggle-knob-gap);
    transform: translateY(-50%);
    width: var(--gt-toggle-knob-size);
    height: var(--gt-toggle-knob-size);
    background-color: var(--gt-toggle-knob);
    border-radius: var(--gt-toggle-knob-radius);
    box-shadow: var(--gt-toggle-knob-shadow);
    transition: left 0.25s ease-in-out;
}

.gt-toggle .gt-toggle-input:checked {
    background-color: var(--gt-toggle-track-on);
    border-color: var(--gt-toggle-track-on);
    background-image: none;
}

.gt-toggle .gt-toggle-input:checked::before {
    left: calc(100% - var(--gt-toggle-knob-size) - var(--gt-toggle-knob-gap));
}

/* Tokenized focus ring — keyboard focus is always visible. */
.gt-toggle .gt-toggle-input:focus {
    border-color: var(--gt-toggle-track-on);
    box-shadow: 0 0 0 0.2rem var(--gt-toggle-focus-ring);
}

.gt-toggle .gt-toggle-input:focus:not(:focus-visible) {
    box-shadow: 0 0 0 0.2rem var(--gt-toggle-focus-ring);
}

.gt-toggle .gt-toggle-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gt-toggle .gt-toggle-label {
    cursor: pointer;
}

.gt-toggle .gt-toggle-input:disabled ~ .gt-toggle-label {
    cursor: not-allowed;
}

.gt-toggle .gt-toggle-icon {
    margin-right: 0.25rem;
}

.gt-toggle .gt-toggle-description {
    display: block;
}

/* Compact size variant — smaller track/knob via the *-compact tokens. */
.gt-toggle.gt-toggle-compact .gt-toggle-input {
    width: var(--gt-toggle-track-width-compact);
    height: var(--gt-toggle-track-height-compact);
}

.gt-toggle.gt-toggle-compact .gt-toggle-input::before {
    width: var(--gt-toggle-knob-size-compact);
    height: var(--gt-toggle-knob-size-compact);
}

.gt-toggle.gt-toggle-compact .gt-toggle-input:checked::before {
    left: calc(100% - var(--gt-toggle-knob-size-compact) - var(--gt-toggle-knob-gap));
}