[data-theme=material] {
  --vz-font-family-primary: "Inter", sans-serif;
  --vz-font-family-secondary: "Inter", sans-serif;
  --vz-grid-gutter-width: 1.5rem;
  --vz-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
  --vz-shadow-sm: 0 .125rem .25rem rgba(#000, .075);
  --vz-shadow-lg: 0 5px 10px rgba(30, 32, 37, 0.12);
  --vz-element-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
  --vz-body-bg: #f2f2f7;
  --vz-body-bg-rgb: 242, 242, 247;
  --vz-headings-font-weight: 500;
  --vz-btn-font-weight-custom: 400;
  --vz-card-border-width-custom: 0;
  --vz-card-header-border-width: 1px;
  --vz-card-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
  --vz-vertical-menu-item-font-size: 0.925rem;
  --vz-vertical-menu-sub-item-font-size: 0.8125rem;
  --vz-vertical-menu-bg: #fff;
  --vz-vertical-menu-border: #fff;
  --vz-vertical-menu-item-color: #6d7080;
  --vz-vertical-menu-item-bg: rgba(var(--vz-primary-rgb), 0.15);
  --vz-vertical-menu-item-hover-color: var(--vz-primary);
  --vz-vertical-menu-item-active-color: var(--vz-primary);
  --vz-vertical-menu-item-active-bg: rgba(var(--vz-primary-rgb), 0.15);
  --vz-vertical-menu-sub-item-color: #7c7f90;
  --vz-vertical-menu-sub-item-hover-color: var(--vz-primary);
  --vz-vertical-menu-sub-item-active-color: var(--vz-primary);
  --vz-vertical-menu-title-color: #919da9;
  --vz-vertical-menu-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
  --vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
  --vz-sidebar-user-bg: #f1f4f7;
  --vz-sidebar-user-name-text: #32373b;
  --vz-sidebar-user-name-sub-text: #7c7f90;
  --vz-header-bg: #fff;
  --vz-header-border: #e9ebec;
  --vz-header-item-color: #495057;
  --vz-header-item-bg: rgba(53, 119, 241, 0.12);
  --vz-header-item-sub-color: #878a99;
  --vz-topbar-search-bg: #f3f3f9;
  --vz-topbar-user-bg: #f3f3f9;
  --vz-topbar-search-color: #262a2f;
  --vz-page-title-box-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
  --vz-page-title-border: none;
  --vz-footer-bg: #fff;
  --vz-footer-color: #98a6ad;
  --vz-boxed-body-bg: #e5e5ef;
  --vz-timeline-color: var(--vz-secondary-bg);
  --vz-chat-primary-bg: var(--vz-light);
  --vz-chat-secondary-bg: rgba(var(--vz-primary-rgb), 1);
  --vz-chat-secondary-color: var(--vz-white);
  --vz-primary: #4b38b3;
  --vz-primary-rgb: 75, 56, 179;
  --vz-primary-bg-subtle: rgba(75, 56, 179, 0.15);
  --vz-primary-border-subtle: rgba(75, 56, 179, 0.3);
  --vz-primary-text-emphasis: #382a86;
  --vz-secondary: #3577f1;
  --vz-secondary-rgb: 53, 119, 241;
  --vz-secondary-bg-subtle: rgba(53, 119, 241, 0.15);
  --vz-secondary-border-subtle: rgba(53, 119, 241, 0.3);
  --vz-secondary-text-emphasis: #2859b5;
  --vz-danger: #ff0000;
  --vz-danger-rgb: 240, 101, 72;
  --vz-danger-bg-subtle: rgba(240, 101, 72, 0.15);
  --vz-danger-border-subtle: rgba(240, 101, 72, 0.3);
  --vz-danger-text-emphasis: #b44c36;
  --vz-warning: #ffbe0b;
  --vz-warning-rgb: 255, 190, 11;
  --vz-warning-bg-subtle: rgba(255, 190, 11, 0.15);
  --vz-warning-border-subtle: rgba(255, 190, 11, 0.3);
  --vz-warning-text-emphasis: #bf8f08;
  --vz-info: #299cdb;
  --vz-info-rgb: 41, 156, 219;
  --vz-info-bg-subtle: rgba(41, 156, 219, 0.15);
  --vz-info-border-subtle: rgba(41, 156, 219, 0.3);
  --vz-info-text-emphasis: #1f75a4;
  --vz-success: #45CB85;
  --vz-success-rgb: 69, 203, 133;
  --vz-success-bg-subtle: rgba(69, 203, 133, 0.15);
  --vz-success-border-subtle: rgba(69, 203, 133, 0.3);
  --vz-success-text-emphasis: #349864;
  --vz-dark: #212529;
  --vz-dark-rgb: 33, 37, 41;
  --vz-dark-bg-subtle: rgba(33, 37, 41, 0.15);
  --vz-dark-border-subtle: rgba(33, 37, 41, 0.3);
  --vz-dark-text-emphasis: #191c1f;
  --vz-light: #f1f4f7;
  --vz-light-rgb: 241, 244, 247;
  --vz-light-bg-subtle: rgba(241, 244, 247, 0.15);
  --vz-light-border-subtle: rgba(241, 244, 247, 0.3);
  --vz-light-text-emphasis: #b5b7b9;
  --vz-link-color: #4b38b3;
  --vz-link-color-rgb: 75, 56, 179;
  --vz-link-hover-color: #3c2d8f;
  --vz-link-hover-color-rgb: 60, 45, 143;
  --vz-font-10: 0.625rem;
  --vz-font-11: 0.6875rem;
  --vz-font-12: 0.75rem;
  --vz-font-13: 0.8125rem;
  --vz-font-14: 0.875rem;
  --vz-font-base: 0.875rem;
  --vz-font-15: 0.9375rem;
  --vz-font-16: 1rem;
  --vz-font-17: 1.0625rem;
  --vz-font-18: 1.125rem;
  --vz-font-19: 1.1875rem;
  --vz-font-20: 1.25rem;
  --vz-font-21: 1.3125rem;
  --vz-font-22: 1.375rem;
  --vz-font-23: 0.8125rem;
  --vz-font-24: 1.5rem;
  --vz-font-36: 2.25rem;
  --vz-font-48: 3rem;
  --vz-font-weight-light: 300;
  --vz-font-weight-normal: 400;
  --vz-font-weight-medium: 500;
  --vz-font-weight-semibold: 600;
  --vz-font-weight-bold: 700;
}
[data-theme=material][data-sidebar=dark] {
  --vz-vertical-menu-bg: #151529;
  --vz-vertical-menu-border: #151529;
  --vz-vertical-menu-item-color: #a3a6b7;
  --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.15);
  --vz-vertical-menu-item-hover-color: #fff;
  --vz-vertical-menu-item-active-color: #fff;
  --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
  --vz-vertical-menu-sub-item-color: #a3a6b7;
  --vz-vertical-menu-sub-item-hover-color: #fff;
  --vz-vertical-menu-sub-item-active-color: #fff;
  --vz-vertical-menu-title-color: #9b9eb1;
  --vz-twocolumn-menu-iconview-bg: #121222;
  --vz-vertical-menu-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
  --vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
  --vz-sidebar-user-bg: rgba(255, 255, 255, 0.08);
  --vz-sidebar-user-name-text: #fff;
  --vz-sidebar-user-name-sub-text: #adadb4;
}
[data-theme=material][data-topbar=dark] {
  --vz-header-bg: #1C1C36;
  --vz-header-border: #1C1C36;
  --vz-header-item-color: rgba(255, 255, 255, 0.85);
  --vz-header-item-bg: #29294e;
  --vz-header-item-sub-color: #a3a6b7;
  --vz-topbar-user-bg: #2A2A50;
  --vz-topbar-search-bg: rgba(255, 255, 255, 0.05);
  --vz-topbar-search-color: #fff;
}
[data-theme=material][data-sidebar=gradient] {
  --vz-vertical-menu-bg: linear-gradient(to right, var(--vz-primary), var(--vz-success));
  --vz-vertical-menu-border: var(--vz-success);
  --vz-twocolumn-menu-iconview-bg: var(--vz-primary);
}
[data-theme=material][data-sidebar=gradient-2] {
  --vz-vertical-menu-bg: linear-gradient(to right, var(--vz-info), var(--vz-secondary));
  --vz-vertical-menu-border: var(--vz-secondary);
  --vz-twocolumn-menu-iconview-bg: var(--vz-info);
}
[data-theme=material][data-sidebar=gradient-3] {
  --vz-vertical-menu-bg: linear-gradient(to right, var(--vz-info), var(--vz-success));
  --vz-vertical-menu-border: var(--vz-success);
  --vz-twocolumn-menu-iconview-bg: var(--vz-info);
}
[data-theme=material][data-sidebar=gradient-4] {
  --vz-vertical-menu-bg: linear-gradient(to right, #1a1d21, var(--vz-primary));
  --vz-vertical-menu-border: var(--vz-primary);
  --vz-twocolumn-menu-iconview-bg: #1a1d21;
}
[data-theme=material][data-theme-colors=green] {
  --vz-primary: #066b5e;
  --vz-primary-rgb: 6, 107, 94;
  --vz-primary-bg-subtle: rgba(6, 107, 94, 0.15);
  --vz-primary-border-subtle: rgba(6, 107, 94, 0.3);
  --vz-primary-text-emphasis: #055047;
}
[data-theme=material][data-theme-colors=purple] {
  --vz-primary: #5147a3;
  --vz-primary-rgb: 81, 71, 163;
  --vz-primary-bg-subtle: rgba(81, 71, 163, 0.15);
  --vz-primary-border-subtle: rgba(81, 71, 163, 0.3);
  --vz-primary-text-emphasis: #3d357a;
}
[data-theme=material][data-theme-colors=blue] {
  --vz-primary: #2a5fc1;
  --vz-primary-rgb: 42, 95, 193;
  --vz-primary-bg-subtle: rgba(42, 95, 193, 0.15);
  --vz-primary-border-subtle: rgba(42, 95, 193, 0.3);
  --vz-primary-text-emphasis: #204791;
}
[data-theme=material] .card-radio .form-check-label[for=themeColor-01] {
  background-color: #4b38b3;
}
[data-theme=material] .card-radio .form-check-label[for=themeColor-02] {
  background-color: #066b5e;
}
[data-theme=material] .card-radio .form-check-label[for=themeColor-03] {
  background-color: #5147a3;
}
[data-theme=material] .card-radio .form-check-label[for=themeColor-04] {
  background-color: #2a5fc1;
}
[data-theme=material] .material-shadow-none {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
[data-theme=material] .material-shadow {
  -webkit-box-shadow: var(--vz-element-shadow) !important;
          box-shadow: var(--vz-element-shadow) !important;
}

.auth-bg-cover {
  background: #ffffff;
}
.auth-bg-cover > .bg-overlay {
  background-image: url("../images/cover-auth.webp");
    width:58%;
    right:auto;
}
.auth-bg-cover .footer {
    color: rgba(0, 0, 0, 1);
}
.text-fucsia {
    color: rgb(236, 0, 140);
}

.cont-text-lines {
    position: relative;
    display: flex;
}

.cont-text-lines .text-lines {
    background-color: rgb(255, 255, 255);
    position: relative;
    padding: 8px 20px;
    margin: 0px auto;
    z-index: 5;
}
.text-lines {
    margin: 0px;
}
.cont-text-lines::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.10);
}

