:root {
    /* Landing page compatible colors */
    --primary-color: #3B82F6;
    --primary-dark: #1D4ED8;
    --primary-light: #93C5FD;
    --secondary-color: #10B981;
    --secondary-dark: #059669;
    --warning-color: #F59E0B;
    --danger-color: #EF4444;
    --success-color: #10B981;
    --text-color: #1F2937;
    --text-light: #6B7280;
    --background-color: #F9FAFB;
    --card-color: #FFFFFF;
    --border-color: #E5E7EB;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
    
    /* Dashboard specific colors */
    --excellent-color: #059669;
    --good-color: #10B981;
    --fair-color: #F59E0B;
    --poor-color: #EF4444;
    --critical-color: #DC2626;
    --neutral-color: #6B7280;
    
    /* Modern transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern Calculator Hero Section - Compact */
.calculator-hero {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    color: var(--text-color);
    padding: 1.5rem 0;
    margin-top: 70px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.calculator-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="200" cy="200" r="2" fill="%233B82F620"/><circle cx="400" cy="100" r="1" fill="%233B82F630"/><circle cx="600" cy="300" r="2" fill="%233B82F620"/></svg>') repeat;
    animation: float 20s linear infinite;
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-10px) translateX(5px); }
    100% { transform: translateY(0px) translateX(0px); }
}

.calculator-intro-compact {
    position: relative;
    z-index: 2;
    margin-bottom: 1rem;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.calculator-title-compact {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    flex-shrink: 0;
}

/* Language selector in header - elegant and compact */
.language-selector-header {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-color);
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    box-shadow: var(--shadow);
    cursor: pointer;
    min-width: 80px;
    max-width: 120px;
}

.language-selector-header:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.language-selector-header:hover {
    border-color: var(--primary-color);
}

/* Styling for disabled language options in header */
.language-selector-header option:disabled {
    color: #999;
    background-color: #f5f5f5;
    font-style: italic;
}

.calculator-title-compact i {
    font-size: 1.75rem;
    color: var(--primary-color);
}

.calculator-benefits-inline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.benefit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.benefit-badge i {
    color: var(--primary-color);
    font-size: 1rem;
}

.header-controls-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    max-width: 100%;
}

.header-controls-modern .btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 1;
}

.language-selector-modern {
    padding: 4px 6px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-color);
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.75rem;
    transition: var(--transition);
    min-width: auto;
    width: auto;
    max-width: 90px;
    flex-shrink: 1;
    box-shadow: var(--shadow);
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-selector-modern:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Styling for disabled language options */
.language-selector-modern option:disabled {
    color: #999;
    background-color: #f5f5f5;
    font-style: italic;
}

/* Modern Main Container */
.calculator-main-container {
    background: var(--background-color);
    min-height: 100vh;
    padding: 2rem 0;
}

/* Modern Progress Indicator */
.form-progress-modern {
    background: var(--card-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-header h3 {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.progress-header h3 i {
    color: var(--primary-color);
}

.progress-text {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Modern Input Section */
.input-section-modern {
    display: grid;
    gap: 2rem;
}

/* Enhanced Card Styles */
.card {
    background: var(--card-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 1.5rem;
    border-bottom: none;
}

.card-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h2 i {
    font-size: 1.25rem;
}

.card-content {
    padding: 2rem;
}

/* Enhanced Form Styles */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: var(--card-color);
    color: var(--text-color);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input:hover,
.form-group select:hover {
    border-color: var(--primary-light);
}

/* Enhanced Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--card-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Responsive Design for Calculator */
@media (max-width: 768px) {
    .calculator-title-compact {
        font-size: 1.5rem;
    }
    
    .title-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .language-selector-header {
        font-size: 0.8rem;
        padding: 6px 10px;
        min-width: 70px;
        max-width: 100px;
    }
    
    .calculator-benefits-inline {
        justify-content: center;
    }
    
    .benefit-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .header-controls-modern {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
        overflow-x: visible;
    }
    
    .header-controls-modern .btn {
        width: auto;
        justify-content: center;
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
        white-space: nowrap;
    }
    
    .language-selector-modern {
        font-size: 0.7rem;
        padding: 3px 5px;
        max-width: 85px;
        min-width: 60px;
    }
    
    .calculator-hero {
        padding: 1rem 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Extra compact for very small screens */
@media (max-width: 600px) {
    .header-controls-modern {
        gap: 0.2rem;
    }
    
    .header-controls-modern .btn {
        padding: 0.3rem 0.4rem;
        font-size: 0.65rem;
    }
    
    .language-selector-modern {
        font-size: 0.65rem;
        padding: 2px 4px;
        max-width: 75px;
        min-width: 55px;
    }
    
    .language-selector-header {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-width: 65px;
        max-width: 90px;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Add smooth scrolling for the entire document */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    color: var(--text-color);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

h5 {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block; /* Make h5 inline-block to align with button */
    vertical-align: middle; /* Align vertically with button */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var (--text-color);
}

pre {
    tab-size: 4;
}

.tab {
    display: inline-block;
    margin-left: 40px;
}

span {
    font-style: italic;
    font-size: smaller;
    color: var(--text-light);
}

form {
    background-color: var(--card-color);
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--shadow);
}

#datos-form {
    margin-top: 40px; /* Further reduced for tighter layout */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-color);
}

input[type="number"] {
    width: auto;  /* Let the control size naturally with spinners */
    min-width: 80px; /* Enough space for about 6 digits */
    max-width: 150px; /* Allow slight expansion if needed */
    padding: 5px 8px;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
}

input[type="date"] {
    width: 120px !important;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-sizing: border-box;
}

/* Input validation styles */
.input-error {
    border-color: var(--danger-color) !important;
    background-color: rgba(239, 68, 68, 0.05);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.input-warning {
    border-color: var(--warning-color) !important;
    background-color: rgba(245, 158, 11, 0.05);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}

.input-focused {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.add-button {
    background-color: var(--secondary-color);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    margin-top: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.remove-button {
    background-color: transparent;
    color: var(--danger-color);
    border: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
}

#resultados {
    margin-top: 10px;
    padding: 5px;
    background-color: var(--card-color);
    border-radius: 5px;
    box-shadow: var(--shadow);
}

.asset-group {
    display: grid;
    /* Changed from auto to 1fr so columns expand properly with wrapping */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.asset {
    position: relative;
    flex: 0 1 auto;
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-top: 0;
    margin: 0;
    background-color: #f9f9f9;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 100%;
}

.debt-group {
    display: flex;
    justify-content: flex-start;
    max-width: 800px;
    margin: 0;
    padding: 0;
}

.debt {
    position: relative;
    flex: 0 1 auto;
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-top: 0;
    margin: 0;
}

p {
    margin-bottom: var(--spacing-md);
}

.app-container {
    width: 95%; /* Increase from max-width to width for more consistent sizing */
    max-width: 1600px; /* Increased from 1200px to allow more space */
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl); /* Restored to original for proper section spacing */
}

/* Legacy app-header - hidden in favor of modern navbar */
.app-header {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
}

.logo h1 {
    font-size: 1.2rem;
    margin: 0;
}

.header-controls {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.language-selector {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    min-width: auto;
    font-weight: 500;
    margin-left: var(--spacing-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 12px;
    padding-right: 20px;
}

.language-selector:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.language-selector:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s, transform 0.1s;
}

.action-button:hover {
    background-color: var(--primary-color);
    color: white;
}

.action-button:active {
    transform: translateY(1px);
}

.card {
    background-color: var(--card-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-light);
}

.card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.collapse-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s;
}

.collapse-toggle:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.form-group {
    margin-bottom: var(--spacing-md);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 8px; /* Add consistent spacing between elements */
}

.form-group label {
    width: 250px; /* Increased to accommodate longer text */
    margin-right: 10px;
    display: block;
    line-height: 1.4;
    flex-shrink: 0; /* Prevent label from shrinking */
}

.form-group input {
    flex: 0 0 auto; /* No growth or shrink */
    min-width: 80px;
    max-width: 150px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ===== Dashboard reset / defensive overrides (scoped) =====
   Simple overrides to ensure dashboard uses available space efficiently
*/

/* Ensure dashboard components use full width */
#resultados .financial-dashboard,
#resultados .charts-container,
#resultados .kpi-grid {
    width: 100% !important;
    max-width: none !important;
}

/* Remove problematic transforms that might shift content */
#resultados [style*="transform"] {
    transform: none !important;
}

/* End of dashboard reset block */

/* === ULTIMATE SOLUTION: Vertical Header + Full Dashboard Width === */
/* Vertical layout: Title + Score + Description stacked on top, Dashboard content gets full width below */

#resultados {
    /* Match the visual alignment of other sections */
    width: 100% !important;
    max-width: var(--container-max-width, 1200px) !important;
    margin: 0 auto !important;
    padding: 0 !important; /* No padding on container */
    
    /* Visual styling to match other sections */
    background: var(--background-light, #f8f9fa) !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent any content from overflowing */
}

/* Mobile specific adjustments for resultados container */
@media (max-width: 768px) {
    #resultados {
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 2px !important;
        overflow-x: hidden !important;
    }
}

/* Dashboard content uses FULL blue container width */
#resultados .financial-dashboard {
    width: 100% !important;
    max-width: none !important;
    padding: 30px 20px !important; /* Padding only on content */
    margin: 0 !important;
}

/* SIMPLE LAYOUT FIX: Force vertical stacking without changing content structure */
#resultados .financial-dashboard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
}

/* Header takes full width and forces content below */
#resultados .dashboard-header-vertical {
    width: 100% !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    padding: 30px 20px !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    border-radius: 16px !important;
    border: 1px solid #e1f5fe !important;
}

/* Dashboard tabs and content below header */
#resultados .dashboard-tabs {
    width: 100% !important;
    order: 2 !important;
    flex-grow: 1 !important;
}

/* Ensure dashboard tabs and content use full width and flow below header */
#resultados .dashboard-tabs,
#resultados .tab-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important; /* Remove padding from tabs container */
    margin: 0 !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
}

/* Tab panes should follow normal tab behavior - don't force display */
#resultados .tab-pane {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    clear: both !important;
    position: relative !important;
    /* Let normal tab-pane padding apply */
}

