/* ==========================================================================
   STYLESHEET - Portfolio Management System
   
   ARCHITECTURE OVERVIEW:
   - Mobile-first responsive design (768px breakpoint)
   - CSS Custom Properties (CSS Variables) for theming
   - BEM-inspired naming convention (component-based)
   - Modular sections with clear separation
   - Print/PDF optimized styles
   
   DESIGN SYSTEM:
   - Primary Font: DM Sans (headings, body)
   - Font Weights: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
   - Color Palette: Navy/Gold brand colors + semantic colors
   - Spacing Scale: 8px base unit (8, 16, 24, 32, etc.)
   - Border Radius: 4px (small), 8px (medium), 12px (large), 18px (XL)
   
   PERFORMANCE:
   - Hardware-accelerated animations (transform, opacity)
   - Efficient selectors (avoid universal selectors in performance-critical areas)
   - Minimal reflows/repaints
   - Lazy-loaded fonts with system font fallbacks
   
   BROWSER SUPPORT:
   - Modern browsers (Chrome, Firefox, Safari, Edge)
   - CSS Grid and Flexbox
   - CSS Custom Properties (IE11 not supported)
   ========================================================================== */

/* ==========================================================================
   GOOGLE FONTS IMPORT
   
   FONTS LOADED:
   - Inter: Sans-serif, high readability, optimized for screens
   - Sora: Sans-serif, geometric, modern aesthetic
   
   WEIGHTS: 300, 400, 500, 600, 700, 800
   DISPLAY: swap (show fallback immediately, swap when loaded)
   
   PERFORMANCE:
   - Only loads needed weights
   - display=swap prevents FOIT (Flash of Invisible Text)
   - System fonts used as fallbacks
   
   NOTE: Currently imported but not used (body uses "DM Sans")
   Consider removing or switching to DM Sans import
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   
   THEME SYSTEM:
   Centralized color palette and design tokens
   Allows dynamic theming and easy maintenance
   
   COLOR CATEGORIES:
   1. Brand Colors: Navy, Gold, Cream (company identity)
   2. Semantic Colors: Success, Danger, Warning, Info (user feedback)
   3. Grayscale: 50-900 (Tailwind-inspired scale)
   4. Metal Colors: Gold, Silver, Platinum, Palladium (thematic)
   5. UI Colors: Primary, Secondary, Accent (interface elements)
   
   SIZING VARIABLES:
   - topbar-height: 40px (top utility bar)
   - header-height: 70px (main header)
   
   NAMING CONVENTION:
   - Descriptive names (--primary, --success)
   - Numbered scales (--gray-50 to --gray-900)
   - Brand prefix for company colors (--brand-navy, --brand-gold)
   ========================================================================== */
:root {
    /* FONTS */
    --font-body: "DM Sans", system-ui, Segoe UI, Roboto, Arial, sans-serif;
    --font-numbers: 'IBM Plex Mono', 'Courier New', monospace;

    /* PRIMARY & SECONDARY COLORS - Main UI colors */
    --primary: #1e40af;           /* Blue - Primary actions, links */
    --primary-light: #3b82f6;     /* Lighter blue - Hover states */
    --primary-dark: #1e3a8a;      /* Darker blue - Active states */
    --secondary: #475569;         /* Gray-blue - Secondary elements */
    --secondary-light: #64748b;   /* Lighter gray-blue */
    
    /* ACCENT COLORS - Visual emphasis */
    --accent-gold: #d4af37;       /* Gold - Highlighting, emphasis */
    --accent-emerald: #059669;    /* Emerald - Success, positive */
    --accent-rose: #e11d48;       /* Rose - Danger, negative */
    
    /* SEMANTIC COLORS - User feedback states */
    --success: #059669;           /* Green - Success messages, positive values */
    --success-light: #d1fae5;     /* Light green - Success backgrounds */
    --danger: #dc2626;            /* Red - Errors, warnings, negative values */
    --danger-light: #fee2e2;      /* Light red - Error backgrounds */
    --warning: #f59e0b;           /* Amber - Warnings, caution */
    --warning-light: #fef3c7;     /* Light amber - Warning backgrounds */
    --info: #0ea5e9;              /* Sky blue - Information, neutral feedback */
    --info-light: #e0f2fe;        /* Light blue - Info backgrounds */
    
    /* GRAYSCALE PALETTE - Tailwind-inspired 50-900 scale */
    --gray-50: #f8fafc;           /* Lightest - Backgrounds */
    --gray-100: #f1f5f9;          /* Very light - Borders, dividers */
    --gray-200: #e2e8f0;          /* Light - Input borders */
    --gray-300: #cbd5e1;          /* Medium-light - Disabled states */
    --gray-400: #94a3b8;          /* Medium - Placeholder text */
    --gray-500: #64748b;          /* Mid-gray - Secondary text */
    --gray-600: #475569;          /* Medium-dark - Body text */
    --gray-700: #334155;          /* Dark - Headings */
    --gray-800: #1e293b;          /* Very dark - Strong emphasis */
    --gray-900: #0f172a;          /* Darkest - Primary text */
    
    /* BASIC COLORS - Pure black and white */
    --white: #ffffff;
    --black: #000000;
    
    /* METAL COLORS - Precious metals theme */
    --gold: #d4af37;              /* Gold - Metallic gold */
    --silver: #c0c0c0;            /* Silver - Metallic silver */
    --platinum: #e5e4e2;          /* Platinum - Metallic platinum */
    --palladium: #cba135;         /* Palladium - Metallic palladium */
    
    /* BRAND COLORS - Company identity palette */
    --brand-navy: #1a1d4c;        /* Navy - Primary brand color */
    --brand-navy-dark: #0f1229;   /* Dark navy - Headers, emphasis */
    --brand-navy-medium: #2a3560; /* Medium navy - Gradients */
    --brand-blue: #004bbc;        /* Blue - Accent brand color */
    --brand-gray: #333333;        /* Dark gray - Text */
    --brand-gold: #b38f40;        /* Gold - Primary brand accent */
    --brand-gold-2: #c8a94e;      /* Gold variant - Lighter gold */
    --brand-cream: #f1dd80;       /* Cream - Light accent, text on dark */
    
    /* SURFACE & LAYOUT COLORS */
    --surface: #f9fafb;           /* Surface - Card backgrounds */
    
    /* LAYOUT DIMENSIONS - Sticky header sizing */
    --topbar-height: 40px;        /* Height of utility topbar */
    --header-height: 70px;        /* Height of main header */
}

