/**
 * Airtime Design System v3 - Controls
 * Figma: https://www.figma.com/design/4ycNiPIJ2oXZVaCwaECbUa/Airtime-apps-design-system?node-id=1-1624
 *
 * Requires: generated/tokens.css
 *
 * ── Segmented Control ─────────────────────────────────
 *   .segmented             Container
 *   .segmented-item        Individual segment (button)
 *   .segmented-item.active Selected state
 *
 * ── Checkbox ──────────────────────────────────────────
 *   .checkbox              Custom checkbox (wraps <input type="checkbox">)
 *   .checkbox input        Hidden native input
 *   .checkbox-box          Visual 16×16px box
 *   .checkbox-label        Optional label text
 *
 * ── Radio ─────────────────────────────────────────────
 *   .radio                 Custom radio (wraps <input type="radio">)
 *   .radio input           Hidden native input
 *   .radio-box             Visual 16×16px circle
 *   .radio-label           Optional label text
 *
 * ── Slider ────────────────────────────────────────────
 *   .slider                <input type="range"> — single handle
 *   .slider-threshold      Two-handle range (div-based)
 *   .slider-threshold-track
 *   .slider-threshold-handle
 *
 * ── Progress Bar ──────────────────────────────────────
 *   .progress              <progress> element
 *
 * ── Loader ────────────────────────────────────────────
 *   .loader                16×16px spinner (image-based SVG rotation)
 *   .loader-lg             24×24px spinner
 *
 * ── Dropdown ──────────────────────────────────────────
 *   .dropdown              Wrapper <div>
 *   .dropdown-trigger      Visible button (click to open)
 *   .dropdown-icon-left    Optional leading icon
 *   .dropdown-menu         <ul> popup list
 *   .dropdown-item         <li> inside menu
 *
 * ── HTML examples ─────────────────────────────────────
 *
 *   <!-- Segmented control -->
 *   <div class="segmented" role="group">
 *     <button class="segmented-item active">Label</button>
 *     <button class="segmented-item">Label</button>
 *     <button class="segmented-item">Label</button>
 *   </div>
 *
 *   <!-- Checkbox -->
 *   <label class="checkbox">
 *     <input type="checkbox" />
 *     <span class="checkbox-box"></span>
 *     <span class="checkbox-label">Label</span>
 *   </label>
 *
 *   <!-- Radio -->
 *   <label class="radio">
 *     <input type="radio" name="group" />
 *     <span class="radio-box"></span>
 *     <span class="radio-label">Label</span>
 *   </label>
 *
 *   <!-- Slider -->
 *   <input class="slider" type="range" min="0" max="100" value="25" />
 *
 *   <!-- Progress bar -->
 *   <progress class="progress" value="25" max="100"></progress>
 *
 *   <!-- Loader -->
 *   <span class="loader" aria-label="Loading"></span>
 *
 *   <!-- Dropdown -->
 *   <div class="dropdown">
 *     <button class="dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
 *       <span>Option</span>
 *       <img class="dropdown-chevron" src="../icons/ChevronDownSmall_Stroke_16.svg" alt="" />
 *     </button>
 *     <ul class="dropdown-menu" role="listbox">
 *       <li class="dropdown-item" role="option">Option A</li>
 *       <li class="dropdown-item" role="option">Option B</li>
 *     </ul>
 *   </div>
 */

/* ════════════════════════════════════════════════════
   SEGMENTED CONTROL
   ════════════════════════════════════════════════════ */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--color-background-primary);
  border-radius: var(--radius-15);                   /* 6px */
  box-sizing: border-box;
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);                              /* 4px */
  height: 24px;
  padding: 2px var(--space-10);                      /* 2px 4px */
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-10);                   /* 4px */
  background: transparent;
  cursor: pointer;

  font-family: var(--font-family-primary);
  font-size: var(--font-size-heading-medium);        /* 14px */
  line-height: var(--line-height-heading-medium);    /* 20px */
  font-weight: var(--font-weight-semibold);          /* 600 */
  color: var(--color-content-tertiary);
  white-space: nowrap;

  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
}

.segmented-item img,
.segmented-item svg {
  display: block;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);
  flex-shrink: 0;
}

/* Selected */
.segmented-item.active,
.segmented-item[aria-selected="true"] {
  background: var(--color-background-secondary);
  border-color: var(--color-highlight-primary);
  color: var(--color-content-primary);
}

/* Hover (unselected) */
.segmented-item:hover:not(.active):not([aria-selected="true"]):not(:disabled) {
  color: var(--color-content-secondary);
}

