/*
  MOTouristOffice - Modern minimal theme (Refactored)
  Scopo: stile unico formale e minimale, pronto per uso globale.
  Compatibilità: Bootstrap 5 presente.
*/

/* ================================
   Design tokens (CSS variables)
   ================================ */
:root {
    /* Palette istituzionale sobria */
    --mto-bg: #f0f2f5;              /* Sfondo pagina più moderno */
    --mto-surface: #ffffff;         /* Superfici (card, header) */
    --mto-text: #212529;            /* Testo primario */
    --mto-text-muted: #6c757d;      /* Testo secondario */

    /* Colori Brand */
    --mto-primary: #104C79;         /* Blu istituzionale scuro (dal legacy) */
    --mto-primary-light: #2a6ebb;   /* Blu più chiaro per azioni */
    --mto-primary-contrast: #ffffff;

    --mto-border: #dee2e6;
    --mto-success: #198754;
    --mto-warning: #f59f00;
    --mto-danger:  #dc3545;

    /* Tipografia e spaziature */
    --mto-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --mto-font-size: 14px;          /* Base leggermente più compatta per gestionali */
    --mto-line-height: 1.5;
    --mto-radius: 6px;
    --mto-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --mto-shadow-md: 0 4px 12px rgba(0,0,0,.08);

    /* Contenitore */
    --mto-container-max: 1200px;
}

/* ================================
   Reset leggero e base tipografica
   ================================ */
html { font-size: 16px; } /* Reset base REM */
body {
    font-family: var(--mto-font-sans);
    font-size: var(--mto-font-size);
    line-height: var(--mto-line-height);
    color: var(--mto-text);
    background-color: var(--mto-bg);
    /* Texture di sfondo opzionale (eredità legacy, ma resa più leggera) */
    /*background-image: url('../img/bg.Body.png');*/
    background-repeat: repeat;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding-bottom: 2rem; /* Spazio in fondo alla pagina */
}

img { max-width: 100%; height: auto; }
a { color: var(--mto-primary-light); text-decoration: none; }
a:hover { color: var(--mto-primary); text-decoration: underline; }

/* ================================
   Layout & Header Area (FIX SOVRAPPOSIZIONE)
   ================================ */

/* 1. Fascia Loghi */
.mto-header-logos {
    background-color: var(--mto-surface);
    border-bottom: 1px solid var(--mto-border);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Stacca l'header dallo sfondo */
    box-shadow: var(--mto-shadow-sm);
    position: relative;
    z-index: 1030;
}
.mto-header-logos img {
    height: 45px;
    width: auto;
    display: block;
}

/* 2. Barra Menu */
.mto-menu-top {
    background-color: var(--mto-primary); /* Fondo blu pieno */
    padding: 0 1rem;
    box-shadow: var(--mto-shadow-md);
    position: relative;
    z-index: 1020;
}

.mto-menu-top .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: visible; /* Cambiato da auto per permettere dropdown */
    overflow-y: visible;
    scrollbar-width: thin;
    gap: 2px; /* Spazio minimo tra i tab */
}

/* Su schermi piccoli, ripristina scroll orizzontale se necessario */
@media (max-width: 992px) {
    .mto-menu-top .nav {
        overflow-x: auto;
    }
    /* Dropdown su mobile: stile full-width */
    .mto-menu-top .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: rgba(0,0,0,0.1);
    }
    .mto-menu-top .dropdown-item {
        color: rgba(255,255,255,0.9);
        padding-left: 2rem;
    }
    .mto-menu-top .dropdown-item:hover {
        background-color: rgba(255,255,255,0.1);
        color: #fff;
    }
}

/* Stile dei link del menu */
.mto-menu-top .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 0; /* Niente bordi arrotondati per stile "barra" */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.mto-menu-top .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.mto-menu-top .nav-link.active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: #fff; /* Indicatore attivo */
}

/* Dropdown nel menu */
.mto-menu-top .nav-item.dropdown {
    position: relative;
}

.mto-menu-top .dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
}

.mto-menu-top .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 12rem;
    padding: 0.5rem 0;
    margin-top: 0;
    background-color: var(--mto-surface);
    border: 1px solid var(--mto-border);
    border-radius: var(--mto-radius);
    box-shadow: var(--mto-shadow-md);
}

.mto-menu-top .dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--mto-text);
    font-size: 0.9rem;
}

.mto-menu-top .dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--mto-primary);
}

.mto-menu-top .dropdown-item.active {
    background-color: var(--mto-primary-light);
    color: #fff;
}

/* 3. Tool Orizzontale (Logout/Utente) */
#tool_orizz {
    background-color: #e9ecef; /* Grigio chiaro per distinguere */
    border-bottom: 1px solid var(--mto-border);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    min-height: 42px; /* Altezza fissa per evitare spostamenti quando compare il badge */
    /*margin-bottom: 2rem; */
}
#tool_orizz p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
#tool_orizz strong { color: var(--mto-primary); }
#tool_orizz .logout {
    color: var(--mto-danger);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#tool_orizz .logout:hover { text-decoration: none; opacity: 0.8; }

/* ================================
   Contenitori Principali (Bootstrap)
   ================================ */
