/* Liquid Glass macOS 26 Style 
   Premium Dark Mode Dominant - Homogeneous Design 
*/

:root {
    /* macOS 26 Core Palette - Dark Mode Native */
    --app-bg: #000000;
    --glass-surface: rgba(20, 20, 25, 0.45);
    --glass-highlight: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-glow: rgba(255, 255, 255, 0.03);
    --glass-shadow: rgba(0, 0, 0, 0.5);

    /* Blur & Depth */
    --blur-amount: 60px;
    --card-radius: 28px;
    --btn-radius: 99px; /* Pill shapes */
    --card-padding: 24px;
    --section-spacing: 32px;
    --inner-radius: 16px; /* For elements inside cards */
    --small-radius: 12px;

    /* Typography Scale - iOS 26 Strict */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px - captions, badges */
    --text-sm: 0.85rem;      /* 13.6px - secondary text */
    --text-base: 0.95rem;    /* 15.2px - body text */
    --text-md: 1rem;         /* 16px - standard */
    --text-lg: 1.1rem;       /* 17.6px - emphasized */
    --text-xl: 1.25rem;      /* 20px - h3 */
    --text-2xl: 1.5rem;      /* 24px - h2 */
    --text-3xl: 2rem;        /* 32px - h1 mobile */
    --text-4xl: 2.5rem;      /* 40px - h1 desktop */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: -0.02em;
    --tracking-wide: 0.05em;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Colors */
    --text-primary: #f5f5f7;
    --text-secondary: #86868b;
    --text-tertiary: #58585e;

    /* Muted Neon Accents */
    --accent-blue: #0a84ff;
    --accent-green: #30d158;
    --accent-red: #ff453a;
    --accent-orange: #ff9f0a;
    --accent-purple: #bf5af2;
    --accent-indigo: #5e5ce6;

    /* Transitions - Unified */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 25px 50px -12px var(--glass-shadow);
    --shadow-hover: 0 30px 60px -15px var(--glass-shadow);

    /* Button Sizes */
    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-height: 44px;
    --btn-sm-height: 36px;
    --btn-sm-padding-x: 16px;

    /* Input Sizes */
    --input-height: 54px;
    --input-padding: 16px 20px;

    /* Card Inner Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;

    /* Additional border-radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    /* Blur variants */
    --blur-sm: 10px;
    --blur-md: 15px;
    --blur-lg: 40px;

    /* Transitions */
    --transition-instant: 0.1s ease;
    --transition-default: 0.25s ease;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Base Reset & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

html {
    height: 100%;
    overflow-x: hidden;
    font-size: var(--text-md);
}

body {
    font-family: var(--font-family);
    min-height: 100%;
    background-color: var(--app-bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: var(--leading-normal);
    font-size: var(--text-md);
}

a {
    text-decoration: none !important;
    color: inherit;
    transition: opacity var(--transition-instant);
}

a:hover {
    opacity: 0.8;
}

/* Background - The "Void" Liquid Gradient 
    Deep, fluid, moving slowly.
*/
.bg-fixed {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    z-index: -1;
    background: 
        radial-gradient(circle at 15% 30%, rgba(10, 132, 255, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(191, 90, 242, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(255, 69, 58, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 25% 75%, rgba(48, 209, 88, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 159, 10, 0.06) 0%, transparent 30%),
        radial-gradient(circle at 90% 85%, rgba(94, 92, 230, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 10% 10%, rgba(48, 209, 88, 0.05) 0%, transparent 25%),
        linear-gradient(180deg, #030305 0%, #080810 50%, #0d0d14 100%);
    background-size: 100% 100%;
    transform: scale(1);
    filter: blur(var(--blur-amount));
}

/* Force Dark Mode visuals even if class isn't present, 
   but allow slight brightening if .dark-mode is REMOVED (optional fallback) */
body:not(.dark-mode) {
    --app-bg: #e8e8ed;
    --glass-surface: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(0, 0, 0, 0.08);
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-shadow: rgba(0, 0, 0, 0.06);
}

body:not(.dark-mode) .bg-fixed {
    background: 
        radial-gradient(circle at 20% 20%, rgba(88, 185, 255, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 159, 10, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(191, 90, 242, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(48, 209, 88, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(10, 132, 255, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 30% 50%, rgba(255, 69, 58, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 70% 90%, rgba(94, 92, 230, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 50% 30%, rgba(48, 209, 88, 0.08) 0%, transparent 25%),
        linear-gradient(135deg, #e0e4ea 0%, #d5d9e2 50%, #ccd1da 100%);
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-2xl);
}

/* Main content sections - prevent overlap */
main, .glass-card {
    position: relative;
    z-index: 1;
}

/* Header section */
.header-section {
    text-align: center;
    margin-bottom: 16px;
    margin-top: -60px;
}

.header-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.header-title-link:hover h1 {
    opacity: 0.8;
}

/* Section spacing */
.action-buttons {
    margin-bottom: 32px;
}

.stats-grid {
    margin-bottom: 32px;
}

.glass-card + .glass-card {
    margin-top: 24px;
}

.charts-row,
.tables-section {
    margin-top: 32px;
}

/* The Liquid Glass Card - Unified Design System */
.glass-card,
.category-simple,
.stat-card,
.insight-card,
.year-card,
.category-card,
.collapsible-table {
    position: relative;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 0 var(--glass-highlight),
        inset 0 0 40px 0 rgba(255, 255, 255, 0.03);
    padding: var(--card-padding);
    margin: 0;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    will-change: transform;
    overflow: hidden;
}

/* Form pages - more compact and square */
.glass-card form {
    max-width: 100%;
    margin: 0 auto;
}

.glass-card form .form-group:last-of-type {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.glass-card form .form-group:last-of-type .btn {
    flex: 1;
}

@media (min-width: 768px) {
    .glass-card:has(form) {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        border-radius: var(--card-radius);
    }
}

/* Hover Effect: Subtle lift without causing overlap */
.glass-card:hover, 
.category-simple:hover,
.stat-card:hover,
.insight-card:hover,
.year-card:hover,
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 30px 60px -15px var(--glass-shadow),
        inset 0 1px 0 0 rgba(255,255,255,0.12),
        inset 0 0 50px 0 rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.1);
}

/* Typography Scale & Polish - iOS 26 Uniform */
h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    margin-bottom: 32px;
    background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
}

h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    line-height: var(--leading-tight);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

h4 {
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: var(--leading-normal);
}

/* Uniform text elements */
p, span, div {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

/* Utility Classes - Spacing */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Utility Classes - Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent-blue { color: var(--accent-blue); }

/* Utility Classes - Layout */
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.inline-flex { display: inline-flex; }
.text-center { text-align: center; }

/* Year Summary */
.year-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.year-card-link {
    text-decoration: none;
    color: inherit;
}

.year-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}



.year-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px var(--glass-shadow);
    border-color: rgba(255, 255, 255, 0.15);
}

.year-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: var(--leading-tight);
}

.year-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.year-income, .year-expense, .year-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--small-radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.year-income span:first-child { color: var(--text-secondary); font-size: var(--text-sm); }
.year-income span:last-child {
    color: var(--accent-green);
    font-weight: var(--font-semibold);
    text-shadow: 0 0 10px rgba(48, 209, 88, 0.2);
    font-size: var(--text-base);
}

.year-expense span:first-child { color: var(--text-secondary); font-size: var(--text-sm); }
.year-expense span:last-child {
    color: var(--accent-red);
    font-weight: var(--font-semibold);
    text-shadow: 0 0 10px rgba(255, 69, 58, 0.2);
    font-size: var(--text-base);
}

.year-balance.positive span:last-child {
    color: var(--accent-green);
    font-weight: var(--font-bold);
    text-shadow: 0 0 12px rgba(48, 209, 88, 0.3);
    font-size: var(--text-base);
}

.year-balance.negative span:last-child {
    color: var(--accent-red);
    font-weight: var(--font-bold);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.3);
    font-size: var(--text-base);
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.insight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--inner-radius);
    text-align: center;
    border: 1px solid var(--glass-border);
    transition: all var(--transition-smooth);
}

.insight-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
}

.insight-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.insight-value.income { 
    color: var(--accent-green); 
    text-shadow: 0 0 20px rgba(48, 209, 88, 0.3);
}

.insight-value.expense { 
    color: var(--accent-red);
    text-shadow: 0 0 20px rgba(255, 69, 58, 0.3);
}

.insight-value.positive { 
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(48, 209, 88, 0.25);
}

.insight-value.negative { 
    color: var(--accent-red);
    text-shadow: 0 0 15px rgba(255, 69, 58, 0.25);
}

.insight-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Buttons: macOS Control Center Style - Uniform */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    min-height: var(--btn-height);
    border-radius: var(--btn-radius);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    font-family: var(--font-family);
    cursor: pointer;
    border: none;
    transition: all var(--transition-bounce);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    letter-spacing: -0.01em;
    line-height: 1;
}

.btn:active {
    transform: scale(0.94);
}

.btn-primary {
    background: var(--accent-blue);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: #2997ff;
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.5);
}

.btn-success, .btn-add {
    background: var(--accent-green);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-danger, .btn-delete {
    background: var(--accent-red);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-secondary, .btn-action {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover, .btn-action:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Button Sizes */
.btn-sm {
    min-height: var(--btn-sm-height);
    padding: 8px var(--btn-sm-padding-x);
    font-size: var(--text-sm);
}

.btn-lg {
    min-height: 52px;
    padding: var(--space-lg) var(--space-3xl);
    font-size: var(--text-lg);
}

/* Action Bar */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: var(--space-xs);
    background: var(--glass-surface);
    border-radius: var(--btn-radius);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--glass-border);
}

.action-buttons .btn {
    flex: 1;
    min-width: auto;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    white-space: nowrap;
    height: auto;
}

.header-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.header-buttons .btn, 
.header-buttons .dropdown > .btn,
.header-buttons #darkModeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--btn-radius);
    font-size: var(--text-sm);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    white-space: nowrap;
    box-sizing: border-box;
}

.header-buttons .btn:hover, 
.header-buttons .dropdown > .btn:hover,
.header-buttons #darkModeToggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.header-buttons #darkModeToggle {
    padding: 0 16px;
}

.header-buttons .dropdown {
    position: relative;
    display: inline-flex;
}

/* Inputs & Forms - Uniform */
.form-group {
    margin-bottom: var(--space-xl);
}

.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
}

.form-control, select.form-control {
    width: 100%;
    min-height: var(--input-height);
    padding: var(--input-padding);
    border-radius: var(--inner-radius);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.form-control:focus, select.form-control:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}

body:not(.dark-mode) .form-control,
body:not(.dark-mode) select.form-control {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) select.form-control:focus {
    background: rgba(255, 255, 255, 1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}

input[type="date"].form-control {
    -webkit-appearance: none;
    appearance: none;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

body:not(.dark-mode) input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(0);
}

@media (max-width: 480px) {
    .form-control, select.form-control {
        padding: var(--space-lg) var(--space-lg);
        font-size: var(--text-md);
        border-radius: var(--small-radius);
    }

    input[type="date"].form-control {
        min-height: 50px;
        padding: var(--space-md) var(--space-md);
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .glass-card form {
        max-width: 100%;
    }
    
    .glass-card form .form-group:last-of-type {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
    
    .glass-card form .form-group:last-of-type .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* Stats Grid - Uniform */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.stats-grid:has(.stat-card.mini) {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl) var(--space-lg);
    background: var(--glass-surface);
    border-radius: var(--inner-radius);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -8px var(--glass-shadow);
}

.stat-card.mini {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--small-radius);
}

.stat-card.mini .stat-label {
    font-size: var(--text-xs);
}

.stat-card.mini .stat-value {
    font-size: var(--text-base);
}

.stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}

.stat-value.income, .stat-value.positive {
    color: var(--accent-green);
    text-shadow: 0 0 25px rgba(48, 209, 88, 0.35);
}

.stat-value.expense, .stat-value.negative {
    color: var(--accent-red);
    text-shadow: 0 0 25px rgba(255, 69, 58, 0.35);
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Insights Grid - Uniform */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-lg);
}

.insight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--inner-radius);
    text-align: center;
    border: 1px solid var(--glass-border);
    transition: all var(--transition-base);
}

