/* ==========================================================================
   Controlli dei moduli su Windows, Android e Linux (html.os-other).
   Su Mac, iPhone e iPad restano quelli di Apple.
   ========================================================================== */

/* --- menu a tendina: il <select> vero resta nascosto --- */
.cs-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.cs-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 0 12px; max-width: 100%;
  border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--fill); color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.cs-btn:hover { background: var(--fill-2); }
.cs-btn:active { transform: scale(0.98); }
.cs-btn:focus-visible, .cs-btn[aria-expanded="true"] { border-color: var(--ink-3); outline: none; }
.cs-btn:disabled { opacity: 0.45; cursor: default; }
.cs-btn.nb-input { width: 100%; }
.cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chev { width: 12px; height: 12px; flex: none; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.cs-btn[aria-expanded="true"] .cs-chev { transform: rotate(180deg); }
.ui-menu.cs-menu { max-height: min(360px, calc(100vh - 16px)); }
.ui-menu.cs-menu button { min-height: 38px; }

/* --- tavolozza dei colori --- */
.cs-color {
  position: fixed; z-index: 420; width: 264px; padding: 12px;
  background: var(--raised); color: var(--ink); border: 1px solid var(--stroke-2); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(-4px) scale(0.98); transition: opacity 0.12s, transform 0.16s var(--ease);
}
.cs-color.in { opacity: 1; transform: none; }
.cs-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cs-color-grid button { aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: transform 0.15s var(--ease); }
.cs-color-grid button:hover { transform: scale(1.1); }
.cs-color-grid button.on { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink-2); }
.cs-color-hex { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cs-color-hex .nb-input { flex: 1; min-width: 0; padding: 7px 10px; font-family: var(--mono); font-size: 14px; }
.cs-color-prev { width: 28px; height: 28px; border-radius: 8px; background: var(--c); flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }

/* --- caselle di spunta e scelte --- */
html.os-other input[type="checkbox"]:not(.toggle input),
html.os-other input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 20px; height: 20px; margin: 0; display: inline-grid; place-content: center; vertical-align: middle;
  border: 1.6px solid var(--ink-3); background: transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s var(--ease);
}
html.os-other input[type="checkbox"]:not(.toggle input) { border-radius: 6px; }
html.os-other input[type="radio"] { border-radius: 50%; }
html.os-other input[type="checkbox"]:not(.toggle input)::before {
  content: ""; width: 11px; height: 11px; transform: scale(0);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 70%);
  background: var(--on-solid); transition: transform 0.15s var(--ease);
}
html.os-other input[type="radio"]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; transform: scale(0); background: var(--on-solid); transition: transform 0.15s var(--ease); }
html.os-other input[type="checkbox"]:not(.toggle input):checked,
html.os-other input[type="radio"]:checked { background: var(--solid); border-color: var(--solid); }
html.os-other input[type="checkbox"]:not(.toggle input):checked::before,
html.os-other input[type="radio"]:checked::before { transform: scale(1); }
html.os-other input[type="checkbox"]:not(.toggle input):active,
html.os-other input[type="radio"]:active { transform: scale(0.9); }
html.os-other input[type="checkbox"]:focus-visible, html.os-other input[type="radio"]:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }

/* --- numeri: niente frecce di Windows --- */
html.os-other input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
html.os-other input[type="number"]::-webkit-inner-spin-button,
html.os-other input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- cerca: niente "x" di sistema --- */
html.os-other input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 14px; width: 14px; border-radius: 50%; cursor: pointer;
  background: var(--ink-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 4l4 4M8 4l-4 4' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* --- barre di scorrimento sottili e arrotondate --- */
html.os-other { scrollbar-color: var(--ink-4) transparent; scrollbar-width: thin; }
html.os-other ::-webkit-scrollbar { width: 10px; height: 10px; }
html.os-other ::-webkit-scrollbar-track { background: transparent; }
html.os-other ::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html.os-other ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); }
html.os-other ::-webkit-scrollbar-corner { background: transparent; }

/* --- selezione del testo e campi in evidenza --- */
html.os-other ::selection { background: rgba(41, 151, 255, 0.28); }

/* i menu a comparsa stanno sopra le finestre (es. tendine dentro un modulo) */
.ui-menu { z-index: 450; }