/* ==========================================================================
   ALVEGEST - STYLES.CSS UNIFICATO (V.B.0.8.6)
   ========================================================================== */

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

:root {
    --primary-bg: #e12326;    /* Rosso AlveGest */
    --secondary-bg: #472014;  /* Marrone scuro Menu */
    --form-bg: #fff3e2;       /* Crema Form */
    --tab-inactive: #f1e4d1;  /* Beige Tab/Tabelle */
    --main-text: #ffffff;
}

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 1. Impostazione altezza minima e layout per il contenitore principale */
.main-content, main-content.flex-layout {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh; /* Altezza schermo intero */
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Sfondo generale per far risaltare i riquadri */
}

/* 2. Colonne laterali in grigio chiaro e altezza 100% */
.left-column, .right-column {
    flex: 0 0 100px !important;
    min-width: 100px !important;
    background-color: #e0e0e0 !important; /* Grigino chiaro */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    min-height: 100vh; /* Forza l'altezza anche se vuote */
}

/* 3. Riquadro per la Home Page (index.php) */
.center-column {
    flex: 1 !important;
    background-color: #fff; /* Fondo bianco per il riquadro */
    margin: 10px;           /* Crea l'effetto riquadro staccato dai bordi */
    padding: 10px;
    border: 1px solid #ddd; /* Bordo sottile */
    border-radius: 8px;     /* Angoli arrotondati come le altre pagine */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Ombra leggera per profondità */
    min-height: calc(100vh - 40px); /* Altezza schermo meno i margini */
    display: block;
    overflow: visible;
}

h2 {
    display: block; 
    font-size: 1.2rem;
    padding: 3px;
    margin-block-start: 0; 
    margin-block-end: 3px; 
    font-weight: bold;
    color: #e12326 !important;
}

main h2 {
    scroll-margin-top: 100px;
}

/* --- HEADER E MENU --- */
header { background-color: var(--primary-bg); color: var(--main-text); text-align: center; padding: 0;}
header h1 { padding: 15px 0 !important; font-size: 1.5rem; text-transform: uppercase; }

nav { background-color: var(--secondary-bg); width: 100%; position: relative; z-index: 1000; }
nav ul { list-style-type: none; display: flex; justify-content: flex-start; }

nav ul li a, .dropdown .dropbtn {
    display: block; 
    color: var(--main-text);
    padding: 10px 20px !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: #333 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    display: block !important; 
    border-bottom: 1px solid #eee;
}
.dropdown:hover .dropdown-content { display: block; }

/* --- SISTEMA TAB --- */
.tabs-container { width: 100%; margin-top: 20px; }
.tabs-menu { display: flex; list-style: none; border-bottom: 2px solid var(--primary-bg); }

.tab-link {
    background-color: var(--tab-inactive);
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    font-weight: bold;
    margin-right: 2px;
    color: #333;
}
.tab-link.active {
    background-color: var(--primary-bg) !important;
    color: white !important;
    border-color: var(--primary-bg);
}

.tab-content { 
    display: none; 
    padding: 20px; 
    border: 1px solid #ccc; 
    border-top: none; 
    background: #fff;
}
.tab-content.active { 
    display: block; 
}

