/* ====================================
   IRENT DESIGN SYSTEM - Color Palette & Styles
   ==================================== */

/* === PRIMARY COLOR PALETTE === */
:root {
    /* Brand Colors */
    --brand-navy: #0B2A4F;
    --brand-navy-dark: #082038;
    --brand-navy-darker: #051729;
    --brand-navy-light: #0d3861;
    --brand-gold: #FFCB05;
    --brand-gold-light: #FFD633;
    --brand-gold-dark: #E6B600;
    
    /* Secondary Colors */
    --secondary-teal: #90CEB8;
    --secondary-teal-light: #A8DBCA;
    --secondary-teal-dark: #78B8A3;
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --gray-50: #F7F9FC;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #666666;
    --gray-700: #4B5563;
    --gray-800: #1F2937;
    --gray-900: #1A1A1A;
    
    /* Semantic Colors */
    --success-green: #10b981;
    --success-light: #D1FAE5;
    --warning-yellow: #fbbf24;
    --warning-light: #FEF3C7;
    --error-red: #ef4444;
    --error-light: #FEE2E2;
    --info-blue: #3b82f6;
    --info-light: #DBEAFE;
    
    /* Text Colors */
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-on-primary: #FFCB05;
    --text-on-dark: #FFFFFF;
    
    /* Background Colors */
    --bg-body: #F7F9FC;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-primary: #0B2A4F;
    --bg-secondary: #F7F9FC;
    
    /* Border Colors */
    --border-light: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-dark: #9CA3AF;
    
    /* Shadow Styles */
    --shadow-sm: 0 1px 2px 0 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);
    --shadow-primary: 0 4px 12px rgba(11, 42, 79, 0.3);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Spacing Scale */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    
    /* Typography */
    --font-family: 'Inter',  'Segoe UI',  -apple-system,  BlinkMacSystemFont,  sans-serif;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 0.9375rem; /* 15px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
}

/* === UTILITY CLASSES === */

/* Background Colors */

.bg-primary { background-color: var(--brand-navy) !important; }

.bg-primary-dark { background-color: var(--brand-navy-dark) !important; }

.bg-accent { background-color: var(--brand-gold) !important; }

.bg-surface { background-color: var(--bg-surface) !important; }

.bg-body { background-color: var(--bg-body) !important; }

.bg-success { background-color: var(--success-green) !important; }

.bg-warning { background-color: var(--warning-yellow) !important; }

.bg-error { background-color: var(--error-red) !important; }

/* Text Colors */

.text-primary { color: var(--text-primary) !important; }

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

.text-tertiary { color: var(--text-tertiary) !important; }

.text-on-primary { color: var(--text-on-primary) !important; }

.text-white { color: var(--white) !important; }

.text-brand-navy { color: var(--brand-navy) !important; }

.text-brand-gold { color: var(--brand-gold) !important; }

.text-success { color: var(--success-green) !important; }

.text-warning { color: var(--warning-yellow) !important; }

.text-error { color: var(--error-red) !important; }

/* Border Radius */

.rounded-sm { border-radius: var(--radius-sm) !important; }

.rounded { border-radius: var(--radius-md) !important; }

.rounded-lg { border-radius: var(--radius-lg) !important; }

.rounded-xl { border-radius: var(--radius-xl) !important; }

.rounded-2xl { border-radius: var(--radius-2xl) !important; }

.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadows */

.shadow-sm { box-shadow: var(--shadow-sm) !important; }

.shadow { box-shadow: var(--shadow-md) !important; }

.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.shadow-xl { box-shadow: var(--shadow-xl) !important; }

.shadow-primary { box-shadow: var(--shadow-primary) !important; }

/* === COMPONENT STYLES === */

/* Cards & Papers */

.card-elevated {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

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

.card-primary {
    background: var(--brand-navy);
    border-radius: var(--radius-xl);
    color: var(--white);
    padding: var(--space-6);
}

.card-stat {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
    border-radius: var(--radius-xl);
    color: var(--white);
    padding: var(--space-5);
}

/* Buttons */

.btn-primary {
    background-color: var(--brand-navy) !important;
    border-radius: var(--radius-md) !important;
    color: var(--brand-gold) !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-6) !important;
    text-transform: none !important;
    transition: all var(--transition-base) !important;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--brand-navy-dark) !important;
    box-shadow: var(--shadow-primary) !important;
}