.btn-custom:hover {
    color: var(--vz-btn-color);
    background-color: var(--vz-btn-bg);
    border-color: var(--vz-btn-hover-border-color);
}
.btn-dark:hover {
    color: var(--vz-btn-light-color);
    background-color: var(--vz-btn-light-bg);
    border-color: var(--vz-btn-hover-border-color);
}
.header-profile-user {
  height: 40px;
  width: 40px;
}

.auth-pass-inputgroup { position: relative; }
.auth-pass-inputgroup .password-addon { z-index: 10; pointer-events: auto; }

.w100{
  width: 100% !important;
}

.tw50 { width: 50px; }
.tw70 { width: 70px; }
.tw100 { width: 100px; }
.tw120 { width: 120px; }
.tw150 { width: 150px; }
.tw200 { width: 200px; }

.table>:not(caption)>*>* {
    padding: .95rem .8rem;
}

.btn-action {
    color: #a3a6b7;
    padding:0.5rem 0.1rem;
    display: inline-block;
}
.btn-action:hover {
    color: #333333;
}

th.sort {
  cursor: pointer;
  user-select: none;
  padding-right:30px;
}
.table-card td.sort:last-child, .table-card th.sort:last-child{
  padding-right:30px;
}

.table .sort::before {
  content: "\f0140";
  position: absolute;
  right: 0.5rem;
  top: calc(50% - 8px);
  font-size: 1rem;
  font-family: "Material Design Icons";
  opacity:0.4;
}
.table .sort::after {
  position: absolute;
  right: 0.5rem;
  content: "\f0143";
  font-family: "Material Design Icons";
  font-size: 1rem;
  top: calc(50% - 16px);
  opacity:0.4;
}