.insight-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
}

.insight-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-medium);
}

.insight-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-tight);
}

.insight-value.income {
    color: var(--accent-green);
    text-shadow: 0 0 20px rgba(48, 209, 88, 0.3);
}

.insight-value.expense {
    color: var(--accent-red);
    text-shadow: 0 0 20px rgba(255, 69, 58, 0.3);
}

.insight-value.positive {
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(48, 209, 88, 0.25);
}

.insight-value.negative {
    color: var(--accent-red);
    text-shadow: 0 0 15px rgba(255, 69, 58, 0.25);
}

.insight-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

/* KPI Grid - Predictions Page */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    background: var(--glass-surface);
    border-radius: var(--inner-radius);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-base);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -8px var(--glass-shadow);
}

.kpi-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-sm);
}

.kpi-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-tight);
}

.kpi-value.positive {
    color: var(--accent-green);
    text-shadow: 0 0 25px rgba(48, 209, 88, 0.35);
}

.kpi-value.negative {
    color: var(--accent-red);
    text-shadow: 0 0 25px rgba(255, 69, 58, 0.35);
}

.kpi-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* View Selector - Predictions Page */
.view-selector {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-xs);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--btn-radius);
    border: 1px solid var(--glass-border);
    width: fit-content;
}

.view-selector .btn {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    min-height: 36px;
}

.view-selector .btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.view-selector .btn.active {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

/* Tables - Liquid Style */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin: 0;
}

.table thead tr:first-child th:first-child { border-top-left-radius: 16px; }
.table thead tr:first-child th:last-child { border-top-right-radius: 16px; }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }

.table thead {
    display: table-header-group;
}

.table th {
    padding: var(--space-lg) var(--space-lg);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    font-weight: 600;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    text-align: left;
}

body:not(.dark-mode) .table th {
    background: rgba(0, 0, 0, 0.08);
}

.table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all var(--transition-instant);
    backdrop-filter: blur(var(--blur-sm));
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.01);
}

.table td {
    padding: var(--space-lg) var(--space-lg);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-size: var(--text-base);
    text-align: left;
}

.table td:first-child {
    font-weight: 500;
}

.cell-loyer,
.cell-panneau,
.cell-credit,
.cell-assurance,
.cell-taxe,
.cell-travaux {
    text-align: center !important;
}

.cell-loyer { color: var(--accent-green); background: transparent; }
.cell-panneau { color: var(--accent-blue); background: transparent; }
.cell-credit { color: var(--accent-red); background: transparent; }
.cell-assurance { color: var(--accent-orange); background: transparent; }
.cell-taxe { color: var(--accent-green); background: transparent; }
.cell-travaux { color: var(--accent-purple); background: transparent; }

body:not(.dark-mode) .cell-loyer,
body:not(.dark-mode) .cell-panneau,
body:not(.dark-mode) .cell-credit,
body:not(.dark-mode) .cell-assurance,
body:not(.dark-mode) .cell-taxe,
body:not(.dark-mode) .cell-travaux {
    background: transparent;
}

.col-loyer, .col-panneau {
    color: var(--accent-green);
}

.col-credit {
    color: var(--accent-red);
}

.col-assurance {
    color: var(--accent-orange);
}

.col-taxe {
    color: var(--accent-green);
}

.col-travaux {
    color: var(--accent-purple);
}

body:not(.dark-mode) .glass-card > .table-scroll table thead th {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
    font-weight: 600;
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody td {
    background: rgba(0, 0, 0, 0.03);
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.08);
}

.glass-card {
    border-radius: var(--card-radius);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
}

body:not(.dark-mode) .glass-card {
    background: rgba(255, 255, 255, 0.7);
}

/* Year Detail Table - also used for predictions */
.year-detail-table {
    width: 100%;
    overflow-x: auto;
}

.year-detail-table .table {
    min-width: 800px;
}

.year-detail-table .table tbody tr {
    border-radius: var(--radius-lg);
}

.year-detail-table .table tbody tr td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.year-detail-table .table tbody tr td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

@media (max-width: 600px) {
    .year-detail-table {
        overflow-x: auto;
    }
    
    .year-detail-table .table {
        min-width: 700px;
        font-size: var(--text-sm);
    }
    
    .year-detail-table .table th,
    .year-detail-table .table td {
        padding: var(--space-md) var(--space-sm);
        text-align: center;
    }
    
    .year-detail-table .table th:first-child,
    .year-detail-table .table td:first-child {
        text-align: left;
        min-width: 70px;
    }
    
    .year-detail-table .table td:last-child {
        min-width: 85px;
    }
}

.glass-card > .table-scroll table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 20px;
}

.glass-card > .table-scroll table thead th:first-child { border-top-left-radius: 16px; }
.glass-card > .table-scroll table thead th:last-child { border-top-right-radius: 16px; }
.glass-card > .table-scroll table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.glass-card > .table-scroll table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }

.glass-card > .table-scroll table th {
    padding: var(--space-lg) var(--space-lg);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    font-weight: 600;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
}

.glass-card > .table-scroll table th:first-child {
    text-align: left;
}

.glass-card > .table-scroll table th:last-child {
    text-align: right;
}

