:root {
  --primary: #278cf8;
  --primary-hover: #166ad9;
  --accent: #007bff;
  --border: #ccc;
  --tab-bg: none;
  --tab-active: var(--accent);
}

h2 {
  margin-left: 20px;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f6f6f6;
  color: #24304a;
  margin: 0;
  margin-left: 210px !important;
  margin-top: 56px !important;
}

header[style], #topbar {
  background: #283a6a !important;
  color: #fff !important;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  font-size: 1.18em;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px #0002;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
}

#sidebar {
  position: fixed !important;
  top: 26px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 210px !important;
  background: #fff;
  border-right: 1px solid #ececec;
  padding-top: 18px !important;
  z-index: 10;
  box-shadow: 1px 0 8px #0001;
  overflow-y: auto;
}

#sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar nav ul li {
  margin-bottom: 2px;
}

#sidebar nav ul li a {
  display: block;
  padding: 11px 22px;
  color: #23386b;
  text-decoration: none;
  font-size: 1.06em;
  border-radius: 5px;
  margin: 0 7px;
  font-weight: 500;
  transition: background .14s, color .14s;
  letter-spacing: 0.03em;
}

#sidebar nav ul li a:hover,
#sidebar nav ul li a.active {
  background: #e7f1ff;
  color: #1865cb;
}

.sidebar {
  width: 230px;
  background: #fff;
  border-right: 1px solid #eee;
  height: 100vh;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  overflow-y: auto;
  box-shadow: 1px 0 7px 0 #eee;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0 0 16px 0;
}

.sidebar > ul > li {
  padding: 9px 18px;
  color: #222;
  cursor: pointer;
  user-select: none;
  transition: background .18s;
  position: relative;
}

.sidebar > ul > li:hover,
.sidebar ul ul li:hover {
  background: #f4f7fb;
}

.sidebar .icon {
  margin-right: 7px;
}

.sidebar .group {
  font-weight: 600;
  margin-top: 10px;
}

.sidebar .group-title {
  display: flex;
  align-items: center;
  font-weight: 400;
  padding: 9px 18px;
  cursor: pointer;
}

.sidebar .chevron {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.2s;
}

.sidebar .submenu {
  display: none;
  background: #f9fafb;
  margin: 0;
  padding-left: 34px;
  font-weight: 400;
}

.sidebar .submenu li {
  font-size: 14px;
  color: #444;
  padding: 6px 0 6px 0;
  border-left: 2px solid #e3e3e3;
  margin-left: 8px;
}

.sidebar .divider {
  border-bottom: 1px solid #e6e6e6;
  margin: 14px 0;
  height: 1px;
  padding: 0;
  background: none;
  list-style: none;
}

.sidebar .group.open > .group-title .chevron {
  transform: rotate(90deg);
}

.sidebar .group.open > .submenu {
  display: block;
}

#main-content, main, .main-content {
  padding: 28px 36px 24px 0;
  margin-left: 0;
  margin-top: 0;
  min-height: 85vh;
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 18px 0 #0001;
  margin: 36px auto 24px auto;
  padding: 34px 38px 28px 38px;
  max-width: 1600px;
  border-top: 4px solid #2196f3;
}

.btn-outline {
  background: none;
  border: 1px solid #2196f3;
  color: #2196f3;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
}

.btn-outline:hover {
  background: #e3f2fd;
}

.btn-sm {
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: 4px;
}

button[type="button"], .btn-annulla, .btn-salva {
  border-radius: 5px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  transition: background .16s, color 0.15s;
}


.btn-annulla {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.btn-annulla:hover {
  background: #f0f5fb;
}

.btn-salva:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1.5px solid #e6e9ef;
  background: #fff;
  gap: 0;
}

.tab-btn {
  border: none;
  background: none;
  padding: 14px 38px 10px 38px;
  font-size: 17px;
  color: #555;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  margin: 0 4px;
  transition: .14s;
}

.tab-btn.active {
  border-bottom: 3px solid #2196f3;
}

.tab-pane {
  display: none;
  padding: 32px 38px 18px 38px;
  margin-top: 18px;
}

.tab-pane.active {
  display: block;
}

.riga, .anagrafica-row, .anagrafica-row-4col, .anagrafica-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.anagrafica-row, .anagrafica-row-4col {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  align-items: center;
}

.anagrafica-row {
  grid-template-columns: 1fr 44px 1fr 44px;
}

.anagrafica-row-4col {
  grid-template-columns: 1fr 38px 1fr 38px;
}

.anagrafica-grid {
  grid-template-columns: 1fr 32px 1.1fr;
  gap: 20px 16px;
  margin-top: 12px;
}

.campo {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
}

.campo input, .campo select, input, select, textarea {
  font-size: 1em;
  padding: 7px 9px;
  border-radius: 4px;
  border: 1px solid #ccd4e1;
  background: #f9fbfe;
  margin-bottom: 6px;
}

.campo label {
  font-size: 13px;
  margin-bottom: 3px;
}

.plus-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 1.3px solid #2196f3;
  color: #2196f3;
  background: white;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: .18s;
  margin-top: -7px;
}

.plus-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #e0e0e0;
  color: #aaa;
  border-color: #ccc;
  filter: grayscale(1);
  pointer-events: none;
}

.btn-outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #e0e0e0;
  color: #aaa;
  border-color: #ccc;
  filter: grayscale(1);
  pointer-events: none;
}

