/* /public_html/assets/css/ui-controls-inputs-selects.css */
/* =========================================
   UI CONTROLS (inputs + native selects)
   ========================================= */

:root{
  --ui-control-h: var(--ui-btn-h, 44px);
  --ui-control-pill: var(--radius-pill, 999px);
}

/* Base commune */
.ui-input,
.ui-select{
  height: var(--ui-control-h);
  min-height: var(--ui-control-h);

  border-radius: var(--ui-control-pill);
  border: 1px solid var(--btn-border, color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%));

  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.55), transparent 55%),
    color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);

  color: var(--color-text);

  padding: 0 1.15rem;

  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;

  box-shadow: var(--shadow-subtle);

  transition:
    box-shadow 150ms ease-out,
    border-color 150ms ease-out,
    filter 150ms ease-out,
    transform 110ms ease-out;
}

.ui-input:focus,
.ui-select:focus{ outline: none; }

.ui-input:focus-visible,
.ui-select:focus-visible{
  border-color: color-mix(in srgb, var(--theme-primary) 55%, var(--color-border-subtle));
  box-shadow: 0 0 0 2px var(--ui-focus-ring), var(--shadow-subtle);
}

/* pas de translateY */
.ui-input:hover,
.ui-select:hover{
  transform: none;
  filter: brightness(1.02);
}

/* ---------- Select natif ---------- */
.ui-select{
  appearance: none;
  -webkit-appearance: none;

  padding-right: 2.6rem;

  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 14px;
}

html:not([data-theme="dark"]) .ui-select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* iOS/Safari : neutraliser l'apparence native */
.ui-input{
  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.ui-input[type="number"]{
  -moz-appearance: textfield;
}
.ui-input[type="number"]::-webkit-outer-spin-button,
.ui-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.ui-input::placeholder{
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ui-input:disabled{
  opacity: 0.7;
  cursor: not-allowed;
  filter: grayscale(0.08);
}

.ui-input.is-full{ width: 100%; }

/* Dark */
html[data-theme="dark"] .ui-input,
html[data-theme="dark"] .ui-select{
  color-scheme: dark;

  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.07), transparent 55%),
    color-mix(in srgb, var(--color-surface) 82%, #020617 18%);

  border-color: rgba(148, 163, 184, 0.55);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.22),
    0 14px 34px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .ui-select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .ui-select option{
  background-color: #0b1220;
  color: #e5e7eb;
}