/* Norius Mail — кастомные контролы.
   Подключается после app.css, поэтому перекрывает браузерные умолчания:
   скроллбары, чекбоксы, радио, дропдауны, поля, ползунки, выбор цвета. */

/* ---------- Цветовая схема и акцент для всего нативного ---------- */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:where(html) {
  accent-color: var(--c-primary);
  caret-color: var(--c-primary);
}

/* ---------- Ссылки: убираем браузерное подчёркивание ---------- */
:where(a) { color: inherit; text-decoration: none; }
:where(a):focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--shape-xs); }
.text-link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Единая фокус-рамка ---------- */
:where(:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
:where(button, [role="button"], a, input, textarea, select) { -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--c-primary) 32%, transparent); }
::marker { color: var(--c-on-surface-variant); }

/* ---------- Скроллбары в цвете акцента ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-primary) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-primary) 40%, transparent);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: var(--shape-full);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-primary) 65%, transparent); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--c-primary); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-resizer { background: transparent; }

/* ---------- Кастомный дропдаун ---------- */
.picker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--shape-full);
  background: var(--c-surface-low);
  color: var(--c-on-surface);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-short-4) var(--ease-standard),
    border-color var(--dur-short-4) var(--ease-standard),
    box-shadow var(--dur-short-4) var(--ease-standard);
}
.picker:hover { background: var(--c-surface-high); border-color: var(--c-outline); }
.picker:active { background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface-high)); }
.picker[aria-expanded="true"] { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface-low)); }
.picker:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.picker.empty .picker-text { color: var(--c-on-surface-variant); font-weight: 400; }
.picker-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.picker-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  --icon-opsz: 20;
  color: var(--c-on-surface-variant);
  transition: transform var(--dur-medium-1) var(--ease-emphasized), color var(--dur-short-4) var(--ease-standard);
}
.picker[aria-expanded="true"] .picker-arrow { transform: rotate(180deg); color: var(--c-primary); }
.picker.picker-block { display: flex; width: 100%; }
.picker.compose-from { border-radius: var(--shape-sm); background: transparent; border-color: transparent; font-weight: 400; }
.picker.compose-from:hover { background: var(--c-surface-high); }

/* ---------- Чекбоксы и радио без нативной отрисовки ---------- */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--c-on-surface-variant);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-short-3) var(--ease-standard), border-color var(--dur-short-3) var(--ease-standard);
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"])::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--c-on-primary);
  transform: scale(0);
  transition: transform var(--dur-short-4) var(--ease-spring);
  clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 20%, 84% 4%, 39% 70%);
}
:where(input[type="checkbox"]:checked) { background: var(--c-primary); border-color: var(--c-primary); }
:where(input[type="checkbox"]:checked)::after { transform: scale(1); }
:where(input[type="checkbox"]:indeterminate) { background: var(--c-primary); border-color: var(--c-primary); }
:where(input[type="checkbox"]:indeterminate)::after { clip-path: none; border-radius: 2px; height: 2px; transform: scale(1); }
:where(input[type="radio"])::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  transform: scale(0);
  transition: transform var(--dur-short-4) var(--ease-spring);
}
:where(input[type="radio"]:checked) { border-color: var(--c-primary); }
:where(input[type="radio"]:checked)::after { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-primary) 40%, transparent);
  outline-offset: 2px;
}
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: 0.38; cursor: default; }

/* Выключенная функция: зависимые поля видно, но менять их нельзя. */
.field.is-disabled, .switch.is-disabled { opacity: 0.38; pointer-events: none; }
.field.is-disabled .field-input { cursor: default; }

/* ---------- Нативный select: страховка, если где-то остался ---------- */
:where(select) {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 32px 0 var(--sp-3);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--shape-full);
  background-color: var(--c-surface-low);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--c-on-surface);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
}
:where(select) option { background: var(--c-surface-container); color: var(--c-on-surface); }

/* ---------- Поля ввода ---------- */
:where(input, textarea) { caret-color: var(--c-primary); }
:where(input)::placeholder, :where(textarea)::placeholder { color: color-mix(in srgb, var(--c-on-surface-variant) 70%, transparent); }
:where(input):-webkit-autofill,
:where(input):-webkit-autofill:hover,
:where(input):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-on-surface);
  caret-color: var(--c-primary);
  box-shadow: 0 0 0 1000px var(--c-surface-highest) inset;
  transition: background-color 100000s ease 0s;
}
:where(input[type="search"])::-webkit-search-cancel-button,
:where(input[type="search"])::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
:where(input[type="number"]) { -moz-appearance: textfield; appearance: textfield; }
:where(input[type="number"])::-webkit-outer-spin-button,
:where(input[type="number"])::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
:where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator {
  padding: 2px;
  border-radius: var(--shape-full);
  opacity: 0.7;
  cursor: pointer;
}
:where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator:hover {
  background: color-mix(in srgb, var(--c-on-surface) 10%, transparent);
  opacity: 1;
}

/* ---------- Выбор цвета ---------- */
:where(input[type="color"]) {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 2px solid var(--c-outline-variant);
  border-radius: var(--shape-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-short-4) var(--ease-standard), box-shadow var(--dur-short-4) var(--ease-standard);
}
:where(input[type="color"]):hover { border-color: var(--c-primary); box-shadow: var(--elev-1); }
:where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 3px; }
:where(input[type="color"])::-webkit-color-swatch { border: none; border-radius: 6px; }
:where(input[type="color"])::-moz-color-swatch { border: none; border-radius: 6px; }

/* ---------- Ползунок ---------- */
:where(input[type="range"]) {
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  background: transparent;
  cursor: pointer;
}
:where(input[type="range"])::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--shape-full);
  background: color-mix(in srgb, var(--c-primary) 26%, transparent);
}
:where(input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--c-primary);
}
:where(input[type="range"])::-moz-range-track { height: 4px; border-radius: var(--shape-full); background: color-mix(in srgb, var(--c-primary) 26%, transparent); }
:where(input[type="range"])::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--c-primary); }

/* ---------- Прогресс ---------- */
:where(progress) {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border: none;
  border-radius: var(--shape-full);
  background: color-mix(in srgb, var(--c-primary) 20%, transparent);
  overflow: hidden;
}
:where(progress)::-webkit-progress-bar { background: transparent; }
:where(progress)::-webkit-progress-value { background: var(--c-primary); border-radius: var(--shape-full); }
:where(progress)::-moz-progress-bar { background: var(--c-primary); }