.plus-btn:hover {
  background: #e3f2fd;
}

.plus-btn.filled {
  color: #fff;
  background: #2196f3;
  border: none;
}



table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  margin-top: 12px;
}

th, td {
  border: 1px solid #e4eaf2;
  padding: 7px 10px;
  text-align: left;
  font-size: 0.97em;
}

th {
  background: #f6fafd;
  color: #21336b;
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 210px;
  right: 0;
  z-index: 8;
  background: #fff;
  box-shadow: 0 -2px 18px 0 #0001;
  border-top: 1.2px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 54px 16px 28px;
}

.footer-btns button {
  border: 1.3px solid #2196f3;
  background: white;
  color: #2196f3;
  padding: 8px 19px;
  font-weight: 500;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 10px;
  outline: none;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-btns button:last-child {
  margin-right: 0;
}

.footer-btns button:hover {
  background: #e3f2fd;
}

.totale-box {
  text-align: right;
  min-width: 190px;
}

.totale-label {
  color: #777;
  font-size: 14px;
  margin-bottom: 2px;
}

.totale-euro {
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #222;
}

.popup-filtri {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.10);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-width: 100vw;
}

.filtro-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 36px 0 #0001, 0 1.5px 6px 0 #1976d21a;
  padding: 32px 28px 18px 28px;
  max-width: 435px;
  width: 100%;
  margin: 0;
  animation: filtro-card-pop 0.18s cubic-bezier(.22,.9,.45,1.01);
}

.filtro-card-title {
  font-size: 20.5px;
  color: #1976d2;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 0;
  letter-spacing: 0.01em;
}

.filtro-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  margin-bottom: 16px;
}

.filtro-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.filtro-field label {
  color: #344055;
  margin-bottom: 6px;
  font-size: 15.2px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.filtro-field select {
  border: 1.25px solid #c0c9dd;
  border-radius: 5px;
  padding: 7px 10px;
  background: #f9fafc;
  font-size: 15.5px;
  transition: border-color 0.18s;
  font-family: inherit;
}

.filtro-field select:focus {
  border-color: #1976d2;
  outline: none;
}

.filtro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 24px;
  padding-bottom: 2px;
}

.filtro-actions button {
  background: none;
  border: none;
  color: #1976d2;
  font-weight: 600;
  cursor: pointer;
  font-size: 15.5px;
  padding: 0 11px;
  border-radius: 5px;
  height: 40px;
  line-height: 1;
  transition: color 0.13s, background 0.13s;
}

.filtro-actions button:focus {
  outline: 1.5px solid #1976d2;
}

.filtro-actions .btn-primary {
  color: #fff;
  background: #1976d2;
  font-weight: 700;
  box-shadow: 0 2px 8px 0 #1976d226;
  border-radius: 5px;
  padding: 0 26px;
  margin-left: 9px;
}

.filtro-actions .btn-primary:hover {
  background: #1457a8;
  color: #fff;
}

.filtro-actions button:hover:not(.btn-primary) {
  color: #1976d2;
  background: #f0f6ff;
}

@keyframes filtro-card-pop {
  from { transform: scale(0.98) translateY(14px); opacity: 0.75; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 640px) {
.filtro-card {
  padding: 11px 4vw 8px 4vw;
  min-width: 0;
  max-width: 99vw;
}

.filtro-card-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
}

.popup-filtri {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filtro-card {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 16px #0002;
  padding: 32px 30px 16px 30px;
  min-width: 370px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}

.filtro-card-title {
  font-size: 21px;
  color: #1976d2;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
  margin-top: 0;
  text-align: left;
}

.filtro-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin-bottom: 16px;
}

.filtro-field {
  display: flex;
  flex-direction: column;
}

.filtro-field label {
  color: #3a3e4a;
  margin-bottom: 7px;
  font-size: 15.5px;
  font-weight: 500;
}

.filtro-field select {
  border: 1.2px solid #ccd4e1;
  border-radius: 6px;
  padding: 8px 12px;
  background: #f8f8f8;
  font-size: 16px;
  transition: border-color 0.18s;
}

.filtro-field select:focus {
  border-color: #1976d2;
  outline: none;
}

.filtro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  margin-top: 20px;
  padding-bottom: 6px;
}

.filtro-actions button {
  background: none;
  border: none;
  color: #1976d2;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  padding: 0 12px;
  transition: color 0.14s;
}

.filtro-actions .btn-primary {
  color: #fff;
  background: #1976d2;
  border-radius: 5px;
  padding: 8px 18px;
  border: none;
  margin-left: 14px;
}

.filtro-actions .btn-primary:hover {
  background: #003f7d;
  color: #fff;
}

@media (max-width: 680px) {
.filtro-card {
  padding: 14px 7vw 10px 7vw;
  min-width: 0;
}

.filtro-card-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}
}

.scheda-tab {
  display: none;
}

.scheda-tab.visibile {
  display: block;
}

.tab-container {
  display: flex;
  border-bottom: 2px solid #eee;
  padding: 12px 10px;
  gap: 2px;
  justify-content: right;
}

.tab {
  padding: 8px 20px;
  background: #f6faff;
  border: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.1em;
  color: #333;
  margin-right: 6px;
}

.tab.attiva {
  background: #1976d2;
  color: #fff;
}

.anagrafica-grid {
  display: grid;
  grid-template-columns: 140px 1.5fr 1fr;
  gap: 20px 16px;
  align-items: center;
}