.glass-card > .table-scroll table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all var(--transition-instant);
}

.glass-card > .table-scroll table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.glass-card > .table-scroll table td {
    padding: var(--space-lg) var(--space-lg);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-size: var(--text-base);
    text-align: center;
    background: transparent;
}

.glass-card > .table-scroll table td:first-child {
    text-align: left;
}

.glass-card > .table-scroll table td:last-child {
    text-align: right;
}

body:not(.dark-mode) .glass-card > .table-scroll {
    background: rgba(255, 255, 255, 0.3);
}

body:not(.dark-mode) .glass-card > .table-scroll table th {
    color: #6e6e73;
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .glass-card > .table-scroll table td {
    border-top-color: rgba(0, 0, 0, 0.03);
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody tr {
    background: rgba(0, 0, 0, 0.03);
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody tr:hover {
    background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 600px) {
    .glass-card > .table-scroll {
        margin: 0 -16px;
        padding: 0 12px;
        width: calc(100% + 32px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .glass-card > .table-scroll table {
        width: max-content;
        min-width: 100%;
    }
    
    .glass-card > .table-scroll table td,
    .glass-card > .table-scroll table th {
        white-space: nowrap;
        padding: var(--space-md) var(--space-md);
    }
    
    .glass-card > .table-scroll table th:first-child,
    .glass-card > .table-scroll table td:first-child {
        padding-left: 24px;
    }
    
    .glass-card > .table-scroll table th:last-child,
    .glass-card > .table-scroll table td:last-child {
        padding-right: 24px;
    }
    
    .glass-card > .table-scroll.table-scroll-wide {
        margin: 0 -16px;
        padding: 0 12px;
        width: calc(100% + 32px);
    }
    
    .glass-card > .table-scroll.table-scroll-wide table {
        width: max-content;
        min-width: 700px;
    }
    
    .glass-card > .table-scroll.table-scroll-wide table td,
    .glass-card > .table-scroll.table-scroll-wide table th {
        padding: var(--space-md) var(--space-2xl);
    }
    
    .glass-card > .table-scroll.table-scroll-wide table th:first-child,
    .glass-card > .table-scroll.table-scroll-wide table td:first-child {
        padding-left: 24px;
    }
    
    .glass-card > .table-scroll.table-scroll-wide table th:last-child,
    .glass-card > .table-scroll.table-scroll-wide table td:last-child {
        padding-right: 24px;
    }
}

.glass-card > .table-scroll {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

.glass-card > .table-scroll table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}

.glass-card > .table-scroll table td,
.glass-card > .table-scroll table th {
    padding: var(--space-sm);
    text-align: center;
    width: 20%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card > .table-scroll table th:first-child,
.glass-card > .table-scroll table td:first-child {
    text-align: left;
    padding-left: 32px;
}

.glass-card > .table-scroll table th:last-child,
.glass-card > .table-scroll table td:last-child {
    text-align: right;
    padding-right: 32px;
}

.glass-card > .table-scroll table tbody tr:last-child td {
    border-bottom: none;
}

body:not(.dark-mode) .glass-card > .table-scroll table td,
body:not(.dark-mode) .glass-card > .table-scroll table th {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .glass-card > .table-scroll table thead th {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
    font-weight: 600;
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody td {
    background: rgba(0, 0, 0, 0.03);
}

body:not(.dark-mode) .glass-card > .table-scroll table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
    .profile-field {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .users-list .date-cell {
        display: none;
    }

    .users-list .table-row {
        padding: var(--space-md);
    }
}

.col-loyer, .col-panneau, .col-credit, .col-assurance, .col-taxe, .col-travaux {
    font-weight: 600;
    text-align: center !important;
}

.col-solde {
    text-align: center !important;
}

.month-badge {
    font-weight: 500;
}

.balance-pill {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--small-radius);
    font-weight: 600;
    font-size: var(--text-sm);
}

.balance-pill.positive {
    background: rgba(48, 209, 88, 0.1);
    color: var(--accent-green);
}

.balance-pill.negative {
    background: rgba(255, 69, 58, 0.1);
    color: var(--accent-red);
}

.category-pill {
    display: inline-block;
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--small-radius);
    font-weight: 600;
    font-size: var(--text-sm);
}

.category-pill.loyer,
.category-pill.panneau {
    background: rgba(48, 209, 88, 0.15);
    color: #30d158;
}

.category-pill.credit {
    background: rgba(255, 69, 58, 0.15);
    color: #ff3b30;
}

.category-pill.assurance {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9500;
}

.category-pill.taxe,
.category-pill.property_tax {
    background: rgba(48, 209, 88, 0.15);
    color: #34c759;
}

.category-pill.travaux {
    background: rgba(191, 90, 242, 0.15);
    color: #af52de;
}

/* Redundant rule removed - see lines 1042-1046 */

.year-detail-table .table th:last-child,
.year-detail-table .table td:last-child {
    text-align: center;
    width: auto;
    white-space: nowrap;
}

/* Collapsible Tables */
.collapsible-table {
    padding: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
    position: relative;
}

.table-header-row {
    display: flex;
    padding: var(--space-lg) var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--glass-border);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    gap: 16px;
}

.table-header-row .month-cell {
    flex: 1;
    text-align: left;
}

.table-header-row .category-cell {
    flex: 1;
    text-align: center;
}

.table-header-row .amount-cell {
    flex: 1;
    text-align: right;
}

.table-row {
    display: flex;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    align-items: center;
    gap: 16px;
}

.table-row:last-child { border-bottom: none; }

.month-cell {
    flex: 1;
    font-size: var(--text-base);
    white-space: nowrap;
    text-align: left;
}

.category-cell {
    flex: 1;
    display: flex;
    justify-content: center;
}

.amount-cell {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.table-body {
    padding-bottom: 50px;
}

.scrollabe {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollabe::-webkit-scrollbar {
    display: none;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
    padding: var(--space-md) var(--space-lg);
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
}

body:not(.dark-mode) .table-footer {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.table-footer .total-label {
    color: var(--text-secondary);
}

.table-footer .total-value {
    font-weight: 600;
}

/* Ligne de total pour les tableaux HTML (tr/td) */
.table-total-row {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
}

.table-total-row td {
    background: transparent;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

body:not(.dark-mode) .table-total-row {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.scrollable::-webkit-scrollbar {
    width: 6px;
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xs);
}

body:not(.dark-mode) .scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Scrollable Heights */
.scrollable-sm { max-height: 200px; overflow-y: auto; }
.scrollable-md { max-height: 300px; overflow-y: auto; }
.scrollable-lg { max-height: 400px; overflow-y: auto; }

/* Month display control - Desktop default: full month, no abbr */
.month-abbr {
    display: none !important;
}

.month-full {
    display: inline !important;
}

/* Mobile: abbreviated month, no full month */
@media screen and (max-width: 480px) {
    .month-abbr {
        display: inline !important;
    }
    
    .month-full {
        display: none !important;
    }
    
    .month-cell .year-label {
        display: inline;
    }
    
    .month-cell {
        letter-spacing: -0.5px;
    }
    
    /* Keep full month in category-simple sections */
    .category-simple-item .month-full {
        display: inline !important;
    }
}

/* Dark Mode Toggle */
#darkModeToggle {
    background: rgba(255,255,255,0.15);
    color: #f5f5f7;
    font-size: var(--text-xl);
}

#darkModeToggle:hover {
    background: rgba(255,255,255,0.25);
}

body:not(.dark-mode) #darkModeToggle {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.08);
}

/* Dropdowns */
.dropdown {
    position: relative;
    display: inline-flex;
}

.dropdown > .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(25, 25, 30, 0.95);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-radius: var(--inner-radius);
    padding: var(--space-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-instant);
    z-index: 1000;
    margin-top: 8px;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    transition: all var(--transition-instant);
}

.dropdown-menu a:hover {
    background: var(--accent-blue);
    color: white;
}

body:not(.dark-mode) .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body:not(.dark-mode) .dropdown-menu a {
    color: var(--text-primary);
}

body:not(.dark-mode) .dropdown-menu a:hover {
    background: var(--accent-blue);
    color: white;
}

/* Category Simple - Clean Layout */
.category-simple-amount {
    background: transparent;
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
}

.insight-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Category Badges */
.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Muted Badge Colors */
.badge-loyer { 
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.15) 0%, rgba(48, 209, 88, 0.05) 100%); 
    color: var(--accent-green); 
    border: 1px solid rgba(48, 209, 88, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(48, 209, 88, 0.2);
}
.badge-panneau { 
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.15) 0%, rgba(10, 132, 255, 0.05) 100%); 
    color: var(--accent-blue); 
    border: 1px solid rgba(10, 132, 255, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(10, 132, 255, 0.2);
}
.badge-credit { 
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.15) 0%, rgba(255, 69, 58, 0.05) 100%); 
    color: var(--accent-red); 
    border: 1px solid rgba(255, 69, 58, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(255, 69, 58, 0.2);
}
.badge-assurance { 
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.15) 0%, rgba(255, 159, 10, 0.05) 100%); 
    color: var(--accent-orange); 
    border: 1px solid rgba(255, 159, 10, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(255, 159, 10, 0.2);
}
.badge-taxe { 
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.2) 0%, rgba(48, 209, 88, 0.1) 100%); 
    color: var(--accent-green); 
    border: 1px solid rgba(48, 209, 88, 0.4);
    box-shadow: inset 0 1px 0 0 rgba(48, 209, 88, 0.3);
}
.badge-travaux { 
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.15) 0%, rgba(191, 90, 242, 0.05) 100%); 
    color: var(--accent-purple); 
    border: 1px solid rgba(191, 90, 242, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(191, 90, 242, 0.2);
}

