/* Modern Professional UI - Base Styles */
:root {
  --primary-color: #2c3e50;
  --secondary-color: #f79800;
  --accent-color: #3498db;
  --success-color: #2ecc71;
  --warning-color: #f1c40f;
  --danger-color: #e74c3c;
  --light-color: #ecf0f1;
  --dark-color: #34495e;
  --text-color: #333;
  --text-light: #7f8c8d;
  --border-radius: 4px;
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

body {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  margin: 0;
  justify-content: space-between;
  font-family: "Roboto Flex", sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}
div {
  border-radius: var(--border-radius);
  /* margin: 2px; */
  box-sizing: border-box;
}
div#top {
  height: 60px;
  background-color: white;
  color: black;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: 10;
}
div#bottom {
  height: 40px;
  position: fixed;
  bottom: 0px;
  background: var(--primary-color);
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  width: 100%;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#middle {
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 100px);
  margin-bottom: 40px;
  gap: 20px; /* Add gap between sidebar and center div */
}
div#left {
  min-width: 250px;
  transition: all 0.4s linear;
  overflow-x: hidden;
  background-color: white;
  box-shadow: var(--box-shadow);
  padding: 5px 0;
  min-height: 100%;
  border-radius: 0;
  transform-origin: left center;
}

/* Right sidebar removed as it's not used */
div#right {
  display: none;
}

div#center {
  flex: 1;
  padding: 20px;
  background-color: white;
  /*box-shadow: var(--box-shadow);*/
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--border-radius);
  overflow-x: auto; /* Add horizontal scrolling if needed */
  transition: max-width 0.4s linear;
  max-width: calc(100vw - 250px); /* Default with expanded sidebar */
}

/* Center div expands when sidebar is collapsed */
#left.collapsed ~ #center {
  max-width: calc(100vw - 60px);
}

/* Center div uses full width when sidebar is hidden (for simple users) */
#middle:has(#left:not(:visible)) #center,
#left[style*="display: none"] ~ #center {
  max-width: 100vw;
  margin-left: 0;
}
.menu {
  margin-bottom: 10px;
  padding: 0;
  border-left: 4px solid transparent;
  transition: var(--transition);
  min-height: 40px; /* Fixed height for consistent vertical alignment */
  display: flex;
  align-items: center;
}
.menu:hover {
  background: rgba(52, 152, 219, 0.1);
  border-left: 4px solid var(--accent-color);
}

/* Selected menu item styling */
.menu.active-menu {
  background: rgba(52, 152, 219, 0.2);
  border-left: 4px solid var(--accent-color);
}

.menu.active-menu div {
  font-weight: 500;
  color: var(--accent-color);
}

.menu.active-menu i {
  color: var(--accent-color);
}
div#logout {
  cursor: pointer;
  color: var(--danger-color);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}
.menu div {
  cursor: pointer;
  padding: 0 15px 0 10px;
  display: flex;
  align-items: center;
  gap: 0; /* Changed from 10px to ensure consistent spacing */
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  transition: padding 0.4s linear, justify-content 0.4s linear;
}

/* Fixed width and alignment for menu icons to ensure consistent positioning */
.menu div i.fa,
.menu div i.fa-solid,
.menu div i.fa-brands,
.menu div i.sidebar-icon {
  width: 30px; /* Fixed width for all icons */
  text-align: center; /* Center the icon within its fixed width */
  display: inline-block;
  margin-right: 8px; /* Consistent spacing between icon and text */
  font-size: 16px; /* Consistent size */
  transition: all 0.4s linear;
}

/* Ensure text is perfectly aligned */
.menu div .sidebar-label {
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.25s linear 0.15s, max-width 0.4s linear; /* Delay opacity fade-in when expanding */
}

/* When collapsed, hide text - reverse logic: fade out first, then shrink width */
#left.collapsed .sidebar-label {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.25s linear, max-width 0.4s linear 0.15s; /* Fade out over 250ms, then delay width shrink by 150ms */
}
div#top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 18px;
  overflow: hidden;
}

/* Header components */
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 20px;
  position: relative;
  color: var(--primary-color);
}

/* Logo clickable style */
.mainlogo {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mainlogo:hover {
  opacity: 0.8;
}

/* Sidebar Icons */
.sidebar-icon {
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: middle;
}
.header-right {
  background-color: var(--primary-color);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: var(--transition);
}

/* Menu styles - margin-bottom already defined in main .menu rule above */

div#logout,
div#pwdchange {
  cursor: pointer;
  padding: 8px 10px;
  margin: 5px 0;
  border-radius: var(--border-radius);
  transition: var(--transition);
  display: flex;
  align-items: center;
}

div#logout:hover,
div#pwdchange:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#center table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 20px;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  overflow: hidden;
}
#center table th,
#center table td {
  border: 1px solid #e0e0e0;
  padding: 8px 15px;
}
.btn {
  border: none;
  cursor: pointer;
  min-width: 100px;
  padding: 8px 16px;
  background: var(--accent-color);
  color: white;
  display: inline-block;
  border-radius: var(--border-radius);
  text-align: center;
  font-weight: 500;
  transition: var(--transition);
  box-shadow: var(--box-shadow);
}
.btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
tr:hover {
  background: rgba(52, 152, 219, 0.1);
}

/* Style for rows with unsaved changes */
tr.unsaved-changes {
  background-color: rgba(241, 196, 15, 0.2); /* Light yellow background */
  transition: background-color 0.3s ease;
}

/* Save button highlight when changes are present */
tr.unsaved-changes .btn.save {
  animation: pulse 1.5s infinite;
  background-color: #27ae60; /* Green to indicate save action */
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(39, 174, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
}

/* Common data table styles */
.data-table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed; /* Ensures consistent cell widths */
}

.data-table th,
table th {
  background-color: var(--primary-color); /* Match users table header color */
  color: white;
  padding: 8px 6px;
  text-align: left;
  font-weight: 500;
}

.data-table td,
table td {
  padding: 6px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* Ensure tables adapt to available space when sidebar collapsed */
#left.collapsed ~ #center table {
  width: 100%;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Force table cells to expand to fill available space */
#center table {
  width: 100%;
  table-layout: auto; /* Allow columns to size based on content */
}

/* Set columns to expand to fill space */
#center table th:not(:last-child),
#center table td:not(:last-child) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the dettagli/details column flexible */
#center table th.p3,
#center table td[f="dettagli"] {
  width: auto; /* Allow this column to grow */
  min-width: 150px;
}