/* Remove all internal section containers padding that constrains width */
#resultados .section-container,
#resultados .tab-pane > div {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Override JavaScript section padding */
#resultados [style*="padding: 25px"],
#resultados .section-container[style*="padding: 25px"],
#resultados [style*="padding:25px"],
#resultados .section-container[style*="padding:25px"] {
    padding: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Aggressively override JavaScript inline styles that constrain width */
#resultados .charts-container[style] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2px !important;
    margin-top: 5px !important;
    padding: 0 !important; /* Remove the constraining 10px padding */
    max-width: none !important;
    width: 100% !important;
}

/* Target specific inline style patterns from script.js */
#resultados .charts-container[style*="padding: 0 10px"] {
    padding: 0 !important; /* Completely remove this constraint */
}

#resultados .charts-container[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
}

/* Optimize KPI grid for maximum space usage - Mobile friendly */
#resultados .financial-dashboard .kpi-grid,
#resultados .tab-pane .kpi-grid,
#resultados .section-container .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Mobile KPI grid optimizations */
@media (max-width: 768px) {
    #resultados .charts-container[style] {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        margin-top: 2px !important;
        padding: 0 !important;
    }
    
    /* Aggressive mobile section container overrides */
    #resultados .section-container,
    #resultados .section-container[style*="padding"],
    #resultados [style*="padding: 25px"],
    #resultados [style*="padding:25px"] {
        padding: 0px !important;
        margin-bottom: 0px !important;
        border-radius: 2px !important;
    }
    
    /* Mobile chart container overrides - zero padding */
    #resultados .chart-section,
    #resultados .chart-wrapper,
    #resultados .charts-container {
        padding: 0px !important;
        margin: 0px !important;
    }
    
    #resultados .financial-dashboard .kpi-grid,
    #resultados .tab-pane .kpi-grid,
    #resultados .section-container .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 1.05rem;
        background: #f7f9fc;
        padding: 0;
    }
    .container {
        padding: 0 0;
        max-width: 100vw;
    }
    h1, h2, h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    .form-section {
        margin: 0.5rem 0;
        padding: 0;
    }
    .form-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        padding: 1rem 0.75rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .form-label {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: #1a2330;
        letter-spacing: 0.01em;
    }
    .form-input-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    .form-input {
        flex: 1;
        font-size: 1.15rem;
        padding: 12px 10px;
        border-radius: 10px;
        border: 1.5px solid #e5e7eb;
        background: #f9fafb;
        color: #222;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        outline: none;
        transition: border 0.2s;
    }
    .form-input:focus {
        border-color: #3b82f6;
        background: #fff;
    }
    .currency-symbol, .info-icon, .question-icon {
        font-size: 1.15rem;
        color: #6b7280;
        margin-left: 2px;
        margin-right: 2px;
    }
    .chart-btn {
        background: linear-gradient(90deg,#10b981,#3b82f6);
        color: #fff;
        border: none;
        border-radius: 8px;
        min-width: 40px;
        height: 40px;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 4px rgba(59,130,246,0.08);
        margin-left: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .chart-btn:active {
        background: linear-gradient(90deg,#3b82f6,#10b981);
    }
    .form-card {
        width: 100%;
        box-sizing: border-box;
    }
    .form-label, .form-input-row {
        width: 100%;
    }
    .form-input-row > * {
        flex-shrink: 0;
    }
    .form-input-row .form-input {
        min-width: 0;
    }
    .form-input-row .currency-symbol {
        margin-left: 0.25rem;
    }
    .form-input-row .info-icon, .form-input-row .question-icon {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    .form-section {
        padding: 0;
        margin: 0.5rem 0;
    }
    .form-card:last-child {
        margin-bottom: 0;
    }
    /* Remove grid for mobile */
    .form-row {
        display: block !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* Mobile-specific form group styles */
    .form-group {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .form-group label {
        width: auto;
        flex: 1;
        margin-right: 8px;
        margin-bottom: 0;
        font-size: 0.9rem;
        min-width: 120px;
    }

    .form-group input,
    .form-group select {
        width: auto;
        flex: 0 0 auto;
        max-width: 120px;
        min-width: 80px;
        padding: 8px 10px;
        font-size: 0.9rem;
        height: 36px;
    }

    .input-wrapper {
        width: auto;
        flex: 0 0 auto;
        max-width: 140px;
    }

    .input-wrapper input {
        max-width: 100px;
    }

    .form-group input[type="checkbox"] {
        width: auto;
        flex: none;
        margin-right: 8px;
        max-width: none;
        height: auto;
    }

    .currency-label {
        margin-left: 4px !important;
        white-space: nowrap !important;
        font-size: 0.9rem !important;
    }
    
    /* Hide unnecessary desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Make main calculate button taller and more prominent on mobile */
    #calculate-button.primary-button {
        padding: 18px 24px !important;
        font-size: 1.2rem !important;
        min-height: 56px !important;
        font-weight: 600 !important;
        margin: 15px 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
}

/* Enhanced KPI cards - Optimized for mobile */
#resultados .kpi-card {
    padding: 12px !important;
    min-height: auto !important;
    min-width: 140px !important;
    max-width: none !important;
    border-radius: 8px !important;
    margin: 3px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
}

/* Mobile KPI optimizations */
@media (max-width: 768px) {
    #resultados .kpi-card {
        padding: 8px !important;
        min-width: 120px !important;
        margin: 2px !important;
        font-size: 0.9em !important;
    }
    
    /* Responsive font sizes for mobile */
    .kpi-value {
        font-size: 1.6rem !important; /* Reduced from 2rem */
        line-height: 1.0 !important;
    }
    
    .kpi-subtitle {
        font-size: 0.9rem !important; /* Slightly smaller */
    }
    
    .traffic-light-label {
        font-size: 0.9rem !important; /* Smaller for mobile */
    }
}

@media (max-width: 480px) {
    #resultados .financial-dashboard .kpi-grid,
    #resultados .tab-pane .kpi-grid,
    #resultados .section-container .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    #resultados .kpi-card {
        padding: 6px !important;
        min-width: 100px !important;
        margin: 1px !important;
        font-size: 0.8em !important;
    }
    
    /* Extra small mobile - even smaller font sizes */
    .kpi-value {
        font-size: 1.2rem !important; /* Further reduced for small screens */
        line-height: 0.95 !important;
        margin-bottom: 2px !important;
    }
    
    .kpi-subtitle {
        font-size: 0.8rem !important; /* Very compact */
        margin-bottom: 4px !important;
    }
    
    .traffic-light-label {
        font-size: 0.8rem !important; /* Tiny for small screens */
    }
    
    .kpi-title {
        font-size: 0.9rem !important; /* Make title smaller too */
    }
}

/* Responsive design to match container behavior */
@media (max-width: 1400px) {
    #resultados .financial-dashboard .kpi-grid,
    #resultados .tab-pane .kpi-grid,
    #resultados .section-container .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 1200px) {
    #resultados .financial-dashboard,
    #resultados .dashboard-tabs,
    #resultados .tab-content,
    #resultados .tab-pane {
        padding: 16px 8px !important;
    }
    
    #resultados .section-container {
        padding: 8px !important;
    }
    
    #resultados .financial-dashboard .kpi-grid,
    #resultados .tab-pane .kpi-grid,
    #resultados .section-container .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 16px !important;
    }
    
    #resultados .charts-container {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    #resultados .financial-dashboard,
    #resultados .dashboard-tabs,
    #resultados .tab-content,
    #resultados .tab-pane {
        padding: 8px 2px !important;
    }
    
    #resultados .section-container {
        padding: 4px !important;
    }
    
    #resultados .financial-dashboard .kpi-grid,
    #resultados .tab-pane .kpi-grid,
    #resultados .section-container .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }
    
    #resultados .charts-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Chart optimizations for extra small devices */
    #resultados .charts-container .chart-container,
    #resultados .charts-container .kpi-grid,
    #resultados .charts-container .chart-wrapper {
        margin-bottom: 16px !important;
        min-height: 200px !important;
    }
    
    #resultados .charts-container .chart-container canvas,
    #resultados .charts-container .chart-wrapper canvas {
        max-height: 180px !important;
    }
}