.anagrafica-label {
  font-size: 1.11em;
  font-weight: 500;
}

.anagrafica-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.anagrafica-field select {
  min-width: 230px;
  max-width: 330px;
  flex: 1;
}

.anagrafica-field input {
  min-width: 140px;
  max-width: 210px;
  flex: 1;
}

.form12 {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  color: #7c8aa5;
  line-height: 1;
  margin-left: 2px;
}

.field .ctrl {
  padding: 10px 12px;
  border: 1px solid #e2e7ef;
  border-radius: 4px;
  background: #fafcfe;
}

.field textarea.ctrl {
  min-height: 42px;
  resize: vertical;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-12 {
  grid-column: span 12;
}

.section-title {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-weight: 600;
  color: #52627a;
  font-size: 14px;
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
}

.field.suffix {
  position: relative;
}

.field.suffix::after {
  content: "▾";
  position: absolute;
  right: 10px;
  bottom: 12px;
  font-size: 12px;
  color: #9aa7bd;
  pointer-events: none;
}

@media (max-width: 980px) {
.span-3,.span-4,.span-6 {
  grid-column: span 12;
}
}

.articoli-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.articoli-field {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.articoli-field label {
  color: #6c7a89;
  font-size: 1em;
  margin-bottom: 6px;
  font-weight: 500;
}

.articoli-field select,
.articoli-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 4px;
  border: 1.2px solid #c3c8d2;
  background: #fcfcfd;
  font-size: 16px;
}

.articoli-search-row {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  margin-top: 26px;
}

#btnCercaArticolo {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 4px;
  background: #e6e7ea;
  color: #555;
  font-size: 1em;
  letter-spacing: 1px;
}

fieldset.articoli-lista {
  margin-top: 26px;
  border: 1px solid #dedede;
  border-radius: 5px;
  padding: 0 10px 10px 10px;
}

fieldset.articoli-lista legend {
  color: #8f9aad;
  font-size: 0.97em;
  padding: 0 7px;
}

#elencoProdottiTrovati {
  color: #b2b5bb;
  font-size: 1.08em;
  padding: 10px 6px;
}

.articoli-crea {
  margin-top: 22px;
  color: #222;
}

.articoli-crea a {
  color: #2196f3;
  text-decoration: none;
  font-weight: 500;
}

.riepilogo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 26px;
}

.riepilogo-field {
  display: flex;
  flex-direction: column;
}

.riepilogo-field label {
  font-size: 14.5px;
  color: #6c7a89;
  font-weight: 500;
  margin-bottom: 6px;
}

.riepilogo-field input {
  padding: 12px 14px;
  font-size: 15.5px;
  border-radius: 4px;
  border: 1.2px solid #c3c8d2;
  background: #fcfcfd;
}

@media (max-width: 780px) {
.riepilogo-grid {
  grid-template-columns: 1fr;
}
}

.condizioni-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 26px;
}

.condizioni-field {
  display: flex;
  flex-direction: column;
}

.condizioni-field label {
  font-size: 14.5px;
  color: #344055;
  font-weight: 500;
  margin-bottom: 6px;
}

.condizioni-field input,
.condizioni-field select,
.condizioni-field textarea {
  padding: 11px 14px;
  font-size: 15.5px;
  border-radius: 4px;
  border: 1.2px solid #c3c8d2;
  background: #fcfcfd;
}

.condizioni-full {
  grid-column: 1 / -1;
}

@media (max-width: 780px) {
.condizioni-grid {
  grid-template-columns: 1fr;
}
}

.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
}

.page-btn {
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor: pointer;
  font: inherit;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}

.page-btn:hover:enabled {
  background: #f6f8fa;
  border-color: #d0d7de;
}

.page-btn:active:enabled {
  transform: translateY(1px);
}

.page-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.page-indicator {
  font-size: .95rem;
  color: #6c7a89;
}

#elencoProdottiTrovati table.tabella.mini {
  font-size: .92em;
  table-layout: fixed;
  width: 100%;
}

#elencoProdottiTrovati th, 
#elencoProdottiTrovati td {
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#elencoProdottiTrovati .paginazione {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#elencoProdottiTrovati .page-btn {
  padding: 4px 10px;
  font-size: .9em;
}

.bottoni-modale {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.tab-bar-fixed {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  z-index: 50;
}

.tab-bar-fixed .tab {
  padding: 8px 18px;
  background: #f6faff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
}

.tab-bar-fixed .tab.attiva {
  background: #1976d2;
  color: #fff;
}

.footer-btns {
  margin-left: auto;
}

.anagrafica-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 20px;
}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}

.grid-3col > div,
.grid-2col > div {
  display: flex;
  flex-direction: column;
}

.grid-3col label,
.grid-2col label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #344055;
}

.grid-3col select, .grid-3col input,
.grid-2col select, .grid-2col input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1.2px solid #c3c8d2;
  background: #fcfcfd;
  font-size: 14px;
  box-sizing: border-box;
}

.condizioni-box {
  border: 1px solid #ddd;
  padding: 14px;
  border-radius: 6px;
  background: #fafafa;
}

.with-plus {
  display: flex;
  align-items: center;
  gap: 6px;
}

body {
  font-family: 'Inter', sans-serif;
}

:root {
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --accent: #6610f2;
}

.card {
  background: white;
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 24px;
}

button, .btn-annulla, .btn-salva {
  padding: 12px 24px;
  font-size: 1.1em;
  border-radius: 8px;
  transition: background 0.25s ease, transform 0.1s ease;
}