/* Keep actions column fixed width */
#center table th:last-child,
#center table td.commands {
  width: 120px;
  white-space: nowrap;
}

/* Dishes table specific styles */
.dishes-table th,
.dishes-table td {
  line-height: 1.2;
}

.dishes-table td[f="nome"] {
  font-weight: 500;
}

.dishes-table td[f="prezzo"] {
  width: 80px;
  text-align: right;
}

.dishes-table select {
  width: 100%;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
td[contenteditable] {
  /* background: #ffffce78; */
  box-shadow: inset 0px 0px 2px 0px #000;
}
td.commands {
  justify-content: space-around;
  width: 14vw;
}
.daygroup {
  margin-bottom: 2vh;
  overflow: hidden;
  box-sizing: border-box;
}
.daygroup:nth-child(even) {
  background: #f7f7f7;
}
.daygroup:nth-child(odd) {
  background: #d1d1d1;
}

/* Prevent tables from overflowing daygroup */
.daygroup table {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}

.daygroup td,
.daygroup th {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  box-sizing: border-box;
}

.daygroup .canceloptions {
  box-sizing: border-box;
  width: 100%;
}

div#centerhead {
  background: var(--primary-color);
  color: #fff;
  padding: 15px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

#company-selector {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

#company-selector > label:first-child {
  font-weight: bold;
  margin-right: 5px;
}

.company-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--border-radius);
  transition: var(--transition);
  text-transform: none;
  font-weight: normal;
}

.company-radio:hover {
  background: rgba(255, 255, 255, 0.1);
}

.company-radio input[type="radio"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
div.centersubhead {
  padding: 2px;
  font-weight: bold;
}

/* Desktop dish preview styles */
.day-title {
  font-weight: bold;
  padding: 8px;
}

.day-preview-separator {
  display: inline-flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  margin: 0 10px;
  letter-spacing: 0.3em;
  flex-shrink: 0;
}

.day-preview-dishes {
  position: relative;
  margin-top: 8px;
  font-size: 14px;
  text-align: left;
  padding: 0 12px 8px 12px;
  overflow: hidden;
  white-space: nowrap;
}

.day-preview-dishes-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0;
  white-space: nowrap;
}

@keyframes dishScrollAutoDesktop {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(var(--scroll-distance));
  }
  100% {
    transform: translateX(var(--scroll-distance));
  }
}

.day-preview-dishes.has-overflow .day-preview-dishes-wrapper {
  animation: dishScrollAutoDesktop 10s ease-in-out infinite;
}

.preview-dish {
  background-color: rgba(52, 152, 219, 0.15);
  padding: 6px 12px;
  border-radius: 4px;
  color: #333;
  font-weight: 500;
  display: inline-block;
  text-transform: capitalize;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.preview-dish.primo {
  border-left: 3px solid #4dabf7;
}

.preview-dish.secondo {
  border-left: 3px solid #ff6b6b;
}

.preview-dish.contorno {
  border-left: 3px solid #51cf66;
}

/* Desktop-only: border on daygroup container only */
@media (min-width: 601px) {
  .daygroup {
    border: 1px solid #000;
  }
}

/* Dish type badge in expanded table - desktop only */
.dish-type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 8px;
  color: #fff;
  vertical-align: middle;
}

/* Hide badges on mobile - they use colored backgrounds and letters instead */
@media (max-width: 600px) {
  .dish-type-badge {
    display: none;
  }
}

.dish-type-badge.primo {
  background-color: #4dabf7;
}

.dish-type-badge.secondo {
  background-color: #ff6b6b;
}

.dish-type-badge.contorno {
  background-color: #51cf66;
}

.dish-name {
  display: inline;
  vertical-align: middle;
}
th {
  width: auto;
}
th:last-child {
  min-width: 10vw;
  max-width: 10vw;
}
td:last-child {
  text-align: center;
}
/* Collapsible sidebar */
#left.collapsed {
  min-width: 60px;
  width: 60px;
}

#left.collapsed .menu div {
  padding: 0; /* Remove all padding from inner div when collapsed */
  justify-content: center; /* Center the icon */
  text-align: center;
}

/* Hide non-icon elements when collapsed - sidebar-label handled separately with animation */
#left.collapsed span:not(.sidebar-icon):not(.sidebar-label),
#left.collapsed br,
#left.collapsed label,
#left.collapsed input,
#left.collapsed select {
  display: none !important;
}

/* Sidebar toggle button container */
#sidebar-toggle-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
  min-height: 40px;
}

/* Sidebar toggle button */
#sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  color: var(--text-color);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar-toggle:hover {
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--accent-color);
}

/* When sidebar is collapsed, center the toggle button */
#left.collapsed #sidebar-toggle-container {
  justify-content: center;
  padding: 5px;
}

#left.collapsed #sidebar-toggle {
  padding: 8px;
}

/* Form styles */
fieldset {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin: 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-size: 14px;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  outline: none;
}
.error-message {
  color: var(--danger-color);
  font-size: 14px;
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(231, 76, 60, 0.1);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--danger-color);
}

/* Hide error message when empty */
.error-message:empty,
#loginerrormsg:empty {
  display: none;
  padding: 0;
  margin: 0;
  border: none;
}

/* Removed duplicate - using .error-message class instead */

div#pwdforgot {
  cursor: pointer;
  text-align: center;
  color: #000;
  margin-top: 1vh;
}
.pwdrecover,
.pwdchange {
  width: 30vw;
  padding: 1vh;
  border: 1px solid #000;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.info {
  font-style: italic;
  margin: 1vh;
}
div#forgotbtn,
div#changepwdbtn {
  cursor: pointer;
  box-shadow: 1px 1px 3px #000;
  padding: 1vh;
  border-radius: 1vh;
}
div#forgotbtn:hover,
div#changepwdbtn:hover {
  box-shadow: inset 1px 1px 3px #000;
}
.menu.loginarea i {
  font-size: 1.3vh;
  padding-right: 0.2vw;
}
.menu.loginarea .userdetails {
  cursor: default;
  font-size: 16px;
  padding: 5px 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.menu.loginarea .userdetails i {
  font-size: 20px;
  margin-right: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu .userdetails {
  cursor: default;
  font-size: 16px;
}
.menu .userdetails {
  cursor: default;
  font-size: 16px;
}
/* Login area styling */
.menu.loginarea {
  background-color: var(--primary-color);
  color: white;
  padding: 15px;
  border-radius: var(--border-radius);
  margin-bottom: 25px;
  box-shadow: var(--box-shadow);
  border-left: 4px solid var(--secondary-color);
}

.menu.loginarea i {
  font-size: 16px;
  padding-right: 10px;
  color: var(--secondary-color);
}

.errormsg {
  padding: 1vh;
  font-style: italic;
  color: #f00;
}

/* Hide errormsg when empty */
.errormsg:empty {
  display: none;
  padding: 0;
}

/* Login dialog improvements */
#login-form {
  overflow-x: hidden !important;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
}

#login-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

#login-form .form-group {
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
}

