/*
  app.css
  --------
  Stili condivisi di applicazione (lavagna, auth, pagine interne) + landing page.
*/

:root{--bg:#0f172a;--panel:#111827;--fg:#e5e7eb;--muted:#9ca3af;--accent:#60a5fa;--danger:#ef4444;--attr-indent:0px; --card-bg: linear-gradient(180deg, rgba(3,37,65,0.88), rgba(6,45,85,0.72));
  /* Altezza topbar: default storico, viene ricalcolata via JS nelle pagine lavagna */
  --topbar-height: 74px;
  /* Spazio extra dovuto alla tabbar (Originale/Ristrutturato): aggiornato via CSS quando la tabbar è presente */
  --board-tabs-offset: 0px;
}
*{box-sizing:border-box;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
body{margin:0;background:linear-gradient(180deg,#0b1224,#0f172a);color:var(--fg);}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:rgba(17,24,39,.85);backdrop-filter:blur(8px);position:sticky;top:0;border-bottom:1px solid rgba(255,255,255,.08);}
.brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.brandMark{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.30);color:rgba(229,231,235,.95)}
.brandText{white-space:nowrap;max-width:48vw;overflow:hidden;text-overflow:ellipsis}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool{display:inline-flex;align-items:center;gap:8px;line-height:1;background:rgba(31,41,55,.92);color:var(--fg);border:1px solid rgba(255,255,255,.10);padding:7px 11px;border-radius:999px;cursor:pointer;font-size:14px;backdrop-filter:blur(6px)}
.toolIcon{display:inline-flex;opacity:.92}
.tool:hover{background:rgba(36,48,66,.98);transform:translateY(-.5px)}
.tool:active{transform:translateY(0)}
.tool.selected{outline:2px solid rgba(96,165,250,.7);border-color:rgba(96,165,250,.55)}
.tool.danger{border-color:rgba(239,68,68,.5)}
.tool.disabled{opacity:.45;pointer-events:none}

/* separatore toolbar */
.sep{width:1px;height:22px;background:rgba(255,255,255,.12)}

/* --- Layout lavagna --- */
.help,.props{background:rgba(17,24,39,.72);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px}
.help h3,.props h3{margin:0 0 10px 0}
.help ul{margin:0;padding-left:18px;color:var(--muted)}
.canvasWrap{position:relative}
#board{display:block;width:100%;height:100%;background:radial-gradient(circle at 10px 10px, rgba(255,255,255,.04) 1px, transparent 1px);background-size:28px 28px;cursor:crosshair;}

/* Sposta status e zoom/save un po' più su quando è presente la tabbar, per evitare che finiscano fuori */
.status{position:absolute;left:12px;bottom:calc(72px + var(--board-tabs-offset));z-index:40;max-width:min(520px, calc(100% - 24px));pointer-events:none}

/* Meta progetto in alto a sinistra */
.boardMeta{
  position:absolute;
  left:12px;
  top:12px;
  z-index:45;
  max-width:min(320px, calc(100% - 24px));
  min-width:min(320px, calc(100% - 24px));
  background:rgba(17,24,39,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.boardMetaHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.boardMeta h3{font-size:15px;font-weight:900}

/* Overlay in basso a destra per zoom e saveStatus */
.canvasOverlayRight{position:absolute;right:12px;bottom:calc(65px + var(--board-tabs-offset));display:flex;gap:10px;align-items:center;z-index:50}

/* Overlay in alto a destra per pulsante toggle proprietà */
.canvasOverlayTopRight{position:absolute;right:12px;top:12px;display:flex;gap:10px;align-items:center;z-index:50}

/* Pulsante toggle pannello proprietà */
.panelToggleBtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(17,24,39,.75);color:var(--fg);cursor:pointer;backdrop-filter:blur(6px)}
.panelToggleBtn:hover{background:rgba(17,24,39,.9);border-color:rgba(255,255,255,.2)}

.saveStatus{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95)}
.saveStatus.isSaving{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.3);color:rgba(234,179,8,.95)}
.saveStatus.isError{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:rgba(239,68,68,.95)}
.saveStatus.isSaved{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95)}
.saveStatus.isDirty{background:rgba(156,163,175,.15);border:1px solid rgba(156,163,175,.35);color:rgba(156,163,175,.95)}
.saveStatus::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}
.saveStatus.hidden{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(96,165,250,.09);border:1px solid rgba(96,165,250,.16);color:rgba(229,231,235,.92);font-size:12px;font-weight:700}
.chip.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:rgba(156,163,175,.95)}

