/* style.css */

:root {
 --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
 --sidebar-width: 300px;

 /* --- TUTTI I COLORI DELLA MODALITÀ CHIARA --- */
 --bg-main: #ffffff; /* Sfondo corpo manuale */
 --bg-sidebar: #f6f5f4; /* Sfondo sidebar */
 --bg-hover: #ebebeb; /* Sfondo quando passi il mouse sui capitoli */
 --bg-code: #f5f5f7; /* Sfondo dei blocchi di codice/formule */
 
 --text-main: #000000; /* Testo dei paragrafi e tabelle (Alto Contrasto) */
 --text-sidebar: #000000; /* Testo dei capitoli attivi/inattivi (Alto Contrasto) */
 --text-muted: #505050; /* Testo dei titoli delle Parti (Starting, ecc.) */
 --text-code: #bf1650; /* Colore dei comandi inline */
 
 --accent-color: #0064ee; /* L'azzurro dei link e del capitolo attivo */
 --arrow-color: #909090; /* Il grigio della freccetta › */
 --border-color: #d8d8de; /* Linee divisorie */
 
 --tip-bg: #fff9e6; 
 --tip-border: #ffb300; 
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 font-family: var(--font-family);
 background-color: var(--bg-main);
 color: var(--text-main);
 display: flex;
 min-height: 100vh;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}

/* Layout Strutturale */
#sidebar-frame {
 width: 300px;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 border: none;
 border-right: 1px solid var(--border-color);
}

main {
 margin-left: var(--sidebar-width);
 flex-grow: 1;
 padding: 20px 20px;
 max-width: 900px;
 background-color: var(--bg-main);
}

/* Intestazione della Sidebar (Icona + Titolo dell'app) */
.sidebar-header {
 display: flex;
 align-items: center; /* Questo centra verticalmente testo e immagine */
 gap: 12px; /* Crea uno spazio uniforme tra l'immagine e il testo */
 padding: 24px 12px 12px 12px; 
 position: sticky;
 top: 0;
 background-color: var(--bg-sidebar); /* Evita che i capitoli si vedano in trasparenza sotto l'icona */
 z-index: 10; /* Tiene l'header sempre "sopra" al testo che scorre */
}

.sidebar-header img {
 display: block; /* Rimuove spazi vuoti microscopici sotto l'immagine */
}

.sidebar-header span {
 font-size: 18px; /* Dimensione del font in stile Apple Help */
 font-weight: 600; /* Semibold per dare la giusta importanza al nome dell'app */
 color: var(--text-sidebar);
}

/* STRUTTURA INDICE GERARCHICO (Sidebar) */
.sidebar-menu {
 list-style: none;
 padding: 0 12px; /* Raddrizza il blocco principale nella sidebar */
}

/* Stile del titolo della Parte (cliccabile per aprire/chiudere) */
.menu-group summary {
 font-size: 14px;
 font-weight: 600;
 color: var(--text-muted);
 letter-spacing: 0.6px;
 padding: 0px;
 cursor: pointer;
 list-style: none; /* Rimuove la freccia di default su Safari/Chrome */
 display: flex;
 justify-content: space-between;
 align-items: center;
 user-select: none;
}

/* Rimuove definitivamente la freccetta nativa su Chrome/Blink */
.menu-group summary::-webkit-details-marker {
 display: none;
}

/* Aggiungiamo una freccetta stile Apple che ruota */
.menu-group summary::after {
 content: "›";
 font-size: 16px;
 font-weight: normal;
 transform: rotate(0deg);
 transition: transform 0.12s ease-in-out;
 display: inline-block;
 color: var(--arrow-color);
}

/* Quando la parte è APERTA, la freccia ruota verso il basso */
.menu-group[open] summary::after {
 transform: rotate(90deg); /* Ora ruota correttamente */
}

.menu-group summary:hover {
 color: var(--text-sidebar);
}

/* Sotto-lista dei capitoli interni */
.chapter-list {
 list-style: none;
 padding-left: 0;
 margin-bottom: 12px;
}

.chapter-list li {
 display: block;
 font-size: 11px;
 line-height: 1.2;
 margin-bottom: 2px; /* Compatta la lista in verticale come nei menu Apple */
	padding: 3px 10px 3px 22px; 
 text-indent: -12px; /* Riporta indietro solo la prima riga di 12px */
 margin-right: -12px; /* Riporta il testo alla sua posizione originale a destra */}