#login-form input.form-control {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

#login-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

/* jQuery UI Dialog responsive fixes */
.ui-dialog {
  max-width: calc(100vw - 20px) !important;
  box-sizing: border-box;
  overflow: hidden;
}

.ui-dialog-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  padding: 15px !important;
}

.ui-dialog-buttonpane {
  padding: 10px !important;
}

i#mmswitcher {
  display: none !important;
}

/* Show burger icon only on mobile */
@media (max-width: 768px) {
  i#mmswitcher {
    display: block !important;
  }
  
  /* Mobile-specific dialog adjustments */
  .ui-dialog {
    max-width: calc(100vw - 20px) !important;
    margin: 10px !important;
  }
  
  .ui-dialog-content {
    padding: 10px !important;
  }
  
  #login-form input.form-control {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 10px;
  }
  
  .ui-dialog-buttonpane button {
    font-size: 14px !important;
    padding: 8px 15px !important;
  }
}
th.piattoname {
  width: 71vw !important;
}
#top img {
  height: auto;
  width: 240px;
}
.appname {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary-color);
  letter-spacing: 1px;
}

td.piattoname {
  font-size: 2.2vh;
  padding: 1vh;
  display: inline-block;
  border: 1px solid #000 !important;
  margin-left: 4vw;
  width: 68vw !important;
  background: #fa0;
  box-shadow: 0px 0px 4px #000;
  border-radius: 1vh;
}
td.commands {
  font-size: 1.2vh !important;
  padding: 1vh;
  display: table-cell;
  /* border: 1px solid #000 !important; */
  width: 9vw !important;
  /* background: #fa0; */
  /* box-shadow: 0px 0px 4px #000; */
  /* border-radius: 1vh; */
  position: relative;
  right: 0;
}
.dishes-table td[f="nome"] {
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  tbody {
    display: block;
    padding-top: 1vw;
  }
  .nomob {
    display: none;
  }
  body {
    background-color: var(--light-color);
  }
  #left {
    background-color: white;
    position: fixed;
    font-size: 16px;
    width: 80vw;
    padding: 15px;
    left: -85vw;
    box-shadow: var(--box-shadow);
    top: 60px;
    z-index: 10;
    transition: left 0.3s ease;
  }
  div#top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    height: 6dvh;
    position: fixed;
    width: 100%;
    background: var(--primary-color);
    color: white;
    z-index: 10;
    overflow: hidden; /* Prevent content from spilling out */
  }
  #top img {
    height: 30px; /* Use fixed height instead of vh units for consistency */
    width: auto !important;
    max-width: 21dvh;
  }
  .appname {
    display: none;
  }
  div#middle {
    display: flex;
    flex-direction: row;
    min-height: 92vh;
    margin-top: 6dvh;
    margin-bottom: 2vh;
  }
  table th,
  table td {
    border: none !important;
  }
  table {
    border: none;
    border-top: none;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  .canceloptions {
    border: none;
    /* border-top: 1px solid #000; */
    border-radius: 0;
    /* background: #ecb329; */
    /*box-shadow: 0px -1px 5px #c4c4c4;*/
    margin: 0 2dvh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  div#right {
    display: none;
  }
  div#center {
    width: 100%;
    font-size: 14px;
    box-shadow: var(--box-shadow) !important;
    display: block;
    margin: 0;
    padding: 0dvw 5dvw;
    overflow-x: auto;
    max-width: 100vw;
  }
  div#center th,
  div#center td {
    width: 100%;
    font-size: 2.4vw;
    text-transform: uppercase;
    width: 46dvw;
    text-align: center;
  }

  div#center td.piattoname {
    font-size: 3.3dvw !important;
    padding: 0;
    margin-top: 0;
    box-shadow: none;
    border: none !important;
    width: 53dvw !important;
    display: flex;
    overflow: visible;
    background: transparent;
    justify-content: space-around;
    margin-left: 0dvw;
  }
  td.piattoname.primo {
    background: #fff65b57;
  }
  td.piattoname.secondo {
    background: #ffaaaa66;
  }
  td.piattoname.contorno {
    background: #97ff5b7a;
  }
  td.piattoname div {
    /* position: relative; */
    white-space: pre-wrap;
    line-height: 3.5dvw;
    padding: 0dvh 0dvh 0dvh 2dvw;
    min-height: 10dvw;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    min-width: 53dvw;
    flex: 1;
    align-items: center;
    text-align: left;
    font-weight: bold;
    max-height: 10dvw;
    max-width: 53dvw;
  }
  td.piattoname div:after {
    position: absolute;
    left: -3.2dvw;
    background: #939393;
    width: 5.6dvw;
    height: 5.6dvw;
    /* line-height: 2.2vh; */
    border-radius: var(--border-radius);
    text-align: center;
    border-radius: 50%;
    box-shadow: -2px 1px 3px #000;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    top: -0.6dvw;
    align-items: center;
    font-size: 4.8dvw;
  }
  td.piattoname.primo div:after {
    content: "P";
  }
  td.piattoname.secondo div:after {
    content: "S";
  }
  td.piattoname.contorno div:after {
    content: "C";
  }

  i#mmswitcher {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1vh;
    font-size: 4vh;
    background: var(--primary-color);
    color: white;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
    border-radius: 0 0 8px 0;
    transition: all 0.3s ease;
  }
  
  i#mmswitcher:active {
    background: var(--secondary-color);
    transform: scale(1);
  }
  div#centerhead {
    font-size: 1vh;
    text-align: center;
  }
  .btn {
    border: none;
    cursor: pointer;
    max-width: 40dvw;
    background: #2c3e50;
    display: flex;
    font-size: 3.5vw;
    text-align: center;
    margin: 2dvw auto;
    border-radius: 5vh;
    box-shadow: 0px 0px 4px #000;
    min-height: 4.5vh;
    height: auto;
    justify-content: center;
    min-width: 30dvw;
    align-items: center;
    padding: 1vh 2vw;
    white-space: normal;
    word-wrap: break-word;
  }
  div.centersubhead {
    font-size: 1vh;
    text-align: center;
    font-size: 1.5vh;
    margin: 3.5vh;
    margin-bottom: 0;
    border-radius: 2dvh;
    padding: 1dvh;
    background: var(--primary-color);
    color: #fff;
  }

  .day-title {
    font-weight: bold;
  }

  .day-preview-separator {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5vh;
    margin: 0 1vw;
    letter-spacing: 0.3em;
    flex-shrink: 0;
  }

  .day-preview-dishes {
    position: relative;
    margin-top: 0.8vh;
    font-size: 1.3vh;
    text-align: left;
    padding: 0 2vw;
    overflow: hidden;
    white-space: nowrap;
  }

  .day-preview-dishes-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0;
    white-space: nowrap;
  }

  @keyframes dishScrollAuto {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(0);
    }
    75% {
      transform: translateX(var(--scroll-distance));
    }
    100% {
      transform: translateX(var(--scroll-distance));
    }
  }

  .day-preview-dishes.has-overflow .day-preview-dishes-wrapper {
    animation: dishScrollAuto 10s ease-in-out infinite;
  }

  .preview-dish {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5vh 1.5vw;
    border-radius: 0.5vh;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .preview-dish.primo {
    border-left: 3px solid #4dabf7;
  }

  .preview-dish.secondo {
    border-left: 3px solid #ff6b6b;
  }

  .preview-dish.contorno {
    border-left: 3px solid #51cf66;
  }

  div#centerhead {
    font-size: 1vh;
    text-align: center;
    font-size: 1.5vh;
    margin-top: 3vh;
    margin-bottom: 2.1dvw;
    border-radius: 2dvh;
    padding: 1.5dvh;
  }
  div#centerhead.prenolabel {
    display: none;
  }
  th:last-child {
    min-width: 5vw;
    max-width: 5vw;
  }
  th.piattoname {
    width: 85vw !important;
    display: none !important;
  }
  #newselection select {
    font-size: 3.6vw;
  }
  select {
    font-size: 2.2vh;
    text-transform: uppercase;
    padding: 5px;
  }
  td.commands {
    padding: 1vh 0vh !important;
    display: block;
    min-width: 13dvh;
  }
  .daygroup {
    /* margin-bottom: 2vh; */
    /* border-top-left-radius: 3vh; */
    /* border-top-right-radius: 3vh; */
    /* border: 1px solid  #000; */
    /* overflow: hidden; */
    box-shadow: 0px 1px 2px #b9b9b9;
    background: linear-gradient(
      180deg,
      #ffffff 0dvh,
      #ffffff 2.3dvh,
      #eeeeee 1.5dvh
    ) !important;
    position: relative;
    width: 100dvw;
    position: relative;
    left: -4dvw;
    background-position: 21px -4px;
    box-sizing: border-box;
  }
  .daygroup:before {
    content: "";
    position: absolute;
    width: 100dvw;
    height: 100dvw;
    top: 1.5dvh;
    background: #ddd;
    display: none;
  }
}