/* Table Highlighting */
.table td.income, .amount.income { color: var(--accent-green); font-weight: 600; }
.table td.expense, .amount.expense { color: var(--accent-red); font-weight: 600; }
.table td.positive { color: var(--accent-green); font-weight: 600; }
.table td.negative { color: var(--accent-red); font-weight: 600; }
.table td span.positive, .table td span.negative { font-weight: 600; }

.charts-row,
.tables-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-top: 32px;
    position: relative;
    z-index: 1;
}

.charts-row .glass-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-column .glass-card h3 {
    margin-bottom: 12px;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
}

.chart-container {
    flex: 1;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tables-section .glass-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-column .glass-card {
    min-height: 400px;
}

.chart-column .glass-card h3 {
    margin-bottom: 12px;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
}

.chart-container {
    flex: 1;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 600px) {
    .breakdown-content {
        flex-direction: column;
        gap: 16px;
    }

    .breakdown-legend {
        width: 100%;
    }

    .breakdown-chart {
        height: 160px;
        width: 160px;
    }

    .legend-item {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
}

.chart-container canvas {
    flex: 1;
    width: 100% !important;
    max-height: 300px;
}

.breakdown-chart {
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.breakdown-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    flex: 1;
    align-self: center;
}

.breakdown-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    min-width: 180px;
}

.breakdown-legend::-webkit-scrollbar {
    width: 3px;
}

.breakdown-legend::-webkit-scrollbar-track {
    background: transparent;
}

.breakdown-legend::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
}

.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    transition: all var(--transition-instant);
    white-space: nowrap;
}

.legend-item .legend-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.legend-item .legend-value {
    flex-shrink: 0;
}

.legend-item .legend-percent {
    flex-shrink: 0;
}

.legend-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.legend-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.legend-percent {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.legend-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.legend-color {
    width: 8px;
    height: 8px;
    border-radius: var(--btn-radius);
    flex-shrink: 0;
}

.legend-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    flex: 1;
    min-width: 80px;
}

.legend-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.legend-percent {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.section-header h3 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Entry List */
.entries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entry-row {
    display: flex;
    align-items: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--small-radius);
    border: 1px solid var(--glass-border);
}

body:not(.dark-mode) .entry-row {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body:not(.dark-mode) .entry-clickable:hover {
    background: rgba(255, 255, 255, 0.8);
}

body:not(.dark-mode) .entry-delete-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.entry-link {
    display: flex;
    align-items: center;
    flex: 1;
    text-decoration: none;
    gap: 12px;
}

.entry-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.entry-icon {
    font-size: var(--text-2xl);
}

.entry-details {
    display: flex;
    flex-direction: column;
}

.entry-category {
    font-weight: 500;
    color: var(--text-primary);
}

.entry-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.entry-amount {
    font-size: var(--text-lg);
    font-weight: 600;
}

.entry-amount.income { color: var(--accent-green); }
.entry-amount.expense { color: var(--accent-red); }

.entry-delete-form {
    display: flex;
    align-items: center;
}

.entry-delete-btn {
    padding: var(--space-sm);
    background: transparent;
    border: none;
    opacity: 0.6;
    cursor: pointer;
}

.entry-delete-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.entry-clickable {
    cursor: pointer;
    transition: all var(--transition-instant);
}

.entry-clickable:hover {
    background: rgba(255, 255, 255, 0.06);
}

.entry-link {
        gap: 8px;
    }
    
    .entry-info {
        gap: 8px;
    }
    
    .entry-icon {
        font-size: var(--text-xl);
    }
    
    .entry-details {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .entry-category {
        font-size: var(--text-sm);
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .entry-date {
        font-size: 0.7rem;
    }
    
    .entry-amount {
        font-size: 0.95rem;
        white-space: nowrap;
    }
    
    .entry-delete-form {
        display: none;
    }

.entry-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.entry-icon {
    font-size: var(--text-2xl);
}

.entry-details {
    display: flex;
    flex-direction: column;
}

.entry-category {
    font-weight: 500;
    color: var(--text-primary);
}

.entry-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.entry-amount {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-right: 16px;
}

.entry-amount.income { color: var(--accent-green); }
.entry-amount.expense { color: var(--accent-red); }

.entry-actions {
    display: flex;
    gap: 8px;
}

.entry-actions .btn {
    padding: var(--space-sm);
    background: transparent;
    border: none;
    opacity: 0.6;
}

.entry-actions .btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Categories Simple - Grid Layout */
.categories-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.category-simple {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--inner-radius);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.category-simple-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.cat-icon {
    font-size: var(--text-xl);
}

.cat-name {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.category-simple-amount {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--glass-border);
}

.category-simple-amount.income { color: var(--accent-green); }
.category-simple-amount.expense { color: var(--accent-red); }

.category-simple-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
    max-height: 200px;
    overflow-y: auto;
    padding-right: var(--space-xs);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-simple-items::-webkit-scrollbar {
    display: none;
}

.category-simple-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.category-simple-item:last-child {
    border-bottom: none;
}

.category-simple-item .month-full {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.category-simple-item .income { color: var(--accent-green); font-weight: var(--font-semibold); }
.category-simple-item .expense { color: var(--accent-red); font-weight: var(--font-semibold); }

@media (max-width: 768px) {
    .table-header-row {
        display: flex;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-xs);
    }
    
    .table-row {
        display: flex;
        padding: var(--space-md) var(--space-lg);
    }
    
    .month-cell,
    .table-header-row .month-cell {
        flex: 1;
        font-size: var(--text-base);
    }
    
    .category-cell,
    .table-header-row .category-cell {
        flex: 0 0 105px;
        display: flex;
        justify-content: center;
    }
    
    .amount-cell,
    .table-header-row .amount-cell {
        flex: 0 0 85px;
        display: flex;
        justify-content: flex-end;
    }
    
    h1 {
        font-size: var(--text-2xl); 
        margin-bottom: 16px; 
        flex-direction: column;
        gap: 8px;
    }
.glass-card {
    padding: var(--space-2xl);
}
    
    .glass-card:has(form) {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .glass-card form {
        max-width: 100%;
    }
    
    .charts-row, .tables-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .action-buttons {
        width: 100%;
        border-radius: var(--card-radius);
        flex-wrap: wrap;
        padding: var(--space-xs);
        gap: 6px;
        background: var(--glass-surface);
        overflow: hidden;
    }
    
    .action-buttons .btn {
        flex: 1;
        min-width: auto;
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
        border-radius: var(--card-radius);
    }
    
    .header-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .header-buttons .btn, 
    .header-buttons .dropdown > .btn,
    .header-buttons #darkModeToggle {
        flex: 1;
        min-width: auto;
        max-width: none;
        height: 40px;
        padding: 0 14px;
        font-size: var(--text-sm);
    }
    
    .header-buttons #darkModeToggle {
        flex: 0 0 auto;
        padding: 0 14px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .stat-card {
        padding: var(--space-lg) var(--space-md);
        border-radius: var(--inner-radius);
    }
    
    .stat-value {
        font-size: var(--text-xl);
    }
    
    .stat-label {
        font-size: var(--text-xs);
    }
    
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .insight-card {
        padding: var(--space-lg) var(--space-md);
    }
    
    .insight-value {
        font-size: var(--text-lg);
    }
    
    .insight-label {
        font-size: 0.7rem;
    }
    
    .year-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .year-card {
        padding: var(--space-lg);
        border-radius: var(--inner-radius);
    }
    
    .year-title {
        font-size: var(--text-xl);
    }
    
    .categories-simple {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .category-simple {
        padding: var(--space-lg);
        border-radius: var(--inner-radius);
    }
    
    .category-simple-items {
        max-height: 150px;
    }
    
    .category-simple-item {
        padding: var(--space-sm) 0;
        font-size: var(--text-sm);
    }
    
    .table {
        font-size: var(--text-sm);
    }
    
    .table th, .table td {
        padding: var(--space-md) var(--space-lg);
    }
    
    .breakdown-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .breakdown-legend {
        width: 100%;
        min-width: auto;
    }
    
    .breakdown-chart {
        height: 150px;
        width: 150px;
    }
    
    .legend-item {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
    
    .chart-column .glass-card {
        min-height: auto;
        padding-bottom: 20px;
    }
    
    .chart-container {
        min-height: 200px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .section-header .btn {
        align-self: flex-end;
    }
}

/* Users Management Page */
.profile-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--inner-radius);
    margin-bottom: 24px;
}

.profile-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--glass-border);
}

.profile-field:last-child {
    border-bottom: none;
}

.profile-field label {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.profile-field span {
    color: var(--text-primary);
    font-weight: 600;
}

.password-form {
    background: rgba(255, 255, 255, 0.02);
    padding: var(--space-xl);
    border-radius: var(--inner-radius);
}

.password-form .form-group {
    margin-bottom: 16px;
}

.password-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.password-form input[type="password"] {
    width: 100%;
    padding: var(--space-lg) var(--space-lg);
    border-radius: var(--small-radius);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: var(--text-md);
}

body:not(.dark-mode) .password-form input[type="password"] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
}

.password-form .btn {
    width: 100%;
    margin-top: 8px;
}

/* Admin Page Styles */
.admin-page {
    max-width: 1200px;
    margin: 0 auto;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 4px;
}

.admin-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.users-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
}

.users-container.users-list {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.user-card {
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    padding: var(--space-lg);
    transition: background var(--transition-base), transform 0.2s ease, box-shadow 0.2s ease;
}

.user-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        0 18px 36px -18px rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .user-card {
    background: rgba(255, 255, 255, 0.6);
}

body:not(.dark-mode) .user-card:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.1),
        0 18px 36px -18px rgba(0, 0, 0, 0.05);
}