.table .sort.asc::after  { opacity: 0.4; }
.table .sort.desc::after { opacity: 1; }

.table .sort.asc::before  { opacity: 1; }
.table .sort.desc::before { opacity: 0.4; }



#spoki-window iframe {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 220px);
}

.fc .fc-timegrid-event { line-height: 1.2; }
.fc .fc-timegrid-event .fc-event-main,
.fc .fc-timegrid-event .fc-event-title,
.fc .fc-event-main-frame {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* quante righe massimo */
  -webkit-box-orient: vertical;
}
/* Alza le righe del timeGrid (settimana/giorno) */
.fc .fc-timegrid-slot {
  height: 36px;              /* prova 28–44px secondo gusto */
}

/* colore diverso */
.fc .dms-event { background-color: #e41515 !important; border-color: #e41515 !important; color: #fff !important; }
.fc .ext-event { background-color: #9ca3af !important; border-color: #9ca3af !important; color: #111 !important; }
/* se usi timeGrid e vuoi più contrasto: */
.fc .fc-timegrid-event .fc-event-main { padding: 2px 4px; }



.image_src { width:48px; height:48px; object-fit:cover; display:block; }
.avatar-fallback {
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; /* rotondo */
  line-height:1; font-size:14px;
}

.listjs-pagination .ellipsis { display: none !important; }


tr.resource-area > td {
    background-color: #f8f9fa;
}

.dashboard-skeleton-overlay {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-skeleton-inner {
    text-align: center;
}

.dashboard-cell-good {
    background-color: #e6f4ea !important;
    color: #0f5132 !important;
}
.dashboard-cell-mid {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}
.dashboard-cell-bad {
    background-color: #fde2e1 !important;
    color: #842029 !important;
}

body #itemList .table-responsive,
body #itemList .table-card{ overflow: visible !important; }
body #itemList .table-scroll-xy{ 
  max-height:65vh; 
  overflow:auto; 
  position:relative; 
}

/* Base: header sticky */
body #itemList .table-scroll-xy thead th{
  position: sticky;
  top: 0;
  z-index: 10;
}
body #itemList .table-scroll-xy thead tr:nth-child(2) th{
  top: var(--thead-row1-h, 36px);
  z-index: 9;
}

