html, body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3 { letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 3vw + 1rem, 2.5rem) !important; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem) !important; line-height: 1.25; }
h3 { font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.5rem) !important; line-height: 1.3; }

/* Global shell: fluid width with generous max-width (no Tailwind build step required). */
.tb-shell { width: 100%; max-width: 1600px; margin-inline: auto; }

/* Link visibili (brand) */
a { color: var(--tb-brand); text-decoration: underline; text-underline-offset: 2px; }
a.btn, a.btn-outline, .btn a, .btn-outline a { text-decoration: none; }
a:hover { opacity: .9; }

/* Topbar */
.tb-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
}

/* Nav pills */
.tb-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid transparent;
  color: #0f172a;
  font-weight: 650;
  font-size: .9rem;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tb-nav-link:hover {
  opacity: 1;
  background: rgba(var(--tb-brand-rgb, 37, 99, 235), .08);
  border-color: rgba(var(--tb-brand-rgb, 37, 99, 235), .22);
}
.tb-nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .18);
}
.tb-nav-link.is-active {
  background: rgba(var(--tb-brand-rgb, 37, 99, 235), .12);
  border-color: rgba(var(--tb-brand-rgb, 37, 99, 235), .32);
  color: var(--tb-brand);
}
.tb-nav-link.tb-nav-logout:hover {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: #b91c1c;
}

/* Desktop polish: stronger hierarchy for primary nav labels. */
@media (min-width: 901px) {
  .tb-nav {
    gap: 12px;
  }

  .tb-nav-link {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 13px;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.1;
    letter-spacing: .005em;
  }

  .tb-nav-link:hover {
    background: rgba(var(--tb-brand-rgb, 37, 99, 235), .12);
    border-color: rgba(var(--tb-brand-rgb, 37, 99, 235), .30);
    color: #0b1220;
  }

  .tb-nav-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .22);
  }

  .tb-nav-link.is-active {
    background: rgba(var(--tb-brand-rgb, 37, 99, 235), .18);
    border-color: rgba(var(--tb-brand-rgb, 37, 99, 235), .44);
    box-shadow: inset 0 0 0 1px rgba(var(--tb-brand-rgb, 37, 99, 235), .12);
  }
}

/* Nav dropdown (Gestione) */
.tb-nav-dd { position: relative; }
.tb-nav-dd summary { list-style: none; cursor: pointer; }
.tb-nav-dd summary::-webkit-details-marker { display: none; }
.tb-nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(2, 6, 23, .12);
  padding: 10px;
  z-index: 9999;
}
.tb-nav-dd-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 170px);
  align-items: start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #0f172a;
  font-weight: 650;
  font-size: .92rem;
  line-height: 1.2;
}
.tb-nav-dd-item:hover {
  opacity: 1;
  background: rgba(var(--tb-brand-rgb, 37, 99, 235), .08);
}
.tb-nav-dd-item.is-active { background: rgba(var(--tb-brand-rgb, 37, 99, 235), .12); color: var(--tb-brand); }
.tb-nav-dd-hint {
  display: block;
  justify-self: end;
  text-align: right;
  width: 100%;
  max-width: 170px;
  color: #64748b;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard footer (credits + version for owners) */
.tb-footer {
  border-top: 1px solid rgba(148, 163, 184, .22);
  padding: 12px 0;
  color: rgba(100, 116, 139, .88);
  font-size: .82rem;
  line-height: 1.45;
  background: linear-gradient(to bottom, rgba(248,250,252,0), rgba(248,250,252,.85));
}
.tb-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, opacity .15s ease, color .15s ease;
}
.tb-footer a:hover {
  opacity: 1;
  border-bottom-color: rgba(100, 116, 139, .55);
}
.tb-footer a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .12);
  border-radius: 8px;
}
.tb-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.tb-footer-sep { color: rgba(203, 213, 225, .85); }
.tb-footer-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
  color: rgba(148, 163, 184, .95);
  white-space: nowrap;
}