/* ==========================================================================
   RESET & BASE STYLES
   
   PURPOSE: Normalize browser defaults and establish base styling
   
   BOX-SIZING:
   - border-box: Width includes padding and border
   - Easier to reason about element sizing
   - Standard modern practice
   
   MARGIN & PADDING RESET:
   - Remove browser defaults
   - Explicit spacing in components
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   BODY STYLES
   
   BASE TYPOGRAPHY:
   - Font: DM Sans (not imported, falls back to system)
   - Weight: 300 (light, elegant appearance)
   - Line height: 1.7 (comfortable reading)
   - Letter spacing: -0.01em (tighter, modern look)
   
   BACKGROUND:
   - Linear gradient: White → Light blue (#f5f7ff)
   - Subtle gradient adds depth without distraction
   
   MIN-HEIGHT:
   - 100vh ensures content fills viewport
   - Footer can stick to bottom
   
   FONT SMOOTHING:
   - Antialiased rendering for clearer text
   - Better appearance on macOS/iOS
   ========================================================================== */
body {
    font-family: var(--font-body);
    font-weight: 300;
    background: linear-gradient(180deg, #ffffff, #f5f7ff);
    color: var(--gray-900); 
    line-height: 1.7; 
    min-height: 100vh; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em; 
}

/* ==========================================================================
   TYPOGRAPHY - HEADINGS
   
   HEADING SCALE:
   - h1: 1.875rem (30px) - Page titles
   - h2: 1.5rem (24px) - Section headers
   - h3: 1rem (16px) - Subsections (brand blue color)
   - h4: 1.125rem (18px) - Component headers
   
   DESIGN DECISIONS:
   - Font weight: 600 (semibold for hierarchy)
   - Line height: 1.3 (tighter for headings)
   - Letter spacing: -0.03em (tighter for impact)
   - Margin bottom: 8px (spacing from content)
   
   SPECIAL CASES:
   - #headerTitle: Header-specific styling (cream color on navy)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--gray-900);
    letter-spacing: -0.03em; 
}

h1 { 
    font-size: 1.875rem;  /* 30px */
    font-weight: 700;
}

h1#headerTitle { 
    font-size: 1.5rem;    /* 24px - Header title */
    font-weight: 700;
    color: var(--brand-cream);  /* Light on dark header */
}

h2 { 
    font-size: 1.5rem;    /* 24px */
    font-weight: 700;
}

h3 { 
    font-size: 1rem;      /* 16px */
    font-weight: 700;
    color: var(--brand-blue) !important;  /* Brand accent color */
}

h4 { 
    font-size: 1.125rem;  /* 18px */
    font-weight: 500;
}

/* PARAGRAPH STYLES */
p {
    font-weight: 300;     /* Light weight for readability */
    line-height: 1.7;     /* Comfortable reading line height */
}

/* LINK & BUTTON BASE STYLES */
a {
    font-family: var(--font-body);
    color: var(--gray-800);
}

button {
    font-family: var(--font-body);
}

/* ==========================================================================
   LAYOUT CONTAINERS
   
   CONTAINER STRATEGY:
   - Max width: 1200px (optimal reading width)
   - Centered with auto margins
   - Horizontal padding: 16px (mobile-friendly)
   
   MAIN-CONTAINER:
   - Additional padding: 24px (desktop spacing)
   - Used for main content areas
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ==========================================================================
   GRID SYSTEM
   
   RESPONSIVE GRID:
   - CSS Grid with auto-fit for responsiveness
   - Gap: 24px (consistent spacing)
   - Minimum column width: varies by grid type
   
   GRID TYPES:
   - grid-2: 2 columns, min 300px (cards, panels)
   - grid-3: 3 columns, min 200px (smaller items)
   - grid-4: 4 columns, min 150px (compact grids)
   
   SPAN-2:
   - Element spans 2 columns (featured content)
   ========================================================================== */
