/* TimeTracker Modern Theme Template - Enhanced CSS Variables */
/* This file contains the complete modern theme system used in TimeTracker */
/* It can be used as a template for future customizations while maintaining consistency */

/* ===== MODERN LIGHT THEME VARIABLES ===== */
:root {
    /* Primary Color Palette - Enhanced Modern Blue */
    --primary-color: #3b82f6;           /* Main brand color - Modern Blue */
    --primary-dark: #2563eb;            /* Darker shade for hover states */
    --primary-light: #93c5fd;           /* Lighter shade for subtle accents */
    --primary-50: #eff6ff;              /* Ultra light blue */
    --primary-100: #dbeafe;             /* Very light blue */
    --primary-200: #bfdbfe;             /* Light blue */
    --primary-300: #93c5fd;             /* Medium light blue */
    --primary-400: #60a5fa;             /* Medium blue */
    --primary-500: #3b82f6;             /* Base blue */
    --primary-600: #2563eb;             /* Medium dark blue */
    --primary-700: #1d4ed8;             /* Dark blue */
    --primary-800: #1e40af;             /* Very dark blue */
    --primary-900: #1e3a8a;             /* Ultra dark blue */
    
    /* Semantic Color System */
    --secondary-color: #64748b;         /* Neutral gray for secondary elements */
    --success-color: #10b981;           /* Enhanced green for success states */
    --success-light: #d1fae5;           /* Light success background */
    --danger-color: #ef4444;            /* Enhanced red for error/danger states */
    --danger-light: #fee2e2;            /* Light danger background */
    --warning-color: #f59e0b;           /* Enhanced orange for warning states */
    --warning-light: #fef3c7;           /* Light warning background */
    --info-color: #06b6d4;              /* Enhanced cyan for informational states */
    --info-light: #cffafe;              /* Light info background */
    
    /* Neutral Color Palette - Enhanced */
    --gray-50: #f9fafb;                 /* Ultra light gray */
    --gray-100: #f3f4f6;               /* Very light gray */
    --gray-200: #e5e7eb;               /* Light gray */
    --gray-300: #d1d5db;               /* Medium light gray */
    --gray-400: #9ca3af;               /* Medium gray */
    --gray-500: #6b7280;               /* Base gray */
    --gray-600: #4b5563;               /* Medium dark gray */
    --gray-700: #374151;               /* Dark gray */
    --gray-800: #1f2937;               /* Very dark gray */
    --gray-900: #111827;               /* Ultra dark gray */
    
    /* Background Colors - Modern Hierarchy */
    --dark-color: #1e293b;             /* Dark backgrounds */
    --light-color: #f8fafc;            /* Light backgrounds */
    --body-bg: #ffffff;                /* Main body background */
    --surface-color: #ffffff;          /* Surface backgrounds */
    --surface-variant: #f8fafc;        /* Variant surface backgrounds */
    --surface-hover: #f1f5f9;          /* Hover surface backgrounds */
    --surface-pressed: #e2e8f0;        /* Pressed surface backgrounds */
    
    /* Border and Divider Colors - Refined */
    --border-color: #e2e8f0;           /* Standard borders */
    --border-light: #f1f5f9;           /* Light borders */
    --border-strong: #cbd5e1;          /* Strong borders */
    --divider-color: #e2e8f0;          /* Divider lines */
    
    /* Text Colors - Improved Hierarchy */
    --text-primary: #1e293b;           /* Primary text color */
    --text-secondary: #475569;         /* Secondary text color */
    --text-tertiary: #64748b;          /* Tertiary text color */
    --text-muted: #9ca3af;             /* Muted text color */
    --text-on-primary: #ffffff;        /* Text on primary backgrounds */
    --text-on-dark: #f8fafc;           /* Text on dark backgrounds */
    
    /* Component Backgrounds - Enhanced */
    --navbar-bg: rgba(255, 255, 255, 0.95);  /* Glass navigation bar */
    --navbar-border: rgba(226, 232, 240, 0.6); /* Navigation border */
    --dropdown-bg: #ffffff;            /* Dropdown menu background */
    --card-bg: #ffffff;                /* Card background */
    --input-bg: #ffffff;               /* Input background */
    --input-border: #d1d5db;           /* Input border */
    --input-focus: #3b82f6;            /* Input focus color */
    
    /* Visual Effects - Modern Shadows and Gradients */
    --bg-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --bg-gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);
    --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.12);
    --focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.12);
    
    /* Spacing and Layout - Refined System */
    --border-radius: 8px;              /* Standard border radius */
    --border-radius-lg: 12px;          /* Large border radius */
    --border-radius-sm: 6px;           /* Small border radius */
    --border-radius-xs: 4px;           /* Extra small border radius */
    --border-radius-full: 9999px;      /* Full border radius (circular) */
    --section-spacing: 2.5rem;         /* Section spacing */
    --card-spacing: 1.5rem;            /* Card spacing */
    --mobile-section-spacing: 1.5rem; /* Mobile section spacing */
    --mobile-card-spacing: 1rem;      /* Mobile card spacing */
    --navbar-height: 72px;             /* Navigation bar height */
    --container-padding: 1.5rem;       /* Container padding */
    --grid-gap: 1.5rem;                /* Grid gap */
    --grid-gap-sm: 1rem;               /* Small grid gap */
    
    /* Transitions and Animations - Enhanced */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animation-duration: 0.3s;
    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Typography - Enhanced Scale */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* Interactive States */
    --hover-opacity: 0.9;
    --active-opacity: 0.95;
    --disabled-opacity: 0.5;
    --loading-opacity: 0.6;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* Bootstrap Integration - Enhanced */
    --bs-body-bg: var(--body-bg);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: var(--font-family-sans);
    --bs-body-font-size: 0.95rem;
    --bs-body-line-height: var(--line-height-normal);
    --bs-card-bg: var(--card-bg);
    --bs-card-border-color: var(--border-color);
    --bs-card-border-radius: var(--border-radius);
    --bs-dropdown-bg: var(--dropdown-bg);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-bg: var(--surface-hover);
    --bs-dropdown-link-hover-color: var(--text-primary);
}