.user-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-id {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: monospace;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.user-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-card-meta {
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.user-last-login {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.user-last-login i {
    font-size: 1rem;
}

.user-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.user-card-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
}

.user-card-actions form {
    display: inline-flex;
}

/* Badges */
.current-user-badge,
.admin-badge,
.user-badge,
.status-active,
.status-inactive {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.current-user-badge {
    background: var(--accent-blue);
    color: white;
}

.admin-badge {
    background: var(--accent-purple);
    color: white;
}

.user-badge {
    background: var(--accent-gray);
    color: var(--text-secondary);
}

.status-active {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.status-inactive {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

/* Admin Page Mobile Styles */
@media (max-width: 768px) {
    .admin-page {
        max-width: 100%;
        padding: 0 4px;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
    }

    .users-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .user-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .user-card-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .user-info {
        flex-wrap: wrap;
    }

    .user-status {
        width: 100%;
        justify-content: flex-start;
    }

    .user-card-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .user-card-actions .btn {
        flex: 0 0 auto;
        min-width: 44px;
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .user-card-actions .btn span {
        display: none;
    }
}

@media (max-width: 480px) {
    .user-card-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .user-card-actions .btn {
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
    }

    .user-card-actions .btn span {
        display: none;
    }
}

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

.card-header h3 {
    margin: 0;
}

.empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-2xl);
}

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: var(--space-lg);
}

.form-actions .btn {
    flex: 1;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-blue);
}

.warning-text {
    color: var(--accent-red);
    font-size: var(--text-base);
    margin-bottom: 16px;
    padding: var(--space-md);
    background: rgba(255, 69, 58, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 69, 58, 0.2);
}

/* Admin Link Card - clickable link card */
.admin-link-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-link-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        0 18px 36px -18px rgba(0, 0, 0, 0.3);
}

.admin-link-card h3,
.admin-link-card h4 {
    color: var(--accent-blue);
    margin: 0;
}

.admin-link-card h4 {
    font-size: var(--text-lg);
}

.admin-link-card p {
    color: var(--text-secondary);
    margin: 0;
}

/* Cartes génériques pour formulaires */
.user-card h4 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-card h4 i {
    font-size: 1.25rem;
}

.user-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.user-card .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-card button,
.user-card a.btn {
    align-self: flex-start;
}

/* Carte danger (suppression compte) */
.user-card-danger {
    border-color: rgba(255, 69, 58, 0.3);
}

.user-card-danger h4 {
    color: var(--accent-red);
}

/* Carte historique */
.history-card {
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    padding: var(--space-md);
    transition: background var(--transition-base), transform 0.2s ease, box-shadow 0.2s ease;
}

.history-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

body:not(.dark-mode) .history-card:hover {
    background: rgba(255, 255, 255, 0.8);
}

.history-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.history-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.history-ip {
    font-family: monospace;
}

.history-ua {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Alert Card - Glassmorphism warning style */
.alert-card {
    background: rgba(255, 159, 10, 0.1);
    border-color: rgba(255, 159, 10, 0.3);
}

.alert-card h3 {
    color: var(--accent-orange);
}

body:not(.dark-mode) .alert-card {
    background: rgba(255, 159, 10, 0.08);
}

/* Admin Link Card - Clickable card with hover effect */
.admin-link-card {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-link-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        0 0 0 1px var(--accent-blue);
}

.admin-link-card h3 {
    color: var(--accent-blue);
    margin-bottom: 8px;
}

.admin-link-card p {
    opacity: 0.7;
}

@media (max-width: 768px) {
    /* Prevent horizontal scroll on page */
    body {
        overflow-x: hidden;
    }

    /* Ensure containers don't overflow */
    .container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Glass cards full width on mobile */
    .glass-card {
        width: 100%;
        max-width: 100%;
    }

    /* Stats grid - ensure 2 columns fit */
    .stats-grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ensure stat cards don't overflow */
    .stat-card {
        min-width: 0;
        word-wrap: break-word;
    }

    .stat-label {
        word-wrap: break-word;
        hyphens: auto;
    }

    /* Charts row - single column */
    .charts-row {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .chart-column {
        width: 100%;
        min-width: 0;
    }

    /* Chart container responsive */
    .chart-container {
        width: 100%;
        max-width: 100%;
    }

    /* Year detail table wrapper - centered */
    .year-detail-table {
        width: 100%;
        overflow-x: auto;
    }

    .year-detail-table .table {
        margin: 0 auto;
        width: auto;
        min-width: min(100%, 600px);
    }

    /* Ensure all content fits */
    .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .category-pill {
        padding: var(--space-xs) var(--space-xs);
        font-size: 0.7rem;
        margin: 0;
        white-space: nowrap;
        max-width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .stat-card {
        padding: var(--space-md) var(--space-sm);
        min-width: 0;
    }

    .stat-value {
        font-size: var(--text-md);
        word-break: break-word;
    }

    .stat-label {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .insight-card {
        padding: var(--space-md) var(--space-sm);
        min-width: 0;
    }

    .insight-value {
        font-size: 0.95rem;
    }

    .insight-label {
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    .insight-subtitle {
        font-size: var(--text-xs);
    }

    /* Categories and year summaries */
    .categories-simple {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .category-simple {
        width: 100%;
        min-width: 0;
    }

    .year-summary {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .year-card {
        width: 100%;
        min-width: 0;
    }

    /* Ensure text doesn't overflow */
    .year-income span:last-child,
    .year-expense span:last-child,
    .year-balance span:last-child {
        font-size: var(--text-base);
    }
    
    .header-buttons {
        gap: 6px;
    }
    
    .header-buttons .btn, 
    .header-buttons .dropdown > .btn,
    .header-buttons #darkModeToggle {
        height: 38px;
        padding: 0 12px;
        font-size: var(--text-xs);
    }
    
    .header-buttons #darkModeToggle {
        flex: 0 0 auto;
        padding: 0 12px;
    }
    
    .collapsible-table {
        font-size: var(--text-sm);
    }
    
    .table-header-row {
        display: flex;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-xs);
    }
    
    .table-row {
        display: flex;
        padding: var(--space-md) var(--space-lg);
    }
    
    .month-cell,
    .table-header-row .month-cell {
        flex: 1;
        font-size: var(--text-base);
    }
    
    .category-cell,
    .table-header-row .category-cell {
        flex: 0 0 105px;
        display: flex;
        justify-content: center;
    }
    
    .amount-cell,
    .table-header-row .amount-cell {
        flex: 0 0 85px;
        display: flex;
        justify-content: flex-end;
    }
    
    .year-detail-table {
        overflow-x: auto;
    }
    
    .year-detail-table .table {
        min-width: 700px;
        font-size: var(--text-sm);
    }
    
    .year-detail-table .table th,
    .year-detail-table .table td {
        padding: var(--space-sm) var(--space-xs);
        text-align: center;
    }

    .year-detail-table .table td:last-child {
        min-width: 80px;
    }

    /* Predictions & Year Detail Table Mobile Optimizations */
    .predictions-table,
    .comparison-table,
    .year-table {
        font-size: var(--text-xs);
    }

    .predictions-table th,
    .predictions-table td,
    .comparison-table th,
    .comparison-table td,
    .year-table th,
    .year-table td {
        padding: var(--space-sm) var(--space-xs);
        white-space: nowrap;
    }

    /* Ligne Total: garder le style desktop adapté sur mobile */
    .predictions-table .table-total-row td,
    .comparison-table .table-total-row td,
    .year-table .table-total-row td {
        padding: var(--space-md) var(--space-xs);
        font-weight: 600;
        background: transparent;
    }

    .predictions-table .month-cell,
    .comparison-table .month-cell,
    .year-table .month-cell {
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
    }

    .predictions-table .trend-cell,
    .comparison-table .trend-cell {
        font-size: var(--text-xs);
    }

    /* Compact pills on mobile */
    .predictions-table .category-pill,
    .comparison-table .category-pill,
    .year-table .category-pill {
        padding: var(--space-xs) var(--space-xs);
        font-size: 0.7rem;
        border-radius: var(--radius-sm);
    }

    .predictions-table .balance-pill,
    .comparison-table .balance-pill,
    .year-table .balance-pill {
        padding: var(--space-xs) var(--space-xs);
        font-size: 0.7rem;
    }

    /* Minimized table headers */
    .predictions-table th,
    .comparison-table th,
    .year-table th {
        font-size: 0.65rem;
        letter-spacing: 0;
        padding: var(--space-sm) var(--space-xs);
    }

    /* First column (Mois) MUST BE visible on mobile */
    .predictions-table th:first-child,
    .predictions-table td:first-child,
    .comparison-table th:first-child,
    .comparison-table td:first-child,
    .year-table th:first-child,
    .year-table td:first-child {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static;
        min-width: 75px;
        width: auto;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
        font-size: var(--text-xs);
        white-space: nowrap;
        overflow: visible;
    }

    /* Ensure month badge content is visible */
    .predictions-table .month-badge,
    .comparison-table .month-badge,
    .year-table .month-badge {
        display: inline !important;
        visibility: visible !important;
    }

    .predictions-table .month-abbr,
    .comparison-table .month-abbr,
    .year-table .month-abbr {
        display: inline !important;
        visibility: visible !important;
        color: var(--text-primary);
        font-weight: 500;
    }

    /* Show both month names on mobile for clarity */
    .year-table .month-full,
    .predictions-table .month-full,
    .comparison-table .month-full {
        display: inline;
        font-size: 0.7rem;
        color: var(--text-tertiary);
    }

    .year-table .month-abbr,
    .predictions-table .month-abbr,
    .comparison-table .month-abbr {
        display: inline;
        font-weight: 600;
    }

    /* Month badge compact */
    .month-badge {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .month-badge .month-abbr {
        font-weight: 600;
    }

    .month-badge .month-full {
        font-size: 0.65rem;
        color: var(--text-tertiary);
    }

    /* Also for predictions table */
    .predictions-table .month-cell,
    .comparison-table .month-cell {
        font-size: 0.7rem;
        letter-spacing: -0.02em;
    }

    body:not(.dark-mode) .predictions-table th:first-child,
    body:not(.dark-mode) .predictions-table td:first-child,
    body:not(.dark-mode) .comparison-table th:first-child,
    body:not(.dark-mode) .comparison-table td:first-child,
    body:not(.dark-mode) .year-table th:first-child,
    body:not(.dark-mode) .year-table td:first-child {
        background: rgba(0, 0, 0, 0.08);
    }

    /* Specific column widths for mobile - compact */
    .year-table .col-loyer,
    .year-table .col-panneau,
    .year-table .col-credit,
    .year-table .col-assurance,
    .year-table .col-taxe,
    .year-table .col-travaux {
        min-width: 55px;
        max-width: 65px;
    }

    .year-table .col-solde {
        min-width: 65px;
    }

    .predictions-table th,
    .predictions-table td,
    .comparison-table th,
    .comparison-table td {
        min-width: 55px;
        max-width: 75px;
        font-size: 0.7rem;
        padding: var(--space-xs) var(--space-xs);
    }

    /* Reduce font size for amounts */
    .predictions-table .income,
    .predictions-table .expense,
    .comparison-table .income,
    .comparison-table .expense {
        font-size: 0.7rem;
    }

    /* Compact header text */
    .predictions-table th,
    .comparison-table th {
        font-size: 0.6rem;
        letter-spacing: 0;
        padding: var(--space-sm) var(--space-xs);
    }

    /* Ensure table is wide enough but scrolls */
    .predictions-table,
    .comparison-table,
    .year-table {
        min-width: 100%;
    }

    /* Trend indicators */
    .trend-badge {
        display: inline-block;
        padding: var(--space-xs) var(--space-xs);
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        font-weight: 600;
    }

    .trend-indicator {
        font-weight: 700;
        font-size: var(--text-base);
    }

    .neutral {
        color: var(--text-secondary);
    }

    /* Abbreviate headers on mobile */
    .year-table th.col-assurance::before {
        content: "Ass.";
    }

    .year-table th.col-travaux::before {
        content: "Trav.";
    }

    .year-table th.col-assurance {
        font-size: 0;
    }

    .year-table th.col-travaux {
        font-size: 0;
    }
}

/* ==================== ENHANCED PREDICTIONS STYLES ==================== */

/* Confidence Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--inner-radius);
    border: 1px solid var(--glass-border);
}

.metric-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.metric-value {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

body:not(.dark-mode) .metric-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Confidence Interval Cell */
.ci-cell {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* Reliability Cell and Badge */
.reliability-cell {
    text-align: center;
}

.reliability-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--btn-radius);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    min-width: 50px;
}

.reliability-badge.high {
    background: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

.reliability-badge.medium {
    background: rgba(255, 204, 0, 0.2);
    color: #ffcc00;
}

.reliability-badge.low {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

body:not(.dark-mode) .reliability-badge.high {
    background: rgba(52, 199, 89, 0.15);
    color: #28a745;
}

body:not(.dark-mode) .reliability-badge.medium {
    background: rgba(255, 204, 0, 0.15);
    color: #ffc107;
}

body:not(.dark-mode) .reliability-badge.low {
    background: rgba(255, 59, 48, 0.15);
    color: #dc3545;
}

/* Seasonality Grid */
.seasonality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}

.seasonality-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--inner-radius);
    border: 1px solid var(--glass-border);
    transition: transform 0.2s ease, background 0.2s ease;
}

.seasonality-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}

.seasonality-month {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: center;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--glass-border);
}

.seasonality-data {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.seasonality-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.seasonality-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.seasonality-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.seasonality-item.income .seasonality-value {
    color: #34c759;
}

.seasonality-item.expense .seasonality-value {
    color: #ff3b30;
}

body:not(.dark-mode) .seasonality-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body:not(.dark-mode) .seasonality-card:hover {
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .seasonality-card {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Projection Summary */
.projection-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.projection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.projection-row.small {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.projection-label {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.projection-row.small .projection-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.projection-value {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.projection-value.positive {
    color: #34c759;
}

.projection-value.negative {
    color: #ff3b30;
}

body:not(.dark-mode) .projection-value.positive {
    color: #28a745;
}

body:not(.dark-mode) .projection-value.negative {
    color: #dc3545;
}

.projection-divider {
    height: 1px;
    background: var(--glass-border);
}

body:not(.dark-mode) .projection-divider {
    background: rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .seasonality-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .seasonality-card {
        padding: var(--space-sm);
    }

    .seasonality-month {
        font-size: var(--text-sm);
    }

    .seasonality-label {
        font-size: 0.65rem;
    }

    .seasonality-value {
        font-size: var(--text-xs);
    }
}

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

    .seasonality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Very small screens - extra compact */
@media (max-width: 380px) {
    .predictions-main-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .predictions-mini-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .predictions-mini-stats .stat-card.mini .stat-label {
        font-size: 0.6rem;
    }

    .year-table .col-loyer,
    .year-table .col-panneau,
    .year-table .col-credit,
    .year-table .col-assurance,
    .year-table .col-taxe,
    .year-table .col-travaux {
        min-width: 50px;
    }
}

/* ==================== TOP HEADER ==================== */

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: var(--space-md) var(--space-2xl);
    z-index: 1100;
    display: flex;
    align-items: center;
}

.top-header .sidebar-toggle {
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    width: 36px;
    height: 36px;
}

.top-header .sidebar-toggle span {
    width: 20px;
    height: 2px;
    left: 50%;
}

.top-header .sidebar-toggle span:nth-child(1) {
    top: 10px;
}

.top-header .sidebar-toggle span:nth-child(2) {
    top: 50%;
}

.top-header .sidebar-toggle span:nth-child(3) {
    bottom: 10px;
}

.top-header .app-layout.sidebar-open .sidebar-toggle span:nth-child(1),
.top-header .app-layout.sidebar-hidden .sidebar-toggle span:nth-child(1) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.top-header .app-layout.sidebar-open .sidebar-toggle span:nth-child(2),
.top-header .app-layout.sidebar-hidden .sidebar-toggle span:nth-child(2) {
    opacity: 0;
}

.top-header .app-layout.sidebar-open .sidebar-toggle span:nth-child(3),
.top-header .app-layout.sidebar-hidden .sidebar-toggle span:nth-child(3) {
    bottom: 50%;
    transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

body:not(.dark-mode) .top-header .sidebar-toggle {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ==================== SIDEBAR ==================== */

/* App Layout */
.app-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    padding-top: 100px; /* Espace pour le header fixe */
    z-index: 1;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-right: 1px solid var(--glass-border);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
    transform: translateX(0);
}

/* Sidebar masquée sur desktop */
@media (min-width: 768px) {
    .sidebar.sidebar-hidden {
        transform: translateX(-100%);
    }
}

body:not(.dark-mode) .sidebar {
    background: rgba(255, 255, 255, 0.7);
    border-right-color: rgba(0, 0, 0, 0.08);
}

/* Sidebar Header */
.sidebar-header {
    padding: var(--space-xl) var(--space-lg) var(--space-lg) 64px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-logo {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Bouton hamburger */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-xl);
    transition: all var(--transition-default);
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    position: relative;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

.sidebar-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-xs);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all var(--transition-default);
}

.sidebar-toggle span:nth-child(1) {
    top: 10px;
}

.sidebar-toggle span:nth-child(2) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.sidebar-toggle span:nth-child(3) {
    bottom: 10px;
}

/* Bouton en X quand sidebar est ouverte */
.app-layout.sidebar-open .sidebar-toggle span:nth-child(1),
.app-layout.sidebar-hidden .sidebar-toggle span:nth-child(1) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.app-layout.sidebar-open .sidebar-toggle span:nth-child(2),
.app-layout.sidebar-hidden .sidebar-toggle span:nth-child(2) {
    opacity: 0;
}

.app-layout.sidebar-open .sidebar-toggle span:nth-child(3),
.app-layout.sidebar-hidden .sidebar-toggle span:nth-child(3) {
    bottom: 50%;
    transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

/* Sidebar masquée sur desktop */
@media (min-width: 768px) {
    .sidebar.sidebar-hidden {
        transform: translateX(-100%);
    }
}

body:not(.dark-mode) .sidebar-toggle {
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Light mode sidebar-header */
body:not(.dark-mode) .sidebar-header {
    background: rgba(255, 255, 255, 0.3);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: var(--space-xl) var(--space-md);
    overflow-y: auto;
}

/* Sidebar Items */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--small-radius);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-instant);
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-weight: 500;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

.sidebar-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.sidebar-text {
    flex: 1;
}

/* Sidebar Dropdown */
.sidebar-dropdown {
    margin-bottom: 4px;
}

.sidebar-dropdown-trigger {
    cursor: pointer;
    justify-content: space-between;
}

.sidebar-dropdown.open .sidebar-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    padding-top: 8px;
}

.dropdown-arrow {
    font-size: var(--text-xl);
    transition: transform var(--transition-instant);
    opacity: 0.8;
    color: var(--text-primary);
}

.sidebar-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-dropdown-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 20px;
    transition: all var(--transition-smooth);
}

.sidebar-subitem {
    font-size: var(--text-base);
    padding: var(--space-md) var(--space-md);
}

.sidebar-subitem:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: var(--space-xl) var(--space-md);
    border-top: 1px solid var(--glass-border);
}

.sidebar-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: 4px;
}

.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-logout {
    color: var(--accent-red);
}

.sidebar-logout:hover {
    background: rgba(255, 69, 58, 0.15);
    color: var(--accent-red);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 260px;
    transition: margin-left var(--transition-smooth);
    padding-top: 0;
    position: relative;
    z-index: 1200;
}

.main-content .container {
    max-width: 1240px;
    padding: 0 var(--space-2xl);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .app-layout {
        padding-top: 1px; /* Réduire le padding sur mobile */
    }

    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        z-index: 1300;
    }

    .header-section {
        margin-top: 0;
    }

    .sidebar-toggle {
        display: block;
    }

    .app-layout.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .main-content .container {
        padding: var(--space-2xl) var(--space-lg);
    }

    .header-section h1 {
        font-size: var(--text-2xl);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
    }
}

/* Light Mode Sidebar */
body:not(.dark-mode) .sidebar-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .sidebar-item.active {
    background: var(--accent-blue);
    color: white;
}

body:not(.dark-mode) .sidebar-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .sidebar-logout:hover {
    background: rgba(255, 69, 58, 0.1);
}

body:not(.dark-mode) .sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .sidebar-subitem:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ==================== AUTHENTICATION PAGES ==================== */

/* Auth Container - Centered layout for login/register */
.auth-container {
    max-width: 420px;
    margin: 80px auto;
    padding: 0 24px;
}

/* Auth Card - Uses same glassmorphism as glass-card */
.auth-card {
    background: var(--glass-surface);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    padding: var(--space-3xl);
    box-shadow:
        0 25px 50px -12px var(--glass-shadow),
        inset 0 1px 0 0 var(--glass-highlight),
        inset 0 0 40px 0 rgba(255, 255, 255, 0.03);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.auth-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        inset 0 1px 0 0 rgba(255,255,255,0.12),
        inset 0 0 50px 0 rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.1);
}

body:not(.dark-mode) .auth-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
}