select {
  font-size: inherit;
  text-transform: uppercase;
  padding: 3px;
}
td.commands[colspan="2"] {
  width: 100% !important;
  right: 0 !important;
  box-sizing: border-box;
}

span.annullamento {
  border-radius: var(--border-radius);
  height: 2vh;
  display: inline-flex;
  margin: 1vh;
  padding: 1vh 0.5vh;
  text-transform: uppercase;
  box-shadow: 1px 1px 2px #000;
  background: #ddd;
  font-size: 1.3vh;
  border-radius: 0.5vh;
}
span.annullamento.checked {
  background: #0f0;
  font-weight: 600;
  box-shadow: inset 1px 1px 2px #000;
}
input[giorno] {
  line-height: inherit;
  display: none;
}
span.annullamento label {
  display: revert;
  /* border: 1px solid #000; */
  line-height: 2vh;
  vertical-align: bottom;
  height: 1.5vh;
}

.oggicontainer {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
  padding: 1vh 0;
}

.piattogiorno {
  font-size: 2.5vh;
  text-transform: uppercase;
}
.piattogiorno .tipop {
  font-size: 1.5vh;
  text-transform: lowercase;
  font-style: italic;
  color: #060;
  padding: 0.5vh;
}
.piattogiorno .nomep {
  padding: 0.5vh;
  font-weight: bold;
  text-shadow: 0px 1px 1px black;
  -webkit-text-stroke: 0.5px #000;
  color: #ff9331;
}
.info.annullamento {
  font-size: 2vh;
  color: #ff0a0a;
  font-weight: bold;
  text-transform: uppercase;
}
tr.stats.fruito {
  background: #dfd;
}

tr.stats.trasferta {
  background: #ddf;
}

tr.stats.normale {
  background: #fdd;
}
div#filtristats {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ui-datepicker td:last-child {
  text-align: unset;
}

.ui-datepicker th:last-child {
  min-width: unset;
  max-width: unset;
}
.searchUserList {
  position: absolute;
  z-index: 3;
  background: #fff;
  width: 20vh;
  box-shadow: -1px 1px 2px #000;
  top: 2vh;
}
.searchUserList span {
  display: block;
  border-top: 1px dotted #000;
  padding: 0.4vh 1vh;
}
input#searchuser {
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.btn.search.stats {
  text-align: center;
  margin: 1vh;
  padding: 1vh;
}
tr.stats.userSum {
  background: #ddd;
  font-weight: bold;
}
tr.stats td[f="nominativo"] {
  text-transform: uppercase;
}
tr.userDet.stats {
  display: table-row;
}
/* Column widths for users table */
th.u1 {
  width: 8%;
} /* Nome - reduced */
th.u2 {
  width: 8%;
} /* Cognome - reduced */
th.u3 {
  width: 15%;
} /* Email - reduced */
th.u4 {
  width: 10%;
} /* Azienda */
th.u5 {
  width: 7%;
} /* Livello */
th.u6 {
  width: 5%;
} /* Trasferta */
th.u7 {
  width: 7%;
} /* Sede */
th.u8 {
  width: 9%;
} /* Giorni Lavorativi */
/* Last column for command buttons - explicitly set width */
table.users th:last-child,
table.users td:last-child {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

/* Center the button in the header cell */
table.users th:last-child {
  text-align: center;
}

/* Center all "nuovo" buttons in table headers */
#center table th:last-child {
  text-align: center;
}