.grid { 
    display: grid; 
    gap: 24px; 
}

.grid-2 { 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

.grid-3 { 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

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

.span-2 { 
    grid-column: span 2; 
}

/* ==========================================================================
   LOADER - APP INITIALIZATION SCREEN
   
   PURPOSE: Full-screen loader shown during app initialization
   
   DESIGN:
   - Navy gradient background (brand colors)
   - Centered content (flexbox)
   - Fixed positioning (covers entire viewport)
   - Z-index: 9999 (above all content)
   
   ANIMATIONS:
   - Spinner: Rotate 360° (1s linear infinite)
   - Icon: Float up/down (2s ease-in-out infinite)
   
   TRANSITIONS:
   - Fade out when .hidden class added
   - Opacity and visibility for smooth exit
   
   COMPONENTS:
   - loader-icon: Emoji/icon (animated float)
   - loader-spinner: Circle spinner (animated rotate)
   - loader-text: Main loading message
   - loader-subtext: Secondary message
   ========================================================================== */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: float 2s ease-in-out infinite;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(241, 221, 128, 0.2);
    border-top: 4px solid var(--brand-gold-2);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.loader-text {
    color: var(--brand-cream);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.loader-subtext {
    color: var(--brand-gold-2);
    font-size: 0.85rem;
    margin-top: 10px;
    opacity: 0.8;
}

/* LOADER ANIMATIONS */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* ==========================================================================
   TOPBAR - UTILITY BAR
   
   PURPOSE: Secondary navigation bar with market status and controls
   
   LAYOUT:
   - Sticky positioning (top: 0, stays visible on scroll)
   - Height: 40px (var(--topbar-height))
   - Z-index: 101 (above header: 100)
   
   DESIGN:
   - Navy gradient background
   - Gold border bottom (brand accent)
   - Small font: 0.75rem (12px)
   - Cream text color
   
   COMPONENTS:
   - topbar-left: Market status, live indicator
   - topbar-right: Currency/language selectors
   - topbar-select: Dropdown controls
   
   FEATURES:
   - Market status with pulse animation
   - Price updates with color-coded changes
   - Language and currency selectors
   ========================================================================== */
.topbar {
    background: linear-gradient(90deg, var(--brand-navy-dark) 0%, var(--brand-navy) 100%);
    border-bottom: 1px solid rgba(200, 169, 78, 0.2);
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 101;
    font-size: 0.75rem;
    color: rgba(241, 221, 128, 0.85);
    height: var(--topbar-height);
    display: flex;
    align-items: center;
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right {
    padding-right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* MARKET STATUS INDICATOR */
.market-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.market-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.market-indicator.open {
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.market-indicator.closed {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* TOPBAR DIVIDER */
.topbar-divider {
    color: rgba(200, 169, 78, 0.4);
    margin: 0 4px;
}

/* TOPBAR COMPONENTS */
.topbar-update,
.topbar-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-price {
    font-weight: 600;
    color: var(--brand-gold-2);
}

/* PRICE CHANGE INDICATORS */
.price-change {
    font-size: 0.7rem;
}

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

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

/* TOPBAR SELECT DROPDOWNS */
.topbar-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(200, 169, 78, 0.3);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--brand-cream);
    cursor: pointer;
    transition: all 0.2s;
}

.topbar-select:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(200, 169, 78, 0.5);
}

.topbar-select:focus {
    outline: none;
    border-color: var(--brand-gold-2);
    box-shadow: 0 0 0 2px rgba(200, 169, 78, 0.2);
}

/* TOPBAR GROUP (LABEL + CONTROL) */
.topbar-group {
    padding-right: 15px;
}

.topbar-group label {
    padding-right: 5px;
    font-size: 0.75rem;
    color: var(--brand-gold);
    position: relative;
    top: 2px;
}

/* ==========================================================================
   HEADER - MAIN NAVIGATION BAR
   
   PURPOSE: Primary header with logo, title, and user controls
   
   LAYOUT:
   - Sticky positioning (stays visible on scroll)
   - Top: 40px (below topbar) or 0 (if no topbar)
   - Height: 70px (var(--header-height))
   - Z-index: 100 (below topbar: 101)
   
   DESIGN:
   - Navy gradient background
   - Gold bottom border (2px brand color)
   - Box shadow for depth
   
   COMPONENTS:
   - header-logo: Logo icon + brand name
   - header-center: Client selector (admin only)
   - header-right: User status + logout button
   
   MODIFIERS:
   - .no-topbar: Adjusts position when topbar hidden
   ========================================================================== */
.header {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-medium) 100%);
    border-bottom: 2px solid var(--brand-gold-2);
    padding: 16px 0;
    position: sticky;
    top: var(--topbar-height);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header.no-topbar {
    top: 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* HEADER LOGO SECTION */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    font-size: 1.8rem;
    color: var(--brand-gold-2);
}

.header-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-title-main {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-cream);
    letter-spacing: 0.5px;
    line-height: 1;
}

.header-title-sub {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--brand-gold-2);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* HEADER CENTER & RIGHT */
.header-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right {
    padding-right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ==========================================================================
   CARDS & CONTAINERS
   
   CARD DESIGN:
   - White background (clean, professional)
   - Subtle border (gray-100)
   - Rounded corners (8px)
   - Box shadow for depth
   - Fade-in animation on render
   
   ANIMATION:
   - Opacity: 0 → 1
   - Transform: translateY(10px) → 0
   - Duration: 0.3s
   - Easing: ease
   
   SPACING:
   - Padding: 20px 25px (comfortable inner spacing)
   - Margin bottom: 24px (vertical rhythm)
   ========================================================================== */
.card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    padding: 20px 25px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    margin-bottom: 24px;
    animation: fadeIn 0.3s ease;
}

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

/* ==========================================================================
   FORM COMPONENTS
   
   FORM GROUP:
   - Flex column layout (vertical stacking)
   - Gap: 16px (space between fields)
   
   FORM FIELD:
   - Individual field container
   - Label + input grouping
   - Minimal gap (0px, label directly above input)
   ========================================================================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* ==========================================================================
   LOGIN LANDING PAGE
   
   PURPOSE: Modern landing page with secure login form
   
   DESIGN APPROACH:
   - Centered card layout
   - Brand-themed gradient logo
   - Smooth transitions for form show/hide
   - Responsive design
   
   COMPONENTS:
   - login-landing-wrapper: Full-height flex container
   - login-landing-card: White card with shadow
   - login-landing-logo: Gradient square logo
   - login-landing-form: Animated form container
   - login-landing-btn: Primary CTA button
   
   TRANSITIONS:
   - Form slides in/out with opacity fade
   - Max-height animation for smooth collapse
   - Cubic-bezier easing for natural motion
   
   STATE MANAGEMENT:
   - .login-form-hidden: Hides login form
   - .hidden: Hides "Enter Secure Login" button
   ========================================================================== */
.login-landing-wrapper {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0 -24px; /* Compensate main-container padding */
}

.login-landing-card {
    background: var(--white);
    border-radius: 18px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 12px 30px rgba(26,29,76,.12);
    padding: 30px 25px;
    max-width: 650px;
    width: 100%;
}

/* LOGO SECTION */
.login-landing-logo-container {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 5px;
}

.login-landing-logo {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-2));
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--brand-navy);
    letter-spacing: -1px;
}

