/* ============================================================
   documenti.css
   Layout wiki: navbar macrocategorie | sidebar | contenuto
   ============================================================ */

/* ── Layout standalone ───────────────────────────────────── */
.doc-body {
  margin:         0;
  padding:        0;
  background:     var(--at-notte);
  color:          var(--at-testo);
  font-family:    var(--at-font);
  height:         100vh;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

.doc-header-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.25rem;
  height:          48px;
  background:      var(--at-ardesia);
  border-bottom:   1px solid var(--at-bordo);
  flex-shrink:     0;
}

.doc-header-bar__sx {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

.doc-header-bar__logo {
  font-family: var(--at-font);
  font-size:   1rem;
  color:       var(--at-oro);
  font-weight: 600;
}

.doc-header-bar__sep {
  color:     var(--at-grigio);
  font-size: .9rem;
}

.doc-header-bar__titolo {
  color:       var(--at-luna);
  font-family: var(--at-font-ui);
  font-size:   .88rem;
}

.doc-header-bar__dx {
  display:     flex;
  align-items: center;
  gap:         .75rem;
}

.doc-header-bar__chiudi {
  background:    none;
  border:        1px solid var(--at-bordo);
  border-radius: var(--at-radius);
  color:         var(--at-grigio);
  font-family:   var(--at-font-ui);
  font-size:     .82rem;
  padding:       .3rem .7rem;
  cursor:        pointer;
  transition:    color .15s, border-color .15s;
}

.doc-header-bar__chiudi:hover {
  color:        var(--at-pericolo);
  border-color: var(--at-pericolo);
}

/* ── Layout principale ───────────────────────────────────── */
.doc-layout {
  display:        flex;
  flex-direction: column;
  flex:           1;
  overflow:       hidden;
}

/* ── Navbar macrocategorie ───────────────────────────────── */
.doc-nav {
  display:       flex;
  align-items:   center;
  gap:           .25rem;
  padding:       0 1rem;
  background:    var(--at-ardesia);
  border-bottom: 1px solid var(--at-bordo);
  flex-shrink:   0;
  height:        48px;
  overflow-x:    auto;
}

.doc-nav__loading {
  color:     var(--at-grigio);
  font-size: .85rem;
  padding:   0 .5rem;
}

.doc-nav__tab {
  display:         flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .4rem 1rem;
  border:          1px solid transparent;
  border-radius:   var(--at-radius);
  background:      none;
  color:           var(--at-testo-muted);
  font-family:     var(--at-font-ui);
  font-size:       .88rem;
  font-weight:     500;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      color .15s, border-color .15s, background .15s;
  text-decoration: none;
}

.doc-nav__tab:hover {
  color:        var(--at-luna);
  border-color: var(--at-acciaio);
  background:   var(--at-nebbia);
}

.doc-nav__tab--attivo {
  color:        var(--at-oro);
  border-color: var(--at-ottone);
  background:   rgba(181,136,42,0.08);
}

.doc-nav__tab i { font-size: .8rem; opacity: .7; }

/* ── Corpo (sidebar + contenuto) ─────────────────────────── */
.doc-corpo {
  display:  flex;
  flex:     1;
  overflow: hidden;
}

/* ── Sidebar sinistra ────────────────────────────────────── */
.doc-sidebar {
  width:          260px;
  flex-shrink:    0;
  background:     var(--at-ardesia);
  border-right:   1px solid var(--at-bordo);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.doc-sidebar__search {
  padding:       .6rem .75rem;
  border-bottom: 1px solid var(--at-bordo);
}

.doc-sidebar__search input {
  width:         100%;
  background:    var(--at-notte);
  border:        1px solid var(--at-bordo);
  border-radius: 4px;
  color:         var(--at-luna);
  padding:       .35rem .6rem;
  font-size:     .85rem;
}

.doc-tree {
  overflow-y: auto;
  flex:       1;
  padding:    .5rem 0;
}

.doc-tree__vuoto {
  padding:    .75rem 1rem;
  color:      var(--at-grigio);
  font-size:  .85rem;
  font-style: italic;
}

/* Albero */
.doc-tree__lista,
.doc-tree__sublista {
  list-style: none;
  margin:     0;
  padding:    0;
}

.doc-tree__sublista {
  display:      none;
  padding-left: 1rem;
}

.doc-tree__sublista--aperta { display: block; }

.doc-tree__row {
  display:     flex;
  align-items: center;
  gap:         .25rem;
}

.doc-tree__toggle {
  background:  none;
  border:      none;
  color:       var(--at-grigio);
  cursor:      pointer;
  padding:     .2rem .3rem;
  font-size:   .7rem;
  flex-shrink: 0;
  transition:  transform .15s;
}

.doc-tree__toggle[aria-expanded="true"] { transform: rotate(90deg); }

.doc-tree__spacer {
  width:       1.4rem;
  display:     inline-block;
  flex-shrink: 0;
}

.doc-tree__link {
  display:         block;
  padding:         .3rem .5rem .3rem 0;
  color:           var(--at-luna);
  text-decoration: none;
  font-size:       .875rem;
  flex:            1;
  border-radius:   3px;
  transition:      color .15s;
}

.doc-tree__link:hover   { color: var(--at-oro); }
.doc-tree__link--attivo { color: var(--at-oro); font-weight: 600; }

.doc-tree__loading,
.doc-tree__errore {
  padding:   .75rem 1rem;
  color:     var(--at-grigio);
  font-size: .85rem;
}

/* ── Contenuto centrale ──────────────────────────────────── */
.doc-content {
  display:        flex;
  flex-direction: column;
  flex:           1;
  overflow:       hidden;
}

.doc-breadcrumb {
  padding:       .5rem 1.25rem;
  border-bottom: 1px solid var(--at-bordo);
  font-size:     .8rem;
  color:         var(--at-grigio);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  gap:           .25rem;
  flex-wrap:     wrap;
  min-height:    2rem;
}

.doc-bc__link       { color: var(--at-grigio); text-decoration: none; }
.doc-bc__link:hover { color: var(--at-oro); }
.doc-bc__corrente   { color: var(--at-luna); }
.doc-bc__sep        { color: var(--at-bordo); }

.doc-article {
  flex:       1;
  overflow-y: auto;
  padding:    1.25rem 1.75rem;
}

.doc-article__header {
  margin-bottom:  1.25rem;
  border-bottom:  1px solid var(--at-bordo);
  padding-bottom: .75rem;
}

.doc-article__header h1 {
  font-size: 1.5rem;
  color:     var(--at-luna);
  margin:    0 0 .25rem;
}

.doc-article__meta {
  font-size: .75rem;
  color:     var(--at-grigio);
}

.doc-article__corpo {
  color:       var(--at-luna);
  font-family: var(--at-font);
  line-height: 1.75;
  font-size:   .95rem;
}

.doc-article__corpo h2 { color: var(--at-oro);  font-size: 1.15rem; margin-top: 1.75rem; }
.doc-article__corpo h3 { color: var(--at-luna); font-size: 1rem;    margin-top: 1.25rem; }
.doc-article__corpo a  { color: var(--at-oro); }

.doc-welcome {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--at-grigio);
}

.doc-welcome i {
  font-size:     2.5rem;
  display:       block;
  margin-bottom: .75rem;
}

.doc-article__loading,
.doc-article__errore {
  color:     var(--at-grigio);
  font-size: .9rem;
  padding:   1rem 0;
}

.doc-article__vuoto {
  color:      var(--at-grigio);
  font-style: italic;
  padding:    1rem 0;
}

/* ── Indice figli ────────────────────────────────────────── */
.doc-indice {
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  margin-top:     1rem;
}

.doc-indice__voce {
  display:         flex;
  align-items:     center;
  gap:             .6rem;
  padding:         .6rem .85rem;
  background:      var(--at-ardesia);
  border:          1px solid var(--at-acciaio);
  border-radius:   4px;
  color:           var(--at-luna);
  text-decoration: none;
  font-family:     var(--at-font-ui);
  font-size:       .95rem;
  transition:      border-color .15s, color .15s;
}

.doc-indice__voce:hover {
  border-color:    var(--at-oro);
  color:           var(--at-oro);
  text-decoration: none;
}

.doc-indice__voce i { font-size: .7rem; color: var(--at-grigio); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .doc-nav     { height: auto; flex-wrap: wrap; padding: .5rem; }
  .doc-corpo   { flex-direction: column; }
  .doc-sidebar { width: 100%; max-height: 35vh; border-right: none; border-bottom: 1px solid var(--at-bordo); }

  .doc-header-bar {
    height:    auto;
    padding:   .5rem 1rem;
    flex-wrap: wrap;
    gap:       .5rem;
  }
}