/* Duplicate import removed */
@import url('css/animations.css');
@import url('css/base.css');
@import url('css/header.css');
@import url('css/navigation.css');
@import url('css/buttons.css');
@import url('css/search.css');
@import url('css/tabs.css');
@import url('css/savings.css');
@import url('css/calendar.css');
@import url('css/image-editor.css');
@import url('css/charts.css');
@import url('css/expenses.css');
@import url('css/controls.css');
@import url('css/splash.css');
@import url('css/modals.css');
@import url('css/themes.css');
@import url('css/toast.css');

/* MOTORE ANIMAZIONE BARRA */
/* BASE STYLES SPOSTATI IN css/base.css */

#home-screen,#add-expense-category-screen,#manage-categories-screen,#add-expense-amount-screen,#view-expenses-screen,#category-detail-screen,#edit-expense-screen,#edit-category-screen,#monthly-history-screen,#weekly-detail-screen,#weekly-category-detail-screen,#chart-screen {
animation:screenFadeIn .25s ease-out
}

/* MODULE: home.css (cards) */
/* MODULE: buttons.css (moved) */


#app-version {
text-align:left;
font-size:11px;
color:var(--secondary-text-color);
opacity:.7;
padding-left:5px
}

/* MODULE: categories.css */

/* Forms styles moved to css/forms.css */

/* Modal actions moved to css/modals.css */

/* Styles moved to css/expenses.css */

/* MODULE: categories.css (summary) */

.import-export-section {
margin-top:30px;
padding-top:20px;
border-top:1px solid var(--border-color)
}

.import-export-section h3 {
text-align:center;
color:var(--secondary-text-color);
margin-bottom:15px
}

.import-export-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}

#import-file-input {
display:none
}

/* Toast styles moved to css/toast.css */

/* Chart styles moved to css/charts.css */



.total-box,.expense-category-item,.category-summary-item {
animation:fadeSlide .4s ease-out
}

/* MODULE: categories.css (hover) */

#history-selector-group,/* (Alpha 91) Sostituito #monthly-history-grid */
#view-expenses-grid,#no-expenses-message,#category-selection-grid,#manage-categories-screen #existing-categories-block,/* (Alpha 85) */
#data-screen .import-export-section,/* (Alpha 85) */
#edit-category-screen .card:first-of-type,#add-expense-amount-screen .card:first-of-type,#expense-list,#weekly-detail-list,#weekly-category-detail-list,#edit-expense-screen .card:first-of-type {
margin-top:20px
}

/* Chart margin moved to css/charts.css */



/* Fixed Overlay Container MOVED TO css/layout.css */
/* .fixed-overlay-container { ... } */





.budget-progress-bar-container {
width:100%;
height:6px;
background-color:var(--border-color);
border-radius:3px;
margin-top:10px;
overflow:hidden
}

.budget-progress-bar-fill {
height:100%;
width:0;
background-color:var(--green);
border-radius:3px;
transition:width .5s ease-out,background-color .5s ease
}

.budget-progress-bar-fill.warning {
background-color:var(--yellow)
}

.budget-progress-bar-fill.danger {
background-color:var(--red)
}

/* Recent expenses moved to css/expenses.css */



.tags-container {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px
}

.tag-chip {
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
user-select:none;
position:relative;
z-index:1;
overflow:hidden
}

.tag-chip:active {
transform:scale(0.95)
}

/* Search styles moved to css/search.css */



/* Monthly history styles moved to css/categories.css */

/* Scope switcher moved to css/controls.css */

.savings-fill {
background-color:#FFD60A!important;
background-image:linear-gradient(45deg,#FFD60A,#FF9F0A);
box-shadow:0 0 10px #ffd60a4d;
transition:width .8s cubic-bezier(0.4,0,0.2,1)
}

#fixed-expenses-summary {
position:absolute;
top:15px;
right:15px;
display:flex;
gap:5px;
z-index:10!important;
pointer-events:none
}

.summary-icon-item {
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 2px 4px #0000004d)
}

.summary-icon-item svg {
width:100%;
height:100%;
color:var(--primary-color)
}

/* Modal note input moved to css/forms.css */

/* Recurring group moved to css/forms.css */

/* Savings styles moved to css/savings.css */
/* Tab carousels moved to css/categories.css */
/* Tabs blades moved to css/tabs.css */

/* Theme toggle span moved to css/header.css */




/* Header info row moved to css/header.css */




/* Edit icon goal moved to css/savings.css */

/* Tabs styles moved to css/tabs.css */

@import url('css/variables.css');

.card,.total-box,.category-item,.expense-category-item,.btn-secondary,.recent-expense-item,.tag-chip {
border:none!important;
position:relative!important;
z-index:1;
border-radius:12px!important;
transition:transform 0.1s,box-shadow .2s!important;
background-clip:padding-box!important;
box-sizing:border-box!important
}

.card > *,.total-box > *,.category-item > *,.expense-category-item > *,.btn-secondary > *,.recent-expense-item > *,.tag-chip > * {
position:relative;
z-index:10
}

/* Button styles moved to css/buttons.css */


/* Savings overrides moved to css/savings.css */

/* Chart overrides moved to css/charts.css */

/* Social buttons moved to css/buttons.css */


body.privacy-on .amount,body.privacy-on .remaining-budget,body.privacy-on #weekly-total,body.privacy-on #monthly-total,body.privacy-on .goal-current,body.privacy-on .goal-target,body.privacy-on #savings-current,body.privacy-on #savings-target,body.privacy-on .recent-expense-amount span {
filter:blur(6px);
user-select:none;
transition:filter .3s ease
}

body.privacy-on .amount:hover,body.privacy-on #weekly-total:hover,body.privacy-on #monthly-total:hover {
filter:blur(0);
cursor:pointer
}

#theme-toggle-btn,#privacy-btn,#open-search-btn {
top:calc(0px + env(safe-area-inset-top))!important
}

/* Calendar styles moved to css/calendar.css */

/* Cal buttons moved to css/calendar.css */



/* Image editor styles moved to css/image-editor.css */

html,body {
overflow-x:hidden!important;
width:100%!important;
max-width:100%!important;
position:relative
}

body.no-scroll {
overflow:hidden!important
}

.bottom-nav-bar {
position:fixed!important;
bottom:0!important;
left:0!important;
width:100%!important;
z-index:9000!important;
transform:translateZ(0)
}

.btn:not(.btn-secondary),.btn-danger {
box-shadow:inset 0 1px 0 #ffffff4d!important
}

.btn:not(.btn-secondary):active,.btn-danger:active {
box-shadow:none!important;
transform:scale(0.98)
}