.login-landing-wg {
    color: var(--gold);
    text-shadow: 0.025rem 0.05rem 0px var(--gray-500);
}

.login-landing-brand-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: left;
}

/* TEXT CONTENT */
.login-landing-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 15px;
    line-height: 1;
    display: block;
    letter-spacing: 0.5px;
}

.login-landing-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: left;
}

/* ANIMATED FORM CONTAINER */
.login-landing-form {
    padding: 30px 15px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    align-items: center;
}

.login-landing-form.login-form-hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* SHOW LOGIN BUTTON */
#showLoginBtn {
    margin-bottom: 0px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#showLoginBtn.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

/* FORM BUTTONS */
.login-landing-btn-back {
    min-width: 300px;
    background: transparent;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: -10px;
}

.login-landing-btn-back:hover {
    background: #f7fafc;
    color: #4a5568;
    border-color: #cbd5e0;
}

.login-landing-btn-submit {
    min-width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* FORM FIELDS */
.login-landing-field {
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: center;
}

.login-landing-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-navy);
    letter-spacing: 0.02em;
}

.login-landing-input {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 300;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    color: #2d3748;
}

.login-landing-input:focus {
    outline: none;
    border-color: #d4a574;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

/* PRIMARY BUTTON */
.login-landing-btn {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-2));
    color: #1a202c;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
    margin-top: 0px;
}

.login-landing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
}

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

/* ERROR MESSAGE */
.login-landing-error {
    min-width: 300px;
    text-align: center;
    color: #e53e3e;
    font-size: 0.875rem;
    padding: 12px;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 8px;
    margin-top: -10px;
}

/* DISCLAIMER & FOOTER */
.login-landing-disclaimer {
    font-size: 0.8rem;
    color: var(--gray-600);
    line-height: 1.75;
    border-top: 1px solid var(--gray-200);
    padding-top: 20px;
}

.login-landing-disclaimer a {
    color: #d4a574;
    text-decoration: none;
}

.login-landing-disclaimer a:hover {
    text-decoration: underline;
}

.login-landing-footer {
    text-align: center;
    padding: 30px 20px;
    color: #a0aec0;
    font-size: 0.85rem;
    line-height: 1.8;
    margin-top: auto;
}

.login-landing-footer-tagline {
    margin-bottom: 8px;
}

/* ==========================================================================
   FORM INPUTS
   
   LABEL STYLING:
   - Small caps style (0.875rem, uppercase)
   - Semibold weight (600)
   - Letter spacing for readability
   - Dark gray color
   
   INPUT STYLING:
   - Comfortable padding (12px 25px)
   - 2px border (clear boundary)
   - Large border radius (12px, modern look)
   - Smooth transitions (200ms cubic-bezier)
   
   FOCUS STATE:
   - Primary color border
   - Box shadow for emphasis
   - No outline (custom focus indicator)
   
   READONLY STATE:
   - Light gray background
   - Not-allowed cursor
   - Reduced opacity (0.7)
   ========================================================================== */
