html,
body {
  margin: 0;
  padding: 0;
  background: #f5f6f8;
}

.aai-app-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #f5f6f8;
}

.aai-app-frame {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  border: 0;
  background: #f5f6f8;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.aai-app-frame.is-loading { opacity: 0; }

.aai-app-loading {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: all;
}

.aai-app-loading.is-visible { display: flex; opacity: 1; }

.aai-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12);
  font-family: Arial, sans-serif;
  color: #374151;
}

.aai-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #d1d5db;
  border-top-color: #166534;
  border-radius: 50%;
  animation: aai-spin 0.7s linear infinite;
}

.aai-loading-text { font-size: 13px; font-weight: 600; }
.aai-login-required { padding: 20px; border-radius: 12px; background: #fff; color: #374151; font-family: Arial, sans-serif; }

@keyframes aai-spin { to { transform: rotate(360deg); } }

#menu-bacheca,
#menu-calendario,
#menu-appuntamenti,
#menu-pazienti,
#menu-finance,
#menu-servizi,
#menu-disponibilita,
#menu-sedi,
#menu-tutorial,
#menu-esci {
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#menu-bacheca:hover,
#menu-calendario:hover,
#menu-appuntamenti:hover,
#menu-pazienti:hover,
#menu-finance:hover,
#menu-servizi:hover,
#menu-disponibilita:hover,
#menu-sedi:hover,
#menu-tutorial:hover {
  background-color: #ecfdf5 !important;
  border-color: #86efac !important;
}

#menu-esci:hover {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

#menu-bacheca.is-active,
#menu-calendario.is-active,
#menu-appuntamenti.is-active,
#menu-pazienti.is-active,
#menu-finance.is-active,
#menu-servizi.is-active,
#menu-disponibilita.is-active,
#menu-sedi.is-active,
#menu-tutorial.is-active {
  background-color: #166534 !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(22, 101, 52, 0.18) !important;
}

#menu-bacheca.is-active *,
#menu-calendario.is-active *,
#menu-appuntamenti.is-active *,
#menu-pazienti.is-active *,
#menu-finance.is-active *,
#menu-servizi.is-active *,
#menu-disponibilita.is-active *,
#menu-sedi.is-active *,
#menu-tutorial.is-active * {
  color: #ffffff !important;
}

#menu-bacheca.is-active svg,
#menu-calendario.is-active svg,
#menu-appuntamenti.is-active svg,
#menu-pazienti.is-active svg,
#menu-finance.is-active svg,
#menu-servizi.is-active svg,
#menu-disponibilita.is-active svg,
#menu-sedi.is-active svg,
#menu-tutorial.is-active svg,
#menu-bacheca.is-active svg *,
#menu-calendario.is-active svg *,
#menu-appuntamenti.is-active svg *,
#menu-pazienti.is-active svg *,
#menu-finance.is-active svg *,
#menu-servizi.is-active svg *,
#menu-disponibilita.is-active svg *,
#menu-sedi.is-active svg *,
#menu-tutorial.is-active svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}