/* ============================================================== *
 * REDESIGN OTTANIO V2 — FOUNDATION COMPONENTS (introdotto 2026-05-03)
 * Riferimento: docs/redesign/DeskControl Perizie - Handoff Sviluppo.md sez. 3
 *
 * Componenti atomici riusabili: bottoni, input, select, textarea, toggle,
 * stepper, badge, chip, divider.
 *
 * STRATEGIA DUAL:
 *   1. Classi NUOVE prefissate `.rd-*` — per markup nuovo
 *   2. OVERRIDE delle classi legacy (.btn, .btn.sec, .btn.ghost, input/
 *      select/textarea nativi) DENTRO `.rd-scope` — applica il redesign
 *      al markup esistente senza modificarne l'HTML
 *
 * Le sezioni migrate avranno class="rd-scope" sul container; le
 * sezioni legacy non hanno il wrapper e mantengono lo stile precedente.
 * ============================================================== */

/* ====================================================
 * BOTTONI
 * ==================================================== */

/* Base shared: tutti i bottoni redesign */
.rd-btn,
.rd-scope .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--rd-r-7);
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-active);
  user-select: none;
  text-decoration: none;
}
.rd-btn:active,
.rd-scope .btn:active { transform: translateY(1px); }
.rd-btn:focus-visible,
.rd-scope .btn:focus-visible {
  outline: none;
  box-shadow: var(--rd-focus-ring);
}
.rd-btn:disabled,
.rd-scope .btn:disabled,
.rd-btn[aria-disabled="true"],
.rd-scope .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary (default per .rd-btn senza modificatori, default per .btn legacy) */
.rd-btn,
.rd-btn--primary,
.rd-scope .btn,
.rd-scope .btn:not(.sec):not(.ghost):not(.danger):not(.danger-ghost) {
  background: var(--ott-base);
  color: #fff;
}
.rd-btn:hover,
.rd-btn--primary:hover,
.rd-scope .btn:hover,
.rd-scope .btn:not(.sec):not(.ghost):not(.danger):not(.danger-ghost):hover {
  background: var(--ott-soft);
}

/* Ghost — secondario neutro */
.rd-btn--ghost,
.rd-scope .btn.sec,
.rd-scope .btn.ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ott-200);
}
.rd-btn--ghost:hover,
.rd-scope .btn.sec:hover,
.rd-scope .btn.ghost:hover {
  background: var(--ott-50);
  border-color: var(--ott-300);
}

/* Danger ghost — distruttive */
.rd-btn--danger-ghost,
.rd-scope .btn.danger-ghost {
  background: var(--paper);
  color: var(--ott-red);
  border-color: var(--ott-200);
}
.rd-btn--danger-ghost:hover,
.rd-scope .btn.danger-ghost:hover {
  background: rgba(137, 1, 3, 0.05);
  border-color: rgba(137, 1, 3, 0.20);
}

/* Danger pieno */
.rd-btn--danger,
.rd-scope .btn.danger {
  background: var(--ott-error);
  color: #fff;
}
.rd-btn--danger:hover,
.rd-scope .btn.danger:hover {
  background: #b91c1c;
}

/* Icon-only — quadrato 32x32 senza padding orizzontale */
.rd-btn--icon,
.rd-scope .btn.icon {
  width: 32px;
  padding: 0;
}
.rd-btn--icon svg,
.rd-scope .btn.icon svg { width: 14px; height: 14px; }

/* Large — CTA full-width footer */
.rd-btn--lg {
  height: 38px;
  font-size: var(--fs-13);
  padding: 0 16px;
  border-radius: var(--rd-r-8);
}

/* Block (full-width) */
.rd-btn--block { width: 100%; }

/* ====================================================
 * INPUT / SELECT / TEXTAREA
 * ==================================================== */

.rd-input,
.rd-scope input[type="text"],
.rd-scope input[type="search"],
.rd-scope input[type="email"],
.rd-scope input[type="tel"],
.rd-scope input[type="url"],
.rd-scope input[type="password"],
.rd-scope input[type="number"],
.rd-scope input[type="date"],
.rd-scope input[type="time"],
.rd-scope input[type="datetime-local"],
.rd-scope select,
.rd-scope textarea {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: var(--ott-50);
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-7);
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  color: var(--ink);
  line-height: 1.4;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast);
  outline: none;
}

.rd-scope textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.45;
}

.rd-input:hover,
.rd-scope input:hover:not(:disabled):not(:focus),
.rd-scope select:hover:not(:disabled):not(:focus),
.rd-scope textarea:hover:not(:disabled):not(:focus) {
  background: var(--paper);
}

.rd-input:focus,
.rd-scope input:focus,
.rd-scope select:focus,
.rd-scope textarea:focus {
  background: var(--paper);
  border-color: var(--ott-base);
  box-shadow: var(--rd-focus-ring);
}

.rd-input:disabled,
.rd-scope input:disabled,
.rd-scope select:disabled,
.rd-scope textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ott-100);
}

.rd-input::placeholder,
.rd-scope input::placeholder,
.rd-scope textarea::placeholder { color: var(--ott-500); }

/* Errore */
.rd-input.is-error,
.rd-input--error,
.rd-scope input.is-error,
.rd-scope select.is-error,
.rd-scope textarea.is-error {
  border-color: var(--ott-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ott-error) 18%, transparent);
}