label {
    font-size: 0.875rem;
    font-weight: 600; 
    color: var(--gray-700);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

input, select, textarea {
    padding: 12px 25px;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 300; 
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--white);
    font-family: var(--font-body);
    color: var(--gray-900);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[readonly] {
    background: var(--gray-50);
    cursor: not-allowed;
    opacity: 0.7;
}

input[type="number"],
input[data-format="number"],
.prices_inputs {
    font-family: var(--font-numbers);
}

.select-field { 
    min-width: 200px; 
}

/* ==========================================================================
   BUTTONS
   
   BASE BUTTON STYLES:
   - Padding: 8px 24px (comfortable hit area)
   - Border radius: 8px (modern rounded)
   - Font size: 0.85rem (slightly smaller)
   - Font weight: 500 (medium weight)
   - Transition: all 0.2s (smooth interactions)
   
   HOVER EFFECT:
   - Transform: translateY(-2px) (lift effect)
   - Box shadow (depth illusion)
   
   ACTIVE EFFECT:
   - Transform: translateY(0) (press down)
   
   BUTTON VARIANTS:
   - .btn-primary: Primary blue (main actions)
   - .btn-secondary: Secondary gray (cancel, etc.)
   - .btn-success: Green (confirm, save)
   - .btn-danger: Red (delete, destructive)
   - .btn-small: Compact version (4px 8px, 0.75rem)
   
   BUTTON GROUP:
   - Flex layout with gap
   - Equal-width buttons (flex: 1)
   ========================================================================== */
.btn {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

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

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

.btn-secondary { 
    background: var(--secondary); 
    color: var(--white);
}

.btn-success { 
    background: var(--success); 
    color: var(--white);
}

.btn-danger { 
    background: var(--danger); 
    color: var(--white);
}

.btn-small { 
    padding: 4px 8px; 
    font-size: 0.75rem; 
}

.btn-group { 
    display: flex; 
    gap: 8px;
}

.btn-group .btn { 
    flex: 1;
}

/* ==========================================================================
   TABLES
   
   BASE TABLE STYLES:
   - Width: 100% (full container width)
   - Border collapse: collapse (clean borders)
   
   TABLE VARIANTS:
   - .data-table: Tabular numbers (numeric data alignment)
   - .info-table: Key-value pairs (bold keys, regular values)
   - .balance-table: Right-aligned numbers (financial data)
   
   HEADING (TH) STYLES:
   - Left align by default
   - Padding: 10px
   - Font weight: 600 (semibold)
   - Brand gold color
   - Small font: 0.75rem
   - Uppercase with letter spacing
   - Gold bottom border (2px, brand color)
   
   CELL (TD) STYLES:
   - Padding: 10px
   - Light gray bottom border (divider)
   - Font size: 0.875rem (14px)
   - Light weight: 300
   - Dark gray color
   
   SPECIAL CLASSES:
   - .td_title: Bold first column (600 weight, dark color)
   - .align_left / .align_right: Text alignment
   ========================================================================== */
table { 
    width: 100%; 
    border-collapse: collapse;
}

table,
.data-table,
.balance-table,
.info-table {
    font-variant-numeric: tabular-nums;
}

.data-table { 
    font-variant-numeric: tabular-nums; 
}

.info-table td:first-child { 
    color: var(--gray-900); 
    font-weight: 600; 
}

.info-table td:last-child { 
    color: var(--gray-900); 
    font-weight: 400;
}

.balance-table th { 
    text-align: right;
}

.balance-table th:first-child { 
    text-align: left;
}

.balance-table td { 
    text-align: right;
}

.balance-table td:first-child { 
    text-align: left;
}

th {
    font-family: var(--font-body);
    text-align: left;
    padding: 10px 10px;
    font-weight: 600; 
    color: var(--brand-gold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--brand-gold-2);
}

td {
    font-family: var(--font-numbers);
    padding: 10px 10px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    font-weight: 300; 
    color: var(--gray-800);
}

td.td_title {
    font-family: var(--font-body);
    font-weight: 600 !important; 
    color: var(--gray-900);
}

th.align_left,
td.align_left {
    text-align: left;
}

th.align_right,
td.align_right {
    text-align: right;
}

.data-table td {
    font-size: 0.875rem;
    font-weight: 400; 
}

.balance-table td {
    font-weight: 500;
}

/* ==========================================================================
   BADGES & STATUS INDICATORS
   
   BADGE DESIGN:
   - Inline-block display
   - Small padding (4px 8px)
   - Small border radius (4px)
   - Small font (0.75rem)
   - Bold weight (600)
   - Uppercase text
   
   BADGE VARIANTS:
   - .badge-admin: Green background (success color)
   - .badge-user: Blue background (primary color)
   ========================================================================== */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

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

.badge-user { 
    background: var(--primary); 
    color: var(--white);
}

/* ==========================================================================
   ADMIN & USER HEADERS
   
   ADMIN HEADER:
   - Purple gradient background
   - White text
   
   USER HEADER:
   - Blue to purple gradient
   - White text
   
   HEADER CONTROLS:
   - Flex layout with gap
   - Admin controls below header
   ========================================================================== */
.admin-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--white);
}

