/**
 * Base Styles - Reset & Typography
 * Financial Dashboard Theme (ui-ux-pro-max)
 * Professional financial reporting with trust colors
 */

/* === CSS Reset === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Typography & Body === */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-light);
    min-height: 100vh;
    color: var(--gray-800);
}

/* === Financial Dashboard Color Variables === */
:root {
    /* Primary - Trust Blue (Financial) */
    --primary-color: #1868db;
    --primary-dark: #1254b0;
    --primary-light: #4d8eef;
    --secondary-color: #2563eb;

    /* Financial Status Colors */
    --profit-color: #22C55E;
    --profit-dark: #16A34A;
    --profit-light: #86EFAC;
    --loss-color: #EF4444;
    --loss-dark: #DC2626;
    --loss-light: #FCA5A5;

    /* Status Colors */
    --success-color: #22C55E;
    --success-dark: #16A34A;
    --danger-color: #EF4444;
    --danger-light: rgba(239, 68, 68, 0.08);
    --warning-color: #F59E0B;
    --warning-dark: #D97706;
    --info-color: #3B82F6;
    --purple-color: #8B5CF6;
    --purple-light: rgba(139, 92, 246, 0.1);
    --pink-color: #ec4899;
    --pink-light: rgba(236, 72, 153, 0.1);

    /* Platform Colors */
    --android-color: #78a832;
    --android-light: rgba(164, 198, 57, 0.1);
    --ios-color: #007aff;
    --ios-light: rgba(0, 122, 255, 0.1);

    /* Revenue & Expense */
    --revenue-color: #22C55E;
    --expense-color: #EF4444;
    --budget-variance: #F97316;
    --balance-color: #64748B;

    /* Neutral Colors - Professional Grey Scale */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* Background Colors */
    --bg-white: #FFFFFF;
    --bg-light: #F8FAFC;
    --bg-page: #F5F7FA;
    --bg-dark: #0F172A;
    --bg-card: #FFFFFF;
    --bg-hover: #F1F5F9;

    /* Green Tints (success scale) */
    --green-50: #ecfdf5;
    --green-100: #d1fae5;
    --green-200: #bbf7d0;
    --green-300: #86efac;

    /* Yellow/Amber Tints */
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fef08a;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-50: #fef3c7;

    /* Blue Tints */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;

    /* Extended Purple */
    --purple-700: #6d28d9;
    --purple-600: #7c3aed;
    --purple-800: #4338ca;

    /* Pink/Rose */
    --pink-700: #be185d;

    /* Extended Green */
    --green-600: #059669;
    --green-700: #2e8b57;

    /* Orange */
    --orange-400: #f97316;
    --orange-700: #c2410c;

    /* Special */
    --indigo-gradient-start: #667eea;
    --indigo-gradient-end: #764ba2;
    --ios-blue: #007aff;

    /* Light Tints */
    --red-50: #fef2f2;
    --blue-alice: #f0f8ff;
    --pink-light-bg: #fce7f3;
    --purple-light-bg: #f3e8ff;
    --indigo-light-bg: #e0e7ff;
    --green-light-bg: #dcfce7;

    /* Border & Shadow - Professional */
    --border-color: #E2E8F0;
    --border-light: #F1F5F9;
    --border-dark: #CBD5E1;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 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);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

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

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Chart Colors */
    --chart-blue: #3B82F6;
    --chart-green: #22C55E;
    --chart-red: #EF4444;
    --chart-yellow: #F59E0B;
    --chart-purple: #8B5CF6;
    --chart-cyan: #06B6D4;
}

/* === Typography Utilities === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 32px; }

/* === Color Utilities === */
.text-primary { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.text-muted { color: var(--gray-500); }

/* Financial Color Utilities */
.text-profit { color: var(--profit-color); }
.text-loss { color: var(--loss-color); }
.text-revenue { color: var(--revenue-color); }
.text-expense { color: var(--expense-color); }
.text-balance { color: var(--balance-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-light { background-color: var(--bg-light); }
.bg-white { background-color: var(--bg-white); }
.bg-profit { background-color: var(--profit-light); }
.bg-loss { background-color: var(--loss-light); }

/* Financial Indicator Classes */
.financial-positive {
    color: var(--profit-color);
    font-weight: 600;
}
.financial-negative {
    color: var(--loss-color);
    font-weight: 600;
}
.financial-neutral {
    color: var(--balance-color);
    font-weight: 500;
}

/* Trend Indicators */
.trend-up::before {
    content: "\25B2";
    margin-right: 4px;
    color: var(--profit-color);
}
.trend-down::before {
    content: "\25BC";
    margin-right: 4px;
    color: var(--loss-color);
}
.trend-neutral::before {
    content: "\25AC";
    margin-right: 4px;
    color: var(--balance-color);
}

/* === Spacing Utilities === */
.m-0 { margin: 0; }
.p-0 { padding: 0; }

/* === Display Utilities === */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* === Responsive Typography === */

/* Main content default */
.main-content {
    padding: 20px;
}

/* Tablet (768px) */
@media (max-width: 768px) {
    body {
        padding: 0;
        font-size: 12px;
    }

    .text-3xl { font-size: 22px; }
    .text-2xl { font-size: 18px; }
    .text-xl { font-size: 15px; }
    .text-lg { font-size: 14px; }

    .main-content {
        padding: 10px;
    }

    /* Compact spacing variables for mobile */
    :root {
        --spacing-xs: 3px;
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 12px;
        --spacing-xl: 16px;
        --spacing-2xl: 20px;
        --spacing-3xl: 24px;
    }

    /* Hide on tablet and below */
    .hide-tablet {
        display: none !important;
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }

    .text-3xl { font-size: 20px; }
    .text-2xl { font-size: 16px; }
    .text-xl { font-size: 14px; }
    .text-lg { font-size: 13px; }
    .text-base { font-size: 12px; }
    .text-sm { font-size: 11px; }

    .main-content {
        padding: 8px;
    }

    /* Extra compact spacing for small mobile */
    :root {
        --spacing-xs: 2px;
        --spacing-sm: 4px;
        --spacing-md: 8px;
        --spacing-lg: 10px;
        --spacing-xl: 12px;
        --spacing-2xl: 16px;
        --spacing-3xl: 20px;
    }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
}

/* === Tooltip Component === */
.tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip-trigger .icon {
    color: var(--text-muted);
    margin-left: 6px;
    transition: color 0.15s ease;
}

.tooltip-trigger:hover .icon {
    color: var(--primary-color);
}

.tooltip-trigger .tooltip-content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--gray-800);
    color: var(--bg-white);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.tooltip-trigger .tooltip-content.tooltip-wrap {
    white-space: normal;
    text-align: left;
}

.tooltip-trigger:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow */
.tooltip-trigger .tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-800);
}

/* Tooltip position variants */
.tooltip-trigger .tooltip-content.tooltip-right {
    left: calc(100% + 8px);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-trigger .tooltip-content.tooltip-right::after {
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--gray-800);
}