/* Toast / snackbar (global feedback) */
.tb-toast-region {
  position: fixed;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 100; /* above drawers (80), below modals (120) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
@media (max-width: 640px) {
  .tb-toast-region { align-items: center; }
}
.tb-toast {
  width: min(520px, calc(100vw - 36px));
  pointer-events: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid #e2e8f0;
  border-left: 5px solid var(--tb-brand);
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(2, 6, 23, .20);
  padding: 12px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.tb-toast.is-show { opacity: 1; transform: translateY(0); }
.tb-toast.tb-toast-error { border-left-color: #ef4444; }
.tb-toast.tb-toast-info { border-left-color: var(--tb-brand); }
.tb-toast-icon { margin-top: 2px; flex: 0 0 auto; color: #0f172a; opacity: .85; }
.tb-toast.tb-toast-error .tb-toast-icon { color: #b91c1c; opacity: 1; }
.tb-toast-body { flex: 1 1 auto; min-width: 0; }
.tb-toast-text { margin: 0; color: #0f172a; font-size: .98rem; line-height: 1.35; }
.tb-toast-close {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, .45);
  background: rgba(248, 250, 252, .7);
  color: #475569;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.tb-toast-close:hover { background: rgba(226, 232, 240, .8); border-color: rgba(148, 163, 184, .7); }
.tb-toast-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .20); }

/* Logo shared (login/register) */
.logo-wrap { display: grid; place-items: center; width: 100%; text-align: center; }
.logo-wrap > a { display: inline-grid; place-items: center; }
.logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 280px);
  max-height: 84px;
  margin: 0 auto;
  object-fit: contain;
}
.logo-fallback { display: none; font-family: 'Manrope', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--tb-brand); }
.brand-logo { display: flex; align-items: center; gap: 12px; }
.brand-logo img { display: block; }

/* Inputs coerenti con la login */
.tb-input { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 1rem; outline: none; transition: box-shadow .15s ease, border-color .15s ease; background-color: #fff; color: #1f2937; }
.tb-input:focus { border-color: var(--tb-brand); box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .15); }
.tb-textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font-size: 1rem; outline:none; transition: box-shadow .15s ease, border-color .15s ease; background:#fff; color:#1f2937; min-height: 140px; resize: vertical; }
.tb-textarea:focus { border-color: var(--tb-brand); box-shadow: 0 0 0 3px rgba(var(--tb-brand-rgb, 37, 99, 235), .15); }
.tb-input[disabled], .tb-input[readonly] { background:#f3f4f6; color:#6b7280; cursor:not-allowed; }
.tb-textarea[disabled], .tb-textarea[readonly] { background:#f3f4f6; color:#6b7280; cursor:not-allowed; }

/* Modal stile identico one‑page */
/* Must sit above drawers and sticky nav. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 120; }
.modal-backdrop.active { display: flex; }
.modal-panel { background:#fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(15,23,42,.12); width: min(92vw, 900px); max-height: 85vh; overflow-y: auto; position: relative; padding: 22px 22px 18px; color: #0f172a; }
.modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 1.75rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.modal-close:hover { color: #1f2937; }
.modal-body { font-size: 1rem; line-height: 1.7; color: #0f172a; }
.modal-body article { max-width: 760px; margin: 0 auto; }
.modal-body h1 { font-size: 1.4rem !important; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; }
.modal-body h2 { font-size: 1.1rem !important; line-height: 1.35; margin: 18px 0 8px; }
.modal-body p { margin: 10px 0; color: #0f172a; }
.modal-body article ul { margin: 10px 0 12px 1.25rem; padding: 0; }
.modal-body article li { margin: 6px 0; }
.modal-body strong { font-weight: 650; }
.modal-body a { color: var(--tb-brand); text-decoration: underline; text-underline-offset: 2px; }
.modal-body hr { border: none; border-top: 1px solid #e2e8f0; margin: 16px 0; }
@media (max-width: 640px) {
  .modal-panel { padding: 18px 16px 14px; width: min(94vw, 900px); }
  .modal-body h1 { font-size: 1.25rem !important; }
}