/* ============================================================
   DARK MODE (default)
   ============================================================ */
:root {
    --bg-primary: #0a0a1a; --bg-secondary: #12122a; --bg-tertiary: #1a1a3a; --bg-card: #16162e;
    --text-primary: #ffffff; --text-secondary: #a0a0c0; --text-muted: #606080;
    --accent-cyan: #00f5d4; --accent-blue: #00bbf9; --accent-purple: #9b5de5;
    --success: #00f5a0; --danger: #ff4757; --warning: #ffbe0b;
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-glow: 0 0 40px rgba(0, 245, 212, 0.15);
    --gradient-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue), var(--accent-purple));
    --gradient-success: linear-gradient(135deg, #00f5a0, #00d9a0);
    --header-bg: rgba(10, 10, 26, 0.95);
    --app-bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 245, 212, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(155, 93, 229, 0.08) 0%, transparent 50%);
    --login-btn-text: #0a0a1a;
    --year-btn-active-text: #0a0a1a;
    --scrollbar-thumb: #606080;
    --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace;
    --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
    --transition-fast: 0.15s ease;
    --box-size: 44px; --box-gap: 8px;
}

/* ============================================================
   RESPONSIVE - SCHERMI GRANDI (>1920px)
   ============================================================ */
@media (min-width: 1920px) {
    :root {
        --box-size: 52px;
        --box-gap: 12px;
    }
}

@media (min-width: 2560px) {
    :root {
        --box-size: 60px;
        --box-gap: 14px;
    }
}

@media (min-width: 3840px) {
    :root {
        --box-size: 74px;
        --box-gap: 18px;
    }
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
[data-theme="light"] {
    --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #e8ecf2; --bg-card: #ffffff;
    --text-primary: #1a1a2e; --text-secondary: #4a4a6a; --text-muted: #8888a0;
    --accent-cyan: #00b4a0; --accent-blue: #0099d6; --accent-purple: #7c4dbd;
    --success: #00b876; --danger: #e53e4f; --warning: #e5a000;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --gradient-primary: linear-gradient(135deg, #00b4a0, #0099d6, #7c4dbd);
    --gradient-success: linear-gradient(135deg, #00b876, #00a066);
    --header-bg: rgba(255, 255, 255, 0.95);
    --app-bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 180, 160, 0.05) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(124, 77, 189, 0.05) 0%, transparent 50%);
    --login-btn-text: #ffffff;
    --year-btn-active-text: #ffffff;
    --scrollbar-thumb: #c0c0d0;
    --pupil-color: #1a1a2e;
}