/* Fix for mobile column - explicitly set width */
table.users th:nth-child(4), /* Mobile column */
table.users td:nth-child(4) {
  width: 11%;
  min-width: 120px;
  white-space: nowrap;
  overflow: visible;
}

/* Specific styling for Azienda column */
table.users th.u4, /* Azienda column */
table.users td:nth-child(5) {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specific styling for Trasferta column */
table.users th.u6, /* Trasferta column */
table.users td:nth-child(7) {
  max-width: 80px;
  text-align: center;
}

/* Base styling for table cells */
table.users th {
  padding: 3px 4px; /* Matching the compact padding of cells */
  text-align: left;
  border: 1px solid #e0e0e0;
  line-height: 1.2; /* Reduced line height for compactness */
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.p1 {
  width: 10vw;
}
th.p2 {
  width: 7vw;
}
th.p3 {
  width: 16vw;
}
th.p4 {
  width: 4vw;
}
th.p7 {
  width: 12vw;
}
th.p5 {
  width: 10vw;
}
th.p6 {
  width: 10vw;
}

/* Allergeni cell styling */
.allergeni-cell {
  font-size: 0.9em;
  color: #555;
  font-style: italic;
}

.allergeni-cell .allergeni-display {
  font-size: 0.85em;
  color: #f79800;
  font-weight: 500;
  margin-left: 5px;
}

.allergeni-cell:empty::before {
  content: "-";
  color: #ccc;
  font-style: normal;
}

.allergeni-piatti-popup-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f79800;
  color: var(--primary-color);
}

#allergeniSelPiatti label {
  cursor: pointer;
  transition: background-color 0.2s;
}

#allergeniSelPiatti label:hover {
  background-color: #f5f5f5;
}

/* Users table styling */
table.users {
  font-size: 12px; /* Even smaller font size */
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  overflow: hidden;
  table-layout: fixed; /* Fixed layout for better column control */
  min-width: 1000px; /* Ensure minimum width */
  border-spacing: 0;
}
table.users td {
  padding: 2px 4px; /* Minimal padding for a more compact look */
  vertical-align: middle;
  border: 1px solid #e0e0e0;
  white-space: nowrap; /* Prevent wrapping by default */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ellipsis for overflow */
  line-height: 1.2; /* Reduced line height for compactness */
}

/* Style for buttons in the last column */
table.users td:last-child {
  padding: 2px;
  white-space: normal; /* Allow wrapping for button container */
  text-align: center;
}

table.users td:last-child .btn {
  padding: 2px 3px;
  font-size: 10px;
  margin: 1px 0;
  display: block; /* Stack buttons vertically */
  width: 90%;
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.users td select {
  width: 100%;
  padding: 6px;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
}
.workingDays .ui-selecting {
  background: var(--warning-color);
}
.workingDays .ui-selected {
  background: var(--accent-color);
  color: white;
}
.workingDays {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  gap: 2px; /* Reduced spacing between days */
  justify-content: space-between;
}
.workingDays li {
  margin: 1px; /* Reduced margin */
  padding: 4px 2px; /* Reduced padding */
  font-size: 12px; /* Smaller font */
  height: auto;
  width: 20px; /* Fixed width */
  text-align: center;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
}

.comandadate {
  font-size: 1vw;
  text-align: center;
  font-weight: bold;
}

.comanda {
  border: 1px solid #000;
  margin: 1vw;
  width: 22vw;
  box-shadow: 1px 1px 5px #aeaeae;
  padding: 0.5vw;
  border-radius: 1dvw;
}

.usertitle {
  display: flex;
  flex-direction: row;
  gap: 0.3dvw;
  border-top: 1px dotted;
  box-sizing: border-box;
  margin-top: 2dvw;
}
.usertitle span {
  text-transform: capitalize;
  font-weight: 500;
}

span.allergie {
  color: #f00;
}

div#reportcomande {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.sedetitle {
  font-style: italic;
  font-weight: bold;
  font-size: 0.6vw;
}

.comandapiatto {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8dvw;
}
.comandapiattodet {
  text-align: right;
}

.comandapiatto span:nth-child(3),
.comandapiatto span:nth-child(2) {
  width: 1vw;
  display: inline-block;
}
.sedetitle:before {
  font-style: italic;
  content: "sede:";
  padding-right: 2vw;
}

.comandasede {
  margin-top: 0.5vw;
  margin-bottom: 2vw;
}

.groupallergia:nth-child(odd) {
  background-color: aliceblue;
}
.groupallergia:nth-child(even) {
  background-color: #fff0fa;
}
.allergieRow {
  text-align: right;
  font-size: 0.7dvw;
}
.allergieRow.red {
  color: rgb(159, 0, 0);
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  .comanda {
    width: 80vw;
    font-size: 1.5vh;
  }
  .comandadate {
    font-size: 3vw;
    text-align: center;
    font-weight: bold;
  }
  .comandapiatto span:nth-child(3),
  .comandapiatto span:nth-child(2) {
    width: 5vw;
    display: inline-block;
  }
  .btn.search.stats {
    text-align: center;
    margin: 1vh;
    padding: 1vh;
    width: 13vh;
  }
  span.dta,
  span.dtd {
    display: block;
    font-size: 1.5vh;
    margin-top: 0.8vh;
  }
  .pwdrecover,
  .pwdchange {
    width: 83vw;
    padding: 1vh;
    border: 1px solid #000;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2vh;
  }
  div#forgotbtn,
  div#changepwdbtn {
    cursor: pointer;
    box-shadow: 0px 0px 3px #fff;
    padding: 1vh;
    border-radius: 1vh;
    background: #ffffff5e;
    border: 1px solid #878787;
  }
}
td.hidecell {
  opacity: 0.2;
}

option.cucina {
  background-color: #f99;
}
table.users tr[ucount="1"] {
  background: rgba(52, 152, 219, 0.05);
}

/* Nutrition icon column width control */
.nutr-icon-th,
.nutr-icon-cell {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center;
}
table.users [f="nome"],
table.users [f="cognome"] {
  font-weight: 500;
  text-transform: uppercase;
  font-weight: bold;
  font-stretch: extra-expanded;
}

/* More compact users table */
table.users td,
table.users th {
  padding: 4px 10px !important;
  line-height: 1.2 !important;
}

table.users .workingDays {
  margin: 0;
  padding: 2px 0;
}