/* Chart card pseudos moved to css/charts.css */

/* Category delete icon override moved to css/expenses.css */

.add-new-item-btn:active {
transform:scale(0.95);
background:#ffffff0d!important;
opacity:1
}

.add-new-item-btn {
height:70px!important;
min-height:70px!important;
width:100%!important;
border:2px dashed #80808066!important;
background-color:transparent!important;
background-image:none!important;
color:var(--text-color)!important;
font-size:30px!important;
font-weight:300!important;
line-height:1!important;
opacity:.5;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:14px!important;
cursor:pointer;
box-shadow:none!important;
backdrop-filter:none!important
}

.add-new-item-btn:active {
background-color:#8080801a!important;
opacity:1;
transform:scale(0.95)
}

#add-expense-amount-screen {
padding-bottom:100px!important;
overflow-y:auto
}

#add-expense-amount-screen .actions {
margin-bottom:20px!important
}



/* Chart header tweaks moved to css/charts.css */

/* Switches moved to css/controls.css */

body.privacy-on #monthly-income-display,body.privacy-on #monthly-balance-display {
filter:blur(6px);
user-select:none;
transition:filter .3s ease
}

body.privacy-on #monthly-income-display:hover,body.privacy-on #monthly-balance-display:hover {
filter:blur(0);
cursor:pointer
}

/* Delete icon tweaks moved to css/expenses.css */

body.privacy-on #global-balance-display {
filter:blur(6px);
transition:filter .3s ease
}

body.privacy-on #global-balance-display:hover {
filter:blur(0)
}

/* Chips moved to css/controls.css */

/* Sliders moved to css/controls.css */



/* Search styles moved to css/search.css */

#balance-strip {
margin-top:15px!important;
margin-bottom:0!important;
padding-top:12px!important;
padding-bottom:12px!important
}

#savings-container {
margin-top:25px!important;
margin-bottom:0!important
}

#recent-header-btn {
padding-top:5px!important
}

#home-screen > .card:last-child {
margin-top:25px!important
}

/* Modal overlay moved to css/modals.css */

/* ============================================================
   GESTIONE BOX OPZIONI (Extra Budget & Contanti)
   ============================================================ */

/* 1. LAYOUT BASE (Struttura) */
.extra-budget-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    margin-top: 10px; /* Spazio uniforme sopra */
}

.extra-budget-box label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

/* ============================================================
   FIX TITOLI GRANDI (Senza ingrandire Header)          MARGINI PERSONALIZZATI
   ============================================================ */

/* 2. Titoli ALTRE SCHERMATE ("Insights", "Archivio"...) */
/* Regole consolidate in fondo al file (vedi riga ~2640) */

/* Nascondi i box Extra Budget e Contanti solo nella sezione Entrata */
#income-input-section .extra-budget-box,
#income-input-section #extra-budget-row,
#income-input-section #cash-row {
  display: none !important;
}

/* Header/Navigation fixes moved to css/header.css and css/navigation.css */

/* Opzionale: Aumenta leggermente anche i titoli principali delle altre pagine per bilanciare */
/* Regole consolidate in fondo al file (vedi riga ~2640) */



/* ============================================================
   FONT PREMIUM (Solo Titoli Header)
   ============================================================ */

/* Applica SOLO al titolo principale H1 dentro l'Header.
   Tutto il resto (Mese, Settimana, Numeri) rimane standard. */
/* ============================================================
   FIX SPAZIATURA FONT MANROPE (Header Secondari)
   ============================================================ */

/* Aumenta lo spazio sotto il Titolo nelle pagine interne (No Home) */
/* Regole consolidate in fondo al file (vedi riga ~2640) */

/* Splash styles moved to css/splash.css */

/* ============================================================
   FIX DEFINITIVO: TITOLI ANIMATI (SHIMMERING)
   ============================================================ */

/* 1. DEFINIZIONE ANIMAZIONE (Nome Univoco) */


/* ============================================================
   MOTORE GRAFICO FINALE (HEADER & TITOLI)
   ============================================================ */

/* ============================================================
   DIMENSIONI TITOLI (Da mettere in fondo)
   ============================================================ */

/* Altre Pagine: Compatto */


/* ============================================================
   FIX FINALE: MATERIALE 3D + SPAZIATURA STRETTA
   ============================================================ */

/* Header styles moved to css/header.css */

/* 3. VICINANZA CARD (Il trucco per avvicinare tutto) */
/* Riduciamo questo valore per tirare su la card verso l'header */
#home-screen {
    padding-top: 132px !important; 
}

/* Altre pagine */
#chart-screen, 
#data-screen, 
#calendar-screen, 
#manage-categories-screen, 
#add-expense-category-screen,
#view-expenses-screen,
#monthly-history-screen,
#weekly-detail-screen,
#weekly-category-detail-screen,
#monthly-category-detail-screen {
    padding-top: 110px !important;
}

/* FIX: More space for these screens (User req: "scendere di poco") */
#add-expense-amount-screen,
#edit-expense-screen,
#edit-category-screen {
    padding-top: 145px !important;
}

/* ============================================================
   BLOCCO ROTAZIONE PREMIUM V2 (Full Screen Meteors)
   ============================================================ */

#landscape-overlay {
    display: none;
}

@media screen and (orientation: landscape) {
    
    /* Blocca scorrimento e fissa altezza */
    html, body {
        overflow: hidden !important;
        height: 100% !important;
        width: 100% !important;
        position: fixed !important; /* Inchioda tutto */
    }

    #landscape-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 200000 !important; /* Sopra a tutto */
        
        /* Sfondo Spaziale */
        background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%) !important;
        
        /* Centratura */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        
        /* Abilita interazione se serve */
        pointer-events: auto;
    }

    /* --- FIX METEORE ORIZZONTALI --- */
    /* Espandiamo il contenitore per coprire la larghezza maggiore */
    #landscape-overlay .landscape-meteors {
        width: 150vw !important; /* Più largo dello schermo */
        height: 150vh !important;
        left: -25vw; /* Centra l'espansione */
        top: -25vh;
    }
    
    /* Rendiamo le meteore più lunghe e veloci in orizzontale */
    #landscape-overlay .landscape-meteors span::before {
        width: 400px !important; /* Coda più lunga */
    }

    /* --- ICONA TELEFONO ANIMATA --- */
    .rotate-animation-wrapper svg {
        color: #fff;
        /* Animazione che suggerisce la rotazione */
        animation: rotatePhoneHint 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }
}

/* Animazione: Dondola da verticale a orizzontale e torna indietro */


/* ============================================================
   ENERGY BLADES FIXED (Logica Unificata - Direzione Invertita)
   ============================================================ */

