/* ============================================================
   CRT CSS
   ============================================================ */
:root {
    --crt-normal-effect:
        0 0 2px  var(--crt-glow),
        0 0 5px  var(--crt-glow),
        0 0 10px var(--crt-softglow);
    --crt-low-effect:
        0 0 2px  var(--crt-glow),
        0 0 2px  var(--crt-glow),
        0 0 8px var(--crt-softglow);
    --crt-strong-effect:
        0 0 4px  var(--crt-bright),
        0 0 8px  var(--crt-glow),
        0 0 14px var(--crt-softglow);
    --crt-shadow-my-effect-large:
        0 0 4px  var(--crt-softglow),
        0 0 8px  var(--crt-softglow),
        0 0 14px var(--crt-glow);
    --crt-shadow-my-effect-close:
        0 0 3px  var(--crt-softglow),
        0 0 5px  var(--crt-softglow),
        0 0 7px var(--crt-glow);
	--crt-smallglow:
		0 0 4px rgba(0, 255, 160, 0.55);

	/* TRASPARENZE */
	--crt-scanline:     rgba(0,255,150,0.08);
	--crt-softglow:     rgba(0,255,120,0.15);

	--crt-boxs-border: 1px solid rgba(0,255,160,0.25);
  
}

html {
  height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgb(109,147,124) 0px,
      rgba(0,0,0,0.51) 2px,
      rgba(255,255,255,0.14) 6px
    ),
    radial-gradient(
      circle at center,
      rgba(155,244,197,0.32) 0%,
      rgba(112,159,134,0.2) 40%,
      rgba(41,157,96,0.15) 70%,
      rgba(62,79,70,0.24) 100%
    ),
    #020202eb;

  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, 100% 100%, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: fixed, fixed, fixed;
}

a {
  text-shadow: var(--crt-shadow-my-effect-close);
}

body {
  background: transparent;
  min-height: 100%;
  filter:
    drop-shadow(0 0 3px rgba(0,255,150,0.30))
    brightness(1.05)
    saturate(1.1) !important;
}


h1, h2, h3 {
  text-shadow: var(--crt-smallglow);
}
h2, h2 a {
  text-shadow: var(--crt-smallglow);
}



/*
.crt-glow-boost,
body,
input, textarea, select,
a,
.eqsl-overlay,
.box, .box_form {
    text-shadow: var(--crt-normal-effect);
}
*/


/* marcato box tecnici */
/*
.box, .box_form {
  box-shadow:
    inset 0 0 12px rgba(0,255,160,0.25),
    0 0 8px rgba(0,255,160,0.20);
}
*/
a:hover {
  text-shadow: 0 0 6px var(--crt-bright);
}

p {
  text-shadow: var(--crt-smallglow);
}

textarea::placeholder {
  text-shadow:
    0 0 1px var(--crt-glow),
    0 0 1px var(--crt-softglow);
}

input.user-touched:invalid,
textarea.user-touched:invalid,
select.user-touched:invalid {
  box-shadow: 0 0 10px var(--crt-bright);
}
/* Campo valido ? ritorna normale */
input.user-touched:valid,
textarea.user-touched:valid,
select.user-touched:valid {
  box-shadow: 0 0 6px var(--crt-glow)33;
}







.back-to-top {
  text-shadow: var(--crt-strong-effect);
}

.Box-Info {
  text-shadow: var(--crt-smallglow);
}

.crt-select-options {
  box-shadow: 0 0 10px var(--crt-mid);
}

/* Scanline dentro il menu */
.crt-select-options::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 150, 0.15) 0px,
    rgba(0, 255, 150, 0.15) 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}



.footer-menu p {
  text-shadow: var(--crt-low-effect);
}

.form-status.error {
  text-shadow: 0 0 6px #ff5577aa;
}

.lbl, lbl-time {
  text-shadow: var(--crt-smallglow);
}

.logbook tr{
  text-shadow: var(--crt-low-effect);
}
.logbook thead th {
  text-shadow: var(--crt-smallglow);
}
.logbook thead th:hover {
  text-shadow: 0 0 6px var(--crt-glow);
}


.master-box-labels{
  text-shadow: var(--crt-smallglow);
}

.menu-display-top a{
  text-shadow: var(--crt-strong-effect)!important;
}

.raw_box,
#terminal_box {
  text-shadow: var(--crt-strong-effect);
}

.raw_box::after,
#terminal_box::after {
  box-shadow: 0 0 2px var(--crt-bright), 0 0 4px rgba(180, 255, 231, 0.45);
}


.row-label {
  text-shadow: var(--crt-smallglow);
}


/*
Produce 4 layer di glow, con questo effetto:
Layer piccolo (2px) ? fa il bordo "fosforoso" attaccato al carattere
Layer largo (10px, colore pieno) ? crea la corona luminosa centrale
Layer largo semitrasparente ? crea l'alone morbido stile CRT
Layer ancora pių morbido e tenue ? arrotonda e sfuma verso l'esterno
Questa struttura č coerente con come brillavano i pixel nei monitor CRT:
nucleo luminoso forte - alone esterno pių diffuso
*/

.smooth {
  text-shadow: var(--crt-smallglow);
}


.sub_title {
  text-shadow: var(--crt-smallglow);
}


.switch-label {
  text-shadow: var(--crt-smallglow);
}


.table-th, .table-td {
  text-shadow: var(--crt-smallglow);
}


.values {
  text-shadow: var(--crt-strong-effect);
}


/* GLITCH */
/* OVERLAY CRT STATIC + GLITCH */
@keyframes crt-shake {
  0% { transform: none; }
  20% { transform: skewX(10deg); }
  40% { transform: skewX(-10deg); }
  60% { transform: skewX(6deg); }
  80% { transform: skewX(-6deg); }
  100% { transform: none; }
}

.crt-distort {
    animation: crt-shake 0.05s linear;
}