:root {
  --sidebar-w: 280px;
  --vns-primary: #EBFF00;
  --vns-primary-10: rgba(235, 255, 0, 0.1);
  --vns-primary-30: rgba(235, 255, 0, 0.3);
  --vns-primary-50: rgba(235, 255, 0, 0.5);
  --vns-primary-70: rgba(235, 255, 0, 0.7);
  --vns-sidebar-bg: #000e23 ;
  --vns-surface-bg: #00152f;
  --vns-light-gray: #495057;
  --sidebar-w: 64px;
  --bs-font-sans-serif: "Oxanium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sb-thumb: var(--vns-primary);
  --sb-track: transparent;
  --sb-size: 10px;          /* spessore */
  --sb-radius: 999px;
  --sb-gap: 3px;            /* “gap” interno */
  --sb-hover: color-mix(in srgb, var(--sb-thumb) 85%, #000 15%);
}

html[data-bs-theme="dark"]{
  --bs-body-bg: var(--vns-sidebar-bg);
  --bs-tertiary-bg: var(--vns-sidebar-bg) !important;
  --bs-card-bg: var(--vns-sidebar-bg);
  --bs-dropdown-bg: var(--vns-sidebar-bg);
  --bs-offcanvas-bg: var(--vns-sidebar-bg);
  --bs-popover-bg: var(--vns-sidebar-bg);
  --bs-border-color: rgba(255,255,255,.15);
  --bs-body-color: #e9ecef;
  --bs-link-color: #e9ecef;
}

.btn-vns{
  --bs-btn-color: #000;                /* testo */
  --bs-btn-bg: var(--vns-primary);     /* bg */
  --bs-btn-border-color: var(--vns-primary);

  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d9ea00;
  --bs-btn-hover-border-color: #d9ea00;

  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c8d700;
  --bs-btn-active-border-color: #c8d700;

  --bs-btn-focus-shadow-rgb: 235,255,0; /* glow focus */
}

/* stato disabilitato: grigio + cursore "divieto" */
.btn-vns:disabled,
.btn-vns.disabled{
  --bs-btn-color: #666;
  --bs-btn-bg: #e9ecef;              /* grigio */
  --bs-btn-border-color: #e9ecef;
  cursor: not-allowed;
  opacity: 1;                         /* evita fade se non vuoi schiarire */
}

/* opzionale: mostra l’icona “divieto” anche su hover */
.btn-vns:disabled:hover,
.btn-vns.disabled:hover{
  cursor: not-allowed;
}
.btn-vns.btn-min {
  font-size: 12px;
  width: 20px;
  height: 20px;
  padding: 0.2rem;
}
*{
  scrollbar-width: thin; /* o var(--sb-width) */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

*::-webkit-scrollbar{ width: var(--sb-size); height: var(--sb-size); }
*::-webkit-scrollbar-track{ background: var(--sb-track); }
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border: var(--sb-gap) solid transparent;
  background-clip: padding-box;
  border-radius: var(--sb-radius);
}

*::-webkit-scrollbar-thumb:hover{ background: var(--sb-hover); }
*::-webkit-scrollbar-corner{ background: transparent; }

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.popover {
    --bs-popover-bg: var(--vns-sidebar-bg);
    --bs-popover-border-color: var(--vns-primary);
    --bs-popover-header-bg: var(--vns-sidebar-bg);
    --bs-popover-header-color: #fff;
    --bs-popover-body-color: #fff;
    --bs-popover-arrow-color: var(--vns-primary);
    --bs-popover-arrow-border: var(--vns-primary);
    box-shadow: 0 1rem 3rem rgba(235, 255, 0, 0.175);
}

.popover-header {
    padding: 9px 5px 5px 5px;
    margin-bottom: 0;
    font-size: 14px;
    color: var(--vns-primary);
    background-color: var(--bs-popover-header-bg);
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius);
}

body { 
  font-family: var(--bs-font-sans-serif);
  background-color: #000e23;
  background-image: linear-gradient(
    -139deg,
    rgba(0,14,35,.25) 0%,
    rgba(141,159,14,.25) 74%,
    rgba(235,255,0,.25) 100%
  );
}

.vns-title {
  color: var(--vns-primary);
  border-bottom: solid 1px var(--vns-primary-50);
}