/* 1. Motore Animazione (Scorrimento INVERTITO) */


/* 2. Struttura Base Lama */
.week-blade {
    height: 6px;
    width: 24px;
    border-radius: 2px;
    margin-left: 6px;
    transform: skewX(-20deg);
    position: relative;
    overflow: hidden;
    
    /* FIX CRITICO: Animiamo solo trasformazione e opacità. */
    transition: transform 0.2s, opacity 0.2s !important;
}

/* 3. Lama Corrente (Animata) - Base */
.blade-current {
    /* Fondamentale: Lo sfondo deve essere largo il doppio per scorrere */
    background-size: 200% 100% !important;
    background-color: transparent !important;
    
    /* Avvia animazione */
    animation: bladeFlow 3s infinite linear !important;
    
    opacity: 1 !important;
    z-index: 5;
    transform: skewX(-20deg) scale(1.15); 
}

/* 6. Lame Future (Spente) */
.blade-inactive {
    background: var(--secondary-text-color) !important;
    opacity: 0.2 !important;
}



/* Search overlay styles moved to css/search.css */

/* --- FIX LEGGIBILITÀ CLASSIFICA MESE --- */

/* 1. Ingrandiamo il contenitore e il testo */
.category-summary-item .amount {
    font-size: 19px !important;      /* Più grande (era 16/18) */
    font-weight: 800 !important;     /* Molto grassetto */
    letter-spacing: 0.5px;
    opacity: 1 !important;           /* Massima visibilità */
}

/* ============================================================
   LOGICA SCAMBIO ICONE (V2 - FALLBACK SICURO)
   ============================================================ */

/* 1. IMPOSTAZIONI BASE */
.summary-icon-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
    object-fit: contain;
    padding: 0 !important;
    background: none !important;
}

/* 2. COMPORTAMENTO DI DEFAULT (Se JS fallisce, mostra Dark) */
.img-dark { display: block !important; }
.img-light { display: none !important; }










/* Chart styles moved to css/charts.css */




/* Quick Actions Menu styles moved to css/navigation.css */
body.theme-pro-light #quick-actions-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    color: #000 !important;
}

/* STILE SPECIFICO PER TEMA DARK (Sovrascrive il default) */
body.theme-pro-dark #quick-actions-menu {
    background-color: rgba(30, 30, 40, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* CLASSE VISIBILE */
#quick-actions-menu.visible {
    display: flex !important; /* Forza la visualizzazione */
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animazione Semplice (Senza conflitti di layout) */
/* @keyframes popIn duplicata rimossa - vedi riga 4369 */

#quick-actions-menu.hidden {
    display: none !important;
}

/* 4. SOVRASCRITTURA TEMI (Colori corretti) */

