/* theme.css - Responsive, tema chiaro/scuro selezionabile */

/* Variabili CSS per i due temi */
:root {
  color-scheme: light dark;

  --color-bg: light-dark(#f6f8fa,#181c22);
  --color-row-bg: light-dark(#f0f0f0b3,#181c22);
  --color-input-bg: light-dark(#fdfcff,#2f3339);
  --color-input-text: light-dark(#222, #dedede);

  --color-gradient-from: light-dark(#fff, #23272f);
  --color-gradient-to: light-dark(#e3e9f0, #000);
  --color-gradient: linear-gradient(135deg, var(--color-gradient-from) 0%, var(--color-gradient-to) 100%);

  --color-main: light-dark(#fff, #181c22);
  --color-text: light-dark(#222, #f8fafc);
  --color-text-sel: light-dark(#fc0, #9d875d);
  --color-label: light-dark(#555, #f0f0f0);
  --color-border: light-dark(#e0e0e0, #444);

  --color-mask-text: light-dark(#475872, #503750);
  --color-mask-bg-l: light-dark(#bbc2ed66, #00f1);
  --color-mask-bg-d: light-dark(#8a92b966, #fff1);
  --color-mask-bg: repeating-linear-gradient(-45deg, var(--color-mask-bg-l), var(--color-mask-bg-l) 10px, var(--color-mask-bg-d) 10px, var(--color-mask-bg-d) 20px );

  --color-upload-bg: light-dark(#dfd6, #37433b);

  --color-upload-helper-bg: light-dark(#f2e9da,#4a4034);
  --color-upload-helper-text: light-dark(#222, #dedede);
}



body {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--color-gradient);
  color: var(--color-text);
  transition: background 0.5s, color 0.5s;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 100%;
  max-height: 35vh;
  width: 100%;
  max-width: 50vw;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: -1;
  background: transparent url(../img/logo.png) no-repeat left bottom / contain;
  opacity: 0.3;
  filter: blur(2px);
}

/* Tema scuro */
/* body.theme-dark {
  background: var(--color-gradient);
  color: var(--color-text);
}

body.theme-dark section.main {
  background: var(--color-main);
  color: var(--color-text);
}

body.theme-dark section.main .row {
  background: linear-gradient(135deg, #ffe2, #eff1);
  border-color: var(--color-border);
}

body.theme-dark section.main .row:hover { box-shadow: 0 0 3rem #fff2 inset; }

body.theme-dark section.main p label {
  color: var(--color-label);
} */

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  background: #23272f;
  border-color: var(--color-border);
  border-radius: 2rem;
  padding: 0.3rem 1rem;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s;
}
/* body.theme-dark .theme-toggle {
  background: #eee;
  border: 1px solid var(--color-border);
  color: #f8fafc;
} */

/* Icone SVG inline come background */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-toggle .icon-sun {
  background-image: url('data:image/svg+xml;utf8,<svg fill="orange" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/><g stroke="orange" stroke-width="2"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></g></svg>');
}
.theme-toggle .icon-moon {
  background-image: url('data:image/svg+xml;utf8,<svg fill="gold" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 0111.21 3a7 7 0 100 14 9 9 0 009.79-4.21z"/></svg>');
}

/* Mostra solo l'icona corretta */
.theme-toggle .icon-moon { display: inline-block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
[data-theme="dark"]  .theme-toggle .icon-sun { display: inline-block; }

/* Layout principale */
section.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  /* background: var(--color-main-light); */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background 0.5s;
}

/* Titoli */
section.main h1, section.main h2,
section.main h1, section.main h3,
section.main h1, section.main h4 {
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.03em;
}
section.main h1 { font-size: 2.2rem; }
section.main h2 { font-size: 1.4rem; color: #888; }
section.main h3 { font-size: 1.2rem; color: #999; }
section.main h4 { font-size: 1.1rem; color: #999; }

section.main .row[data-rowtype="h1"],
section.main .row[data-rowtype="h2"],
section.main .row[data-rowtype="h3"],
section.main .row[data-rowtype="h4"],
section.main .row[data-rowtype="h5"] { margin: 1rem; background: transparent !important; border: 0 solid white !important; box-shadow: unset !important; }

section.main .row {
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  max-width: 1000px;
  margin: 0.5rem auto;
  background: var(--color-row-bg);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  border: 1px solid var(--color-border);
  transition: background 0.5s, border 0.5s;
  padding: 0.5rem 1rem;
  position: relative;
}
section.main .row:hover { box-shadow: 0 0 3rem #ddd inset; }

section.main .helper { display: inline-block; width: 100%; padding: 0 0.5rem; font-size: 75%; }
section.main .helper[title=""]  { display: none; }

section.main hr {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}

section.main .row > * { margin: 0; }

/* Paragrafi con label a sinistra e campo a destra */
section.main p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Label a sinistra */
section.main p label {
  flex: 0 0 40%;
  text-align: left;
  color: var(--color-label);
  font-weight: 500;
  margin-right: 1.5rem;
  font-size: 1rem;
  transition: color 0.5s;
}
body.theme-dark section.main p label {
  color: var(--color-label);
}

/* Campo a destra */
section.main p > *:not(label) {
  flex: 1 1 60%;
  text-align: left;
  font-size: 1rem;
  color: var(--color-input-text);
  background: var(--color-input-bg);
  border: none;
  outline: none;
}

/* Responsive */
@media (max-width: 700px) {
  section.main p {
    flex-direction: column;
    align-items: stretch;
    padding: 0.7rem 0.5rem;
  }
  section.main p label {
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: left;
    width: 100%;
  }
  section.main p > *:not(label) {
    text-align: left;
    width: 100%;
  }
}

/* Scroll solo verticale */
section.main {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Facoltativo: stile per textarea, input, ecc. */
section.main input, section.main textarea, section.main select {
  font-size: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: #222;
  transition: background 0.5s, color 0.5s, border 0.5s;
}

section.main textarea { max-height: 10em; }

body.theme-dark section.main span { background: transparent; }

body.theme-dark section.main input,
body.theme-dark section.main textarea,
body.theme-dark section.main select {
  background: #666;
  color: #f8fafc;
  border-color: var(--color-border);
}

section.main :input:read-only { cursor: not-allowed; }
section.main .row[data-required="1"]::after { content: "*"; color: red; position: absolute; top: 0; right: -1rem; font-size: 1.5rem; font-weight: bold; }

/** AZIONI DI SALVATAGGIO E INVIO **/
section.main .action_row { margin-block: 4rem; padding-block: 2rem; display: flex; justify-content: center; flex-flow: row wrap; gap: 1rem 5rem; background: unset; box-shadow: unset; border: 0 solid white; position: sticky; bottom: 0; z-index: 100}
section.main .action_row::before { content: ""; position: absolute; left: -100vw; width: 300vw; height: 100%; background: #eeea; z-index: 0; transition: all 0.3s; }
section.main .action_row:hover { background-color: #fffa; box-shadow: 0 0 0 0.5rem #fff6, 0 0 0 1rem #fff3, 0 0 0 2.15rem #fff3 }

section.main button {
  padding: 0.5rem 1.5rem;
  font-size: 1.3rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  font-weight: bold;
  position: relative;
  z-index: 1;
}

section.main button i,
section.main button svg { width: 2rem; margin-right: 1rem; vertical-align: middle; }

section.main button.save { background: #bbe6ca; color: #538764; border-color: currentcolor; }
section.main button.send { background: #e6d6bb; color: #846837; border-color: currentcolor; }

section.main button:hover { transform: scale(1.1); cursor: pointer; }

section.main button.send.disabled,
section.main button.send.disabled:hover { transform: none !important; filter: grayscale(0.8); opacity: 0.6; }

section.main .action_row em
{ color: red;
  font-size: 1rem;
  font-weight: bold;
  flex: 1 0 100%;
  text-align: center;
  z-index: 1;
}
section.main .action_row em i { font-size: 2rem; line-height: 1rem; vertical-align: bottom; }

/** FINE - AZIONI DI SALVATAGGIO E INVIO **/


.focus_on_it { outline: 3px solid #fc06; }
.error[data-rowtype="file"],
.error .focus_on_it { outline: 5px solid #f006; }


#log_area {position: absolute; top: 10px; left: 10px; z-index: 999999999999999; width: 50vw; min-height: 250px; max-height: 80vh; overflow-y: auto; background: #ccc; padding: 0.5%; border-radius: 10px; border: 2px solid grey; display: none; }
#log_area p { margin: 0.25rem 0.15rem;}



.upload_main_box    { display: flex; flex-direction: column; gap: 0.5rem; background: unset !important; }

.upload_box         { padding: 2%; border: 2px dashed var(--color-border) !important; border-radius: 20px; min-height: 100px; max-height: 200px; overflow: hidden; overflow-x: auto; background: var(--color-upload-bg); overflow-y: auto; position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; }
.upload_box input   { display: inline-block; width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; z-index: 3; cursor: pointer; }
.upload_box::after   { content: " [" attr(data-count) " di " attr(data-file-max-num) "]"; display: inline-block; position: absolute; top: 2px; left: 5px;  width: calc(100% - 10px); height: calc(100% - 5px); background: transparent url(../upload/img/upload_128_light.png) no-repeat 50% -5px / 128px; font-size: 12px; font-weight: bold; color: #262; text-align: right; }
.upload_box.multiple::before  { content: "Clicca qui per scegliere uno o più file o trascinali qui per caricarli"; position: absolute; bottom: 3px; left: 0; display: inline-block; width:100%; color: grey; font-size: 10pt; font-weight: bold; text-align: center; line-height: 1.2em; }
.upload_box::before  { content: "Clicca qui per scegliere un file o trascinalo qui per caricarlo"; position: absolute; bottom: 3px; left: 0; display: inline-block; width:100%; color: grey; font-size: 10pt; font-weight: bold; text-align: center; line-height: 1.2em; }
.upload_box.is-dragover { box-shadow: 0 0 80px -20px orange inset; }

.upload_box_helper { font-weight: bold; font-size: 75%; font-style: italic; padding: 0.25rem; padding-left: 40px; color: var(--color-label); background: var(--color-upload-helper-bg) url(../img/icons8-idea-100.png) no-repeat 2px center / 32px; border-radius: 1em; }

.upload_box.disabled::after,
.upload_box.disabled input   { cursor: not-allowed !important; }
/* .upload_box.disabled::after  { content: " [max n. " attr(data-file-max-num) " file caricabili]"; cursor: not-allowed !important; } */
.upload_box.disabled::before { content:"Area upload disabilitata"; cursor: not-allowed !important; }

.upload_box.hasMaxFile::after,
.upload_box.hasMaxFile::before { display: none; }

.upload_box.hasMaxFile input[type="file"],
.upload_box.hasMaxFile input[type="file"] { display: none; }

.upload_box .file {
  display: flex;
  padding: 0.5rem;
  box-sizing: border-box;
  gap: 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  cursor: pointer;
  position: relative;
  z-index: 5;
  background: #fff6;
  box-shadow: 0 0 10px #fc06 inset;
}
.upload_box .file label     { flex: 1 1 auto; font-size: 0.9rem; color: var(--color-text); cursor: pointer; }
.upload_box .file input.raw { display: none; }
.upload_box .file .icona {
  flex: 0 0 auto;
  margin-right: 3rem;
  width: 1.5rem;
  height: 1.5rem;
  transform: scale(1.5);
  cursor: pointer;
}
.upload_box .file .remove {
  flex: 0 0 auto;
  display: inline-block;
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent url(../img/delete_128r.png) no-repeat center / 100%;
  cursor: pointer;
  opacity: 0.8;
}

.upload_box .file .download {
  flex: 0 0 auto;
  display: inline-block;
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent url(../img/download_128.png) no-repeat center / 100%;
  cursor: pointer;
  opacity: 0.8;
  position: relative;
}

.upload_box .file.file_not_found { border-right: dashed; }

.upload_box .file.file_not_found .download { filter: grayscale(0.5); opacity: 0.5; }
.upload_box .file.file_not_found .download:after { content: "!"; position: absolute; bottom: 0; right: -2px; font-size: 20px; font-weight: bold; color: red; }

.upload_box .file .download:hover,
.upload_box .file .remove:hover { opacity: 1; transform: scale(1.2); transition: all ease-in-out 0.1s; }


@function --light-dark(--light, --dark) {
    result: var(--light);

    @media (prefers-color-scheme: dark) {
        result: var(--dark);
    }
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }


.overlay-loading-mask
{ position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  background: var(--color-mask-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay-loading-mask span.msg {
    line-height: 1em;
    flex: 1 0 auto;
    color: var(--color-mask-text);
    --hue: 0;
    text-shadow: 0 0 50px hsl(var(--hue) 50% 50%), -0.15vw -0.15vw 0 #fff, 0.15vw -0.15vw 0 #fff, -0.15vw 0.15vw 0 #fff, 0.15vw 0.15vw 0 #fff;
    font-family: Ubuntu, Arial;
    font-size: 7vw;
    font-weight: bold;
    text-align: center;
    background: transparent url(../img/white_128.png) no-repeat bottom center / 9vw;
    padding-bottom: 10vw;
    animation: rainbow 10s linear infinite;
}


@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@keyframes rainbow {
  from {
    --hue: 0;
  }
  to {
    --hue: 360;
  }
}


.jConfirm
{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  background: var(--color-gradient);
  border: 2px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 3rem;
  max-width: 90vw;
  width: 400px;
  padding-bottom: 7rem;
  outline: 10px solid #8f84;
}
.jConfirm h1,
.jConfirm h2,
.jConfirm h3 { margin-top: 0; }

.jConfirm h1 { text-shadow: 0 0 0.5rem #8f8; }
.jConfirm p  { font-size: 110%; text-decoration: underline; text-align: center; color: light-dark(#b33, #f88); text-shadow: 0 0 0.25rem currentColor; }

.jConfirm footer
{
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: auto;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
  padding-block: 1rem;
  background: #8f84;
  border-radius: 0.5rem;
}

.jConfirm footer button {
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  background: var(--color-main);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  transition: all 0.3s;
}
.jConfirm footer button.disabled { opacity: 0.8; filter: grayscale(1); cursor: not-allowed; }

.jConfirm footer button svg {
  fill: var(--color-text);
  height: 1.2rem;
  margin-right: 0.5rem;
  vertical-align: bottom;
}
.jConfirm footer button.si { background: #e6d6bb; color: #846837; border-color: currentcolor; transform: scale(1.1); }
.jConfirm footer button.no { transform: scale(0.9); }
.jConfirm footer button.si:hover { transform: scale(1.3); }
.jConfirm footer button.no:hover { transform: scale(1.1); }

.jConfirm_mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

#loadingScreenMask
{ position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background: var(--color-bg) url(../img/blue_128.png) no-repeat center / 128px;
  justify-content: center;
  align-items: center;
}

#loadingScreenMask::after { content: "Caricamento in corso..."; position: absolute; bottom: calc(50% - 128px - 3vh); left: 0; width: 100%; text-align: center; font-size: 3rem; font-weight: bold; color: var(--color-text); opacity: 0.8; }