/* ======================================================= */
/* 1. VARIABILI & RESET */
/* ======================================================= */

:root {
    /* --- COLORI MODIFICATI (Verde) --- */
    --brand-color: #3b9440;       /* Verde principale */
    --brand-dark: #2a6e2e;        /* Verde scuro per hover/gradienti */
    
    --main-bg: #f4f7f6;
    --sidebar-bg: #2c3e50;
    --text-color: #333;
    --sidebar-text: #ecf0f1;
    --accent-color: #f1c40f; 
    --success-color: #2ecc71;
    --header-height: 70px;
    --sidebar-width: 300px; 
    --sidebar-mini-width: 70px;
}

html, body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: var(--main-bg);
    color: var(--text-color);
    box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }

a { text-decoration: none; color: var(--brand-color); transition: color 0.2s; }
a:hover { color: var(--brand-dark); }
ul { list-style: none; padding: 0; margin: 0; }

/* ======================================================= */
/* 2. HEADER FISSO */
/* ======================================================= */

.header {
    background-color: var(--brand-color); /* Verde */
    color: white;
    height: var(--header-height);
    padding: 0 20px;
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-toggle {
    background: none; border: none; color: white;
    font-size: 24px; cursor: pointer; padding-right: 20px;
}

.logo { font-weight: bold; font-size: 1.5em; white-space: nowrap; }
.logo .sub-text { font-size: 0.6em; opacity: 0.8; margin-left: 5px; font-weight: normal; }

.current-company-name { flex-grow: 1; text-align: center; font-weight: 600; font-size: 1.1em; }

/* --- Tasto della guida --- */
/* Discreto ma sempre nello stesso posto: un aiuto che cambia posizione
   da una pagina all'altra e' un aiuto che non si trova. */
.header-guida {
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff; text-decoration: none; white-space: nowrap;
    font-size: .85em; font-weight: 600;
    padding: 5px 12px; margin-right: 16px;
    border: 1px solid rgba(255,255,255,.4); border-radius: 14px;
    background: rgba(255,255,255,.10);
}
.header-guida:hover { background: rgba(255,255,255,.24); color: #fff; }
.header-guida span { font-weight: 700; }

/* --- Dropdown Utente --- */
.user-info { display: flex; align-items: center; cursor: pointer; height: 100%; position: relative; }
.user-avatar {
    background-color: white; color: var(--brand-color); /* Testo verde */
    border-radius: 50%; width: 35px; height: 35px;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; margin-left: 10px;
}

.user-dropdown-content {
    visibility: hidden; opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s; 
    position: absolute; top: 60px; right: 0;
    background-color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px; z-index: 2000; border-radius: 4px; overflow: hidden;
}
.user-info:hover .user-dropdown-content { visibility: visible; opacity: 1; transition-delay: 0s; }
.user-dropdown-content a { color: #333; padding: 12px 16px; display: block; border-bottom: 1px solid #f1f1f1; }
.user-dropdown-content a:hover { background-color: #f9f9f9; }
.dropdown-header { padding: 12px 16px; background-color: #eee; color: #555; font-weight: bold; font-size: 0.85em; }


/* ======================================================= */
/* 3. SIDEBAR (LOGICA MINI & FULL) */
/* ======================================================= */

.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding-top: 20px;
    position: fixed; top: var(--header-height); bottom: 0; left: 0;
    width: var(--sidebar-width);
    
    /* MODIFICA 2: Gestione intelligente scroll */
    overflow-y: auto; /* Scrolla solo se necessario */
    overflow-x: hidden; /* Nasconde scroll orizzontale */
    
    z-index: 900; transition: width 0.3s ease;
}

/* Stili personalizzati per la scrollbar (Webkit - Chrome/Safari) */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); border-radius: 3px; }

.sidebar nav li {
    padding: 15px 15px; border-left: 4px solid transparent; cursor: pointer;
    white-space: nowrap; display: flex; align-items: center; overflow: hidden;
}
.sidebar nav li:hover { background-color: #49637a; }
.sidebar nav li.active { background-color: #2c3e50; border-left-color: var(--accent-color); }
.sidebar a { color: var(--sidebar-text); margin-left: 8px; font-size: 0.95em; }
.sidebar .icon { font-size: 1.2em; min-width: 30px; text-align: center; display: inline-block; }

.sidebar nav li.admin-only { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar nav li.admin-only a { color: var(--accent-color); }

/* --- STATO CHIUSO (DESKTOP) --- */
html.sidebar-closed .sidebar { 
    width: var(--sidebar-mini-width); 
    scrollbar-width: none; /* Firefox */
}
html.sidebar-closed .sidebar::-webkit-scrollbar { display: none; }

html.sidebar-closed .sidebar a { opacity: 0; pointer-events: auto; }
html.sidebar-closed .sidebar nav li { justify-content: center; padding: 15px 0; position: relative; }
html.sidebar-closed .sidebar .icon { margin-right: 0; font-size: 1.4em; }
html.sidebar-closed .sidebar nav li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10;}


/* ======================================================= */
/* 4. CONTENT PRINCIPALE */
/* ======================================================= */

.main-container { padding-top: var(--header-height); min-height: 100vh; }
.content { margin-left: var(--sidebar-width); padding: 30px; transition: margin-left 0.3s ease; }
html.sidebar-closed .content { margin-left: var(--sidebar-mini-width); }

h1 { margin-top: 0; color: #333; font-weight: 300; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 25px; }
h2 { color: var(--brand-color); margin-top: 0; font-size: 1.3em; margin-bottom: 15px; }


/* ======================================================= */
/* 5. COMPONENTI INTERNI */
/* ======================================================= */

/* Sottomoduli */
/*
    LE BARRE DELLE SCHEDE VANNO A CAPO, NON SCORRONO.

    Segnalato da Giorgio: comparivano barre di scorrimento non
    necessarie. Erano due difetti diversi, e il primo nascondeva
    il secondo.

    1. Una barra VERTICALE da un pixel. C'era overflow-x:auto, e per una
       regola dei CSS poco nota quando uno dei due assi non e' "visible"
       l'altro, se e' "visible", diventa "auto" da solo: overflow-y
       diventava "auto" senza che nessuno lo avesse scritto. Bastava il
       margin-bottom:-1px con cui le schede si appoggiano sopra il bordo
       per far sporgere il contenuto di un pixel.

    2. Una barra ORIZZONTALE, che si vedeva davvero solo guardando una
       pagina con tante schede - la contabilita' ne ha tredici. Le
       schede sono elementi flex e per difetto si lasciano comprimere
       sotto la loro larghezza naturale: si stringevano, il testo andava
       a capo su due righe, e nonostante questo non ci stavano lo stesso.
       Risultato: schede alte il doppio E una barra da trascinare.

    La cura e' la stessa per entrambi: flex-wrap:wrap fa andare a capo le
    schede in una seconda riga, flex:0 0 auto e white-space:nowrap
    impediscono che si stringano, e a quel punto non serve piu' nessun
    overflow - quindi nessuna barra di scorrimento, in nessuna delle due
    direzioni.

    Scorrere orizzontalmente sarebbe comunque stata la scelta peggiore:
    nasconde meta' delle sezioni dietro un trascinamento che nessuno
    indovina.
*/
.submodule-nav {
    display: flex; flex-wrap: wrap; gap: 5px; row-gap: 4px;
    padding-bottom: 0; margin-bottom: 25px; border-bottom: 1px solid #ddd;
}
.submodule-nav a {
    text-decoration: none; color: #666; padding: 10px 20px;
    border-radius: 5px 5px 0 0; border: 1px solid transparent; margin-bottom: -1px;
    background-color: #f8f9fa; font-size: 0.95em;
    flex: 0 0 auto; white-space: nowrap;
}
.submodule-nav .submodule-active {
    background-color: white; color: var(--brand-color); border: 1px solid #ddd; border-bottom-color: white; font-weight: bold;
}
.submodule-nav a:not(.submodule-active):hover { background-color: #e2e6ea; }

/* Toolbar */
.toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px;
    background-color: #f8f9fa; padding: 15px; border-radius: 5px; border: 1px solid #eee;
}
.btn { padding: 10px 18px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.9em; transition: all 0.2s; }
.btn-primary { background-color: var(--brand-color); color: white; box-shadow: 0 2px 4px rgba(59, 148, 64, 0.2); }
.btn-primary:hover { background-color: var(--brand-dark); transform: translateY(-1px); }
.btn-secondary { background-color: white; color: #333; border: 1px solid #ccc; }
.btn-secondary:hover { background-color: #f1f1f1; border-color: #bbb; }
.filter-select, .search-input { padding: 9px; border: 1px solid #ccc; border-radius: 4px; min-width: 200px; }

/* Box Bianco */
.data-section {
    background-color: white; padding: 25px; border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 25px; border: 1px solid #eee;
}

/* Tabelle */
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.95em; }
table th { background-color: #f1f3f5; padding: 15px; text-align: left; color: #495057; border-bottom: 2px solid #dee2e6; font-weight: 700; }
table td { padding: 15px; border-bottom: 1px solid #eee; vertical-align: middle; color: #555; }
.status-pending { color: #e67e22; background: #fdf2e9; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 0.85em; }
.status-shipped { color: var(--success-color); background: #eafaf1; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 0.85em; }
.status-processing { color: #17a2b8; background: #eef9fb; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 0.85em; }
.status-billed { color: var(--brand-color); background: #eaf2fb; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 0.85em; }

/* Form */
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9em; color: #555; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; transition: border 0.2s; }
.form-group input:focus, .form-group select:focus { border-color: var(--brand-color); outline: none; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }


/* ======================================================= */
/* 6. KPI DASHBOARD (HOME) */
/* ======================================================= */

.kpi-grid, .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; margin-bottom: 30px; width: 100%;
}

.kpi-card, .dashboard-grid .card {
    background: white; 
    padding: 25px; 
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    border-left: 5px solid var(--brand-color);
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100px;
}
.kpi-card h3, .dashboard-grid .card h3 { margin: 0 0 10px 0; color: #7f8c8d; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value, .dashboard-grid .card .value { font-size: 2.2em; font-weight: 800; color: #2c3e50; margin-bottom: 5px; }
.kpi-detail, .dashboard-grid .card p { font-size: 0.9em; color: #95a5a6; margin: 0; }

.dashboard-grid, .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }


/* ======================================================= */
/* 7. PAGINA LOGIN (ISOLATA) */
/* ======================================================= */

.login-page {
    position: fixed !important; 
    top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
    background-color: var(--brand-color) !important;
    background: linear-gradient(135deg, var(--brand-color), var(--brand-dark)) !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    z-index: 20000 !important; margin: 0 !important; padding: 0 !important;
}

.login-container {
    background-color: white; padding: 40px; border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); width: 90%; max-width: 400px; text-align: center;
}

.login-header h2 { color: var(--brand-color); margin-bottom: 5px; font-size: 2em; border: none; }

.login-form input, .login-form input[type="text"], .login-form input[type="password"] {
    width: 100% !important; padding: 12px !important; margin-bottom: 15px !important;
    border: 1px solid #ccc !important; border-radius: 4px !important; box-sizing: border-box !important;
    background-color: white !important; color: #333 !important; display: block !important;
}
.login-form button { width: 100%; padding: 12px; background-color: var(--brand-color); color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }


/* ======================================================= */
/* 8. MOBILE (MEDIA QUERIES) */
/* ======================================================= */

@media (max-width: 1200px) {
    .kpi-grid, .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .current-company-name { display: none; }
    
    html.sidebar-closed .sidebar { width: 280px; left: -280px; }
    html.sidebar-closed .content { margin-left: 0; }
    .sidebar { left: 0; box-shadow: 5px 0 15px rgba(0,0,0,0.3); width: 280px; }
    
    .kpi-grid, .dashboard-grid, .settings-form, .stats-grid { grid-template-columns: 1fr !important; }
    .content { padding: 15px; }
    .user-info span:first-child { display: none; }
}

/* ======================================================= */
/* 9. LAYOUT SENZA SIDEBAR (FULL WIDTH) */
/* ======================================================= */

/* Classe da aggiungere al div "main-container" */
.no-sidebar-layout .content {
    margin-left: 0 !important; /* Annulla lo spazio per la sidebar */
    width: 100%; /* Occupa tutto lo spazio disponibile */
    padding: 30px; /* Mantiene un po' di respiro */
}

/* Opzionale: Se vuoi nascondere il menu toggle (l'hamburger) in queste pagine */
.no-sidebar-page .menu-toggle {
    display: none;
}