.auth-card h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    text-align: center;
    background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.auth-card .form-group {
    margin-bottom: 20px;
}

.auth-card .form-group:last-of-type {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 0;
}

.auth-card .btn {
    width: 100%;
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--text-md);
    font-weight: 500;
    border-radius: var(--btn-radius);
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.auth-link a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    transition: opacity var(--transition-instant);
}

.auth-link a:hover {
    opacity: 0.8;
}

.auth-card .help-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 6px;
    margin-bottom: 0;
}

/* Checkbox Label Style */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

/* Pre/Code blocks - Glassmorphism style */
pre, code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-size: var(--text-base);
}

pre {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--small-radius);
    padding: var(--space-lg);
    overflow-x: auto;
    color: var(--text-primary);
}

body:not(.dark-mode) pre {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

/* Alert Messages - Glassmorphism style */
.alert {
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--small-radius);
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    animation: alertSlideIn 0.3s ease;
}

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

.alert-success {
    background: rgba(48, 209, 88, 0.15);
    color: var(--accent-green);
    border-color: rgba(48, 209, 88, 0.3);
}

.alert-error,
.alert-danger {
    background: rgba(255, 69, 58, 0.15);
    color: var(--accent-red);
    border-color: rgba(255, 69, 58, 0.3);
}

.alert-warning {
    background: rgba(255, 159, 10, 0.15);
    color: var(--accent-orange);
    border-color: rgba(255, 159, 10, 0.3);
}

