:root {
  --font-family: 'Montserrat', sans-serif;
  --color-primary: #0B2D42;
  --color-secondary: #5FA8D3;
  --color-yellow: #FFD485;
  --color-inactive: #25516D;
  --color-light: #f9f9f9;
  --color-dark: #222;
  --color-scroll-anchor: #ff7a00;
  --shadow: rgba(0, 0, 0, 0.1);

  /* NEW: heights */
  --topbar-h: 4.5rem;
  --subbar-h: 4rem;
  --app-top-offset: calc(var(--topbar-h) + var(--subbar-h));
}

/* bootstrap/login states */
body.booting #root,
body.auth-layout .auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* base */
body {
  margin: 0;
  font-family: var(--font-family);
  background: white;
  color: var(--color-dark);
}

/* APP ONLY: spazio per top-bar + sub-bar */
body.app-layout {
  padding-top: var(--app-top-offset);
}

/* LOGIN ONLY: niente offset */
body.auth-layout {
  padding-top: 0;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4.5rem;
  background: var(--color-primary);
  color: white;
  padding: 0.5rem 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 4px var(--shadow);
}

.app-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: #699DBB;
}

.nav-icons {
  display: flex;
  gap: 1rem;
  padding-left: 0.2rem;
}

.icon {
  position: relative;
  /*background: #0E455D;*/
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: #699DBB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon:hover {
  transform: scale(1.2);
}

.icon.active {
  color: var(--color-yellow); /* colore attivo */
}

.icon.active i:after, .icon.active svg:after {
  border-bottom: 2px solid var(--color-yellow);
  content: "";
  position: absolute;
  bottom: 0; /* distanza dal contenuto */
  width: 50%;
  height: 1px;
  left:11px;
}

.tooltip {
  position: absolute;
  bottom: -20px;
  background: var(--color-yellow);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: all 0.25s ease;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-yellow);
}

.icon:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}


.sub-bar {
  position: fixed;
  top: 5.5rem; /* subito sotto la top-bar */
  left: 0;
  right: 0;
  height: 4rem;
  background: var(--color-secondary);
  z-index: 990;
  box-shadow: 0 2px 6px var(--shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.subbar-content {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  align-items: center;
}

.subbar-content .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.subbar-content .icon:hover {
  transform: scale(1.2);
}

.subbar-content .is-open .icon {
  width: 48px;
  height: 48px;
  color: var(--color-light);
}

.subbar-content .is-open .icon i:after{
  border-bottom: 2px solid var(--color-light);
  content: "";
  position: absolute;
  bottom: 2px;
  width: 50%;
  height: 1px;
  left: 11px;
}

.subbar-content .is-open .icon-submenu .icon i:after {
  border-bottom: 0px solid var(--color-light);
}

.subbar-content .is-open .icon-submenu .icon {
  color: var(--color-primary);
  transform: scale(1);
}

.subbar-content .icon .tooltip {
  position: absolute;
  bottom: -20px;
  background: var(--color-yellow);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: all 0.25s ease;
}

.subbar-content .icon .tooltip::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-yellow);
}

.subbar-content .icon:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Tab content */
.tab-content {
  padding: 4rem;
}
.hidden {
  display: none;
}

/* Action icons bar */
.action-icons {
  display: flex;
  gap: 1rem;
  font-size: 1.2rem;
  color: var(--color-primary);
}

.action-icons i, .action-icons svg {
  background: var(--color-primary);
  padding: 0.6rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.action-icons i:hover, .action-icons svg:hover {
  transform: scale(1.1);
}


#mapSidebar {
  display: flex;
  justify-content: center; /* oppure space-around */
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-secondary);
  box-shadow: 0 2px 6px var(--shadow);
  position: fixed;
  top: 5.5rem; /* subito sotto la top-bar */
  z-index: 998;
  flex-wrap: wrap;
  left: 0;
  right: 0;
  height: 3rem;
}


/* Overlay scuro trasparente */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}

.modal-overlay.hidden {
  display: none;
  opacity: 0;
}

/* Box centrale */
.modal-box {
  background: white;
  padding: 2em;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  font-family: 'Montserrat', sans-serif;
  animation: scaleIn 0.2s ease-in-out;
}

.modal-box h2 {
  margin-top: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: #0077aa;
}

.modal-box p {
  margin: 1em 0;
  font-size: 1em;
  color: #333;
}

/* Pulsanti */
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  margin-top: 1.5em;
}

.modal-buttons button {
  padding: 0.4em 1em;
  font-size: 0.95em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: #0077aa;
  color: white;
  transition: background-color 0.2s ease;
}

.modal-buttons button:hover {
  background-color: #005d88;
}

/* Animazione entrata */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Menu con hover */
.icon-group {
  position: relative;
  display: inline-block;
}

.icon-submenu {
  display: none;
  position: absolute;
  top: 115%;
  left: 0;
  transform: translateX(-45%);
  z-index: 10;
  background: #E5E5E5;
  padding: 6px 6px;
  gap: 10px;
  border: 1px solid var(--color-secondary);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.icon-submenu .icon {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-submenu .icon i:before {
  color: var(--color-primary);
}

.table-group.is-open .icon-submenu svg, .table-group.is-open .icon-submenu i {
  width: 30px;
  height: 30px;
}

.icon-group.is-open .icon-submenu {
  display: flex;
  flex-direction: row; /* orizzontale */
}

.scroll-highlight {
  outline: 3px dashed orange;
  transition: outline 0.2s ease-in-out;
}

/* Tutti i blocchi con data-block-id hanno il "gancio" per il pallino */
[data-block-id] {
  position: relative; /* non altera il layout */
}

/* Pseudo-elemento sempre presente ma invisibile di default */
[data-block-id]::after {
  content: "";
  position: absolute;
  left: -20px;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px #5FA8D32E;
  pointer-events: none;

  /* 👇 transizione morbida */
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

/* Quando il blocco è l’ancora corrente, il pallino si “accende” */
[data-block-id].is-scroll-anchor::after {
  opacity: 1;
  transform: scale(1);
}

.rnone {
  display: none !important;
}


.help-dialog {
  width: min(980px, 90vw);
  height: min(80vh, 900px);
  border: 0;
  padding: 0;
  background: var(--bg, #0b0f14);
  color: var(--fg, #e6ebf0);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.help-dialog::backdrop { background: rgba(0,0,0,.6); }

.help-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; background-color: var(--color-inactive); z-index: 1;
}
.help-header .spacer { flex: 1; }
.help-body { height: calc(100% - 56px); }
#helpFrame { width: 100%; height: 100%; border: 0; }

.btn-icon, .btn-link {
  background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit;
  opacity: .9;
}
.btn-icon:hover, .btn-link:hover { opacity: 1; text-decoration: underline; }