button:hover {
  transform: translateY(-1px);
}

* {
  transition: all 0.15s ease-in-out;
}

.tab-btn {
  border-radius: 30px 30px 0 0;
  background: none;
  margin-right: 8px;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 500;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: #2196f3;
}

.btn {
  border: none;
  padding: 10px 18px;
  font-weight: 500;
  border-radius: 6px;
  transition: 0.2s ease-in-out;
}

.btn-blue {
  background-color: #2196f3;
  color: white;
}

.btn-blue:hover {
  background-color: #1976d2;
}

.btn-outline {
  background: none;
  border: 1px solid #ccc;
  color: #333;
}

.btn-outline:hover {
  border-color: #2196f3;
  color: #2196f3;
}

input[type="text"], select, textarea {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

input:focus, select:focus, textarea:focus {
  border-color: #1976d2;
  outline: none;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #eee;
}

.cond-section {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  background: #fff;
  overflow: hidden;
}

.cond-section legend {
  font-weight: 600;
  color: #2196f3;
  padding: 0 6px;
  font-size: 1.1em;
}

.form-row-2col {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.form-row-1col {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.form-row-2col > div {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 6px;
  font-weight: 500;
  color: #444;
}

.collapsible-header {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 18px;
  font-size: 1.05em;
  background: #f5f7fa;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

.collapsible-header:hover {
  background: #eaf2fc;
}

.collapsible-body {
  padding: 18px;
  display: none;
}

.cond-section.open .collapsible-body {
  display: block;
}

input, select, textarea {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border-color 0.2s;
}

input:not(:placeholder-shown), 
textarea:not(:placeholder-shown), 
select:valid {
  border-color: #2196f3;
}

@media (max-width: 768px) {
.form-row-2col {
  flex-direction: column;
}
}

.with-button {
  display: flex;
  gap: 4px;
}

.anag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 24px;
}

input, select {
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

@media (max-width: 768px) {
.anag-grid {
  grid-template-columns: 1fr;
}
}

.anagrafica-container {
  padding: 0 16px;
}

.form-section-title {
  margin: 24px 0 12px;
  font-size: 1.1em;
  font-weight: 600;
  color: #2e3a59;
  border-left: 4px solid #1976d2;
  padding-left: 10px;
}

.form-grid-3col,
.form-grid-2col {
  display: grid;
  gap: 16px 24px;
  margin-bottom: 16px;
}

.form-grid-3col {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.form-grid-2col {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.with-plus {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plus-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.plus-btn:hover {
  background: #125ca0;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:nth-child(odd) {
  background-color: #ffffff;
}

table tr:hover {
  background-color: #eef6ff !important;
}

.input {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

select,
input[type="number"] {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

select:focus,
input:focus {
  border-color: #2196f3;
  outline: none;
}

.condizioni-box {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #eee;
  background: #fafafa;
  border-radius: 8px;
}

.tabella.articoli {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.tabella.articoli th {
  background-color: #f2f6fb;
  color: #333;
  padding: 10px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
}

.tabella.articoli td {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.tabella.articoli tr:nth-child(even) {
  background-color: #fafafa;
}

.tabella.articoli tr:hover {
  background-color: #eef6ff;
}

.tabella.articoli td.money {
  text-align: right;
  white-space: nowrap;
  font-family: monospace;
}

.tabella.articoli td.money.sconto {
  color: #0056b3;
}

.tabella.articoli td.money.totale {
  color: #008000;
  font-weight: bold;
}

.tabella.articoli button.btn-action {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
}

.tabella.articoli button.btn-action.edit {
  color: #007bff;
}

.tabella.articoli button.btn-action.edit:hover {
  color: #0056b3;
}

.tabella.articoli button.btn-action.delete {
  color: #d9534f;
}

.tabella.articoli button.btn-action.delete:hover {
  color: #a94442;
}

.btn-action.view {
  color: #6c757d;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}

.btn-action.view:hover {
  color: #343a40;
}

.grid-2col, .grid-4col, .grid-6col {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

.grid-4col {
  grid-template-columns: repeat(4, 1fr);
}

.grid-6col {
  grid-template-columns: repeat(6, 1fr);
}

.campo.full {
  grid-column: 1 / -1;
}

.sconti-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.campo label {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
  color: #333;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

.sconti-row input {
  width: 60px;
}

.tab-pane {
  padding: 18px 6px;
}

.tabs.mini {
  margin-bottom: 12px;
}

.tabs.mini .tab-btn {
  padding: 6px 14px;
  margin-right: 4px;
  font-size: 13px;
  border-radius: 4px;
  border: none;
  background: #e0e0e0;
  color: #333;
  cursor: pointer;
}

.tabs.mini .tab-btn.active {
  background: #1976d2;
  color: #fff;
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  border: none;
}

.table-wrapper thead {
  background-color: #f0f2f5;
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid #d1d1d1;
}

.table-wrapper td,
.table-wrapper th {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e2e2;
  border: none;
}

.table-wrapper tr:hover {
  background-color: #f9f9f9;
}

.table-wrapper td:last-child {
  white-space: nowrap;
}

.table-wrapper button {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease;
}

.table-wrapper button:hover {
  background-color: #e0e0e0;
}

.table-wrapper button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #007bff50;
}

.money {
  font-weight: 500;
  color: #222;
}

.btn-action.add {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.money.sconto {
  color: #007BFF;
}

.money.totale {
  font-weight: bold;
  color: #28a745;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  background: #f6f6f6;
  padding: 0.75rem 1rem;
}

.search-label {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.search-input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #0d6efd;
  outline: none;
  box-shadow: 0 0 0 2px rgba(13,110,253,0.2);
}

.btn-filtri {
  padding: 0.55rem 1rem;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.btn-filtri:hover {
  background-color: #0d6efd;
  color: #fff;
}

.popup-filtri-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  min-width: 400px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.filtri-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.filtri-grid select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.filtri-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary {
  background-color: #0d6efd;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #f1f1f1;
  color: #000;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#popup-filtri {
  transition: opacity 0.3s ease;
}

.campo-filtro {
  display: flex;
  flex-direction: column;
}

.campo-filtro label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.login-box {
  background: white;
  padding: 32px 36px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 360px;
}

.login-box h2 {
  margin-bottom: 24px;
  text-align: center;
  color: #1976d2;
  font-size: 1.6em;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  margin-bottom: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f1f5ff;
}

.login-box label {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 6px;
  font-size: 0.95em;
}

.radio-fix {
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  top: -1px;
}


.section-title {
  font-weight: bold;
  font-size: 13px;
  margin: 24px 0 8px;
  color: #444;
}

.login-box button {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border: none;
  background: #1976d2;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.login-box button:hover {
  background: #1565c0;
}

#loginMsg {
  color: red;
  margin-top: 10px;
  font-size: 0.9em;
  text-align: center;
}

.tabella-clienti {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background-color: white;
  border: 1px solid #e0e0e0;
}

.tabella-clienti thead {
  background-color: #f2f6fb;
  color: #333;
  font-weight: 600;
}

.tabella-clienti th,
.tabella-clienti td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.tabella-clienti tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabella-clienti tbody tr:hover {
  background-color: #eef6ff;
}

.tabella-clienti td:last-child {
  white-space: nowrap;
}

.tabella-clienti .btn-action {
  background: none;
  border: none;
  font-size: 16px;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tabella-clienti .btn-action.edit {
  color: #007bff;
}

.tabella-clienti .btn-action.edit:hover {
  color: #0056b3;
}

.tabella-clienti .btn-action.delete {
  color: #dc3545;
}

.tabella-clienti .btn-action.delete:hover {
  color: #a94442;
}

.radio-fix {
  transform: translateY(23px);
}

.icon img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

#btnToggleNav {
  display: none;
}

@media (max-width: 1060px) {
#btnToggleNav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 12px;
  border: 1px solid #d0d4e0;
  border-radius: 8px;
  background: #283a6a;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

body.nav-collapsed aside#sidebar {
  display: none !important;
}

body.nav-collapsed {
  margin-left: 0 !important;
}
}

.form12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  gap: 16px;
}

.flex-row .inner {
  flex: 1;
}

.ctrl {
  padding: 6px 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-12 {
  grid-column: span 12;
}

input[type="date"] {
  width: 100%;
  box-sizing: border-box;
}

.input-money {
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

.input-money--total {
  font-size: 1.15em;
  font-weight: 700;
}

#listaBozzeOrdini button[disabled] {
  opacity: .5 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  pointer-events: none;
}

#listaBozzeOrdini button[disabled] .icon img {
  opacity: .6 !important;
  filter: grayscale(1) contrast(.7) !important;
}

#listaBozzeOrdini button[disabled]:hover {
  box-shadow: none !important;
  transform: none !important;
}

.table-wrapper button[disabled] {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(1);
}

.progress-stack {
  max-width: 760px;
  margin: 18px auto 0;
  padding-inline: 8px;
}

.progress-row {
  background: #fff;
  border: 1px solid #e9eef6;
  border-radius: 12px;
  padding: 10px 14px 14px;
  margin: 10px 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.03);
}

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-title {
  font-weight: 600;
  color: #23386b;
}

.progress-percent {
  color: #6b7a8f;
  font-variant-numeric: tabular-nums;
}

.progress-track {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg,#eef3fb,#e8eef8);
  border: 1px solid #e2e8f4;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  border-radius: 999px;
  transition: width .25s ease;
}

.progress-row.total .progress-track {
  height: 8px;
}

.progress-row.total .progress-fill {
  background: linear-gradient(90deg, #8db4ff, var(--primary));
  box-shadow: none;
}

.progress-row.current .progress-track {
  height: 14px;
}

.progress-row.current .progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  box-shadow: 0 1px 6px rgba(37,99,235,.20);
}

.progress-track.is-indeterminate .progress-fill {
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--primary) 20%, var(--primary-hover) 40%, var(--primary) 60%);
  animation: prgShimmer 1.05s linear infinite;
}

.progress-track.is-complete .progress-fill {
  box-shadow: 0 0 0 1px rgba(25,118,210,.15);
}

@keyframes prgShimmer{
  0%{ background-position-x:200%; } 100%{ background-position-x:-20%; }
}

@media (max-width: 520px) {
.progress-stack {
  max-width: 92%;
}
}

.progress-track .progress-fill.is-full {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.progress-row.total   .progress-track,
.progress-row.current .progress-track {
  height: 12px;
}

.progress-row.total   .progress-fill,
.progress-row.current .progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  box-shadow: 0 1px 6px rgba(37,99,235,.20);
}

:root {
  --topbar-h: 56px;
}

.center-vertical {
  min-height: calc(80vh - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.center-vertical .progress-stack {
  margin: 0 auto;
  max-width: 760px;
  width: 100%;
}

@media (max-width: 1060px) {
body {
  margin-left: 0 !important;
  margin-top: 56px !important;
}

#main-content, main, .main-content {
  padding: 18px 16px 120px 16px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.footer-fixed {
  left: 0 !important;
  right: 0 !important;
  padding: 12px 16px !important;
  gap: 10px;
  flex-wrap: wrap;
}

.totale-box {
  min-width: auto;
  text-align: left;
}
}



@media (max-width: 1024px) {
.grid-6col {
  grid-template-columns: repeat(3,1fr) !important;
}

.grid-4col {
  grid-template-columns: repeat(2,1fr) !important;
}

.grid-3col {
  grid-template-columns: repeat(2,1fr) !important;
}

.anagrafica-grid {
  grid-template-columns: 1fr !important;
}
}



@media (max-width: 768px) {
.tabs, .tab-bar-fixed, .tab-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tab-btn {
  padding: 10px 14px;
  font-size: 15px;
}

.tab {
  padding: 8px 12px;
  font-size: 15px;
}

.grid-6col {
  grid-template-columns: repeat(2,1fr) !important;
}

.grid-4col {
  grid-template-columns: 1fr !important;
}

.grid-3col {
  grid-template-columns: 1fr !important;
}

.grid-2col, .form-grid-2col, .form-grid-3col {
  grid-template-columns: 1fr !important;
}

.form12 .span-3,
  .form12 .span-4,
  .form12 .span-6 {
  grid-column: span 12 !important;
}

.search-bar {
  gap: 8px;
}

.search-input {
  flex-basis: 100%;
}

.btn-filtri {
  width: 50%;
}

.popup-filtri .filtro-card,
  .popup-filtri-box {
  max-width: 94vw !important;
  min-width: 0 !important;
  padding: 16px !important;
}

.filtri-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.login-box {
  max-width: 92vw;
  padding: 22px;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.footer-btns button {
  padding: 8px 12px;
  font-size: 14px;
}
}



@media (max-width: 480px) {
.card {
  padding: 16px !important;
}

.tab-btn {
  padding: 8px 10px;
  font-size: 14px;
}
}



@media (max-width: 520px) {
.progress-stack {
  max-width: 92% !important;
}
}



@media (max-width: 1060px) {
#btnToggleNav {
  display: inline-flex !important;
}
}

#popup-filtri {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  padding: clamp(12px, 4vw, 24px);
  z-index: 2000;
  overscroll-behavior: contain;
}

#popup-filtri > div,
#popup-filtri .popup-filtri-box {
  width: min(94vw, 640px) !important;
  max-width: 640px !important;
  min-width: 0 !important;
  padding: clamp(16px, 3.5vw, 28px) !important;
  border-radius: 14px !important;
  box-sizing: border-box;
  max-height: calc(100dvh - 28px - 28px) !important;
  overflow: auto !important;
  background: #fff;
  box-shadow: 0 8px 36px #0001, 0 2px 10px #0002;
}

@supports not (height: 100dvh) {
#popup-filtri > div,
  #popup-filtri .popup-filtri-box {
  max-height: calc(100vh - 28px - 28px) !important;
}
}

.filtri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px 16px;
}

@media (max-width: 520px) {
.filtri-grid {
  grid-template-columns: 1fr !important;
}
}

.campo-filtro select,
.campo-filtro input {
  width: 100%;
}

.filtri-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
.filtri-actions {
  justify-content: stretch;
}

.filtri-actions .btn-primary,
  .filtri-actions .btn-secondary,
  .filtri-actions .btn-danger {
  flex: 1 1 100%;
}
}

.close-btn {
  top: 8px !important;
  right: 8px !important;
  padding: 6px;
  line-height: 1;
}

.ordine-header {
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}

.ordine-riga {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.order-number {
  font-size: 1.7em;
  color: #2196f3;
  font-weight: 600;
}

.order-details {
  font-size: 1em;
  color: #6c7a89;
  font-weight: 400;
}

.visually-hidden-select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.with-plus {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
}

.combo {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.combo-input.ctrl {
  width: 100%;
}

.combo-clear {
  position: absolute;
  right: 5px;
  border: none;
  background: transparent !important;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  color: #000 !important;
  width: 20px;
}

.combo-clear:hover {
  opacity: 1;
}

.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.combo-item {
  padding: 8px 10px;
  cursor: pointer;
}

.combo-item:hover, .combo-item.active {
  background: #f0f4ff;
}

:root {
  --topbar-h: 56px;
  --sidebar-w: 210px;
}

@media (max-width: 1060px) {
body {
  margin-top: var(--topbar-h) !important;
}

body.nav-collapsed {
  margin-left: 0 !important;
}

.footer-fixed {
  left: var(--sidebar-w) !important;
  right: 0 !important;
}

body.nav-collapsed .footer-fixed {
  left: 0 !important;
}
}

#btnToggleNav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 12px;
  border: 1px solid #d0d4e0;
  border-radius: 8px;
  background: #283a6a;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: transform .12s ease;
}

body.nav-collapsed {
  margin-left: 0 !important;
}

body.nav-collapsed aside#sidebar {
  display: none !important;
}

body.nav-collapsed .footer-fixed {
  left: 0 !important;
}

#btnToggleNav:active {
  transform: scale(.96);
}

#sidebar {
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .18s ease;
  will-change: transform;
}

body.nav-collapsed #sidebar {
  transform: translateX(-100%);
  box-shadow: none;
}

body.nav-collapsed aside#sidebar,
body.nav-collapsed nav#sidebar {
  display: none !important;
}

@media (max-width: 1370px) {
#DB,#User {
  display: none;
}
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 210px;
  right: 0;
  z-index: 8;
  background: #fff;
  box-shadow: 0 -2px 18px 0 #0001;
  border-top: 4px solid #2196f3;
  align-items: center;
  justify-content: space-between;
  padding: 16px 54px 16px 28px;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #f9fbfe;
  border: 1px solid #ccd4e1;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 1em;
  color: #333;
}