/* TEMA LIGHT: Bianco */
body.theme-pro-light #quick-actions-menu {
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* TEMA DARK: Vetro Scuro */
body.theme-pro-dark #quick-actions-menu {
    background: rgba(25, 25, 35, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* 5. VOCI DEL MENU */
.quick-action-item {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background:#ffffff0d;
    font-weight: 700;
    font-size:14px;
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}

.quick-action-item:active {
transform:scale(0.96);
background:#ffffff1a
}

/* Colori voci Dark */
body.theme-pro-dark .quick-action-item { background: rgba(255,255,255,0.1); }
/* Colori voci Light */
body.theme-pro-light .quick-action-item { background: #F2F2F7; color: #1F2937; }

/* 6. HEADER MENU */
.quick-actions-header {
    text-align: center;
    font-size: 16px;
    text-transform: capitalize;
    opacity: 0.6;
    margin-bottom: 10px;
    letter-spacing:1px
}

/* --- CALENDARIO STILE "OUTLINE" (Fix Invisibilità) --- */

/* 1. GIORNO "OGGI" (Testo Gradiente) */
.calendar-day.is-today {
    border: none !important;
    
    /* Definiamo il gradiente per il testo */
    background-image: linear-gradient(135deg, #5A7BED, #C764E3) !important;
    background-size: 100%;
    
    /* Ritagliamo il gradiente sulla forma del testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    font-weight: 900 !important;
    font-size: 16px !important;
}

/* 2. GIORNO SELEZIONATO (Generico) */
.calendar-day.selected {
    /* Sfondo trasparente per far vedere solo il bordo */
    background: transparent !important; 
    box-shadow: none !important;
    border: none !important;
    
    /* Testo normale (verrà sovrascritto se è "Oggi") */
    -webkit-text-fill-color: var(--text-color) !important;
    color: var(--text-color) !important;
    
    position: relative;
    font-weight: 700;
}

/* 3. IL BORDO SOTTILE (Tramite pseudo-elemento) */
.calendar-day.selected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 2px; /* Spessore bordo */
    background: linear-gradient(135deg, #5A7BED, #C764E3); 
    
    /* Versione WebKit (Chrome, Safari, iOS) */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    /* Versione Standard (Firefox, ecc.) - AGGIUNTA PER RISOLVERE IL WARNING */
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask-composite: exclude;
    
    pointer-events: none;
}

/* 4. FIX CRITICO: OGGI + SELEZIONATO */
/* Quando "Oggi" è selezionato, forziamo il ritorno del gradiente sul testo */
.calendar-day.is-today.selected {
    background-image: linear-gradient(135deg, #5A7BED, #C764E3) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 5. Pallino indicatore */
.day-indicator {
    background-color: #FF3B30 !important;
    box-shadow: none !important;
}

/* --- FIX BORDO ICONA SOLE (TEMA LIGHT) --- */
body.theme-pro-light #home-screen .header #theme-toggle-btn {
    border: 1px solid #D1D1D6 !important; /* Grigio visibile */
    background-color: #E5E5EA !important; /* Sfondo coerente */
    box-shadow: none !important;
}


/* Tipografia Interna */
.modal-content h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.modal-content p {
    margin-bottom: 25px !important;
    opacity: 0.8 !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

/* --- FIX VISIBILITÀ CHECKBOX MANUALE --- */
/* Seleziona il div che ha lo sfondo arancione e lo forza ad apparire */
div[style*="rgba(255, 159, 10, 0.15)"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px; /* Altezza minima per evitare che collassi */
}

/* ============================================================
   STILE TITOLI WALLET (Fix Gradiente Compatto)
   ============================================================ */
.goal-name {
    /* 1. Geometria del testo */
    font-size: 18px;
    font-weight: 800;
    
    /* 2. Troncamento (Ellipsis) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 3. IL FIX FONDAMENTALE */
    /* Il box si stringe attorno al testo, così il gradiente si vede tutto */
    width: fit-content !important; 
    max-width: 100%; /* Ma non deve uscire dalla card se il nome è lunghissimo */
    display: block;
    
    /* 4. Colore Gradiente */
    background-image: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    
    /* Forza il background a stare dentro i confini del testo */
    background-size: 100% auto;
}

/* ============================================================
   FIX GLOBALE GRADIENTI TESTO (GEOMETRIA COMPATTA)
   Forza tutti i testi gradiente ad adattarsi al contenuto
   per mostrare l'intera sfumatura (Blu -> Viola -> Rosa)
   ============================================================ */

/* 1. Titoli Card Home (Mese, Settimana) */
.total-box h3, 
#monthly-card-title, 
#weekly-card-title {
    width: fit-content !important;
    display: block !important;
    margin-right: auto !important; /* Allinea a sinistra */
}

/* 2. Cifre nelle Card (Griglia Home) */
.expense-category-item .amount {
    width: fit-content !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important; /* Centrato */
}

/* 3. Statistiche (Schermata Archivio) */
#stat-total-count, 
#stat-categories-count {
    width: fit-content !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

/* 4. Etichette Navbar Attive */
.nav-btn.active span {
    width: fit-content !important;
    display: inline-block !important;
}

.nav-btn-add-special span,
.nav-btn-add-special.active span {
    display: none !important;
}

/* 6. Importi nelle liste (Facoltativo, spesso sono a destra) */
.amount {
    width: fit-content !important;
    /* Non forziamo display qui per non rompere i flex container delle liste */
}

/* ============================================================
   FIX GRADIENTI DARK MODE (Uniformità con Light)
   Applica il gradiente alle cifre nelle liste Mese/Settimana
   Esclude i colori di stato (Verde, Rosso, Arancio)
   ============================================================ */

body.theme-pro-dark .category-summary-item .amount:not(.status-green):not(.status-red):not(.status-orange),
body.theme-pro-dark .expense-list-item .amount:not([style*="green"]):not([style*="rgb(52, 199, 89)"]):not([style*="var(--green)"]):not([style*="#AF52DE"]) {
    
    /* 1. Gradiente Nebulosa */
    background: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%) !important;
    
    /* 2. Applicazione al testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    
    /* 3. Geometria Corretta (Fit Content) */
    width: fit-content !important;
    display: block !important;
    margin-left: auto !important; /* Mantiene l'allineamento a destra */
    
    /* 4. Peso Font */
    font-weight: 800 !important;
}

/* ============================================================
   MOTORE GRAFICO HEADER (FIX DEFINITIVO STABILITÀ)
   ============================================================ */

/* 1. Motore Animazione */


/* 2. Regola BASE (Geometria + Motore Animazione) */
.header h1, 
#home-screen .header h1 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    text-align: center !important;
    margin: 0 !important;
    
    /* Disabilita selezione testo */
    -webkit-touch-callout: none !important;
    user-select: none !important;

    /* Maschera Testo */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    
    /* --- USO VARIABILE --- */
    background-image: var(--header-grad) !important;
    
    /* Configurazione Motore */
    background-size: 200% auto !important;
    
    /* --- FIX ANTI-BLOCCO REALE --- */
    
    /* 1. Animazione sempre attiva */
    animation: titleFlow 3s linear infinite !important;
    
    /* 2. FONDAMENTALE: Disabilita le transizioni sul background (Causa principale del blocco) */
    transition: none !important; 
    
    /* 3. FONDAMENTALE: Rimuovi accelerazione hardware (Causa del freeze grafico) */
    transform: none !important;
    will-change: auto !important;
    
    /* Dimensioni Default */
    font-size: 24px !important;
    padding-top: 5px !important;
    width: 100% !important;
}

/* 3. Override Dimensioni HOME */
#home-screen .header h1 {
    font-size: 30px !important;
    margin-bottom: 5px !important;
    line-height: 1.1 !important;
}

/* 4. Colore: TEMA DARK (Luce Bianca) */
body.theme-pro-dark .header h1,
body.theme-pro-dark #home-screen .header h1 {
    background-image: linear-gradient(
        90deg,
        #5A7FFF 0%,    
        #D926A9 25%,   
        #FFFFFF 50%,   /* Bianco Puro */
        #D926A9 75%,   
        #5A7FFF 100%   
    ) !important;
}

/* 5. Colore: TEMA LIGHT (Luce Grigia) */
body.theme-pro-light .header h1,
body.theme-pro-light #home-screen .header h1 {
    background-image: linear-gradient(
        90deg,
        #5A7FFF 0%, 
        #D926A9 25%, 
        #7d7d7d 50%,   /* Grigio per contrasto su chiaro */
        #D926A9 75%, 
        #5A7FFF 100%
    ) !important;
}

/* ============================================================
   FIX LAYOUT HOME (Date, Lame e Titoli)
   ============================================================ */

/* 1. CONTENITORE DATA + LAME */
.date-blade-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* 2. STILE LAMA PICCOLA (Solo Geometria) */
/* L'animazione e il colore vengono ereditati automaticamente dal tema */
.mini-blade {
    height: 4px !important;
    width: 14px !important;
    border-radius: 2px;
    margin-left: 2px !important;
    transform: skewX(-20deg);
}

/* ============================================================
   FIX TITOLO MESE (Priorità al Testo)
   ============================================================ */

/* 1. TITOLO: Si prende tutto lo spazio che serve */
#monthly-card-title {
    max-width: none !important;      /* Nessun limite di larghezza */
    width: auto !important;
    white-space: nowrap !important;  /* Niente a capo */
    overflow: visible !important;    /* Niente tagli */
    text-overflow: clip !important;  /* Niente puntini "..." */
    
    position: relative;
    z-index: 5; /* Se si sovrappone, il testo vince (sta sopra) */
    
    /* Un piccolo margine a destra per non toccare il bordo fisico della card */
    margin-right: 10px !important; 
}

/* 2. GRIGLIA ICONE: Compatta e ordinata a destra */
#fixed-expenses-summary {
    /* Posizione */
    top: 12px !important;
    right: 12px !important;
    
    /* Dimensioni */
    width: auto !important;
    max-width: 35% !important; /* Non invadere più del 35% della card */
    
    /* Comportamento: Vanno a capo se sono tante */
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: flex-end !important;
    gap: 3px !important; /* Spazio ridotto tra le icone */
    
    z-index: 4; /* Stanno sotto il testo se c'è collisione */
}

/* Rimpiccioliamo leggermente le icone per farcene stare di più */
.summary-icon-item {
    width: 16px !important;
    height: 16px !important;
}

/* ============================================================
   EMPTY STATES (Illustrazioni Stati Vuoti)
   ============================================================ */