table.users .workingDays li {
  margin: 0 1px;
  padding: 2px;
  font-size: 11px;
}
td.st6,
td.st7,
td.st8 {
  text-align: right;
}
td.st3,
td.st4,
td.st5 {
  text-align: center;
}
.exdl {
  text-align: center;
  margin-top: 1vh;
}
td.st6,
td.st7,
td.st8 {
  text-align: right;
}

.invio.menu {
  font-size: 14px;
  background: var(--secondary-color);
  color: white;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
}
.invio.menu i {
  font-size: 16px;
}
.invio.menu:hover {
  background: #e68a00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
input#useAs {
  margin-left: 2vw;
}
div#usingUser {
  border-radius: 1vh;
  font-stretch: extra-condensed;
  padding: 4px;
  background: #ffdea8;
  box-shadow: -1px 1px 3px #000;
  margin: 1vh auto;
  font-size: 0.8vw;
  width: 11vw;
  text-overflow: ellipsis;
  overflow: hidden;
}
div#usingUser span {
  width: 9vw;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

div#usingUser i {
  float: right;
  font-size: 1vw;
  color: #cb0000;
}
@media screen and (max-width: 600px) {
  div#usingUser {
    border-radius: 1vh;
    font-stretch: extra-condensed;
    padding: 4px;
    background: #ffdea8;
    box-shadow: -1px 1px 3px #000;
    margin: 3vh auto;
    font-size: 3vw;
    width: 46vw;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  div#usingUser span {
    width: 18vh;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    color: #000;
  }

  @media screen and (max-width: 600px) {
    div#usingUser i {
      float: right;
      font-size: 4vw;
      color: #cb0000;
    }
    #sidebar-toggle {
      display: none;
    }

    div#left {
      /* Stats page styling */
      top: 6dvh;
      width: 50dvw;
      border-radius: 0;
      height: 44dvh;
      border-bottom-right-radius: 2dvh;
      #filtristats {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
      }

      #filtristats > div {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
      }

      #filtristats input[type="text"] {
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 0.9rem;
      }

      #filtristats input[type="checkbox"] {
        margin-right: 5px;
      }

      #filtristats label {
        margin-right: 15px;
      }

      #filtristats .btn.search.stats {
        background-color: #4e73df;
        color: white;
        margin-top: 6dvh;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background-color 0.2s;
      }

      #filtristats .btn.search.stats:hover {
        background-color: #3a5fc8;
      }

      /* User search styling */
      .userlistContainer {
        display: inline-block;
        position: relative;
      }

      .searchUserList {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
      }

      .userlistItem {
        padding: 8px 12px;
        cursor: pointer;
        display: block;
        border-bottom: 1px solid #f0f0f0;
      }

      .userlistItem:hover {
        background-color: #f8f9fc;
      }

      /* Stats table styling */
      #statsTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
        margin-top: 20px;
      }

      #statsTable th {
        background-color: #4e73df;
        color: white;
        font-weight: normal;
        text-align: left;
        padding: 10px 15px;
        position: sticky;
        top: 0;
      }

      #statsTable td {
        padding: 8px 15px;
        border-bottom: 1px solid #e3e6f0;
      }

      #statsTable tr:hover {
        background-color: #f8f9fc;
      }

      #statsTable tr.userSum {
        background-color: #eef1fa;
        font-weight: bold;
      }

      .nostatsrecords {
        padding: 20px;
        text-align: center;
        background: #f8f9fc;
        border-radius: 5px;
        margin-top: 20px;
        color: #555;
      }
      min-width: 13vw;
      /* height: 94vh; */
      /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgb(99 60 51) 84%, rgba(84 52 43) 100%); */
      background: #000;
    }
    .menu {
      color: #fff;
      box-shadow: 0 0 2px #fff;
      border: none;
    }
    .menu div {
      /* text-shadow: 0 0 6px #000; */
      /* line-height: 5vh; */
      /* height: 3vh; */
    }
    div#bottom {
      height: 4vh;
      font-size: 1.5vh;
      color: #a9a9a9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgb(99 60 51) 50%, rgba(0,0,0,1) 100%); */
      background: #000;
    }
    div#bottom a {
      color: #ffab5e;
    }
  }
  #top img.mainlogo {
    width: 9vw;
    border-radius: var(--border-radius);
    height: auto;
    margin-left: 4dvh;
    background-color: white;
    padding: 2px;
  }
  .btn.removeWaAssociation:hover {
    background: #d3ff00;
    box-shadow: inset -1px 1px 3px #000;
  }

  .qrcode {
    text-align: center;
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 1dvh;
    position: relative;
    color: var(--primary-color);
    right: 0;
    position: absolute;
  }
  #user-menu-popup {
    top: 6dvh !important;
    right: 0 !important;
    border-radius: 0 !important;
    border-bottom-left-radius: 2dvh !important;
  }

  .btn.removeWaAssociation {
    width: 14vw;
    padding: 0.5vw;
    border-radius: 0.5vw;
    box-shadow: -1px 1px 3px #000;
    margin: 0.5vw;
  }

  tr.cloned {
    background: #ffa2ff;
  }
  tr.newUser {
    background: #ff0;
  }
  .usertitle {
    margin-left: 25px;
    margin-top: 10px;
  }
  .usertitle span {
    padding-left: 4px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
  }
  tr.allerigemod {
    background: #9dffeb !important;
  }
  div#allergeniSel {
    position: absolute;
    width: 307px;
    border: 1px solid #000;
    height: 325px;
    background: #9dffeb;
  }
  .usertitle {
    margin-left: 25px;
    margin-top: 10px;
  }
  .usertitle span {
    padding-left: 4px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
  }

  .usertitle span.allergie {
    margin-left: 15px;
    font-style: normal;
    text-transform: none;
  }

  .usertitle .allergia-badge {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    font-size: 10px;
  }

  /* Etichette (Labels) Styles */
  #etichette-container {
    padding: 20px;
    font-family: Arial, sans-serif;
  }

  .etichette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .btn.print-labels {
    background-color: var(--accent-color);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
  }

  .etichette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .etichetta {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    page-break-inside: avoid;
    margin-bottom: 10px;
  }

  .etichetta-nome {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase;
  }

  .etichetta-sede {
    color: #666;
    margin-bottom: 5px;
  }

  .etichetta-piatto {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .etichetta-data {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
  }

  .etichetta-allergeni {
    margin-top: 8px;
  }

  .etichetta .allergia-badge {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 3px;
    font-weight: normal;
    text-transform: none;
  }

  div.allergie {
    font-size: 9px;
    margin-top: 5px;
    text-align: right;
  }
  div.allergie span {
    color: #f00;
  }
  div.allergie span:last-child {
    color: #f00;
    margin: 0;
  }
  div.allergie span:last-child:after {
    content: ":";
    margin: 0 0;
  }
  div.allergie span:after {
    content: "-";
    margin: 0 6px;
  }
}