.field{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fieldRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
input{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#0b1224;color:var(--fg)}
.hidden{display:none}
.muted{color:var(--muted)}
.small{font-size:12px}
label.importLabel{display:inline-flex;align-items:center;gap:8px}
.panelTitle{margin:6px 0 0 0;font-size:14px;letter-spacing:.2px}
.attrControls{margin-top:8px;display:flex;gap:8px;align-items:center}

/* Tabella attributi */
.attrTable{
  margin-top:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  overflow:hidden; /* evita scrollbar doppie */
}
/* L'intestazione resta a 7 colonne; le righe ora sono su 2 livelli (vedi sotto) */
.attrHead{display:grid;grid-template-columns:1.4fr 1fr .6fr .8fr .9fr .9fr 34px;gap:8px;align-items:center;padding:8px 10px;background:rgba(0,0,0,.25);color:var(--muted);font-size:12px}

/* Header attributi con filtro */
.attrHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}
.attrHeader .attrFilterInput{max-width:160px}

/* --- Attributi: riga su 2 livelli per dare spazio al nome --- */
.attrRows{display:flex;flex-direction:column}
.attrRow{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.attrRowTop{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center}
.attrRowTop input[type="text"]{width:100%;font-size:15px;font-weight:700}

.attrRowBottom{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow:hidden; /* evita overflow laterale */ }
.attrField{display:flex;flex-direction:column;gap:4px;min-width:0}
.attrMiniLabel{color:var(--muted);font-size:11px;line-height:1}
.attrDeleteWrap{display:flex;align-items:flex-end;justify-content:flex-end}

/* Gli elementi dentro i field devono adattarsi */
.attrRowBottom select{width:100%}

@media (max-width: 720px){
  .attrHead{display:none}
  .attrRowTop{grid-template-columns:1fr}
  .attrRowBottom{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .attrDeleteWrap{justify-content:flex-start}
}

/* Input e controlli */
.attrRow input[type="text"], .attrRow select{width:100%}
.attrRow label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}

.iconBtn{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--fg);border-radius:8px;width:34px;height:34px;cursor:pointer}
.iconBtn:hover{background:rgba(255,255,255,.06)}

.zoomBox{display:flex;gap:8px;align-items:center;background:rgba(17,24,39,.75);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);padding:8px;border-radius:12px}
.zoomLabel{min-width:52px;text-align:center;color:var(--muted);font-size:12px}

/* --- Auth / Login page --- */
.authBody{min-height:100vh;background:radial-gradient(1200px 500px at 20% 10%, rgba(96,165,250,.20), transparent 55%),radial-gradient(900px 540px at 80% 20%, rgba(239,68,68,.14), transparent 55%),linear-gradient(180deg,#0b1224,#0f172a);}
.authMain{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.authCard{width:min(520px,100%);background:rgba(17,24,39,.78);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:18px 18px 16px 18px;box-shadow:0 14px 60px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.authHeader{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.authLogo{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.28);color:rgba(229,231,235,.95)}
.authTitle{font-weight:800;letter-spacing:.2px;font-size:18px}
.authSubtitle{color:var(--muted);font-size:13px;margin-top:2px}

.authAlert{display:flex;gap:10px;align-items:center;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:rgba(239,68,68,.95);border-radius:12px;padding:10px 12px;margin:10px 0 14px 0;font-weight:600}
.authAlertIcon{display:flex}
.authAlert.success{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22);color:rgba(34,197,94,.95)}
.authAlert.info{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.22);color:rgba(96,165,250,.95)}

.authForm{display:flex;flex-direction:column;gap:10px}
.authLabel{color:rgba(229,231,235,.9);font-size:13px;margin-top:4px}
.authInputRow{display:flex;align-items:center;gap:10px;background:#0b1224;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 12px}
.authInputIcon{color:rgba(156,163,175,.95);display:flex}
.authInput{flex:1;border:0;background:transparent;color:var(--fg);outline:none;font-size:16px;line-height:22px;padding:2px 2px;font-weight:600;letter-spacing:.2px}

.authDivider{display:flex;align-items:center;gap:10px;margin:14px 0 12px 0;color:var(--muted);font-size:12px}
.authDivider:before,.authDivider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.10)}
.authDivider span{padding:0 6px}

.authButtons{display:flex;flex-direction:column;gap:10px}
.authBtn{display:inline-flex;align-items:center;gap:10px;justify-content:center;text-decoration:none;user-select:none;border-radius:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);background:#1f2937;color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}
.authBtn:hover{background:#243042}
.authBtnIcon{display:flex}
.authBtn.primary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.85));border-color:rgba(96,165,250,.5)}
.authBtn.primary:hover{filter:brightness(1.02)}
.authBtn.secondary{background:rgba(255,255,255,.06)}

/* OAuth buttons: centra icona + testo nel bottone */
.authBtn.oauth{justify-content:center;padding-left:12px}