/* Disabled */
.segmented-item:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════
   CHECKBOX
   ════════════════════════════════════════════════════ */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);                              /* 4px */
  cursor: pointer;
  user-select: none;
}

/* Hide native checkbox */
.checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visual box */
.checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-10);                   /* 4px */
  background: var(--color-highlight-primary);
  box-sizing: border-box;
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

/* Checkmark icon (hidden by default) */
.checkbox-box::after {
  content: '';
  display: none;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  background-image: url('../icons/Checkmark_Stroke_16.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0);                             /* black icon on teal bg */
}

/* Hover */
.checkbox:hover .checkbox-box,
.checkbox input[type="checkbox"]:focus-visible + .checkbox-box {
  border-color: var(--color-highlight-secondary);
}

/* Checked */
.checkbox input[type="checkbox"]:checked + .checkbox-box {
  background: var(--color-modeless-teal);
  border-color: var(--color-modeless-teal);
}

.checkbox input[type="checkbox"]:checked + .checkbox-box::after {
  display: block;
}

/* Disabled */
.checkbox input[type="checkbox"]:disabled ~ .checkbox-box,
.checkbox input[type="checkbox"]:disabled ~ .checkbox-label {
  opacity: 0.3;
}

.checkbox:has(input:disabled) {
  cursor: not-allowed;
}

.checkbox-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-medium);           /* 12px */
  line-height: var(--line-height-body-medium);       /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-primary);
}

/* ════════════════════════════════════════════════════
   RADIO
   ════════════════════════════════════════════════════ */

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);                              /* 4px */
  cursor: pointer;
  user-select: none;
}

/* Hide native radio */
.radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visual circle */
.radio-box {
  position: relative;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-9999);                 /* full circle */
  background: var(--color-highlight-primary);
  box-sizing: border-box;
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

/* Inner dot (hidden by default) */
.radio-box::after {
  content: '';
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-teal);
}

/* Hover */
.radio:hover .radio-box,
.radio input[type="radio"]:focus-visible + .radio-box {
  border-color: var(--color-highlight-secondary);
}

/* Checked */
.radio input[type="radio"]:checked + .radio-box {
  background: transparent;
  border-color: var(--color-highlight-primary);
}

.radio input[type="radio"]:checked + .radio-box::after {
  display: block;
}

/* Disabled */
.radio input[type="radio"]:disabled ~ .radio-box,
.radio input[type="radio"]:disabled ~ .radio-label {
  opacity: 0.3;
}

.radio:has(input:disabled) {
  cursor: not-allowed;
}

.radio-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-medium);           /* 12px */
  line-height: var(--line-height-body-medium);       /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-primary);
}

/* ════════════════════════════════════════════════════
   SLIDER
   ════════════════════════════════════════════════════ */

/* ─── Single-handle slider (<input type="range">) ─── */

.slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
}

/* Track */
.slider::-webkit-slider-runnable-track {
  height: var(--border-width-medium);               /* 2px */
  border-radius: var(--radius-9999);
  background: linear-gradient(
    to right,
    var(--color-content-primary) 0%,
    var(--color-content-primary) var(--slider-value, 25%),
    var(--color-highlight-primary) var(--slider-value, 25%),
    var(--color-highlight-primary) 100%
  );
}

.slider::-moz-range-track {
  height: var(--border-width-medium);
  border-radius: var(--radius-9999);
  background: var(--color-highlight-primary);
}

.slider::-moz-range-progress {
  height: var(--border-width-medium);
  border-radius: var(--radius-9999);
  background: var(--color-content-primary);
}

/* Thumb */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border-radius: var(--radius-9999);
  background: var(--color-background-primary);
  border: 1px solid var(--color-content-tertiary);
  box-shadow: var(--shadow-small);
  margin-top: -7px;                                  /* center on 2px track */
  cursor: grab;
  transition: box-shadow var(--duration-fast) var(--easing-default);
  box-sizing: border-box;
}

.slider::-moz-range-thumb {
  width: var(--size-40);
  height: var(--size-40);
  border-radius: var(--radius-9999);
  background: var(--color-background-primary);
  border: 1px solid var(--color-content-tertiary);
  box-shadow: var(--shadow-small);
  cursor: grab;
  box-sizing: border-box;
}

.slider::-webkit-slider-thumb:hover,
.slider:focus::-webkit-slider-thumb {
  box-shadow: var(--shadow-medium);
}

.slider:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.slider:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── Threshold / Color slider (div-based, dual handles) ─── */

.slider-threshold {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 16px;
  cursor: pointer;
  user-select: none;
}