.btn-secondary {
    background-color: var(--gray-100) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.btn-secondary:hover:not(:disabled) { background-color: var(--gray-200) !important; }

/* Status Badges */

.status-active {
    background-color: var(--success-light) !important;
    color: var(--success-green) !important;
}

.status-inactive {
    background-color: var(--error-light) !important;
    color: var(--error-red) !important;
}

.status-pending {
    background-color: var(--warning-light) !important;
    color: var(--warning-yellow) !important;
}

.status-info {
    background-color: var(--info-light) !important;
    color: var(--info-blue) !important;
}

/* Data Grid Enhancements */

.grid-header-enhanced {
    background-color: var(--gray-50);
    border-bottom: 2px solid var(--brand-navy);
    font-weight: 600;
}

.grid-row-hover:hover {
    background-color: var(--gray-50);
    cursor: pointer;
}

/* Dashboard Stats */

.stat-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: center;
    padding: var(--space-2);
}

.stat-badge {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--brand-gold);
    font-weight: bold;
    padding: var(--space-1) var(--space-2);
}

/* Form Elements */

.form-field-enhanced ::deep .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-medium);
    border-radius: var(--radius-md);
}

.form-field-enhanced ::deep .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--brand-navy); }

.form-field-enhanced ::deep .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--brand-navy) !important;
    border-width: 2px;
}

/* Navigation */

.nav-active {
    background-color: var(--brand-navy) !important;
    color: var(--brand-gold) !important;
}

.nav-hover:hover {
    background-color: var(--gray-50) !important;
    color: var(--brand-navy) !important;
}

/* Brand Logo */

.brand-logo {
    font-weight: 700;
    letter-spacing: 0.05em;
}

.brand-logo .brand-i { color: var(--white); }

.brand-logo .brand-rent { color: var(--brand-gold); }

/* Gradient Backgrounds */

.gradient-primary { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%); }

.gradient-accent { background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%); }

.gradient-overlay {
    background: radial-gradient(circle at 30% 20%, rgba(144, 180, 210, 0.4) 0%, transparent 40%),
                radial-gradient(circle at 70% 60%, rgba(120, 150, 180, 0.35) 0%, transparent 45%),
                radial-gradient(circle at 50% 80%, rgba(100, 130, 160, 0.3) 0%, transparent 50%);
}

/* === MUDBLAZOR OVERRIDES === */

/* Primary Theme Colors */

::deep .mud-theme-primary {
    background-color: var(--brand-navy) !important;
    color: var(--brand-gold) !important;
}

::deep .mud-button-filled-primary {
    background-color: var(--brand-navy) !important;
    border-radius: var(--radius-md) !important;
    color: var(--brand-gold) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

::deep .mud-button-filled-primary:hover {
    background-color: var(--brand-navy-dark) !important;
    box-shadow: var(--shadow-primary) !important;
}

::deep .mud-chip-filled.mud-chip-color-primary {
    background-color: var(--brand-navy) !important;
    color: var(--brand-gold) !important;
}

::deep .mud-progress-circular.mud-primary { color: var(--brand-navy) !important; }

/* Paper & Card Styling */

::deep .mud-paper { border-radius: var(--radius-lg) !important; }

::deep .mud-card {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Data Grid Styling */

::deep .mud-table { border-radius: var(--radius-lg) !important; }

::deep .mud-table-head { background-color: var(--gray-50) !important; }

::deep .mud-table-row:hover { background-color: var(--gray-50) !important; }

/* Chips */

::deep .mud-chip {
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

/* Dialogs */

::deep .mud-dialog { border-radius: var(--radius-xl) !important; }

/* Inputs */

::deep .mud-input-outlined { border-radius: var(--radius-md) !important; }

/* === RESPONSIVE DESIGN === */

@media (max-width: 960px) {
    .card-stat { padding: var(--space-4); }

    .stat-icon { padding: var(--space-1); }
}

@media (max-width: 600px) {
    :root {
        --font-size-base: 0.875rem;
        --font-size-lg: 1rem;
        --font-size-xl: 1.125rem;
    }
}