/* Mono — codici, lat/lon, mq, percentuali */
.rd-input--mono,
.rd-scope .input--mono,
.rd-scope input.mono,
.rd-scope .mono input {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
}

/* Select — chevron custom (override appearance default) */
.rd-scope select,
.rd-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Field group: label sopra il campo */
.rd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rd-field > .label-caps,
.rd-field > label { margin-bottom: 0; }

/* Input group inline: input + bottone affiancato */
.rd-igrp {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.rd-igrp > .rd-input,
.rd-igrp > input,
.rd-igrp > select { flex: 1; min-width: 0; }
.rd-igrp__suffix {
  display: inline-flex;
  align-items: center;
  background: var(--ott-base);
  color: #fff;
  border-radius: var(--rd-r-7);
  padding: 0 12px;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--ott-base);
  white-space: nowrap;
  transition: background var(--t-fast);
}
.rd-igrp__suffix:hover { background: var(--ott-soft); }
.rd-igrp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--paper);
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-7);
  color: var(--ott-base);
  cursor: pointer;
  transition: background var(--t-fast);
}
.rd-igrp__icon:hover { background: var(--ott-50); }
.rd-igrp__icon svg { width: 13px; height: 13px; }

/* Help text errore sotto il campo */
.rd-error-msg {
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  color: var(--ott-error);
  margin-top: 4px;
  line-height: 1.3;
}

/* ====================================================
 * TOGGLE / SWITCH
 * ==================================================== */

.rd-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}
.rd-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  position: absolute;
}
.rd-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--ott-300);
  border-radius: var(--rd-r-pill);
  transition: background var(--t-base);
  cursor: pointer;
}
.rd-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform var(--t-base);
  pointer-events: none;
}
.rd-toggle input:checked ~ .rd-toggle__track { background: var(--ott-base); }
.rd-toggle input:checked ~ .rd-toggle__thumb { transform: translateX(14px); }
.rd-toggle input:focus-visible ~ .rd-toggle__track { box-shadow: var(--rd-focus-ring); }
.rd-toggle input:disabled ~ .rd-toggle__track { opacity: 0.5; cursor: not-allowed; }

/* ====================================================
 * STEPPER NUMERICO
 * ==================================================== */

.rd-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-7);
  overflow: hidden;
  background: var(--paper);
  width: 88px;
}
.rd-stepper__btn {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ott-50);
  border: 0;
  color: var(--ott-base);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.rd-stepper__btn:hover { background: var(--ott-100); }
.rd-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rd-stepper__input {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 0;
  background: transparent;
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  color: var(--ink);
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.rd-stepper__input::-webkit-outer-spin-button,
.rd-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ====================================================
 * BADGE / CHIP / PILL
 * ==================================================== */

.rd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: var(--rd-r-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.rd-badge--neutral {
  background: var(--ott-100);
  color: var(--ott-base);
}
.rd-badge--mono {
  background: var(--ott-100);
  color: var(--ott-base);
  font-family: var(--ff-mono);
  font-size: var(--fs-10-5);
  font-weight: 600;
}
.rd-badge--ok {
  background: #E6F8F0;
  color: var(--ott-green);
}
.rd-badge--ok::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ott-green);
  display: inline-block;
}
.rd-badge--warn {
  background: #FBF1DC;
  color: var(--ott-warn);
}
.rd-badge--critical {
  background: #FCE7E7;
  color: var(--ott-error);
}
.rd-badge--brand {
  background: var(--ott-red);
  color: #fff;
}

/* Chip — pill alternativa con bordo */
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--rd-r-pill);
  background: var(--paper);
  border: 1px solid var(--ott-200);
  color: var(--ott-500);
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.rd-chip:hover {
  border-color: var(--ott-300);
  color: var(--ink);
}
.rd-chip.is-active,
.rd-chip[aria-pressed="true"] {
  background: var(--ott-base);
  border-color: var(--ott-base);
  color: #fff;
}

/* ====================================================
 * DIVIDER (separator orizzontale + verticale)
 * ==================================================== */

.rd-divider {
  border: 0;
  border-top: 1px solid var(--ott-200);
  margin: var(--sp-12) 0;
}
.rd-divider--dashed {
  border-top-style: dashed;
}
.rd-divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--ott-200);
}

/* ====================================================
 * CHECKBOX / RADIO RIDISEGNATI (dentro rd-scope)
 * ==================================================== */

.rd-scope input[type="checkbox"],
.rd-scope input[type="radio"] {
  /* accent-color gia' settato globalmente in variables.css :64 */
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ====================================================
 * COORDINATE DISPLAY (mono, sfondo soft)
 * ==================================================== */

.rd-coord {
  display: inline-flex;
  gap: 8px;
  padding: 6px 8px;
  background: var(--ott-50);
  border-radius: var(--rd-r-6);
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  color: var(--ott-500);
}
.rd-coord strong {
  color: var(--ott-base);
  font-weight: 600;
}

/* ====================================================
 * FOCUS HELPER GLOBALE
 * ==================================================== */

.rd-scope :focus-visible {
  outline: none;
  box-shadow: var(--rd-focus-ring);
}