.chapter-list a {
 color: var(--text-sidebar);
 text-decoration: none;
 font-size: 13px;
 /* Sovrascrive il finto grassetto ereditato da Chrome, garantendo uniformità */
 font-weight: 400 !important; 
 border-radius: 6px;
 transition: background-color 0.1s ease;
}


.chapter-list a:hover {
 background-color: var(--bg-hover); 
 color: var(--text-sidebar); 
}

/* Capitolo attivo / Pagina corrente */
.chapter-list li.active a {
 background-color: var(--accent-color);
 	color: #ffffff !important;
 font-weight: 500 !important; /* Un semibold leggero e leggibile sia su Safari che su Chrome */
}


/* ==========================================================================
 4. TIPOGRAFIA, ELEMENTI DEL MANUALE E CONTENUTI
 ========================================================================== */

/* Titolo Principale della Pagina */
h1 {
 font-size: 32px;
 font-weight: 700;
 letter-spacing: -0.5px;
 color: var(--text-main);
 margin-top: 10px;
 margin-bottom: 24px;
 line-height: 1.2;
}

/* Sotto-capitoli Principali */
h2 {
 font-size: 22px;
 font-weight: 600;
 letter-spacing: -0.3px;
 color: var(--text-main);
 margin-top: 42px;
 margin-bottom: 14px;
 border-bottom: 1px solid var(--border-color);
 padding-bottom: 6px;
}

/* Sotto-sezioni Brevi */
h3 {
 font-size: 17px;
 font-weight: 600;
 color: var(--text-main);
 margin-top: 28px;
 margin-bottom: 10px;
}

/* Titoli Minori o Etichette */
h4 {
 font-size: 14px;
 font-weight: 600;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.2px;
 margin-top: 20px;
 margin-bottom: 8px;
}

/* Paragrafi di Testo */
p {
 font-size: 14px;
 line-height: 1.4;
 color: var(--text-main);
 margin-bottom: 10px;
}

/* --- Linee di Separazione Nette --- */
hr {
 border: 0;
 height: 1px;
 background-color: var(--border-color);
 margin: 15px 0;
}

/* --- Elenchi Puntati (ul) e Numerati (ol) --- */
ul, ol {
 margin-bottom: 20px;
 padding-left: 24px;
}

ul {
 list-style-type: disc;
}

li {
 font-size: 14.5px;
 line-height: 1.45;
 color: var(--text-main);
 margin-bottom: 8px; /* Spazio tra un punto e l'altro per respirare */
}

/* Elenchi nidificati (un elenco dentro l'altro) */
li ul, li ol {
 margin-top: 6px;
 margin-bottom: 6px;
 padding-left: 20px;
}

/* --- Liste di Descrizione / Glossari (dl, dt, dd) --- */
dl {
 margin-bottom: 20px;
}

dt {
 font-size: 14.5px;
 font-weight: 350;
 color: var(--text-main);
 margin-top: 12px;
 margin-bottom: 4px;
}

dd {
 font-size: 14px;
 line-height: 1.45;
 color: var(--text-main);
 padding-left: 24px;
 margin-bottom: 12px;
}

/* --- Link in stile Apple Help (Anteprima) --- */
a {
 color: var(--accent-color); /* Sistemato il nome della variabile corretto */
 font-weight: 500;
 text-decoration: none; /* Rimuove completamente la sottolineatura */
}

a:hover {
 text-decoration: underline; /* Si sottolinea solo se l'utente ci passa sopra */
}

/* --- Codice, Scorciatoie e Formule (Essenziali per iNMR) --- */

/* Testo monospazio nel flusso del paragrafo (es. tasti o comandi) */
code {
 font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
 font-size: 13.5px;
 background-color: var(--bg-code);
 padding: 3px 6px;
 border-radius: 4px;
 color: var(--text-code); /* Un rosso scuro elegante per far risaltare i comandi */
}

/* Blocchi di codice o script interi (pre) */
pre {
 font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 font-size: 13px;
 background-color: var(--bg-code);
 padding: 5px;
 border-radius: 8px;
 overflow-x: auto; /* Se la riga è lunga appare la barra di scorrimento interna */
 margin-bottom: 1px;
 border: 1px solid var(--border-color);
}