.authBtn.oauth.google{background:rgba(255,255,255,.06)}
.authBtn.oauth.github{background:rgba(255,255,255,.06);}
.authBtn.oauth.github .authBtnIcon{color:#e5e7eb}

.authEye{border:0;background:transparent;color:rgba(156,163,175,.95);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;border-radius:8px}
.authEye:hover{background:rgba(255,255,255,.06);color:rgba(229,231,235,.95)}
.authEye:focus{outline:2px solid rgba(96,165,250,.55);outline-offset:2px}

.authFootnote{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.4}

/* Link di default: ripristina colore e hover (senza toccare i bottoni .tool) */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Pagina progetti (/app): margini piccoli */
.appPage{max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:360px 1fr;align-items:start;gap:16px}
.createCard{position:sticky;top:78px}

/* Tabelle più allineate */
.tableHead,.tableRow{display:grid;grid-template-columns:minmax(200px,1fr) 160px minmax(260px,380px);gap:12px;align-items:center}
.tableHead{padding:10px 12px;background:rgba(0,0,0,.22);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.tableRow{padding:12px;border-top:1px solid rgba(255,255,255,.08)}

.rowTitle{display:block}
.rowLink{color:rgba(229,231,235,.95);font-weight:800;text-decoration:none}
.rowLink:hover{text-decoration:underline}

.rowActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rowActions .tool{padding:6px 10px;font-size:13px}

/* Card un filo più "premium" */
.props{box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* --- Top menu (sopra la toolbar) --- */
.menuBar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:rgba(2,6,23,.78);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px}
.menuLeft,.menuCenter,.menuRight{display:flex;align-items:center;gap:10px}
.menuBrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(229,231,235,.95)}
.menuBrandMark{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.28)}
.menuBrandText{font-weight:900;letter-spacing:.2px}

.menuDrop{position:relative}
.menuDrop summary{list-style:none;cursor:pointer;user-select:none;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(17,24,39,.55);color:rgba(229,231,235,.95);font-weight:700}
.menuDrop summary::-webkit-details-marker{display:none}
.menuDrop[open] summary{outline:2px solid rgba(96,165,250,.35);border-color:rgba(96,165,250,.35)}
.menuPanel{position:absolute;top:44px;left:0;min-width:220px;background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px;z-index:50}
.menuPanelRight{left:auto;right:0}
.menuItem{padding:9px 10px;border-radius:10px;color:rgba(229,231,235,.95);text-decoration:none;font-weight:700}
.menuItem:hover{background:rgba(255,255,255,.06);text-decoration:none}
.menuLink{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);text-decoration:none;color:rgba(229,231,235,.95);background:rgba(17,24,39,.40);font-weight:800}
.menuLink:hover{background:rgba(255,255,255,.06);text-decoration:none}

.menuTopLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  text-decoration:none;
  line-height:1;
  font-weight:600;
}
.menuTopLink:hover{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.28);
}

/* Pulsante Dona PayPal */
.btnDonate{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:#FFC439;color:#003087;
  border:1px solid #e5a600;
  font-weight:800;font-size:13px;line-height:1;
  cursor:pointer;text-decoration:none;
  transition:background .15s,box-shadow .15s,transform .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  font-family:inherit;
}
.btnDonate:hover{
  background:#FFD566;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  transform:translateY(-.5px);
}
.btnDonate:active{
  background:#e5a600;
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btnDonate svg{flex-shrink:0;color:#003087;}

@media (max-width: 900px){
  .menuCenter{gap:6px}
  .menuDrop summary{padding:7px 10px;font-size:13px}
  .menuBrandText{display:none}
}

/* --- Footer --- */
.footer{margin-top:18px;border-top:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.55);backdrop-filter:blur(8px)}
.footerInner{max-width:1200px;margin:0 auto;padding:14px;color:rgba(229,231,235,.92);display:flex;flex-direction:column;gap:2px}
.footerTitle{font-weight:900;letter-spacing:.2px}
.footerText{font-size:13px}

/* --- Pagine /app (progetti) --- */
.appPage{max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:360px 1fr;align-items:start;gap:16px}
.createCard{position:sticky;top:78px}

.tableHead,.tableRow{display:grid;grid-template-columns:minmax(200px,1fr) 160px minmax(260px,380px);gap:12px;align-items:center}
.tableHead{padding:10px 12px;background:rgba(0,0,0,.22);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.tableRow{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.rowTitle{display:block}
.rowLink{color:rgba(229,231,235,.95);font-weight:800;text-decoration:none}
.rowLink:hover{text-decoration:underline}
.rowActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rowActions .tool{padding:6px 10px;font-size:13px}
.props{box-shadow:0 10px 30px rgba(0,0,0,.22)}

@media (max-width: 980px){
  .main.appPage{grid-template-columns:1fr !important;}
  .appPage{padding:10px;}
  .createCard{position:static}
  .tableHead,.tableRow{grid-template-columns:1fr 1fr;}
}

@media (max-width: 640px){
  .appPage{padding:8px;}
  .hideSm{display:none}
  .tableHead,.tableRow{grid-template-columns:1fr;}
  .rowActions{justify-content:flex-start}
}

.cardGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.infoRow{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.infoKey{color:var(--muted);font-size:12px;margin-bottom:4px}
.infoVal{font-weight:700}

/* Evito che i link stile bottone (.tool) riprendano underline dai link globali; i link della toolbar restano puliti anche su hover. */
.tool,a.tool{text-decoration:none}
.tool:hover,a.tool:hover{text-decoration:none}

/* --- App page ("wow" mode) --- */
.appShell{grid-template-columns:380px 1fr;grid-template-rows:auto auto;gap:16px}
.appHero{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:
          radial-gradient(700px 280px at 10% 20%, rgba(96,165,250,.22), transparent 60%),
          radial-gradient(620px 260px at 85% 30%, rgba(168,85,247,.18), transparent 60%),
          linear-gradient(180deg, rgba(17,24,39,.78), rgba(17,24,39,.62));
  box-shadow:0 18px 70px rgba(0,0,0,.30);
}
.appHeroTitle{display:flex;align-items:center;gap:12px}
.appHeroIcon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.28);color:rgba(229,231,235,.98)}
.appHeroH{font-weight:950;letter-spacing:.2px;font-size:18px}
.appHeroSub{color:rgba(156,163,175,.95);font-size:13px;margin-top:2px}
.appHeroRight{display:flex;align-items:center;gap:10px}
.appStat{background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;min-width:110px;text-align:right}
.appStatK{color:rgba(156,163,175,.95);font-size:12px}
.appStatV{font-weight:950;font-size:20px;letter-spacing:.2px}

.appCard{background:rgba(17,24,39,.74);border:1px solid rgba(255,255,255,.12);border-radius:16px}
.appCardTitle{display:flex;align-items:center;gap:8px}

.inputPill{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid rgba(255,255,255,.10)}
.inputPill input{border:0;background:transparent;padding:0;outline:none;width:100%}
.inputIcon{color:rgba(156,163,175,.95);display:flex}

.appActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tool.appPrimary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.86));border-color:rgba(96,165,250,.45)}
.tool.appPrimary:hover{filter:brightness(1.02)}

.quickGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.quickCard{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.quickCard:hover{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));text-decoration:none}
.quickI{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.24);color:rgba(229,231,235,.95)}
.quickT{font-weight:900;color:rgba(229,231,235,.95)}
.quickS{color:rgba(156,163,175,.95);font-size:12px;margin-top:2px}

.projectsHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.10);color:rgba(156,163,175,.95);font-weight:800;font-size:12px}

.rowMeta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(96,165,250,.09);border:1px solid rgba(96,165,250,.16);color:rgba(229,231,235,.92);font-size:12px;font-weight:700}
.chip.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:rgba(156,163,175,.95)}

/* --- /app: ricerca, ordinamento, thumbnails --- */
.projectsTools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0}
.sortPills{display:flex;gap:8px;flex-wrap:wrap}
.sortBtn.selected{outline:2px solid rgba(96,165,250,.35);border-color:rgba(96,165,250,.35)}

.projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:minmax(280px,1fr) 170px minmax(260px,400px)}

.rowTop{display:flex;gap:12px;align-items:flex-start}
.thumb{border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(2,6,23,.35)}
.rowText{display:flex;flex-direction:column}

@media (max-width: 980px){
  .projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:1fr;}
}

/* --- Landing / Homepage (NUOVO) --- */
.landingBody{min-height:100vh;
  background:
          radial-gradient(1200px 600px at 12% 10%, rgba(96,165,250,.24), transparent 60%),
          radial-gradient(900px 620px at 82% 18%, rgba(168,85,247,.18), transparent 60%),
          radial-gradient(900px 520px at 30% 95%, rgba(34,197,94,.12), transparent 55%),
          linear-gradient(180deg,#0b1224,#0f172a);
}

.landingHeader{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  background:rgba(2,6,23,.62);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}

.landingBrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(229,231,235,.98)}
.landingBrandMark{width:34px;height:34px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:950;letter-spacing:.2px;
  background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.28)}
.landingBrandText{font-weight:950;letter-spacing:.2px}

.landingNav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.landingNavLink{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(17,24,39,.35);
  text-decoration:none;color:rgba(229,231,235,.92);font-weight:800;font-size:13px}
.landingNavLink:hover{background:rgba(255,255,255,.06);text-decoration:none}

.landingActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.landingBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(17,24,39,.55);color:rgba(229,231,235,.97);
  text-decoration:none;font-weight:900;letter-spacing:.2px;font-size:14px}
.landingBtn:hover{background:rgba(255,255,255,.06);text-decoration:none}
.landingBtn.primary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.86));border-color:rgba(96,165,250,.45)}
.landingBtn.primary:hover{filter:brightness(1.02)}
.landingBtn.big{padding:12px 16px;border-radius:16px;font-size:15px}

.landingMain{max-width:1600px;margin:0 auto;padding:22px 10px 40px 10px}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:stretch}
.heroLeft{padding:18px 4px}
.heroBadge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.20);color:rgba(229,231,235,.95);font-weight:900;font-size:12px}
.heroTitle{margin:12px 0 8px 0;font-size:40px;line-height:1.06;letter-spacing:-.6px}
.heroSubtitle{margin:0;color:rgba(156,163,175,.98);font-size:15px;line-height:1.6;max-width:54ch}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.heroTrust{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:18px}
.trustItem{background:rgba(17,24,39,.60);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px}
.trustK{color:rgba(156,163,175,.95);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}
.trustV{margin-top:6px;font-weight:950}

.heroRight{display:flex;flex-direction:column;gap:12px}
.shotCard{margin-top:15px; background:rgba(17,24,39,.70);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.35)}

/* Solo home: piccolo distacco sopra le card nella colonna mockup */
.landingBody .heroRight .shotCard{margin-top:15px}