.admin-controls { 
    display: flex; 
    gap: 16px; 
    margin-top: 16px;
}

.user-header {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: var(--white);
}

/* ==========================================================================
   HEADER COMPONENTS - BUTTONS & STATUS
   
   USER STATUS DISPLAY:
   - Flex layout (horizontal or vertical)
   - Name, dot separator, logout button
   
   HEADER BUTTONS:
   - Transparent background
   - Border bottom for underline effect
   - Color transitions on hover
   - Slightly larger on hover
   
   BUTTON VARIANTS:
   - .bt_header_logout: User logout (white)
   - .bt_admin_header_logout: Admin logout (gold)
   - .bt_header_print: User print (white)
   - .bt_admin_header_print: Admin print (gold)
   
   NEW CLIENT BUTTON:
   - Height: 40px (consistent with header)
   - Semibold weight (600)
   
   CLIENT SELECT DROPDOWN:
   - Height: 40px
   - Transparent background
   - White text on dark header
   - Medium weight (500)
   ========================================================================== */
.span_header_name {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
}

.span_header_dot {
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    padding: 1px 5px;
}

.bt_header_logout {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid white;
    color: var(--white);
    cursor: pointer;
    font-size: 0.92rem;
}

.bt_header_logout:hover {
    color: var(--gray-100);
    font-size: 0.95rem;
}

.bt_admin_header_logout {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--brand-gold);
    color: var(--brand-gold);
    cursor: pointer;
    font-size: 0.85rem;
}

.bt_admin_header_logout:hover {
    color: var(--gray-100);
}

.bt_admin_header_print {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--brand-gold);
    color: var(--brand-gold);
    cursor: pointer;
    font-size: 0.92rem;
    margin-right: 5px;
}

.bt_admin_header_print:hover {
    color: var(--gray-100);
}

.bt_header_print {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid white;
    color: var(--white);
    cursor: pointer;
    font-size: 0.92rem;
    margin-right: 5px;
}

.bt_header_print:hover {
    color: var(--gray-100);
    font-size: 0.95rem;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.new_client {
    height: 40px;
    font-weight: 600;
}

.select_client {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--white);
    font-weight: 500;
}

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

.user-status.vertical {
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
    margin-top: -8px;
}

.user-status.vertical .span_header_dot {
    padding: 0px 5px 0px 0px;
}

/* ==========================================================================
   FORM ELEMENTS - PRICE MANAGEMENT
   
   METAL/USER/PRICE LABELS:
   - Bold weight (600) for emphasis
   
   PRICE GROUP:
   - Light platinum border
   - Border radius: 8px
   - Padding: 8px
   - Groups related prices together
   
   LIVE INDICATOR:
   - Success green color
   - Pulse animation (2s infinite)
   - Shows real-time data status
   ========================================================================== */
.metal-label, 
.user-label, 
.price-label { 
    font-weight: 600;
}

.price-group {
    padding: 8px;
    border: 1px solid var(--platinum);
    border-radius: 8px;
}

.price-group label { 
    display: block; 
    margin-bottom: 4px; 
    font-weight: 600;
}

.live-indicator { 
    color: var(--success); 
    animation: pulse 2s infinite;
}

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

/* PRICE INPUTS - ADMIN EDITING */
.prices_inputs {
    border: none;
    background: transparent;
    color: var(--gray-600); 
    padding: 4px 8px;
    font-size: 1em;
    outline: none;
}

.prices_inputs:disabled {
    border: none;
    background: transparent;
    cursor: not-allowed;
}

.prices_inputs.prices_dates {
    font-size: 0.8em;
}

/* ==========================================================================
   UTILITY CLASSES
   
   TEXT UTILITIES:
   - .text-small: 0.75rem (12px)
   - .text-muted: Secondary gray color
   - .text-success: Success green, medium weight
   - .text-danger: Danger red, medium weight
   - .text-center: Center aligned text
   
   VALUE CLASSES:
   - .negative-value: Red color for negative numbers
   
   LAYOUT UTILITIES:
   - .hidden: Display none (important to override)
   - .flex-between: Flexbox space-between with center align
   
   MESSAGE CLASSES:
   - .error-message: Red error text, centered
   - .timestamp-note: Small muted timestamp text
   ========================================================================== */
.text-small { 
    font-size: 0.75rem;
}

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

.text-success { 
    color: var(--success); 
    font-weight: 500;
}

.text-danger { 
    color: var(--danger); 
    font-weight: 500;
}

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

.negative-value { 
    color: var(--danger); 
    font-weight: 500; 
}

.hidden { 
    display: none !important;
}

