/* ============================================================
   BASE.CSS — Training Design System
   Copia questo file in ogni nuovo progetto come style.css
   Aggiungi stili specifici del progetto in fondo.
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --color-bg:        var(--c-bg);
  --color-sidebar:   var(--c-sidebar);
  --color-border:    var(--c-border);
  --color-border-md: var(--c-track);
  --color-border-lg: var(--c-muted);
  --color-text-muted:   var(--c-muted);
  --color-text-sub:     var(--c-sec);
  --color-text:         var(--c-primary);
  --color-accent:       var(--c-white);
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* --- Scrollbar ---------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-border-md); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-border-lg); }

/* --- Focus -------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-text-sub); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* --- Select ------------------------------------------------- */
select { -webkit-appearance: none; appearance: none; }

/* --- Range slider ------------------------------------------ */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 12px; width: 12px; border-radius: 50%;
  background: var(--color-accent); cursor: pointer; margin-top: -5px;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--color-border-md);
}
input[type="range"]::-moz-range-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--color-border-md); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent); border: 0; cursor: pointer;
}
input[type="range"]:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Color input ------------------------------------------- */
.color-input {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border-md); border-radius: 4px;
  padding: 0; cursor: pointer; background: none; flex-shrink: 0;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-input::-moz-color-swatch { border: none; border-radius: 2px; }

/* --- Toast -------------------------------------------------- */
#toast {
  position: fixed; right: 14px; bottom: 14px;
  background: var(--c-border); border: 1px solid var(--c-track);
  color: var(--c-primary); font-size: 11px;
  padding: 7px 12px; border-radius: 6px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 100;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* --- Canvas container -------------------------------------- */
#canvasWrap { cursor: default; }
#canvasWrap canvas { display: block; }

/* ============================================================
   PROJECT-SPECIFIC — aggiungi sotto questa riga
   ============================================================ */

/* --- Empty state / drop zone -------------------------------- */
#drop.over { border-color: var(--color-text-sub); border-style: solid; }
#drop.gone { display: none; }

/* --- Canvas stack ------------------------------------------- */
#canvasWrap { line-height: 0; }
#canvasWrap canvas { max-width: 100%; max-height: 100%; }
#ui { position: absolute; inset: 0; }

/* --- Toggle button active state ----------------------------- */
button.on {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #000;
}
button:disabled { opacity: 0.32; cursor: not-allowed; }

/* --- Keycap ------------------------------------------------- */
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--color-border-md);
  border-radius: 3px; padding: 1px 4px;
  color: var(--color-text-sub); font-size: 9px;
}

/* --- Select / checkbox -------------------------------------- */
/* ID-level so Tailwind's preflight (injected after this file) can't win */
.sel {
  width: 100%; padding: 6px 26px 6px 8px; font-size: 12px; line-height: 1.4;
  background-color: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border-md); border-radius: 6px; cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease;
  /* chevron, since appearance:none removes the native one */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sel:hover:not(:disabled) { border-color: var(--color-border-lg); }
.sel:disabled { opacity: .4; cursor: not-allowed; }
.sel option { background: var(--color-sidebar); color: var(--color-text); }
input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--color-text);
  cursor: pointer; flex-shrink: 0;
}