.shotCard.mini{box-shadow:0 12px 50px rgba(0,0,0,.25)}
.shotTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;background:rgba(2,6,23,.35);border-bottom:1px solid rgba(255,255,255,.08)}
.shotTitle{font-weight:950}
.dots{display:flex;gap:6px}
.dots span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.18)}
.dots span:nth-child(1){background:rgba(239,68,68,.55)}
.dots span:nth-child(2){background:rgba(245,158,11,.55)}
.dots span:nth-child(3){background:rgba(34,197,94,.50)}

.shotCanvas{height:260px;background:radial-gradient(circle at 30px 30px, rgba(255,255,255,.04) 1px, transparent 1px);background-size:26px 26px}

/* Home: quando l'immagine è in contain, il "vuoto" diventa parte del design */
.landingBody .shotCanvas{
  /* contenitore responsivo: proporzioni reali screenshot (1400x900) */
  height:auto;
  aspect-ratio: 1400 / 900;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
          radial-gradient(900px 300px at 20% 10%, rgba(96,165,250,.12), transparent 55%),
          radial-gradient(760px 260px at 85% 25%, rgba(168,85,247,.18), transparent 55%),
          radial-gradient(circle at 30px 30px, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:auto, auto, 26px 26px;
}

.landingBody .shotCanvas img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;

  /* niente padding: l'immagine entra al pixel nel contenitore */
  padding:0;
  border-radius:0;
  box-shadow:none;
}

.shotFooter{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:rgba(2,6,23,.28);border-top:1px solid rgba(255,255,255,.08)}

.chipLite{display:inline-flex;align-items:center;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:rgba(156,163,175,.95);font-weight:900;font-size:12px}
.pillLite{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.22);color:rgba(229,231,235,.92);font-weight:900;font-size:12px}

.shotList{display:flex;flex-direction:column;gap:8px;padding:12px}
.shotRow{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(2,6,23,.30);border:1px solid rgba(255,255,255,.08)}
.shotRow .dot{width:10px;height:10px;border-radius:999px;background:rgba(96,165,250,.7)}
.shotRow .t{font-weight:900}
.shotRow .s{color:rgba(156,163,175,.95);font-size:12px;font-weight:800}

.landingSection{margin-top:34px}
.sectionTitle{margin:0;font-size:24px;letter-spacing:-.2px}
.sectionSubtitle{margin:8px 0 0 0;color:rgba(156,163,175,.95);line-height:1.6;max-width:70ch}

.featureGrid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;margin-top:14px}
.featureCard{background:rgba(17,24,39,.68);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.featureIcon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:950;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.24);color:rgba(229,231,235,.95)}
.featureTitle{margin-top:10px;font-weight:950}
.featureText{margin-top:6px;color:rgba(156,163,175,.95);line-height:1.55;font-size:13px}

.screenGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.screenCard{background:rgba(17,24,39,.68);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.screenLabel{font-weight:950}
.screenMock{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.screenHint{color:rgba(156,163,175,.95);font-weight:800}

.pricingHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pricingGrid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:14px}
.priceCard{background:rgba(17,24,39,.64);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.priceCard.highlight{border-color:rgba(96,165,250,.35);box-shadow:0 18px 60px rgba(0,0,0,.24)}
.priceTop{display:flex;flex-direction:column;gap:4px}
.priceName{font-weight:950;font-size:16px}
.priceMeta{color:rgba(156,163,175,.95);font-size:13px}
.priceList{margin:12px 0 0 0;padding-left:18px;color:rgba(156,163,175,.95);line-height:1.7}

/* --- Landing: pricing badge (FREE) --- */
.priceBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:10px 0;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:rgba(240,253,244,.98); /* green-50 */
  background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.88));
  border:1px solid rgba(34,197,94,.55);
  box-shadow:0 10px 24px rgba(34,197,94,.14);
}

/* Variante opzionale se mai usato su card scure più intense */
.priceCard.highlight .priceBadge{
  box-shadow:0 12px 28px rgba(34,197,94,.18);
}

/* --- Landing: sections padding (mobile) --- */
@media (max-width: 680px){
  .landingBody{padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);}
  .landingMain{padding-left:10px;padding-right:10px}
}

/* --- Modalità lavagna: altezza canvas solo lì --- */
body.boardBody .canvasWrap #board{height:calc(100vh - var(--topbar-height))}

/* Il canvas ha la sua altezza; non deve influire sulle pagine non-lavagna */
.canvasWrap #board{height:calc(100vh - var(--topbar-height))}

/* Footer: sempre sotto contenuto */
.footer{padding-bottom:10px}

/* --- Paginazione /app --- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.pagerInfo{color:rgba(156,163,175,.95);font-size:13px;font-weight:700}

/* --- Menu: miglioramenti UX/UI --- */
.menuBar{position:sticky;top:0;z-index:1000;
  background:rgba(2,6,23,.86);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.menuDrop summary{display:flex;align-items:center;gap:8px}
.menuDrop summary:after{content:"▾";opacity:.7;font-size:12px;transform:translateY(-1px)}
.menuDrop[open] summary:after{transform:rotate(180deg) translateY(1px)}

.menuDrop summary{transition:background .15s,border-color .15s,transform .15s}
.menuDrop summary:hover{background:rgba(255,255,255,.06)}
.menuDrop[open] summary{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.35)}

