/**
 * Trip-Organizer - Premium Theme
 * Look più professionale e premium, mobile-friendly.
 * Caricare dopo modern-style.css per applicare le override.
 *
 * NOTA: le variabili usano prefisso --prem-* per non sovrascrivere
 * le variabili globali di modern-style.css (--primary, --secondary, ecc.).
 * Le override visive sono applicate direttamente sui selettori.
 */

:root {
    /* Palette premium: elegante e sobria — prefissata per evitare conflitti */
    --prem-primary: #1e3a5f;
    --prem-primary-dark: #152a47;
    --prem-primary-light: #2d4a73;
    --prem-secondary: #0d9488;
    --prem-secondary-dark: #0f766e;
    --prem-accent: #b45309;
    --prem-accent-dark: #92400e;
    --prem-success: #059669;
    --prem-warning: #d97706;
    --prem-danger: #dc2626;
    --prem-info: #0284c7;

    /* Gradienti più sobri */
    --prem-gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #2d4a73 100%);
    --prem-gradient-secondary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --prem-gradient-sunset: linear-gradient(135deg, #1e3a5f 0%, #0d9488 100%);
    --prem-gradient-ocean: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);

    /* Ombre leggere */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Body: sfondo neutro */
body {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: #334155;
}

/* Nav: override rimosso — stile gestito da modern-style.css */
.main-nav {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Card: bordi sottili, meno ombra */
.card {
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card::before {
    background: var(--prem-gradient-primary);
}

/* Bottoni: tinta unita, hover sobrio */
.btn {
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: var(--prem-gradient-primary);
}

.btn-success {
    background: linear-gradient(135deg, var(--prem-success) 0%, #047857 100%);
}

.btn-danger {
    background: linear-gradient(135deg, var(--prem-danger) 0%, #b91c1c 100%);
}

/* Tab e sezione-card in gestione viaggi */
.tab-btn.active {
    background: var(--prem-gradient-primary);
}

.sezione-card:hover,
.sezione-card.active {
    border-color: var(--prem-primary);
    box-shadow: var(--shadow-md);
}

/* Footer — stile gestito da modern-style.css */

/* Container e box */
.container {
    box-shadow: var(--shadow-lg);
}

/* Mobile: tocchi e spaziatura */
@media (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .main-nav .nav-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .card {
        padding: 20px;
    }

    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .nav-menu a.nav-link {
        padding: 10px 12px;
    }
}

/* Modal form sezioni: allineamento al tema premium */
.travel-section-modal-title {
    color: var(--prem-primary);
}

.travel-section-modal-close:hover {
    background: rgba(30, 58, 95, 0.08);
    color: var(--prem-primary);
}

.travel-section-modal-header,
.travel-section-modal-footer {
    border-color: #e2e8f0;
}

/* Pulsanti azioni in fondo alla scheda elemento (non in linea con il titolo) */
.sezione-item-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.sezione-item-footer .btn {
    margin: 0;
}

/* Header scheda elemento: titolo + badge Pagato */
.sezione-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.sezione-item-title {
    flex: 1;
    min-width: 0;
}
.sezione-item-paid-badge {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--prem-success, #059669);
    background: rgba(5, 150, 105, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Opzione ordinamento cards sezioni */
.sezioni-sort-option {
    display: flex;
    align-items: center;
}
.sezioni-sort-option .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #475569;
}
.sezioni-sort-option #enable-sort-cards {
    cursor: pointer;
}