/* MudBlazor Waddl Theme Override - Fixed & Consolidated */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Waddl Brand Colors */
    --waddl-primary: #FF9F43;
    --waddl-primary-dark: #E8893A;
    --waddl-primary-light: #FFE4CC;

    --waddl-secondary: #5F9EA0;
    --waddl-secondary-dark: #4A8082;
    --waddl-secondary-light: #D4E9EA;

    --waddl-accent: #FF6B9D;
    --waddl-accent-light: #FFE0EB;

    --waddl-success: #2ECC71;
    --waddl-success-light: #D5F4E2;

    --waddl-warning: #F1C40F;
    --waddl-warning-light: #FDF5D4;

    --waddl-danger: #E74C3C;
    --waddl-danger-light: #FADBD8;

    --waddl-info: #3498DB;
    --waddl-info-light: #D6EAF8;

    /* Grayscale - Light Mode Defaults */
    --gray-50: #FAFBFC;
    --gray-100: #F4F6F8;
    --gray-200: #E9ECF0;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;

    /* Semantic Colors */
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-muted: #B2BEC3;

    --bg-body: #F8F9FB;
    --bg-card: #FFFFFF;
    --bg-sidebar: #2D3436;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 20px rgba(255, 159, 67, 0.3);

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* MudBlazor Mappings - LIGHT MODE */
    --mud-palette-black: #2d3436;
    --mud-palette-white: #ffffff;
    
    --mud-palette-primary: var(--waddl-primary);
    --mud-palette-primary-text: #ffffff;
    
    --mud-palette-secondary: var(--waddl-secondary);
    --mud-palette-secondary-text: #ffffff;
    
    --mud-palette-tertiary: var(--waddl-accent);
    
    --mud-palette-success: var(--waddl-success);
    --mud-palette-warning: var(--waddl-warning);
    --mud-palette-error: var(--waddl-danger);
    --mud-palette-info: var(--waddl-info);

    --mud-palette-background: var(--bg-body);
    --mud-palette-surface: var(--bg-card);
    --mud-palette-appbar-background: var(--bg-sidebar);
    
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-text-disabled: var(--text-muted);
}

/* Dark Mode Overrides - Applies when MudBlazor enables dark theme */
.mud-theme-dark {
    --text-primary: #E9ECF0;
    --text-secondary: #B2BEC3;
    --text-muted: #6B7280;

    /* Increased Contrast for Dark Mode */
    --bg-body: #111827; /* Darker background (Gray-900) to make cards pop */
    --bg-card: #1F2937; /* Lighter card (Gray-800) */
    --bg-sidebar: #0f131a;

    /* Semantic Swaps for Dark Mode */
    --gray-50: #1F2937; /* Swaps light gray background to dark card color */
    --gray-100: #374151; /* Swaps borders to lighter gray */
    --gray-200: #4B5563;
    --gray-300: #6B7280;

    /* Dim the light backgrounds for alerts/badges */
    --waddl-primary-light: rgba(255, 159, 67, 0.2);
    --waddl-success-light: rgba(46, 204, 113, 0.2);
    --waddl-warning-light: rgba(241, 196, 15, 0.2);
    --waddl-danger-light: rgba(231, 76, 60, 0.2);
    --waddl-info-light: rgba(52, 152, 219, 0.2);

    /* MudBlazor Palette Mappings - DARK MODE */
    --mud-palette-background: var(--bg-body);
    --mud-palette-surface: var(--bg-card);
    --mud-palette-appbar-background: var(--bg-sidebar);
    --mud-palette-drawer-background: var(--bg-sidebar);
    --mud-palette-drawer-text: var(--text-primary);
    
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-text-disabled: var(--text-muted);
    
    --mud-palette-action-default: var(--text-secondary);
    --mud-palette-action-disabled: var(--text-muted);
    
    --mud-palette-lines-default: var(--gray-100);
    --mud-palette-table-lines: var(--gray-100);
    --mud-palette-divider: var(--gray-100);
}

