/* reset di base, lo metto per tutti gli elementi (*) */
/* serve per azzerare i margini di default che ogni browser mette suoi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* cosi padding e bordi non si sommano alla larghezza */
}

/* stile generale di tutto il sito */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f4f7; /* grigio chiaro di sfondo */
    color: #333; /* colore del testo (grigio scuro, non nero) */
}

/* === LAYOUT ===
   contenitore principale: sidebar a sinistra + content a destra */
.layout {
    display: flex; /* flex = li mette in fila */
    min-height: 100vh; /* alto come tutta la finestra (vh = viewport height) */
}

/* === SIDEBAR (menu laterale) === */
.sidebar {
    width: 220px;
    background-color: #1e293b; /* blu scuro */
    color: white;
    padding: 30px 20px; /* 30 sopra/sotto, 20 di lato */
}

/* titolo SmartSchool */
.sidebar h2 {
    font-size: 20px;
    margin-bottom: 2px;
}

/* sottotitolo Monitor, con > p prendo solo i p diretti dentro sidebar */
.sidebar > p {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 30px;
}

/* link del menu */
.sidebar a {
    display: block; /* block = il link occupa tutta la riga */
    color: #cbd5e1;
    text-decoration: none; /* tolgo la sottolineatura */
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 6px; /* angoli arrotondati */
    font-size: 14px;
    transition: background-color 0.2s; /* effetto fluido al passaggio mouse */
}

/* effetto quando passo sopra al link */
.sidebar a:hover {
    background-color: #334155;
    color: white;
}

/* link della pagina attuale (evidenziato in blu) */
.sidebar a.active {
    background-color: #3b82f6;
    color: white;
}

/* le iconcine accanto ai link del menu */
.menu-icon {
    display: inline-block;
    width: 22px;
    text-align: center;
    margin-right: 6px;
}

/* === CONTENT (parte destra della pagina) === */
.content {
    flex: 1; /* flex 1 = prende tutto lo spazio rimasto */
    padding: 30px;
}

/* barra in alto col titolo */
.topbar {
    margin-bottom: 25px;
    position: relative; /* serve per posizionare i bottoni dentro */
}

.topbar h1 {
    font-size: 24px;
    margin-bottom: 4px;
}

.topbar p {
    font-size: 14px;
    color: #666;
}

/* contenitore dei bottoni in alto a destra (logout + lingua) */
.topbar-buttons {
    position: absolute; /* assoluto rispetto alla topbar che e' relative */
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* bottone cambio lingua */
#btn-lingua {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer; /* la manina sopra al bottone */
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.2s;
}

#btn-lingua:hover {
    background-color: #2563eb; /* blu piu scuro al passaggio */
}

/* bottone logout (rosso) */
.btn-logout {
    background-color: #ef4444;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-logout:hover {
    background-color: #dc2626;
}

/* === CARD (le box bianche con i numeri) === */

/* contenitore delle 3 card */
.cards {
    display: flex; /* le metto in fila */
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap; /* se non ci stanno vanno a capo */
}