.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    opacity: 0.6;
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    color: var(--secondary-text-color);
    /* Animazione leggera di galleggiamento */
    animation: float 6s ease-in-out infinite;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-color);
}

.empty-state-desc {
    font-size: 13px;
    color: var(--secondary-text-color);
    max-width: 250px;
    line-height: 1.4;
}

/* ============================================================
   FIX VISIBILITÀ ICONE CATEGORIE (HOME & LISTE)
   ============================================================ */

/* Forza dimensione per qualsiasi SVG dentro l'icona della lista */
.recent-expense-icon svg,
.expense-list-item .recent-expense-icon svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important; /* Previene schiacciamento */
    min-height: 24px !important;
    display: block !important;
}

/* Colore di fallback per le linee (se non specificato) */
.recent-expense-icon svg path,
.recent-expense-icon svg circle,
.recent-expense-icon svg rect,
.recent-expense-icon svg polyline,
.recent-expense-icon svg line,
.recent-expense-icon svg polygon {
    vector-effect: non-scaling-stroke;
}

/* ============================================================
   MODALE (DEFINITIVO - UNIFICAZIONE)
   ============================================================ */
.modal-content {
    /* 1. Scroll e Dimensioni (RISOLUZIONE) */
    position: relative !important;
    width: 85% !important;
    max-width: 320px !important;
    min-width: 280px !important;
    
    /* FONDAMENTALE: Forza l'altezza massima interna */
    max-height: 80vh !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain; 
    
    /* Disabilita i conflitti di visualizzazione */
    display: block !important;
    
    /* 2. Posizionamento (Centrato) */
    margin: auto !important; 
    
    /* 3. Estetica */
    padding: 25px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    z-index: 20001 !important;
}

/* Colori Sfondo Modale (Reinseriti qui perché tolti dai temi sopra) */
body.theme-pro-dark .modal-content {
    background-color: rgba(30, 30, 40, 0.95) !important;
    color: #f5f5f7 !important;
    border: 1px solid rgba(245, 245, 247, 0.15) !important;
    overflow-y: auto !important;
}
body.theme-pro-light .modal-content {
    background-color: #F5F5F7 !important;
    color: #736672 !important;
    border: 1px solid #D1D1D6 !important;
    overflow-y: auto !important;
}

/* ============================================================
   FIX SCHIACCIAMENTO LISTE (Ultimi Movimenti & Ricerca)
   ============================================================ */
.recent-expense-item .recent-expense-details {
    flex: 1 !important; /* Si prende lo spazio che avanza */
    min-width: 0 !important; /* Molto importante: permette al testo lungo di essere tagliato */
    margin-right: 10px; /* Spazio prima del prezzo */
}

/* FIX: Forza la dimensione delle icone dentro la griglia Categorie/Gestisci */
#manage-categories-screen .category-item svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

/* ============================================================
   FIX PRIORITÀ COLORI BUDGET (OVERRIDE TOTALE)
   Queste regole vincono su qualsiasi gradiente o tema.
   ============================================================ */

/* 1. VERDE (Sotto soglia) */
.amount.status-green,
.category-summary-item .amount.status-green { 
    color: var(--green) !important; 
    -webkit-text-fill-color: var(--green) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 2. ARANCIONE (Attenzione - 85%+) */
.amount.status-orange,
.category-summary-item .amount.status-orange { 
    color: var(--orange) !important; 
    -webkit-text-fill-color: var(--orange) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 3. ROSSO (Sforato - 100%+) */
.amount.status-red,
.category-summary-item .amount.status-red { 
    color: var(--red) !important; 
    -webkit-text-fill-color: var(--red) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 4. GRADIENTE (Solo se non ha status) */
.status-gradient {
    background: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* FIX CESTINO ULTIMI MOVIMENTI (Priorità sul contenitore specifico) */
.recent-expense-item .delete-icon {
    /* Posizionamento Assoluto */
    position: absolute;
    right: 5px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    z-index: 20 !important; /* Deve vincere sui numeri */
    
    /* Area di tocco */
    width: 30px !important; 
    height: 30px !important;
    
    /* Centratura Icona interna */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FIX Z-INDEX NUMERI (Per non nasconderli dietro il cestino) */
.recent-expense-amount {
    position: relative; 
    z-index: 15; 
    /* Lascia uno spazio a destra per il cestino (35px di spazio) */
    padding-right: 35px;
}

/* --- SOFT BUDGET WARNING (Minimal Transparent) --- */
#soft-budget-warning,
#edit-soft-budget-warning {
    margin-top: 6px;
    margin-left: 2px; /* Leggero allineamento */
    font-size: 12px;
    color: var(--red); /* Il testo rimane rosso per avvisare */
    background-color: transparent; /* Sfondo trasparente */
    border: none; /* Nessun bordo */
    padding: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeSlide 0.3s ease-out;
}

/* --- CHECKBOX MINIMAL UNIFICATE (FIXED V2 - SOLO STILE) --- */
.checkbox-minimal-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    display: block !important; /* Forza ogni riga ad essere un blocco stabile */
}

/* Stile Checkbox (Il quadratino) */
.checkbox-minimal-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    transform: scale(1.2) !important; /* Dimensione uniforme */
    cursor: pointer;
    accent-color: var(--primary-color);
}

label {
    display: block !important;
    margin-bottom: 8px !important; 
    font-weight: 600 !important;
}

/* Stile Testo (Per allineamento) */
.checkbox-minimal-row label {
    font-size: 14px !important; 
    font-weight: 600 !important;
    color: var(--text-color) !important;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1.2;
    margin-bottom: 0px !important;
}

/* Allinea la spunta prima del testo */
.checkbox-minimal-row label > input[type="checkbox"] {
    order: -1; 
}

/* --- FIX ALTEZZA CAMPO NOTA UNIFICATO (Forza estetica Importo) --- */
#expense-note, 
#edit-expense-note {
    /* Il campo Importo (number) è circa 48px, forziamo l'input text ad avere la stessa altezza */
    height: 48px !important; 
    min-height: 48px !important;
    line-height: 48px !important; /* Allineamento testo al centro verticale */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Assicuriamo che gli stili generali di input arrotondati vengano applicati */
    border-radius: 8px !important; 
    font-size: 16px !important;
    font-weight: normal !important;
    
    /* E' un input di testo, ma deve avere lo stesso padding laterale degli altri input */
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* --- FIX SPAZIATURA LABEL PER MODULI ISOLATI --- */
/* Applica margine solo alle label che non sono dentro le checkbox */
label:not(.checkbox-minimal-row label) {
    display:block;
    margin-bottom: 8px !important; /* Riaplica il margine che avevamo perso */
}

/* --- FIX ALTEZZA LABEL ASSOLUTO --- */
#add-expense-amount-screen label, 
#edit-expense-screen label, 
#edit-category-screen label {
    /* IL SEGRETO: Usiamo una proprietà con l'ID per sovrascrivere tutte le regole flex/block */
    margin-bottom: 2px !important; 
    /* Aggiungiamo anche il display:block per sicurezza */
    display: block !important;
}

/* --- FIX HEADER CALENDARIO (Assicuriamo il centramento del Titolo) --- */
#calendar-screen .header h1#cal-month-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important; 
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    
    /* Assicuriamo che il testo sia sempre visibile */
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    text-align: center !important;
}