/* Stats page styling */
#filtristats {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

#filtristats > div {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#filtristats input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

#filtristats input[type="checkbox"] {
  margin-right: 5px;
}

#filtristats label {
  margin-right: 15px;
}

#filtristats .btn.search.stats {
  background-color: #4e73df;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

#filtristats .btn.search.stats:hover {
  background-color: #3a5fc8;
}

/* User search styling */
.userlistContainer {
  display: inline-block;
  position: relative;
}

.searchUserList {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

.userlistItem {
  padding: 8px 12px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #f0f0f0;
}

.userlistItem:hover {
  background-color: #f8f9fc;
}

/* Stats table styling */
#statsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 20px;
}

#statsTable th {
  background-color: #4e73df;
  color: white;
  font-weight: normal;
  text-align: left;
  padding: 10px 15px;
  position: sticky;
  top: 0;
}

#statsTable td {
  padding: 8px 15px;
  border-bottom: 1px solid #e3e6f0;
}

#statsTable tr:hover {
  background-color: #f8f9fc;
}

#statsTable tr.userSum {
  background-color: #eef1fa;
  font-weight: bold;
}

.nostatsrecords {
  padding: 20px;
  text-align: center;
  background: #f8f9fc;
  border-radius: 5px;
  margin-top: 20px;
  color: #555;
}

.etichetta {
  border: 1px dotted;
  border-radius: 2dvw;
  margin: 1dvw;
  padding: 1dvw;
  min-height: 4cm;
  max-width: 11cm;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.etichetta-nome {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 5mm;
}
.etichetta-sede {
  font-style: italic;
  text-align: end;
  font-size: 3mm;
  color: #a7a7a7;
}
.etichetta-piatto {
  text-transform: uppercase;
  font-weight: bold;
  color: #009400;
  font-size: 4mm;
  text-align: center;
}
.etichetta-data {
  font-size: 3.5mm;
  text-align: right;
}
.etichetta-allergeni {
  font-weight: bold;
  color: #f00;
  font-size: 3.5mm;
  text-align: right;
}
select[multiple="multiple"] {
  min-height: 24dvw;
}
@media screen and (max-width: 600px) {
  tr[mid] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    width: 87dvw;
    background: #fff;
    margin: 1.5dvw 6.5dvw;
    border-radius: 1dvh;
    max-height: 16dvw;
    min-height: 16dvw;
    position: relative;
  }
  td.piattonome {
    width: 46dvw !important;
  }
  td.commands[colspan="2"] {
    width: 100dvw !important;
  }
  .piattogiorno {
    /* font-size: 2.5vh; */
    /* text-transform: uppercase; */
    display: flex;
    width: 87dvw;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 1dvh;
  }
  .piattogiorno .tipop {
    font-size: 1.5vh;
    text-transform: uppercase;
    min-width: 18.3dvw;
    font-weight: 500;
    padding-bottom: 0;
  }
  .piattogiorno .nomep {
    font-size: 1.8dvh;
    text-transform: uppercase;
    -webkit-text-stroke: 0;
    line-height: 3dvh;
    color: #fff;
    border-radius: 0.7dvh;
    text-shadow: none;
    padding: 0.4dvh 2dvh;
  }
  .piattogiorno .nomep.primo,
  .piattoname.primo div:after {
    background: #b2a800;
  }
  .piattogiorno .nomep.contorno,
  .piattoname.contorno div:after {
    background: #25ac00;
  }
  .piattogiorno .nomep.secondo,
  .piattoname.secondo div:after {
    background: #980000;
  }

  .oggicontainer {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1.6vh;
    background: #eee;
    border-radius: 2dvh;
    margin-bottom: 2dvh;
  }
}

/* Config Editor Styles */
.config-editor-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.config-editor-container h2 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-description {
  color: var(--text-light);
  margin-bottom: 30px;
  font-size: 14px;
}

.config-section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.config-section h3 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--light-color);
  padding-bottom: 10px;
}

.config-section.advanced {
  border-left: 4px solid var(--warning-color);
}

.config-help {
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 15px;
  font-style: italic;
}

.config-item {
  margin-bottom: 20px;
}

.config-item label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-color);
}

.config-input,
.config-textarea,
.config-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 14px;
  transition: var(--transition);
  box-sizing: border-box;
}

.config-input:focus,
.config-textarea:focus,
.config-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.config-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: monospace;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-primary {
  background-color: var(--accent-color);
  color: white;
}

.btn-primary:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-success {
  background-color: var(--success-color);
  color: white;
}

.btn-success:hover {
  background-color: #27ae60;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.config-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.config-table thead {
  background-color: var(--light-color);
}

.config-table th,
.config-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.config-table th {
  font-weight: 600;
  color: var(--primary-color);
}

.config-table code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #e74c3c;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.type-string {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.type-number {
  background-color: #e3f2fd;
  color: #1565c0;
}

.type-boolean {
  background-color: #fff3e0;
  color: #e65100;
}

.type-object {
  background-color: #f3e5f5;
  color: #6a1b9a;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: var(--border-radius);
  border-left: 4px solid #c62828;
}