body #itemList .table-scroll-xy tbody tr.dashboard-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 8;
}



/* ================================
   CONTAINER SCROLL
================================ */
.table-scroll-xy{
  position: relative;
  overflow: auto;
  max-height: 65vh; /* o quello che vuoi */
}

/* Serve per far funzionare bene sticky + bordi */
.table-scroll-xy table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

/* Ridisegno i bordi tra righe/colonne (che con separate non collassano) */
.table-scroll-xy th,
.table-scroll-xy td{
  background-clip: padding-box;
  border-right: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* bordo sinistro e top (solo per prima riga/colonna visiva) */
.table-scroll-xy tr > :first-child{
  border-left: 1px solid rgba(0,0,0,.08);
}
.table-scroll-xy thead tr:first-child > *{
  border-top: 1px solid rgba(0,0,0,.08);
}

/* =========================
   Z-INDEX LAYERING (chiave)
   =========================
   - Header: sopra tutto
   - Footer totali: sopra colonna
   - Prima colonna: sotto header/footer, ma sopra celle normali
   - Incroci (header+colonna, footer+colonna): sopra tutto
*/

/* HEADER sticky */
.table-scroll-xy thead th{
  position: sticky;
  top: 0;
  z-index: 30;                 /* sopra la colonna */
  background: #f8f9fa;         /* colore header */
}

/* Se hai 2 righe di thead sticky (opzionale)
   Se NON ti serve, puoi ignorare queste due regole.
   Metti top della seconda riga = altezza prima riga via JS/CSS var. */
.table-scroll-xy thead tr:nth-child(2) th{
  top: var(--thead-row1-h, 0px);
  z-index: 30;
}

/* FOOTER sticky (ultima riga totali: la tua classe) */
.table-scroll-xy tbody tr.dashboard-total-row > td{
  position: sticky;
  bottom: 0;
  z-index: 25;                 /* sopra colonna, sotto header */
  background: #f8f9fa;
}

#itemTable tfoot td,
#itemTableBrandNew tfoot td{
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: #fff3cd !important;  /* solido (warning) */
}