.combo.combo-disabled .combo-input {
  cursor: not-allowed;
}

.combo.combo-disabled .combo-clear {
  pointer-events: none;
  opacity: .4;
}

#bottone {
  background: transparent !important;
}

#modaleArticolo .modal-card {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

#modaleArticolo .modal-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px;
}

@media (max-width: 1370px) {
#sidebar {
  height: calc(101vh ) !important;
  max-height: calc(101vh - 100px) !important;
  overflow-y: auto !important;
}
}

#sidebar {
  scroll-behavior: smooth;
}

.order-grid-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.order-grid-wrapper input:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.order-grid-wrapper .series {
  flex: 0 0 70px;
  max-width: 80px;
  min-width: 50px;
}

@media (max-width: 768px) {
.order-grid-wrapper {
  flex-direction: row;
  gap: 6px;
}

.order-grid-wrapper .series {
  flex: 0 0 64px;
}
}

.rtf-toolbar {
  display: flex;
  gap: .5rem;
  margin: .5rem 0;
}

.rtf-toolbar button {
  padding: .35rem .6rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
}

.rtf-editor {
  min-height: 140px;
  border: 1px solid #e3e6ea;
  border-radius: .5rem;
  padding: .75rem;
  background: #fff;
  line-height: 1.4;
  overflow: auto;
}