.flex-between { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.error-message {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 8px;
    text-align: center;
}

.timestamp-note {
    font-size: 0.75rem;
    color: var(--secondary);
    margin-top: 8px;
    text-align: center;
}

/* ==========================================================================
   FOOTER
   
   DESIGN:
   - White background
   - Gray top border (divider)
   - Centered text
   - Small font (0.80rem)
   - Secondary color text
   
   POSITION VARIANTS:
   - .footer_fixed: Fixed at viewport bottom
   - .footer_relative: Relative positioning
   
   FOOTER TEXT:
   - Line height: 1.75 (comfortable reading)
   - Block display for multiple lines
   ========================================================================== */
.footer {
    border-top: 1px solid var(--gray-200);
    background: var(--white);
    text-align: center;
    padding: 15px 10px 10px;
    color: var(--secondary);
    font-size: 0.80rem;
}

.footer.footer_fixed {
    position: fixed !important;
    bottom: 0px !important;
    width: 100% !important;
}

.footer.footer_relative {
    position: relative !important;
}

.footer .textFooter span {
    display: block;
    line-height: 1.75;
}

/* ==========================================================================
   CHARTS - Chart.js CONTAINERS
   
   CHART CONTAINER:
   - Relative positioning (for absolute children)
   - Height: 350px (fixed for consistency)
   - Width: 100% (responsive)
   
   CHART SUBTITLE:
   - Small font (0.8rem)
   - Dark gray color
   - Regular weight (400)
   - Right aligned
   - Bottom margin: 8px
   
   CANVAS ELEMENT:
   - Max width/height: 100% (responsive scaling)
   ========================================================================== */
.chart-container { 
    position: relative; 
    height: 350px; 
    width: 100%;
}

.chart-subtitle {
    font-size: 0.8rem;
    color: var(--gray-700);
    font-weight: 400;
    text-align: right;
    margin-bottom: 8px;
}

canvas { 
    max-width: 100%; 
    max-height: 100%; 
}

/* ==========================================================================
   LOADING STATES
   
   LOADING CLASS:
   - Reduced opacity (0.6)
   - Pointer events disabled (prevent interaction)
   
   SPINNER:
   - Circular rotating loader
   - Gray border with primary colored top
   - 40x40px size
   - 1s rotation (linear infinite)
   - Centered with auto margins
   ========================================================================== */
.loading { 
    opacity: 0.6; 
    pointer-events: none;
}

.spinner {
    border: 3px solid var(--gray-50);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px; 
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 32px auto;
}

/* ==========================================================================
   PDF LOADING OVERLAY
   
   PURPOSE: Full-screen overlay during PDF generation
   
   DESIGN:
   - Fixed positioning (covers entire viewport)
   - Dark navy background (0.9 opacity)
   - Centered content (flexbox)
   - Z-index: 10000 (above everything)
   
   COMPONENTS:
   - pdf-loading: Full-screen overlay
   - pdf-loading-content: Centered message
   - spinner: Rotating loader
   - p: Loading message text
   ========================================================================== */
.pdf-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.pdf-loading-content {
    text-align: center;
    color: var(--brand-cream);
}

.pdf-loading-content .spinner {
    margin: 0 auto 20px;
}

.pdf-loading-content p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--brand-cream);
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE (max-width: 768px)
   
   STRATEGY: Mobile-first approach with desktop overrides
   
   MOBILE CHANGES:
   - Topbar: Smaller height (35px), smaller font, hide price
   - Header: Adjust for smaller topbar, smaller title, vertical layout
   - Main container: Reduced padding (16px)
   - Grid: Single column (collapse to 1fr)
   - Typography: Smaller heading sizes
   
   LAYOUT ADJUSTMENTS:
   - Header center and right sections stack vertically
   - Topbar components wrap and hide less important info
   - Cards and grids become single column
   ========================================================================== */