/* ===== MODERN DARK THEME VARIABLES ===== */
[data-theme="dark"] {
    /* Primary Color Palette - Enhanced for dark theme */
    --primary-color: #60a5fa;           /* Lighter blue for better contrast */
    --primary-dark: #3b82f6;            /* Standard blue for hover */
    --primary-light: #93c5fd;           /* Light blue accent */
    --primary-50: #1e3a8a;              /* Dark blue (reversed) */
    --primary-100: #1e40af;             /* Very dark blue */
    --primary-200: #1d4ed8;             /* Dark blue */
    --primary-300: #2563eb;             /* Medium dark blue */
    --primary-400: #3b82f6;             /* Medium blue */
    --primary-500: #60a5fa;             /* Base blue (lighter for dark) */
    --primary-600: #93c5fd;             /* Medium light blue */
    --primary-700: #bfdbfe;             /* Light blue */
    --primary-800: #dbeafe;             /* Very light blue */
    --primary-900: #eff6ff;             /* Ultra light blue */
    
    /* Semantic Color System - Dark theme */
    --secondary-color: #94a3b8;         /* Lighter gray for visibility */
    --success-color: #34d399;           /* Brighter green for dark theme */
    --success-light: #064e3b;           /* Dark success background */
    --danger-color: #f87171;            /* Brighter red for dark theme */
    --danger-light: #7f1d1d;            /* Dark danger background */
    --warning-color: #fbbf24;           /* Brighter orange for dark theme */
    --warning-light: #78350f;           /* Dark warning background */
    --info-color: #38bdf8;              /* Brighter cyan for dark theme */
    --info-light: #164e63;              /* Dark info background */
    
    /* Neutral Color Palette - Dark theme (reversed) */
    --gray-50: #0f172a;                 /* Dark gray (reversed) */
    --gray-100: #1e293b;               /* Very dark gray */
    --gray-200: #334155;               /* Dark gray */
    --gray-300: #475569;               /* Medium dark gray */
    --gray-400: #64748b;               /* Medium gray */
    --gray-500: #94a3b8;               /* Base gray (lighter for dark) */
    --gray-600: #cbd5e1;               /* Medium light gray */
    --gray-700: #e2e8f0;               /* Light gray */
    --gray-800: #f1f5f9;               /* Very light gray */
    --gray-900: #f8fafc;               /* Ultra light gray */
    
    /* Background Colors - Dark theme specific */
    --dark-color: #0f172a;             /* Very dark blue-gray */
    --light-color: #1e293b;            /* Dark blue-gray */
    --body-bg: #0b1220;                /* Main dark background */
    --surface-color: #0f172a;          /* Surface backgrounds */
    --surface-variant: #1e293b;        /* Variant surface backgrounds */
    --surface-hover: #334155;          /* Hover surface backgrounds */
    --surface-pressed: #475569;        /* Pressed surface backgrounds */
    
    /* Border and Divider Colors - Dark theme */
    --border-color: #334155;           /* Dark borders with better contrast */
    --border-light: #1e293b;           /* Light borders for dark theme */
    --border-strong: #475569;          /* Strong borders for dark theme */
    --divider-color: #334155;          /* Divider lines */
    
    /* Text Colors - Dark theme */
    --text-primary: #f1f5f9;           /* Light gray for primary text */
    --text-secondary: #cbd5e1;         /* Medium gray for secondary text */
    --text-tertiary: #94a3b8;          /* Tertiary text color */
    --text-muted: #64748b;             /* Muted gray for less important text */
    --text-on-primary: #ffffff;        /* Text on primary backgrounds */
    --text-on-dark: #0f172a;           /* Text on light backgrounds in dark theme */
    
    /* Component Backgrounds - Dark theme */
    --navbar-bg: rgba(11, 18, 32, 0.95);     /* Glass navigation bar for dark */
    --navbar-border: rgba(51, 65, 85, 0.6);  /* Navigation border for dark */
    --dropdown-bg: #0f172a;            /* Dark dropdown */
    --card-bg: #0f172a;                /* Dark cards */
    --input-bg: #1e293b;               /* Input background for dark */
    --input-border: #475569;           /* Input border for dark */
    --input-focus: #60a5fa;            /* Input focus color for dark */
    
    /* Visual Effects - Dark theme */
    --bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    --bg-gradient-subtle: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
    --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.2);
    --focus-ring-success: 0 0 0 3px rgba(52, 211, 153, 0.2);
    
    /* Bootstrap Integration - Dark theme */
    --bs-body-bg: var(--body-bg);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: var(--font-family-sans);
    --bs-card-bg: var(--card-bg);
    --bs-card-border-color: var(--border-color);
    --bs-dropdown-bg: var(--dropdown-bg);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-bg: var(--surface-hover);
    --bs-dropdown-link-hover-color: var(--text-primary);
}