.rtf-editor:focus {
  outline: 2px solid #1e88e5;
}

@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards tr {
  position: relative;
  display: block;
  background: #fff;
  border: 2px solid #d7dbe4;
  border-radius: 22px;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  padding: 12px 64px 12px 14px;
  margin: 12px 0;
  width: 100%;
  box-sizing: border-box;
}

.table-mobile-cards td {
  display: block;
  padding: 4px 0;
  line-height: 1.2;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.table-mobile-cards td::before {
  content: attr(data-label) ": ";
  display: inline;
  font-weight: 600;
  font-size: 12px;
  color: #6b7a91;
  margin-right: 6px;
  letter-spacing: .2px;
}

.table-mobile-cards .card-headline {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.table-mobile-cards tr[data-headline="1"] td[data-label="Data"],
  .table-mobile-cards tr[data-headline="1"] td[data-label="Serie"] {
  display: none;
}

.table-mobile-cards td:last-child {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  background: #fff;
  border: 1.6px solid #d7dbe4;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.table-mobile-cards td:last-child::before {
  content: "";
  display: none;
}

.table-mobile-cards td:last-child a,
  .table-mobile-cards td:last-child button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-wrapper .table-mobile-cards,
  .table-mobile-cards {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.table-mobile-cards thead {
  display: none !important;
}

.table-mobile-cards,
  .table-mobile-cards tbody,
  .table-mobile-cards tr {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.table-mobile-cards tr[data-headline="1"] td[data-label="Serie"] {
  display: block !important;
}
}



@media (orientation:landscape) {
.card-headline {
  display: none;
}
}

#fabNuovoOrdine {
  display: none;
}

@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards td:last-child {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-mobile-cards td:last-child .btn-group-1,
  .table-mobile-cards td:last-child .btn-group-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-mobile-cards td:last-child .btn-group-2 {
  flex-direction: column;
  gap: 8px;
}

.table-mobile-cards td:last-child .btn-group-1 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1.6px solid #d7dbe4;

}

.table-mobile-cards td:last-child button {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 12px;
  border: 1.6px solid #d7dbe4;

  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.table-mobile-cards td:last-child button img {
  max-width: 24px;
  max-height: 24px;
  display: block;
}
}



@media (max-width: 820px) and (orientation: portrait) {
#fabNuovoOrdine {
  position: fixed;
  right: 16px;
  bottom: 84px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1976d2;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
  z-index: 2001;
}

#fabNuovoOrdine:active {
  transform: translateY(1px);
}

#Ordine {
  display: none !important;
}