/* --- FIX CENTRATURA CALENDARIO (Pulizia finale) --- */
#calendar-screen .header .header-info-row {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Pulizia delle posizioni assolute che rompono il layout */
    position: static !important; /* Torna a fluire con il contenuto */
    z-index: 10 !important;
    width: 100% !important; 
    height: auto !important; 
    
    /* Rimuoviamo ogni padding/margin per lasciare che il .header padre gestisca lo spazio */
    padding: 0 !important;
    margin: 0 !important;
    
    /* Centriamo la div interna (solo il testo) */
    display: flex !important;
    flex-direction: column !important;
}

/* FIX: Forza lo spazio sopra il titolo stesso */
#calendar-screen .header #cal-month-title {
    /* (Se il testo era troppo attaccato al bordo del contenitore) */
    margin-top: 10px !important; 
}

/* --- INIZIO: SET DI REGOLE STABILI PER HEADER ICONS --- */

/* 1. REGOLA BASE: Tutte le Icone Header */
.header-icon-btn {
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: #ffffff26;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    box-shadow: none;
    border: none;
    margin: 0;
}

/* 2. REGOLA POSIZIONAMENTO GENERALE (Assicurato per iOS safe area) */
.header-icon-btn {
    top: calc(15px + env(safe-area-inset-top)) !important; 
    /* Z-index Alto per essere sopra il Titolo (z-index: 5) */
    z-index: 3000 !important; 
}

/* 3. POSIZIONAMENTO LATO: Home / Calendario */
#cal-prev-btn, .header-icon-btn.left, 
#home-screen .header #theme-toggle-btn {
    left: 15px !important;
}

#cal-next-btn, .header-icon-btn.right {
    right: 15px !important;
}

/* 4. POSIZIONAMENTO ECCEZIONE (Privacy/Lente) */
.header-icon-btn.right-secondary, 
#home-screen .header #privacy-btn {
    right: 60px !important;
    z-index: 3001 !important; /* Leggermente più alto se necessario */
}

/* 5. FIX FRECCE CALENDARIO: Forzatura Click (Se il click non passa) */
#cal-prev-btn, #cal-next-btn {
    z-index: 5000 !important; /* Massima priorità per l'area di tocco */
}

/* --- FINE: SET DI REGOLE STABILI PER HEADER ICONS --- */
/* --- FIX ALTEZZA HEADER CALENDARIO (e schermate interne) --- */
/* (Questa regola è cruciale perché il suo valore deve essere maggiore di quello della Home) */
#calendar-screen .header,
#add-expense-category-screen .header,
#manage-categories-screen .header,
#chart-screen .header,
#data-screen .header {
    /* Forziamo un'altezza minima che include: (Notch) + (Spazio) + (Titolo) + (Sottotitolo) */
    min-height: 110px !important; /* Aumentiamo a 110px per includere tutto il contenuto */
    box-sizing: border-box !important;
}


/* --- FIX COLORI BUDGET SU GRADIENTE (SPECIFICITA ESTREMA) --- */
/* Override per ogni contesto possibile per garantire che il colore vinca sul gradiente */

/* 1. VERDE (Sotto soglia) */
body.theme-pro-light .amount.status-green,
body.theme-pro-light .expense-category-item .amount.status-green,
body.theme-pro-light .category-summary-item .amount.status-green,
body.theme-pro-light .expense-list-item .amount.status-green,
body .amount.status-green,
body .expense-category-item .amount.status-green,
body .category-summary-item .amount.status-green,
body .expense-list-item .amount.status-green,
.amount.status-green { 
    background: none !important;
    background-image: none !important;
    color: var(--green) !important;
    -webkit-text-fill-color: var(--green) !important;
    font-weight: 700 !important;
}

/* 2. ARANCIONE (Attenzione) */
body.theme-pro-light .amount.status-orange,
body.theme-pro-light .expense-category-item .amount.status-orange,
body.theme-pro-light .category-summary-item .amount.status-orange,
body.theme-pro-light .expense-list-item .amount.status-orange,
body .amount.status-orange,
body .expense-category-item .amount.status-orange,
body .category-summary-item .amount.status-orange,
body .expense-list-item .amount.status-orange,
.amount.status-orange { 
    background: none !important;
    background-image: none !important;
    color: var(--orange) !important;
    -webkit-text-fill-color: var(--orange) !important;
    font-weight: 700 !important;
}

/* 3. ROSSO (Sforato) */
body.theme-pro-light .amount.status-red,
body.theme-pro-light .expense-category-item .amount.status-red,
body.theme-pro-light .category-summary-item .amount.status-red,
body.theme-pro-light .expense-list-item .amount.status-red,
body .amount.status-red,
body .expense-category-item .amount.status-red,
body .category-summary-item .amount.status-red,
body .expense-list-item .amount.status-red,
.amount.status-red { 
    background: none !important;
    background-image: none !important;
    color: var(--red) !important;
    -webkit-text-fill-color: var(--red) !important;
    font-weight: 700 !important;
}

#calendar-screen .header {
    /* Il padding iniziale spinge il contenuto del notch in basso. 
       Aggiungiamo un padding-bottom extra per estendere l'area di sfondo. */
    padding-bottom: 5px !important;
}

/* --- FIX ESTETICA RICERCA (Bordi Arrotondati Standard) --- */
.search-input-wrapper {
    border-radius: 12px !important; /* Torna a 12px come le Card */
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; /* Ombra leggera */
}

/* Rimuove l'outline quando scrivi */
.search-input-wrapper input:focus {
    box-shadow: none !important; 
    background: transparent !important;
}

/* --- STILE FILTRI RICERCA (CHIP) --- */
.tag-chip.filter-chip {
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    opacity: 0.7; /* Leggermente sbiadito se non attivo */
    background-color: transparent !important; /* Sfondo trasparente di base */
    border-width: 1px;
    border-style: solid;
}