.slider-threshold-track {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--border-width-medium);               /* 2px */
  border-radius: var(--radius-9999);
  background: var(--color-highlight-primary);
  overflow: hidden;
}

/* Color gradient track variant */
.slider-threshold.slider-color .slider-threshold-track {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

.slider-threshold-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border-radius: var(--radius-9999);
  background: var(--color-background-primary);
  border: 1px solid var(--color-content-tertiary);
  box-shadow: var(--shadow-small);
  box-sizing: border-box;
  cursor: grab;
  transition: box-shadow var(--duration-fast) var(--easing-default);
  z-index: 1;
}

.slider-threshold-handle:hover,
.slider-threshold-handle:focus-visible {
  box-shadow: var(--shadow-medium);
  outline: none;
}

.slider-threshold-handle:active {
  cursor: grabbing;
}

/* ════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════ */

.progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: var(--radius-9999);
  background: var(--color-highlight-primary);
  overflow: hidden;
}

.progress::-webkit-progress-bar {
  background: var(--color-highlight-primary);
  border-radius: var(--radius-9999);
}

.progress::-webkit-progress-value {
  background: var(--color-modeless-teal);
  border-radius: var(--radius-9999);
  transition: width var(--duration-normal) var(--easing-default);
}

.progress::-moz-progress-bar {
  background: var(--color-modeless-teal);
  border-radius: var(--radius-9999);
}

/* ════════════════════════════════════════════════════
   LOADER
   ════════════════════════════════════════════════════ */

@keyframes loader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader {
  display: inline-block;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border: 1.5px solid var(--color-highlight-secondary);
  border-top-color: var(--color-content-primary);
  border-radius: var(--radius-9999);
  animation: loader-spin var(--duration-slow) linear infinite;
}

.loader-lg {
  width: var(--size-60);                             /* 24px */
  height: var(--size-60);                            /* 24px */
  border-width: 2px;
}

/* ════════════════════════════════════════════════════
   DROPDOWN
   ════════════════════════════════════════════════════ */

.dropdown {
  position: relative;
  display: inline-block;
}

/* ─── Trigger button ─── */

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);                              /* 4px */
  height: var(--size-70);                            /* 28px */
  padding: var(--space-15) var(--space-15);          /* 6px all */
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-15);                   /* 6px */
  background: var(--color-highlight-primary);
  cursor: pointer;
  box-sizing: border-box;

  font-family: var(--font-family-primary);
  font-size: var(--font-size-button-default);        /* 12px */
  line-height: var(--line-height-button-default);    /* 16px */
  font-weight: var(--font-weight-medium);            /* 500 */
  color: var(--color-content-primary);
  white-space: nowrap;

  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

.dropdown-trigger:hover:not(:disabled) {
  background: var(--color-highlight-secondary);
  border-color: var(--color-highlight-secondary);
}

.dropdown-trigger[aria-expanded="true"] {
  background: var(--color-highlight-secondary);
  border-color: var(--color-highlight-secondary);
}

.dropdown-trigger:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Optional leading icon */
.dropdown-icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
}

.dropdown-icon-left img,
.dropdown-icon-left svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Label text (flexible) */
.dropdown-trigger > span {
  flex: 1;
  text-align: left;
}

/* Chevron icon (right side) */
.dropdown-chevron {
  display: block;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  opacity: var(--opacity-50);
  transition: transform var(--duration-fast) var(--easing-default);
}

.dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

/* ─── Popup menu ─── */

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-10));                 /* 4px gap below trigger */
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: var(--space-10) 0;                        /* 4px top/bottom */
  list-style: none;
  background: var(--color-background-secondary);
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-15);                   /* 6px */
  box-shadow: var(--shadow-medium);
  z-index: var(--z-dropdown);
  box-sizing: border-box;
  overflow: hidden;
}

/* Hidden by default — toggle via JS: aria-expanded="true" */
.dropdown-menu[hidden],
.dropdown-trigger[aria-expanded="false"] + .dropdown-menu {
  display: none;
}

/* ─── Menu item ─── */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);                              /* 4px */
  padding: var(--space-10) var(--space-20);          /* 4px 8px */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-medium);           /* 12px */
  line-height: var(--line-height-body-medium);       /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
}

.dropdown-item:hover {
  background: var(--color-highlight-primary);
}

.dropdown-item[aria-selected="true"],
.dropdown-item.active {
  color: var(--color-accent-teal);
}

.dropdown-item[aria-disabled="true"],
.dropdown-item:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dropdown-item img,
.dropdown-item svg {
  display: block;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);
  flex-shrink: 0;
}