#versione {
  display: none !important;
}
}



@media (max-width: 820px) and (orientation: portrait) {
table.table-mobile-cards {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.table-mobile-cards thead {
  display: none;
}

table.table-mobile-cards tbody tr {
  display: block;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #e6edf4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,32,60,.04);
}

table.table-mobile-cards tbody tr td {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  padding: 6px 0;
  border: 0 !important;
  white-space: normal;
  word-break: break-word;
}

table.table-mobile-cards tbody tr td::before {
  content: attr(data-label);
  font-weight: 600;
  color: #3a4a5e;
}

table.table-mobile-cards tbody tr td:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

table.table-mobile-cards tbody tr td:last-child > * {
  flex: 0 0 auto;
}

#listaArticoliTrovati table tr > *:nth-child(4),
  #listaArticoliTrovati table tr > *:nth-child(5) {
  display: none !important;
}

#tabellaArticoliOrdini table tr > *:nth-child(5) {
  display: none !important;
}

#tabellaArticoliOrdini table tbody tr td:nth-child(2) {
  max-width: 420px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
}

.btn, .btn-outline, .btn-blue {
  min-width: 44px;
}

@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards tbody tr td:last-child {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
}

.table-mobile-cards tbody tr {
  padding-right: 72px;
}

.table-mobile-cards tbody tr td:last-child button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.6px solid #d7dbe4;
  background: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-mobile-cards tbody tr td:last-child button img {
  max-width: 24px;
  max-height: 24px;
  display: block;
}
}