.tag-chip.filter-chip.active {
    opacity: 1;
    transform: scale(1.05); /* Pop effect */
    color: white !important; /* Testo bianco sempre */
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Ombra per staccarlo */
    border-color: transparent !important; /* Via il bordo, solo colore pieno */
}

/* --- OFFLINE BANNER (Stile Pillola Fluttuante) --- */
#offline-banner {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top)); /* Sotto il notch */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Si adatta al testo */
    min-width: 200px;
    
    background-color: rgba(255, 59, 48, 0.95); /* Rosso semi-trasparente */
    color: white;
    text-align: center;
    
    padding: 8px 16px;
    border-radius: 20px; /* Arrotondato */
    
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 60000;
    backdrop-filter: blur(5px);
    pointer-events: none; /* Lascia cliccare sotto */
    
    /* Animazione Entrata */
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

#offline-banner.hidden {
    display: none;
}

/* ============================================================
   FIX POSIZIONE HEADER HOME (Konto più in alto e compatto) regolazione header home
   ============================================================ */

/* 1. Contenitore Header Home */
#home-screen .header {
    /* Riduci il padding superiore per alzare tutto il blocco */
    padding-top: calc(5px + env(safe-area-inset-top)) !important;
    
    /* Riduci lo spazio tra gli elementi flessibili */
    gap: 0 !important;
    justify-content: flex-start !important; /* Spinge il contenuto verso l'alto */
}

/* 2. Titolo "Konto" */
#home-screen .header h1 {
    /* Tira su la scritta fisicamente */
    margin-top: -7px !important; 
    
    /* Riduci lo spazio sotto la scritta (verso data e budget) */
    margin-bottom: 5px !important; 
    
    /* Assicurati che l'altezza della riga sia compatta */
    line-height: 1 !important;
}

/* 3. Riga Data e Budget (quella sotto Konto) */
#home-screen .header-info-row {
    /* Avvicinala al titolo sopra */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   PERSONALIZZAZIONE NAVBAR regolazione navbar
   ============================================================ */

/* 1. Il Contenitore della Barra */
.bottom-nav-bar {
    /* Riduci questo valore per stringere la barra */
    height: 50px !important; /* Default era 65px. Prova 50px o 55px */
    
    /* Questo serve per gestire l'allineamento verticale generale */
    align-items: flex-start !important; /* Allinea tutto in alto per poi spingere giù */
}

/* 2. I Pulsanti (Icone + Testo) */
.nav-btn {
    /* AUMENTA questo valore per spingere le icone verso il BASSO */
    padding-top: 10px !important; /* Gioca con questo numero (es. 10px, 15px, 20px) */
    
    /* Assicura che non ci siano altri spazi che interferiscono */
    justify-content: flex-start !important; 
    height: 100% !important;
}

/* Opzionale: Se vuoi spostare solo l'icona e non il testo, o viceversa */
.nav-btn svg {
    margin-bottom: 0px !important; /* Distanza tra icona e testo */
}

/* ============================================================
   CONTROLLO TOTALE HEADER INTERNI (Non-Home)   regolazione headers
   ============================================================ */

/* 1. La Scatola dell'Header */
.header:not(#home-screen .header) {
    /* ALTEZZA TOTALE: Aumenta/Diminuisci per fare il box più grande o piccolo */
    height: 100px !important;      /* Prova 90px, 100px, 110px */
    min-height: 100px !important;  /* Tieni uguale a height */
    max-height: 100px !important;  /* Tieni uguale a height */

    /* POSIZIONE VERTICALE CONTENUTO */
    /* flex-end = tutto in basso */
    /* center = tutto al centro */
    /* flex-start = tutto in alto */
    justify-content: flex-end !important; 
    
    /* SPAZIO DAL BORDO INFERIORE */
    /* Aumenta per tirare su tutto il blocco testo */
    padding-bottom: 10px !important; 
    
    /* SPAZIO DAL BORDO SUPERIORE (Include il notch) */
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
}

/* 2. Il Titolo (H1) */
.header:not(#home-screen .header) h1 {
    /* SPOSTAMENTO FINE DEL TITOLO */
    /* Valori negativi (es. -5px) lo alzano, positivi lo abbassano */
    margin-top: 5px !important; 
    
    /* SPAZIO SOTTO IL TITOLO (Verso il sottotitolo) */
    margin-bottom: 2px !important; 
    
    /* DIMENSIONE FONT */
    font-size: 26px !important;
    line-height: 1.1 !important;
}

/* 3. Il Sottotitolo (P) */
.header:not(#home-screen .header) p {
    /* Spostamento fine del sottotitolo */
    margin-bottom: 0px !important;
    opacity: 0.7 !important;
}

/* 4. CONTENUTO SOTTOSTANTE (Le card) */
/* IMPORTANTE: Se cambi l'altezza dell'header (punto 1), 
   devi aggiornare questo numero per non coprire la prima card o lasciare buchi */
#chart-screen, 
#add-expense-category-screen, 
#manage-categories-screen, 
#data-screen,
#calendar-screen,
#view-expenses-screen,
#monthly-history-screen,
#add-expense-amount-screen,
#edit-category-screen,
#edit-expense-screen,
#weekly-detail-screen,
#weekly-category-detail-screen,
#monthly-category-detail-screen {
    /* Questo valore deve essere circa l'altezza header + 10px */
    padding-top: 110px !important; 
}

/* ============================================================
   LEGGENDA GRAFICO FINALE (GRIGLIA 2 COLONNE COMPATTA E TRONCATA)
   ============================================================ */

#manual-chart-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* RIPRISTINA LE 2 COLONNE */
    gap: 12px 20px !important; /* Spazio controllato */
    margin-top: 15px;
    padding: 0 5px; 
    
    /* Rimuovi scroll Legenda (la lista intera sotto avrà lo scroll) */
    max-height: none !important; 
    overflow-y: visible !important;
}

#manual-chart-legend > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 35px !important;
    padding: 2px 0 !important; /* Padding minimo per compattezza */
    font-size: 16px !important; 
    font-weight: 500 !important;
    opacity: 0.9;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap !important; /* Mantiene il pallino, nome e % su una riga */
    
    /* TRONCAMENTO TESTO LUNGO PER MANTENERE LA LARGHEZZA DELLA GRIGLIA */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 4. CONTROLLO PERCENTUALE (Deve stare a destra senza uscire) */
#manual-chart-legend span:last-child {
    margin-left: auto !important; 
    flex-shrink: 0 !important; /* Non deve stringersi */
    padding-left: 5px; /* Piccolo spazio di separazione dal nome */
}