.alert-info {
    background: rgba(10, 132, 255, 0.15);
    color: var(--accent-blue);
    border-color: rgba(10, 132, 255, 0.3);
}

body:not(.dark-mode) .alert-success {
    background: rgba(48, 209, 88, 0.1);
}

body:not(.dark-mode) .alert-error,
body:not(.dark-mode) .alert-danger {
    background: rgba(255, 69, 58, 0.1);
}

body:not(.dark-mode) .alert-warning {
    background: rgba(255, 159, 10, 0.1);
}

body:not(.dark-mode) .alert-info {
    background: rgba(10, 132, 255, 0.1);
}

/* Empty State - Consistent glassmorphism */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
    color: var(--text-secondary);
}

.empty-state p {
    font-size: var(--text-lg);
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .auth-container {
        margin: 60px auto 40px;
        padding: 0 16px;
    }

    .auth-card {
        padding: var(--space-2xl) var(--space-2xl);
        border-radius: var(--card-radius);
    }

    .auth-card h1 {
        font-size: var(--text-2xl);
        margin-bottom: 24px;
    }

    .auth-card .form-group {
        margin-bottom: 16px;
    }

    .auth-card .btn {
        padding: var(--space-md) var(--space-2xl);
    }
}

/* ==================== TABLE SCROLL WRAPPER ==================== */
.table-scroll-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding: 0 var(--card-padding);
}

.table-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xs);
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xs);
}

