/* =========================================================
   Organigramma — Viewer pubblico
   Direzione estetica: "blueprint" — il disegno tecnico come
   metafora della struttura organizzativa. Tela blu inchiostro,
   linee di collegamento come tracciati di un progetto,
   card "carta" con angoli a squadra, etichette in monospace
   come annotazioni di disegno tecnico.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #0F1B2D;
  --ink-soft:   #16263D;
  --blueprint:  #5B9BD9;
  --blueprint-dim: #2E4A6B;
  --paper:      #F7F5EF;
  --paper-dim:  #E9E5D8;
  --graphite:   #1B2432;
  --slate:      #8FA1B8;
  --amber:      #E0973A;
  --radius: 8px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--paper);
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------------- Top bar ---------------- */
.top-bar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15,27,45,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(91,155,217,.25);
}
.top-bar-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand{ display: flex; align-items: center; gap: 12px; color: var(--blueprint); }
.brand-title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--paper);
  letter-spacing: -.01em;
}
.brand-sub{
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--slate);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.top-bar-tools{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.search-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(91,155,217,.3);
  border-radius: 20px;
  padding: 7px 14px;
  color: var(--slate);
}
.search-wrap:focus-within{
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(91,155,217,.18);
}
.search-wrap input{
  background: transparent;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .84rem;
  width: 160px;
}
.search-wrap input::placeholder{ color: var(--slate); }

.btn-tool{
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: transparent;
  color: var(--slate);
  border: 1px solid rgba(91,155,217,.3);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-tool:hover{ color: var(--blueprint); border-color: var(--blueprint); }
.btn-tool:focus-visible{ outline: 2px solid var(--blueprint); outline-offset: 2px; }

/* ---------------- Stato / errori ---------------- */
.chart-status{
  text-align: center;
  padding: 80px 20px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: .9rem;
}
.chart-status.error{ color: #E28B7D; }

/* ---------------- Struttura ad albero ---------------- */
main{ padding: 40px 20px 80px; overflow-x: auto; }

.chart-root{
  display: flex;
  justify-content: center;
  min-width: min-content;
}

.org-tree, .org-tree ul{
  display: flex;
  padding-top: 32px;
  position: relative;
  list-style: none;
  margin: 0;
}
.org-tree{ padding-top: 0; }

.org-tree ul{ padding-top: 40px; }

.org-tree li{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 18px 0;
  position: relative;
}

/* Linee di collegamento — stile "traccia di circuito" */
.org-tree li::before,
.org-tree li::after{
  content: '';
  position: absolute;
  top: 0;
  border-top: 1.5px solid var(--blueprint-dim);
  width: 50%;
  height: 40px;
}
.org-tree li::before{ right: 50%; }
.org-tree li::after{ left: 50%; border-left: 1.5px solid var(--blueprint-dim); }

.org-tree li:only-child::before,
.org-tree li:only-child::after{ display: none; }
.org-tree li:only-child{ padding-top: 0; }

.org-tree li:first-child::before{ border: none; }
.org-tree li:last-child::after{ border: none; }
.org-tree li:first-child::after{ border-radius: 6px 0 0 0; }
.org-tree li:last-child::before{ border-right: 1.5px solid var(--blueprint-dim); border-radius: 0 6px 0 0; }

.org-tree > li{ padding-top: 0; }
.org-tree > li::before,
.org-tree > li::after{ display: none; }

.org-tree ul::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1.5px solid var(--blueprint-dim);
  width: 0;
  height: 40px;
  transform: translateX(-50%);
}
.org-tree > li > ul::before{ height: 32px; }

/* ---------------- Card nodo ---------------- */
.node{
  position: relative;
  background: var(--paper);
  color: var(--graphite);
  border-radius: var(--radius);
  padding: 14px 18px 14px 16px;
  min-width: 190px;
  max-width: 230px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--paper-dim);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease;
}
.node:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.35); }
.node:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }

/* corner ticks — dettaglio "disegno tecnico" */
.node::before, .node::after{
  content:'';
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid var(--node-accent, var(--blueprint));
  opacity: .8;
}
.node::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.node::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; }

.node-id{
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--slate);
  display: block;
  margin-bottom: 4px;
}
.node-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.node-role{
  font-size: .74rem;
  color: #55606F;
  margin: 0;
}
.node-accent-bar{
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  background: var(--node-accent, var(--blueprint));
  border-radius: 0 2px 2px 0;
}
.node-link-tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.node.has-children .node-toggle{
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--blueprint);
  color: var(--blueprint);
  font-family: var(--font-mono);
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.node.has-children .node-toggle:hover{ background: var(--blueprint); color: var(--ink); }

.org-tree li.collapsed > ul{ display: none; }
.org-tree li.collapsed > .node::after{ }

.node.match-highlight{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.node.dim{ opacity: .35; }

/* ---------------- Pannello dettaglio ---------------- */
.detail-overlay{
  position: fixed; inset: 0;
  background: rgba(15,27,45,.55);
  backdrop-filter: blur(2px);
  z-index: 40;
}
.detail-panel{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(380px, 100vw);
  background: var(--paper);
  color: var(--graphite);
  z-index: 50;
  padding: 28px 26px;
  box-shadow: -20px 0 50px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.detail-panel.open{ transform: translateX(0); }
.detail-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--paper-dim);
  background: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--graphite);
}
.detail-close:hover{ border-color: var(--blueprint); color: var(--blueprint); }