/* 5. FIX NOME CATEGORIA (Assicurati che il nome sia troncato, non la percentuale) */
#manual-chart-legend > div > span:nth-child(2) {
    flex-grow: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================================
   ANIMAZIONI SWIPE FLUIDO (STILE INSTAGRAM)
   ============================================================ */

/* ============================================================
   FIX RIPRISTINO COLORI CALENDARIO (HEATMAP)
   ============================================================ */



/* FIX VISIBILITÀ GIORNO CORRENTE SELEZIONATO */
/* Quando "Oggi" è anche selezionato, deve vincere il blu della selezione */
.calendar-day.is-today.selected {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.calendar-day.is-today.selected .day-number,
.calendar-day.is-today.selected .day-amount {
    color: #fff !important;
}

/* ============================================================
   FIX SPAZIATURA FINALE E ALLINEAMENTO VAULT
   ============================================================ */

/* 2. Fix card Traguardi (per la pagina Account) */
#data-screen .card:nth-child(2) {
    margin-top: 10px !important; /* Riduci il margine per farla salire */
}

/* 3. FIX SCHERMATA VAULT (IGNORA DOPPIO PADDING) */
/* Questa è la schermata che non deve avere padding-top perché l'overlay-screen lo fa già */
#vault-screen {
    padding-top: 0 !important; /* Azzerato per evitare il doppio spazio */
    padding-bottom: 0 !important;
}

/* ============================================================
   FIX PADDING / MARGIN PER LAYOUT STABILE
   ============================================================ */

/* 1. FIX Z-INDEX BOTTONE VAULT (Per essere sopra l'header) */
#open-vault-btn {
    z-index: 9001 !important;
}

/* 2. FIX SCHERMATA ACCOUNT (Dati) */
/* Riportiamo il contenuto dell'Account più vicino all'header */
#data-screen {
    /* La regola più specifica per dire: il contenuto sotto l'header inizia a 100px */
    padding-top: 145px !important; 
}

/* 5. FIX MARGINI HEADERS PER TUTTI GLI OVERLAY */
/* Assicuriamo che l'header dentro l'overlay funzioni con i margini fissi */
.overlay-screen .header {
    min-height: 110px !important; 
    max-height: 110px !important;
    padding-top: calc(15px + env(safe-area-inset-top)) !important;
    padding-bottom: 15px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
}

/* 3. FIX CARD BADGE LARGHEZZA (Rende il badge card largo come la pagina) */
#vault-display-section > .card {
    margin-left: auto !important; /* Annulla il padding laterale del .container */
    margin-right: auto !important;
    width: auto !important; 
    border-radius: 12px !important; /* Rimuovi angoli per unire il badge al bordo pagina */
}

/* ============================================================
   FIX ALLINEAMENTO ACCOUNT/VAULT (VERSIONE STRUTTURALE)
   ============================================================ */

/* 1. ANNULLA LO SPAZIO IN ECCESSO SU ACCOUNT */
/* La Card Profilo (terzo figlio di #data-screen) ha un margine di 20px di troppo */
.profile-card {
    margin-top: 0px !important; /* Rimuove i 20px di troppo sotto la card badge */
}

/* 2. ALLINEAMENTO VAULT DISPLAY (Compensa 119px - Alza la card) */
/* Questa è la card che mostra il badge "Hai sbloccato" */
#vault-display-section {
    margin-top: -10px !important; /* Sposta il badge card leggermente più su, ma lascia spazio */
    z-index: 5; 
}

/* 3. FIX: SPINGI GIÙ IL CONTENUTO DI VAULT (Risolve il problema del Notch) */
/* Il contenuto di #vault-screen deve iniziare DOPO l'header fisso */
#vault-screen .tabs-container {
    margin-top: 135px !important; /* Spinge giù il menu Tabs (primo elemento) */
    padding-bottom: 10px;
}

/* 4. ALLINEAMENTO CARD PROFILO (La tua foto) */
#data-screen .card:nth-child(4) { /* Targetta la card dopo il badge */
    margin-top: 15px !important; /* Spazio standard tra il badge e la card profilo */
}

/* --- FIX ICONE DENTRO TITOLI ANIMATI --- */
.no-grad {
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: initial !important; /* Ripristina il colore nativo */
    color: initial !important;
    display: inline-block !important;
    animation: none !important; /* Ferma lo scintillio sull'icona */
    padding-left: 5px; /* Un po' di aria dal testo */
}

/* --- KONTO LOCK SCREEN --- */
#app-lock-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color-top); /* Copre tutto */
    z-index: 50000; /* Sotto la splash (99999) ma sopra tutto il resto */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(20px);
}

.lock-content { text-align: center; width: 100%; max-width: 320px; }
.lock-icon { font-size: 40px; margin-bottom: 10px; animation: float 6s ease-in-out infinite; }
#lock-title { margin: 0; font-size: 22px; font-weight: 800; }
#lock-subtitle { margin: 5px 0 20px; font-size: 13px; opacity: 0.7; }

/* Pallini PIN */
.pin-dots { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
.pin-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid var(--text-color); opacity: 0.3;
    transition: all 0.2s;
}
.pin-dot.filled { background-color: var(--primary-color); border-color: var(--primary-color); opacity: 1; transform: scale(1.2); }
.pin-dot.error { background-color: var(--red); border-color: var(--red); animation: shake 0.3s; }

/* Tastierino */
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 25px; margin: 0 auto; }
.pin-btn {
    width: 65px; height: 65px; border-radius: 50%;
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 600; cursor: pointer;
    transition: background 0.2s; user-select: none;
}
.pin-btn:active { background: rgba(255,255,255,0.2); }

.biometric-btn { font-size: 10px !important; font-weight: 800; color: var(--primary-color); border-color: var(--primary-color); }
.delete-btn { font-size: 20px; color: var(--red); background: transparent; border: none; }

/* FIX PADDING SCHERMATA PRESTITI */
#loan-detail-screen {
    padding-top: 120px !important; /* Spinge giù il contenuto sotto l'header */
    box-sizing: border-box !important;
    padding-bottom: 100px !important; /* Spazio per i bottoni fissi in basso */
    height: 100vh !important;
    overflow-y: auto !important; /* Abilita lo scroll */
}

/* ============================================================
   FIX ALLINEAMENTO ICONE HEADER (Insights/Account)
   ============================================================ */
/* Allinea icone header (Insights/Account) con il titolo (H1) */
#chart-screen .header .header-icon-btn,
#data-screen .header .header-icon-btn {
    /* L'utente segnala che devono "salire" rispetto ai 15px originali */
    top: calc(5px + env(safe-area-inset-top)) !important; 
}

/* Reduce padding for expense cards to prevent wrapping of large amounts */
body .expense-category-item {
    padding: 6px !important;
}