/* singola card */
.card {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    flex: 1; /* tutte si dividono lo spazio */
    min-width: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* ombra leggera */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* effetto carino: card si solleva un po' al passaggio mouse */
.card:hover {
    transform: translateY(-3px); /* si sposta in alto di 3 pixel */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ombra piu marcata */
}

.card p {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
}

/* il numero grande dentro la card */
.card h3 {
    font-size: 28px;
    margin-bottom: 4px;
}

.card span {
    font-size: 12px;
    color: #aaa;
}

/* === PANNELLO con la tabella === */
.panel {
    background-color: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.panel h2 {
    font-size: 18px;
    margin-bottom: 15px;
}

/* tabelle */
table {
    width: 100%;
    border-collapse: collapse; /* unisce i bordi delle celle */
}

/* intestazioni della tabella */
table th {
    text-align: left;
    padding: 10px 12px;
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-size: 13px;
    color: #555;
}

/* celle normali */
table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

/* effetto sulle righe della tabella al passaggio mouse */
table tr:hover {
    background-color: #f8fafc;
}

/* === PRICING (pagina dei piani) === */

/* le card dei piani sono diverse: centrate e col bordo */
.pricing .card {
    text-align: center;
    padding: 30px 20px;
    border: 2px solid #e2e8f0;
}

.pricing .card h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

/* il prezzo grande */
.pricing .card .prezzo {
    font-size: 32px;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 20px;
}

/* lista delle caratteristiche del piano */
.pricing .card ul {
    list-style: none; /* tolgo i pallini */
    text-align: left;
}

.pricing .card ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #555;
}

/* colori bordi diversi per ogni piano */
.piano-base { border-color: #94a3b8; }   /* grigio */
.piano-medium { border-color: #3b82f6; } /* blu */
.piano-high { border-color: #f59e0b; }   /* arancione */

/* === LOGIN E REGISTER (box centrato) === */

/* contenitore che centra il box nella pagina */
.landing {
    display: flex;
    justify-content: center; /* centra orizzontalmente */
    align-items: center; /* centra verticalmente */
    min-height: 100vh;
    padding: 20px;
}

/* il box bianco con dentro il form */
.landing-box {
    background-color: white;
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 450px;
    width: 100%;
    text-align: center;
    position: relative; /* per posizionare il btn lingua dentro */
}

.landing-box h1 {
    font-size: 28px;
    margin-bottom: 8px;
    color: #1e293b;
}

.landing-box > p {
    color: #666;
    margin-bottom: 30px;
}

/* bottone lingua nel box (in alto a destra) */
.landing-box #btn-lingua {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* === FORM === */
.form-login {
    display: flex;
    flex-direction: column; /* uno sotto l'altro */
    gap: 12px;
    margin-bottom: 20px;
}

/* le label sopra agli input */
.form-login label {
    text-align: left;
    font-size: 13px;
    color: #555;
    font-weight: bold;
}

/* gli input del form */
.form-login input {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit; /* eredita il font dal body */
}

/* quando clicco dentro l'input, bordo blu */
.form-login input:focus {
    outline: none;
    border-color: #3b82f6;
}

.form-login button {
    margin-top: 10px;
}

/* messaggi di errore in rosso */
.errore {
    color: #ef4444;
    font-size: 13px;
    margin-top: 5px;
}

/* messaggi di successo in verde */
.successo {
    color: #16a34a;
    font-size: 13px;
    margin-top: 5px;
}

/* link sotto al form */
.link-indietro {
    display: block;
    color: #666;
    font-size: 13px;
    text-decoration: none;
    margin-top: 8px;
}

.link-indietro:hover {
    color: #3b82f6;
}

/* === HOME (index.php) === */

/* la home ha lo sfondo bianco invece di grigio */
body.home {
    background-color: white;
}

/* header in alto della home */
.home-header {
    display: flex;
    justify-content: space-between; /* logo a sx, menu a dx */
    align-items: center;
    padding: 20px 60px;
    border-bottom: 1px solid #e2e8f0;
}

/* logo a sinistra */
.home-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #1e293b;
}

.logo-icon {
    font-size: 24px;
}

/* menu a destra */
.home-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.home-nav a {
    color: #555;
    text-decoration: none;
    font-size: 14px;
}

.home-nav a:hover {
    color: #3b82f6;
}

/* il bottone Registrati nell'header */
.home-nav a.btn-primary {
    color: white;
    padding: 8px 18px;
    border-radius: 6px;
}

/* === BOTTONI === */

/* bottone primario (blu pieno) */
.btn-primary {
    background-color: #3b82f6;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #2563eb;
}

/* bottone secondario (sfondo bianco, solo bordo) */
.btn-secondary {
    background-color: white;
    color: #3b82f6;
    text-decoration: none;
    padding: 12px 24px;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: #eff6ff;
}

/* versione piu grande del bottone */
.btn-large {
    padding: 14px 30px;
    font-size: 15px;
}

/* === SEZIONI DELLA HOME === */

/* sezione HERO (titolone in alto) */
.hero {
    text-align: center;
    padding: 80px 60px;
    background: linear-gradient(180deg, #f8fafc 0%, white 100%); /* sfumatura */
}

.hero h1 {
    font-size: 42px;
    color: #1e293b;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto; /* questi due centrano il titolo */
    margin-right: auto;
}

.hero-sub {
    font-size: 17px;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

/* bottoni grandi nella hero */
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* sezione FEATURES (cosa offriamo) */
.features {
    padding: 80px 60px;
    background-color: #f8fafc;
}

.features h2 {
    text-align: center;
    font-size: 30px;
    color: #1e293b;
    margin-bottom: 40px;
}

/* griglia con auto-fit, le card si adattano alla larghezza */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-card {
    background-color: white;
    padding: 30px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* effetto sollevamento al passaggio mouse */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* icona grande nella card */
.feature-icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* sezione COME FUNZIONA (3 step numerati) */
.how-it-works {
    padding: 80px 60px;
    background-color: white;
}

.how-it-works h2 {
    text-align: center;
    font-size: 30px;
    color: #1e293b;
    margin-bottom: 40px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.step {
    text-align: center;
}

/* cerchio col numero dello step (1, 2, 3) */
.step-number {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    color: white;
    border-radius: 50%; /* 50% = cerchio perfetto */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    margin: 0 auto 18px auto;
}

.step h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 10px;
}

.step p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* sezione ABOUT (perche SmartSchool) */
.about {
    padding: 80px 60px;
    background-color: #f8fafc;
}

.about h2 {
    text-align: center;
    font-size: 30px;
    color: #1e293b;
    margin-bottom: 30px;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-content p {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* sezione CTA finale (call to action) */
.cta {
    padding: 80px 60px;
    background-color: #1e293b; /* sfondo scuro */
    color: white;
    text-align: center;
}

.cta h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.cta p {
    font-size: 16px;
    color: #cbd5e1;
    margin-bottom: 28px;
}

/* footer in fondo alla pagina */
.home-footer {
    background-color: #0f172a; /* nero/blu profondo */
    color: #cbd5e1;
    padding: 40px 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-content strong {
    color: white;
    font-size: 16px;
}

.footer-content p {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 4px;
}

/* === RESPONSIVE ===
   regole speciali per schermi piccoli (smartphone) */
@media (max-width: 700px) {
    .home-header { padding: 15px 20px; flex-wrap: wrap; }
    .hero, .features, .how-it-works, .about, .cta { padding: 50px 20px; }
    .hero h1 { font-size: 30px; }
}