/* ===== MOBILE-SPECIFIC VARIABLES ===== */
:root {
    /* Mobile Touch Targets and Spacing */
    --mobile-touch-target: 52px;       /* Minimum touch target size */
    --mobile-nav-height: 70px;         /* Mobile navigation height */
    --mobile-tabbar-height: 64px;      /* Bottom tab bar height */
    --mobile-card-padding: 1.25rem;    /* Mobile card padding */
    --mobile-button-height: 52px;      /* Mobile button height */
    --mobile-input-height: 56px;       /* Mobile input height */
    --mobile-border-radius: 4px;       /* Mobile border radius */
    --mobile-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --mobile-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ===== ENHANCED USAGE EXAMPLES ===== */

/* Example 1: Modern Themed Card with Glass Effect */
/*
.modern-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
    transition: var(--transition-slow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}

.modern-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px) scale(1.02);
    border-color: var(--primary-200);
}

.modern-card:hover::before {
    opacity: 0.8;
}
*/

/* Example 2: Enhanced Primary Button with Gradient */
/*
.btn-modern-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-600) 100%);
    border: 1px solid var(--primary-color);
    color: var(--text-on-primary);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.5rem;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-slow);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-modern-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-modern-primary:hover::before {
    left: 100%;
}

.btn-modern-primary:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
*/

/* Example 3: Modern Status Badge System */
/*
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--border-radius-full);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.025em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-badge--success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge--warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-badge--danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
*/

/* Example 4: Responsive Grid with Modern Spacing */
/*
.modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--section-spacing);
}

@media (max-width: 768px) {
    .modern-grid {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-sm);
        margin-bottom: var(--mobile-section-spacing);
    }
}
*/

/* Example 5: Modern Form Styling */
/*
.modern-form-group {
    margin-bottom: 1.5rem;
}

.modern-form-label {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.modern-form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--input-border);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition);
    font-family: var(--font-family-sans);
}

.modern-form-control:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: var(--focus-ring);
    transform: translateY(-1px);
}
*/

/* ===== COMPREHENSIVE THEME CUSTOMIZATION GUIDE ===== */
/*
MODERN TIMETRACKER THEME CUSTOMIZATION GUIDE
============================================

1. COLOR SYSTEM CUSTOMIZATION:
   - Primary colors: Modify --primary-* variables for brand colors
   - Semantic colors: Adjust --success-*, --danger-*, --warning-*, --info-* for status colors
   - Neutral palette: Update --gray-* variables for consistent grayscale
   - Always maintain both light and dark theme variants

2. SPACING SYSTEM:
   - Layout spacing: --section-spacing, --card-spacing for consistent layouts
   - Component spacing: --grid-gap, --container-padding for internal spacing
   - Mobile spacing: --mobile-* variables for responsive design
   - Border radius: --border-radius-* for consistent corner styles

3. TYPOGRAPHY SYSTEM:
   - Font families: --font-family-sans, --font-family-mono
   - Font weights: --font-weight-* for consistent typography hierarchy
   - Line heights: --line-height-* for optimal readability

4. VISUAL EFFECTS:
   - Shadows: --card-shadow-* for depth and elevation
   - Gradients: --bg-gradient-* for modern visual appeal
   - Focus rings: --focus-ring-* for accessibility
   - Transitions: --transition-* for smooth interactions

5. COMPONENT CUSTOMIZATION:
   - Navigation: --navbar-* variables for header styling
   - Cards: --card-* variables for content containers
   - Forms: --input-* variables for form elements
   - Interactive states: --hover-*, --active-* for user feedback

6. MOBILE OPTIMIZATION:
   - Touch targets: --mobile-touch-target for accessibility
   - Responsive spacing: --mobile-* variables for smaller screens
   - Navigation: --mobile-nav-height, --mobile-tabbar-height

7. ACCESSIBILITY CONSIDERATIONS:
   - Maintain WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text)
   - Ensure focus indicators are visible and consistent
   - Test with screen readers and keyboard navigation
   - Verify color-blind friendly combinations

8. DARK THEME BEST PRACTICES:
   - Increase contrast for better readability
   - Use appropriate shadow intensities
   - Ensure interactive elements remain discoverable
   - Test in various lighting conditions

9. CUSTOMIZATION WORKFLOW:
   - Start with color palette modifications
   - Test in both light and dark themes
   - Verify mobile responsiveness
   - Check accessibility compliance
   - Document any custom additions

10. INTEGRATION WITH BOOTSTRAP:
    - Use --bs-* variables for Bootstrap integration
    - Override Bootstrap defaults through CSS variables
    - Maintain consistency with custom components

EXAMPLE CUSTOM COLOR SCHEME:
---------------------------
For a green-themed variant, replace blue primary colors:
--primary-color: #10b981;
--primary-dark: #059669;
--primary-light: #6ee7b7;

And adjust the full color scale accordingly in both themes.

Remember to test all changes thoroughly across different devices,
browsers, and accessibility tools before deployment.
*/