/* --- TABELLE --- */
.table-container { width: 100%; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; }
th { 
    background-color: var(--tab-inactive); 
    border: 1px solid #ccc; 
    padding: 10px;
    text-align: left;
    color: #333;
}
td { border: 1px solid #ccc; padding: 8px; background-color: #fff; }

/* STILE LINK CODICE ARNIA (Disposizione Apiari) */
.link-gestatt {
    color: #800000 !important; /* Rosso Bruno (Maroon) */
    text-decoration: none !important;
    font-weight: bold;
}
.link-gestatt:hover {
    text-decoration: underline !important;
    color: #a52a2a !important;
}

.filtri-container {    
    margin: 5px 0; 
    padding: 0px;
}

/* --- PULSANTI E FEEDBACK --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;                                                    
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    border: none;
    color: white;
}

.btn-salva, .btn-inserisci, .btn-cerca, .btn-modifica, .btn-elimina, .btn-annulla, .btn-reset {
    color: white !important;
}
/* Stile per il badge di attenzione nella disposizione apiari */
.badge-pericolo {
    background-color: #dc3545;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
}

.btn-salva, .btn-inserisci, .btn-cerca { background-color: #28a745 !important; }
.btn-modifica { background-color: #ffc107 !important; color: #333 !important; }



.btn-elimina { background-color: #dc3545 !important; }
.btn-annulla, .btn-reset { background-color: #6c757d !important; }
.btn-attivita, .btn-stampa { background-color: #9dbd31 !important; }

/* --- FORM E INPUT --- */
.form-container {
    background-color: var(--form-bg);
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.form-group label { display: block; font-weight: bold; margin-bottom: 5px; margin-top: 5px; color: #333; }
.form-group input, .form-group select, .form-group textarea {
    padding: 10px;
    border: 1px solid #ccc;
    width: 100%;
}

/* RIGHE PERICOLO */
tr.riga-pericolo td { background-color: #ffe6e6 !important; color: #b94a48 !important; }

/* ==========================================================================
   SEZIONE WIDGET
   ========================================================================== */
.widget-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 20px !important;
}

.widget-card.draggable {
    background-color: #ffffff !important;
    border: 4px solid #333333 !important; 
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    resize: both !important;
    overflow: auto !important;
    min-width: 280px !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
}

.widget-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #eeeeee !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
}

.drag-handle {
    cursor: move !important;
    font-size: 1.5rem !important;
    color: #666 !important;
}

.widget-card::-webkit-resizer {
    background-color: #333;
    border: 3px solid #fff;
}



/* --- STILE SPECIFICO PULSANTE MODIFICA IN TABELLA --- */
.btn-tabella-modifica {
    background-color: #fbc02d !important; /* Giallo intenso Post-it */
    color: #8b4513 !important;           /* Marrone scuro per il testo */
    border: 1px solid #d4af37 !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.btn-tabella-modifica:hover {
    background-color: #f9a825 !important;
    color: #5d4037 !important;
}

/* Classi di utilità per la gestione dei pulsanti nel form (senza stili inline) */
.btn-group-flex {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.btn-flex-2 { flex: 2 !important; }
.btn-flex-1 { flex: 1 !important; }

/* Gestione Finestra Modale */
.modal-custom {
    display: none; /* Nasconde il modale di default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Sfondo semitrasparente */
}

.modal-content-small {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 450px;
    border-radius: 8px;
    border: 2px solid var(--primary-bg); /* Usa il rosso AlveGest */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.full-width {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 10px;
}
/* --- AGGIUNTA PER ALLINEAMENTO LOGS --- */
.btn-group-flex-filter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
}

.flex-spacer { 
    flex-grow: 1 !important; 
}



.txt-center { text-align: center !important; }
.txt-right  { text-align: right !important; }
.txt-small  { font-size: 20px !important; }
.txt-muted  { color: #666 !important; }
.font-bold  { font-weight: bold !important; }
.txt-danger { color: #dc3545 !important; }

/* Allineamento Mappa e Layout Apiari */
.apiari-layout { display: flex; gap: 20px; align-items: flex-start; }
.apiari-col-main { flex: 2; }
.apiari-col-map { flex: 1; min-width: 300px; }

.map-box { 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 8px; 
    background: #fff;
}
.map-wrapper { height: 400px; width: 100%; position: relative; }
.map-iframe { border: 0; width: 100%; height: 100%; border-radius: 4px; }
.titolo-mappa { font-size: 14px; margin-bottom: 10px; color: #472014; font-weight: bold; }

.hidden { display: none !important; }

/* Impedisce ai dati POST di allargare la tabella oltre il dovuto */
.selectable-table td:last-child {
    max-width: 300px;           /* Limita la larghezza della colonna dati */
    word-wrap: break-word;      /* Forza il testo ad andare a capo */
    overflow-wrap: break-word;  /* Supporto moderno per l'andata a capo */
    white-space: normal;        /* Permette al testo di occupare più righe */
    font-size: 11px;            /* Rende il JSON leggermente più piccolo */
    color: #666;                /* Colore più discreto per i dati tecnici */
}