.detail-eyebrow{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 8px;
}
.detail-title{
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.015em;
}
.detail-role{ color: var(--slate); font-size: .85rem; margin: 0 0 18px; }
.detail-desc{ font-size: .9rem; line-height: 1.6; color: #3B4657; margin: 0 0 22px; }

.detail-meta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  font-size: .82rem;
}
.detail-meta-row{ display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--paper-dim); padding-bottom: 8px; }
.detail-meta-row span:first-child{ color: var(--slate); }
.detail-meta-row span:last-child{ font-weight: 600; text-align: right; }

.detail-link-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--amber);
  font-weight: 600;
  font-size: .85rem;
  padding: 12px 18px;
  border-radius: 7px;
  text-decoration: none;
  width: 100%;
  justify-content: center;
}
.detail-link-btn:hover{ background: #1a2a45; }

.detail-children-title{
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--slate);
  margin: 0 0 10px;
}
.detail-children-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-children-list button{
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--paper-dim);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: .82rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--graphite);
  cursor: pointer;
}
.detail-children-list button:hover{ border-color: var(--blueprint); color: var(--blueprint); }

/* ---------------- Footer ---------------- */
.page-footer{
  text-align: center;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--blueprint-dim);
  border-top: 1px solid rgba(91,155,217,.15);
}
.footer-sep{ margin: 0 8px; opacity: .5; }

/* =========================================================
   Responsive — sotto i 760px l'albero orizzontale diventa
   una struttura verticale ad indentazione, più adatta al touch.
   ========================================================= */
@media (max-width: 760px){
  .top-bar-inner{ flex-direction: column; align-items: stretch; }
  .top-bar-tools{ justify-content: space-between; }
  .search-wrap{ flex: 1; }
  .search-wrap input{ width: 100%; }

  main{ padding: 24px 14px 60px; overflow-x: visible; }

  .chart-root{ display: block; }

  .org-tree, .org-tree ul{
    display: block;
    padding: 0 0 0 18px;
  }
  .org-tree{ padding-left: 0; }

  .org-tree li{
    display: block;
    padding: 10px 0 0 18px;
    position: relative;
  }
  .org-tree > li{ padding-left: 0; }

  .org-tree li::before,
  .org-tree li::after{
    width: 16px;
    height: auto;
    top: 0;
    left: -18px;
    right: auto;
    border-top: none;
    border-left: 1.5px solid var(--blueprint-dim);
  }
  .org-tree li::before{ top: 0; bottom: 50%; height: 22px; }
  .org-tree li::after{ top: 22px; bottom: 0; height: auto; border-left: 1.5px solid var(--blueprint-dim); border-top: 1.5px solid var(--blueprint-dim); width: 16px; }
  .org-tree li:last-child::before{ border-radius: 0; border-right: none; }

  .org-tree ul::before{ display: none; }

  .node{ max-width: none; width: 100%; }
  .node.has-children .node-toggle{ left: auto; right: 14px; bottom: auto; top: 14px; transform: none; }

  .detail-panel{ width: 100%; }
}

/* =========================================================
   Pagina d'area — contenuto generato dal pannello admin
   (introduzione, missione, funzioni e compiti, team).
   Condiviso tra la pagina dinamica public/area.html e le
   eventuali pagine statiche personalizzate in public/pages/.
   ========================================================= */

.page-wrap{ max-width: 920px; margin: 0 auto; padding: 48px 20px 90px; }

.page-back{
  color: var(--blueprint); font-family: var(--font-mono);
  font-size: .78rem; text-decoration: none; letter-spacing: .02em;
  display: inline-block;
}
.page-back:hover{ text-decoration: underline; }

.page-header{ margin: 22px 0 40px; }
.page-eyebrow{
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--slate); margin: 0 0 8px;
}
.page-title{
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  letter-spacing: -.02em; margin: 0 0 10px; color: var(--paper);
}
.page-lead{ color: var(--slate); font-size: .95rem; max-width: 640px; margin: 0; }

.panel-card{
  position: relative;
  background: var(--paper); color: var(--graphite);
  border-radius: 10px; padding: 28px 30px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  margin-bottom: 28px;
}
.panel-card::before, .panel-card::after{
  content:''; position:absolute; width:10px; height:10px;
  border: 1.5px solid var(--blueprint); opacity: .7;
}
.panel-card::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.panel-card::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.panel-card p{ line-height: 1.65; font-size: .92rem; margin: 0; }

.section-title{
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--blueprint-dim); margin: 44px 0 4px;
}
.section-heading{
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  color: var(--paper); margin: 0 0 18px; letter-spacing: -.01em;
}

.duties-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.duty-card{
  background: var(--paper); color: var(--graphite);
  border-radius: 9px; padding: 18px 20px;
  border-left: 3px solid var(--blueprint);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.duty-card h3{
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  margin: 0 0 6px;
}
.duty-card p{ font-size: .82rem; color: #55606F; margin: 0; line-height: 1.5; }

.team-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.person-card{
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); color: var(--graphite);
  border-radius: 9px; padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.person-avatar{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: #fff; background: var(--blueprint);
}
.person-name{ font-weight: 600; font-size: .9rem; margin: 0 0 2px; }
.person-role{ font-size: .78rem; color: var(--blueprint-dim); margin: 0 0 6px; }
.person-contact{ font-family: var(--font-mono); font-size: .72rem; color: var(--slate); margin: 0; }
.person-tag{
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 20px;
  background: rgba(76,143,209,.12); color: var(--blueprint-dim);
}
.person-tag.external{ background: rgba(224,151,58,.14); color: #9c6317; }

.empty-note{ font-size: .82rem; color: var(--slate); font-style: italic; }

.page-status{
  text-align: center;
  padding: 80px 20px;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: .9rem;
}
.page-status.error{ color: #E28B7D; }