.menuPanel{z-index:1200;min-width:240px}
.menuItem{display:flex;align-items:center;gap:10px}

/* Overlay click-outside (solo visual, JS gestisce chiusura) */
.menuDrop[open] .menuPanel{animation:menuPop .12s ease-out}
@keyframes menuPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* In pagine con toolbar (topbar sticky), evitare che il contenuto finisca sotto: la topbar ha top:0, quindi deve stare sotto al menu */
.topbar{top:52px;z-index:900}

/* --- Dropdown utente (menu a destra) --- */
.userDrop summary{padding:8px 12px}
.userIcon{display:inline-flex;opacity:.9}
.userName{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menuPanelRight{left:auto;right:0}

/* --- Modali (riuso per progetto/account, ecc.) --- */
.modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal.hidden{display:none}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.modalCard{position:relative;width:min(720px,96vw);background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 18px 70px rgba(0,0,0,.55);padding:14px;max-height:calc(100vh - 120px);overflow:auto}
.modalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.modalTitle{font-weight:950;letter-spacing:.2px;font-size:16px}
.modalBody{display:flex;flex-direction:column;gap:10px}
.modalFooter{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.modalBody .field{margin-top:0}
.modalBody label{color:rgba(229,231,235,.90);font-size:13px;font-weight:800;letter-spacing:.15px}
.modalBody input,.modalBody textarea{width:100%}
.modalBody textarea{resize:vertical;min-height:80px;max-height:40vh}
.modalBody input:focus,.modalBody textarea:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* Floating left panel (props) */
.floatingPanel{
  position:fixed;
  left:24px;
  top:80px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:440px;
  max-width:calc(100% - 48px);
  /* match lavagna .props background: semi-transparent dark */
  background: rgba(17,24,39,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:6px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.45);
  color:var(--fg);
  max-height: calc(100vh - 120px);
  overflow:hidden;
  transition: transform 180ms ease, opacity 180ms ease;
}

.floatingPanel.fp-hidden{display:none !important}

.floatingPanel .panelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 8px;border-bottom:1px solid rgba(255,255,255,0.04);margin:0;width:100%;box-sizing:border-box}
.floatingPanel .panelTitle{font-weight:900;font-size:15px;line-height:1}
.floatingPanel .panelBody{padding:4px 8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 180px);scrollbar-width:none;-ms-overflow-style:none}
.floatingPanel .panelBody::-webkit-scrollbar{display:none}
.floatingPanel .panelFooter{padding:3px 8px;border-top:1px solid rgba(255,255,255,0.04);display:flex;justify-content:flex-end;gap:8px}

/* Riduci margini superiori dei campi nella finestra proprietà (senza cambiare font) */
.floatingPanel .field{margin-top:2px;gap:4px}
.floatingPanel label{font-size:13px}

/* Larghezze variabili del pannello in base al tipo selezionato */
.floatingPanel.panel-compact{width:320px}
.floatingPanel.panel-medium{width:320px}
.floatingPanel.panel-wide{width:320px}

/* Small responsive adjustments */
@media (max-width:900px) {
  .floatingPanel { left: 12px; right: 12px; width: auto; max-width: calc(100% - 24px); top: 64px; }
  .panelToggleBtn { right: 8px; top: 8px; }
  .boardMeta{left:8px;top:8px;max-width:calc(100% - 16px)}
}

/* Compatta la tabella attributi nel pannello flottante */
.floatingPanel .attrControls{gap:6px}
.floatingPanel .attrRow{display:flex;flex-direction:column;gap:6px;padding:6px 8px}
.floatingPanel .attrRowTop{display:grid;grid-template-columns:1fr auto 28px;gap:8px;align-items:center}
.floatingPanel .attrRowBottom{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:hidden}

/* Evita display:contents per le righe nel pannello */
.floatingPanel .attrRowTop,
.floatingPanel .attrRowBottom{display:flex !important}
.floatingPanel .attrRowTop{display:grid !important}

/* Vincoli sempre in orizzontale */
.attrSectionConstraints{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}

/* Pulsante elimina attributo: stile precedente */
.attrDeleteBtn.iconBtn{width:28px;height:28px;border-radius:8px}

/* Azioni proprietà: Elimina + controlli attributi su una riga */
.propsActionRow{padding-top:6px;padding-bottom:10px}
.propsActionRowInner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.propsActionRowInner > #btnDelete{flex:0 0 auto}
.propsActionRowInner > .attrControls{margin-top:0}

/* su pannelli stretti consenti wrap */
.floatingPanel.panel-compact .propsActionRowInner{flex-wrap:wrap;justify-content:flex-start}

/* Bottoni nella riga: testo centrato */
.propsActionRow .attrControls > .tool,
.propsActionRow .attrControls > button.tool{
  justify-content:center;
  text-align:center;
}

/* =========================================================
   Attributi: stile combo tipo + vincoli a badge (pill)
   ========================================================= */