/* Prevent page scroll - only table scrolls */
@media (max-width: 768px) {
    .table-scroll-wrapper {
        margin: 0;
        padding: 0 var(--card-padding);
        width: 100%;
        border-radius: 0;
    }

    .table-scroll-wrapper::before {
        content: '← Glisser →';
        position: absolute;
        top: -28px;
        right: var(--space-sm);
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        background: var(--glass-surface);
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--small-radius);
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        border: 1px solid var(--glass-border);
        z-index: 10;
        animation: scrollHint 3s ease-in-out 2;
    }

    @keyframes scrollHint {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }

    /* Hide scroll hint after user interaction */
    .table-scroll-wrapper:hover::before,
    .table-scroll-wrapper:active::before {
        display: none;
    }
}

/* ==================== MOBILE OPTIMIZATIONS ==================== */

/* Stats grid with mini cards - better mobile layout */
.stats-grid:has(.stat-card.mini) {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* Mobile Tables - Horizontal Scroll with visual cue */
@media (max-width: 768px) {
    .year-detail-table {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .year-detail-table::before {
        content: '← Glisser →';
        position: absolute;
        top: -25px;
        right: 10px;
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        background: var(--glass-surface);
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--small-radius);
        backdrop-filter: blur(var(--blur-sm));
    }

    .year-detail-table .table {
        min-width: 700px;
        font-size: var(--text-sm);
    }

    .year-detail-table .table th,
    .year-detail-table .table td {
        padding: var(--space-md) var(--space-sm);
        white-space: nowrap;
    }

    /* Compact category pills in tables */
    .year-detail-table .category-pill {
        padding: var(--space-xs) var(--space-xs);
        font-size: var(--text-xs);
    }

    .year-detail-table .balance-pill {
        padding: var(--space-xs) var(--space-xs);
        font-size: var(--text-xs);
    }

    /* FORCE first column (Mois) to be visible in year-detail-table */
    .year-detail-table .table th:first-child,
    .year-detail-table .table td:first-child {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 85px !important;
        max-width: none !important;
        width: auto !important;
        color: var(--text-primary) !important;
        font-size: 0.75rem !important;
        position: static !important;
    }

    /* FORCE first column for predictions and comparison tables */
    .predictions-table th:first-child,
    .predictions-table td:first-child,
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 85px !important;
        max-width: none !important;
        width: auto !important;
        color: var(--text-primary) !important;
        font-size: 0.75rem !important;
        position: static !important;
    }

    /* Ensure month-cell is always visible */
    td.month-cell {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text-primary) !important;
        min-width: 85px !important;
    }

    /* Ensure tables are wide enough to scroll */
    .year-detail-table .table,
    .predictions-table,
    .comparison-table {
        min-width: 650px !important;
        width: auto !important;
    }

    /* Mobile stats grid - 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .stats-grid:has(.stat-card.mini) {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-card {
        padding: var(--space-md);
        border-radius: var(--small-radius);
    }

    .stat-card.mini {
        padding: var(--space-sm);
        border-radius: var(--radius-xl);
    }

    .stat-card.mini .stat-label {
        font-size: var(--text-xs);
        letter-spacing: 0;
    }

    .stat-card.mini .stat-value {
        font-size: var(--text-sm);
    }

    .stat-value {
        font-size: var(--text-lg);
    }

    .stat-label {
        font-size: var(--text-xs);
    }

    /* Insights grid - 2 columns on mobile */
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .insight-card {
        padding: var(--space-sm);
    }

    .insight-label {
        font-size: 0.65rem;
    }

    .insight-value {
        font-size: var(--text-md);
    }

    .insight-subtitle {
        font-size: var(--text-xs);
    }

    /* Charts on mobile - override inline styles */
    .chart-container {
        min-height: 220px !important;
        height: 220px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .chart-container canvas {
        max-height: 220px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Breakdown content */
    .breakdown-content {
        width: 100%;
    }

    .breakdown-chart {
        width: 150px !important;
        height: 150px !important;
        flex-shrink: 0;
    }

    .charts-row {
        grid-template-columns: 1fr;
    }

    .breakdown-content {
        flex-direction: column;
        gap: var(--space-md);
    }

    .breakdown-chart {
        height: 150px;
        width: 150px;
    }

    .breakdown-legend {
        width: 100%;
    }

    /* Typography adjustments */
    h1 {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-lg);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }

    /* Year cards mobile */
    .year-summary {
        grid-template-columns: 1fr;
    }

    .year-title {
        font-size: var(--text-xl);
    }

    /* Category simple mobile */
    .categories-simple {
        grid-template-columns: 1fr;
    }

    .category-simple {
        padding: var(--space-md);
    }

    .category-simple-amount {
        font-size: var(--text-lg);
    }

    /* Glass cards padding reduction and overflow fix */
    .glass-card {
        padding: var(--space-lg);
        overflow: hidden;
    }

    .glass-card:has(.table-scroll-wrapper) {
        padding: var(--space-lg) 0;
    }

    .glass-card:has(.table-scroll-wrapper) h3 {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }

    /* Table wrapper with equal side padding */
    .table-scroll-wrapper {
        padding: 0 var(--space-md);
    }

    /* Section header mobile */
    .section-header {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .section-header .btn {
        align-self: flex-end;
    }

    /* Alert card mobile */
    .alert-card h3 {
        font-size: var(--text-md);
    }

    /* Container padding reduction */
    .container {
        padding: var(--space-lg) var(--space-md);
    }

    /* Main content padding */
    .main-content .container {
        padding: var(--space-lg) var(--space-md);
    }

    /* Table header row mobile */
    .table-header-row {
        padding: var(--space-sm);
        font-size: var(--text-xs);
    }

    .table-row {
        padding: var(--space-sm);
    }

    /* Collapsible table adjustments */
    .collapsible-table .table-body {
        max-height: 250px;
    }

    /* Auth cards mobile */
    .auth-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .auth-card h1 {
        font-size: var(--text-2xl);
    }

    /* Action buttons mobile */
    .action-buttons {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: var(--space-xs);
    }

    .action-buttons .btn {
        flex: 1;
        min-width: 120px;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .stats-grid:has(.stat-card.mini) {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card.mini .stat-label {
        font-size: 0.65rem;
    }

    .year-detail-table .table {
        min-width: 600px;
    }
}

/* ============================================
   Export/Import Page Styles
   ============================================ */

/* Export Grid - Enhanced spacing for consistency with other grids */
.export-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px; /* Consistent with charts-row */
    margin-bottom: var(--space-3xl);
    align-items: stretch;
}

/* Glass card styling within export grid - force equal height */
.export-grid .glass-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Override the :has(form) media query for export grid */
@media (min-width: 768px) {
    .export-grid .glass-card:has(form) {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Glass card full width - takes full width in grid */
.glass-card-full {
    grid-column: 1 / -1;
}

/* Export Card - center content and buttons vertically */
.export-card {
    justify-content: center;
}

.import-card {
    justify-content: flex-start;
}

/* Export content wrapper - keep header at top while centering buttons */
.export-card h3,
.export-card p {
    flex: 0 0 auto;
}

/* Export buttons container - improved flex layout */
.export-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: auto 0; /* Center vertically */
}

.export-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%; /* Full width buttons for better touch targets */
}

/* Import form - ensure proper spacing */
.import-card form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.import-card .form-group {
    margin-bottom: var(--space-xl);
}

/* Block button for import */
.btn-block {
    width: 100%;
    margin-top: auto;
}

/* ============================================
   Collapsible Format Info (Details/Summary)
   ============================================ */

.format-details {
    width: 100%;
}

.format-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    user-select: none;
    transition: all var(--transition-fast);
}

/* Remove default marker from summary */
.format-details > summary {
    list-style: none;
}

.format-details > summary::-webkit-details-marker {
    display: none;
}

.format-summary-text {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.format-chevron {
    transition: transform var(--transition-base);
    font-size: var(--text-lg);
}

/* Chevron rotation when expanded */
.format-details[open] .format-chevron {
    transform: rotate(180deg);
}

/* Format content container */
.format-content {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--glass-border);
}

/* Code block styling */
.code-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--inner-radius);
    padding: var(--space-lg);
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Light mode adjustments */
body:not(.dark-mode) .code-block {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet - 768px and below */
@media (max-width: 768px) {
    .export-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        margin-bottom: var(--space-2xl);
    }

    .glass-card-full {
        grid-column: span 1;
    }
}

/* Small mobile - 480px and below */
@media (max-width: 480px) {
    .export-grid {
        gap: var(--space-md);
    }

    /* Adjust format summary for small screens */
    .format-summary-text {
        font-size: var(--text-lg);
    }

    .code-block {
        padding: var(--space-md);
        font-size: 0.85rem;
    }
}