.vns-text {
  color: var(--vns-primary);
}

.vns-card-text {
  color: var(--vns-primary);
  font-size: 60px;
}

.vns-card-text > span {
  color: #fff;
  font-size: 14px;
}

.vns-card-button {
  justify-content: space-around;
}

.mini-center {
  color: var(--vns-primary);
  font-family: var(--bs-font-sans-serif);
}

.card-bg-icon {
  color: var(--vns-primary-30);
  transform: rotate(321deg);
  zoom: 4;
  float: right;
  margin: -20px 0;
}
.card-body-boxes {
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 100%; 
}
.card-body-boxes-big {
font-size: 50px;
}
.card-body-boxes-min {
font-size: 20px;
}

.column-chart {
  opacity: 0.5;
  border-top: solid 1px #263244;
}
.column-chart:hover {
  opacity: 1;
  transition: all .25s ease;
}

.chart-row{ overflow:hidden; height:0; opacity:0; transition:height .28s ease, opacity .28s ease; }
.chart-row.is-open{ opacity:1; }

/* animazione sul main form */
#main_form.anim-busy {
  transform: scale(0.98);
  opacity: .6;
  transition: transform 160ms ease, opacity 160ms ease;
  pointer-events: none;
}

/* overlay leggero opzionale */
#main_form .busy-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-body-bg, #000);
  opacity: .25;
}

#dash-cards .col{transition:opacity .25s ease,transform .25s ease}
#dash-cards .col.is-hidden{opacity:0;display:none;transform:scale(.98);pointer-events:none}

.device-on  { color: var(--vns-primary); }
.device-off { color: rgba(255,255,255,.5); color:#fff; }
.device-mid { color: #ffc107;; }

.status-pill {
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  background-color: var(--vns-surface-bg);
}

#sidebar { width: var(--sidebar-w); }  
#app-sidebar { overflow: auto; }

#sidebar .nav-link:not(.active) {                             /* icone centrate */
  display: flex; align-items: center; justify-content: center;
  padding: .75rem 0;
  opacity: 0.5;
}

#sidebar .nav-link:hover { opacity: 0.8; color: var(--vns-primary);}
#sidebar .nav-link.active { opacity: 1; background: transparent; color: var(--vns-primary); }

.loading-overlay{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.35);
}
/* card del loader */
.loading-card{
  display: flex; gap: .75rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: .75rem;
  color: var(--vns-primary);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.7);
}

.f10 {
  font-size: 0.5rem;
}

main {
  background-image: url(../img/bg.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drag pver */
.lic-col.drop-over,
.lic-col .lic-list.drop-over{
  outline: 2px dashed var(--bs-primary);
  outline-offset: 2px;
  background: rgba(13,110,253,.06);
}

.lic-list{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start;
}
.lic-list .lic-item{
  display:inline-flex;              /* no full-width */
  flex:0 0 auto;                    /* non allargarti */
  align-items:center; gap:.5rem;
  padding:.25rem .5rem;
  border:1px solid var(--bs-border-color,#ddd);
  border-radius:.5rem;
  background:#fff;
  max-width:100%;
}

/*cam */
#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* Glass base */
.glass {
  background: rgba(255, 255, 255, 0.10);         /* velo trasparente */
  /*border: 1px solid rgba(255, 255, 255, 0.25);*/
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: none;
}

/* Variante più intensa */
.glass-strong {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Dark mode (se usi body.bg-dark o .dark) */
.dark .glass, .bg-dark .glass {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Fallback se il browser non supporta backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong {
    background: rgba(255, 255, 255, 0.85); /* niente blur, solo trasparenza */
  }
}

/* Optional: bordo al passaggio */
.glass:hover { border-color: rgba(255,255,255,.5); }

.table>:not(caption)>*>* { 
  background-color: transparent;
}
.table > tbody > tr:last-child > * {
  border-bottom: 0 !important;
}
/*
Gneric
#ebff00
#73e65c
#00c388
#009a96
#007084
#2f4858

Matching
#ebff00
#99e91a
#32cf35
#00b349
#009658
#007863


Spot
#ebff00
#bdbe85
#f4f3cc
#005248

Classy

#ebff00
#484838
#adac9a
#00f9ff
#00bfc8


Cube
#ebff00
#c0a788
#bebe98


#574b00

*/