/* Combo tipo (select) */
.attrTypeSelect,
.props .attrTypeSelect,
.floatingPanel .attrTypeSelect{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  background-image:
          linear-gradient(45deg, transparent 50%, rgba(229,231,235,.75) 50%),
          linear-gradient(135deg, rgba(229,231,235,.75) 50%, transparent 50%),
          linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0));
  background-position:
          calc(100% - 16px) calc(50% - 3px),
          calc(100% - 11px) calc(50% - 3px),
          100% 0;
  background-size:5px 5px, 5px 5px, 2.2em 100%;
  background-repeat:no-repeat;
}
.attrTypeSelect:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* Attributi: riempi tutta la riga con il campo Nome (nessun margine a destra) */
.attrRowTop,
.floatingPanel .attrRowTop{
  width:100%;
}

/* il wrapper del nome deve poter crescere fino in fondo */
.attrNameWrap{flex:1;min-width:0;}
.attrNameWrap input[type="text"],
.attrNameWrap .attrNameInput{
  width:100%;
  flex:1;
  min-width:0;
}

/* Vincoli: la riga deve prendere tutta la larghezza e la X va a destra */
.attrSectionConstraints,
.props .attrSectionConstraints,
.floatingPanel .attrSectionConstraints{
  width:100%;
  flex:1;
}

.attrSectionConstraints .attrDelInline{
  margin-left:auto;
}

/* FIX: nome attributo deve riempire tutta la colonna della grid */
.attrRowTop{
  grid-template-columns: minmax(0, 1fr) 150px;
}
.floatingPanel .attrRowTop{
  grid-template-columns: minmax(0, 1fr) auto;
}
.attrNameWrap{width:100%;display:block}

/* FIX: le pill dei vincoli non devono ereditare lo stile label della riga (che le rende "checkbox normali") */
.attrRow label.attrPill,
.floatingPanel .attrRow label.attrPill,
.props .attrRow label.attrPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(2,6,23,.45);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(229,231,235,.92);
  cursor:pointer;
}

.attrRow label.attrPill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Pill vincoli: stato selezionato (check celeste + bordo/accento) */
.attrRow label.attrPill input:checked + span,
.floatingPanel .attrRow label.attrPill input:checked + span,
.props .attrRow label.attrPill input:checked + span{
  color:#fff;
}

.attrRow label.attrPill input:checked + span::before,
.floatingPanel .attrRow label.attrPill input:checked + span::before,
.props .attrRow label.attrPill input:checked + span::before{
  content:'✓ ';
  color:rgba(96,165,250,.95);
  font-weight:900;
}

.attrRow label.attrPill:has(input:checked),
.floatingPanel .attrRow label.attrPill:has(input:checked),
.props .attrRow label.attrPill:has(input:checked){
  border-color:rgba(96,165,250,.45);
  background:rgba(96,165,250,.12);
}

/* Topbar: centra i tool (evita regressioni: i bottoni restano al centro) */
.toolbarCenter{
  width:100%;
  justify-content:center;
  position:relative;
}

.toolbarCenter .toolbarLeft{
  position:absolute;
  left:0;
}

/* =========================================================
   Proprietà ISA + Collegamento: stile select e checkbox coerente
   (mirato solo al pannello proprietà, non tocca entity/relation)
   ========================================================= */

/* Select nel pannello (ISA + cardinalità) come combo "tipo" */
.floatingPanel #isaFields select,
.floatingPanel #cardinalityFields select{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  background-image:
          linear-gradient(45deg, transparent 50%, rgba(229,231,235,.75) 50%),
          linear-gradient(135deg, rgba(229,231,235,.75) 50%, transparent 50%),
          linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0));
  background-position:
          calc(100% - 16px) calc(50% - 3px),
          calc(100% - 11px) calc(50% - 3px),
          100% 0;
  background-size:5px 5px, 5px 5px, 2.2em 100%;
  background-repeat:no-repeat;
}
.floatingPanel #isaFields select:focus,
.floatingPanel #cardinalityFields select:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* ISA children: checkbox più "moderna" (chip) */
.floatingPanel #propIsaChildren .attrRow{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* chip/label per ogni child, includendo checkbox */
.floatingPanel #propIsaChildren .attrRow label,
.floatingPanel #propIsaChildren .attrRow span{
  color:rgba(229,231,235,.92);
}

.floatingPanel #propIsaChildren input[type="checkbox"]{
  width:16px;
  height:16px;
  border-radius:4px;
  accent-color: rgba(96,165,250,.95);
}

/* CardPair: allinea meglio i due select come nei controlli moderni */
.floatingPanel .cardPair{display:flex;gap:8px;align-items:center}
.floatingPanel .cardPair select{min-width:90px}

/* --- Make menuItem buttons look exactly like links --- */
button.menuItem{
  appearance:none;
  -webkit-appearance:none;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-weight:700;
}

button.menuItem:focus{
  outline: none;
}

button.menuItem:focus-visible{
  outline: 2px solid rgba(96,165,250,.35);
  border-radius: 10px;
}

/* =========================================
   Tabs vista lavagna (Originale / Ristrutturato)
   ========================================= */
.topbarBoardOnly{flex-direction:column;align-items:stretch}

