/* File: assets/css/global.css */

:root {
    /* --- BRAND COLORS (Electric Blue Palette) --- */
    --color-brand: #3B82F6;       /* Electric Blue (Professional) */
    --color-brand-dark: #2563EB;  /* Deep Blue for Hover */
    
    /* --- THEME COLORS --- */
    --color-dark: #0F172A;        /* Deep Navy (Backgrounds) */
    --color-dark-light: #1E293B;  /* Lighter Navy (Cards) */
    --color-text-main: #334155;   /* Slate for White BG */
    --color-text-light: #94A3B8;  /* Muted Text */
    --color-white: #FFFFFF;
    --color-success: #10B981;     /* Green for Money/Success */
    
    /* --- LAYOUT VARIABLES --- */
    --container-width: 1280px;
    --header-height: 70px;
}

/* Global Reset */
body {
    color: var(--color-text-main);
    background-color: #F8FAFC;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Horizontal Scroll rokne k liye */
    margin: 0;
    padding: 0;
}

/* Responsive Container */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* Padding width mein shamil ho */
}

/* Links & Buttons */
a { 
    color: var(--color-brand); 
    text-decoration: none; 
    transition: color 0.2s ease-in-out; 
}

a:hover { 
    color: var(--color-brand-dark); /* Ensures hover is blue, not pink */
}

/* Dark Section Text Fixes */
.bg-dark { 
    background-color: var(--color-dark); 
    color: var(--color-white); 
}

.bg-dark h1, 
.bg-dark h2, 
.bg-dark h3, 
.bg-dark h4 { 
    color: var(--color-white) !important; 
}

.bg-dark p, 
.bg-dark span { 
    color: #CBD5E1 !important; 
}

/* Images Responsive */
img { 
    max-width: 100%; 
    height: auto; 
}

/* ============================================================
   MOBILE SPACING FIX (Removes Double Layout Squish)
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Main container ka side space kam kiya */
    .wealth-layout-container {
        padding: 0 10px !important; 
    }
    
    /* 2. White Card ki inner padding aur radius adjust kiya */
    .content-section {
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }
    
    .section-header {
        padding: 15px 12px !important; 
    }
    
    .section-content {
        padding: 15px 12px !important; 
    }
    
    /* 3. Graph box ki padding kam ki taake chart ko poori jagah mile */
    .graph-container {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    /* 4. Tables ke andar ka space bhi thora tight kiya */
    .data-table th, 
    .data-table td {
        padding: 12px 8px !important;
    }
    
    /* 5. Flexbox rows (Data lists) ka space adjust kiya */
    .fin-data-row {
        padding: 12px 10px !important;
    }
}