@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards tbody tr td:last-child .btn-action.add,
  .table-mobile-cards tbody tr td:last-child button.add {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px;
}

.table-mobile-cards tbody tr td:last-child .btn-action.add img,
  .table-mobile-cards tbody tr td:last-child .btn-action.add svg {
  max-width: 20px;
  max-height: 20px;
}

.table-mobile-cards tbody tr td:last-child .btn-action.add i,
  .table-mobile-cards tbody tr td:last-child .btn-action.add span {
  font-size: 20px;
  line-height: 1;
}
}



@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards tbody tr {
  position: relative;
  --actions-w: 56px;
  --actions-gap: 10px;
  padding-right: calc(var(--actions-w) + var(--actions-gap));
}

.table-mobile-cards tbody tr td:last-child {
  position: absolute;
  top: 50%;
  right: var(--actions-gap);
  transform: translateY(-50%);
  width: var(--actions-w);
  min-width: var(--actions-w);
  z-index: 1;
}

.table-mobile-cards tbody tr td:not(:last-child) {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.table-mobile-cards tbody tr td .money {
  min-width: 0;
}
}



@media (max-width: 820px) and (orientation: portrait) {
.table-mobile-cards tbody tr td {
  white-space: normal !important;
}

.table-mobile-cards tbody tr td:not(:last-child) {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.table-mobile-cards tbody tr {
  position: relative;
  --actions-gap: 10px;
  --actions-w: 44px;
  padding-right: calc(var(--actions-w) + var(--actions-gap)) !important;
}

#tabellaArticoli.table-mobile-cards tbody tr,
  #tabellaArticoliOrdini.table-mobile-cards tbody tr {
  --actions-w: 56px;
}

.table-mobile-cards tbody tr td:last-child {
  position: absolute !important;
  top: 50% !important;
  right: var(--actions-gap) !important;
  transform: translateY(-50%) !important;
  width: var(--actions-w) !important;
  min-width: var(--actions-w) !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#listaArticoliTrovati.table-mobile-cards tbody tr td:last-child .btn-action.add,
  #listaArticoliTrovati.table-mobile-cards tbody tr td:last-child button.add {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}
}








/* === FOOTER ACTIONS: max 2 righe, bottoni tutti uguali === */

/* Desktop / tablet: tutti su una riga (5 colonne) */
.footer-btns{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  grid-auto-rows: 44px;                /* altezza uniforme */
}

/* Mobile verticale: max 2 righe → 3 colonne = 3+2 */
@media (max-width: 820px) and (orientation: portrait){
  .footer-btns{
    grid-template-columns: repeat(3, minmax(0,1fr));  /* 3 colonne ⇒ 2 righe con 5 btn */
    grid-auto-rows: 44px;                              /* altezza identica per tutte */
  }
.radio-fix {
  transform: translateY(23px);
  margin-left: 45%;
}
  /* Se in passato abbiamo allargato SALVA a tutta riga, annullo qui */
  .footer-btns > .btn:first-child{ grid-column: auto !important; }
  /* testo un filo più compatto in mobile */
  .footer-btns .btn{ font-size: 13px; }
}

/* stile base uniforme per i bottoni (stessa dimensione) */
.footer-btns .btn{
  width: 100%;
  height: 44px;                       /* altezza fissa = uguali */
  border-radius: 10px;
  border: 1px solid #cfd8e3;
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;                /* non andare a capo */
  overflow: hidden; text-overflow: ellipsis; /* se stringa lunga, ellissi */
}
.footer-btns .btn .icon img{ width: 18px; height: 18px; display:block; }

/* varianti (se già usate) */
.footer-btns .btn-outline{ background:#fff; }
/* NAVBAR MOBILE: layout più "app" e meno triste */
@media (max-width: 820px) and (orientation: portrait) {

  /* Barra un po' più alta e “importante” */
  #topbar {
    padding: 0px 0px !important;
  }

  /* Riga interna: icona sx + titolo centrale + icona/logout dx */
  #topbar > div {
    width: 100% !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  /* Titolo: al centro, può andare su 2 righe */
  #appTitle {
    flex: 1 1 auto;
    margin: 0 8px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;          /* niente ellissi, può spezzare */
    word-break: break-word;
  }

  /* Burger e logout allineati in alto */
  #btnToggleNav,
  #logoutBtn {
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* Logout: icona + testo, ma compatti */
  #logoutBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    min-width: auto;
    font-size: 13px;              /* ripristino testo rispetto al font-size:0 di prima */
  }

  #logoutBtn .icon {
    margin: 0;
  }

  #logoutBtn .icon img {
    height: 20px;
    width: 20px;
    display: block;
  }

  /* Info tecniche (DB, user, versione) nascoste per non appesantire */
  #DB,
  #User,
  #userLabel,
  #versione {
    display: none !important;
  }
}