/* New dashboard section styles to replace inline styles */
#resultados .section-income {
    margin-bottom: 25px !important;
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%) !important;
    padding: 25px !important;
    border-radius: 16px !important;
    border-left: 5px solid #28a745 !important;
}

#resultados .section-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

#resultados .section-icon-income {
    background: #28a745 !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#resultados .section-title-income {
    color: #28a745 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

#resultados .section-subtitle-income {
    margin: 0 !important;
    color: #155724 !important;
    font-size: 14px !important;
}

/* KPI Card color variations */
#resultados .kpi-color-green {
    --kpi-color: #28a745;
}

#resultados .kpi-color-teal {
    --kpi-color: #17a2b8;
}

#resultados .kpi-color-purple {
    --kpi-color: #6f42c1;
}

#resultados .kpi-color-red {
    --kpi-color: #dc3545;
}

#resultados .kpi-color-orange {
    --kpi-color: #fd7e14;
}

#resultados .kpi-color-blue {
    --kpi-color: #007bff;
}

/* Enhanced KPI card styling */
#resultados .kpi-featured {
    transform: scale(1.02) !important;
}

#resultados .kpi-value-large {
    font-size: 2.2em !important;
    font-weight: 700 !important;
}

/* Percentage bar styling */
#resultados .percentage-bar {
    background: #e9ecef !important;
    height: 8px !important;
    border-radius: 4px !important;
    margin-top: 8px !important;
    overflow: hidden !important;
}

#resultados .percentage-fill {
    height: 100% !important;
    transition: width 0.5s ease !important;
}

#resultados .percentage-fill-teal {
    background: #17a2b8 !important;
}

#resultados .percentage-fill-purple {
    background: #6f42c1 !important;
}

#resultados .percentage-text {
    color: #6c757d !important;
}

/* Expenses section styling */
#resultados .section-expenses {
    margin-bottom: 25px !important;
    background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%) !important;
    padding: 25px !important;
    border-radius: 16px !important;
    border-left: 5px solid #e67e22 !important;
}

#resultados .section-icon-expenses {
    background: #e67e22 !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#resultados .section-title-expenses {
    color: #e67e22 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

#resultados .section-subtitle-expenses {
    margin: 0 !important;
    color: #856404 !important;
    font-size: 14px !important;
}

#resultados .kpi-color-expense {
    --kpi-color: #e67e22;
}

#resultados .percentage-fill-red {
    background: #dc3545 !important;
}

#resultados .percentage-fill-orange {
    background: #fd7e14 !important;
}

/* Comprehensive KPI color override system - handles all dynamic color assignments */

#resultados .kpi-card[style*="#4CAF50"] {
    --kpi-color: #4CAF50 !important;
}

#resultados .kpi-card[style*="#FFA726"] {
    --kpi-color: #FFA726 !important;
}

#resultados .kpi-card[style*="#D32F2F"] {
    --kpi-color: #D32F2F !important;
}

#resultados .kpi-card[style*="#FF9800"] {
    --kpi-color: #FF9800 !important;
}

#resultados .kpi-card[style*="#007bff"] {
    --kpi-color: #007bff !important;
}

#resultados .kpi-card[style*="#20c997"] {
    --kpi-color: #20c997 !important;
}

#resultados .kpi-card[style*="#6610f2"] {
    --kpi-color: #6610f2 !important;
}

/* Remove any transform styles that might offset the dashboard */
#resultados .kpi-card[style*="transform"],
#resultados .kpi-card-compact[style*="transform"] {
    transform: none !important;
}

/* Additional color classes for missing combinations */
#resultados .kpi-color-cyan {
    --kpi-color: #20c997;
}

#resultados .kpi-color-indigo {
    --kpi-color: #6610f2;
}

/* Enhanced chart container overrides to ensure full width */
#resultados .charts-container[style] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 30px !important;
    margin-top: 30px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.input-with-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.input-actions {
    display: flex;
    align-items: center;
    margin-left: 6px;
}

input[type="number"],
input[type="text"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.currency-label {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
}

.primary-button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.primary-button:hover {
    background-color: var(--primary-dark);
}

.primary-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.secondary-button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: background-color 0.3s, transform 0.1s;
}

.secondary-button:hover {
    background-color: var(--primary-light);
}

.secondary-button:active {
    transform: translateY(1px);
}

.action-panel {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    justify-content: center;
}

.property-group {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.property-group legend {
    padding: 0 var(--spacing-sm);
    font-weight: 600;
    color: var(--primary-color);
}

.properties-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); /* Increased from 350px */
    gap: var(--spacing-lg);
}

.rental-properties-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    width: 100%; /* Force full width */
    display: block; /* Changed from inline-block */
}

.main-residences-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    width: 100%; /* Force full width */
    display: block; /* Changed from inline-block */
}

.asset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px dashed var(--border-color);
}

.remove-button {
    background-color: transparent;
    color: var(--danger-color);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color 0.2s;
}

.remove-button:hover {
    background-color: rgba(244, 67, 54, 0.1);
}

.remove-button::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Enhanced tooltip implementation */
.tooltip-enhanced {
    position: fixed !important;
    background: rgba(33, 33, 33, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    max-width: 320px;
    min-width: 200px;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    pointer-events: none;
}

.tooltip-enhanced::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.tooltip-enhanced.tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(33, 33, 33, 0.95);
}

.tooltip-enhanced.tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(33, 33, 33, 0.95);
}

/* Ensure all containers allow tooltip overflow */

/* Section container styles for new dashboard layout */
.section-container {
    margin-bottom: 1px; /* Minimal margin for mobile-first */
    border-radius: 4px; /* Smaller radius */
    padding: 1px; /* Minimal padding for mobile-first */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Lighter shadow */
}

.section-container h4 {
    margin: 0 0 2px 0; /* Minimal margin */
    font-size: 0.9em; /* Smaller font for mobile-first */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px; /* Smaller gap */
}

.section-container h4 i {
    font-size: 1.1em;
}

/* Charts container styles - Mobile-first responsive design */
.charts-container {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Mobile-first: single column */
    gap: 2px !important; /* Minimal gap */
    margin: 2px auto !important; /* Minimal margin */
    width: 100% !important;
    max-width: calc(100vw - 4px) !important; /* Use almost full screen */
    padding: 0 1px !important; /* Minimal padding */
    box-sizing: border-box;
    overflow: hidden;
}

/* Desktop layout - multiple columns for larger screens */
@media (min-width: 769px) {
    .charts-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 15px !important;
        margin: 20px auto !important;
        max-width: 1200px !important;
        padding: 0 8px !important;
    }
}

.chart-section {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    padding: 0px; /* Zero padding for mobile-first */
    border-radius: 4px; /* Smaller radius */
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); /* Minimal shadow */
    border: 1px solid #e9ecef;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.chart-wrapper {
    position: relative;
    height: 300px; /* Start with reasonable base height */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin: 2px 0 0 0; /* Minimal top margin */
    min-height: 240px; /* Ensure minimum height for mobile */
    padding: 1px; /* Absolute minimal internal padding */
}

.chart-section canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
    box-sizing: border-box;
    object-fit: contain;
}

.chart-section h4 {
    margin: 0 !important; /* No margin at all */
    color: #495057;
    font-weight: 600;
    font-size: 0.8em; /* Smaller font */
    display: flex;
    align-items: center;
    gap: 2px; /* Smaller gap */
    line-height: 1.0; /* Tighter line height */
}

.chart-section p {
    font-size: 0.65em !important; /* Even smaller font */
    color: #6c757d;
    margin: 0 !important; /* No margin at all */
    text-align: center;
    line-height: 1.0;
    padding: 0 !important;
}

/* Mobile responsive - Single column, maximize chart space */
@media (max-width: 768px) {
    .charts-container {
        grid-template-columns: 1fr !important;
        gap: 0px !important;
        padding: 0px !important;
        margin: 0px auto !important;
        max-width: 100vw !important;
    }
    
    .chart-section {
        padding: 0px !important;
        margin: 0 auto;
        border-radius: 2px !important;
    }
    
    .chart-wrapper {
        height: 280px !important; /* Slightly bigger to account for padding */
        margin: 0 !important;
        min-height: 280px !important; /* Enforce minimum height */
        width: 100% !important;
        max-width: 100% !important;
        padding: 1px !important; /* Absolute minimal padding on mobile */
    }
    
    .chart-section h4 {
        font-size: 0.9em !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.1 !important;
    }
    
    .chart-section p {
        font-size: 0.75em !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.0 !important;
    }
}