/* Hide error message when empty (applied after all error-message definitions) */
.error-message:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Landing Page Styles */
.landing-page {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Simplified landing page for utente/socio users */
.landing-page-simple {
  max-width: 600px;
  text-align: center;
  padding: 40px 20px;
}

.landing-page-simple .welcome-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.landing-page-simple .landing-actions {
  margin-top: 40px;
  border-top: none;
  padding-top: 0;
}

.landing-page-simple .btn-large {
  min-width: 250px;
}

.welcome-icon {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 10px;
  text-align: center;
}

.landing-page h1 {
  color: var(--primary-color);
  font-size: 28px;
  margin: 0 0 8px 0;
  font-weight: 600;
  text-align: center;
}

.welcome-subtitle {
  color: var(--text-light);
  font-size: 16px;
  margin-bottom: 30px;
  text-align: center;
}

.landing-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.feature-item {
  padding: 15px;
  transition: var(--transition);
  flex: 0 1 200px;
}

.feature-item:hover {
  transform: translateY(-3px);
}

.feature-item i {
  font-size: 36px;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.feature-item h3 {
  color: var(--primary-color);
  font-size: 16px;
  margin: 8px 0;
  font-weight: 600;
}

.feature-item p {
  color: var(--text-light);
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

.landing-actions {
  margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--light-color);
    text-align: center;
    margin-bottom: 40px;
}

.landing-actions p {
  color: var(--text-light);
  font-size: 15px;
  margin: 0;
}

.user-greeting {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.user-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  color: var(--primary-color);
}

.user-welcome i {
  font-size: 32px;
  color: var(--accent-color);
}

.user-welcome strong {
  color: var(--secondary-color);
}

.btn-large {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-large:hover {
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
  transform: translateY(-2px);
}

/* Mobile responsive styles for landing page */
/* Dashboard Styles */
#dashboard-container {
  margin: 20px 0;
}

.user-greeting-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-greeting-banner i {
  font-size: 24px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-left {
  background: white;
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--box-shadow);
}

.dashboard-right {
  background: white;
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--box-shadow);
}

.companies-summary h3,
.orders-chart-section h3 {
  color: #555;
  margin-bottom: 15px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.company-summary-item {
  padding: 12px;
  border-left: 4px solid #667eea;
  background: #f8f9fa;
  margin-bottom: 10px;
  border-radius: 4px;
  transition: var(--transition);
}

.company-summary-item:hover {
  background: #e9ecef;
  border-left-color: #764ba2;
}

.company-summary-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
}

.company-summary-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #666;
}

.company-summary-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-summary-stats i {
  font-size: 12px;
  color: #667eea;
}

.chart-container {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: var(--border-radius);
  overflow-x: auto;
}

.chart-day-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.chart-day-label {
  font-size: 11px;
  text-align: center;
  color: #666;
  font-weight: 600;
  min-width: 60px;
}

.chart-bars-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 200px;
}

.chart-bar-single {
  width: 30px;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  transition: var(--transition);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.chart-bar-single:hover {
  opacity: 0.8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.chart-bar-value {
  position: absolute;
  top: -20px;
  font-size: 11px;
  font-weight: bold;
  color: #333;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 15px;
  background: white;
  border-radius: var(--border-radius);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-label {
  color: #555;
  font-weight: 500;
}

.dashboard-loading,
.dashboard-error {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
}

.dashboard-loading i {
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.dashboard-error {
  color: #e74c3c;
}

@media (max-width: 768px) {
  /* Modern Mobile Sidebar */
  div#left {
    position: fixed !important;
    left: -300px !important;
    top: 6dvh !important;
    height: calc(100vh - 100px) !important;
    width: 280px !important;
    min-width: 280px !important;
    z-index: 1001 !important;
    background: var(--primary-color) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    padding-top: 5px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 0 12px 12px 0 !important;
    transform: none !important;
  }
  
  /* Sidebar visible state - when left is set to 0px */
  div#left[style*="left"][style*="0"],
  div#left[style*="left: 0"] {
    left: 0 !important;
  }
  
  /* Mobile overlay backdrop */
  @media (max-width: 768px) {
    body::after {
      content: '';
      position: fixed;
      top: 6dvh;
      left: 0;
      right: 0;
      bottom: 40px;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      height:100%;
    }
    
    body.sidebar-open::after {
      opacity: 1;
      pointer-events: auto;
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Menu items modernized */
  .menu {
    margin: 8px 12px;
    padding: 0;
    border-radius: 12px;
    border-left: none;
    min-height: 48px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .menu div {
    padding: 0 16px;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .menu div i.fa,
  .menu div i.fa-solid,
  .menu div i.fa-brands,
  .menu div i.sidebar-icon {
    width: 24px;
    font-size: 18px;
    margin-right: 0;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .menu div .sidebar-label {
    font-size: 15px;
    font-weight: 500;
    opacity: 1;
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .menu:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .menu:hover div,
  .menu:hover div i,
  .menu:hover div .sidebar-label {
    color: white;
  }
  
  .menu.active-menu {
    background: linear-gradient(135deg, var(--accent-color) 0%, #2980b9 100%);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    transform: translateX(4px);
  }
  
  .menu.active-menu div,
  .menu.active-menu div i,
  .menu.active-menu div .sidebar-label {
    color: white !important;
    font-weight: 600;
  }
  
  /* Logout button */
  div#logout {
    margin: 12px;
    padding: 12px 16px;
    color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    text-align: center;
    font-weight: 600;
  }
  
  div#logout:active {
    transform: scale(0.98);
  }
  
  /* Center content adjustments */
  div#center {
    max-width: 100vw !important;
    margin-left: 0 !important;
    padding: 15px;
    transition: none !important;
  }
  
  div#middle {
    gap: 0;
    position: relative;
  }
  
  /* Prevent center from shifting when sidebar opens */
  #left.collapsed ~ #center,
  #left ~ #center {
    max-width: 100vw !important;
    margin-left: 0 !important;
  }
  
  /* Dashboard */
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  
  .welcome-icon {
    font-size: 40px;
  }
  
  .landing-page h1 {
    font-size: 22px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .landing-features {
    gap: 15px;
  }
  
  .feature-item {
    flex: 0 1 140px;
    padding: 10px;
  }
  
  .feature-item i {
    font-size: 28px;
  }
  
  .feature-item h3 {
    font-size: 14px;
  }
  
  .feature-item p {
    font-size: 12px;
  }
  
  .btn-large {
    padding: 12px 30px;
    font-size: 16px;
    width: 100%;
    max-width: 300px;
  }
  
  .landing-actions {
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
  }
  
  .user-welcome {
    font-size: 16px;
  }
  
  .user-welcome i {
    font-size: 24px;
  }
  
  /* Config section mobile styles */
  .config-editor-container {
    padding: 10px;
  }
  
  .config-editor-container h2 {
    font-size: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .config-description {
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  .config-section {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .config-section h3 {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .config-help {
    font-size: 12px;
  }
  
  .config-item {
    margin-bottom: 15px;
  }
  
  .config-item label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .config-input,
  .config-textarea,
  .config-select {
    font-size: 14px;
    padding: 8px;
  }
  
  .config-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .config-table thead {
    display: none;
  }
  
  .config-table tbody {
    display: block;
  }
  
  .config-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 10px;
    background: white;
  }
  
  .config-table td {
    display: block;
    text-align: left;
    padding: 8px 0;
    border: none;
  }
  
  .config-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--primary-color);
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
  }
  
  .config-table code {
    font-size: 11px;
    word-break: break-all;
  }
  
  .type-badge {
    font-size: 11px;
  }
}