@media (max-width: 768px) {
    /* TOPBAR MOBILE ADJUSTMENTS */
    .topbar {
        padding: 6px 0;
        font-size: 0.7rem;
        height: 35px;
    }
    
    .topbar-left {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .topbar-right {
        gap: 8px;
    }
    
    .topbar-price {
        display: none;  /* Hide price on mobile (space constraint) */
    }

    .topbar-price,
    .price-change {
        font-family: var(--font-numbers);
        font-size: 0.75rem;
    }    

    /* HEADER MOBILE ADJUSTMENTS */
    .header {
        top: 35px;      /* Adjust for smaller topbar */
        padding: 12px 0;
        height: auto;   /* Allow content to determine height */
    }
    
    .header-title-main {
        font-size: 1rem;
    }
    
    .header-title-sub {
        font-size: 0.65rem;
    }
    
    /* LAYOUT MOBILE ADJUSTMENTS */
    .main-container { 
        padding: 16px;  /* Reduce padding on mobile */
    }
    
    /* GRID MOBILE COLLAPSE */
    .grid-2, .grid-3, .grid-4 { 
        grid-template-columns: 1fr;  /* Single column */
    }
    
    .span-2 { 
        grid-column: span 1;  /* No spanning on mobile */
    }
    
    /* HEADER LAYOUT MOBILE */
    .header .container { 
        flex-direction: column;  /* Stack header items */
        gap: 8px;
    }
    
    /* TYPOGRAPHY MOBILE */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
}

/* LOGIN LANDING RESPONSIVE (max-width: 768px) */
@media (max-width: 768px) {
    .login-landing-card {
        padding: 40px 30px;
    }

    .login-landing-title {
        font-size: 2rem;
    }

    .login-landing-subtitle {
        font-size: 1rem;
    }

    .login-landing-btn {
        padding: 14px 32px;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   PDF MODE - OPTIMIZED FOR PDF GENERATION
   
   PURPOSE: Clean, printable styles for PDF export
   
   STRATEGY:
   - Remove all interactive elements (buttons, selects)
   - Simplify colors (solid, no gradients)
   - Remove shadows and transparency
   - Use print-safe colors (dark enough to print)
   - Ensure proper page breaks
   
   KEY CHANGES:
   - White background (no gradient)
   - Hide buttons, selects, loader, live indicator
   - Solid colors (no opacity or transparency)
   - Black text for better printing
   - Remove shadows and decorative effects
   - Smaller fonts for compact layout
   
   COLOR ADJUSTMENTS:
   - Success: Dark green (#006400) - prints well
   - Danger: Dark red (#8B0000) - prints well
   - Headers: Solid black backgrounds (#e0e0e0)
   - Text: Solid black (#000) - maximum contrast
   
   CHART ADJUSTMENTS:
   - Fixed height (280px)
   - White background
   - Positioned subtitle
   ========================================================================== */
.pdf-mode {
    background: white !important;
    opacity: 1 !important;
    filter: none !important;
}

.pdf-mode * {
    opacity: 1 !important;
    filter: none !important;
}

/* HIDE INTERACTIVE ELEMENTS IN PDF */
.pdf-mode .btn:not(.no-hide-pdf),
.pdf-mode button:not(.no-hide-pdf),
.pdf-mode select:not(.no-hide-pdf),
.pdf-mode .no-pdf {
    display: none !important;
}

.pdf-mode #appLoader,
.pdf-mode .live-indicator {
    display: none !important;
    visibility: hidden !important;
}

.pdf-mode .timestamp-note {
    font-size: 8px;
}

/* CARD STYLES FOR PDF - NO SHADOWS */
.pdf-mode .card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    page-break-inside: avoid !important;
    margin-bottom: 16px !important;
    opacity: 1 !important;
}

/* TYPOGRAPHY FOR PDF */
.pdf-mode h3 {
    display: block !important;
    color: var(--brand-navy) !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.pdf-mode .chart-subtitle {
    position: absolute !important;
    margin-top: 40px;
}

.pdf-mode #holdingsChart,
.pdf-mode #capitalChart {
    margin-top: 38px;
}

/* TABLE STYLES FOR PDF - SOLID COLORS */
.pdf-mode table {
    width: 100% !important;
    background: transparent !important;
    opacity: 1 !important;
}

.pdf-mode th {
    font-size: 8px !important;
    background: #e0e0e0 !important;  /* Solid gray */
    color: #000 !important;          /* Solid black */
    border-bottom: 2px solid #333 !important;
    padding: 8px 6px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.pdf-mode td {
    font-size: 10px !important;
    font-weight: 300 !important;
    background: white !important;
    color: #000 !important;          /* Solid black */
    border-bottom: 1px solid #999 !important;
    padding: 6px 6px !important;
    opacity: 1 !important;
}

/* TEXT COLOR FOR PDF - SOLID COLORS */
.pdf-mode .text-muted,
.pdf-mode .text-success,
.pdf-mode .text-danger {
    opacity: 1 !important;
}

.pdf-mode .text-success {
    color: #006400 !important;       /* Dark green for printing */
}

.pdf-mode .text-danger {
    color: #8B0000 !important;       /* Dark red for printing */
}

/* CHART ADJUSTMENTS FOR PDF */
.pdf-mode .chart-container {
    height: 280px !important;
    background: white !important;
    opacity: 1 !important;
}

/* REMOVE OVERLAY LAYERS */
.pdf-mode::before,
.pdf-mode::after {
    display: none !important;
}

/* PDF-SPECIFIC HEADER (visible only in PDF mode) */
.pdf-header {
    display: none;
}

.pdf-mode .pdf-header {
    display: block;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 3px solid #d4a574;
}

.pdf-mode .pdf-header h2 {
    color: #1a1d4c;
    font-size: 24px;
    margin: 0 0 10px 0;
}

.pdf-mode .pdf-header p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* ==========================================================================
   BROWSER PRINT STYLES
   
   PURPOSE: Native browser print optimization
   
   WHEN USED: Print dialog (Ctrl+P / Cmd+P)
   DIFFERENT FROM: .pdf-mode (used by jsPDF generation)
   
   PRINT CHANGES:
   - Hide topbar, header, footer (non-content)
   - Hide all buttons and controls
   - Remove box shadows (don't print well)
   - Add borders for table definition
   ========================================================================== */
@media print {
    .topbar,
    .header,
    .footer,
    .btn,
    button,
    select {
        display: none;
    }
    
    .card { 
        box-shadow: none; 
        border: 1px solid var(--platinum);
    }
}