/* Landscape orientation - side by side charts */
@media (max-width: 768px) and (orientation: landscape) {
    .charts-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .chart-wrapper {
        height: 200px !important;
    }
    
    .chart-section {
        padding: 4px 6px 2px 6px !important;
    }
    
    .chart-section h4 {
        font-size: 0.8em !important;
        margin: 0 0 2px 0 !important;
    }
    
    .chart-section p {
        font-size: 0.65em !important;
    }
}

/* Clean layout for dashboard components */
.financial-dashboard,
.dashboard-tabs,
.tab-content,
.tab-pane,
.kpi-grid {
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Aggressive mobile optimization - Override everything */
@media (max-width: 768px) {
    /* Remove ALL possible spacing from main containers */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .financial-dashboard,
    .dashboard-tabs,
    .tab-content,
    .tab-pane {
        padding: 6px 4px !important; /* Small padding for visual breathing room */
        margin: 0 !important;
    }
    
    /* Minimize ALL section spacing */
    .section-container {
        padding: 4px !important; /* Small padding for visual comfort */
        margin: 2px 0 !important; /* Minimal margins */
        border-radius: 4px !important;
    }
    
    .section-container h4 {
        margin: 0 !important; /* No margin */
        font-size: 0.8em !important;
    }
    
    /* Minimize KPI section spacing to give charts more room */
    .kpi-grid {
        gap: 2px !important; /* Minimal gaps */
        margin: 1px 0 !important; /* Minimal margins */
        padding: 0 !important; /* No padding */
    }
    
    .kpi-card {
        padding: 2px 4px !important; /* Ultra compact */
        margin: 0 !important;
    }
    
    /* Ultra compact numbers for aggressive mobile optimization */
    .kpi-card .kpi-value {
        font-size: 1.6rem !important; /* Very compact numbers */
        line-height: 1 !important;
        margin-bottom: 1px !important;
    }
    
    .kpi-card .kpi-subtitle {
        font-size: 0.8rem !important; /* Minimal subtitle */
        margin-bottom: 2px !important;
        line-height: 1.0 !important;
    }
    
    .kpi-card .traffic-light-label {
        font-size: 0.8rem !important; /* Tiny traffic light */
    }
    
    /* MAXIMUM chart space utilization */
    .charts-container {
        grid-template-columns: 1fr !important;
        gap: 0px !important; /* No gap at all */
        padding: 0 !important; /* No padding */
        margin: 0 !important; /* No margin */
        max-width: 100vw !important; /* Use entire viewport width */
        width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .chart-section {
        padding: 0 1px 0 1px !important; /* Almost no padding */
        margin: 0 !important;
        border-radius: 1px !important;
        border: none !important; /* Remove border for more space */
    }
    
    .chart-wrapper {
        height: 70vh !important; /* Use 70% of viewport height on mobile */
        min-height: 280px !important; /* Lower minimum for small screens */
        max-height: 500px !important; /* Cap it so it doesn't get too big */
        margin: 0 !important; /* No margins */
    }
    
    .chart-section h4 {
        font-size: 0.75em !important;
        margin: 0 !important; /* No margin */
        line-height: 1.0 !important;
    }
    
    .chart-section p {
        font-size: 0.6em !important;
        margin: 0 !important; /* No margin */
        line-height: 1.0 !important;
    }
    
    /* Maintain container breakout on mobile */
    .container .results-section {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        width: calc(100% + (2 * var(--spacing-md)));
    }
}

/* Ultra-specific override for dashboard tabs container - balanced padding for smooth appearance */
@media (max-width: 768px) {
    #resultados .dashboard-tabs,
    #resultados .tab-content,
    #resultados .tab-pane,
    div.dashboard-tabs,
    div.tab-content,
    .dashboard-tabs,
    .tab-content {
        padding: 8px 6px !important; /* Small padding for smoother look */
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* Landscape orientation - maximize screen usage */
@media (max-width: 768px) and (orientation: landscape) {
    .charts-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important; /* Minimal gap */
        padding: 0 4px !important; /* Minimal padding */
    }
    
    .chart-wrapper {
        height: 35vh !important; /* Use significant portion of viewport height */
        min-height: 250px !important;
    }
    
    .chart-section {
        padding: 2px 4px 1px 4px !important; /* Very compact */
    }
    
    .chart-section h4 {
        font-size: 0.75em !important;
        margin: 0 0 1px 0 !important;
    }
    
    .chart-section p {
        font-size: 0.6em !important;
        margin: 0 !important;
    }
}

/* Desktop layout adjustments */
@media (min-width: 769px) {
    .charts-container {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 20px !important;
        margin: 20px auto !important;
        max-width: 1200px !important;
        padding: 0 10px !important;
    }
    
    .chart-wrapper {
        height: 350px !important;
    }
}

.results-section,
.asset-group,
.results-info-grid,
.results-column,
.kpi-box,
.comparison-table,
div[class*="results"],
div[class*="asset"],
div[class*="kpi"] {
    overflow: visible !important;
    position: relative;
}

/* Enhanced Tooltip System - Fix for clipping issues */

/* Enhanced trigger styling */
.tooltip-trigger {
    color: var(--primary-color);
    cursor: pointer;
    margin-left: var(--spacing-xs);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.1);
    border: 1px solid rgba(0, 123, 255, 0.3);
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tooltip-trigger:hover {
    background-color: rgba(0, 123, 255, 0.2);
    border-color: rgba(0, 123, 255, 0.5);
    transform: scale(1.1);
}

/* Ensure parent containers don't clip tooltips */
.asset,
.results-section,
.asset-group,
.results-info-grid,
.results-column,
h3[style*="position: relative"],
div[style*="position: relative"] {
    overflow: visible !important;
}

/* Special handling for dashboard containers that might clip */
.section,
.form-section,
.results-container {
    overflow: visible !important;
}

.help-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background-color: var(--card-color);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.help-panel.active {
    right: 0;
}

.help-panel h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.help-content {
    margin-bottom: var(--spacing-xl);
}

.definition-list dt {
    font-weight: 600;
    margin-top: var(--spacing-md);
    color: var(--primary-color);
}

.definition-list dd {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    color: var(--text-light);
}

.close-help {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: background-color 0.2s;
}

.close-help:hover {
    background-color: var(--primary-color);
    color: white;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: var(--card-color);
    margin: 50px auto;
    width: 80%;
    max-width: 700px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.4s ease-out;
}

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

.modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-light);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

.close-modal {
    color: var(--text-light);
    font-size: 1.75rem;
    font-weight: 700;
    cursor: pointer;
}

.close-modal:hover {
    color: var(--danger-color);
}

.results-section {
    background-color: var(--card-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

/* Override container constraints specifically for results section */
.container .results-section {
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + (2 * var(--spacing-md)));
    max-width: none;
}

/* Ensure dashboard content uses the full available width */
.container .results-section .financial-dashboard,
.container .results-section .dashboard-tabs,
.container .results-section .kpi-grid,
.container .results-section .charts-container {
    width: 100%;
    max-width: none;
}

/* Optimize KPI grid for the extra width */
.container .results-section .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
}

.charts-section {
    margin-top: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
    max-width: none;
}

.results-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.tab-button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-button:hover {
    color: var(--primary-color);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var (--primary-color);
}

.result-tab-content {
    display: none;
}

.result-tab-content.active {
    display: block;
    animation: fadeInContent 0.4s;
}

@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}

.comparison-table {
    margin-bottom: var(--spacing-lg);
}

.comparison-table p {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

.app-footer {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    color: var(--text-color);
    text-align: center;
    padding: var(--spacing-lg);
    margin-top: var (--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.app-footer a {
    color: var(--text-color);
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

.save-new-data {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.saved-data-list {
    max-height: 300px;
    overflow-y: auto;
}

.saved-profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.saved-profile-item:hover {
    background-color: var(--primary-light);
}

.saved-profile-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.result-value {
    font-weight: 600;
}

.result-positive {
    color: var (--success-color);
}

.result-negative {
    color: var(--danger-color);
}

.result-warning {
    color: var(--warning-color);
}

@media (min-width: 768px) {
    .app-container {
        width: 95%;
    }
    
    /* Improve form layout on medium screens */
    .card-content {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 1200px) {
    .action-button .fas {
        display: none; /* Hide Font Awesome icons on smaller screens, keep emojis */
    }
}

@media (max-width: 1024px) {
    .logo h1 {
        font-size: 1.1rem;
    }

    .header-controls {
        gap: var(--spacing-sm);
    }

    .language-selector {
        font-size: 0.75rem;
        margin-left: var(--spacing-xs);
        padding-right: 18px;
        background-size: 10px;
    }

    /* Inline label and input for mobile */
    .form-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .form-group label {
        width: auto;
        flex: 1;
        margin-right: 8px;
        margin-bottom: 0;
        font-size: 0.9rem;
        min-width: 120px;
    }

    .form-group input,
    .form-group select {
        width: auto;
        flex: 0 0 auto;
        max-width: 120px;
        min-width: 80px;
        padding: 8px 10px;
        font-size: 0.9rem;
        height: 36px;
    }

    .input-wrapper {
        width: auto;
        flex: 0 0 auto;
        max-width: 140px;
    }

    .input-wrapper input {
        max-width: 100px;
    }

    .form-group input[type="checkbox"] {
        width: auto;
        flex: none;
        margin-right: 8px;
        max-width: none;
        height: auto;
    }

    .form-progress {
        margin-top: 16px; /* Match the main rule */
        padding: 12px;
    }

    .progress-bar-container {
        height: 22px;
    }
}

@media (max-width: 767px) {
    .app-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .logo {
        justify-content: center;
    }
    
    .header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }
    
    .action-button {
        font-size: 0.75rem;
        padding: 4px 8px;
        justify-content: center;
    }
    
    .language-selector {
        margin-left: 0;
        margin-top: var(--spacing-xs);
        align-self: center;
        font-size: 0.75rem;
        padding-right: 18px;
        background-size: 10px;
    }
    
    .properties-container {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
    }
    
    .help-panel {
        width: 100%;
        right: -100%;
    }
    
    .results-tabs {
        flex-direction: column;
    }
    
    .tab-button {
        width: 100%;
        text-align: center;
    }
    
    .form-group label {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }
    
    .form-group input {
        max-width: 100%;
    }
}

@keyframes collapseIn {
    from { max-height: 0; opacity: 0; }
    to { max-height: 1000px; opacity: 1; }
}

@keyframes collapseOut {
    from { max-height: 1000px; opacity: 1; }
    to { max-height: 0; opacity: 0; }
}

.collapsing-in {
    animation: collapseIn 0.4s ease-out forwards;
    overflow: hidden;
}

collapsing-out {
    animation: collapseOut 0.3s ease-in forwards;
    overflow: hidden;
}

/* Revised checkbox styling using native appearance and accent-color for a square look */
input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--primary-color); /* Color when checked */
    width: 16px;  /* Set fixed size for a square */
    height: 16px;
    margin: 0 4px;
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Global checkbox override - ensure checkboxes always maintain proper styling */
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    accent-color: var(--primary-color) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 4px !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: inherit !important;
}

input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.evaluate-button {
    background-color: var(--primary-color);
    color: white;
    margin-top: var(--spacing-md);
}

/* New styles for back-to-form button */
.back-to-form {
    position: sticky;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var (--spacing-lg);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-weight: 500;
    margin: 20px auto;
}

.back-to-form:hover {
    background-color: var(--primary-dark);
}

/* Style for highlighting active sections */
.section-highlight {
    animation: highlightFade 2s ease-out;
}

@keyframes highlightFade {
    0% { background-color: rgba(187, 222, 251, 0.5); }
    100% { background-color: transparent; }
}

/* Make fieldsets use full width */
fieldset {
    width: 100%;
}

/* Improve results section layout */
.results-section {
    width: 100%;
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Two-column layout for results info on larger screens */
@media (min-width: 992px) {
    .results-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .results-section h2 {
        grid-column: 1 / -1; /* Make headers span both columns */
    }
}

/* Reset default input styles */
input {
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Improved number input styling - consolidating previous changes */
input[type="number"] {
    width: auto;  /* Let the control size naturally with spinners */
    height: 30px !important;
    min-width: 80px !important;
    max-width: 150px !important; /* Allow slight expansion if needed */
    padding: 2px 5px !important;
    vertical-align: middle !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Ensure form groups use consistent input sizing */
.form-group input[type="number"] {
    flex: 0 0 80px !important; /* Fixed flex basis */
    width: 80px !important;
    max-width: 80px !important;
}

/* Utility classes for troubleshooting specific inputs */
.compact-input {
    width: 80px !important;
    max-width: 80px !important;
    height: 30px !important;
}

.compact-checkbox {
    width: 14px !important;
    height: 14px !important;
}

/* New rule: use primary color for legends in rental properties, main residences, personal expenses, and Otros Activos */
.rental-properties-container legend,
.main-residences-container legend,
fieldset.personal-expenses legend,
fieldset.otros-activos legend {
    color: var(--primary-color);
    font-weight: 600; /* Added to make text bold like Vivienda Principal */
}

/* New rule: use primary color for rental properties and main residences titles */
.rental-properties-container .asset-header h5,
.main-residences-container .asset-header h5 {
    color: var(--primary-color);
}

/* New rule: set border for fieldset with class "otros-activos" and "personal-expenses" */
fieldset.otros-activos,
fieldset.personal-expenses {
    border: 1px solid var(--border-color);
}

/* Professional Financial Dashboard Styles */
.financial-dashboard {
    background: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
    color: #1565C0;
    width: 100%;
    max-width: none;
    overflow: visible;
}

.dashboard-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dashboard-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Financial Health Score */
.health-score-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.health-score-circle {
    position: relative;
    width: 150px;
    height: 150px;
    background: conic-gradient(var(--score-color, #4CAF50) var(--score-percentage, 50%), rgba(255, 255, 255, 0.3) 0deg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.health-score-circle::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

.health-score-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--text-color);
}

.health-score-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.health-score-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.health-score-description {
    margin-top: var(--spacing-md);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
}

/* KPI Cards Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: none;
}

.kpi-card {
    background: var(--card-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid var(--kpi-color, var(--primary-color));
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: var(--kpi-color, var(--primary-color));
    opacity: 0.1;
    border-radius: 0 0 0 100%;
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.kpi-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.kpi-icon {
    font-size: 1.5rem;
    color: var(--kpi-color, var(--primary-color));
    opacity: 0.8;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
    line-height: 1.1;
}

.kpi-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

/* Traffic Light Indicator */
.traffic-light {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.traffic-light-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--indicator-color, var(--neutral-color));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

.traffic-light-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--indicator-color, var(--neutral-color));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Progress Bar for KPIs */
.kpi-progress {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: var(--spacing-sm);
}

.kpi-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--kpi-color, var(--primary-color)), var(--kpi-color, var(--primary-color)));
    border-radius: 3px;
    transition: width 1s ease-out;
    width: var(--progress-width, 0%);
}

/* Trend Indicators */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    background: rgba(var(--trend-color), 0.1);
    color: rgb(var(--trend-color));
}

.trend-up {
    --trend-color: 76, 175, 80;
}

.trend-down {
    --trend-color: 244, 67, 54;
}

.trend-neutral {
    --trend-color: 117, 117, 117;
}

/* Quick Stats Bar */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-lg);
}

.quick-stat {
    text-align: center;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.quick-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.quick-stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Real-time calculation indicator */
.calculating-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calculating-indicator.active {
    opacity: 1;
    transform: translateY(0);
}

.calculating-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design for Dashboard */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .health-score-circle {
        width: 120px;
        height: 120px;
    }
    
    .health-score-circle::before {
        width: 95px;
        height: 95px;
    }
    
    .health-score-number {
        font-size: 2rem;
    }
    
    .dashboard-title {
        font-size: 1.5rem;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
    }
}

/* Animation for KPI cards appearing */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card {
    animation: slideInUp 0.6s ease-out forwards;
}

.kpi-card:nth-child(1) { animation-delay: 0.1s; }
.kpi-card:nth-child(2) { animation-delay: 0.2s; }
.kpi-card:nth-child(3) { animation-delay: 0.3s; }
.kpi-card:nth-child(4) { animation-delay: 0.4s; }
.kpi-card:nth-child(5) { animation-delay: 0.5s; }
.kpi-card:nth-child(6) { animation-delay: 0.6s; }

/* Dashboard Tabs Styles */
.dashboard-tabs {
    background: var(--card-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: visible;
    margin-bottom: var(--spacing-lg);
    width: 100%;
    max-width: none;
}

.tab-buttons {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-buttons::-webkit-scrollbar {
    display: none;
}

.tab-button {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    min-width: 150px;
}

/* Support for existing tab-btn class */
.tab-btn {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    min-width: 150px;
}

.tab-button:hover {
    background: rgba(33, 150, 243, 0.1);
    color: var(--primary-color);
}

.tab-btn:hover {
    background: rgba(33, 150, 243, 0.1);
    color: var(--primary-color);
}

.tab-button.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.tab-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1976D2, #2196F3);
    border-radius: 2px 2px 0 0;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1976D2, #2196F3);
    border-radius: 2px 2px 0 0;
}

.tab-button i {
    margin-right: var(--spacing-sm);
    font-size: 1rem;
}

.tab-btn i {
    margin-right: var(--spacing-sm);
    font-size: 1rem;
}

.tab-content {
    background: var(--card-color);
    min-height: 400px;
}

.tab-pane {
    display: none !important;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    overflow: visible;
    padding: var(--spacing-lg);
}

.tab-pane.active {
    display: block !important;
    z-index: 2;
}

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

/* Ensure strict tab content isolation */
.dashboard-tabs .tab-content {
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: none;
}

/* Debug styles for orphaned content */
.tab-content > .kpi-card:not(.tab-pane .kpi-card) {
    display: none !important;
}

/* Hide any content that might leak outside tab panes */
.tab-content > *:not(.tab-pane) {
    display: none !important;
}

/* KPI Grid Variations */
.kpi-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.kpi-grid-standard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Compact KPI Cards for Overview Tab */
.kpi-card-compact {
    background: var(--card-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--kpi-color, var(--primary-color));
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kpi-card-compact .kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.kpi-card-compact .kpi-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.kpi-card-compact .kpi-icon {
    color: var(--kpi-color, var(--primary-color));
    font-size: 1.2rem;
}

.kpi-card-compact .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kpi-color, var(--primary-color));
    margin-bottom: var(--spacing-xs);
}

.kpi-card-compact .kpi-subtitle {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

.kpi-card-compact .traffic-light {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-card-compact .traffic-light-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--indicator-color, var(--neutral-color));
}

.kpi-card-compact .traffic-light-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Tab-specific content styling */
.tab-section-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.tab-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.tab-section-description {
    font-size: 0.95rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Responsive design for tabs */
@media (max-width: 768px) {
    .tab-buttons {
        flex-direction: column;
    }
    
    .tab-button {
        min-width: unset;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    
    .tab-button:last-child {
        border-bottom: none;
    }
    
    .kpi-grid-compact {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .kpi-grid-standard {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Enhanced Input Styles for Phase 2 */
.input-focused {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.valid-input {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.05);
}

.invalid-input {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05);
    animation: shake 0.3s;
}

.warning-input {
    border-color: #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.05);
}

.info-input {
    border-color: #17a2b8 !important;
    background-color: rgba(23, 162, 184, 0.05);
}

.default-value {
    background-color: rgba(108, 117, 125, 0.1);
    font-style: italic;
}

.auto-calculated {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 3px solid #28a745;
}

/* Input Tooltips */
.input-tooltip {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    max-width: 250px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
}

.tooltip-warning {
    background: #ffc107;
    color: #212529;
}

.tooltip-info {
    background: #17a2b8;
    color: white;
}

.tooltip-warning::before,
.tooltip-info::before,
.input-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #333;
}

.tooltip-warning::before {
    border-bottom-color: #ffc107;
}

.tooltip-info::before {
    border-bottom-color: #17a2b8;
}

/* Budget Suggestions */
.budget-suggestions {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.budget-suggestions h4 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.suggestion-item {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #007bff;
    font-size: 12px;
}

.suggestion-item .category {
    font-weight: 600;
    color: #495057;
}

.suggestion-item .amount {
    color: #007bff;
    font-weight: 700;
}

.suggestion-item .percentage {
    color: #6c757d;
    font-size: 11px;
}

/* Shake animation for invalid inputs */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsive improvements for mobile */
@media (max-width: 768px) {
    .suggestion-grid {
        grid-template-columns: 1fr;
    }
    
    .input-tooltip {
        max-width: 200px;
        font-size: 11px;
    }
    
    .budget-suggestions {
        padding: 10px;
    }
}

/* Contextual Help System */
.help-icon {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 14px;
    color: #007bff;
    transition: all 0.2s ease;
    z-index: 10;
}

.help-icon:hover {
    transform: translateY(-50%) scale(1.2);
    color: #0056b3;
}

.help-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.help-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease;
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.help-modal-header h3 {
    margin: 0;
    color: #495057;
    font-size: 18px;
}

.help-modal-close {
    cursor: pointer;
    font-size: 24px;
    color: #6c757d;
    transition: color 0.2s ease;
}

.help-modal-close:hover {
    color: #495057;
}

.help-modal-body {
    padding: 20px;
}

.help-modal-body p {
    margin: 0;
    line-height: 1.6;
    color: #495057;
}

/* Form Progress Indicator */
.form-progress {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-top: 16px; /* Provide good separation from header */
    margin-bottom: -48px; /* Reduce gap to 16px (32px - 16px) for tighter spacing */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 50;
}

.progress-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px; /* Increased from 8px for better spacing */
    font-size: 14px;
}

/* Ultra-small devices optimization (width < 400px) */
@media (max-width: 400px) {
    /* Fix asset group grid layout for very small screens */
    .asset-group {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: var(--spacing-sm) !important;
        padding: var(--spacing-xs) !important;
    }

    /* Reduce asset padding and ensure proper sizing */
    .asset {
        padding: var(--spacing-xs) !important;
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix properties container grid */
    .properties-container {
        grid-template-columns: 1fr !important; /* Single column for ultra-small */
        gap: var(--spacing-sm) !important;
        padding: 0 !important;
    }

    /* Optimize property group containers */
    .property-group,
    .rental-properties-container,
    .main-residences-container {
        padding: var(--spacing-sm) !important;
        margin: var(--spacing-sm) 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Compact asset header - keep horizontal layout for remove button */
    .asset-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--spacing-xs) !important;
        margin-bottom: var(--spacing-xs) !important;
        flex-wrap: nowrap !important;
    }

    /* Ensure the header title section can shrink if needed */
    .asset-header h5 {
        flex: 1 !important;
        margin-right: var(--spacing-xs) !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }

    /* Adjust form groups within assets */
    .asset .form-group,
    .property-group .form-group {
        margin-bottom: var(--spacing-xs) !important;
    }

    /* Compact input styling */
    .asset input[type="number"],
    .asset input[type="text"],
    .property-group input[type="number"],
    .property-group input[type="text"] {
        padding: 8px !important;
        font-size: 0.9rem !important;
    }

    /* Preserve checkbox styling - don't let other input styles affect checkboxes */
    input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 0 4px !important;
        appearance: auto !important;
        -webkit-appearance: checkbox !important;
        accent-color: var(--primary-color) !important;
        cursor: pointer !important;
        font-size: inherit !important;
        box-sizing: border-box !important;
    }

    /* Compact labels */
    .asset label,
    .property-group label {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }

    /* Optimize remove button - full PC size with proper text alignment */
    .remove-button {
        padding: 8px 12px !important;
        font-size: 1.2rem !important;
        min-width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ensure fieldset legends are compact */
    .rental-properties-container legend,
    .main-residences-container legend,
    fieldset.personal-expenses legend,
    fieldset.otros-activos legend {
        font-size: 0.9rem !important;
        padding: 0 var(--spacing-xs) !important;
    }

    /* Compact debt group as well */
    .debt-group {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }

    .debt {
        padding: var(--spacing-xs) !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure container has proper padding on ultra-small screens */
    .container {
        padding: var(--spacing-xs) !important;
        margin: 0 !important;
    }

    /* Optimize form rows for ultra-small screens */
    .form-row {
        display: block !important;
        gap: 0 !important;
    }

    /* Ultra-compact form groups */
    .form-group {
        margin-bottom: var(--spacing-xs) !important;
        padding: 0 !important;
    }

    /* Ensure buttons stack properly */
    .input-actions {
        flex-direction: column !important;
        gap: var(--spacing-xs) !important;
    }
}

.progress-bar-container {
    background: #e9ecef;
    border-radius: 12px; /* Slightly increased for more modern look */
    height: 24px; /* Increased from 20px for better visibility */
    overflow: hidden;
    margin-bottom: 10px; /* Increased from 8px */
}

.progress-bar {
    height: 100%;
    background: var(--progress-color, linear-gradient(90deg, #dc3545, #e74c3c));
    transition: all 0.3s ease;
    border-radius: 12px;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

.progress-text {
    font-size: 13px; /* Slightly increased from 12px */
    color: #6c757d;
    text-align: center;
    font-weight: 500;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced input container positioning for help icons */
.form-group {
    position: relative;
    margin-bottom: 20px;
}

input[type="number"] {
    padding-right: 35px; /* Make room for help icon */
}

/* Mobile responsiveness for help system */
@media (max-width: 768px) {
    .help-icon {
        right: -20px;
        font-size: 12px;
    }
    
    .help-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .help-modal-header,
    .help-modal-body {
        padding: 15px;
    }
    
    .form-progress {
        padding: 12px;
        margin-top: 12px; /* Proportional spacing for mobile */
        margin-bottom: -12px; /* Tighter spacing on mobile */
    }
    
    .progress-bar-container {
        height: 22px; /* Slightly smaller on mobile but still prominent */
    }
    
    .progress-label {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .progress-text {
        font-size: 12px;
    }
    
    input[type="number"] {
        padding-right: 30px;
    }
}

/* Bulk Operations Toolbar */
.bulk-operations-toolbar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

.toolbar-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-bulk {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #495057;
    font-weight: 500;
}

.btn-bulk:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

.btn-bulk:active {
    transform: translateY(0);
}

/* Preset Modal Styles */
.preset-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: white;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.modal-header h3 {
    margin: 0;
    color: #495057;
    font-size: 18px;
}

.modal-close {
    cursor: pointer;
    font-size: 24px;
    color: #6c757d;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: #495057;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-radius: 0 0 8px 8px;
}

.preset-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

.preset-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
}

.preset-details h4 {
    margin: 0 0 10px 0;
    color: #007bff;
    font-size: 16px;
}

.preset-details p {
    margin: 5px 0;
    color: #495057;
    font-size: 14px;
}

.btn-primary {
    background: #007bff;
    color: white;
    border: 1px solid #007bff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #545b62;
    border-color: #545b62;
}

/* Scenario Analysis Styles */
.scenario-analysis {
    background: var(--card-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.scenario-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.scenario-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.scenario-input-group label {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.scenario-input-group input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.scenario-input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.scenario-actions {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

#calculate-scenario-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

#calculate-scenario-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

.scenario-comparison {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.comparison-section {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.comparison-section h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.current-scenario {
    border-left: 4px solid var(--neutral-color);
}

.scenario-result {
    border-left: 4px solid var(--primary-color);
}

.metric-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.metric-label {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.metric-value {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.metric-value.positive {
    color: var(--success-color);
}

.metric-value.negative {
    color: var(--danger-color);
}

.change-indicator {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.change-indicator.positive {
    background: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
}

.change-indicator.negative {
    background: rgba(244, 67, 54, 0.1);
    color: var(--danger-color);
}

.change-indicator.neutral {
    background: rgba(117, 117, 117, 0.1);
    color: var(--neutral-color);
}

/* Financial health score colors in metrics */
.metric-value.score-1,
.metric-value.score-2,
.metric-value.score-3 {
    color: var(--critical-color);
}

.metric-value.score-4,
.metric-value.score-5 {
    color: var(--poor-color);
}

.metric-value.score-6,
.metric-value.score-7 {
    color: var(--fair-color);
}

.metric-value.score-8,
.metric-value.score-9,
.metric-value.score-10 {
    color: var(--excellent-color);
}

.scenario-insights {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.scenario-insights h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.insight {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-left: 4px solid;
}

.insight.positive {
    background: rgba(76, 175, 80, 0.1);
    border-left-color: var(--success-color);
    color: var(--success-color);
}

.insight.negative {
    background: rgba(244, 67, 54, 0.1);
    border-left-color: var(--danger-color);
    color: var(--danger-color);
}

.insight.warning {
    background: rgba(255, 152, 0, 0.1);
    border-left-color: var(--warning-color);
    color: var(--warning-color);
}

.insight.neutral {
    background: rgba(117, 117, 117, 0.1);
    border-left-color: var(--neutral-color);
    color: var(--neutral-color);
}

/* Mobile responsiveness for scenario analysis */
@media (max-width: 768px) {
    .scenario-inputs {
        grid-template-columns: 1fr;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .scenario-analysis {
        padding: var(--spacing-md);
    }
    
    .comparison-section {
        padding: var(--spacing-md);
    }
    
    .metric-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .metric-value {
        align-self: flex-end;
    }
    
    #calculate-scenario-btn {
        width: 100%;
        padding: var(--spacing-md);
    }
}

/* Property Evaluation Styles - Sequential Sections */
.property-evaluation-section {
    animation: slideIn 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.property-evaluation-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.property-details-section,
.liquidity-impact-section, 
.financial-comparison-section {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(46, 125, 50, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.property-details-section:hover,
.liquidity-impact-section:hover,
.financial-comparison-section:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.2);
}

/* Enhanced table styling */
.property-evaluation-section table tr:hover {
    background-color: rgba(76, 175, 80, 0.05) !important;
    transform: scale(1.01);
    transition: all 0.2s ease;
}

.property-evaluation-section .comparison-table p:hover {
    background-color: rgba(76, 175, 80, 0.05);
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    transform: translateX(5px);
}

/* Pulse animation for important values */
.property-evaluation-section [style*="font-size: 1.2em"] {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Gradient text animations */
.property-evaluation-section h2 span {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Enhanced button hover effects */
.property-evaluation-section button {
    position: relative;
    overflow: hidden;
}

.property-evaluation-section button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.property-evaluation-section button:hover::before {
    width: 300px;
    height: 300px;
}

/* Progressive reveal animation */
.property-evaluation-section .property-details-section {
    animation: slideInLeft 0.6s ease-out;
}

.property-evaluation-section .liquidity-impact-section {
    animation: slideInRight 0.8s ease-out;
}

.property-evaluation-section .financial-comparison-section {
    animation: slideInUp 1s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced emoji styling */
.property-evaluation-section span[style*="font-size: 1.2em"],
.property-evaluation-section span[style*="font-size: 1.3em"] {
    display: inline-block;
    transition: transform 0.2s ease;
}

.property-evaluation-section span[style*="font-size: 1.2em"]:hover,
.property-evaluation-section span[style*="font-size: 1.3em"]:hover {
    transform: scale(1.2) rotate(10deg);
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .property-evaluation-section {
        padding: 15px !important;
        margin-top: 20px !important;
    }
    
    .property-evaluation-section h2 {
        font-size: 1.5rem !important;
    }
    
    .property-evaluation-section h3 {
        font-size: 1.2rem !important;
    }
    
    .property-evaluation-section .results-info-grid {
        display: block !important;
    }
    
    .property-evaluation-section .results-column {
        margin-bottom: 20px;
    }
    
    .property-evaluation-section table {
        font-size: 0.9em;
    }
    
    .property-evaluation-section button {
        width: 100%;
        margin-bottom: 10px;
    }
}

.property-details-section h4,
.liquidity-impact-section h4,
.financial-comparison-section h4 {
    color: #2E7D32;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dedicated Property Evaluation Section - Completely Separate */
#dedicatedPropertyEvaluation {
    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    margin: var(--spacing-xl) 0;
    padding: 0;
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15);
    animation: slideInFromBottom 0.6s ease-out;
}

.section-header {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.section-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.close-section-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.close-section-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.dedicated-property-content {
    padding: var(--spacing-xl);
    background: white;
    min-height: 400px;
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure dedicated section is always visible when active */
#dedicatedPropertyEvaluation.active {
    display: block !important;
}

/* Mobile responsiveness for dedicated section */
@media (max-width: 768px) {
    #dedicatedPropertyEvaluation {
        margin: var(--spacing-md) 0;
    }
    
    .section-header {
        padding: var(--spacing-md);
    }
    
    .section-header h2 {
        font-size: 1.3rem;
    }
    
    .dedicated-property-content {
        padding: var(--spacing-lg);
    }
}

/* Budget Suggestion Button */
.budget-suggestion-btn {
    background: linear-gradient(135deg, #17a2b8, #20c997);
    border: none;
    border-radius: 6px;
    color: white;
    padding: 6px 8px;
    margin-left: 24px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

.budget-suggestion-btn:hover {
    background: linear-gradient(135deg, #138496, #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.4);
}

.budget-suggestion-btn:active {
    transform: translateY(0);
}

.budget-suggestion-btn i {
    font-size: 11px;
}

/* Budget Allocation Modal */
#budgetAllocationModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

#budgetAllocationModal .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border: none;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

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

#budgetAllocationModal .modal-header {
    background: linear-gradient(135deg, #17a2b8, #20c997);
    color: white;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#budgetAllocationModal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

#budgetAllocationModal .modal-header h3 i {
    margin-right: 8px;
}

#budgetAllocationModal .close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#budgetAllocationModal .close:hover {
    opacity: 1;
}

#budgetAllocationModal .modal-body {
    padding: 24px;
}

#budgetAllocationModal .modal-description {
    color: #495057;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
}

#budgetAllocationModal .budget-allocation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

#budgetAllocationModal .allocation-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

#budgetAllocationModal .allocation-item:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#budgetAllocationModal .allocation-category {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#budgetAllocationModal .allocation-category i {
    margin-right: 8px;
    color: #17a2b8;
}

#budgetAllocationModal .allocation-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 4px;
}

#budgetAllocationModal .allocation-percentage {
    font-size: 0.9rem;
    color: #6c757d;
}

#budgetAllocationModal .modal-footer-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px;
    margin-top: 20px;
}

#budgetAllocationModal .modal-footer-note p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
}

/* Mobile responsive for budget modal */
@media (max-width: 768px) {
    #budgetAllocationModal .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    #budgetAllocationModal .modal-header {
        padding: 16px 20px;
    }
    
    #budgetAllocationModal .modal-header h3 {
        font-size: 1.1rem;
    }
    
    #budgetAllocationModal .modal-body {
        padding: 20px;
    }
    
    #budgetAllocationModal .budget-allocation-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .budget-suggestion-btn {
        padding: 4px 6px;
        font-size: 10px;
        min-width: 24px;
        height: 20px;
    }
}

/* ========================================
   EXPENSE TOGGLE STYLES
   ======================================== */

.toggle-container {
    transition: all 0.3s ease;
}

.toggle-container:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ========================================
   PROPERTY EXPENSE TOGGLE STYLES
   ======================================== */

.property-expenses-toggle-container {
    margin-bottom: 15px;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.property-expenses-toggle-container .toggle-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-expenses-toggle-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    cursor: pointer;
}

.property-expenses-toggle-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.property-expenses-toggle-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
}

.property-expenses-toggle-container .toggle-button {
    height: 18px;
    width: 18px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.property-expenses-toggle-container .toggle-labels {
    display: flex;
    flex-direction: column;
}

.property-expenses-toggle-container .current-mode-label {
    font-weight: 600;
    color: #495057;
    font-size: 13px;
}

.property-expenses-toggle-container .current-mode-description {
    font-size: 11px;
    color: #6c757d;
}

/* Toggle Switch Styles */
.toggle-switch {
    cursor: pointer !important;
}

.toggle-slider {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.toggle-button {
    transition: all 0.3s ease !important;
}

/* When toggled to detailed mode */
.toggle-slider[data-checked="true"] {
    background-color: #2196F3 !important;
    justify-content: flex-end !important;
}

.toggle-slider:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Simple Mode Styles */
.personal-expenses-simple {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    background: var(--card-color);
    transition: all 0.3s ease;
}

.personal-expenses-simple legend {
    color: var(--text-color);
    font-weight: 600;
    padding: 0 var(--spacing-sm);
}

.personal-expenses-simple .form-group {
    margin-bottom: 0;
}

.personal-expenses-simple .form-group label {
    font-weight: 500;
    color: var(--text-color);
}

.personal-expenses-simple .currency-input {
    font-weight: normal;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--card-color);
}

.personal-expenses-simple .currency-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

/* Detailed Mode Styles */
.personal-expenses {
    transition: all 0.3s ease;
}

/* Mode Labels Animation */
#currentModeLabel, #currentModeDescription {
    transition: all 0.3s ease;
}

/* Additional Expenses Section Styling */
.additional-expenses-section {
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.additional-expenses-section h6 {
    margin: 0 0 15px 0;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}

/* Simple Property Expenses */
.simple-property-expenses {
    transition: all 0.3s ease;
}

.simple-property-expenses .form-group {
    margin-bottom: 0;
}

.simple-property-expenses .form-group label {
    font-weight: 500;
    color: #495057;
    font-size: 13px;
}

/* Detailed Property Expenses */
.detailed-property-expenses {
    transition: all 0.3s ease;
}

.detailed-property-expenses .form-group {
    margin-bottom: 12px;
}

.detailed-property-expenses .form-group label {
    font-weight: 500;
    color: #495057;
    font-size: 13px;
}

.detailed-property-expenses .total-field {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.detailed-property-expenses .total-field label {
    color: #007bff;
    font-weight: 600;
}

/* Responsive Toggle */
@media (max-width: 768px) {
    .toggle-container {
        padding: 12px;
    }
    
    .toggle-header {
        flex-direction: row;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .toggle-labels {
        margin-left: 0 !important;
        flex-direction: row;
        gap: 6px;
    }
    
    .additional-expenses-section {
        margin: 15px 0;
        padding: 12px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }

    .additional-expenses-section h6 {
        margin: 0 0 15px 0;
        color: #495057;
        font-weight: 600;
        font-size: 14px;
    }

    .property-expenses-toggle-container .toggle-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
}

/* Welcome Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s ease-in-out;
}

.modal-container {
    background: var(--card-color);
    margin: 5% auto;
    padding: 0;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease-in-out;
}

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

.welcome-modal .modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.welcome-modal .modal-header h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.welcome-modal .modal-content {
    padding: 2rem;
}

.welcome-message {
    text-align: center;
}

.welcome-message > p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.welcome-guide {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border: 1px solid #e1e7ff;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 2rem 0;
}

.welcome-guide h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.step-number {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
}

.step-content {
    flex: 1;
}

.step-content strong {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.step-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.welcome-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.option-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.option-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.option-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.option-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
}

.option-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.welcome-modal .note {
    background: var(--info-light);
    border: 1px solid var(--info-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--info-dark);
    margin-top: 1.5rem;
}

.welcome-modal .note i {
    color: var(--info-color);
    margin-right: 0.5rem;
}

.welcome-modal .modal-footer {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.welcome-modal .modal-footer button {
    flex: 1;
    max-width: 250px;
}

@media (max-width: 768px) {
    .welcome-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .step {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 1rem 0.75rem;
    }
    
    .step-number {
        align-self: center;
    }
    
    .welcome-guide {
        padding: 1rem;
        margin: 1.5rem 0;
    }
    
    .welcome-modal .modal-footer {
        flex-direction: column;
    }
    
    .welcome-modal .modal-footer button {
        max-width: none;
    }
}

/* Notification System */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    min-width: 300px;
    max-width: 500px;
    padding: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-left: 4px solid #007bff;
}

.notification.show {
    transform: translateX(0);
}

.notification-content {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-content i {
    font-size: 1.2em;
    flex-shrink: 0;
}

.notification-content span {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.notification-success {
    border-left-color: #28a745;
}

.notification-success .notification-content i {
    color: #28a745;
}

.notification-error {
    border-left-color: #dc3545;
}

.notification-error .notification-content i {
    color: #dc3545;
}

.notification-info {
    border-left-color: #007bff;
}

.notification-info .notification-content i {
    color: #007bff;
}

@media (max-width: 600px) {
    .notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}

/* User Info Modal Styling */
.user-info-modal {
    max-width: 800px; /* Increased from 700px */
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-info-modal .modal-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.user-info-modal .modal-header h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.user-info-modal .modal-content {
    padding: 2rem;
    overflow: visible;
    max-height: unset;
}

.user-info-message {
    text-align: center;
    margin-bottom: 2rem;
}

.user-info-message > p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.info-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 1px solid #cbd5e0;
    border-left: 4px solid #3b82f6;
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.notice-icon {
    background: #3b82f6;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.notice-content {
    flex: 1;
}

.notice-content strong {
    display: block;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.notice-content p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.user-info-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start; /* Align items to start */
}

.user-info-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0; /* Allow shrinking */
    justify-self: start; /* Align form groups to start */
    width: 100%;
    max-width: 350px; /* Prevent form groups from getting too wide */
}

.user-info-form .form-group.form-spacer {
    /* Empty spacer for alignment - no visible content */
    visibility: hidden;
}

.user-info-form label {
    font-weight: 600;
    color: #374151;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.user-info-form label i {
    color: #6366f1;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.user-info-form input,
.user-info-form textarea {
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
    font-family: inherit;
    width: 100%;
    min-width: 0; /* Allow shrinking */
    box-sizing: border-box;
    text-align: left !important; /* Ensure left alignment for all inputs */
    direction: ltr; /* Ensure left-to-right text direction */
}

.user-info-form input:focus,
.user-info-form textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.user-info-form input[type="date"] {
    max-width: 220px; /* Increased from 200px to show full date */
    min-width: 180px; /* Add min-width to ensure adequate space */
    font-family: inherit;
    letter-spacing: 0.5px; /* Better spacing for date display */
    padding-right: 1.5rem; /* Extra padding for date picker icon */
    text-align: left !important; /* Force left alignment for consistency */
    direction: ltr; /* Ensure left-to-right text direction */
}

/* Ensure date input displays properly across browsers */
.user-info-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 2px;
}

/* Additional browser-specific fixes for date input alignment */
.user-info-form input[type="date"]::-webkit-inner-spin-button,
.user-info-form input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.user-info-form input[type="date"]::-webkit-datetime-edit {
    text-align: left;
    padding: 0;
}

.user-info-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    text-align: left;
}

.user-info-form input[type="email"] {
    max-width: 280px; /* Reduced from 250px and use max-width for flexibility */
}

.user-info-form input[type="text"] {
    max-width: 300px; /* Add constraint for name field */
}

.user-info-form textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.privacy-notice {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1.5rem;
}

.privacy-notice p {
    margin: 0;
    color: #047857;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-notice i {
    color: #10b981;
}

.user-info-modal .modal-footer {
    background: #f8fafc;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}

.user-info-modal .modal-footer button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    min-width: 140px;
    justify-content: center;
}

.user-info-modal .secondary-button {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e0;
}

.user-info-modal .secondary-button:hover {
    background: #e2e8f0;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info-modal .primary-button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.user-info-modal .primary-button:hover {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* Responsive design for user info modal */
@media (max-width: 768px) {
    .user-info-modal {
        width: 98%;
        max-height: 95vh;
        margin: 1rem auto;
    }
    
    .user-info-modal .modal-header,
    .user-info-modal .modal-content,
    .user-info-modal .modal-footer {
        padding: 1.5rem;
    }
    
    .user-info-modal .modal-header h2 {
        font-size: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .user-info-form .form-group {
        max-width: none; /* Remove max-width constraints on mobile */
        justify-self: stretch; /* Stretch to full width on mobile */
    }
    
    .user-info-form input[type="date"],
    .user-info-form input[type="email"],
    .user-info-form input[type="text"] {
        max-width: none; /* Remove max-width constraints on mobile */
    }
    
    .user-info-modal .modal-footer {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    
    .user-info-modal .modal-footer button {
        width: 100%;
    }
}

/* Additional responsive breakpoint for tablets */
@media (max-width: 920px) and (min-width: 769px) {
    .form-row {
        gap: 1.5rem; /* Smaller gap for tablets */
    }
    
    .user-info-form .form-group {
        max-width: 300px; /* Smaller max-width for tablets */
    }
    
    .user-info-form input[type="date"] {
        max-width: 200px;
        min-width: 160px;
    }
    
    .user-info-form input[type="email"] {
        max-width: 240px;
    }
    
    .user-info-form input[type="text"] {
        max-width: 250px;
    }
}