.container,
.container-fluid {
    /* Assicura che il contenuto non tocchi i bordi su schermi piccoli */
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Wrapper specifici per le pagine */
#AATv2-bootstrap,
#splash-bootstrap,
#login-bootstrap,
#mailer-bootstrap {
    background-color: var(--mto-surface);
    border-radius: var(--mto-radius);
    box-shadow: var(--mto-shadow-sm);
    padding: 2rem;
    border: 1px solid var(--mto-border);
    margin-top: 0; /* Gestito dal margin-bottom di #tool_orizz */
    max-width: var(--mto-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* ================================
   Componenti Bootstrap Override
   ================================ */
/* Card */
.card {
    border: 1px solid var(--mto-border);
    border-radius: var(--mto-radius);
    box-shadow: var(--mto-shadow-sm);
    margin-bottom: 1.5rem;
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--mto-border);
    font-weight: 600;
    color: var(--mto-primary);
}

/* Form Controls */
.form-control, .form-select {
    border-color: #ced4da;
    padding: 0.5rem 0.75rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mto-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(42, 110, 187, 0.15);
}
label.form-label {
    font-weight: 500;
    color: var(--mto-text);
    margin-bottom: 0.4rem;
}

/* Accordion */
.accordion-item {
    border: 1px solid var(--mto-border);
    margin-bottom: 0.5rem;
    border-radius: var(--mto-radius) !important;
    overflow: hidden;
}
.accordion-button {
    background-color: #fff;
    color: var(--mto-primary);
    font-weight: 600;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background-color: #eef5ff;
    color: var(--mto-primary);
}

/* Bottoni */
.btn-primary {
    background-color: var(--mto-primary-light);
    border-color: var(--mto-primary-light);
}
.btn-primary:hover {
    background-color: var(--mto-primary);
    border-color: var(--mto-primary);
}

/* Tabelle */
.table thead th {
    background-color: #f8f9fa;
    color: var(--mto-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--mto-border);
}

/* ================================
   Utility e Responsive
   ================================ */
.text-primary { color: var(--mto-primary-light) !important; }

@media (max-width: 768px) {
    /* Su mobile riduciamo i padding */
    #AATv2-bootstrap,
    #splash-bootstrap,
    #login-bootstrap {
        padding: 1rem;
    }

    .mto-header-logos {
        flex-direction: column;
        gap: 1rem;
    }

    #tool_orizz p {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================
   Submenu Struttura (secondo livello)
   ================================ */
.mto-submenu-struttura {
    background-color: #212529;
    padding: 0 1rem;
}

.mto-submenu-struttura .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
    border-radius: 0;
    border-bottom: 4px solid transparent;
    transition: all 0.2s ease;
}

.mto-submenu-struttura .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #C31F00;
}

.mto-submenu-struttura .nav-link.active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: #C31F00;
}

/* Dropdown nel submenu struttura */
.mto-submenu-struttura .nav-item.dropdown {
    position: relative;
}
.mto-submenu-struttura .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.mto-submenu-struttura .dropdown-menu > li {
    margin: 0 !important;
    padding: 0 !important;
}
.mto-submenu-struttura .dropdown-item {
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.15s ease;
}
.mto-submenu-struttura .dropdown-item:hover {
    background-color: var(--mto-primary);
    color: #fff;
}

/* ================================
   Stampa
   ================================ */
@media print {
    .mto-menu-top,
    #tool_orizz,
    .btn,
    .accordion-button::after {
        display: none !important;
    }
    #AATv2-bootstrap {
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .accordion-collapse {
        display: block !important; /* Espandi tutto in stampa */
    }
}

/* ================================
   jQuery UI Datepicker fixes
   ================================ */
/* Fix z-index per datepicker dentro modal Bootstrap */
.ui-datepicker {
    z-index: 1060 !important; /* Sopra modal Bootstrap (1055) */
    background: var(--mto-surface, #ffffff) !important;
    border: 1px solid var(--mto-border, #dee2e6) !important;
    border-radius: var(--mto-radius, 6px) !important;
    box-shadow: var(--mto-shadow-md, 0 4px 12px rgba(0,0,0,.15)) !important;
    padding: 8px !important;
    width: auto !important;
    min-width: 280px !important;
}

.ui-datepicker table {
    width: 100% !important;
}

.ui-datepicker th {
    padding: 6px 8px !important;
    text-align: center !important;
}

.ui-datepicker td {
    padding: 2px !important;
}

.ui-datepicker-header {
    background: var(--mto-primary, #104C79) !important;
    color: var(--mto-primary-contrast, #ffffff) !important;
    border: none !important;
    border-radius: var(--mto-radius, 6px) var(--mto-radius, 6px) 0 0 !important;
    padding: 8px !important;
}

.ui-datepicker-header .ui-datepicker-title {
    color: var(--mto-primary-contrast, #ffffff) !important;
}

.ui-datepicker-header a {
    color: var(--mto-primary-contrast, #ffffff) !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.ui-datepicker td a:hover {
    background: var(--mto-primary-light, #2a6ebb) !important;
    color: var(--mto-primary-contrast, #ffffff) !important;
    border-radius: 4px !important;
}

.ui-datepicker .ui-state-active {
    background: var(--mto-primary, #104C79) !important;
    color: var(--mto-primary-contrast, #ffffff) !important;
    border-radius: 4px !important;
}

.ui-datepicker .ui-state-highlight {
    background: var(--mto-warning, #f59f00) !important;
    color: #000 !important;
    border-radius: 4px !important;
}