/* PRIMA COLONNA sticky (th + td) */
.table-scroll-xy th:first-child,
.table-scroll-xy td:first-child{
  position: sticky;
  left: 0;
  z-index: 20;
  background: #ffffff;
}

/* Incrocio: HEADER + PRIMA COLONNA (deve stare sopra tutto) */
.table-scroll-xy thead th:first-child{
  z-index: 40 !important;
  background: #f8f9fa;
}

/* Incrocio: FOOTER(TOTALI) + PRIMA COLONNA */
.table-scroll-xy tbody tr.dashboard-total-row > td:first-child{
  z-index: 40 !important;
  background: #f8f9fa;
}

#itemTable tfoot td:first-child,
#itemTableBrandNew tfoot td:first-child{
  z-index: 40;
}


/* =========================
   OMBRE "SOFT" SENZA SPEZZATURE
   ========================= */

/* Ombra verticale della prima colonna: meglio su pseudo-elemento della cella sticky.
   Importante: non si spezza se la applichi a tutte le celle: qui la rendiamo molto leggera. */
.table-scroll-xy th:first-child::after,
.table-scroll-xy td:first-child::after{
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 100%;
  pointer-events: none;
  /* ombra leggera */
  background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity: .35;
}

/* Ombra sotto header */
.table-scroll-xy thead::after{
  content:"";
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 35;
  /* shadow molto soft */
  box-shadow: 0 6px 10px rgba(0,0,0,.06);
}

/* Ombra sopra footer/totali */
.table-scroll-xy tbody tr.dashboard-total-row{
  box-shadow: 0 -6px 10px rgba(0,0,0,.06);
}

/* Evita "stacchi" visivi sulle celle sticky (soprattutto incroci) */
.table-scroll-xy thead th,
.table-scroll-xy tbody tr.dashboard-total-row > td,
.table-scroll-xy th:first-child,
.table-scroll-xy td:first-child{
  /* aiuta contro artefatti */
  background-clip: padding-box;
}

/* (facoltativo) rende più pulito su bootstrap */
.table-scroll-xy .table > :not(caption) > * > *{
  box-shadow: none;
}


.apex-tooltip-clean{
  padding: 10px 12px;
  font-size: 13px;
  min-width: 240px;
}

.apex-tooltip-clean .tooltip-title{
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}

.apex-tooltip-clean .tooltip-row,
.apex-tooltip-clean .tooltip-subrow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  white-space: nowrap;
}

.apex-tooltip-clean .tooltip-row{
  padding-top: 6px;
}

.apex-tooltip-clean .tooltip-label{
  font-weight: 600;
  text-align:left;
}

.apex-tooltip-clean .tooltip-value{
  font-weight: 700;
  text-align:right;
}

.apex-tooltip-clean .tooltip-subrow{
  margin-top: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.apex-tooltip-clean .tooltip-sublabel{
  font-size: 12px;
  opacity: .75;
  text-align:left;
}

.apex-tooltip-clean .tooltip-subvalue{
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
  text-align:right;
}

.card-kpi.card-title {
  font-size: 24px;
  font-weight: bold;;
}

.border-radius {
  border-radius: 20px;
}

/* ===== Skeleton shimmer ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ecef;         /* base */
  border-radius: .5rem;
  height: 14px;
  width:100%;
}

/* la “luce” che scorre */
.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 45%,
    transparent 90%
  );
  animation: skeleton-shimmer 1.1s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}


tr.stock-details > td{
  padding: 0 !important;
  border-top: 0 !important;
}

.stock-acc{
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.stock-acc-inner{
  margin: 0;
  padding: 1rem;
  background: rgba(64, 81, 137, .05);
}

tr.stock-row.is-open{
  background: rgba(64, 81, 137, .0);
}


.lead-conversation-wrap .badge {
  font-size: 11px;
}

.lead-conversation-wrap .border {
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}


/*
#stockTableWrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#stockTableWrap table{
  min-width: 1200px;
}

#stockTableWrap{
  overflow-x: auto;
}

#stockTableWrap th:first-child,
#stockTableWrap td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
}

#stockTableWrap th:nth-child(2),
#stockTableWrap td:nth-child(2){
  position: sticky;
  left: 48px;
  z-index: 2;
}

#stockTableWrap td:first-child,
#stockTableWrap td:nth-child(2){
  background: white;
}
*/