/* ========================================
   GLOBAL TYPOGRAPHY & RESET
======================================== */
.mud-typography {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* ========================================
   BUTTONS
======================================== */
.mud-button-root {
    border-radius: var(--radius-sm) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    /* padding: 8px 16px; REMOVE FIXED PADDING TO FIX TABS */
    transition: var(--transition) !important;
    box-shadow: none !important;
}

/* Restore padding only for actual buttons, not all clickable elements */
.mud-button-filled, .mud-button-outlined, .mud-button-text {
    padding: 8px 16px !important;
}

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

.mud-button-filled:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.mud-button-size-large {
    padding: 12px 24px !important;
    font-size: 1.1rem !important;
}

.mud-button-size-small {
    padding: 4px 10px !important;
    font-size: 0.875rem !important;
}

/* ========================================
   TABS FIX
======================================== */
.mud-tabs-tabbar {
    background-color: transparent !important;
}

.mud-tab {
    font-family: 'Nunito', sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    min-width: fit-content !important;
    padding: 12px 24px !important; /* Proper padding for tabs */
    white-space: nowrap !important; /* Prevent text overlapping/wrapping */
}

.mud-tab-active {
    font-weight: 700 !important;
    color: var(--waddl-primary) !important;
}


/* ========================================
   INPUTS & TEXT FIELDS
======================================== */
.mud-input-outlined-border {
    border-color: var(--gray-300) !important;
    border-radius: var(--radius-sm) !important;
    border-width: 1px !important;
}

.mud-theme-dark .mud-input-outlined-border {
    border-color: var(--gray-500) !important;
}

.mud-input-control-input-container:focus-within .mud-input-outlined-border {
    border-color: var(--waddl-primary) !important;
    border-width: 2px !important;
}

.mud-input-control .mud-input-slot {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    height: auto !important;
}

.mud-input-label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.mud-theme-dark .mud-input-label {
    color: var(--text-muted) !important;
}

.mud-input-label-outlined {
    font-size: 1rem !important;
    transform: translate(14px, 14px) scale(1) !important;
}

.mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, -6px) scale(0.75) !important;
    /* FIX: Add background color to label to cover the border line going through it */
    background-color: var(--mud-palette-surface) !important;
    padding: 0 6px !important;
    margin-left: -6px !important; /* Counteract padding to maintain alignment */
    z-index: 2 !important; 
}

/* ========================================
   CARDS
======================================== */
.mud-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border: none !important;
    transition: var(--transition) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

.mud-card-header, .mud-card-content {
    padding: 1.5rem !important;
}

.mud-card-actions {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--mud-palette-divider) !important;
}

/* ========================================
   TABLES
======================================== */
.mud-table-root {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    background-color: var(--mud-palette-surface) !important;
}

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

.mud-theme-dark .mud-table-head {
    background-color: var(--gray-800) !important;
}

.mud-table-cell {
    padding: 1rem 1.5rem !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-table-lines) !important;
    font-size: 0.95rem !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
}

/* ========================================
   CHIPS (PASTEL STYLE)
======================================== */
.mud-chip {
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    height: 32px !important;
    letter-spacing: 0.3px !important;
    border: none !important;
}

/* Pastel Color Overrides for Filled Chips */
.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--waddl-primary-light) !important;
    color: var(--waddl-primary-dark) !important;
}
.mud-chip-filled.mud-chip-color-secondary {
    background-color: var(--waddl-secondary-light) !important;
    color: var(--waddl-secondary-dark) !important;
}
.mud-chip-filled.mud-chip-color-info {
    background-color: var(--waddl-info-light) !important;
    color: var(--waddl-info) !important;
}
.mud-chip-filled.mud-chip-color-success {
    background-color: var(--waddl-success-light) !important;
    color: var(--waddl-success) !important;
}
.mud-chip-filled.mud-chip-color-warning {
    background-color: var(--waddl-warning-light) !important;
    color: #B7950B !important; /* Darker yellow for text legibility */
}
.mud-chip-filled.mud-chip-color-error {
    background-color: var(--waddl-danger-light) !important;
    color: var(--waddl-danger) !important;
}

/* Dark Mode Adjustments for Chips */
.mud-theme-dark .mud-chip-filled.mud-chip-color-primary {
    color: var(--waddl-primary) !important;
}
.mud-theme-dark .mud-chip-filled.mud-chip-color-secondary {
    color: var(--waddl-secondary) !important;
}
.mud-theme-dark .mud-chip-filled.mud-chip-color-success {
    color: var(--waddl-success) !important;
}
.mud-theme-dark .mud-chip-filled.mud-chip-color-error {
    color: var(--waddl-danger) !important;
}

/* ========================================
   ALERTS
======================================== */
.mud-alert {
    border-radius: var(--radius-sm) !important;
    padding: 1rem !important;
    font-weight: 500 !important;
}

.mud-alert-text {
    color: inherit !important;
}

/* ========================================
   POPOVERS & MENUS
======================================== */
.mud-popover {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-list {
    padding: 0.5rem !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-list-item {
    border-radius: var(--radius-sm) !important;
    margin-bottom: 2px !important;
    color: var(--text-primary) !important;
}

.mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--waddl-primary) !important;
}

/* ========================================
   DIALOGS
======================================== */
.mud-dialog {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-dialog-title {
    padding: 1.5rem 1.5rem 1rem !important;
}