/* Rende il tag code dentro pre pulito e senza sfondo doppio */
pre code {
 background-color: transparent;
 padding: 0;
 color: var(--text-main);
}

/* --- Tabelle Dati (Parametri, Comandi, ecc.) --- */
/* --- Tabelle in stile Apple Help (Anteprima) --- */
table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 28px;
 margin-top: 16px;
 font-size: 14px;
 /* La linea iniziale superiore, più marcata, sopra l'header */
 border-top: 2.5px solid var(--border-color); 
}

th {
 background-color: var(--bg-main); /* Sfondo rigorosamente bianco in Light Mode, scuro in Dark */
 color: var(--text-main);
 font-weight: 600;
 text-align: left;
 padding: 12px 8px;
 /* Linea sotto l'header, definita ma meno spessa di quella superiore */
 border-bottom: 2px solid var(--border-color); 
}

td {
 padding: 12px 8px;
 /* Linee di divisione tra i dati, molto sottili e discrete */
 border-bottom: 1px solid var(--border-color); 
 color: var(--text-main);
 vertical-align: top;
}

/* Rimuoviamo l'effetto hover sulle righe per mantenere lo stile statico e stampabile di Apple */
tr:hover td {
 background-color: transparent; 
}

/* IL NUOVO BOX SUGGERIMENTO STILE APPLE */
.tip-box {
 background-color: var(--tip-bg);
 border-left: 4px solid var(--tip-border);
 padding: 16px 20px;
 border-radius: 4px;
 margin: 24px 0;
}

.tip-box h3 {
 font-size: 15px;
 font-weight: 600;
 color: #bf8000; /* Testo scuro coordinato con l'ocra */
 margin-bottom: 4px;
}

.tip-box p {
 font-size: 14px;
 color: #5c4300;
 margin-bottom: 0;
 line-height: 1.5;
}

.sticky {
	position: sticky;
	width: 99.99%;
	top: 0;
 background-color: var(--bg-main); /* Evita che i capitoli si vedano in trasparenza sotto l'icona */
	z-index: 10;
 border: 0.5px solid var(--border-color); 
}

.sticky a:visited {
	color: var(--text-code);
} 

/* ==========================================================================
 SUPPORTO DARK MODE AUTOMATICO (Inverte le variabili del :root)
 ========================================================================== */
@media (prefers-color-scheme: dark) {
 :root {
 /* Invertiamo gli sfondi */
 --bg-main: #1e1e1e; /* Sfondo manuale scuro (Grigio grafite) */
 --bg-sidebar: #252525; /* Sfondo sidebar ancora più scuro */
 --bg-hover: #3a3a3c; /* Grigio più chiaro quando passi il mouse sui capitoli */
 --bg-code: #2d2d2d; /* Sfondo dei blocchi di codice e formule */
 
 /* Invertiamo i testi */
 --text-main: #f5f5f7; /* Testo del manuale bianco morbido (non accecante) */
 --text-sidebar: #f5f5f7; /* Testo dei capitoli in bianco morbido */
 --text-muted: #a1a1a6; /* I titoli delle Parti (Starting...) diventano grigio chiaro */
 --text-code: #ff7b9f; /* I comandi inline passano a un rosa/rosso acceso per staccare dallo scuro */
 
 /* Dettagli, link e bordi per il buio */
 --accent-color: #2f94ff; /* Un azzurro Apple leggermente più luminoso per non perdersi sul nero */
 --arrow-color: #747478; /* La freccetta › diventa un grigio visibile */
 --border-color: #323236; /* Linee divisorie scure e discrete */
 
 /* Adattiamo il box dei suggerimenti per la notte */
 --tip-bg: #2c2514; /* Sfondo ocra scurissimo, quasi nero */
 --tip-border: #bf8000; /* Bordo ocra ambrato */
 }
 
 /* Piccolo trucco per evitare che l'icona dell'applicazione spari un bianco accecante */
.sidebar-header img {
 opacity: 0.9;
 }
}

/* --- ECCEZIONI PER IL FILE SIDEBAR DENTRO L'IFRAME --- */

body:has(.sidebar-menu), 
body:has(.chapter-list) {
 display: block !important;
 background-color: var(--bg-sidebar) !important;
 padding: 0;
 margin: 0;
}