/* Pupilla dell'occhio nel logo */
[data-theme="light"] .login-logo svg circle:nth-child(4) { fill: #1a1a2e; }
[data-theme="light"] .logo-icon circle:nth-child(3) { fill: #f5f7fa; }

/* ============================================================
   MATRIX MODE - Green Terminal Style
   ============================================================ */
[data-theme="matrix"] {
    --bg-primary: #0a0a0a; --bg-secondary: #0d0d0d; --bg-tertiary: #141414; --bg-card: #111111;
    --text-primary: #00ff00; --text-secondary: #00cc00; --text-muted: #006600;
    --accent-cyan: #00ff41; --accent-blue: #00ff41; --accent-purple: #39ff14;
    --success: #00ff00; --danger: #ff0040; --warning: #ccff00;
    --border-color: rgba(0, 255, 65, 0.15);
    --shadow-glow: 0 0 40px rgba(0, 255, 65, 0.2);
    --gradient-primary: linear-gradient(135deg, #00ff41, #00ff00, #39ff14);
    --gradient-success: linear-gradient(135deg, #00ff00, #00cc00);
    --header-bg: rgba(10, 10, 10, 0.98);
    --app-bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 255, 65, 0.05) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(57, 255, 20, 0.05) 0%, transparent 50%);
    --login-btn-text: #0a0a0a;
    --year-btn-active-text: #0a0a0a;
    --scrollbar-thumb: #00aa00;
}

/* Matrix theme specifics */
[data-theme="matrix"] .login-logo svg circle:nth-child(4) { fill: #00ff00; }
[data-theme="matrix"] .logo-icon circle:nth-child(3) { fill: #0a0a0a; }
[data-theme="matrix"] body { text-shadow: 0 0 2px rgba(0, 255, 0, 0.3); }
[data-theme="matrix"] .login-box { box-shadow: 0 0 60px rgba(0, 255, 65, 0.15), inset 0 0 30px rgba(0, 255, 65, 0.02); }
[data-theme="matrix"] .app-header { box-shadow: 0 2px 20px rgba(0, 255, 65, 0.1); }
[data-theme="matrix"] .year-btn:hover { background: rgba(0, 255, 65, 0.1); }
[data-theme="matrix"] .total-box { text-shadow: 0 0 8px currentColor; }
[data-theme="matrix"] .month-box { border-color: rgba(0, 255, 65, 0.2); }
[data-theme="matrix"] .popup { box-shadow: 0 0 60px rgba(0, 255, 65, 0.2); }
[data-theme="matrix"] input, [data-theme="matrix"] select, [data-theme="matrix"] textarea { 
    background: #0a0a0a; border-color: rgba(0, 255, 65, 0.3); color: #00ff00;
}
[data-theme="matrix"] input:focus, [data-theme="matrix"] select:focus, [data-theme="matrix"] textarea:focus {
    border-color: #00ff41; box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}
[data-theme="matrix"] input::placeholder { color: #006600; }
[data-theme="matrix"] .client-name { text-shadow: 0 0 5px rgba(0, 255, 0, 0.3); }
[data-theme="matrix"] .notifications-panel { box-shadow: -10px 0 40px rgba(0, 255, 65, 0.2); }
[data-theme="matrix"] .notification-item.unread { border-left-color: #00ff41; background: rgba(0, 255, 65, 0.05); }
[data-theme="matrix"] ::selection { background: #00ff41; color: #0a0a0a; }

/* ============================================================
   PINK MODE - Soft & Elegant Style
   ============================================================ */
[data-theme="pink"] {
    --bg-primary: #f8f5f6; --bg-secondary: #ffffff; --bg-tertiary: #f0e8eb; --bg-card: #ffffff;
    --text-primary: #2A1128; --text-secondary: #5a4055; --text-muted: #9a8090;
    --accent-cyan: #1CD1FD; --accent-blue: #4A65FC; --accent-purple: #8610FD;
    --accent-pink: #F7288D; --accent-yellow: #FBE035;
    --success: #6C9E52; --danger: #E13E20; --warning: #FBE035;
    --border-color: rgba(247, 40, 141, 0.15);
    --shadow-glow: 0 4px 24px rgba(247, 40, 141, 0.12);
    --gradient-primary: linear-gradient(135deg, #F7288D, #F3B3C2, #8610FD);
    --gradient-success: linear-gradient(135deg, #6C9E52, #5a8a45);
    --header-bg: rgba(255, 255, 255, 0.95);
    --app-bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(243, 179, 194, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(247, 40, 141, 0.08) 0%, transparent 50%);
    --login-btn-text: #ffffff;
    --year-btn-active-text: #ffffff;
    --scrollbar-thumb: #F3B3C2;
}

/* Pink theme specifics */
[data-theme="pink"] .login-logo svg circle:nth-child(4) { fill: #f8f5f6; }
[data-theme="pink"] .logo-icon circle:nth-child(3) { fill: #2A1128; }
[data-theme="pink"] .login-box { box-shadow: 0 8px 40px rgba(247, 40, 141, 0.12); border: 1px solid rgba(243, 179, 194, 0.4); }
[data-theme="pink"] .app-header { box-shadow: 0 2px 20px rgba(243, 179, 194, 0.25); border-bottom: 1px solid rgba(243, 179, 194, 0.3); }
[data-theme="pink"] .year-btn:hover { background: rgba(243, 179, 194, 0.3); }
[data-theme="pink"] .year-btn.active { background: linear-gradient(135deg, #F7288D, #F3B3C2); }
[data-theme="pink"] .year-btn.all-years { border-color: #F7288D; color: #F7288D; }
[data-theme="pink"] .year-btn.all-years.active { background: linear-gradient(135deg, #F7288D, #8610FD); }
[data-theme="pink"] .total-box { border-color: rgba(243, 179, 194, 0.4); }
[data-theme="pink"] .month-box { border-color: rgba(243, 179, 194, 0.3); }
[data-theme="pink"] .popup { box-shadow: 0 8px 40px rgba(247, 40, 141, 0.15); border: 1px solid rgba(243, 179, 194, 0.3); }
[data-theme="pink"] input, [data-theme="pink"] select, [data-theme="pink"] textarea { 
    background: #ffffff; border-color: rgba(243, 179, 194, 0.5); color: #2A1128;
}
[data-theme="pink"] input:focus, [data-theme="pink"] select:focus, [data-theme="pink"] textarea:focus {
    border-color: #F7288D; box-shadow: 0 0 0 3px rgba(247, 40, 141, 0.1);
}
[data-theme="pink"] input::placeholder { color: #9a8090; }
[data-theme="pink"] .client-row { border-color: rgba(243, 179, 194, 0.25); }
[data-theme="pink"] .client-row:hover { background: rgba(243, 179, 194, 0.1); }
[data-theme="pink"] .notifications-panel { box-shadow: -10px 0 40px rgba(243, 179, 194, 0.3); }
[data-theme="pink"] .notification-item.unread { border-left-color: #F7288D; background: rgba(243, 179, 194, 0.15); }
[data-theme="pink"] ::selection { background: #F3B3C2; color: #2A1128; }
[data-theme="pink"] .all-invoices-btn, [data-theme="pink"] .all-payments-btn, [data-theme="pink"] .all-solleciti-btn {
    border-color: rgba(243, 179, 194, 0.5); color: #5a4055;
}
[data-theme="pink"] .all-invoices-btn:hover { border-color: #F7288D; color: #F7288D; }
[data-theme="pink"] .all-payments-btn:hover { border-color: #6C9E52; color: #6C9E52; }
[data-theme="pink"] .all-solleciti-btn:hover { border-color: #8610FD; color: #8610FD; }
[data-theme="pink"] .search-box input { background: #ffffff; border-color: rgba(243, 179, 194, 0.5); }
[data-theme="pink"] .search-box input:focus { border-color: #F7288D; }
[data-theme="pink"] .company-menu-btn { border-color: rgba(243, 179, 194, 0.5); }

/* ============================================================
   GENERAL STYLES
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { transition: background-color 0.3s ease, color 0.3s ease; }
body {
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* PWA safe areas per dispositivi con notch */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
#app { width: 100%; min-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
#app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--app-bg-gradient); pointer-events: none; z-index: 0; }

/* LOGIN */
.login-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: background-color 0.3s ease; }
.login-overlay.hidden { display: none; }
.login-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 48px; width: 420px; max-width: 90vw; box-shadow: var(--shadow-glow); position: relative; transition: background-color 0.3s ease; }
.login-theme-toggle { position: absolute; top: 16px; right: 16px; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; }
.login-logo svg { width: 80px; height: 90px; filter: drop-shadow(0 0 20px rgba(0, 245, 212, 0.5)); animation: loginLogoPulse 2s ease-in-out infinite; cursor: pointer; overflow: visible; }
@keyframes loginLogoPulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 245, 212, 0.4)); } 50% { filter: drop-shadow(0 0 40px rgba(0, 245, 212, 0.7)); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.login-logo h1 { font-family: var(--font-display); font-size: 36px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Eye Logo Colors */
.eye-logo { --eye-color-1: #00f5d4; --eye-color-2: #00bbf9; --eye-color-3: #9b5de5; }

/* Eyelid and eyelashes - open state (hidden above) */
.eye-logo .eyelid {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.eye-logo .eyelashes-group {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-28px);
    opacity: 0;
}

/* Closed state - eyelid covers eye, lashes visible below */
.eye-logo.closed .eyelid {
    transform: translateY(42px);
}

.eye-logo.closed .eyelashes-group {
    transform: translateY(18px);
    opacity: 1;
}

/* Auto-wink animation */
@keyframes autoWinkEyelid {
    0%, 100% { transform: translateY(0); }
    40%, 60% { transform: translateY(42px); }
}

@keyframes autoWinkLashes {
    0%, 100% { transform: translateY(-28px); opacity: 0; }
    40%, 60% { transform: translateY(18px); opacity: 1; }
}

.eye-logo.auto-wink .eyelid {
    animation: autoWinkEyelid 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.eye-logo.auto-wink .eyelashes-group {
    animation: autoWinkLashes 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.eye-logo .eyelashes {
    opacity: 1;
}

/* Matrix theme - Green eye */
[data-theme="matrix"] .eye-logo { --eye-color-1: #00ff41; --eye-color-2: #00ff00; --eye-color-3: #39ff14; }
[data-theme="matrix"] .login-logo svg { filter: drop-shadow(0 0 25px rgba(0, 255, 65, 0.7)); }
[data-theme="matrix"] .login-logo h1 { background: linear-gradient(135deg, #00ff41, #00ff00, #39ff14); -webkit-background-clip: text; }
@keyframes matrixLogoPulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 255, 65, 0.5)); } 50% { filter: drop-shadow(0 0 50px rgba(0, 255, 65, 0.9)); } }
[data-theme="matrix"] .login-logo svg { animation: matrixLogoPulse 1.5s ease-in-out infinite; }
[data-theme="matrix"] .eye-logo .eyelid { fill: #0a0a0a; }

/* Light theme eye colors */
[data-theme="light"] .eye-logo { --eye-color-1: #00b4a0; --eye-color-2: #0099d6; --eye-color-3: #7c4dbd; }
[data-theme="light"] .eye-logo .eyelid { fill: #f5f7fa; }

/* Pink theme - Fuchsia eye */
[data-theme="pink"] .eye-logo { --eye-color-1: #F7288D; --eye-color-2: #F3B3C2; --eye-color-3: #8610FD; }
[data-theme="pink"] .login-logo svg { filter: drop-shadow(0 0 20px rgba(247, 40, 141, 0.4)); }
[data-theme="pink"] .login-logo h1 { background: linear-gradient(135deg, #F7288D, #F3B3C2, #8610FD); -webkit-background-clip: text; }
@keyframes pinkLogoPulse { 0%, 100% { filter: drop-shadow(0 0 15px rgba(247, 40, 141, 0.3)); } 50% { filter: drop-shadow(0 0 30px rgba(247, 40, 141, 0.5)); } }
[data-theme="pink"] .login-logo svg { animation: pinkLogoPulse 2s ease-in-out infinite; }
[data-theme="pink"] .eye-logo .eyelid { fill: #f8f5f6; }

.login-form { display: flex; flex-direction: column; gap: 20px; }
.turnstile-container { display: flex; justify-content: center; margin: 4px 0; }
.turnstile-container iframe { border-radius: var(--radius-md); }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.login-field input { padding: 14px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 15px; }
.login-field input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.1); }
.login-btn { padding: 16px; background: var(--gradient-primary); border: none; border-radius: var(--radius-md); color: var(--login-btn-text); font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 245, 212, 0.3); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.login-error { background: rgba(255, 71, 87, 0.1); border: 1px solid rgba(255, 71, 87, 0.3); border-radius: var(--radius-sm); padding: 12px; color: var(--danger); font-size: 14px; text-align: center; display: none; margin-bottom: 16px; }
.login-error.visible { display: block; animation: slideDown 0.3s ease-out; }
.login-form.shake { animation: shake 0.5s ease-in-out; }
.login-success { background: rgba(0, 245, 160, 0.1); border: 1px solid rgba(0, 245, 160, 0.3); border-radius: var(--radius-sm); padding: 12px; color: var(--success); font-size: 14px; text-align: center; display: none; }
.login-success.visible { display: block; }
.login-subtitle { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 16px; }
.login-links { text-align: center; margin-top: 16px; }
.login-links a { color: var(--accent-cyan); font-size: 13px; text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
.password-strength { font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); margin-top: -8px; }
.password-strength.weak { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
.password-strength.medium { background: rgba(255, 190, 11, 0.1); color: var(--warning); }
.password-strength.strong { background: rgba(0, 245, 160, 0.1); color: var(--success); }
.password-requirements { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.password-requirements .valid { color: var(--success); }
.password-requirements .invalid { color: var(--text-muted); }
.login-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); text-align: center; }
.login-footer-company { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.login-footer-company strong { color: var(--text-secondary); font-weight: 600; }
.login-footer-copyright { font-size: 10px; color: var(--text-muted); opacity: 0.7; line-height: 1.5; }

/* HEADER */
.app-header { position: sticky; top: 0; z-index: 150; display: flex; align-items: center; gap: 16px; padding: 16px 40px; height: 72px; background: var(--header-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease; }
.header-left { display: flex; align-items: center; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.5)); --eye-color-1: #00f5d4; --eye-color-2: #00bbf9; --eye-color-3: #9b5de5; }
.logo h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Matrix theme header logo */
[data-theme="matrix"] .logo-icon { --eye-color-1: #00ff41; --eye-color-2: #00ff00; --eye-color-3: #39ff14; filter: drop-shadow(0 0 12px rgba(0, 255, 65, 0.7)); }
[data-theme="matrix"] .logo h1 { background: linear-gradient(135deg, #00ff41, #00ff00, #39ff14); -webkit-background-clip: text; text-shadow: 0 0 20px rgba(0, 255, 65, 0.5); }

/* Light theme header logo - same colors as dark theme */
[data-theme="light"] .logo-icon { filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.5)); }
[data-theme="light"] .logo-icon circle:nth-child(3) { fill: #0a0a1a; }
[data-theme="light"] .logo h1 { background: linear-gradient(135deg, #00f5d4, #00bbf9, #9b5de5); -webkit-background-clip: text; }

/* Pink theme header logo */
[data-theme="pink"] .logo-icon { --eye-color-1: #F7288D; --eye-color-2: #F3B3C2; --eye-color-3: #8610FD; filter: drop-shadow(0 0 8px rgba(247, 40, 141, 0.4)); }
[data-theme="pink"] .logo-icon circle:nth-child(3) { fill: #2A1128; }
[data-theme="pink"] .logo h1 { background: linear-gradient(135deg, #F7288D, #F3B3C2, #8610FD); -webkit-background-clip: text; }

.header-right { display: flex; align-items: center; gap: 16px; flex: 1; }
.search-box { position: relative; flex: 1; min-width: 200px; max-width: 100%; }
.search-box input { width: 100%; padding: 10px 40px 10px 40px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; }
.search-box input:focus { outline: none; border-color: var(--accent-cyan); }
.search-box input::placeholder { color: var(--text-muted); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.search-clear-btn:hover {
    background: var(--danger);
    color: white;
}
.year-selector { display: flex; gap: 4px; background: transparent; padding: 0; border-radius: var(--radius-md); flex-shrink: 0; }
.year-select {
    padding: 10px 36px 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    transition: all 0.2s;
}
.year-select:hover {
    border-color: var(--accent-cyan);
}
.year-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
[data-theme="light"] .year-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.year-select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 8px;
}
.year-btn { padding: 6px 12px; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.year-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .year-btn:hover { background: rgba(0, 0, 0, 0.05); }
.year-btn.active { background: var(--gradient-primary); color: var(--year-btn-active-text); }
.year-btn.all-years { border: 1px solid var(--accent-purple); color: var(--accent-purple); }
.year-btn.all-years.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); border-color: transparent; color: #fff; }
.logout-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.logout-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Notifications Bell Button */
.notifications-btn { 
    position: relative; 
    padding: 10px 12px; 
    background: var(--bg-tertiary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notifications-btn:hover { border-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.05); }
.notifications-btn.active { border-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.1); }
.notifications-btn .bell-icon { color: var(--text-secondary); transition: all 0.2s; }
.notifications-btn:hover .bell-icon { color: var(--accent-cyan); }
.notifications-btn.has-unread .bell-icon { color: var(--accent-cyan); animation: bell-shake 0.5s ease-in-out; }

/* Tasks Button */
.tasks-btn { 
    position: relative; 
    padding: 10px 12px; 
    background: var(--bg-tertiary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tasks-btn:hover { border-color: var(--accent-purple); background: rgba(155, 93, 229, 0.05); }
.tasks-btn.active { border-color: var(--accent-purple); background: rgba(155, 93, 229, 0.1); }
.tasks-btn .tasks-icon { color: var(--text-secondary); transition: all 0.2s; }
.tasks-btn:hover .tasks-icon { color: var(--accent-purple); }
.tasks-btn.has-tasks .tasks-icon { color: var(--accent-purple); }

.tasks-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-purple);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(155, 93, 229, 0.4);
    border: 2px solid var(--bg-primary);
}

/* Documents Button */
.documents-btn {
    position: relative;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.documents-btn:hover { border-color: var(--accent-purple); background: rgba(155, 93, 229, 0.05); }
.documents-btn.active { border-color: var(--accent-purple); background: rgba(155, 93, 229, 0.1); }
.documents-btn .documents-icon { color: var(--text-secondary); transition: all 0.2s; }
.documents-btn:hover .documents-icon { color: var(--accent-purple); }

.documents-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-purple);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(155, 93, 229, 0.4);
    border: 2px solid var(--bg-primary);
}

.analysis-btn {
    position: relative;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.analysis-btn:hover { border-color: #3498db; background: rgba(52, 152, 219, 0.05); }
.analysis-btn.active { border-color: #3498db; background: rgba(52, 152, 219, 0.1); }
.analysis-btn .analysis-icon { color: var(--text-secondary); transition: all 0.2s; }
.analysis-btn:hover .analysis-icon { color: #3498db; }

/* Foreign Invoices Button */
.foreign-invoices-btn {
    position: relative;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.foreign-invoices-btn:hover { border-color: #16a085; background: rgba(22, 160, 133, 0.05); }
.foreign-invoices-btn.active { border-color: #16a085; background: rgba(22, 160, 133, 0.1); }
.foreign-invoices-btn .foreign-invoices-icon { color: var(--text-secondary); transition: all 0.2s; }
.foreign-invoices-btn:hover .foreign-invoices-icon { color: #16a085; }

/* Stripe Button */
.stripe-btn {
    position: relative;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stripe-btn:hover { border-color: #635BFF; background: rgba(99, 91, 255, 0.05); }
.stripe-btn.active { border-color: #635BFF; background: rgba(99, 91, 255, 0.1); }
.stripe-btn .stripe-icon { color: var(--text-secondary); transition: all 0.2s; }
.stripe-btn:hover .stripe-icon { color: #635BFF; }

@keyframes bell-shake {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(15deg); }
    40%, 80% { transform: rotate(-15deg); }
}

.notifications-badge { 
    position: absolute; 
    top: -4px; 
    right: -4px; 
    min-width: 18px; 
    height: 18px; 
    padding: 0 5px;
    background: #e74c3c; 
    border-radius: 9px; 
    font-size: 11px; 
    font-weight: 700; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4);
    border: 2px solid var(--bg-primary);
}

/* Notifications Panel (Sidebar) */
.notifications-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}
.notifications-panel.active { right: 0; }

.notifications-panel-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notifications-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.notifications-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.notifications-panel-close:hover { background: var(--danger); color: #fff; }

/* Indicatore filtro cliente nel pannello notifiche */
.notif-client-filter-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 245, 212, 0.1);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
.notif-client-filter-indicator .filter-label { color: var(--text-muted); }
.notif-client-filter-indicator .filter-value { color: var(--accent-cyan); font-weight: 600; }
.notif-client-filter-indicator .filter-clear {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.notif-client-filter-indicator .filter-clear:hover { background: var(--danger); color: #fff; }

.notifications-tabs {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}
.notifications-tab {
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.notifications-tab:hover { color: var(--text-primary); }
.notifications-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.notifications-tab.write-btn {
    margin-left: auto;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.notifications-tab.write-btn:hover { transform: scale(1.02); }

.notifications-filters {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.notifications-filter-select {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.notifications-filter-select:hover {
    border-color: var(--accent-cyan);
}
.notifications-filter-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.notifications-search-row {
    padding: 0 16px 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.notifications-search-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s;
}
.notifications-search-input:hover {
    border-color: var(--accent-purple);
}
.notifications-search-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.15);
    background: var(--bg-primary);
}
.notifications-search-input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

.notifications-user-filter {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.notifications-filter-select.full-width {
    width: 100%;
    flex: none;
}

.notifications-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.notification-item {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.notification-item:hover { background: rgba(0, 245, 212, 0.05); }
.notification-item.unread { 
    background: rgba(0, 245, 212, 0.08); 
    border-left-color: var(--accent-cyan);
}
.notification-item.unread .notification-title { font-weight: 600; }

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}
.notification-title {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.notification-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 10px;
}
.notification-sender {
    font-size: 12px;
    color: var(--accent-cyan);
    margin-bottom: 6px;
}
.notification-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-client {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(155, 89, 182, 0.15);
    border-radius: 12px;
    font-size: 11px;
    color: #9b59b6;
}
.notification-recipient {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 8px;
    background: rgba(52, 152, 219, 0.15);
    border-radius: 10px;
    font-size: 10px;
    color: #3498db;
}
.notification-recipient.all-users {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}
.notification-item { position: relative; }
.notification-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.notification-item:hover .notification-actions { opacity: 1; }
.notification-delete-btn,
.notification-reassign-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-delete-btn {
    background: rgba(231, 76, 60, 0.1);
    color: var(--danger);
}
.notification-delete-btn:hover { background: var(--danger); color: #fff; }
.notification-reassign-btn {
    background: rgba(52, 152, 219, 0.1);
    color: var(--accent-blue);
}
.notification-reassign-btn:hover { background: var(--accent-blue); color: #fff; }

/* Priority badges */
.notification-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
}
.notification-priority.low { background: rgba(46, 204, 113, 0.15); color: #27ae60; }
.notification-priority.normal { background: rgba(241, 196, 15, 0.15); color: #f39c12; }
.notification-priority.high { background: rgba(231, 76, 60, 0.2); color: #e74c3c; animation: pulse-priority 1.5s infinite; }
@keyframes pulse-priority {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Priority indicator on card */
.notification-item.priority-high { border-left-color: #e74c3c !important; }
.notification-item.priority-low { border-left-color: #27ae60; }
.notification-item.priority-normal { border-left-color: #f39c12; }

.notifications-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.notifications-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.notifications-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.notifications-overlay.active { opacity: 1; visibility: visible; }

/* Write Notification Popup */
.write-notification-popup { width: 550px; }
.write-notification-form { padding: 20px; }
.write-notification-form .form-group { margin-bottom: 16px; }
.write-notification-form .form-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-secondary); }
.write-notification-form .form-input, 
.write-notification-form .form-select,
.write-notification-form .form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
}
.write-notification-form .form-textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.write-notification-form .form-input:focus,
.write-notification-form .form-select:focus,
.write-notification-form .form-textarea:focus { outline: none; border-color: var(--accent-cyan); }

.client-autocomplete-wrapper { position: relative; }
.client-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}
.client-autocomplete-results.active { display: block; }
.client-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.client-autocomplete-item:last-child { border-bottom: none; }
.client-autocomplete-item:hover { background: rgba(0, 245, 212, 0.05); }
.client-autocomplete-item .client-name { font-size: 13px; color: var(--text-primary); }
.client-autocomplete-item .client-vat { font-size: 11px; color: var(--text-muted); }

.write-notification-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.write-notification-form .form-row {
    display: flex;
    gap: 16px;
}

/* Notification Detail Popup with Chat */
.notification-detail-popup { width: 600px; max-width: 95vw; display: flex; flex-direction: column; max-height: 85vh; }
.notification-detail-popup .popup-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.notification-detail-popup .popup-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.notification-detail-popup .popup-header-actions { display: flex; gap: 8px; align-items: center; }

.notification-edit-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.notification-edit-btn:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

.notification-edit-form {
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    overflow-y: auto;
    max-height: 60vh;
}
.notification-edit-group {
    margin-bottom: 12px;
}
.notification-edit-group:last-child {
    margin-bottom: 0;
}
.notification-edit-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.notification-edit-input,
.notification-edit-textarea,
.notification-edit-select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s;
}
.notification-edit-input:focus,
.notification-edit-textarea:focus,
.notification-edit-select:focus {
    outline: none;
    border-color: var(--accent-purple);
}
.notification-edit-textarea {
    min-height: 60px;
    max-height: 120px;
    resize: vertical;
}
.notification-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.notification-edit-save {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.notification-edit-save:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(155, 93, 229, 0.3);
}
.notification-edit-cancel {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.notification-edit-cancel:hover {
    background: var(--bg-secondary);
}

/* Client search in edit form */
.notification-edit-client-search {
    position: relative;
}
.notification-edit-client-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}
.notification-edit-client-results.active {
    display: block;
}
.notification-edit-client-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.notification-edit-client-item:last-child {
    border-bottom: none;
}
.notification-edit-client-item:hover {
    background: var(--bg-tertiary);
}
.notification-edit-selected-client {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(155, 93, 229, 0.1);
    border-radius: var(--radius-sm);
    margin-top: 8px;
}
.notification-edit-selected-client span {
    flex: 1;
    font-size: 13px;
    color: var(--accent-purple);
}
.notification-edit-clear-client {
    background: none;
    border: none;
    color: var(--accent-purple);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.notification-detail-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.notification-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.notification-detail-sender {
    font-size: 14px;
    color: var(--accent-cyan);
    font-weight: 500;
}
.notification-detail-time {
    font-size: 12px;
    color: var(--text-muted);
}
.notification-detail-message {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
}
.notification-detail-client {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(155, 89, 182, 0.1);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #9b59b6;
}

/* Chat Replies Section */
.notification-replies-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: 400px;
}
.notification-replies-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.notification-replies-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Chat Bubbles */
.chat-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
}
.chat-bubble.sent {
    align-self: flex-end;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-bottom-right-radius: 4px;
}
.chat-bubble.received {
    align-self: flex-start;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.chat-bubble-sender {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.8;
}
.chat-bubble.received .chat-bubble-sender { color: var(--accent-cyan); }
.chat-bubble-message {
    font-size: 14px;
    line-height: 1.5;
}
.chat-bubble-time {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 6px;
    text-align: right;
}

/* Reply Input */
.notification-reply-input {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.notification-reply-input textarea {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 44px;
    max-height: 120px;
}
.notification-reply-input textarea:focus { outline: none; border-color: var(--accent-cyan); }
.notification-reply-input textarea::placeholder { color: var(--text-muted); }
.notification-reply-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: var(--bg-primary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.notification-reply-btn:hover { transform: scale(1.05); }
.notification-reply-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.reply-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}
.reply-input-wrapper input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 14px;
}
.reply-input-wrapper input:focus { outline: none; border-color: var(--accent-cyan); }
.reply-input-wrapper input::placeholder { color: var(--text-muted); }
.reply-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reply-send-btn:hover { transform: scale(1.05); }
.reply-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.chat-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Company Menu */
.company-menu-wrapper { position: relative; }
.company-menu-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
.company-menu-btn:hover { border-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.05); }
.company-menu-btn.active { border-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.1); }
.company-menu-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.company-menu-name { font-size: 13px; font-weight: 500; color: var(--text-primary); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-menu-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s ease; }
.company-menu-btn.active .company-menu-arrow { transform: rotate(180deg); }

.company-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 500; }
.company-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }

.company-dropdown-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; }
.company-dropdown-logo { width: 44px; height: 44px; border-radius: 8px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.company-dropdown-info { flex: 1; min-width: 0; }
.company-dropdown-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.company-dropdown-code { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.company-dropdown-code .copy-btn { padding: 2px 6px; background: var(--bg-tertiary); border: none; border-radius: 4px; color: var(--text-muted); font-size: 10px; cursor: pointer; }
.company-dropdown-code .copy-btn:hover { background: var(--accent-cyan); color: var(--bg-primary); }

/* User Profile Button */
.user-profile-btn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; width: 100%; }
.user-profile-btn:hover { background: var(--bg-secondary); border-color: var(--accent-cyan); }
.user-profile-btn .user-icon { font-size: 16px; }
.user-profile-btn .user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; text-align: left; }
.user-profile-btn .user-role { font-size: 10px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; font-weight: 600; }
.user-profile-btn .user-role.admin { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.user-profile-btn .user-role.contabile { background: rgba(0, 245, 212, 0.2); color: var(--accent-cyan); }

/* Profile Popup */
.profile-popup { width: 500px; }
.profile-header { display: flex; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border-color); }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.profile-info h3 { margin: 0 0 4px 0; font-size: 18px; color: var(--text-primary); }
.profile-info .profile-role { font-size: 12px; padding: 4px 12px; border-radius: 12px; display: inline-block; }
.profile-info .profile-role.admin { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.profile-info .profile-role.contabile { background: rgba(0, 245, 212, 0.2); color: var(--accent-cyan); }
.profile-content { padding: 20px; }
.profile-section { margin-bottom: 24px; }
.profile-section h4 { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; margin: 0 0 12px 0; letter-spacing: 0.5px; }
.profile-field { margin-bottom: 16px; }
.profile-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.profile-field input { width: 100%; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; box-sizing: border-box; }
.profile-field input:focus { outline: none; border-color: var(--accent-cyan); }
.profile-field input:disabled { opacity: 0.6; cursor: not-allowed; }
.profile-actions { display: flex; gap: 12px; justify-content: flex-end; }
.profile-btn { padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.profile-btn.primary { background: var(--accent-cyan); border: none; color: var(--bg-primary); }
.profile-btn.primary:hover { background: #00d4aa; }
.profile-btn.secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.profile-btn.secondary:hover { background: var(--bg-tertiary); }

/* Users Management Popup */
.users-popup { width: 800px; max-height: 80vh; }
.users-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-color); }
.users-header h3 { margin: 0; }
.add-user-btn { padding: 8px 16px; background: var(--accent-cyan); border: none; border-radius: var(--radius-sm); color: var(--bg-primary); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.add-user-btn:hover { background: #00d4aa; }
.users-list { max-height: 400px; overflow-y: auto; padding: 16px; }
.user-card { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin-bottom: 12px; }
.user-card.current { border: 1px solid var(--accent-cyan); }
.user-card.inactive { opacity: 0.5; }
.user-card-info { display: flex; align-items: center; gap: 12px; }
.user-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-weight: 600; }
.user-card-details { display: flex; flex-direction: column; gap: 2px; }
.user-card-name { font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.user-card-email { font-size: 12px; color: var(--text-muted); }
.user-card-meta { display: flex; gap: 8px; }
.user-badge { font-size: 10px; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; font-weight: 600; }
.user-badge.role-admin { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.user-badge.role-contabile { background: rgba(0, 245, 212, 0.2); color: var(--accent-cyan); }
.user-badge.status-active { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.user-badge.status-inactive { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.user-badge.current { background: rgba(0, 187, 249, 0.2); color: #00bbf9; }
.user-card-role { font-size: 10px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; font-weight: 600; margin-left: 8px; }
.user-card-role.admin { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.user-card-role.contabile { background: rgba(0, 245, 212, 0.2); color: var(--accent-cyan); }
.user-card-actions { display: flex; gap: 8px; }
.user-action-btn { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s; background: var(--bg-secondary); color: var(--text-muted); }
.user-action-btn:hover { transform: scale(1.1); }
.user-action-btn.success:hover { background: var(--success); color: #fff; }
.user-action-btn.warning:hover { background: var(--warning); color: #fff; }
.user-action-btn.danger:hover { background: var(--danger); color: #fff; }
.user-action-btn.toggle { background: var(--bg-secondary); color: var(--text-muted); }
.user-action-btn.toggle:hover { background: var(--warning); color: #fff; }
.user-action-btn.delete { background: var(--bg-secondary); color: var(--text-muted); }
.user-action-btn.delete:hover { background: var(--danger); color: #fff; }

/* Add User Form */
.add-user-form { padding: 20px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.add-user-form h4 { margin: 0 0 16px 0; color: var(--text-primary); }
.add-user-row { display: flex; gap: 12px; margin-bottom: 16px; }
.add-user-row .profile-field { flex: 1; margin-bottom: 0; }

/* Edit User Popup */
.edit-user-popup { width: 450px; max-width: 90vw; }
.edit-user-popup .popup-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-color); }
.edit-user-popup .popup-header h3 { margin: 0; color: var(--text-primary); }
.edit-user-form { padding: 20px; }
.edit-user-form .profile-field { margin-bottom: 16px; }
.edit-user-form .profile-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; font-weight: 500; }
.edit-user-form .profile-field input { width: 100%; padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; }
.edit-user-form .profile-field input:focus { outline: none; border-color: var(--accent-cyan); }

.company-dropdown-details { padding: 16px; border-bottom: 1px solid var(--border-color); }
.company-detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; }
.company-detail-row:first-child { padding-top: 0; }
.company-detail-row:last-child { padding-bottom: 0; }
.company-detail-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; flex-shrink: 0; }
.company-detail-value { font-size: 13px; color: var(--text-primary); text-align: right; word-break: break-word; }
.company-detail-value.mono { font-family: var(--font-mono); font-size: 12px; }

.company-dropdown-footer { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.company-menu-action { width: 100%; padding: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; }
.company-menu-action:hover { background: var(--accent-cyan); color: var(--bg-primary); border-color: var(--accent-cyan); }
.company-logout-btn { width: 100%; padding: 10px; background: transparent; border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--danger); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; }
.company-logout-btn:hover { background: var(--danger); color: #fff; }

/* Company Dropdown Actions (Sync & Theme) */
.company-dropdown-actions { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 14px; }
.company-sync-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.company-sync-info { display: flex; flex-direction: column; gap: 2px; }
.company-sync-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.company-sync-date { font-size: 12px; color: var(--text-secondary); }
.company-sync-btn { padding: 8px 14px; background: var(--gradient-primary); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; white-space: nowrap; }
.company-sync-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3); }
.company-sync-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.company-sync-btn.syncing span { animation: spin 1s linear infinite; display: inline-block; }
.company-sync-buttons { display: flex; flex-direction: column; gap: 6px; }
.company-sync-btn.incremental { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 6px 12px; font-size: 11px; }
.company-sync-btn.incremental:hover { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }

.company-theme-row { display: flex; justify-content: space-between; align-items: center; }
.company-theme-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.company-theme-toggle { position: relative; display: flex; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 20px; padding: 4px; width: 100%; }
.company-theme-toggle .theme-option { flex: 1; padding: 8px 8px; font-size: 11px; color: var(--text-muted); z-index: 1; transition: color 0.2s ease; user-select: none; text-align: center; cursor: pointer; white-space: nowrap; }
.company-theme-toggle .theme-option.active { color: var(--bg-primary); }
.company-theme-toggle .theme-slider { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--accent-cyan); border-radius: 16px; transition: transform 0.3s ease; }

/* Triple theme toggle (3 options) */
.company-theme-toggle.triple .theme-slider { width: calc(33.333% - 3px); }
[data-theme="dark"] .company-theme-toggle.triple .theme-slider { transform: translateX(0); }
[data-theme="matrix"] .company-theme-toggle.triple .theme-slider { transform: translateX(100%); background: #00ff41; }
[data-theme="light"] .company-theme-toggle.triple .theme-slider { transform: translateX(200%); }

/* Quad theme toggle (4 options) */
.company-theme-toggle.quad .theme-slider { width: calc(25% - 3px); }
[data-theme="dark"] .company-theme-toggle.quad .theme-slider { transform: translateX(0); }
[data-theme="matrix"] .company-theme-toggle.quad .theme-slider { transform: translateX(100%); background: #00ff41; }
[data-theme="pink"] .company-theme-toggle.quad .theme-slider { transform: translateX(200%); background: linear-gradient(135deg, #F7288D, #F3B3C2); }
[data-theme="light"] .company-theme-toggle.quad .theme-slider { transform: translateX(300%); }

[data-theme="dark"] .company-theme-toggle .theme-option[data-theme="dark"] { color: var(--bg-primary); }
[data-theme="matrix"] .company-theme-toggle .theme-option[data-theme="matrix"] { color: #0a0a0a; }
[data-theme="pink"] .company-theme-toggle .theme-option[data-theme="pink"] { color: #ffffff; }
[data-theme="light"] .company-theme-toggle .theme-option[data-theme="light"] { color: var(--bg-primary); }

/* Font Size Toggle */
.font-size-toggle { position: relative; display: flex; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 20px; padding: 4px; width: 100%; margin-top: 8px; }
.font-size-toggle .font-option { flex: 1; padding: 8px 6px; font-size: 11px; color: var(--text-muted); z-index: 1; transition: all 0.2s ease; user-select: none; text-align: center; cursor: pointer; border-radius: 16px; }
.font-size-toggle .font-option:hover { color: var(--text-primary); }
.font-size-toggle .font-option.active { background: var(--accent-cyan); color: var(--bg-primary); font-weight: 600; }

/* Font Size Scaling - le regole principali sono alla fine del file per avere priorità sulle media query */
.all-payments-btn { padding: 8px 16px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.all-payments-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(155, 93, 229, 0.4); }
.all-invoices-btn { padding: 8px 16px; background: linear-gradient(135deg, var(--accent-cyan), var(--success)); border: none; border-radius: var(--radius-sm); color: var(--bg-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.all-invoices-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4); }
.all-solleciti-btn { padding: 8px 16px; background: linear-gradient(135deg, var(--warning), #ff8c00); border: none; border-radius: var(--radius-sm); color: var(--bg-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.all-solleciti-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(255, 190, 11, 0.4); }
.all-purchases-btn { padding: 8px 16px; background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.all-purchases-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); }
.all-sales-btn { padding: 8px 16px; background: linear-gradient(135deg, #3498db, #2980b9); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.all-sales-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4); }

/* Font Awesome icons in header buttons */
.all-sales-btn i, .all-purchases-btn i, .all-invoices-btn i, .all-payments-btn i, .all-solleciti-btn i {
    margin-right: 6px;
    font-size: 12px;
}
.stripe-btn i, .analysis-btn i, .foreign-invoices-btn i, .documents-btn i, .tasks-btn i, .notifications-btn i {
    font-size: 18px;
}
.company-menu-icon i {
    font-size: 16px;
    color: var(--accent-cyan);
}
.company-dropdown-logo i {
    font-size: 28px;
    color: var(--accent-cyan);
}
.user-icon i {
    font-size: 14px;
}
.copy-btn i {
    font-size: 12px;
}
.search-box .search-icon {
    font-size: 16px;
}
.search-clear-btn i {
    font-size: 14px;
}
.company-menu-arrow i {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.company-menu-btn.active .company-menu-arrow i {
    transform: rotate(180deg);
}

/* Team Notes Button */
.team-notes-btn { position: relative; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.team-notes-btn:hover { background: var(--bg-secondary); border-color: var(--accent-cyan); transform: scale(1.02); }
.team-notes-btn .notes-icon { font-size: 18px; }
.notes-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(255, 71, 87, 0.5); animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.theme-toggle:hover { border-color: var(--accent-cyan); transform: scale(1.05); }
.theme-icon { font-size: 18px; transition: transform 0.3s ease; }
.theme-toggle:hover .theme-icon { transform: rotate(20deg); }
.sync-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.sync-date { font-size: 11px; color: var(--text-muted); }
.sync-date.never { color: var(--warning); }
.sync-date.recent { color: var(--success); }
.sync-btn { padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.sync-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sync-btn.syncing { pointer-events: none; opacity: 0.7; }
.sync-btn.syncing::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--accent-cyan); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* MAIN */
.app-main { flex: 1; padding: 32px 40px; position: relative; z-index: 1; padding-top: 90px; }

/* LEGEND */
.months-legend {
    display: flex;
    align-items: center;
    padding: 16px 40px 16px 40px;
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 72px; /* Altezza header */
    left: 0;
    right: 0;
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100; /* Rimane sopra il contenuto scrollabile */
}
.legend-months { display: flex; gap: var(--box-gap); padding-left: 0px; }
.months-legend.all-years-mode .legend-months { display: none; }
.legend-month { width: var(--box-size); text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.legend-totals { display: flex; gap: var(--box-gap); }
.months-legend:not(.all-years-mode) .legend-totals { margin-left: var(--box-gap); }
.legend-total { width: 100px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.legend-total.wide { width: 120px; }
.legend-label { margin-left: 24px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.sort-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.sort-select { padding: 6px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px; cursor: pointer; min-width: 140px; }
.sort-select:focus { outline: none; border-color: var(--accent-cyan); }
.sort-select option { background: var(--bg-secondary); color: var(--text-primary); }

/* CLIENTS */
.clients-list { display: flex; flex-direction: column; gap: 8px; }
.client-row { display: flex; align-items: center; padding: 14px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.client-row:hover { background: var(--bg-tertiary); border-color: rgba(0, 245, 212, 0.2); }
.client-row.summary-row { background: var(--bg-secondary); border: 2px solid var(--accent-cyan); margin-top: 16px; }
.client-row.summary-row:hover { background: var(--bg-secondary); }
.months-grid { display: flex; gap: var(--box-gap); }
.all-years-mode .months-grid { display: none; }
.month-box { width: var(--box-size); height: var(--box-size); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.month-box.no-invoices { background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), rgba(255, 71, 87, 0.08)); border: 1px solid rgba(255, 71, 87, 0.25); color: rgba(255, 71, 87, 0.6); cursor: default; }

/* Solo fatture saldate - Verde */
.month-box.all-paid { background: linear-gradient(135deg, #00f5a0, #00d97e); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.all-paid:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }

/* Solo fatture insolute - Rosso */
.month-box.all-unpaid { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); border: 1px solid rgba(255, 107, 107, 0.5); color: #fff; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2); }
.month-box.all-unpaid:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4); }

/* Solo note di credito - Arancione */
.month-box.credit-note-only { background: linear-gradient(135deg, #ffbe0b, #ff9500); border: 1px solid rgba(255, 190, 11, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(255, 190, 11, 0.2); }
.month-box.credit-note-only:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(255, 190, 11, 0.4); }

/* Mix: fatture saldate + insolute */
.month-box.mixed-paid-unpaid { background: linear-gradient(135deg, #00f5a0 0%, #00f5a0 50%, #ff6b6b 50%, #ff6b6b 100%); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.mixed-paid-unpaid:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }

/* Mix: fatture saldate + note credito */
.month-box.mixed-paid-credit { background: linear-gradient(135deg, #00f5a0 0%, #00f5a0 50%, #ffbe0b 50%, #ffbe0b 100%); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.mixed-paid-credit:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }

/* Mix: fatture insolute + note credito */
.month-box.mixed-unpaid-credit { background: linear-gradient(135deg, #ff6b6b 0%, #ff6b6b 50%, #ffbe0b 50%, #ffbe0b 100%); border: 1px solid rgba(255, 107, 107, 0.5); color: #fff; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2); }
.month-box.mixed-unpaid-credit:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4); }

/* Mix: fatture saldate + insolute + note credito (tutti e tre) */
.month-box.mixed-all { background: linear-gradient(135deg, #00f5a0 0%, #00f5a0 33%, #ff6b6b 33%, #ff6b6b 66%, #ffbe0b 66%, #ffbe0b 100%); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.mixed-all:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }

/* Legacy classes per retrocompatibilità */
.month-box.has-invoices { background: linear-gradient(135deg, #00f5a0, #00d97e); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.has-invoices:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }
.month-box.mixed-invoices { background: linear-gradient(135deg, #00f5a0 0%, #00f5a0 50%, #ffbe0b 50%, #ffbe0b 100%); border: 1px solid rgba(0, 245, 160, 0.5); color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); }
.month-box.mixed-invoices:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.4); }
.totals-grid { display: flex; gap: var(--box-gap); }
.client-row:not(.all-years-mode) .totals-grid { margin-left: var(--box-gap); }
.total-box { width: 100px; height: var(--box-size); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); cursor: pointer; }
.total-box.wide { width: 120px; }
.total-box.fatturato { background: linear-gradient(135deg, rgba(0, 187, 249, 0.2), rgba(155, 93, 229, 0.2)); border: 1px solid rgba(0, 187, 249, 0.4); color: var(--accent-blue); }
.total-box.fatturato:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0, 187, 249, 0.3); }
.total-box.fatturato.no-click { cursor: default; }
.total-box.fatturato.no-click:hover { transform: none; box-shadow: none; }
.total-box.insoluto { background: linear-gradient(135deg, rgba(255, 190, 11, 0.15), rgba(255, 71, 87, 0.15)); border: 1px solid rgba(255, 190, 11, 0.4); color: var(--warning); }
.total-box.insoluto:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(255, 190, 11, 0.3); }
.total-box.insoluto.zero { background: rgba(0, 245, 160, 0.1); border: 1px solid rgba(0, 245, 160, 0.3); color: var(--success); cursor: default; }
.total-box.insoluto.zero:hover { transform: none; box-shadow: none; }
.total-box.stornato { background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(255, 71, 87, 0.15)); border: 1px solid rgba(255, 71, 87, 0.4); color: var(--danger); cursor: pointer; }
.total-box.stornato:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3); }
.total-box.stornato.zero { background: rgba(96, 96, 128, 0.1); border: 1px solid rgba(96, 96, 128, 0.3); color: var(--text-muted); cursor: default; }
.total-box.stornato.zero:hover { transform: none; box-shadow: none; }
.total-box.valore { background: linear-gradient(135deg, rgba(0, 245, 160, 0.15), rgba(0, 187, 249, 0.15)); border: 1px solid rgba(0, 245, 160, 0.4); color: var(--success); cursor: default; }
.total-box.valore.negative { background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), rgba(255, 71, 87, 0.2)); border: 1px solid rgba(255, 71, 87, 0.4); color: var(--danger); }
.total-box.saldato { background: linear-gradient(135deg, rgba(219, 112, 147, 0.2), rgba(255, 182, 193, 0.2)); border: 1px solid rgba(219, 112, 147, 0.5); color: #db7093; cursor: pointer; }
.total-box.saldato:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(219, 112, 147, 0.3); }
.total-box.saldato.zero { background: rgba(96, 96, 128, 0.1); border: 1px solid rgba(96, 96, 128, 0.3); color: var(--text-muted); cursor: default; }
.total-box.saldato.zero:hover { transform: none; box-shadow: none; }
.total-box.summary { font-size: 14px; height: 50px; }
.client-info { display: flex; align-items: center; gap: 8px; margin-left: 24px; min-width: 280px; flex: 1; }
.client-flags { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.client-flags img { width: 16px; height: 12px; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.3); object-fit: cover; }
.client-flags .flag-unknown { width: 16px; height: 12px; border-radius: 2px; background: var(--bg-tertiary); border: 1px dashed var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--text-muted); }
.client-details { display: flex; flex-direction: column; gap: 2px; }
.client-name { font-weight: 600; font-size: 14px; }
.client-name.summary { font-size: 16px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.client-vat { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
/* Client Rating Stars */
.client-vat-row { display: flex; align-items: center; gap: 8px; }
.client-rating { display: flex; align-items: center; gap: 1px; font-size: 12px; cursor: help; }
.client-rating .star { opacity: 0.3; }
.client-rating .star.active { opacity: 1; }
.client-rating.rating-1 .star.active, .client-rating.rating-2 .star.active { color: #ff4757; }
.client-rating.rating-3 .star.active { color: #ffa502; }
.client-rating.rating-4 .star.active, .client-rating.rating-5 .star.active { color: #2ed573; }

/* Client Badges (Task e Notifiche) */
.client-badges { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.client-badge { display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 10px; font-weight: 700; color: #fff; cursor: help; transition: all 0.2s ease; }
.client-badge.hidden { display: none; }
.client-badge-tasks { background: var(--accent-purple); box-shadow: 0 2px 6px rgba(155, 93, 229, 0.4); cursor: pointer; }
.client-badge-tasks:hover { background: #8b4fc7; transform: scale(1.1); }
.client-badge-notifications { background: #e74c3c; box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4); cursor: pointer; }
.client-badge-notifications:hover { background: #c0392b; transform: scale(1.1); }
.client-badge .badge-icon { margin-right: 3px; font-size: 9px; }

.client-info-btn { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-info-btn:hover { background: var(--accent-cyan); color: var(--bg-primary); border-color: var(--accent-cyan); }

/* Client Expand Button */
.client-expand-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.client-expand-btn:hover { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
.client-expand-btn.expanded { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
.client-expand-btn.expanded::after { content: '▲'; }
.client-expand-btn:not(.expanded)::after { content: '▼'; }

/* Client Row Wrapper */
.client-row-wrapper { margin-bottom: 8px; position: relative; }
.client-row-wrapper .client-row { margin-bottom: 0; border-radius: var(--radius-md); position: relative; padding-right: 60px; }
.client-row-wrapper.expanded .client-row { border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom-color: transparent; }

/* Client Expand Panel */
.client-expand-panel { display: none; background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; }
.client-row-wrapper.expanded .client-expand-panel { display: block; }

/* Expand Panel Tabs */
.expand-tabs { display: flex; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.expand-tab { padding: 12px 24px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.expand-tab:hover { color: var(--text-primary); background: rgba(0, 245, 212, 0.05); }
.expand-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.1); }
.expand-tab .tab-count { display: inline-block; padding: 2px 8px; background: var(--bg-primary); border-radius: 10px; font-size: 11px; margin-left: 6px; }
.expand-tab.active .tab-count { background: var(--accent-cyan); color: var(--bg-primary); }

/* Expand Panel Content */
.expand-content { padding: 16px; }
.expand-tab-content { display: none; }
.expand-tab-content.active { display: block; }

/* Expand Panel Table */
.expand-table { width: 100%; border-collapse: collapse; }
.expand-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.expand-table th.sortable-header { cursor: pointer; user-select: none; transition: all 0.2s ease; }
.expand-table th.sortable-header:hover { background: rgba(0, 245, 212, 0.1); color: var(--text-primary); }
.expand-table th.sortable-header .sort-arrow { font-size: 10px; margin-left: 4px; color: var(--accent-cyan); }
.expand-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--border-color); }
.expand-table tr:last-child td { border-bottom: none; }
.expand-table tr:hover td { background: rgba(0, 245, 212, 0.03); }
.expand-table tr { cursor: pointer; }
.expand-table .mono { font-family: var(--font-mono); }
.expand-table .amount { text-align: right; font-weight: 600; }
.expand-table .amount.positive { color: var(--success); }
.expand-table .amount.negative { color: var(--danger); }
.expand-table .status { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.expand-table .status.paid { background: rgba(0, 245, 160, 0.15); color: var(--success); }
.expand-table .status.unpaid { background: rgba(255, 190, 11, 0.15); color: var(--warning); }
.expand-table .status.credit-note { background: rgba(255, 165, 0, 0.15); color: #ffa500; }
.expand-table .type-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.expand-table .type-badge.sollecito1 { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.expand-table .type-badge.sollecito2 { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
.expand-table .type-badge.diffida { background: rgba(139, 0, 0, 0.3); color: #ff6b6b; }
.expand-table .type-badge.generico { background: rgba(0, 187, 249, 0.2); color: var(--accent-blue); }
.expand-table .channel-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.expand-table .channel-badge.channel-mail { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }
.expand-table .channel-badge.channel-pec { background: rgba(46, 134, 193, 0.2); color: #2e86c1; }
.expand-table .email-cell { font-size: 12px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.expand-table .invoice-note-icon { width: 20px; height: 20px; font-size: 11px; }
.expand-table .invoice-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-cyan); }
.expand-table .invoice-checkbox:checked { accent-color: var(--accent-cyan); }
.expand-table th.checkbox-col, .expand-table td.checkbox-col { width: 32px; text-align: center; padding: 8px 4px !important; }
.solleciti-table th, .solleciti-table td { padding: 10px 12px !important; }
.expand-table .status.partial { background: rgba(0, 187, 249, 0.15); color: var(--accent-blue); }
.expand-table .status.sent { background: rgba(0, 245, 160, 0.15); color: var(--success); }
.expand-table .status.failed { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
.expand-table .type-badge { padding: 3px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.expand-table .type-badge.sollecito1 { background: rgba(255, 190, 11, 0.15); color: var(--warning); }
.expand-table .type-badge.sollecito2 { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
.expand-table .type-badge.diffida { background: rgba(139, 0, 0, 0.2); color: #ff6b6b; }
.expand-table .type-badge.generico { background: rgba(0, 187, 249, 0.15); color: var(--accent-blue); }

/* Expand DataTables Styles */
.expand-datatable.dataTable thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.expand-datatable.dataTable thead .sorting,
.expand-datatable.dataTable thead .sorting_asc,
.expand-datatable.dataTable thead .sorting_desc {
    cursor: pointer;
    background-image: none !important;
    position: relative;
    padding-right: 24px !important;
}

.expand-datatable.dataTable thead .sorting:before,
.expand-datatable.dataTable thead .sorting_asc:before,
.expand-datatable.dataTable thead .sorting_desc:before {
    content: "⇅";
    position: absolute;
    right: 8px;
    opacity: 0.3;
    font-size: 10px;
    color: var(--accent-cyan);
}

.expand-datatable.dataTable thead .sorting_asc:before {
    content: "▲";
    opacity: 1;
}

.expand-datatable.dataTable thead .sorting_desc:before {
    content: "▼";
    opacity: 1;
}

.expand-datatable.dataTable thead .sorting:hover,
.expand-datatable.dataTable thead .sorting_asc:hover,
.expand-datatable.dataTable thead .sorting_desc:hover {
    background: rgba(0, 245, 212, 0.1) !important;
    color: var(--text-primary) !important;
}

.expand-datatable.dataTable tbody tr:hover td {
    background: rgba(0, 245, 212, 0.03) !important;
}

/* Documents Table Styles */
.documents-table .document-row { cursor: pointer; transition: all 0.2s; }
.documents-table .document-row:hover { background: rgba(0, 245, 212, 0.05); }

.documents-table .document-icon-cell { padding: 8px 12px !important; }
.documents-table .doc-type-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.documents-table .doc-icon { font-size: 24px; }
.documents-table .doc-ext {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.documents-table .document-name-cell { max-width: 250px; }
.documents-table .doc-filename {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-table .document-desc-cell { max-width: 300px; }
.documents-table .doc-description {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-table .expand-action-btn,
.notifications-table .expand-action-btn,
.tasks-table .expand-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(0, 245, 212, 0.1);
    border: 1px solid rgba(0, 245, 212, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-cyan);
    cursor: pointer;
    transition: all 0.2s;
}
.documents-table .expand-action-btn:hover,
.notifications-table .expand-action-btn:hover,
.tasks-table .expand-action-btn:hover {
    background: rgba(0, 245, 212, 0.2);
    border-color: var(--accent-cyan);
    transform: scale(1.05);
}
.documents-table .expand-action-btn svg,
.notifications-table .expand-action-btn svg,
.tasks-table .expand-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Send Mail Button in Expand Panel */
.expand-send-mail-btn { 
    margin-left: auto; 
    padding: 6px 14px; 
    background: var(--accent-cyan); 
    border: none; 
    border-radius: var(--radius-sm); 
    color: var(--bg-primary); 
    font-size: 12px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.expand-send-mail-btn:hover { background: var(--accent-blue); transform: translateY(-1px); }
.expand-send-mail-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Expand Panel Pagination */
.expand-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0 0; border-top: 1px solid var(--border-color); margin-top: 12px; }
.expand-pagination-info { font-size: 12px; color: var(--text-muted); }
.expand-pagination-btns { display: flex; gap: 8px; }
.expand-pagination-btn { padding: 6px 12px; font-size: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; }
.expand-pagination-btn:hover:not(:disabled) { background: var(--accent-cyan); color: var(--bg-primary); border-color: var(--accent-cyan); }
.expand-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Expand Panel Loading & Empty */
.expand-loading { text-align: center; padding: 40px; color: var(--text-muted); }
.expand-loading .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border-color); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.expand-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }

/* Expand Notes - Table Style */
.expand-note-delete-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.expand-note-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

/* POPUPS */
.popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 520px; max-width: 90vw; max-height: 80vh; overflow: hidden; box-shadow: var(--shadow-glow); transform: translateY(20px); transition: all 0.3s ease; }
.popup-overlay.active .popup { transform: translateY(0); }

/* Custom Toast Notifications */
.toast-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; transition: all 0.3s ease; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.toast-container.active { opacity: 1; visibility: visible; pointer-events: auto; }
.toast { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px 40px; min-width: 320px; max-width: 500px; box-shadow: var(--shadow-glow), 0 20px 60px rgba(0, 0, 0, 0.4); transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; }
.toast-container.active .toast { transform: scale(1) translateY(0); }
.toast-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; }
.toast-icon.success { background: linear-gradient(135deg, rgba(0, 245, 160, 0.2), rgba(0, 217, 160, 0.1)); border: 2px solid var(--success); color: var(--success); }
.toast-icon.error { background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(255, 71, 87, 0.1)); border: 2px solid var(--danger); color: var(--danger); }
.toast-icon.warning { background: linear-gradient(135deg, rgba(255, 190, 11, 0.2), rgba(255, 190, 11, 0.1)); border: 2px solid var(--warning); color: var(--warning); }
.toast-icon.info { background: linear-gradient(135deg, rgba(0, 187, 249, 0.2), rgba(0, 187, 249, 0.1)); border: 2px solid var(--accent-blue); color: var(--accent-blue); }
.toast-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.toast-message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; }
.toast-btn { padding: 12px 32px; border: none; border-radius: var(--radius-md); font-family: var(--font-display); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.toast-btn.primary { background: var(--gradient-primary); color: #fff; }
.toast-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 245, 212, 0.3); }
.toast-btn.success { background: var(--gradient-success); color: #fff; }
.toast-btn.success:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 245, 160, 0.3); }
.toast-btn.danger { background: linear-gradient(135deg, #ff4757, #ff6b7a); color: #fff; }
.toast-btn.danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3); }

/* Splash Screen Popup */
.splash-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.splash-overlay.active { opacity: 1; visibility: visible; }
.splash-popup { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 50px 60px; width: fit-content; max-width: 90vw; box-shadow: var(--shadow-glow), 0 30px 80px rgba(0, 0, 0, 0.5); text-align: center; transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.splash-overlay.active .splash-popup { transform: scale(1) translateY(0); }
.splash-close-btn { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; background: var(--bg-tertiary); border-radius: 50%; color: var(--text-muted); font-size: 20px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.splash-close-btn:hover { background: var(--danger); color: #fff; }
.splash-logo { margin-bottom: 24px; }
.splash-logo svg { width: 100px; height: 100px; filter: drop-shadow(0 0 30px rgba(0, 245, 212, 0.4)); animation: splashPulse 2s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { filter: drop-shadow(0 0 30px rgba(0, 245, 212, 0.4)); } 50% { filter: drop-shadow(0 0 50px rgba(0, 245, 212, 0.6)); } }
.splash-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; letter-spacing: -1px; }
.splash-payoff { font-family: var(--font-body); font-size: 16px; color: var(--text-secondary); margin-bottom: 24px; font-style: italic; }
.splash-version { display: inline-block; padding: 6px 16px; background: rgba(0, 245, 212, 0.1); border: 1px solid rgba(0, 245, 212, 0.3); border-radius: 20px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-cyan); margin-bottom: 12px; }
.splash-sync { font-size: 12px; color: var(--text-muted); margin-bottom: 28px; }
.splash-enter { padding: 12px 36px; background: var(--gradient-primary); border: none; border-radius: var(--radius-md); font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.3s ease; margin-bottom: 32px; }
.splash-enter:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 245, 212, 0.35); }
.splash-divider { height: 1px; background: var(--border-color); margin: 0 -60px 24px -60px; }
.splash-footer { }
.splash-company { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.splash-company strong { color: var(--text-secondary); font-weight: 600; }
.splash-copyright { font-size: 11px; color: var(--text-muted); opacity: 0.6; }
.popup-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.popup-header h3 { flex: 1; font-size: 18px; font-weight: 600; }
.popup-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.popup-badge.month { background: var(--gradient-primary); color: var(--bg-primary); }
.popup-badge.unpaid { background: linear-gradient(135deg, var(--warning), var(--danger)); color: var(--bg-primary); }
.popup-badge.total { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #fff; }
.popup-badge.stornato { background: linear-gradient(135deg, var(--danger), #cc3344); color: #fff; }
.popup-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.popup-print { width: 32px; height: 32px; background: transparent; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; margin-right: 8px; }
.popup-print:hover { background: var(--bg-tertiary); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.popup-delete { width: 32px; height: 32px; background: transparent; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; margin-right: 8px; }
.popup-delete:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--danger); color: var(--danger); }

/* Confirm Delete Popup */
/* z-index rimosso per permettere override inline su popup specifici */
.confirm-delete-overlay { }
.confirm-delete-popup { width: 400px; max-width: 90vw; padding: 32px; text-align: center; }
.confirm-delete-icon { font-size: 48px; margin-bottom: 16px; }
.confirm-delete-popup h3 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.confirm-delete-popup p { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.confirm-delete-warning { font-size: 12px; color: var(--danger); margin-bottom: 24px; }
.confirm-delete-actions { display: flex; gap: 12px; justify-content: center; }
.confirm-btn { padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.confirm-btn.cancel { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.confirm-btn.cancel:hover { background: var(--bg-secondary); color: var(--text-primary); }
.confirm-btn.delete { background: var(--danger); color: white; }
.confirm-btn.delete:hover { background: #dc2626; transform: translateY(-1px); }

/* Delete button in solleciti list */
.sollecito-delete-btn { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.sollecito-delete-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--danger); color: var(--danger); }

.popup-header-right { display: flex; align-items: center; gap: 0; }

/* ============================================================
   RESPONSIVE - SCHERMI GRANDI (>1920px)
   ============================================================ */
@media (min-width: 1920px) {
    .app-main { padding: 32px 50px; padding-top: 90px; }
    .purchases-section { padding: 0 0px; padding-top: 90px; }
    .months-legend { padding: 16px 73px; }
    .client-row { padding: 16px 24px; }
    .client-name { font-size: 15px; }
    .client-vat { font-size: 12px; }
    .total-box { width: 110px; font-size: 13px; }
    .total-box.wide { width: 130px; }
    .legend-total { width: 110px; font-size: 12px; }
    .legend-total.wide { width: 130px; }
    .legend-month { font-size: 12px; }
    .app-header { padding: 16px 50px; }
    .header-right { gap: 20px; }
    .year-btn { padding: 7px 14px; font-size: 13px; }
}

@media (min-width: 2560px) {
    .app-main { padding: 40px 80px; padding-top: 100px; }
    .purchases-section { padding: 0 0px; padding-top: 100px; }
    .months-legend { padding: 20px 115px; top: 80px; }
    .client-row { padding: 20px 32px; }
    .client-name { font-size: 16px; }
    .client-vat { font-size: 13px; }
    .total-box { width: 130px; font-size: 14px; }
    .total-box.wide { width: 150px; }
    .legend-total { width: 130px; font-size: 13px; }
    .legend-total.wide { width: 150px; }
    .legend-month { font-size: 13px; }
    .app-header { padding: 18px 80px; height: 80px; }
    .header-right { gap: 24px; }
    .search-box input { font-size: 14px; padding: 12px 44px 12px 44px; }
    .year-btn { padding: 10px 18px; font-size: 14px; }
    .logo-icon { width: 52px; height: 52px; }
    .logo h1 { font-size: 32px; }
    .login-box { padding: 60px; width: 480px; }
    .login-logo h1 { font-size: 40px; }
    .login-logo svg { width: 90px; height: 100px; }
}

@media (min-width: 3840px) {
    .app-main { padding: 50px 120px; padding-top: 120px; }
    .purchases-section { padding: 0 0px; padding-top: 120px; }
    .months-legend { padding: 24px 120px; top: 96px; }
    .client-row { padding: 24px 40px; }
    .client-name { font-size: 18px; }
    .client-vat { font-size: 14px; }
    .total-box { width: 150px; font-size: 16px; }
    .total-box.wide { width: 180px; }
    .legend-total { width: 150px; font-size: 14px; }
    .legend-total.wide { width: 180px; }
    .legend-month { font-size: 14px; }
    .app-header { padding: 20px 120px; height: 96px; }
    .header-right { gap: 32px; }
    .search-box input { font-size: 16px; padding: 14px 48px 14px 48px; }
    .year-btn { padding: 12px 22px; font-size: 16px; }
    .logo-icon { width: 64px; height: 64px; }
    .logo h1 { font-size: 38px; }
    .login-box { padding: 70px; width: 560px; }
    .login-logo h1 { font-size: 48px; }
    .login-logo svg { width: 110px; height: 120px; }
    .all-invoices-btn, .all-payments-btn, .all-solleciti-btn, .all-purchases-btn, .all-sales-btn { padding: 12px 20px; font-size: 15px; }
}

/* ============================================================
   PURCHASES SECTION
   ============================================================ */
.purchases-section {
    padding: 0 50px;
    padding-top: 90px;
    flex: 1;
    overflow-y: auto;
}

.purchases-section.hidden {
    display: none;
}

.purchases-header {
    display: none;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.back-to-home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.back-to-home-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: translateX(-4px);
}

.purchases-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.suppliers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   MOBILE RESPONSIVE (< 1024px)
   ============================================================ */

/* Hamburger Button - nascosto di default su desktop */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    gap: 5px;
    padding: 10px;
    margin-left: auto;
}
.hamburger-line {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu Overlay - nascosto di default */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

/* Mobile Menu Sidebar - nascosto di default */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: var(--bg-secondary);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}
.mobile-menu.active { transform: translateX(0); }

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}
.mobile-menu-header h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.mobile-menu-close {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Menu Scrollable Content */
.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-search {
    padding: 16px;
    position: relative;
}
.mobile-menu-search input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
}
.mobile-menu-search .search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.mobile-menu-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.mobile-menu-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mobile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.mobile-action-btn:hover { background: var(--bg-card); border-color: var(--accent-cyan); }
.mobile-action-btn .action-icon { font-size: 20px; }
.mobile-action-btn.invoices { border-color: rgba(0, 245, 160, 0.3); }
.mobile-action-btn.payments { border-color: rgba(155, 93, 229, 0.3); }
.mobile-action-btn.solleciti { border-color: rgba(255, 190, 11, 0.3); }
.mobile-action-btn.stripe { border-color: rgba(99, 91, 255, 0.3); }
.mobile-action-btn.analysis { border-color: rgba(52, 152, 219, 0.3); }
.mobile-action-btn.notifications { border-color: rgba(0, 187, 249, 0.3); }
.mobile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-sort-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
}

.mobile-theme-selector {
    display: flex;
    gap: 8px;
}
.mobile-theme-btn {
    flex: 1;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.mobile-theme-btn:hover, .mobile-theme-btn.active { background: var(--bg-card); border-color: var(--accent-cyan); }

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    cursor: pointer;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: 0.3s;
    border-radius: 26px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: 0.3s;
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: #fff;
}

/* Mobile Push Toggle */
.mobile-push-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-push-status {
    font-size: 13px;
    color: var(--text-secondary);
}
.mobile-push-status.active {
    color: var(--accent-cyan);
}
.mobile-push-status.inactive {
    color: var(--text-muted);
}

.mobile-menu-footer {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mobile-sync-btn, .mobile-profile-btn, .mobile-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.mobile-sync-btn:hover { background: var(--accent-cyan); color: var(--bg-primary); }
.mobile-sync-btn.incremental { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-color: #d97706; color: #fff; }
.mobile-sync-btn.incremental:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.mobile-profile-btn:hover { background: var(--accent-purple); color: #fff; }
.mobile-logout-btn { border-color: var(--danger); color: var(--danger); }
.mobile-logout-btn:hover { background: var(--danger); color: #fff; }

/* Mobile Media Query */
@media (max-width: 1024px) {
    #app { min-width: 100%; }
    
    .hamburger-btn { display: flex; }
    
    .header-right { display: none; }
    
    .app-header {
        padding: 12px 16px;
        height: 60px;
    }
    .logo-icon { width: 36px; height: 36px; }
    .logo h1 { font-size: 22px; }
    .header-left { gap: 12px; }
    
    .months-legend { display: none; }

    .app-main {
        padding: 16px;
        padding-top: 16px;
    }

    .purchases-section {
        padding: 0 0px;
        padding-top: 16px;
    }

    /* Client Row Mobile Layout */
    .client-row {
        flex-direction: column;
        align-items: stretch;
        padding: 16px !important;
        gap: 12px;
        position: relative;
    }
    
    .client-row-wrapper .client-row {
        padding-right: 16px !important;
    }
    
    .client-info {
        margin-left: 0;
        min-width: auto;
        flex: none;
        padding-right: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        order: -1; /* Prima di totals-grid */
    }
    
    .client-info-btn {
        flex-shrink: 0;
    }
    
    .client-details {
        flex: 1;
        min-width: 0;
    }
    
    /* Nascondo rating stelle su mobile */
    .client-rating {
        display: none !important;
    }
    
    .client-expand-btn {
        position: static !important;
        transform: none !important;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        margin-left: auto;
    }
    
    .months-grid { display: none; }
    
    .totals-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .total-box {
        width: 100%;
        height: 50px;
        flex-direction: column;
        font-size: 13px;
    }
    .total-box.wide { width: 100%; }
    
    .total-box::before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        opacity: 0.7;
        margin-bottom: 2px;
    }
    
    /* ALL POPUPS MOBILE */
    .popup-overlay { 
        padding: 0; 
        align-items: stretch;
    }
    .popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    
    .popup-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-secondary);
        z-index: 10;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .popup-header h3 { font-size: 15px; }
    .popup-close { width: 36px; height: 36px; font-size: 24px; }
    
    .popup-content { 
        padding: 16px; 
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* All Invoices Popup Mobile */
    .all-invoices-popup,
    .all-payments-popup,
    .stripe-payments-popup,
    .all-solleciti-popup,
    .access-logs-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    .all-invoices-header,
    .all-payments-header,
    .all-solleciti-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch !important;
    }
    
    .all-invoices-search,
    .all-payments-search,
    .stripe-payments-search,
    .all-solleciti-search {
        max-width: 100% !important;
        margin: 0 !important;
        flex-wrap: wrap;
    }

    .all-invoices-search input,
    .all-invoices-search select,
    .all-payments-search input,
    .stripe-payments-search input,
    .all-solleciti-search input {
        min-width: 100px;
        flex: 1 1 45%;
    }
    
    /* 4. Card senza sovrapposizioni - layout verticale chiaro */
    .all-invoice-card,
    .all-payment-card,
    .all-sollecito-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
        padding: 14px 16px;
        position: relative;
    }
    
    .all-invoice-date,
    .all-invoice-number,
    .all-invoice-client,
    .all-invoice-description,
    .all-invoice-amount,
    .all-payment-date,
    .all-payment-amount,
    .all-payment-method,
    .all-payment-client,
    .all-sollecito-date,
    .all-sollecito-client,
    .all-sollecito-email,
    .all-sollecito-amount,
    .all-sollecito-type,
    .all-sollecito-status {
        min-width: auto !important;
        width: auto;
        position: static !important;
        display: block;
    }
    
    /* Data e numero su stessa riga separati */
    .all-invoice-card,
    .all-payment-card {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
    }
    
    .all-invoice-date,
    .all-payment-date {
        grid-column: 1;
        grid-row: 1;
        font-size: 12px;
        color: var(--text-muted);
    }
    
    .all-invoice-number {
        grid-column: 2;
        grid-row: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--accent-cyan);
        text-align: right;
    }
    
    .all-payment-amount {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px;
        font-weight: 700;
        text-align: right;
    }
    
    .all-invoice-client,
    .all-payment-client {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 14px;
        font-weight: 500;
    }
    
    .all-invoice-amount {
        grid-column: 1;
        grid-row: 3;
        font-size: 16px;
        font-weight: 700;
    }
    
    .all-invoice-status,
    .all-payment-method {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
        justify-self: end;
    }
    
    .all-invoice-description {
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Sollecito card */
    .all-sollecito-card {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
    }
    
    .all-sollecito-date {
        grid-column: 1;
        grid-row: 1;
        font-size: 12px;
    }
    
    .all-sollecito-type {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }
    
    .all-sollecito-status {
        grid-column: 3;
        grid-row: 1;
    }
    
    .all-sollecito-client {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 14px;
        font-weight: 500;
    }
    
    .all-sollecito-email {
        display: none !important;
    }
    
    .all-sollecito-amount {
        position: absolute !important;
        top: 14px;
        right: 16px;
        font-size: 16px;
    }
    
    .all-invoice-arrow,
    .all-payment-arrow,
    .all-sollecito-arrow {
        display: none;
    }
    
    /* Solleciti popup mobile - layout migliorato */
    .all-solleciti-popup {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .all-solleciti-content {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Footer paginazione solleciti attaccato al fondo */
    .all-solleciti-popup .pagination {
        position: sticky;
        bottom: 0;
        flex-shrink: 0 !important;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
        margin-top: auto;
        z-index: 10;
    }
    
    /* Card sollecito - layout griglia 3 righe */
    .all-sollecito-card {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 6px 12px !important;
        padding: 14px 16px !important;
        position: relative;
    }
    
    /* Riga 1: Data + Tipo a sinistra, Importo a destra */
    .all-sollecito-date {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 12px;
        display: inline-block !important;
    }
    
    .all-sollecito-type {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        margin-left: 150px;
    }
    
    .all-sollecito-amount {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        font-size: 15px !important;
        text-align: right;
        justify-self: end;
    }
    
    /* Riga 2: Cliente */
    .all-sollecito-client {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        font-size: 14px;
        font-weight: 500;
    }
    
    /* Riga 3: Stato + Bottoni */
    .all-sollecito-status {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
    }
    
    /* Bottoni verifica e elimina */
    .sollecito-verify-btn,
    .sollecito-delete-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    /* Container bottoni a destra riga 3 */
    .all-sollecito-card .sollecito-verify-btn {
        position: absolute !important;
        bottom: 12px;
        right: 50px;
    }
    
    .all-sollecito-card .sollecito-delete-btn {
        position: absolute !important;
        bottom: 12px;
        right: 14px;
    }

    /* Payments popup mobile - layout con paginazione fixed */
    .all-payments-popup {
        display: flex !important;
        flex-direction: column !important;
    }

    .all-payments-content {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .all-payments-popup .pagination {
        position: sticky;
        bottom: 0;
        flex-shrink: 0 !important;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
        margin-top: auto;
        z-index: 10;
    }

    /* Stripe payments popup mobile */
    .stripe-payments-popup {
        width: 100% !important;
        max-width: 100% !important;
    }

    .stripe-payments-table {
        font-size: 13px;
    }

    .stripe-payments-table th,
    .stripe-payments-table td {
        padding: 12px 8px;
    }

    .stripe-payments-table th {
        font-size: 11px;
    }

    .stripe-expand-cell {
        padding: 4px !important;
    }

    .stripe-payment-details {
        padding: 16px 12px;
        gap: 12px;
    }

    .stripe-metadata-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stripe-metadata-item {
        padding: 10px;
    }

    /* Invoices popup mobile - layout con paginazione fixed */
    .all-invoices-popup {
        display: flex !important;
        flex-direction: column !important;
    }

    .all-invoices-content {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .all-invoices-popup .pagination {
        position: sticky;
        bottom: 0;
        flex-shrink: 0 !important;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
        margin-top: auto;
        z-index: 10;
    }

    /* Client Invoices Popup Mobile */
    .client-invoices-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    /* ===== GRID FATTURE - Layout tabellare scrollabile ===== */
    
    /* Contenitore popup - abilita scroll orizzontale */
    .client-invoices-popup .popup-content {
        overflow-x: scroll !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
    }
    
    /* Lista fatture wrapper */
    #popupInvoiceList {
        display: block;
    }
    
    /* Header griglia Fatturato/Valore/Saldato */
    .invoices-grid-header {
        display: grid !important;
        grid-template-columns: 32px 28px 85px 140px 100px 85px 32px !important;
        gap: 6px !important;
        width: 580px !important;
        min-width: 580px !important;
        padding: 10px 12px !important;
        font-size: 10px !important;
        background: var(--bg-tertiary) !important;
        position: static !important;
        box-sizing: border-box;
    }
    
    .invoices-grid-header span {
        white-space: nowrap;
    }
    
    .invoices-grid-body {
        display: block;
        width: 580px !important;
        min-width: 580px !important;
    }
    
    /* Righe griglia fatture */
    .invoice-card.invoice-grid-row {
        display: grid !important;
        grid-template-columns: 32px 28px 85px 140px 100px 85px 32px !important;
        gap: 6px !important;
        width: 580px !important;
        min-width: 580px !important;
        padding: 10px 12px !important;
        flex-direction: row !important;
        box-sizing: border-box;
    }
    
    .invoice-grid-row .invoice-checkbox {
        position: static !important;
    }
    
    .invoice-grid-row .invoice-date {
        font-size: 11px;
        white-space: nowrap;
        width: auto !important;
    }
    
    .invoice-grid-row .invoice-number {
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto !important;
    }
    
    .invoice-grid-row .invoice-amount {
        font-size: 12px;
        text-align: left !important;
        padding-right: 0 !important;
        white-space: nowrap;
    }
    
    .invoice-grid-row .invoice-status {
        font-size: 9px;
        padding: 3px 6px;
        width: auto !important;
        white-space: nowrap;
    }
    
    .invoice-grid-row .invoice-arrow {
        font-size: 14px;
    }
    
    /* Invoice card standard (non-grid) - mantiene layout verticale */
    .invoice-card:not(.invoice-grid-row):not(.insoluto-detail) {
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        position: relative;
    }
    
    .invoice-card:not(.invoice-grid-row):not(.insoluto-detail) .invoice-checkbox { 
        position: absolute; 
        top: 14px; 
        left: 14px;
    }
    .invoice-card:not(.invoice-grid-row):not(.insoluto-detail) .invoice-note-btn { 
        position: absolute; 
        top: 14px; 
        right: 14px;
    }
    
    .invoice-col {
        width: 100%;
        min-width: auto !important;
    }
    
    .invoice-col.date { order: 1; font-size: 12px; color: var(--text-muted); }
    .invoice-col.number { order: 2; font-size: 15px; font-weight: 600; color: var(--accent-cyan); }
    .invoice-col.description { order: 3; font-size: 13px; }
    .invoice-col.amount { order: 4; font-size: 17px; font-weight: 700; }
    .invoice-col.status { order: 5; }
    .invoice-col.arrow { display: none; }
    
    /* ===== INSOLUTO DETAIL - Layout con più colonne ===== */
    
    /* Header Insoluto */
    .insoluto-header {
        display: grid !important;
        grid-template-columns: 32px 28px 85px 130px 85px 55px 85px 85px 85px 75px 32px !important;
        gap: 6px !important;
        width: 870px !important;
        min-width: 870px !important;
        padding: 10px 12px !important;
        font-size: 10px !important;
        background: var(--bg-tertiary) !important;
        position: static !important;
        box-sizing: border-box;
    }
    
    .insoluto-header span {
        white-space: nowrap;
    }
    
    .insoluto-scroll-area {
        display: block;
        width: 870px !important;
        min-width: 870px !important;
    }
    
    /* Righe Insoluto */
    .invoice-card.insoluto-detail {
        display: grid !important;
        grid-template-columns: 32px 28px 85px 130px 85px 55px 85px 85px 85px 75px 32px !important;
        gap: 6px !important;
        width: 870px !important;
        min-width: 870px !important;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    
    .invoice-card.insoluto-detail .invoice-date {
        font-size: 11px;
        white-space: nowrap;
    }
    
    .invoice-card.insoluto-detail .invoice-number {
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .invoice-card.insoluto-detail .invoice-col {
        font-size: 11px;
        white-space: nowrap;
    }
    
    .invoice-card.insoluto-detail .invoice-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Summary Insoluto */
    .insoluto-summary {
        display: grid !important;
        grid-template-columns: 32px 28px 85px 130px 85px 55px 85px 85px 85px 75px 32px !important;
        gap: 6px !important;
        width: 870px !important;
        min-width: 870px !important;
        padding: 12px !important;
        font-size: 12px;
        position: static !important;
        background: var(--bg-secondary) !important;
        border-top: 2px solid var(--danger);
        box-sizing: border-box;
    }
    
    .insoluto-summary .sum-label {
        grid-column: span 4 !important;
        font-size: 11px !important;
    }
    
    .insoluto-summary span {
        font-size: 11px !important;
        white-space: nowrap;
    }
    
    /* Detail Popup Mobile */
    .detail-popup,
    .sollecito-detail-popup,
    .sollecito-message-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    /* Sollecito Message Preview Mobile */
    .sollecito-message-content {
        flex-direction: column !important;
    }
    
    .sollecito-message-main {
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
        padding: 16px !important;
        flex: none !important;
        max-height: 60vh;
    }
    
    .sollecito-message-sidebar {
        width: 100% !important;
        padding: 16px !important;
        max-height: 40vh;
        overflow-y: auto;
    }
    
    .message-info-section {
        display: inline-block;
        width: calc(50% - 8px);
        margin-right: 8px;
        margin-bottom: 12px !important;
        vertical-align: top;
    }
    
    .message-info-section:nth-child(5) {
        width: 100%;
    }
    
    /* Detail Header Mobile - azioni scrollabili */
    .detail-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }
    
    .detail-title h2 {
        font-size: 18px;
    }
    
    .detail-header-actions {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin: 0 -16px;
        padding: 0 16px 8px 16px;
    }
    
    .detail-header-actions::-webkit-scrollbar {
        height: 4px;
    }
    
    .detail-header-actions::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
    
    .pdf-action-btn {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .back-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Detail Summary Mobile */
    .detail-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 16px;
    }
    
    .summary-value {
        font-size: 16px;
    }
    
    .summary-item.highlight .summary-value {
        font-size: 20px;
    }
    
    /* Detail Items Table Mobile - scrollabile orizzontalmente */
    .detail-items {
        padding: 16px;
        max-height: none;
        overflow: visible;
    }
    
    .detail-items h3 {
        margin-bottom: 12px;
    }
    
    .items-table {
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }
    
    .items-header {
        display: grid !important;
        grid-template-columns: 70px 180px 50px 80px 60px 80px !important;
        gap: 8px !important;
        width: 600px !important;
        min-width: 600px !important;
        padding: 10px 12px !important;
        font-size: 10px !important;
        box-sizing: border-box;
        background: var(--bg-tertiary) !important;
    }
    
    .item-row {
        display: grid !important;
        grid-template-columns: 70px 180px 50px 80px 60px 80px !important;
        gap: 8px !important;
        width: 600px !important;
        min-width: 600px !important;
        padding: 10px 12px !important;
        font-size: 11px !important;
        box-sizing: border-box;
    }
    
    .item-row .col-code,
    .item-row .col-qty,
    .item-row .col-price,
    .item-row .col-discount,
    .item-row .col-total {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .item-row .col-name-desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .item-row .col-name-desc .item-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .item-row .col-name-desc .item-description {
        display: none;
    }
    
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
    
    .detail-section-row {
        flex-direction: column;
    }
    
    .detail-box {
        min-width: auto;
    }
    
    /* Expand Panel Mobile - tabelle scrollabili */
    .client-expand-panel {
        margin: 0 -16px;
        border-radius: 0;
    }
    
    .expand-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
        gap: 8px;
    }
    
    .expand-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .expand-tab {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .expand-send-mail-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .expand-content {
        padding: 12px;
    }
    
    /* Tabella Expand scrollabile orizzontalmente */
    .expand-tab-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .expand-table {
        min-width: 700px;
        font-size: 12px;
    }
    
    .expand-table th,
    .expand-table td {
        padding: 10px 8px;
        white-space: nowrap;
    }
    
    .expand-table .email-cell {
        max-width: 150px;
    }
    
    /* PDF Preview Mobile */
    .pdf-preview-overlay {
        padding: 0;
    }

    .pdf-preview-header {
        padding: 12px 16px;
    }
    
    .pdf-preview-actions {
        gap: 8px;
    }
    
    .pdf-preview-actions .pdf-action-btn {
        padding: 8px 10px;
        font-size: 11px;
    }
    
    /* Notifications Panel Mobile */
    .notifications-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .notifications-tabs {
        padding: 0 12px;
        gap: 2px;
    }
    .notifications-tab {
        padding: 10px 12px;
        font-size: 12px;
    }
    .notifications-tab.write-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .notifications-filters {
        padding: 8px 12px;
    }
    .notifications-filter-select {
        font-size: 11px;
        padding: 6px 8px;
    }

    .notifications-search-row {
        padding: 0 12px 8px 12px;
    }
    .notifications-search-input {
        font-size: 12px;
        padding: 7px 10px;
    }

    .notification-item {
        padding: 12px;
    }
    
    .notification-detail-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    .write-notification-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* Note Popup Mobile */
    .note-popup {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* VIES Popup Mobile */
    .vies-popup,
    .vies-result-popup {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Profile Popup Mobile */
    .profile-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    /* Config Popup Mobile */
    .config-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
    }
    
    /* ============================================
       SOLLECITO COMPOSER POPUP - MOBILE RESPONSIVE
       ============================================ */
    .sollecito-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .sollecito-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }
    
    .sollecito-header-left h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .sollecito-header-left .client-info {
        font-size: 12px;
    }
    
    .sollecito-header .popup-close {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    /* Task Detail Popup - assicura visibilità pulsante chiusura su mobile */
    .task-detail-popup .popup-header {
        position: relative;
    }

    .task-detail-popup .popup-header-right {
        position: absolute;
        top: 14px;
        right: 16px;
        z-index: 10;
    }

    .task-detail-popup .popup-close {
        width: 40px;
        height: 40px;
        font-size: 26px;
    }

    .task-detail-header-info {
        padding-right: 56px; /* Spazio per il pulsante chiusura */
    }

    /* Tasks Kanban Popup - Layout mobile responsive */
    .tasks-popup {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .tasks-popup .popup-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 12px 8px;
        padding: 12px 16px !important;
        position: relative;
    }

    .tasks-popup .popup-header h3 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 16px;
        padding-right: 50px; /* Spazio per il pulsante chiusura */
    }

    .tasks-popup .popup-header-right {
        grid-column: 2;
        grid-row: 1;
        position: absolute;
        top: 12px;
        right: 16px;
        z-index: 10;
    }

    .tasks-popup .popup-close {
        width: 40px;
        height: 40px;
        font-size: 26px;
    }

    .tasks-header-controls {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0 !important;
        justify-self: start;
        flex-wrap: wrap;
        width: 100%;
    }

    .tasks-search-box {
        width: 100%;
        margin-bottom: 8px;
    }

    .tasks-search-input {
        width: 100%;
        min-width: auto;
        font-size: 12px;
    }

    .tasks-sort-control {
        width: 100%;
        margin-bottom: 8px;
    }

    .tasks-sort-control select {
        flex: 1;
    }

    .tasks-header-stats {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 8px;
        flex-wrap: wrap;
    }

    .tasks-stat {
        font-size: 11px;
        padding: 4px 10px;
    }

    .tasks-stat-count {
        font-size: 13px;
    }

    /* 3. Type selector - su più righe, non scroll */
    .sollecito-type-selector {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 8px;
        overflow: visible !important;
    }
    
    .sollecito-type-btn {
        flex: 0 0 auto;
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    
    /* 1. Content - popup scrollabile, editor con altezza minima */
    .sollecito-popup {
        overflow: hidden !important;
    }
    
    .sollecito-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }
    
    .sollecito-sidebar {
        width: 100% !important;
        flex-shrink: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
        padding: 16px;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .sollecito-sidebar h4 {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .sollecito-invoices-list {
        max-height: 120px;
        margin-bottom: 12px;
    }
    
    .sollecito-invoice-item {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .sollecito-total {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .sollecito-total-row {
        font-size: 13px;
    }
    
    .sollecito-total-row.main {
        font-size: 15px;
    }
    
    .sollecito-attachments h4 {
        font-size: 12px;
    }
    
    .attachment-list {
        max-height: 100px;
    }
    
    .attachment-item {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* Main editor section */
    /* 1. Main editor - altezza minima 80vh, sezione scrollabile */
    .sollecito-main {
        flex: 0 0 auto !important;
        min-height: 0;
        width: 100% !important;
    }
    
    .sollecito-editor-section {
        padding: 16px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .sollecito-subject {
        margin-bottom: 12px;
        width: 100%;
        flex-shrink: 0;
    }
    
    .sollecito-subject input {
        padding: 10px 12px;
        font-size: 14px;
        width: 100%;
    }
    
    /* TinyMCE Editor - MINIMO 80vh, non si schiaccia */
    .sollecito-editor-wrapper {
        height: auto !important;
        min-height: 80vh !important;
        flex: 0 0 auto !important;
        width: 100% !important;
    }
    
    .sollecito-editor-wrapper .tox-tinymce,
    .sollecito-editor-wrapper .tox.tox-tinymce {
        height: auto !important;
        min-height: 80vh !important;
        width: 100% !important;
    }
    
    .sollecito-editor-wrapper textarea {
        width: 100% !important;
        min-height: 80vh !important;
    }
    
    .sollecito-editor-wrapper iframe {
        min-height: 70vh !important;
    }
    
    /* Footer - elementi impilati larghezza piena */
    .sollecito-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 16px;
        gap: 10px;
    }
    
    .sollecito-footer-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .send-channel-selector {
        width: 100% !important;
    }
    
    .send-channel-selector .form-label {
        font-size: 12px !important;
    }
    
    .channel-select {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px;
    }
    
    .recipient-info {
        width: 100% !important;
    }
    
    .recipient-info .form-label {
        font-size: 12px !important;
    }
    
    .recipient-info input {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px;
    }
    
    .sollecito-footer-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        width: 100% !important;
    }
    
    .sollecito-footer-right .form-btn {
        width: 100% !important;
        justify-content: center;
        padding: 14px 16px;
        font-size: 14px;
    }
    
    .sollecito-send-btn {
        width: 100% !important;
        justify-content: center;
        padding: 14px 16px;
        font-size: 14px;
    }
    
    /* TinyMCE toolbar responsive */
    .tox .tox-toolbar__primary {
        flex-wrap: wrap !important;
    }
    
    .tox .tox-toolbar__group {
        flex-wrap: wrap;
    }
    
    /* Template Editor nel config - anche responsive */
    .template-body .tox-tinymce {
        min-height: 200px !important;
    }
    
    /* Login Mobile */
    .login-box {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px 24px;
        padding-top: 60px; /* Spazio per theme toggle */
    }
    
    /* 1. Theme toggle login - non tagliato */
    .login-theme-toggle {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 1000;
    }
    
    .login-logo svg { width: 64px; height: 72px; }
    .login-logo h1 { font-size: 28px; }
    
    /* 2. Nascondi bottone ? su mobile - click su nome cliente */
    .client-info-btn {
        display: none !important;
    }
    
    .client-details {
        cursor: pointer;
    }
    
    /* 3. Padding simmetrici per client row e totals */
    .client-row {
        padding: 16px !important;
    }
    
    .totals-grid {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 4. Ricerca fatture collassabile su mobile */
    .all-invoices-header {
        position: relative;
    }
    
    .mobile-search-toggle {
        display: flex !important;
        width: 40px;
        height: 40px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mobile-search-toggle:hover,
    .mobile-search-toggle.active {
        background: var(--accent-cyan);
        color: var(--bg-primary);
        border-color: var(--accent-cyan);
    }
    
    .all-invoices-search {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        flex-direction: column !important;
        gap: 10px;
        z-index: 100;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .all-invoices-search.mobile-expanded {
        display: flex !important;
    }
    
    .all-invoices-search input,
    .all-invoices-search select {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    /* 7. Profile popup mobile - DEVE aprirsi */
    #profilePopup {
        display: none;
    }
    
    #profilePopup.active {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    #profilePopup.active .popup.profile-popup {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    
    /* Access Logs Mobile */
        display: flex !important;
        flex-direction: column;
    }
    
    /* Access Logs Mobile */
    .access-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-row {
        grid-template-columns: 1fr !important;
    }
    
    .logs-table {
        font-size: 11px;
    }
    
    .logs-table th,
    .logs-table td {
        padding: 8px 6px;
    }
    
    /* Splash Screen Mobile */
    .splash-popup {
        width: fit-content !important;
        max-width: 90% !important;
        padding: 32px 24px;
    }
    
    /* Toast Mobile */
    .toast {
        min-width: auto;
        width: 90%;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .app-header { padding: 10px 12px; height: 56px; }
    .logo-icon { width: 32px; height: 32px; }
    .logo h1 { font-size: 18px; }
    
    .hamburger-btn { width: 40px; height: 40px; }
    
    .client-row { padding: 12px; }
    .client-name { font-size: 14px; }
    .client-vat { font-size: 10px; }
    
    .client-info {
        gap: 8px;
    }
    
    .client-info-btn,
    .client-expand-btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    
    .totals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .totals-grid .total-box:last-child {
        grid-column: span 2;
    }
    
    .total-box { height: 44px; font-size: 12px; }
    
    .mobile-menu { width: 85%; }
    
    .popup-header h3 { font-size: 14px; }
    
    .access-stats {
        grid-template-columns: 1fr;
    }
    
    .all-invoices-search input,
    .all-invoices-search select {
        flex: 1 1 100%;
    }
    
    /* Detail Header 480px */
    .detail-header {
        padding: 12px;
    }
    
    .detail-title h2 {
        font-size: 16px;
    }
    
    .pdf-action-btn {
        padding: 8px 10px;
        font-size: 11px;
    }
    
    /* Detail Summary 480px */
    .detail-summary {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 12px;
    }
    
    /* Expand table 480px */
    .expand-table {
        min-width: 600px;
        font-size: 11px;
    }
    
    .expand-table th,
    .expand-table td {
        padding: 8px 6px;
    }
    
    /* Items table 480px */
    .items-header, .item-row {
        min-width: 550px;
        font-size: 11px;
    }
    
    /* Sollecito Composer 480px */
    .sollecito-header {
        padding: 12px;
    }
    
    .sollecito-header-left h3 {
        font-size: 16px;
    }
    
    .sollecito-type-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .sollecito-sidebar {
        padding: 12px;
    }
    
    .sollecito-invoices-list {
        max-height: 100px;
    }
    
    .sollecito-editor-section {
        padding: 12px;
    }
    
    .sollecito-editor-wrapper {
        height: 70vh !important;
        min-height: 250px !important;
    }
    
    .sollecito-editor-wrapper .tox-tinymce,
    .sollecito-editor-wrapper .tox.tox-tinymce {
        height: 70vh !important;
        min-height: 250px !important;
    }
    
    .sollecito-footer {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .channel-select,
    .recipient-info input {
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    .sollecito-footer-right .form-btn,
    .sollecito-send-btn {
        padding: 12px 16px !important;
        font-size: 13px;
        width: 100% !important;
    }
    
    /* Client row 480px - freccia accanto al nome */
    .client-info {
        gap: 8px;
    }
    
    .client-expand-btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

/* ========== PRINT STYLES - Ottimizzato per A4 ========== */
@media print {
    /* Reset base */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    html, body {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
    }
    
    /* Nascondi tutto tranne area stampa */
    body > *:not(.popup-overlay.print-area) {
        display: none !important;
    }
    
    .app-header, .app-sidebar, .app-main, .app-footer,
    .login-container, .splash-container,
    .notifications-panel, .notifications-overlay,
    .company-dropdown, .client-expand-panel,
    .months-legend, .mobile-menu, .mobile-menu-overlay,
    .hamburger-btn, .scroll-buttons,
    .popup-overlay:not(.print-area) {
        display: none !important;
    }
    
    /* Area di stampa */
    .popup-overlay.print-area {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: white !important;
        overflow: visible !important;
    }
    
    .popup-overlay.print-area * {
        visibility: visible !important;
    }
    
    .print-area .popup {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: white !important;
        overflow: visible !important;
        transform: none !important;
    }
    
    /* Header - MONOCROMATICO per risparmiare colore */
    .print-area .popup-header,
    .print-area .client-invoices-header,
    .print-area .detail-header {
        background: #f0f0f0 !important;
        border: 2px solid #333 !important;
        border-radius: 4px !important;
        padding: 12px 16px !important;
        margin-bottom: 12px !important;
    }
    
    .print-area .popup-header h3,
    .print-area .popup-header h2,
    .print-area .detail-title h2 {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    
    .print-area .popup-type-badge span {
        background: #e0e0e0 !important;
        color: #333 !important;
        border: 1px solid #999 !important;
    }
    
    .print-area .popup-client-details {
        color: #333 !important;
    }
    
    /* Nascondi elementi interattivi */
    .print-area .popup-close,
    .print-area .popup-print,
    .print-area .pagination,
    .print-area .all-payments-search,
    .print-area .stripe-payments-search,
    .print-area .all-invoices-search,
    .print-area .all-solleciti-search,
    .print-area .client-invoices-controls,
    .print-area .control-btn,
    .print-area .control-select,
    .print-area .back-btn,
    .print-area .detail-header-actions,
    .print-area .invoice-checkbox,
    .print-area .invoice-note-icon,
    .print-area .invoice-email-status,
    .print-area .invoice-arrow,
    .print-area .mobile-search-toggle,
    .print-area button {
        display: none !important;
    }
    
    /* Contenuto - mostra tutto senza scroll */
    .print-area .popup-content,
    .print-area .all-payments-content,
    .print-area .stripe-payments-content,
    .print-area .all-invoices-content,
    .print-area .all-solleciti-content,
    .print-area #popupInvoiceList {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 8px !important;
    }
    
    /* ===== LISTA FATTURE - Layout flex a riga ===== */
    .print-area .invoices-grid-header {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        background: #e8e8e8 !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border: 1px solid #999 !important;
        border-bottom: 2px solid #333 !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .invoices-grid-header span {
        flex-shrink: 0;
    }
    
    .print-area .invoices-grid-header span:nth-child(1),
    .print-area .invoices-grid-header span:nth-child(2),
    .print-area .invoices-grid-header span:nth-child(7) {
        display: none !important;
    }
    
    .print-area .invoices-grid-header span:nth-child(3) { width: 70px; }
    .print-area .invoices-grid-header span:nth-child(4) { width: 120px; }
    .print-area .invoices-grid-header span:nth-child(5) { flex: 1; }
    .print-area .invoices-grid-header span:nth-child(6) { width: 80px; }
    
    .print-area .invoices-grid-body {
        display: block !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .invoice-card,
    .print-area .invoice-card.invoice-grid-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        border-bottom: 1px solid #ddd !important;
        background: white !important;
        width: auto !important;
        min-width: auto !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .print-area .invoice-card:nth-child(even) {
        background: #f8f8f8 !important;
    }
    
    .print-area .invoice-card .invoice-checkbox,
    .print-area .invoice-card .invoice-note-icon,
    .print-area .invoice-card .invoice-email-status,
    .print-area .invoice-card .invoice-arrow {
        display: none !important;
    }
    
    .print-area .invoice-card .invoice-date {
        width: 70px !important;
        flex-shrink: 0;
        font-size: 11px !important;
        color: #666 !important;
    }
    
    .print-area .invoice-card .invoice-number {
        width: 120px !important;
        flex-shrink: 0;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #006666 !important;
        -webkit-text-fill-color: #006666 !important;
    }
    
    .print-area .invoice-card .invoice-amount {
        flex: 1 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: left !important;
        padding-right: 0 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
    
    .print-area .invoice-card .invoice-status {
        width: 80px !important;
        flex-shrink: 0;
        text-align: center !important;
    }
    
    /* ===== INSOLUTO - Layout flex a riga ===== */
    .print-area .insoluto-header {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        background: #e8e8e8 !important;
        padding: 8px 12px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border: 1px solid #999 !important;
        border-bottom: 2px solid #333 !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .insoluto-header span {
        flex-shrink: 0;
    }
    
    .print-area .insoluto-header span:nth-child(1),
    .print-area .insoluto-header span:nth-child(2),
    .print-area .insoluto-header span:nth-child(11) {
        display: none !important;
    }
    
    .print-area .insoluto-header span:nth-child(3) { width: 65px; }
    .print-area .insoluto-header span:nth-child(4) { width: 100px; }
    .print-area .insoluto-header span:nth-child(5) { width: 70px; }
    .print-area .insoluto-header span:nth-child(6) { width: 40px; }
    .print-area .insoluto-header span:nth-child(7) { width: 70px; }
    .print-area .insoluto-header span:nth-child(8) { width: 70px; }
    .print-area .insoluto-header span:nth-child(9) { width: 70px; }
    .print-area .insoluto-header span:nth-child(10) { width: 60px; }
    
    .print-area .insoluto-scroll-area {
        display: block !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .invoice-card.insoluto-detail {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 5px 12px !important;
        border-bottom: 1px solid #ddd !important;
        background: white !important;
        width: auto !important;
        min-width: auto !important;
        break-inside: avoid !important;
    }
    
    .print-area .insoluto-detail:nth-child(even) {
        background: #f8f8f8 !important;
    }
    
    .print-area .insoluto-detail .invoice-date { width: 65px !important; font-size: 10px !important; }
    .print-area .insoluto-detail .invoice-number { width: 100px !important; font-size: 10px !important; font-weight: 600 !important; color: #006666 !important; -webkit-text-fill-color: #006666 !important; }
    .print-area .insoluto-detail .invoice-col { font-size: 10px !important; }
    .print-area .insoluto-detail .invoice-col.netto { width: 70px !important; }
    .print-area .insoluto-detail .invoice-col.iva-rate { width: 40px !important; }
    .print-area .insoluto-detail .invoice-col.totale { width: 70px !important; font-weight: 600 !important; }
    .print-area .insoluto-detail .invoice-col.versato { width: 70px !important; color: #008800 !important; -webkit-text-fill-color: #008800 !important; }
    .print-area .insoluto-detail .invoice-col.residuo { width: 70px !important; color: #cc0000 !important; -webkit-text-fill-color: #cc0000 !important; font-weight: 700 !important; }
    .print-area .insoluto-detail .invoice-status { width: 60px !important; }
    
    .print-area .insoluto-summary {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        background: #fff0f0 !important;
        border-top: 2px solid #cc0000 !important;
        font-weight: 700 !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .insoluto-summary .sum-label {
        width: 165px !important;
        font-size: 10px !important;
        color: #cc0000 !important;
        -webkit-text-fill-color: #cc0000 !important;
    }
    
    .print-area .insoluto-summary .sum-netto { width: 70px !important; font-size: 10px !important; }
    .print-area .insoluto-summary .sum-iva { width: 40px !important; font-size: 10px !important; }
    .print-area .insoluto-summary .sum-totale { width: 70px !important; font-size: 10px !important; }
    .print-area .insoluto-summary .sum-versato { width: 70px !important; font-size: 10px !important; color: #008800 !important; -webkit-text-fill-color: #008800 !important; }
    .print-area .insoluto-summary .sum-residuo { width: 70px !important; font-size: 11px !important; color: #cc0000 !important; -webkit-text-fill-color: #cc0000 !important; }
    
    /* ===== STATI FATTURA - COLORATI ===== */
    .print-area .invoice-status {
        padding: 3px 8px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }
    
    .print-area .invoice-status.paid {
        background: #00cc66 !important;
        color: #fff !important;
    }
    
    .print-area .invoice-status.partial {
        background: #ffaa00 !important;
        color: #000 !important;
    }
    
    .print-area .invoice-status.unpaid {
        background: #cc0000 !important;
        color: #fff !important;
    }
    
    .print-area .invoice-status.credit-note {
        background: #9966cc !important;
        color: #fff !important;
    }
    
    .print-area .invoice-status.split-paid,
    .print-area .invoice-status.sp-paid {
        background: #0099cc !important;
        color: #fff !important;
    }
    
    /* ===== TUTTE LE FATTURE - Layout flex a riga ===== */
    .print-area .all-invoice-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        border-bottom: 1px solid #ddd !important;
        background: white !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .print-area .all-invoice-card:nth-child(even) {
        background: #f8f8f8 !important;
    }
    
    .print-area .all-invoice-card .all-invoice-checkbox,
    .print-area .all-invoice-card .all-invoice-arrow {
        display: none !important;
    }
    
    .print-area .all-invoice-card .all-invoice-date {
        width: 70px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        color: #666 !important;
    }
    
    .print-area .all-invoice-card .all-invoice-number {
        width: 110px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #006666 !important;
        -webkit-text-fill-color: #006666 !important;
    }
    
    .print-area .all-invoice-card .all-invoice-client {
        flex: 1 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .print-area .all-invoice-card .all-invoice-amount {
        width: 90px !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: left !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
    
    .print-area .all-invoice-card .all-invoice-status {
        width: 70px !important;
        flex-shrink: 0 !important;
        padding: 3px 6px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }
    
    .print-area .all-invoice-status.paid { background: #00cc66 !important; color: #fff !important; }
    .print-area .all-invoice-status.partial { background: #ffaa00 !important; color: #000 !important; }
    .print-area .all-invoice-status.unpaid { background: #cc0000 !important; color: #fff !important; }
    .print-area .all-invoice-status.credit-note { background: #9966cc !important; color: #fff !important; }
    
    /* ===== TUTTI I PAGAMENTI - Layout flex a riga ===== */
    .print-area .all-payment-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        border-bottom: 1px solid #ddd !important;
        background: white !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .print-area .all-payment-card:nth-child(even) {
        background: #f8f8f8 !important;
    }
    
    .print-area .all-payment-card .all-payment-arrow {
        display: none !important;
    }
    
    .print-area .all-payment-card .all-payment-date {
        width: 70px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        color: #666 !important;
    }
    
    .print-area .all-payment-card .all-payment-number {
        width: 110px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #006666 !important;
        -webkit-text-fill-color: #006666 !important;
    }
    
    .print-area .all-payment-card .all-payment-client {
        flex: 1 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .print-area .all-payment-card .all-payment-amount {
        width: 90px !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: left !important;
        color: #008800 !important;
        -webkit-text-fill-color: #008800 !important;
    }
    
    .print-area .all-payment-card .all-payment-method {
        width: 80px !important;
        flex-shrink: 0 !important;
        font-size: 9px !important;
        color: #666 !important;
        text-align: center !important;
    }
    
    /* ===== TUTTI I SOLLECITI - Layout flex a riga ===== */
    .print-area .all-sollecito-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        border-bottom: 1px solid #ddd !important;
        background: white !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .print-area .all-sollecito-card:nth-child(even) {
        background: #f8f8f8 !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-arrow {
        display: none !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-date {
        width: 70px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        color: #666 !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-type {
        width: 80px !important;
        flex-shrink: 0 !important;
        padding: 3px 6px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        background: #ffaa00 !important;
        color: #000 !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-client {
        flex: 1 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-amount {
        width: 90px !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: left !important;
        color: #cc0000 !important;
        -webkit-text-fill-color: #cc0000 !important;
    }
    
    .print-area .all-sollecito-card .all-sollecito-channel {
        width: 60px !important;
        flex-shrink: 0 !important;
        font-size: 9px !important;
        color: #666 !important;
        text-align: center !important;
    }
    
    /* ===== DETTAGLIO FATTURA ===== */
    .print-area .detail-popup {
        max-height: none !important;
    }
    
    .print-area .detail-content {
        padding: 12px !important;
    }
    
    .print-area .detail-summary {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        margin-bottom: 12px !important;
    }
    
    .print-area .summary-item {
        padding: 6px 10px !important;
        background: white !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
    }
    
    .print-area .summary-label {
        font-size: 9px !important;
        color: #666 !important;
    }
    
    .print-area .summary-value {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
    
    /* Dettaglio Voci - tabella su riga singola */
    .print-area .detail-items {
        padding: 12px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .print-area .detail-items h3 {
        font-size: 12px !important;
        color: #333 !important;
        border-bottom: 1px solid #999 !important;
        padding-bottom: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .print-area .items-table {
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        overflow: visible !important;
    }
    
    .print-area .items-header {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        background: #e8e8e8 !important;
        border-bottom: 1px solid #999 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .print-area .items-header .col-code { width: 60px !important; }
    .print-area .items-header span:nth-child(2) { flex: 1 !important; }
    .print-area .items-header .col-qty { width: 40px !important; text-align: center !important; }
    .print-area .items-header .col-price { width: 70px !important; text-align: right !important; }
    .print-area .items-header .col-discount { width: 50px !important; text-align: center !important; }
    .print-area .items-header .col-total { width: 70px !important; text-align: right !important; }
    
    .print-area .item-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 5px 10px !important;
        border-bottom: 1px solid #eee !important;
        font-size: 10px !important;
        width: auto !important;
        min-width: auto !important;
        break-inside: avoid !important;
    }
    
    .print-area .item-row:nth-child(even) {
        background: #fafafa !important;
    }
    
    .print-area .item-row:last-child {
        border-bottom: none !important;
    }
    
    .print-area .item-row .col-code { width: 60px !important; color: #666 !important; }
    .print-area .item-row .col-name-desc { flex: 1 !important; }
    .print-area .item-row .col-name-desc .item-name { display: inline !important; }
    .print-area .item-row .col-name-desc .item-description { display: inline !important; color: #888 !important; font-size: 9px !important; margin-left: 4px !important; }
    .print-area .item-row .col-qty { width: 40px !important; text-align: center !important; }
    .print-area .item-row .col-price { width: 70px !important; text-align: right !important; }
    .print-area .item-row .col-discount { width: 50px !important; text-align: center !important; color: #cc6600 !important; }
    .print-area .item-row .col-total { width: 70px !important; text-align: right !important; font-weight: 600 !important; }

    /* DataTables - Rimuovi scroll e wrapper per stampa */
    .print-area .items-table-wrapper {
        overflow: visible !important;
        overflow-x: visible !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    .print-area .dataTables_wrapper {
        overflow: visible !important;
    }

    /* Nascondi controlli DataTables in stampa */
    .print-area .dataTables_length,
    .print-area .dataTables_filter,
    .print-area .dataTables_info,
    .print-area .dataTables_paginate {
        display: none !important;
    }

    /* Tabella DataTables - adatta alla pagina */
    .print-area .invoice-items-table,
    .print-area #purchaseItemsTable,
    .print-area #salesItemsTable {
        width: 100% !important;
        min-width: auto !important;
        border-collapse: collapse !important;
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        overflow: visible !important;
        font-size: 10px !important;
    }

    .print-area .invoice-items-table thead th {
        background: #e8e8e8 !important;
        color: #000 !important;
        border-bottom: 1px solid #999 !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .print-area .invoice-items-table tbody tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .print-area .invoice-items-table tbody tr:nth-child(even) {
        background: #fafafa !important;
    }

    .print-area .invoice-items-table tbody td {
        border-bottom: 1px solid #eee !important;
        padding: 5px 10px !important;
        font-size: 10px !important;
    }

    .print-area .invoice-items-table tbody tr:last-child td {
        border-bottom: none !important;
    }

    .print-area .invoice-items-table td.col-code {
        color: #666 !important;
        font-size: 9px !important;
        width: 60px !important;
    }

    .print-area .invoice-items-table td.col-name {
        color: #000 !important;
    }

    .print-area .invoice-items-table td.col-name .item-description {
        color: #888 !important;
        font-size: 9px !important;
        display: inline !important;
        margin-left: 4px !important;
    }

    .print-area .invoice-items-table td.col-qty {
        text-align: center !important;
        width: 40px !important;
    }

    .print-area .invoice-items-table td.col-price {
        text-align: right !important;
        width: 70px !important;
    }

    .print-area .invoice-items-table td.col-discount {
        text-align: center !important;
        width: 50px !important;
        color: #cc6600 !important;
    }

    .print-area .invoice-items-table td.col-total {
        text-align: right !important;
        width: 70px !important;
        font-weight: 600 !important;
        color: #000 !important;
    }

    /* Sezioni dettaglio */
    .print-area .detail-section {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        background: #fafafa !important;
    }
    
    .print-area .detail-section h4 {
        font-size: 11px !important;
        color: #333 !important;
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 4px !important;
        margin-bottom: 8px !important;
    }
    
    .print-area .detail-grid {
        display: block !important;
    }
    
    .print-area .detail-row {
        display: flex !important;
        gap: 8px !important;
        padding: 3px 0 !important;
        font-size: 10px !important;
    }
    
    .print-area .detail-label {
        width: 100px !important;
        color: #666 !important;
    }
    
    .print-area .detail-value {
        flex: 1 !important;
        color: #000 !important;
    }
    
    /* ===== STRIPE PAYMENTS - Layout tabella ottimizzato ===== */
    .print-area .stripe-payments-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        font-size: 10px !important;
    }

    .print-area .stripe-payments-table thead th {
        background: #e8e8e8 !important;
        color: #000 !important;
        padding: 6px 4px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border: 1px solid #999 !important;
        border-bottom: 2px solid #333 !important;
    }

    /* Nascondi colonna freccia espansione */
    .print-area .stripe-payments-table th:last-child,
    .print-area .stripe-payments-table td:last-child {
        display: none !important;
    }

    /* Larghezze fisse colonne per evitare overflow */
    .print-area .stripe-payments-table th:nth-child(1),
    .print-area .stripe-payments-table td:nth-child(1) {
        width: 70px !important;
    }

    .print-area .stripe-payments-table th:nth-child(2),
    .print-area .stripe-payments-table td:nth-child(2) {
        width: 80px !important;
    }

    .print-area .stripe-payments-table th:nth-child(3),
    .print-area .stripe-payments-table td:nth-child(3) {
        width: auto !important;
        min-width: 0 !important;
    }

    .print-area .stripe-payments-table th:nth-child(4),
    .print-area .stripe-payments-table td:nth-child(4) {
        width: 140px !important;
    }

    .print-area .stripe-payments-table th:nth-child(5),
    .print-area .stripe-payments-table td:nth-child(5) {
        width: auto !important;
        min-width: 0 !important;
    }

    .print-area .stripe-payments-table tbody tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border-bottom: 1px solid #ddd !important;
    }

    .print-area .stripe-payments-table tbody tr:nth-child(even) {
        background: #f8f8f8 !important;
    }

    .print-area .stripe-payments-table tbody tr:nth-child(odd) {
        background: white !important;
    }

    .print-area .stripe-payments-table tbody td {
        padding: 5px 4px !important;
        font-size: 10px !important;
        color: #000 !important;
        border-left: 1px solid #ddd !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .print-area .stripe-payments-table tbody td:first-child {
        border-left: none !important;
    }

    /* Nascondi righe espanse con dettagli */
    .print-area .stripe-payment-details-row {
        display: none !important;
    }

    /* Messaggi stato */
    .print-area .stripe-payments-loading,
    .print-area .stripe-payments-error,
    .print-area .stripe-payments-empty {
        font-size: 11px !important;
        padding: 16px !important;
        text-align: center !important;
        color: #666 !important;
    }

    /* Impostazioni pagina */
    @page {
        margin: 1cm;
        size: A4 portrait;
    }
}
.popup-close:hover { background: var(--danger); border-color: var(--danger); color: white; }
.popup-content { padding: 16px; max-height: 400px; overflow-y: auto; }

/* Client invoices popup - stile come "Tutte le Fatture" */
.client-invoices-popup { width: 1100px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; }
@media (min-width: 1920px) { .client-invoices-popup { width: 1300px; } }
@media (min-width: 2560px) { .client-invoices-popup { width: 1500px; } }
@media (min-width: 3840px) { .client-invoices-popup { width: 1900px; } }
.client-invoices-popup .popup-content { flex: 1; max-height: none; overflow-y: auto; padding: 0; }
.client-invoices-header { flex-direction: column; align-items: stretch; padding: 16px 24px; position: relative; }
.client-invoices-header h3 { text-align: center; margin-bottom: 4px; padding-right: 40px; }
.client-invoices-header .popup-close { position: absolute; top: 16px; right: 20px; }

/* Popup type badge */
.popup-type-badge { text-align: center; margin-bottom: 8px; }
.popup-type-badge span { display: inline-block; padding: 4px 14px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.popup-type-badge .type-fatturato { background: rgba(0, 245, 212, 0.15); color: var(--accent-cyan); }
.popup-type-badge .type-stornato { background: rgba(255, 190, 11, 0.15); color: var(--warning); }
.popup-type-badge .type-valore { background: rgba(0, 187, 249, 0.15); color: var(--accent-blue); }
.popup-type-badge .type-saldato { background: rgba(219, 112, 147, 0.15); color: #db7093; }
.popup-type-badge .type-insoluto { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
.popup-type-badge .type-month { background: rgba(155, 93, 229, 0.15); color: var(--accent-purple); }

/* Popup client details */
.popup-client-details { text-align: center; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.popup-client-details .client-detail-item { display: inline-block; margin: 0 8px; }
.popup-client-details .client-detail-label { color: var(--text-muted); }
.popup-client-details .client-detail-value { color: var(--text-secondary); font-family: var(--font-mono); }
.popup-client-details .client-address { display: block; margin-top: 4px; font-style: italic; }

.client-invoices-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.control-btn { padding: 8px 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; white-space: nowrap; }
.control-select { padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.control-select:focus { outline: none; border-color: var(--accent-cyan); }
.control-select:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.control-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.control-btn.primary { background: var(--gradient-primary); border: none; color: var(--bg-primary); font-weight: 600; }
.control-btn.primary:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3); }
.control-btn.pdf-download-all { background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; color: #fff; font-weight: 600; }
.control-btn.pdf-download-all:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); color: #fff; }
.control-btn.pdf-download-all:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.control-btn.active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--bg-primary); }

/* Invoice grid header per tutte le viste */
.invoices-grid-header { display: grid; grid-template-columns: 32px 28px 90px 1fr 120px 100px 32px; gap: 12px; padding: 12px 20px; background: var(--bg-tertiary); border-bottom: 2px solid var(--border-color); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.invoices-grid-header span { text-align: left; }
.invoices-grid-body { }

/* Riga totale popup fatture */
.invoices-grid-total {
    display: grid;
    grid-template-columns: 32px 28px 90px 1fr 120px 100px 32px;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-tertiary);
    border-top: 2px solid var(--border-color);
    font-weight: 700;
}
.invoices-grid-total .total-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
}
.invoices-grid-total .total-amount {
    font-size: 16px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Invoice card - stile tabellare come "Tutte le Fatture" */
.invoice-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s; }
.invoice-card.invoice-grid-row { display: grid; grid-template-columns: 32px 28px 90px 1fr 120px 100px 32px; gap: 12px; align-items: center; }
.invoice-card:hover { background: var(--bg-tertiary); }
.invoice-card:first-child { border-top: 1px solid var(--border-color); }
.invoice-card:last-child { border-bottom: 1px solid var(--border-color); }
.invoice-card.credit-note { border-left: 3px solid var(--warning); background: rgba(255, 190, 11, 0.03); }
.invoice-card.credit-note:hover { background: rgba(255, 190, 11, 0.08); }
.invoice-date { width: 90px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.invoice-grid-row .invoice-date { width: auto; }
.invoice-number { width: 80px; font-weight: 600; color: var(--accent-cyan); flex-shrink: 0; }
.invoice-grid-row .invoice-number { width: auto; }
.invoice-number.credit-note { color: var(--warning); }
.invoice-amount { flex: 1; font-size: 18px; font-weight: 700; text-align: right; padding-right: 16px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.invoice-grid-row .invoice-amount { text-align: left; padding-right: 0; }
.invoice-amount.unpaid { background: linear-gradient(135deg, var(--warning), var(--danger)); -webkit-background-clip: text; }
.invoice-amount.credit-note { background: linear-gradient(135deg, var(--warning), #ff9500); -webkit-background-clip: text; }
.invoice-status { width: 90px; padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; flex-shrink: 0; }
.invoice-grid-row .invoice-status { width: auto; }
.invoice-status.paid { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.invoice-status.partial { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.invoice-status.unpaid { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
.invoice-status.credit-note { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.invoice-status.split-paid { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.invoice-arrow { color: var(--text-muted); font-size: 18px; flex-shrink: 0; }
.invoice-card:hover .invoice-arrow { color: var(--accent-cyan); }

/* Vista Insoluto dettagliata */
.invoice-card.insoluto-detail { display: grid; grid-template-columns: 32px 28px 90px 1fr 110px 70px 110px 110px 110px 90px 32px; gap: 8px; align-items: center; padding: 14px 20px; }
.invoice-card.insoluto-detail .invoice-date { text-align: left; }
.invoice-card.insoluto-detail .invoice-number { text-align: left; width: auto; }
.invoice-card.insoluto-detail .invoice-col { font-size: 14px; text-align: left; }
.invoice-card.insoluto-detail .invoice-col.netto { color: var(--text-secondary); }
.invoice-card.insoluto-detail .invoice-col.iva-rate { color: var(--text-muted); font-size: 13px; }
.invoice-card.insoluto-detail .invoice-col.totale { color: var(--text-primary); font-weight: 600; }
.invoice-card.insoluto-detail .invoice-col.versato { color: var(--success); font-weight: 500; }
.invoice-card.insoluto-detail .invoice-col.residuo { color: var(--danger); font-weight: 700; font-size: 15px; }
.invoice-card.insoluto-detail .invoice-status { text-align: left; }

/* Header colonne per vista Insoluto */
.insoluto-header { display: grid; grid-template-columns: 32px 28px 90px 1fr 110px 70px 110px 110px 110px 90px 32px; gap: 8px; padding: 12px 20px; background: var(--bg-tertiary); border-bottom: 2px solid var(--border-color); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 5; }
.insoluto-header span { text-align: left; }
.insoluto-scroll-area { flex: 1; overflow-y: auto; }
.insoluto-summary { display: grid; grid-template-columns: 32px 28px 90px 1fr 110px 70px 110px 110px 110px 90px 32px; gap: 8px; padding: 16px 20px; background: linear-gradient(135deg, rgba(255, 71, 87, 0.08), rgba(255, 71, 87, 0.03)); border-top: 2px solid var(--danger); font-weight: 700; position: sticky; bottom: 0; z-index: 5; }

/* Riepilogo totali Insoluto */
.insoluto-summary span { font-size: 14px; text-align: left; }
.insoluto-summary .sum-label { grid-column: span 4; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--danger); }
.insoluto-summary .sum-netto { color: var(--text-secondary); }
.insoluto-summary .sum-iva { color: var(--text-muted); }
.insoluto-summary .sum-totale { color: var(--text-primary); }
.insoluto-summary .sum-versato { color: var(--success); }
.insoluto-summary .sum-residuo { color: var(--danger); font-size: 16px; }

/* Split Payment Badge */
.split-payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.split-payment-badge[title] { cursor: help; }

/* Badge tipologia pagamento */
.tipo-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.tipo-badge.stripe {
    background: linear-gradient(135deg, #635BFF, #00D4FF);
    color: white;
}
.tipo-badge.conto {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

/* Importo pagato parziale nella vista Saldato */
.invoice-amount.saldato-partial { 
    background: linear-gradient(135deg, #db7093, #c75b7f); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

/* Invoice Note Icon */
.invoice-note-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-right: 8px;
}
.invoice-note-icon:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0, 245, 212, 0.4); }
.invoice-note-icon.empty {
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    opacity: 0;
}
.invoice-card:hover .invoice-note-icon.empty { opacity: 0.6; }
.invoice-note-icon.empty:hover {
    opacity: 1;
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 245, 212, 0.1);
}

/* Invoice Email Status Icon */
.invoice-email-status {
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s;
}
.invoice-email-status:hover {
    opacity: 1;
    transform: scale(1.1);
}
.invoice-email-status.sent {
    filter: grayscale(0);
}
.invoice-email-status.viewed {
    filter: grayscale(0);
}

/* Self Invoice Badge */
.self-invoice-badge {
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s;
}
.self-invoice-badge:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Note Popup - z-index elevato per essere sopra tutto */
#notePopup { z-index: 11000 !important; }

/* Note Popup */
.note-popup { width: 500px; max-width: 95vw; }
.note-popup-content { padding: 24px; }
.note-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.note-popup-title { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.note-popup-title .icon { font-size: 24px; }
.note-popup-invoice { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.note-textarea { 
    width: 100%; min-height: 150px; 
    padding: 14px; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-sm); 
    color: var(--text-primary); 
    font-size: 14px; line-height: 1.6;
    resize: vertical;
    font-family: inherit;
}
.note-textarea:focus { border-color: var(--accent-cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.1); }
.note-textarea::placeholder { color: var(--text-muted); }
.note-meta { font-size: 11px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.note-meta span { display: block; margin-bottom: 4px; }
.note-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: flex-end; }
.note-btn { padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.note-btn.save { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color: var(--bg-primary); }
.note-btn.save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3); }
.note-btn.delete { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.note-btn.delete:hover { background: var(--danger); color: white; }
.note-btn.cancel { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.note-btn.cancel:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* Detail popup */
.detail-popup { width: 1024px; max-width: 95vw; max-height: 90vh; }
@media (min-width: 1920px) { .detail-popup { width: 1200px; } }
@media (min-width: 2560px) { .detail-popup { width: 1400px; } }
@media (min-width: 3840px) { .detail-popup { width: 1700px; } }
.detail-header { display: flex; align-items: center; justify-content: space-between; padding: 24px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.detail-title { display: flex; align-items: center; gap: 12px; }
.detail-title h2 { font-size: 24px; font-weight: 700; }
.detail-header-actions { display: flex; align-items: center; gap: 12px; }
.back-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.back-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.pdf-action-btn { padding: 8px 12px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s; }
.pdf-action-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.pdf-action-btn.preview { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); border: none; color: var(--bg-primary); font-weight: 600; }
.pdf-action-btn.preview:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4); }
.pdf-action-btn.download { background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; color: #fff; }
.pdf-action-btn.download:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); }

/* PDF Preview Popup Overlay */
.pdf-preview-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 10100; display: none; align-items: center; justify-content: center; padding: 20px; }
.pdf-preview-overlay.active { display: flex; }
.pdf-preview-popup {
    width: 100%;
    max-width: 1024px;
    height: 90vh;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pdf-preview-popup.maximized {
    max-width: 98vw;
    width: 98vw;
    height: 98vh;
}

@media (max-width: 1024px) {
    .pdf-preview-popup {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }
}
.pdf-preview-header { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.pdf-preview-title-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.pdf-preview-controls-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pdf-preview-close { width: 36px; height: 36px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pdf-preview-close:hover { border-color: var(--danger); color: var(--danger); }
.pdf-preview-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #333; overflow: hidden; position: relative; }
.pdf-preview-content iframe { width: 100%; height: 100%; border: none; }
.pdf-preview-loading { color: var(--text-muted); font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdf-preview-loading .spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 1s linear infinite; }
/* PDF.js page controls */
.pdf-page-controls { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.pdf-nav-btn { width: 32px; height: 32px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.pdf-nav-btn:hover { background: var(--accent-cyan); color: var(--bg-primary); border-color: var(--accent-cyan); }
.pdf-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pdf-page-info { font-size: 13px; color: var(--text-secondary); min-width: 50px; text-align: center; font-weight: 500; }
#pdfJsContainer { -webkit-overflow-scrolling: touch; cursor: zoom-in; }
#pdfJsCanvas { max-width: 100%; }
/* Magnifier */
.pdf-magnifier { display: none; position: fixed; width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--accent-cyan); box-shadow: 0 0 20px rgba(0, 245, 212, 0.5), 0 4px 20px rgba(0,0,0,0.5); overflow: hidden; pointer-events: none; z-index: 3000; background: #fff; }
.pdf-magnifier.active { display: block; }
.pdf-magnifier canvas { display: block; }
.pdf-zoom-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 12px; pointer-events: none; animation: fadeInOut 3s ease-in-out forwards; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.detail-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
.summary-item { display: flex; flex-direction: column; gap: 4px; }
.summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.summary-value { font-size: 18px; font-weight: 600; }
.summary-item.highlight .summary-value { font-size: 24px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.detail-items { padding: 24px; max-height: 380px; overflow-y: auto; }
.detail-items h3 { margin-bottom: 16px; font-size: 14px; color: var(--text-secondary); }
.items-table { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.items-header, .item-row { display: grid; grid-template-columns: minmax(90px, auto) 1fr 60px 100px 80px 100px; gap: 10px; padding: 12px 16px; }
.items-header { background: var(--bg-tertiary); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.item-row { border-bottom: 1px solid var(--border-color); font-size: 13px; }
.item-row:last-child { border-bottom: none; }
.col-code { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; word-break: break-word; }
.col-name-desc { display: flex; flex-direction: column; gap: 4px; }
.item-name { color: var(--text-primary); font-weight: 500; }
.item-description { color: var(--text-muted); font-size: 12px; font-style: italic; }
.col-qty { text-align: center; }
.col-price, .col-total, .col-discount { text-align: right; font-family: var(--font-mono); }
.col-total { color: var(--accent-cyan); font-weight: 600; }
.col-discount { color: var(--danger); }

/* DataTables per fatture (vendita e acquisto) */
.items-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.invoice-items-table {
    width: 100% !important;
    min-width: 700px;
    border-collapse: collapse;
}

.invoice-items-table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-align: left;
}

.invoice-items-table tbody td {
    padding: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
}

.invoice-items-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

.invoice-items-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Colori specifici per le celle DataTables */
.invoice-items-table td.col-code {
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    word-break: break-word;
}

.invoice-items-table td.col-name {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.invoice-items-table td.col-name .item-description {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-style: italic;
    display: block;
    margin-top: 4px;
}

.invoice-items-table td.col-qty {
    text-align: center !important;
}

.invoice-items-table td.col-price,
.invoice-items-table td.col-discount {
    text-align: right !important;
    font-family: var(--font-mono) !important;
}

.invoice-items-table td.col-discount {
    color: var(--danger) !important;
    font-weight: 600;
}

.invoice-items-table td.col-total {
    text-align: right !important;
    font-family: var(--font-mono) !important;
    color: var(--accent-cyan) !important;
    font-weight: 600;
}

/* DataTables controls */
.dataTables_wrapper {
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    margin: 0 8px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: var(--accent-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
    margin: 0 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-tertiary) !important;
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-cyan) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer !important;
    position: relative !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--text-muted) !important;
}

/* Client detail popup */
.client-popup { width: 1024px; max-height: 85vh; display: flex; flex-direction: column; }
.client-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; max-height: calc(85vh - 70px); overflow-y: auto; }
.client-field { display: flex; flex-direction: column; gap: 4px; grid-column: span 2; }
.client-field.full { grid-column: 1 / -1; }
.client-field.small { grid-column: span 1; }
.client-field-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.client-field-value { font-size: 14px; color: var(--text-primary); padding: 10px 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); min-height: 40px; }
.client-field-value.mono { font-family: var(--font-mono); font-size: 13px; }
.client-field-value.empty { color: var(--text-muted); font-style: italic; }

/* Client action buttons - desktop */
.client-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* VIES Check Button */
.vies-check-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, #003399, #0055aa);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vies-check-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 51, 153, 0.4); }
.vies-check-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.vies-check-btn.loading { pointer-events: none; }
.vies-check-btn.loading::after { content: ''; width: 12px; height: 12px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 4px; }

/* Send Email Button */
.send-email-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.send-email-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4); }
.send-email-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Google Maps Button */
.maps-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, #34A853, #0F9D58);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.maps-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4); }
.maps-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Notes Button */
.notes-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.notes-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4); }
.notes-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Client Notes Popup */
.client-notes-popup {
    width: 800px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.client-notes-content {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.notes-header-actions {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
}

.add-note-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
    transition: all 0.2s;
}
.add-note-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4); }

.add-note-form {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.add-note-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
}

.add-note-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.note-form-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.save-note-btn {
    padding: 8px 16px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 245, 160, 0.3);
}
.save-note-btn:hover {
    background: #00d9a0;
    box-shadow: 0 4px 12px rgba(0, 245, 160, 0.4);
    transform: translateY(-1px);
}

.cancel-note-btn {
    padding: 8px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.cancel-note-btn:hover { background: var(--bg-tertiary); }

.client-notes-loading,
.client-notes-error,
.client-notes-empty {
    padding: 40px 20px;
    text-align: center;
}

.client-notes-loading .loading-icon,
.client-notes-error .error-icon,
.client-notes-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.client-notes-error {
    color: var(--danger);
}

.client-notes-empty {
    color: var(--text-secondary);
}

.client-notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all 0.2s;
}

.note-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.note-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.delete-note-btn {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.delete-note-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    transform: scale(1.1);
}

.note-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Note Detail Popup */
.note-detail-popup {
    width: 600px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.note-detail-content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.note-detail-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.note-detail-date-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.note-detail-date-value {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.note-detail-text {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/* Bottoni azioni note nella expand table */
.expand-note-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.expand-note-view-btn,
.expand-note-delete-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.expand-note-view-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: scale(1.1);
}

.expand-note-delete-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    transform: scale(1.1);
}

/* Google Maps Popup */
.google-maps-popup {
    width: 900px;
    max-width: 95vw;
    height: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.maps-address-info {
    padding: 12px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.maps-address-label {
    font-size: 16px;
}

.maps-address-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.maps-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
}

/* VIES Result Popup */
.vies-result-popup { width: 500px; max-width: 95vw; }
.vies-result-content { padding: 24px; }
.vies-result-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.vies-result-icon { font-size: 48px; }
.vies-result-title { font-size: 20px; font-weight: 600; }
.vies-result-status { font-size: 14px; margin-top: 4px; }
.vies-result-status.valid { color: var(--success); }
.vies-result-status.invalid { color: var(--danger); }
.vies-result-status.error { color: var(--warning); }
.vies-result-grid { display: grid; gap: 16px; }
.vies-result-field { display: flex; flex-direction: column; gap: 4px; }
.vies-result-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.vies-result-value { font-size: 14px; color: var(--text-primary); padding: 10px 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.vies-result-value.mono { font-family: var(--font-mono); }
.vies-result-actions { margin-top: 20px; display: flex; justify-content: flex-end; }

/* Payments popup */
.payments-popup { width: 1024px; }
.payments-header-info { padding: 16px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
.payments-header-info p { color: var(--text-secondary); font-size: 14px; }
.payments-header-info strong { color: var(--accent-cyan); }
.payments-list { padding: 16px 24px; max-height: 400px; overflow-y: auto; }
.payment-card { padding: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 12px; }
.payment-card:last-child { margin-bottom: 0; }
.payment-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.payment-amount { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.payment-status { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.payment-status.paid { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.payment-status.not_paid { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.payment-status.reversed { background: rgba(155, 93, 229, 0.2); color: var(--accent-purple); }
.payment-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-detail { display: flex; flex-direction: column; gap: 2px; }
.payment-detail-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.payment-detail-value { font-size: 13px; color: var(--text-primary); }
.payment-detail-value.highlight { color: var(--success); }
.no-payments { text-align: center; padding: 40px; color: var(--text-muted); }
.payments-btn { padding: 8px 16px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.payments-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(155, 93, 229, 0.3); }

/* All payments popup */
.all-payments-popup { width: 1024px; max-height: 85vh; }
.all-payments-search { display: flex; gap: 8px; flex: 1; max-width: 500px; margin: 0 16px; }
.all-payments-search input { flex: 1; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; }
.all-payments-search input:focus { outline: none; border-color: var(--accent-cyan); }
.all-payments-search input::placeholder { color: var(--text-muted); }
.all-payments-content { max-height: calc(85vh - 140px); overflow-y: auto; }
.all-payment-card { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s; }
.all-payment-card:hover { background: var(--bg-tertiary); }
.all-payment-card:last-child { border-bottom: none; }
.all-payment-date { min-width: 100px; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.all-payment-amount { min-width: 120px; font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--success); }
.all-payment-client { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.all-payment-invoice { font-size: 12px; color: var(--accent-cyan); font-family: var(--font-mono); }
.all-payment-arrow { color: var(--text-muted); font-size: 18px; }
.all-payment-card:hover .all-payment-arrow { color: var(--accent-cyan); }
.all-payment-card.credit-note { border-left: 3px solid var(--danger); }
.all-payment-card.credit-note:hover { border-left-color: var(--danger); }
.all-payment-amount.credit-note { color: var(--danger); }
.all-payment-invoice.credit-note { color: var(--danger); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; background: var(--bg-tertiary); border-top: 1px solid var(--border-color); }
.pagination-btn { padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.pagination-btn:hover:not(:disabled) { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-info { padding: 8px 16px; font-size: 13px; color: var(--text-muted); }
.pagination-info strong { color: var(--accent-cyan); }
.all-payments-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; }
.all-payments-loading p { color: var(--text-muted); }

/* Stripe payments popup */
.stripe-payments-popup { width: 1200px; max-height: 85vh; display: flex; flex-direction: column; }
.stripe-payments-search { display: flex; gap: 8px; flex: 1; max-width: 500px; margin: 0 16px; }
.stripe-payments-search input { flex: 1; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; }
.stripe-payments-search input:focus { outline: none; border-color: #635BFF; }
.stripe-payments-search input::placeholder { color: var(--text-muted); }
.stripe-payments-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}
.stripe-payments-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
}
.stripe-payments-loading p { color: var(--text-muted); }
.stripe-payments-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
}
.stripe-payments-error .error-icon {
    font-size: 48px;
}
.stripe-payments-error p {
    color: var(--text-muted);
    text-align: center;
}
.stripe-payments-table-wrapper {
    overflow-x: auto;
}
.stripe-payments-table {
    width: 100%;
    border-collapse: collapse;
}
.stripe-payments-table thead {
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 1;
}
.stripe-payments-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}
.stripe-payments-table td {
    padding: 16px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}
.stripe-payments-table tbody tr {
    transition: background 0.2s;
}
.stripe-payments-table tbody tr:hover {
    background: var(--bg-tertiary);
}
.stripe-payments-table tbody tr:last-child td {
    border-bottom: none;
}
.stripe-expand-cell {
    padding: 8px !important;
    text-align: center;
    vertical-align: middle;
}
.stripe-expand-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
    border-radius: var(--radius-sm);
}
.stripe-expand-btn:hover {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}
.stripe-expand-btn svg {
    transition: transform 0.2s;
}
.stripe-expand-btn.expanded svg {
    transform: rotate(180deg);
}
.stripe-payment-details-row {
    background: var(--bg-secondary);
}
.stripe-payment-details {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stripe-detail-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stripe-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stripe-detail-value {
    font-size: 14px;
    color: var(--text-primary);
}
.stripe-metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.stripe-metadata-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.stripe-metadata-key {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.stripe-metadata-value {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}

/* All invoices popup */
.all-invoices-popup {
    width: 1024px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.mobile-search-toggle { display: none; }
.all-invoices-search { display: flex; gap: 8px; flex: 1; max-width: 750px; margin: 0 16px; }
.all-invoices-search input, .all-invoices-search select { flex: 1; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; min-width: 0; }
.all-invoices-search input:focus, .all-invoices-search select:focus { outline: none; border-color: var(--accent-cyan); }
.all-invoices-search input::placeholder { color: var(--text-muted); }
.all-invoices-search select { max-width: 120px; cursor: pointer; }
.all-invoices-search input#invoicesAmountSearchInput { max-width: 100px; text-align: right; }
.all-invoices-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.all-invoices-popup .popup-header {
    flex-shrink: 0;
}
.all-invoices-popup .pagination {
    flex-shrink: 0;
}

/* Massimizzazione popup fatture */
.all-invoices-popup.maximized .all-invoices-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
.all-invoices-popup.maximized .popup-header {
    flex-shrink: 0 !important;
}
.all-invoices-popup.maximized .pagination {
    flex-shrink: 0 !important;
}
.all-invoice-card { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s; }
.all-invoice-card:hover { background: var(--bg-tertiary); }
.all-invoice-card:last-child { border-bottom: none; }
.all-invoice-date { min-width: 100px; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.all-invoice-number { min-width: 120px; font-size: 14px; font-weight: 600; color: var(--accent-cyan); font-family: var(--font-mono); }
.all-invoice-client { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.all-invoice-amount { min-width: 120px; font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); text-align: right; }
.all-invoice-status { min-width: 90px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center; }
.all-invoice-status.paid { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.all-invoice-status.partial { background: rgba(0, 187, 249, 0.2); color: var(--accent-blue); }
.all-invoice-status.unpaid { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.all-invoice-status.credit-note { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
.all-invoice-arrow { color: var(--text-muted); font-size: 18px; }
.all-invoice-card:hover .all-invoice-arrow { color: var(--accent-cyan); }
.all-invoice-card.credit-note { border-left: 3px solid var(--danger); background: rgba(255, 71, 87, 0.03); }
.all-invoice-card.credit-note:hover { background: rgba(255, 71, 87, 0.08); }
.all-invoice-card.credit-note .all-invoice-number { color: var(--danger); }
.all-invoice-card.credit-note .all-invoice-amount { color: var(--danger); }
.all-invoices-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; }
.all-invoices-loading p { color: var(--text-muted); }

/* TEAM NOTES POPUP */
.team-notes-popup { width: 900px; max-height: 85vh; display: flex; flex-direction: column; }
.team-notes-popup .popup-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border-color); }
.team-notes-popup .popup-header h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.team-notes-tabs { display: flex; gap: 8px; }
.team-notes-tab { padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: all 0.2s; }
.team-notes-tab:hover { border-color: var(--accent-cyan); }
.team-notes-tab.active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--bg-primary); font-weight: 600; }
.team-notes-tab .tab-count { margin-left: 6px; padding: 2px 6px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 11px; }
.team-notes-content { flex: 1; overflow-y: auto; max-height: calc(85vh - 200px); }
.team-notes-list { padding: 0; }
.team-note-card { display: flex; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.team-note-card:hover { background: var(--bg-tertiary); }
.team-note-card.unread { background: rgba(0, 245, 212, 0.05); border-left: 3px solid var(--accent-cyan); }
.team-note-card.completed { opacity: 0.6; }
.team-note-checkbox { flex-shrink: 0; }
.team-note-checkbox input { width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; }
.team-note-main { flex: 1; min-width: 0; }
.team-note-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.team-note-priority { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.team-note-priority.high { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
.team-note-priority.medium { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.team-note-priority.low { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.team-note-title { font-weight: 600; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-note-content { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.team-note-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); }
.team-note-author { display: flex; align-items: center; gap: 4px; }
.team-note-date { font-family: var(--font-mono); }
.team-note-assignee { padding: 2px 8px; background: var(--bg-tertiary); border-radius: 4px; }
.team-note-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }
.team-note-action-btn { padding: 6px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: all 0.2s; }
.team-note-action-btn:hover { background: var(--bg-secondary); border-color: var(--accent-cyan); }
.team-note-action-btn.delete:hover { border-color: var(--danger); background: rgba(255, 71, 87, 0.1); }
.team-notes-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 12px; color: var(--text-muted); }
.team-notes-empty .empty-icon { font-size: 48px; opacity: 0.5; }
.team-notes-add-bar { padding: 16px 24px; border-top: 1px solid var(--border-color); background: var(--bg-tertiary); }
.team-notes-add-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); border: none; border-radius: var(--radius-sm); color: var(--bg-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.team-notes-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4); }

/* Note Form Popup */
.note-form-popup { width: 600px; }
.note-form-popup .popup-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); }
.note-form-popup .popup-header h3 { margin: 0; }
.note-form-content { padding: 24px; }
.note-form-row { margin-bottom: 20px; }
.note-form-row label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.note-form-row input, .note-form-row textarea, .note-form-row select { width: 100%; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; }
.note-form-row input:focus, .note-form-row textarea:focus, .note-form-row select:focus { outline: none; border-color: var(--accent-cyan); }
.note-form-row textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.note-form-row-inline { display: flex; gap: 16px; }
.note-form-row-inline .note-form-row { flex: 1; margin-bottom: 0; }
.note-form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-color); }

/* SYNC OVERLAY */
.sync-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sync-overlay.active {
    display: flex;
    opacity: 1;
}

[data-theme="light"] .sync-overlay {
    background: rgba(245, 247, 250, 0.9);
}

.sync-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.sync-overlay-text {
    text-align: center;
}

.sync-overlay-text h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.sync-overlay-text p {
    font-size: 14px;
    color: var(--text-muted);
}

/* Infinity Loader SVG Animation */
.infinity-loader-svg {
    width: 150px;
    height: 75px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150"><defs><linearGradient id="grad1" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" style="stop-color:%2300E5FF;stop-opacity:1" /><stop offset="100%25" style="stop-color:%23AA00FF;stop-opacity:1" /></linearGradient></defs><path fill="none" stroke="url(%23grad1)" stroke-width="20" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"><animate attributeName="stroke-dashoffset" calcMode="spline" dur="4" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite"></animate></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Tema Matrix - infinito verde */
[data-theme="matrix"] .infinity-loader-svg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150"><defs><linearGradient id="grad1" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" style="stop-color:%2300ff41;stop-opacity:1" /><stop offset="100%25" style="stop-color:%2339ff14;stop-opacity:1" /></linearGradient></defs><path fill="none" stroke="url(%23grad1)" stroke-width="20" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"><animate attributeName="stroke-dashoffset" calcMode="spline" dur="4" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite"></animate></path></svg>');
}

/* Tema Pink - infinito fucsia */
[data-theme="pink"] .infinity-loader-svg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150"><defs><linearGradient id="grad1" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" style="stop-color:%23F7288D;stop-opacity:1" /><stop offset="100%25" style="stop-color:%238610FD;stop-opacity:1" /></linearGradient></defs><path fill="none" stroke="url(%23grad1)" stroke-width="20" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"><animate attributeName="stroke-dashoffset" calcMode="spline" dur="4" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite"></animate></path></svg>');
}

/* Alternative: True Infinity Path Animation */
.infinity-loader-alt {
    width: 140px;
    height: 70px;
    position: relative;
}

.infinity-loader-alt::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue), var(--accent-purple));
    border-radius: 50%;
    box-shadow: 0 0 20px var(--accent-cyan), 0 0 40px var(--accent-purple);
    animation: infinityPath 3s ease-in-out infinite;
}

@keyframes infinityPath {
    0%, 100% {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    12.5% {
        left: 25%;
        top: 0;
        transform: translateY(0);
    }
    25% {
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
    }
    37.5% {
        left: 75%;
        top: 100%;
        transform: translateY(-100%);
    }
    50% {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(-100%);
    }
    62.5% {
        left: 75%;
        top: 0;
        transform: translateY(0);
    }
    75% {
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
    }
    87.5% {
        left: 25%;
        top: 100%;
        transform: translateY(-100%);
    }
}

/* Matrix theme sync overlay */
[data-theme="matrix"] .sync-overlay {
    background: rgba(10, 10, 10, 0.92);
}
[data-theme="matrix"] .infinity-path::before,
[data-theme="matrix"] .infinity-path::after {
    border-color: #00ff41 transparent transparent #00ff41;
}
[data-theme="matrix"] .infinity-path::after {
    border-color: #39ff14 #39ff14 transparent transparent;
}
[data-theme="matrix"] .infinity-dot {
    background: linear-gradient(135deg, #00ff41, #39ff14);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.8), 0 0 40px rgba(57, 255, 20, 0.6);
}

/* Pink theme sync overlay */
[data-theme="pink"] .sync-overlay {
    background: rgba(248, 245, 246, 0.92);
}
[data-theme="pink"] .infinity-path::before,
[data-theme="pink"] .infinity-path::after {
    border-color: #F7288D transparent transparent #F7288D;
}
[data-theme="pink"] .infinity-path::after {
    border-color: #8610FD #8610FD transparent transparent;
}
[data-theme="pink"] .infinity-dot {
    background: linear-gradient(135deg, #F7288D, #8610FD);
    box-shadow: 0 0 20px rgba(247, 40, 141, 0.6), 0 0 40px rgba(134, 16, 253, 0.4);
}

/* Sync Result Popup */
.sync-result-popup {
    width: 400px;
    max-width: 90vw;
    padding: 40px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
}

.sync-result-popup.success {
    border-top: 4px solid var(--success);
}

.sync-result-popup.error {
    border-top: 4px solid var(--danger);
}

.sync-result-icon {
    font-size: 56px;
    margin-bottom: 20px;
    line-height: 1;
}

.sync-result-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.sync-result-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.5;
}

.sync-result-btn {
    padding: 12px 48px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sync-result-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 245, 212, 0.4);
}

.sync-result-popup.error .sync-result-btn {
    background: linear-gradient(135deg, var(--danger), #c0392b);
}

.sync-result-popup.error .sync-result-btn:hover {
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.4);
}

@media (max-width: 480px) {
    .sync-result-popup {
        padding: 32px 24px;
    }
    
    .sync-result-icon {
        font-size: 48px;
    }
    
    .sync-result-title {
        font-size: 18px;
    }
}

/* ALL SOLLECITI POPUP */
.all-solleciti-popup { width: 1024px; max-height: 85vh; display: flex; flex-direction: column; }
.all-solleciti-search { display: flex; gap: 8px; flex: 1; max-width: 400px; margin: 0 16px; }
.all-solleciti-search input, .all-solleciti-search select { flex: 1; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; }
.all-solleciti-search input:focus, .all-solleciti-search select:focus { outline: none; border-color: var(--accent-cyan); }
.all-solleciti-search input::placeholder { color: var(--text-muted); }
.all-solleciti-content { flex: 1; overflow-y: auto; }
.all-solleciti-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; }
.all-solleciti-loading p { color: var(--text-muted); }
.all-sollecito-card { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s; }
.all-sollecito-card:hover { background: var(--bg-tertiary); }
.all-sollecito-card:last-child { border-bottom: none; }
/* Riga sollecito verificato - tutte fatture saldate */
.all-sollecito-card.verified-paid { background: rgba(0, 245, 160, 0.08); border-left: 4px solid var(--success); }
.all-sollecito-card.verified-paid:hover { background: rgba(0, 245, 160, 0.15); }
.all-sollecito-date { min-width: 130px; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.all-sollecito-type { min-width: 110px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-align: center; }
.all-sollecito-type.sollecito1 { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.all-sollecito-type.sollecito2 { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
.all-sollecito-type.diffida { background: rgba(139, 0, 0, 0.3); color: #ff6b6b; }
.all-sollecito-type.generico { background: rgba(0, 187, 249, 0.2); color: var(--accent-blue); }
.all-sollecito-type.pec { border: 2px solid rgba(46, 134, 193, 0.5); }
.all-sollecito-client { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.all-sollecito-email { min-width: 180px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.all-sollecito-amount { min-width: 100px; font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--warning); text-align: right; }
.all-sollecito-status { min-width: 80px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center; }
.all-sollecito-status.sent { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.all-sollecito-status.failed { background: rgba(255, 71, 87, 0.2); color: var(--danger); }
/* Bottone verifica sollecito */
.sollecito-verify-btn { width: 32px; height: 32px; background: rgba(0, 187, 249, 0.1); border: 1px solid rgba(0, 187, 249, 0.3); border-radius: var(--radius-sm); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.sollecito-verify-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); transform: scale(1.1); }
.sollecito-verify-btn:disabled { opacity: 0.5; cursor: wait; }

/* SOLLECITO DETAIL POPUP (z-index più alto) */
.sollecito-detail-overlay { z-index: 1100 !important; }
.sollecito-detail-popup { width: 1024px; max-height: 85vh; }
.sollecito-detail-content { padding: 24px; overflow-y: auto; max-height: calc(85vh - 80px); }
.sollecito-detail-content .detail-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.sollecito-detail-content .detail-row:last-child { border-bottom: none; }
.sollecito-detail-content .detail-label { width: 140px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.sollecito-detail-content .detail-value { flex: 1; font-size: 14px; color: var(--text-primary); }
.sollecito-detail-content .detail-body { margin-top: 16px; padding: 16px; background: var(--bg-tertiary); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.sollecito-detail-content .detail-body-label { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.sollecito-detail-content .detail-body-content { font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-height: 300px; overflow-y: auto; }
.popup-view-message { width: 36px; height: 36px; background: rgba(0, 187, 249, 0.1); border: 1px solid rgba(0, 187, 249, 0.3); border-radius: var(--radius-sm); color: var(--accent-blue); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.popup-view-message:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.all-sollecito-arrow { color: var(--text-muted); font-size: 18px; }
.all-sollecito-card:hover .all-sollecito-arrow { color: var(--warning); }

/* SOLLECITO MESSAGE PREVIEW POPUP */
.sollecito-message-overlay { z-index: 1200 !important; }
.sollecito-message-popup { width: 95vw; max-width: 1200px; height: 90vh; display: flex; flex-direction: column; }
.sollecito-message-content { flex: 1; display: flex; gap: 0; overflow: hidden; }
.sollecito-message-main { flex: 1; display: flex; flex-direction: column; padding: 20px; overflow-y: auto; border-right: 1px solid var(--border-color); }
.sollecito-message-sidebar { width: 280px; padding: 20px; background: var(--bg-tertiary); overflow-y: auto; flex-shrink: 0; }
.sollecito-message-subject { margin-bottom: 16px; }
.sollecito-message-subject label, .sollecito-message-body label, .message-info-section label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.sollecito-message-subject .subject-text { padding: 12px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-primary); font-weight: 500; }
.sollecito-message-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.message-editor-readonly { flex: 1; background: white; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #333; }
.message-editor-readonly img { max-width: 100%; height: auto; }
.message-editor-readonly table { border-collapse: collapse; width: 100%; }
.message-editor-readonly td, .message-editor-readonly th { border: 1px solid #ddd; padding: 8px; }
.message-info-section { margin-bottom: 20px; }
.message-info-section .info-value { font-size: 13px; color: var(--text-primary); padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); word-break: break-all; }
.message-attachments-list { display: flex; flex-direction: column; gap: 8px; }
.message-attachment-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-primary); border: 1px solid var(--border-color); }
.message-attachment-item .attachment-icon { font-size: 18px; }
.message-attachment-item .attachment-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-attachments-list .no-attachments { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); }
.message-forward-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.forward-message-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.forward-message-btn svg { flex-shrink: 0; }

/* Massimizzazione popup anteprima messaggio */
.sollecito-message-popup.maximized {
    width: calc(100vw - 120px) !important;
    height: calc(100vh - 120px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 60px !important;
}

.sollecito-message-popup.maximized .sollecito-message-content {
    flex: 1 !important;
}

.sollecito-message-popup.maximized .sollecito-message-main {
    flex: 1 !important;
    overflow-y: auto !important;
}

.sollecito-message-popup.maximized .sollecito-message-body {
    flex: 1 !important;
    min-height: 0 !important;
}

.sollecito-message-popup.maximized .message-editor-readonly {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.sollecito-message-popup.maximized .sollecito-message-sidebar {
    flex-shrink: 0 !important;
    overflow-y: auto !important;
}

/* ============================================================
   TASKS KANBAN POPUP
   ============================================================ */
.tasks-popup { 
    width: calc(100vw - 80px); 
    max-width: 1400px; 
    height: 85vh; 
    display: flex; 
    flex-direction: column; 
}
.tasks-popup .popup-header { flex-shrink: 0; }

/* Indicatore filtro cliente nel pannello task */
.tasks-client-filter-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(155, 93, 229, 0.15);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    flex-shrink: 0;
}
.tasks-client-filter-indicator .filter-label { color: var(--text-muted); }
.tasks-client-filter-indicator .filter-value { color: var(--accent-purple); font-weight: 600; }
.tasks-client-filter-indicator .filter-clear {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.tasks-client-filter-indicator .filter-clear:hover { background: var(--danger); color: #fff; }

.tasks-header-controls { display: flex; align-items: center; gap: 12px; margin-left: 16px; }

.tasks-sort-control {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tasks-sort-control label {
    color: var(--text-muted);
    font-size: 14px;
}
.tasks-sort-control select {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.tasks-sort-control select:hover {
    border-color: var(--accent-cyan);
}
.tasks-sort-control select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
}

.tasks-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.tasks-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.tasks-search-input {
    padding: 8px 12px 8px 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 200px;
    transition: all 0.2s;
}
.tasks-search-input:hover {
    border-color: var(--accent-cyan);
}
.tasks-search-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
    background: var(--bg-secondary);
}
.tasks-search-input::placeholder {
    color: var(--text-muted);
}

.tasks-view-toggle { display: flex; background: var(--bg-tertiary); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); }
.tasks-view-btn { padding: 8px 14px; background: transparent; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; transition: all 0.2s; }
.tasks-view-btn:hover { color: var(--text-primary); }
.tasks-view-btn.active { background: var(--accent-purple); color: white; }

/* Bottone Nuovo Task */
.new-task-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--success));
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.new-task-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4);
}
.new-task-btn i {
    font-size: 12px;
}

/* New Task Popup */
.new-task-popup {
    width: 500px;
    max-width: 95vw;
}
.new-task-content {
    padding: 24px;
}
.new-task-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.new-task-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.new-task-form .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.new-task-form .form-group input,
.new-task-form .form-group textarea,
.new-task-form .form-group select {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
}
.new-task-form .form-group input:focus,
.new-task-form .form-group textarea:focus,
.new-task-form .form-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
}
.new-task-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.new-task-form .form-row .form-group {
    min-width: 0;
}
.new-task-form .form-row select {
    width: 100%;
    min-width: 0;
}
.new-task-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.new-task-actions .btn-cancel {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.new-task-actions .btn-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.new-task-actions .btn-save {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--success));
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.new-task-actions .btn-save:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4);
}
.new-task-actions .btn-save i {
    font-size: 12px;
}
.tasks-header-stats { display: flex; gap: 16px; margin-left: auto; margin-right: 16px; }
.tasks-stat { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); font-size: 12px; }
.tasks-stat-count { font-weight: 700; font-size: 14px; }
.tasks-stat.todo { color: #d4c89a; }
.tasks-stat.in-progress { color: var(--warning); }
.tasks-stat.completed { color: var(--success); }

.kanban-container { 
    flex: 1; 
    display: flex; 
    gap: 20px; 
    padding: 20px; 
    overflow-x: auto; 
    overflow-y: hidden;
}

.kanban-column { 
    flex: 1;
    min-width: 280px; 
    max-width: none;
    display: flex; 
    flex-direction: column; 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

/* Effetto magnetico sulla colonna durante il drag */
.kanban-column-body.drag-over {
    background: rgba(155, 93, 229, 0.08);
    border: 2px dashed var(--accent-purple);
    border-radius: var(--radius-md);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(155, 93, 229, 0.2), inset 0 0 20px rgba(155, 93, 229, 0.05);
}
.kanban-column-body.drag-over::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(155, 93, 229, 0.1) 0%, transparent 100%);
    border-radius: var(--radius-md);
    pointer-events: none;
    animation: magnetPulse 1s ease-in-out infinite;
}
@keyframes magnetPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.kanban-column-header { 
    padding: 16px 20px; 
    border-bottom: 1px solid var(--border-color); 
    display: flex; 
    align-items: center; 
    gap: 12px;
    flex-shrink: 0;
}
.kanban-column-icon { font-size: 20px; }
.kanban-column-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.kanban-column-count { 
    margin-left: auto; 
    min-width: 24px; 
    height: 24px; 
    padding: 0 8px;
    background: var(--bg-secondary); 
    border-radius: 12px; 
    font-size: 12px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.kanban-column.todo .kanban-column-header { border-top: 3px solid #d4c89a; }
.kanban-column.todo .kanban-column-count { background: rgba(212, 200, 154, 0.2); color: #d4c89a; }
.kanban-column.in-progress .kanban-column-header { border-top: 3px solid var(--warning); }
.kanban-column.in-progress .kanban-column-count { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.kanban-column.completed .kanban-column-header { border-top: 3px solid var(--success); }
.kanban-column.completed .kanban-column-count { background: rgba(0, 245, 160, 0.2); color: var(--success); }

.kanban-column-body { 
    flex: 1; 
    padding: 12px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px;
    position: relative;
    transition: all 0.3s ease;
    min-height: 200px;
}
.kanban-column-body::-webkit-scrollbar { width: 6px; }
.kanban-column-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.kanban-empty { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 40px 20px; 
    color: var(--text-muted); 
    font-size: 13px; 
    text-align: center;
}
.kanban-empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }

/* Task Card - Pipedrive inspired */
.task-card { 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    padding: 16px;
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
/* Card color panna per stato todo e in-progress */
.task-card.status-todo,
.task-card.status-in-progress {
    background: #fffff0;
    border-color: #e8e4c9;
}
[data-theme="light"] .task-card.status-todo,
[data-theme="light"] .task-card.status-in-progress {
    background: #fffff0;
    border-color: #d4d0b5;
}
.task-card.status-completed {
    background: rgba(0, 245, 160, 0.08);
    border-color: rgba(0, 245, 160, 0.3);
}
.task-card:hover { 
    border-color: var(--accent-purple); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}
.task-card.dragging { 
    opacity: 0.7; 
    cursor: grabbing;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}
.task-card.drag-over {
    border: 2px dashed var(--accent-purple);
}

.task-card-header { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    margin-bottom: 12px;
}
.task-card-priority { 
    width: 4px; 
    height: 100%; 
    min-height: 40px;
    border-radius: 2px; 
    flex-shrink: 0;
}
.task-card-priority.high { background: var(--danger); }
.task-card-priority.medium { background: var(--warning); }
.task-card-priority.low { background: var(--success); }

.task-card-content { flex: 1; min-width: 0; }
.task-card-title { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-primary); 
    margin-bottom: 6px;
    line-height: 1.4;
}
/* Titolo scuro per card panna */
.task-card.status-todo .task-card-title,
.task-card.status-in-progress .task-card-title { color: #333; }
.task-card.status-todo .task-card-description,
.task-card.status-in-progress .task-card-description { color: #666; }
.task-card-description { 
    font-size: 12px; 
    color: var(--text-muted); 
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-card-client { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    margin-top: 10px; 
    padding-top: 10px; 
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--accent-cyan);
}
.task-card.status-todo .task-card-client,
.task-card.status-in-progress .task-card-client { border-top-color: #d4d0b5; color: #0088aa; }
.task-card-client-icon { font-size: 14px; }

/* Due date badge */
.task-card-due { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    font-size: 11px; 
    padding: 3px 8px; 
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
.task-card-due.overdue { background: rgba(255, 71, 87, 0.2); color: var(--danger); font-weight: 600; }
.task-card-due.today { background: rgba(255, 190, 11, 0.2); color: var(--warning); font-weight: 600; }
.task-card-due.soon { background: rgba(0, 187, 249, 0.2); color: var(--accent-blue); }
.task-card.status-todo .task-card-due,
.task-card.status-in-progress .task-card-due { background: rgba(0,0,0,0.08); }

.task-card-footer { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-top: 12px; 
    padding-top: 12px; 
    border-top: 1px solid var(--border-color);
}
.task-card.status-todo .task-card-footer,
.task-card.status-in-progress .task-card-footer { border-top-color: #d4d0b5; }
.task-card-date { 
    font-size: 11px; 
    color: var(--text-muted); 
    font-family: var(--font-mono);
}
.task-card.status-todo .task-card-date,
.task-card.status-in-progress .task-card-date { color: #888; }
.task-card-time { 
    font-size: 11px; 
    padding: 3px 8px; 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.task-card-actions { 
    display: flex; 
    gap: 6px; 
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.task-card:hover .task-card-actions { opacity: 1; }
.task-action-btn { 
    width: 28px; 
    height: 28px; 
    background: var(--bg-tertiary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-sm); 
    font-size: 14px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.2s;
}
.task-action-btn:hover { background: var(--accent-purple); border-color: var(--accent-purple); }
.task-action-btn.delete:hover { background: var(--danger); border-color: var(--danger); }
.task-action-btn.next { color: var(--success); }
.task-action-btn.prev { color: var(--warning); }

/* Task nascosti (grigio e trasparente) */
.task-card.task-hidden {
    opacity: 0.5;
    filter: grayscale(60%);
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.task-card.task-hidden:hover {
    opacity: 0.7;
}

.task-card.task-hidden .task-card-title,
.task-card.task-hidden .task-card-description {
    color: var(--text-muted) !important;
}

/* Pulsante Mostra altro task nascosti */
.load-more-tasks-container {
    padding: 12px;
    text-align: center;
}

.load-more-tasks-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.load-more-tasks-btn:hover {
    opacity: 1;
    color: var(--accent-cyan);
    background: rgba(0, 245, 212, 0.05);
}

/* Notification colors based on task status */
.notification-item.task-todo {
    background: #fffff0 !important;
    border-left: 3px solid #d4c89a !important;
}
.notification-item.task-todo .notification-title,
.notification-item.task-todo .notification-sender,
.notification-item.task-todo .notification-message { color: #333 !important; }
.notification-item.task-in-progress { 
    background: rgba(255, 190, 11, 0.12) !important; 
    border-left: 3px solid var(--warning) !important;
}
.notification-item.task-completed { 
    background: rgba(0, 245, 160, 0.1) !important; 
    border-left: 3px solid var(--success) !important;
}

/* Create Task Button in Notification */
.notification-create-task-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.notification-create-task-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(155, 93, 229, 0.4);
}

/* Task Detail Popup */
.task-detail-overlay { z-index: 1150 !important; }
.task-detail-popup { width: 700px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.task-detail-header-info { display: flex; align-items: center; gap: 12px; }
.task-detail-status { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.task-detail-status.todo { background: #fffff0; color: #8b7355; border: 1px solid #d4c89a; }
.task-detail-status.in-progress { background: rgba(255, 190, 11, 0.2); color: var(--warning); }
.task-detail-status.completed { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.task-detail-content { flex: 1; padding: 0; overflow-y: auto; display: flex; flex-direction: column; }
.task-detail-main { padding: 24px; flex: 1; overflow-y: auto; }
.task-detail-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.task-detail-row:last-child { border-bottom: none; }
.task-detail-label { width: 140px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.task-detail-value { flex: 1; font-size: 14px; color: var(--text-primary); }
.task-detail-value.editable { cursor: pointer; padding: 8px; margin: -8px; border-radius: var(--radius-sm); transition: background 0.2s; }
.task-detail-value.editable:hover { background: var(--bg-tertiary); }
.task-detail-edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; opacity: 0.6; transition: all 0.2s; }
.task-detail-edit-btn:hover { color: var(--accent-purple); opacity: 1; }
.task-detail-input { width: 100%; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; }
.task-detail-input:focus { outline: none; border-color: var(--accent-purple); }
.task-detail-textarea { min-height: 80px; resize: vertical; }
.task-detail-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.task-detail-save-btn { padding: 8px 16px; background: var(--accent-purple); border: none; border-radius: var(--radius-sm); color: white; font-size: 12px; font-weight: 600; cursor: pointer; }
.task-detail-save-btn:hover { background: var(--accent-cyan); }
.task-detail-cancel-btn { padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; cursor: pointer; }

/* Timeline collassabile */
.task-timeline { margin-top: 20px; background: var(--bg-tertiary); border-radius: var(--radius-md); overflow: hidden; }
.task-timeline-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 14px 16px; 
    cursor: pointer; 
    transition: background 0.2s;
}
.task-timeline-header:hover { background: var(--bg-secondary); }
.task-timeline-title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; }
.task-timeline-toggle { 
    font-size: 12px; 
    color: var(--text-muted); 
    transition: transform 0.3s;
}
.task-timeline-toggle.open { transform: rotate(180deg); }
.task-timeline-body { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out;
    padding: 0 16px;
}
.task-timeline-body.open { 
    max-height: 500px; 
    padding: 0 16px 16px 16px;
}
.task-timeline-item { display: flex; gap: 12px; padding: 8px 0; font-size: 12px; }
.task-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-purple); flex-shrink: 0; margin-top: 4px; }
.task-timeline-content { flex: 1; }
.task-timeline-status { font-weight: 600; color: var(--text-primary); }
.task-timeline-time { color: var(--text-muted); font-family: var(--font-mono); }

/* Task Replies Section */
.task-replies-section { border-top: 1px solid var(--border-color); background: var(--bg-tertiary); padding: 20px; max-height: 300px; display: flex; flex-direction: column; }
.task-replies-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.task-replies-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.task-reply-item { padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-purple); }
.task-reply-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.task-reply-author { font-size: 12px; font-weight: 600; color: var(--accent-purple); }
.task-reply-time { font-size: 11px; color: var(--text-muted); }
.task-reply-message { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.task-reply-input-container { display: flex; gap: 12px; }
.task-reply-input { flex: 1; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; resize: none; min-height: 44px; }
.task-reply-input:focus { outline: none; border-color: var(--accent-purple); }
.task-reply-send-btn { padding: 12px 20px; background: var(--accent-purple); border: none; border-radius: var(--radius-sm); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.task-reply-send-btn:hover { background: var(--accent-cyan); transform: scale(1.02); }

/* Tasks List View */
.tasks-list-container { flex: 1; padding: 20px; overflow-y: auto; display: none; }
.tasks-list-container.active { display: block; }
.kanban-container.hidden { display: none; }
.task-list-item { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    padding: 16px 20px; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.task-list-item:hover { 
    border-color: var(--accent-purple); 
    background: var(--bg-tertiary);
}
.task-list-item.status-todo,
.task-list-item.status-in-progress { background: #fffff0; border-color: #e8e4c9; }
.task-list-item.status-todo:hover,
.task-list-item.status-in-progress:hover { border-color: var(--accent-purple); }
.task-list-item.status-completed { background: rgba(0, 245, 160, 0.08); border-left: 3px solid var(--success); }
.task-list-item.overdue { border-left: 3px solid var(--danger) !important; }
.task-list-item.due-today { border-left: 3px solid var(--warning) !important; }
.task-list-status { 
    width: 100px; 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 600; 
    text-align: center;
    flex-shrink: 0;
}
.task-list-status.todo,
.task-list-status.in-progress { background: rgba(212, 200, 154, 0.3); color: #8b7355; }
.task-list-status.completed { background: rgba(0, 245, 160, 0.2); color: var(--success); }
.task-list-priority { width: 4px; height: 40px; border-radius: 2px; flex-shrink: 0; }
.task-list-priority.high { background: var(--danger); }
.task-list-priority.medium { background: var(--warning); }
.task-list-priority.low { background: var(--success); }
.task-list-content { flex: 1; min-width: 0; }
.task-list-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.task-list-item.status-todo .task-list-title { color: #333; }
.task-list-client { font-size: 12px; color: var(--accent-cyan); }
.task-list-item.status-todo .task-list-client { color: #0088aa; }
.task-list-date { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); width: 120px; text-align: right; flex-shrink: 0; }
.task-list-item.status-todo .task-list-date { color: #888; }
.task-list-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ACCESS LOGS POPUP */
.access-logs-popup { width: 1200px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.access-logs-content { flex: 1; padding: 24px; overflow-y: auto; }

/* Stats Cards */
.access-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; padding: 20px; background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.access-stat-card { text-align: center; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-top: 3px solid var(--accent-cyan); }
.access-stat-card.success { border-top-color: var(--success); }
.access-stat-card.failed { border-top-color: var(--danger); }
.stat-value { font-size: 32px; font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Filters */
.access-filters { background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px; margin-bottom: 24px; }
.access-filters h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.filters-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.filter-group input, .filter-group select { padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; }
.filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--accent-cyan); }
.filters-actions { display: flex; gap: 12px; }
.filter-btn { padding: 10px 20px; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.filter-btn.primary { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color: white; }
.filter-btn.primary:hover { opacity: 0.9; transform: translateY(-1px); }
.filter-btn.secondary { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.filter-btn.secondary:hover { border-color: var(--accent-cyan); color: var(--text-primary); }

/* Table */
.access-table-container { background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; }
.access-table { width: 100%; border-collapse: collapse; }
.access-table thead { background: var(--bg-secondary); }
.access-table th { padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); }
.access-table td { padding: 14px 16px; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.access-table tbody tr:hover { background: var(--bg-secondary); }
.access-table tbody tr:last-child td { border-bottom: none; }
.access-table .user-agent { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11px; }
.access-badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.access-badge.success { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.access-badge.failed { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.access-badge.login { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.access-badge.logout { background: rgba(156, 163, 175, 0.15); color: var(--text-muted); }

@media (max-width: 768px) {
    .access-stats { grid-template-columns: repeat(2, 1fr); }
    .filters-row { grid-template-columns: 1fr 1fr; }

    /* Client detail responsive - bottoni sotto il campo */
    .client-detail-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .client-field {
        grid-column: span 1;
    }

    .client-field.full,
    .client-field.small {
        grid-column: span 1;
    }

    /* Container dei bottoni VIES/Email/Maps - stack verticale su mobile */
    .client-action-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Bottoni azione cliente - larghezza piena su mobile */
    .vies-check-btn,
    .send-email-btn,
    .maps-btn {
        width: 100%;
        justify-content: center;
    }

    /* Invoice email status - su mobile l'icona si posiziona a destra della data */
    .invoice-email-status {
        order: -1;
        margin-left: 4px;
        margin-right: 0;
    }
}

/* SETUP POPUP */
.setup-popup { width: 1024px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.setup-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); padding: 0 24px; }
.setup-tab { padding: 16px 24px; background: transparent; border: none; color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.setup-tab:hover { color: var(--text-primary); }
.setup-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.setup-content { flex: 1; padding: 24px; overflow-y: auto; }
.setup-section { display: none; }
.setup-section.active { display: block; }

/* Form fields */
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-label .required { color: var(--danger); }
.form-input { width: 100%; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; }
.form-input:focus { outline: none; border-color: var(--accent-cyan); }
.form-input::placeholder { color: var(--text-muted); }
.form-input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-select { width: 100%; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; cursor: pointer; }
.form-select:focus { outline: none; border-color: var(--accent-cyan); }

/* Searchable Select Component */
.searchable-select { position: relative; width: 100%; }
.searchable-select-display { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; cursor: pointer; transition: border-color 0.2s; }
.searchable-select-display:hover { border-color: var(--accent-cyan); }
.searchable-select-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchable-select-arrow { color: var(--text-muted); font-size: 10px; margin-left: 8px; transition: transform 0.2s; }
.searchable-select-dropdown.active + .searchable-select-display .searchable-select-arrow,
.searchable-select:has(.searchable-select-dropdown.active) .searchable-select-arrow { transform: rotate(180deg); }
.searchable-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 1000; display: none; max-height: 300px; overflow: hidden; }
.searchable-select-dropdown.active { display: block; }
.searchable-select-search { width: 100%; padding: 12px 14px; background: var(--bg-tertiary); border: none; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; outline: none; }
.searchable-select-search::placeholder { color: var(--text-muted); }
.searchable-select-options { max-height: 240px; overflow-y: auto; }
.searchable-select-option { padding: 10px 14px; cursor: pointer; transition: background 0.15s; color: var(--text-primary); }
.searchable-select-option:hover { background: var(--bg-tertiary); }
.searchable-select-option.selected { background: rgba(0, 245, 212, 0.1); color: var(--accent-cyan); }
.searchable-select-no-results { padding: 12px 14px; color: var(--text-muted); font-style: italic; text-align: center; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-hint { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.form-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.form-btn { padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.form-btn.primary { background: var(--gradient-primary); border: none; color: var(--bg-primary); }
.form-btn.primary:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3); }
.form-btn.secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.form-btn.secondary:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.form-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* Test section */
.test-section { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 20px; margin-top: 24px; }
.test-section h4 { margin: 0 0 16px 0; font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.test-row { display: flex; gap: 12px; align-items: flex-end; }
.test-row .form-group { flex: 1; margin-bottom: 0; }
.test-result { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; display: none; }
.test-result.success { background: rgba(0, 245, 160, 0.1); border: 1px solid var(--success); color: var(--success); display: block; }
.test-result.error { background: rgba(255, 71, 87, 0.1); border: 1px solid var(--danger); color: var(--danger); display: block; }
.test-result.loading { background: rgba(0, 187, 249, 0.1); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); display: block; }

/* PHPMailer not installed warning */
.phpmailer-warning { background: rgba(255, 190, 11, 0.1); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: 20px; margin-bottom: 24px; }
.phpmailer-warning h4 { color: var(--warning); margin: 0 0 12px 0; display: flex; align-items: center; gap: 8px; }
.phpmailer-warning p { color: var(--text-secondary); margin: 0 0 12px 0; font-size: 13px; }
.phpmailer-warning code { background: var(--bg-primary); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.phpmailer-warning ul { margin: 12px 0; padding-left: 20px; font-size: 13px; color: var(--text-secondary); }
.phpmailer-warning li { margin: 4px 0; }

/* PEC Notice */
.pec-notice { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, rgba(46, 134, 193, 0.15), rgba(155, 89, 182, 0.1)); border: 1px solid rgba(46, 134, 193, 0.4); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 20px; }
.pec-icon { font-size: 32px; line-height: 1; }
.pec-notice-content strong { display: block; color: var(--text-primary); font-size: 14px; margin-bottom: 4px; }
.pec-notice-content p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.pec-test { border-color: rgba(46, 134, 193, 0.3); background: rgba(46, 134, 193, 0.05); }

/* Last test info */
.last-test-info { font-size: 12px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.last-test-info .status { font-weight: 500; }
.last-test-info .status.ok { color: var(--success); }
.last-test-info .status.error { color: var(--danger); }

/* Template Editor */
.template-editor { margin-top: 20px; }
.template-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.template-header h4 { margin: 0; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.template-badge { font-size: 11px; padding: 4px 8px; background: var(--bg-tertiary); border-radius: 4px; color: var(--text-muted); }
.template-variables { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; }
.template-variables h5 { margin: 0 0 10px 0; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.variables-list { display: flex; flex-wrap: wrap; gap: 8px; }
.variable-tag { background: var(--bg-primary); border: 1px solid var(--border-color); padding: 4px 10px; border-radius: 4px; font-family: monospace; font-size: 12px; color: var(--accent-cyan); cursor: pointer; transition: all 0.2s; }
.variable-tag:hover { border-color: var(--accent-cyan); background: rgba(0, 245, 212, 0.1); }
.template-subject { margin-bottom: 16px; }
.template-body { margin-bottom: 20px; }
.template-body .tox-tinymce { border-radius: var(--radius-sm) !important; border-color: var(--border-color) !important; }
.template-preview { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 16px; margin-top: 16px; }
.template-preview h5 { margin: 0 0 12px 0; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; }
.template-preview-content { background: #fff; color: #333; padding: 20px; border-radius: 4px; max-height: 300px; overflow-y: auto; }
.template-actions { display: flex; gap: 12px; margin-top: 20px; }
.template-saved-msg { color: var(--success); font-size: 13px; display: none; align-items: center; gap: 6px; }
.template-saved-msg.show { display: flex; }

/* Custom Dialog System */
.custom-dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
.custom-dialog-overlay.active { opacity: 1; visibility: visible; }
.custom-dialog { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-width: 420px; width: 90%; transform: scale(0.9) translateY(-20px); transition: transform 0.2s ease; }
.custom-dialog-overlay.active .custom-dialog { transform: scale(1) translateY(0); }
.custom-dialog-header { padding: 20px 24px 0; text-align: center; }
.custom-dialog-icon { font-size: 48px; margin-bottom: 12px; }
.custom-dialog-icon.success { color: var(--success); }
.custom-dialog-icon.error { color: var(--danger); }
.custom-dialog-icon.warning { color: var(--warning); }
.custom-dialog-icon.info { color: var(--accent-cyan); }
.custom-dialog-icon.pec { color: #2e86c1; }
.custom-dialog-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; }
.custom-dialog-body { padding: 16px 24px; text-align: center; }
.custom-dialog-message { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.custom-dialog-message strong { color: var(--text-primary); }
.custom-dialog-detail { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 12px; font-size: 13px; color: var(--text-primary); word-break: break-all; }
.custom-dialog-footer { padding: 16px 24px 20px; display: flex; gap: 12px; justify-content: center; }
.custom-dialog-btn { padding: 10px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; min-width: 100px; }
.custom-dialog-btn.primary { background: var(--accent-cyan); color: var(--bg-primary); }
.custom-dialog-btn.primary:hover { background: #00d4aa; transform: translateY(-1px); }
.custom-dialog-btn.danger { background: var(--danger); color: #fff; }
.custom-dialog-btn.danger:hover { background: #c0392b; transform: translateY(-1px); }
.custom-dialog-btn.pec { background: linear-gradient(135deg, #2e86c1, #1a5276); color: #fff; }
.custom-dialog-btn.pec:hover { background: linear-gradient(135deg, #3498db, #2e86c1); transform: translateY(-1px); }
.custom-dialog-btn.secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.custom-dialog-btn.secondary:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* Bottone Sollecita */
.control-btn.sollecita { background: linear-gradient(135deg, #9b59b6, #8e44ad); border: none; color: #fff; font-weight: 600; }
.control-btn.sollecita:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4); color: #fff; }
.control-btn.sollecita:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Bottone Invia Mail Selezionate */
.control-btn.send-mail-selected { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); border: none; color: #fff; font-weight: 600; }
.control-btn.send-mail-selected:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 245, 212, 0.4); color: #fff; }

/* Checkbox fatture nel popup */
.invoice-card .invoice-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-cyan); margin-right: 8px; flex-shrink: 0; }
.invoice-card { display: flex; align-items: center; }

/* Sollecito Composer Popup */
.sollecito-popup { width: 1100px; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; }
.sollecito-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
.sollecito-header-left { flex: 1; }
.sollecito-header-left h3 { margin: 0 0 8px 0; display: flex; align-items: center; gap: 10px; }
.sollecito-header-left .client-info { font-size: 13px; color: var(--text-muted); }
.sollecito-header .popup-header-right { display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.sollecito-type-selector { display: flex; gap: 8px; margin-top: 12px; }
.sollecito-type-btn { padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: all 0.2s; }
.sollecito-type-btn:hover { border-color: var(--accent-cyan); }
.sollecito-type-btn.active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--bg-primary); font-weight: 600; }
.sollecito-type-btn.type-2 { background: rgba(231, 76, 60, 0.1); border-color: var(--danger); color: var(--danger); }
.sollecito-type-btn.type-2.active { background: var(--danger); color: #fff; }
.sollecito-type-btn.type-diffida { background: rgba(139, 0, 0, 0.1); border-color: #8b0000; color: #8b0000; }
.sollecito-type-btn.type-diffida.active { background: #8b0000; color: #fff; }
.sollecito-type-btn.type-generico { background: rgba(0, 187, 249, 0.1); border-color: var(--accent-blue); color: var(--accent-blue); }
.sollecito-type-btn.type-generico.active { background: var(--accent-blue); color: #fff; }

.sollecito-content { flex: 1; display: grid; grid-template-columns: 300px 1fr; gap: 0; overflow: hidden; }
.sollecito-sidebar { background: var(--bg-tertiary); padding: 20px; overflow-y: auto; border-right: 1px solid var(--border-color); }
.sollecito-sidebar h4 { margin: 0 0 12px 0; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.sollecito-invoices-list { background: var(--bg-primary); border-radius: var(--radius-sm); max-height: 200px; overflow-y: auto; margin-bottom: 20px; }
.sollecito-invoice-item { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.sollecito-invoice-item:last-child { border-bottom: none; }
.sollecito-invoice-item .inv-num { color: var(--accent-cyan); font-weight: 500; }
.sollecito-invoice-item .inv-amount { color: var(--danger); font-weight: 600; }
.sollecito-total { background: var(--bg-primary); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 20px; }
.sollecito-total-row { display: flex; justify-content: space-between; font-size: 14px; }
.sollecito-total-row.main { font-weight: 600; font-size: 16px; color: var(--danger); }

.sollecito-attachments { margin-top: 16px; }
.sollecito-attachments h4 { display: flex; align-items: center; gap: 8px; }
.attachment-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-primary); }
.attachment-status.ready { color: var(--success); }
.attachment-status.loading { color: var(--warning); }
.attachment-list { background: var(--bg-primary); border-radius: var(--radius-sm); max-height: 150px; overflow-y: auto; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.attachment-item:last-child { border-bottom: none; }
.attachment-item .att-icon { color: var(--danger); }
.attachment-item .att-name { flex: 1; color: var(--text-secondary); }
.attachment-item .att-size { color: var(--text-muted); }

.sollecito-main { display: flex; flex-direction: column; overflow: hidden; }
.sollecito-editor-section { flex: 1; padding: 20px; overflow-y: auto; }
.sollecito-subject { margin-bottom: 16px; }
.sollecito-subject input { width: 100%; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; }
.sollecito-subject input:focus { outline: none; border-color: var(--accent-cyan); }
.sollecito-editor-wrapper { height: 350px; }

.sollecito-footer { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 24px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.sollecito-footer-left { display: flex; align-items: flex-end; gap: 20px; }
.send-channel-selector { font-size: 13px; }
.channel-select { width: 200px; padding: 10px 12px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.channel-select:focus { outline: none; border-color: var(--accent-cyan); }
.channel-select.pec-selected { border-color: #9b59b6; background: rgba(155, 89, 182, 0.1); }
.recipient-info { font-size: 13px; color: var(--text-muted); }
.recipient-info strong { color: var(--text-primary); }
.sollecito-footer-right { display: flex; gap: 12px; align-items: flex-end; }
.sollecito-send-btn { padding: 12px 32px; background: linear-gradient(135deg, #9b59b6, #8e44ad); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.sollecito-send-btn:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4); }
.sollecito-send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.sollecito-send-btn.pec-mode { background: linear-gradient(135deg, #2e86c1, #1a5276); }
.sollecito-send-btn.pec-mode:hover { box-shadow: 0 4px 16px rgba(46, 134, 193, 0.4); }

/* Massimizzazione popup sollecito */
.sollecito-popup.maximized {
    width: calc(100vw - 120px) !important;
    height: calc(100vh - 120px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 60px !important;
}

.sollecito-popup.maximized .sollecito-content {
    flex: 1 !important;
}

/* Sidebar espansa */
.sollecito-popup.maximized .sollecito-sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sollecito-popup.maximized .sollecito-sidebar h4 {
    flex-shrink: 0 !important;
}

/* Lista fatture espansa */
.sollecito-popup.maximized .sollecito-invoices-list {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    margin-bottom: 16px !important;
}

/* Totale rimane fisso */
.sollecito-popup.maximized .sollecito-total {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

/* Sezione allegati espansa */
.sollecito-popup.maximized .sollecito-attachments {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.sollecito-popup.maximized .sollecito-attachments h4 {
    flex-shrink: 0 !important;
}

/* Lista allegati espansa */
.sollecito-popup.maximized .attachment-list {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Main editor area */
.sollecito-popup.maximized .sollecito-main {
    flex: 1 !important;
}

.sollecito-popup.maximized .sollecito-editor-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sollecito-popup.maximized .sollecito-subject {
    flex-shrink: 0 !important;
}

.sollecito-popup.maximized .sollecito-editor-wrapper {
    height: auto !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.sollecito-popup.maximized .sollecito-editor-wrapper iframe {
    height: 100% !important;
    flex: 1 !important;
}

.sollecito-popup.maximized .sollecito-editor-wrapper .tox-tinymce {
    height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.sollecito-popup.maximized .sollecito-editor-wrapper .tox-editor-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.sollecito-popup.maximized .sollecito-editor-wrapper .tox-sidebar-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* STATES */
.loading-state, .error-state, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; gap: 20px; text-align: center; }
.loading-icon { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } }
.state-title { font-size: 20px; font-weight: 600; color: var(--text-secondary); }
.state-message { color: var(--text-muted); max-width: 400px; }
.retry-btn { margin-top: 8px; padding: 12px 32px; background: var(--gradient-primary); border: none; border-radius: var(--radius-md); color: var(--bg-primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.app-footer { padding: 20px 40px; text-align: center; border-top: 1px solid var(--border-color); background: var(--bg-secondary); position: relative; z-index: 1; }
.app-footer p { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.hidden { display: none !important; }

/* Scroll buttons */
.scroll-buttons { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 8px; z-index: 99; transition: opacity 0.3s ease, visibility 0.3s ease; }
.scroll-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; }
.scroll-btn:hover { background: var(--accent-cyan); color: var(--bg-primary); border-color: var(--accent-cyan); transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 245, 212, 0.3); }
[data-theme="light"] .scroll-btn:hover { color: #ffffff; }
.scroll-btn:active { transform: scale(0.95); }
.scroll-buttons.hidden-by-popup { opacity: 0; visibility: hidden; pointer-events: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ============================================================
   FONT SIZE SCALING (ACCESSIBILITÀ)
   Queste regole sono alla FINE del file per avere priorità
   su tutte le media query responsive
   ============================================================ */

/* A (normale) - dimensioni fisse per sovrascrivere media query */
html[data-font-size="normal"] .client-name { font-size: 14px !important; }
html[data-font-size="normal"] .client-vat { font-size: 11px !important; }
html[data-font-size="normal"] .total-box { font-size: 12px !important; }
html[data-font-size="normal"] .month-box { font-size: 14px !important; }
html[data-font-size="normal"] .popup h3 { font-size: 18px !important; }
html[data-font-size="normal"] .popup { font-size: 14px !important; }
html[data-font-size="normal"] .expand-table th,
html[data-font-size="normal"] .expand-table td { font-size: 12px !important; }
html[data-font-size="normal"] .legend-month { font-size: 11px !important; }
html[data-font-size="normal"] .legend-total { font-size: 11px !important; }
html[data-font-size="normal"] .year-btn { font-size: 12px !important; }

/* A+ (large) - incremento di 2px rispetto a normal */
html[data-font-size="large"] .client-name { font-size: 16px !important; }
html[data-font-size="large"] .client-vat { font-size: 13px !important; }
html[data-font-size="large"] .total-box { font-size: 14px !important; }
html[data-font-size="large"] .month-box { font-size: 16px !important; }
html[data-font-size="large"] .popup h3 { font-size: 20px !important; }
html[data-font-size="large"] .popup { font-size: 16px !important; }
html[data-font-size="large"] .expand-table th,
html[data-font-size="large"] .expand-table td { font-size: 14px !important; }
html[data-font-size="large"] .legend-month { font-size: 13px !important; }
html[data-font-size="large"] .legend-total { font-size: 13px !important; }
html[data-font-size="large"] .year-btn { font-size: 14px !important; }

/* A++ (xlarge) - incremento di 4px rispetto a normal */
html[data-font-size="xlarge"] .client-name { font-size: 18px !important; }
html[data-font-size="xlarge"] .client-vat { font-size: 15px !important; }
html[data-font-size="xlarge"] .total-box { font-size: 16px !important; }
html[data-font-size="xlarge"] .month-box { font-size: 18px !important; }
html[data-font-size="xlarge"] .popup h3 { font-size: 22px !important; }
html[data-font-size="xlarge"] .popup { font-size: 18px !important; }
html[data-font-size="xlarge"] .expand-table th,
html[data-font-size="xlarge"] .expand-table td { font-size: 16px !important; }
html[data-font-size="xlarge"] .legend-month { font-size: 15px !important; }
html[data-font-size="xlarge"] .legend-total { font-size: 15px !important; }
html[data-font-size="xlarge"] .year-btn { font-size: 16px !important; }
html[data-font-size="xlarge"] .company-menu-action { font-size: 16px !important; padding: 14px 16px !important; }
html[data-font-size="xlarge"] .control-btn { font-size: 15px !important; padding: 10px 18px !important; }

/* ============================================================
   ANALYSIS SECTION
   ============================================================ */

.analysis-section {
    padding: 40px 80px;
    padding-top: 100px;
    flex: 1;
    overflow-y: auto;
}

.analysis-section.hidden {
    display: none;
}

#analysisContentArea {
    position: relative;
    min-height: 400px;
}

.analysis-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.quarter-section {
    width: 100%;
}

.quarter-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.quarter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.month-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.2s;
}

.month-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.month-card-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.month-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.month-card-body {
    padding: 8px 0;
}

.bar-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 12px;
    height: 200px;
    padding: 16px 8px;
}

.bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bar-container {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 4px;
    position: relative;
}

.bar {
    width: 100%;
    min-height: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    position: relative;
}

.bar-sales {
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
}

.bar-reversed {
    background: linear-gradient(180deg, #f39c12 0%, #e67e22 100%);
}

.bar-purchases {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
}

.bar-paid {
    background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
}

.bar-unpaid {
    background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
}

.bar-cash {
    /* Il colore viene impostato dinamicamente in JavaScript */
}

.bar-profit {
    /* Il colore viene impostato dinamicamente in JavaScript */
}

.bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.bar-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Annual Summary Card */
.annual-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--border-color);
}

.annual-card {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.1);
}

.annual-bar-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 32px;
    align-items: flex-end;
    height: 300px;
    padding: 24px 16px;
}

.annual-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.annual-bar-container {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 8px;
}

.annual-bar-container .bar {
    transform-origin: bottom;
    transform: scaleY(0);
    opacity: 0;
    transition: none;
}

/* Animazione attivata quando visibile */
.annual-card.animate .annual-bar-container .bar {
    animation: fillLiquid 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Delay progressivo per effetto cascata */
.annual-card.animate .annual-bar-item:nth-child(1) .bar { animation-delay: 0s; }
.annual-card.animate .annual-bar-item:nth-child(2) .bar { animation-delay: 0.1s; }
.annual-card.animate .annual-bar-item:nth-child(3) .bar { animation-delay: 0.2s; }
.annual-card.animate .annual-bar-item:nth-child(4) .bar { animation-delay: 0.3s; }
.annual-card.animate .annual-bar-item:nth-child(5) .bar { animation-delay: 0.4s; }
.annual-card.animate .annual-bar-item:nth-child(6) .bar { animation-delay: 0.5s; }
.annual-card.animate .annual-bar-item:nth-child(7) .bar { animation-delay: 0.6s; }

@keyframes fillLiquid {
    0% {
        transform: scaleY(0);
        opacity: 0.7;
    }
    70% {
        transform: scaleY(1.05);
        opacity: 1;
    }
    85% {
        transform: scaleY(0.98);
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.annual-bar-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.annual-bar-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Analysis Header Tabs */
.analysis-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.analysis-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: var(--radius-md);
}

.analysis-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.analysis-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.analysis-tab.active {
    background: var(--gradient-primary);
    color: var(--bg-primary);
}

/* Studi di Settore Styles */
#studiSettoreArea {
    position: relative;
    min-height: 400px;
}

.studi-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.studi-section {
    width: 100%;
}

.studi-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.studi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* Macro-aree Grid */
.studi-macroaree-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.macroarea-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    transition: all 0.2s;
}

.macroarea-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.macroarea-card.nord { border-top: 4px solid #3498db; }
.macroarea-card.centro { border-top: 4px solid #f39c12; }
.macroarea-card.sud { border-top: 4px solid #e74c3c; }

.macroarea-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.macroarea-amount {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    margin-bottom: 8px;
}

.macroarea-percentage {
    font-size: 14px;
    color: var(--text-muted);
}

.macroarea-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-top: 16px;
    overflow: hidden;
}

.macroarea-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.macroarea-card.nord .macroarea-bar-fill { background: #3498db; }
.macroarea-card.centro .macroarea-bar-fill { background: #f39c12; }
.macroarea-card.sud .macroarea-bar-fill { background: #e74c3c; }

/* Regioni Grid */
.studi-regioni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.regione-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.regione-card:hover {
    border-color: var(--accent-cyan);
}

.regione-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
}

.regione-info {
    flex: 1;
    min-width: 0;
}

.regione-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.regione-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.regione-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.regione-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.regione-amount {
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    font-weight: 600;
}

.regione-percentage {
    color: var(--text-muted);
}

/* Regione card colors by macroarea */
.regione-card.nord { border-left: 3px solid #3498db; }
.regione-card.centro { border-left: 3px solid #f39c12; }
.regione-card.sud { border-left: 3px solid #e74c3c; }

/* Provincie Grid */
.studi-provincie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.provincia-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.provincia-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

.provincia-card.zero-amount {
    opacity: 0.5;
}

.provincia-card[data-macroarea="nord"] { border-top: 3px solid #3498db; }
.provincia-card[data-macroarea="centro"] { border-top: 3px solid #f39c12; }
.provincia-card[data-macroarea="sud"] { border-top: 3px solid #e74c3c; }

.provincia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.provincia-sigla {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.provincia-tooltip {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.provincia-tooltip:hover {
    opacity: 1;
}

.provincia-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.provincia-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    background: var(--gradient-primary);
}

.provincia-bar-fill.nord { background: #3498db; }
.provincia-bar-fill.centro { background: #f39c12; }
.provincia-bar-fill.sud { background: #e74c3c; }

.provincia-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.provincia-amount {
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    font-weight: 600;
}

.provincia-percentage {
    color: var(--text-muted);
}

/* Tooltip popup for provincia name */
.provincia-tooltip-popup {
    position: fixed !important;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-cyan);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 245, 212, 0.5), 0 0 0 1px rgba(0, 245, 212, 0.3);
    z-index: 999999 !important;
    animation: fadeIn 0.2s ease forwards;
    pointer-events: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Provincia Aziende Popup */
.provincia-aziende-overlay {
    z-index: 1300 !important;
}

.provincia-aziende-popup {
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.provincia-aziende-totale-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.provincia-aziende-totale-label {
    font-size: 14px;
    color: var(--text-muted);
}

.provincia-aziende-totale-value {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
}

.provincia-aziende-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.provincia-aziende-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provincia-aziende-loading,
.provincia-aziende-empty,
.provincia-aziende-error {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.provincia-aziende-loading .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

.provincia-aziende-error {
    color: var(--danger);
}

.provincia-azienda-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.provincia-azienda-item:hover {
    border-color: var(--accent-cyan);
    transform: translateX(4px);
}

.provincia-azienda-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.provincia-azienda-item:nth-child(1) .provincia-azienda-rank {
    background: linear-gradient(135deg, #ffd700, #ffb800);
    color: #1a1a2e;
}

.provincia-azienda-item:nth-child(2) .provincia-azienda-rank {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #1a1a2e;
}

.provincia-azienda-item:nth-child(3) .provincia-azienda-rank {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    color: #1a1a2e;
}

.provincia-azienda-info {
    flex: 1;
    min-width: 0;
}

.provincia-azienda-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provincia-azienda-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.provincia-azienda-amount {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
}

.provincia-azienda-percentage {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Estero Card */
.estero-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

.estero-total {
    text-align: center;
}

.estero-amount {
    font-size: 36px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
}

.estero-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

.estero-percentage-ring {
    width: 100px;
    height: 100px;
    position: relative;
}

.estero-percentage-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.estero-countries {
    flex: 1;
}

.estero-countries-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.estero-countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.country-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.country-item:hover {
    background: var(--bg-secondary);
    transform: translateX(4px);
    border-left: 2px solid var(--accent-purple);
}

.country-name {
    color: var(--text-primary);
}

.country-amount {
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    font-weight: 600;
}

/* ===== KPI Dashboard ===== */
.kpi-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 8px 0;
}

.kpi-section {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-primary);
}

.kpi-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-primary);
}

.kpi-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.kpi-metric-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-primary);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)) 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.kpi-metric-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kpi-metric-value {
    font-size: 24px;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    font-weight: 700;
    margin-bottom: 8px;
}

.kpi-metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.kpi-metric-delta.up {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.kpi-metric-delta.down {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.kpi-metric-delta.neutral {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

/* Aging Bar */
.kpi-aging-bar {
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    margin-bottom: 16px;
    background: var(--bg-secondary);
}

.kpi-aging-segment {
    height: 100%;
    transition: width 0.6s ease;
    position: relative;
}

.kpi-aging-segment:nth-child(1) { background: #f39c12; }
.kpi-aging-segment:nth-child(2) { background: #e67e22; }
.kpi-aging-segment:nth-child(3) { background: #e74c3c; }
.kpi-aging-segment:nth-child(4) { background: #c0392b; }

.kpi-aging-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.kpi-aging-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-aging-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kpi-aging-info {
    display: flex;
    flex-direction: column;
}

.kpi-aging-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.kpi-aging-value {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 600;
}

.kpi-aging-count {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Top Clients Table */
.kpi-clients-table {
    width: 100%;
    border-collapse: collapse;
}

.kpi-clients-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
}

.kpi-clients-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.kpi-clients-table tr:hover td {
    background: var(--bg-secondary);
}

.kpi-clients-table .mono {
    font-family: var(--font-mono);
}

.kpi-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.kpi-status-dot.paid { background: #2ecc71; }
.kpi-status-dot.partial { background: #f39c12; }
.kpi-status-dot.unpaid { background: #e74c3c; }

/* Monthly Trend Chart */
.kpi-monthly-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    align-items: end;
    min-height: 200px;
    padding: 16px 0;
}

.kpi-month-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kpi-month-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 160px;
    width: 100%;
    justify-content: center;
}

.kpi-bar {
    width: 45%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.6s ease;
}

.kpi-bar.revenue {
    background: linear-gradient(180deg, var(--accent-cyan), rgba(52, 152, 219, 0.6));
}

.kpi-bar.collected {
    background: linear-gradient(180deg, #2ecc71, rgba(46, 204, 113, 0.6));
}

.kpi-month-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-trend-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
}

.kpi-trend-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.kpi-trend-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.kpi-trend-legend-dot.revenue {
    background: var(--accent-cyan);
}

.kpi-trend-legend-dot.collected {
    background: #2ecc71;
}

/* Payment Methods */
.kpi-payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-payment-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-primary);
    text-align: center;
}

.kpi-payment-name {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.kpi-payment-amount {
    font-size: 22px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 4px;
}

.kpi-payment-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.kpi-payment-split-bar {
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    background: var(--bg-secondary);
}

.kpi-payment-split-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    transition: width 0.6s ease;
}

.kpi-payment-split-segment.stripe {
    background: linear-gradient(90deg, #635bff, #7a73ff);
}

.kpi-payment-split-segment.cc {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.kpi-no-data {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* KPI Responsive */
@media (max-width: 1200px) {
    .kpi-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-aging-legend {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kpi-metrics-grid {
        grid-template-columns: 1fr;
    }
    .kpi-aging-legend {
        grid-template-columns: 1fr;
    }
    .kpi-monthly-chart {
        grid-template-columns: repeat(6, 1fr);
    }
    .kpi-payment-methods-grid {
        grid-template-columns: 1fr;
    }
    .kpi-clients-table {
        font-size: 12px;
    }
    .kpi-clients-table th,
    .kpi-clients-table td {
        padding: 6px 8px;
    }
    .kpi-section {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .kpi-metric-value {
        font-size: 20px;
    }
    .kpi-monthly-chart {
        grid-template-columns: repeat(4, 1fr);
    }
    .kpi-month-bars {
        height: 120px;
    }
}

/* ============================== */
/* Trend Charts                   */
/* ============================== */

.trend-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0;
}

.trend-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.trend-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

/* Grafici a barre comuni */
.trend-chart {
    display: grid;
    gap: 8px;
    align-items: end;
    min-height: 220px;
    padding: 16px 0;
}

.trend-chart.cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

.trend-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.trend-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 180px;
    width: 100%;
    justify-content: center;
}

.trend-bar {
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.6s ease;
    position: relative;
}

.trend-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.trend-month-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* YoY — 4 barre per colonna */
.trend-yoy-bars {
    height: 180px;
}

.trend-yoy-bars .trend-bar {
    width: 22%;
    max-width: 18px;
}

.trend-bar.rev-current {
    background: linear-gradient(180deg, var(--accent-cyan), rgba(52, 152, 219, 0.6));
}

.trend-bar.rev-previous {
    background: linear-gradient(180deg, rgba(160, 170, 185, 0.7), rgba(160, 170, 185, 0.35));
}

.trend-bar.profit-current {
    background: linear-gradient(180deg, #2ecc71, rgba(46, 204, 113, 0.6));
}

.trend-bar.profit-previous {
    background: linear-gradient(180deg, rgba(130, 155, 130, 0.7), rgba(130, 155, 130, 0.35));
}

/* Cumulativo — 2 barre per colonna */
.trend-cumulative-bars {
    height: 180px;
}

.trend-cumulative-bars .trend-bar {
    width: 40%;
    max-width: 28px;
}

.trend-bar.cum-current {
    background: linear-gradient(180deg, var(--accent-cyan), rgba(52, 152, 219, 0.6));
}

.trend-bar.cum-previous {
    background: linear-gradient(180deg, rgba(160, 170, 185, 0.7), rgba(160, 170, 185, 0.35));
}

/* Multi-anno — 3 barre per colonna */
.trend-multi-bars {
    height: 200px;
}

.trend-multi-bars .trend-bar {
    width: 28%;
    max-width: 24px;
}

.trend-bar.multi-revenue {
    background: linear-gradient(180deg, var(--accent-cyan), rgba(52, 152, 219, 0.6));
}

.trend-bar.multi-purchases {
    background: linear-gradient(180deg, #e74c3c, rgba(231, 76, 60, 0.6));
}

.trend-bar.multi-profit {
    background: linear-gradient(180deg, #2ecc71, rgba(46, 204, 113, 0.6));
}

.trend-year-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Legenda trend */
.trend-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.trend-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.trend-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.trend-legend-dot.rev-current { background: var(--accent-cyan); }
.trend-legend-dot.rev-previous { background: rgba(160, 170, 185, 0.7); }
.trend-legend-dot.profit-current { background: #2ecc71; }
.trend-legend-dot.profit-previous { background: rgba(130, 155, 130, 0.7); }
.trend-legend-dot.cum-current { background: var(--accent-cyan); }
.trend-legend-dot.cum-previous { background: rgba(160, 170, 185, 0.7); }
.trend-legend-dot.multi-revenue { background: var(--accent-cyan); }
.trend-legend-dot.multi-purchases { background: #e74c3c; }
.trend-legend-dot.multi-profit { background: #2ecc71; }

/* Trend Responsive */
@media (max-width: 1200px) {
    .trend-chart.cols-12 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .trend-chart.cols-12 {
        grid-template-columns: repeat(6, 1fr);
    }
    .trend-bars {
        height: 140px;
    }
    .trend-section {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .trend-chart.cols-12 {
        grid-template-columns: repeat(4, 1fr);
    }
    .trend-bars {
        height: 120px;
    }
    .trend-bar-value {
        font-size: 8px;
    }
}

/* ============================== */
/* Forecast (Previsione Incassi)  */
/* ============================== */

.forecast-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0;
}

.forecast-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.forecast-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

/* Metrics Grid */
.forecast-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.forecast-metric-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border-top: 3px solid var(--primary);
    transition: transform 0.2s, box-shadow 0.2s;
}
.forecast-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.forecast-metric-card.accent-cyan    { border-top-color: #00d2ff; }
.forecast-metric-card.accent-red     { border-top-color: #e74c3c; }
.forecast-metric-card.accent-green   { border-top-color: #2ecc71; }
.forecast-metric-card.accent-blue    { border-top-color: #3498db; }
.forecast-metric-card.accent-purple  { border-top-color: #9b59b6; }
.forecast-metric-card.accent-orange  { border-top-color: #f39c12; }

.forecast-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.forecast-metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Timeline Chart */
.forecast-timeline-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    align-items: end;
    min-height: 220px;
}

.forecast-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.forecast-bar-wrapper {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.forecast-bar {
    width: 60%;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: height 0.3s;
}
.forecast-bar.overdue {
    background: linear-gradient(180deg, #e74c3c, #c0392b);
}
.forecast-bar.future {
    background: linear-gradient(180deg, #00d2ff, #0099cc);
}

.forecast-bar-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.forecast-bar-count {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

.forecast-month-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.forecast-timeline-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.forecast-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.forecast-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.forecast-legend-dot.overdue { background: linear-gradient(180deg, #e74c3c, #c0392b); }
.forecast-legend-dot.future  { background: linear-gradient(180deg, #00d2ff, #0099cc); }

/* Clients Table */
.forecast-table-wrapper,
.aging-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.forecast-clients-table {
    width: 100%;
    border-collapse: collapse;
}

.forecast-clients-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.forecast-clients-table td {
    padding: 12px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.forecast-clients-table tr:hover td {
    background: var(--bg-secondary);
}

.forecast-clients-table .text-right {
    text-align: right;
}
.forecast-clients-table .text-center {
    text-align: center;
}

.forecast-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.forecast-status-dot.green { background: #2ecc71; }
.forecast-status-dot.red   { background: #e74c3c; }

/* Forecast Responsive */
@media (max-width: 1200px) {
    .forecast-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .forecast-timeline-chart {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .forecast-metrics-grid {
        grid-template-columns: 1fr;
    }
    .forecast-section {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .forecast-timeline-chart {
        grid-template-columns: repeat(3, 1fr);
    }
    .forecast-bar-value {
        font-size: 9px;
    }
}

/* =========================================================================
   AGING CREDITI
   ========================================================================= */

.aging-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0;
}

.aging-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.aging-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Metrics Grid — 5 colonne (totale + 4 bande) */
.aging-metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.aging-metric-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border-top: 3px solid var(--primary);
}

.aging-metric-card.accent-total  { border-top-color: #e74c3c; }
.aging-metric-card.accent-band1  { border-top-color: #f39c12; }
.aging-metric-card.accent-band2  { border-top-color: #e67e22; }
.aging-metric-card.accent-band3  { border-top-color: #e74c3c; }
.aging-metric-card.accent-band4  { border-top-color: #c0392b; }

.aging-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.aging-metric-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.aging-metric-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Stacked Bar */
.aging-stacked-bar {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.aging-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 30px;
    transition: flex 0.3s ease;
}

.aging-bar-segment.band1 { background: #f39c12; }
.aging-bar-segment.band2 { background: #e67e22; }
.aging-bar-segment.band3 { background: #e74c3c; }
.aging-bar-segment.band4 { background: #c0392b; }

/* Legend */
.aging-legend {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 16px;
    justify-content: center;
}

.aging-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.aging-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.aging-legend-dot.band1 { background: #f39c12; }
.aging-legend-dot.band2 { background: #e67e22; }
.aging-legend-dot.band3 { background: #e74c3c; }
.aging-legend-dot.band4 { background: #c0392b; }

/* Clients Table */
.aging-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.aging-clients-table thead th {
    background: var(--bg-secondary);
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.aging-clients-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.aging-clients-table tbody tr:hover {
    background: var(--bg-secondary);
}

.aging-clients-table .text-right {
    text-align: right;
}

.aging-clients-table .text-center {
    text-align: center;
}

/* Aging Responsive */
@media (max-width: 1200px) {
    .aging-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .aging-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .aging-section {
        padding: 16px;
    }
    .aging-legend {
        grid-template-columns: repeat(2, auto);
    }
    .aging-clients-table {
        font-size: 12px;
    }
    .aging-clients-table thead th,
    .aging-clients-table tbody td {
        padding: 8px 6px;
    }
}

@media (max-width: 480px) {
    .aging-metrics-grid {
        grid-template-columns: 1fr;
    }
    .aging-legend {
        grid-template-columns: repeat(2, auto);
    }
    .aging-bar-segment {
        font-size: 10px;
    }
}

/* Responsive Studi di Settore */
@media (max-width: 1200px) {
    .studi-macroaree-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analysis-header {
        justify-content: center;
    }
    .analysis-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .analysis-tabs::-webkit-scrollbar {
        display: none;
    }
    .analysis-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: center;
        padding: 12px 12px;
        font-size: 13px;
    }
    .estero-summary {
        flex-direction: column;
        text-align: center;
    }
}

/* Responsive Analysis Section */
@media (min-width: 1920px) {
    .analysis-section {
        padding: 20px 50px 32px;
    }
}

@media (min-width: 2560px) {
    .analysis-section {
        padding: 40px 80px;
        padding-top: 100px;
    }
}

@media (min-width: 3840px) {
    .analysis-section {
        padding: 50px 120px;
        padding-top: 120px;
    }
}

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

@media (max-width: 900px) {
    .quarter-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .annual-bar-chart {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .analysis-section {
        padding: 16px;
        padding-top: 16px;
    }

    .bar-chart {
        height: 180px;
        padding: 12px 4px;
        gap: 8px;
        align-items: flex-end;
    }

    .bar-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        display: grid;
        grid-template-rows: 120px auto auto;
        gap: 8px;
        align-items: end;
    }

    .bar-container {
        height: 120px;
        align-self: end;
    }

    .bar-label {
        font-size: 10px;
        word-break: break-word;
        text-align: center;
        width: 100%;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
    }

    .bar-value {
        font-size: 13px;
        word-break: break-word;
        text-align: center;
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .month-card {
        padding: 16px;
    }

    .annual-card {
        padding: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .annual-card::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }

    .annual-bar-chart {
        grid-template-columns: repeat(7, 120px);
        height: 200px;
        gap: 16px;
        padding: 12px 8px;
        width: max-content;
    }

    .annual-bar-container {
        height: 130px;
    }

    .annual-bar-label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .annual-bar-value {
        font-size: 11px;
    }

    .annual-bar-item {
        gap: 6px;
    }
}

/* ============================================================
   FOREIGN INVOICES MODULE - Fullscreen Overlay
   ============================================================ */

/* Overlay Container */
.foreign-invoices-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.foreign-invoices-overlay.active {
    opacity: 1;
    visibility: visible;
}

.foreign-invoices-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header */
.foreign-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.foreign-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.foreign-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.foreign-back-btn:hover {
    background: var(--bg-primary);
    border-color: #16a085;
}

.foreign-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.foreign-title svg {
    color: #16a085;
}

.foreign-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.foreign-year-select {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.foreign-year-select:hover {
    border-color: #16a085;
}

.foreign-close-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foreign-close-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

/* Dashboard View - 12 Months Grid */
.foreign-dashboard-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
}

.foreign-months-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    grid-template-rows: repeat(3, 1fr);
}

.foreign-month-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    min-width: 0;
}

.foreign-month-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-color);
    transition: all 0.3s;
}

/* Month Colors */
.foreign-month-card.past::before {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.foreign-month-card.current::before {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.foreign-month-card.future::before {
    background: linear-gradient(90deg, #95a5a6, #7f8c8d);
}

.foreign-month-card:hover {
    border-color: #16a085;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(22, 160, 133, 0.2);
}

.foreign-month-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.foreign-month-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.foreign-month-status-icon {
    width: 32px;
    height: 32px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

/* Dashboard month count - large number */
.foreign-dashboard-view .foreign-month-count {
    font-size: 72px;
    font-weight: 700;
    color: #16a085;
    margin-bottom: 8px;
    line-height: 1;
    text-align: center;
}

.foreign-dashboard-view .foreign-month-label {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    text-transform: lowercase;
}

/* Month View */
.foreign-month-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.foreign-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.foreign-month-info h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

/* Month view count - small text */
.foreign-month-view .foreign-month-count {
    font-size: 13px;
    color: var(--text-muted);
}

/* Toggle Status */
.foreign-month-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.foreign-month-status-toggle input[type="checkbox"] {
    position: relative;
    width: 50px;
    height: 26px;
    appearance: none;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.foreign-month-status-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    top: 2px;
    left: 2px;
    transition: all 0.3s;
}

.foreign-month-status-toggle input[type="checkbox"]:checked {
    background: var(--success);
    border-color: var(--success);
}

.foreign-month-status-toggle input[type="checkbox"]:checked::before {
    background: white;
    left: 26px;
}

#foreignMonthStatusLabel {
    font-weight: 600;
    min-width: 50px;
}

/* Upload Zone */
.foreign-upload-zone {
    padding: 20px 30px;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.foreign-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    background: var(--bg-secondary);
    transition: all 0.3s;
    cursor: pointer;
}

.foreign-dropzone:hover,
.foreign-dropzone.drag-over {
    border-color: #16a085;
    background: rgba(22, 160, 133, 0.05);
}

.dropzone-content svg {
    color: #16a085;
    margin-bottom: 16px;
}

.dropzone-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dropzone-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.dropzone-hint {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-muted);
}

.dropzone-uploading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dropzone-uploading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: #16a085;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.upload-progress {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #16a085, #1abc9c);
    width: 0%;
    transition: width 0.3s;
}

/* Invoices Grid */
.foreign-invoices-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.foreign-invoice-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
    min-width: 0;
    overflow: hidden;
}

.foreign-invoice-card:hover {
    border-color: #16a085;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.4);
}

.foreign-invoice-card.deleting {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.foreign-invoice-thumbnail {
    position: relative;
    width: 100%;
    height: 320px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-tertiary);
    cursor: pointer;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foreign-invoice-thumbnail canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.foreign-notes-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: #16a085;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    z-index: 10;
}

.foreign-notes-badge:hover {
    background: #1abc9c;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(22, 160, 133, 0.5);
}

.foreign-invoice-info {
    flex: 1;
    margin-bottom: 16px;
}

.foreign-invoice-filename {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    word-break: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foreign-invoice-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.foreign-invoice-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.foreign-invoice-btn {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.foreign-invoice-btn:hover {
    border-color: #16a085;
    color: #16a085;
    background: rgba(22, 160, 133, 0.05);
}

.foreign-invoice-delete-btn {
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.foreign-invoice-delete-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

/* Empty State */
.foreign-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.foreign-empty-state svg {
    width: 80px;
    height: 80px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 20px;
}

.foreign-empty-state h3 {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.foreign-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1400px) {
    .foreign-invoices-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .foreign-months-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .foreign-invoices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .foreign-header {
        padding: 15px 20px;
    }

    .foreign-title {
        font-size: 18px;
    }

    .foreign-header-right {
        gap: 10px;
    }

    .foreign-months-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 20px;
        height: auto;
    }

    .foreign-month-card {
        min-height: auto;
    }

    .foreign-dashboard-view .foreign-month-count {
        font-size: 48px;
    }

    .foreign-dashboard-view .foreign-month-label {
        font-size: 16px;
    }

    .foreign-invoices-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .foreign-months-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .foreign-dashboard-view .foreign-month-count {
        font-size: 56px;
    }

    .foreign-dashboard-view .foreign-month-label {
        font-size: 16px;
    }

    .foreign-month-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .foreign-upload-zone,
    .foreign-invoices-grid {
        padding: 15px 20px;
    }

    .foreign-dropzone {
        padding: 30px 20px;
    }

    .foreign-invoice-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .foreign-invoice-btn,
    .foreign-invoice-delete-btn {
        flex: 1;
    }

    /* DataTables responsive su mobile */
    .items-table-wrapper {
        padding: 12px;
        margin: 0 -8px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 12px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 12px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        margin: 0 2px !important;
        font-size: 12px !important;
    }

    .invoice-items-table {
        min-width: 600px;
        font-size: 12px !important;
    }

    .invoice-items-table thead th {
        font-size: 11px !important;
        padding: 8px !important;
    }

    .invoice-items-table tbody td {
        padding: 8px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   PWA INSTALL BANNER
   ============================================================ */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #0a0a1a 100%);
    border-top: 1px solid var(--accent-cyan);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 245, 212, 0.2);
}

.pwa-install-banner.visible {
    transform: translateY(0);
}

.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.pwa-install-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(0, 245, 212, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-install-text strong {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pwa-install-text span {
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pwa-ios-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-cyan);
    color: #0a0a1a;
    padding: 2px;
    border-radius: 4px;
    margin: 0 2px;
}

.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-install-btn {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pwa-install-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3);
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.pwa-install-close:hover {
    color: #fff;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .pwa-install-content {
        flex-wrap: wrap;
    }
    
    .pwa-install-icon {
        width: 36px;
        height: 36px;
    }
    
    .pwa-install-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .pwa-install-text strong {
        font-size: 13px;
    }
    
    .pwa-install-text span {
        font-size: 11px;
    }
    
    .pwa-install-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* ============================================================
   PUSH NOTIFICATIONS PROMPT
   ============================================================ */
.push-prompt-banner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, #1a1a2e 0%, #0a0a1a 100%);
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 245, 212, 0.2);
    max-width: 400px;
    width: calc(100% - 32px);
}

.push-prompt-banner.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.push-prompt-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.push-prompt-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(0, 245, 212, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
}

.push-prompt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.push-prompt-text strong {
    color: #fff;
    font-size: 14px;
}

.push-prompt-text span {
    color: var(--text-muted);
    font-size: 12px;
}

.push-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.push-prompt-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.push-prompt-btn.primary {
    background: var(--gradient-primary);
    color: #fff;
}

.push-prompt-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3);
}

.push-prompt-btn.secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.push-prompt-btn.secondary:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

/* Push status indicator */
.push-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.push-status.active {
    background: rgba(0, 245, 212, 0.1);
    color: var(--accent-cyan);
}

.push-status.inactive {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
}

@media (max-width: 480px) {
    .push-prompt-banner {
        bottom: 70px;
    }

    .push-prompt-content {
        flex-wrap: wrap;
    }

    .push-prompt-actions {
        width: 100%;
        flex-direction: row;
        margin-top: 8px;
    }

    .push-prompt-btn {
        flex: 1;
    }
}

/* Highlight per notifiche/task cliccate da push */
.highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7);
        background-color: rgba(0, 212, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(0, 212, 255, 0.3);
        background-color: rgba(0, 212, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
        background-color: transparent;
    }
}