.boardViewTabs{
  display:block;
  padding:8px 14px 0 14px;
  background:rgba(17,24,39,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Quando la tabbar è presente, alza gli overlay bottom (status/zoom) per evitare che finiscano troppo in basso */
.topbarBoardOnly:has(.boardViewTabs){
  --board-tabs-offset: 34px;
}

.boardViewTabList{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.boardViewTab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  text-decoration:none;
  color:rgba(229,231,235,.88);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.2px;
  line-height:1;
}

.boardViewTab:hover{
  color:rgba(255,255,255,.98);
  border-bottom-color:rgba(255,255,255,.18);
}

.boardViewTab.active{
  color:rgba(255,255,255,.98);
  border-bottom-color:rgba(96,165,250,.75);
}

.boardViewTab:focus{outline:none}
.boardViewTab:focus-visible{
  outline:2px solid rgba(96,165,250,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* =========================================
   Restructure wizard (modal) – fix layout opzioni (attributi composti)
   Evita testo fuori/una lettera per riga per interferenze CSS globali.
========================================= */
#restructureModal #restructureSteps .rwChoices{display:flex;flex-direction:column;gap:8px;}
#restructureModal #restructureSteps .rwChoice{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;

  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
#restructureModal #restructureSteps .rwChoice:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);}
#restructureModal #restructureSteps .rwChoice.rwChoice--active{border-color:rgba(96,165,250,.40);background:rgba(96,165,250,.10);}

#restructureModal #restructureSteps .rwChoice__radio{
  flex:0 0 auto;
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: rgba(96,165,250,.95);
}

#restructureModal #restructureSteps .rwChoice__text{
  box-sizing:border-box;
  flex:1 1 auto;
  min-width:0;
  display:block;

  /* reset robusto contro CSS 'strani' */
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  float: none !important;

  font-weight:600;
  letter-spacing:0;
  color:rgba(229,231,235,.92);
  line-height:1.25;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

#restructureModal #restructureSteps .rwChecks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#restructureModal #restructureSteps .rwCheck{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;

  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
#restructureModal #restructureSteps .rwCheck:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);}

#restructureModal #restructureSteps .rwCheck__box{
  flex:0 0 auto;
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: rgba(96,165,250,.95);
}

#restructureModal #restructureSteps .rwCheck__text{
  box-sizing:border-box;
  flex:1 1 auto;
  min-width:0;
  display:block;

  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  float: none !important;

  font-weight:600;
  letter-spacing:0;
  color:rgba(229,231,235,.92);
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

#restructureModal #restructureSteps .rwInlineRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#restructureModal #restructureSteps .rwInlineRow input[type="text"],
#restructureModal #restructureSteps .rwInlineRow input[type="number"]{
  padding:8px 10px;
  border-radius:10px;
}

#restructureModal #restructureSteps .riTypeAttrBox,
#restructureModal #restructureSteps .rkChooseBox,
#restructureModal #restructureSteps .rmEntityBox,
#restructureModal #restructureSteps .rmDupBox{
  border-left:2px solid rgba(96,165,250,.25);
  padding-left:12px;
  margin-left:18px;
}

/* =========================================
   Restructure wizard – riepilogo finale (step 5)
========================================= */
#restructureModal #restructureSteps .rwSummary{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#restructureModal #restructureSteps .rwSumRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}

#restructureModal #restructureSteps .rwSumIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  flex:0 0 22px;
  margin-top:1px;
}

#restructureModal #restructureSteps .rwSumIcon--ok{
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.35);
  color:rgba(34,197,94,.98);
}

#restructureModal #restructureSteps .rwSumIcon--warn{
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.35);
  color:rgba(245,158,11,.98);
}

#restructureModal #restructureSteps .rwSumText{min-width:0;flex:1 1 auto;}
#restructureModal #restructureSteps .rwSumTitle{font-weight:900;letter-spacing:.1px;}

#restructureModal #restructureSteps .rwSumNote{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.30);
  background:rgba(245,158,11,.08);
  color:rgba(251,191,36,.98);
  line-height:1.35;
}

/* =========================================================
   Global form controls: select, textarea, file input
   Consistent with the dark theme (matches input styling)
   ========================================================= */
select{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(229,231,235,.6) 50%),
    linear-gradient(135deg, rgba(229,231,235,.6) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 9px) calc(50% - 3px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
  cursor:pointer;
}
select:focus{
  outline:2px solid rgba(96,165,250,.45);
  outline-offset:1px;
}
select option{
  background:#121826;
  color:#fff;
}

textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1224;
  color:var(--fg);
  resize:vertical;
  font-family:inherit;
  font-size:inherit;
  line-height:1.5;
}
textarea:focus{
  outline:2px solid rgba(96,165,250,.45);
  outline-offset:1px;
}

input[type="file"]{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.45);
  color:var(--fg);
  cursor:pointer;
}
input[type="file"]::file-selector-button{
  padding:6px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(96,165,250,.12);
  color:rgba(229,231,235,.95);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  margin-right:10px;
  transition:background .15s,border-color .15s;
}
input[type="file"]::file-selector-button:hover{
  background:rgba(96,165,250,.22);
  border-color:rgba(96,165,250,.4);
}