/* 
CAILO CSS ARCHITECTURE APPROACH:
- This CSS file defines custom properties for the Cailo brand colors and design tokens
- MudBlazor theme (CailoGoldTheme.cs) configures the component library's palette and typography
- CSS provides minimal overrides only where necessary (autofill, hover effects, custom components)
- MudBlazor's theme system handles all component styling (inputs, buttons, cards, etc.)
- This approach ensures consistency, maintainability, and proper theme integration
*/

/* CAILO Brand Variables - Updated from Brand Guidelines */
:root {
    /* Primary Brand Colors - Earth Green */
    --cailo-primary: #1B9986;           /* Earth Green - Primary brand color */
    --cailo-primary-hover: #157a6b;     /* Darker Earth Green for hover states */
    --cailo-primary-light: #3EC8B2;     /* Accent Green - Optimism and highlights */
    --cailo-primary-dark: #0f5c52;      /* Darkest Earth Green */
    /* Accent Brand Colors - Smart Green */
    --cailo-secondary: #52B788;         /* Smart Green - Growth and sustainability */
    --cailo-secondary-light: #6fd1a0;   /* Lighter Smart Green */
    --cailo-secondary-dark: #3a8562;    /* Darkest Smart Green */
    /* Secondary Colors - Blue Palette */
    --cailo-tertiary: #3E6AE1;          /* Tech Blue - Trust and intelligence */
    --cailo-tertiary-light: #00B4D8;    /* Vivid Azure - Innovation and energy */
    --cailo-tertiary-dark: #2c4fb3;     /* Darker Tech Blue */
    /* Accent Colors */
    --cailo-accent: #3EC8B2;            /* Accent Green - Optimism and highlights */
    --cailo-accent-hover: #2fb59f;      /* Darker Accent Green for hover */
    --cailo-accent-light: #5fd4bf;      /* Lighter Accent Green */
    --cailo-accent-dark: #1fa18d;       /* Darker Accent Green */
    /* Earth Green - Primary brand color */
    --cailo-earth-green: #1B9986;       /* Earth Green - Sustainability, earthy and vibrant */
    /* Neutral Colors - From Brand Guidelines */
    --cailo-slate-grey: #495057;     /* Slate Grey - Professionalism and stability */
    --cailo-soft-white: #F8F9FA;     /* Soft White - Clean, minimal, open */
    /* Semantic Colors - Enhanced for web application */
    --cailo-success: #52B788;        /* Smart Green for success states */
    --cailo-success-dark: #3a8562;   /* Darker Smart Green */
    --cailo-success-light: #3EC8B2;  /* Accent Green for light success */
    --cailo-warning: #ffc107;        /* Warning yellow */
    --cailo-warning-dark: #c79100;   /* Darker warning */
    --cailo-warning-light: #ffecb3;  /* Light warning */
    --cailo-danger: #d9534f;         /* Error red */
    --cailo-danger-dark: #b02a24;    /* Darker error */
    --cailo-danger-light: #f28b82;   /* Light error */
    --cailo-info: #00B4D8;          /* Vivid Azure for info states */
    --cailo-info-dark: #008CAD;     /* Darker Vivid Azure */
    --cailo-info-light: #33C2E0;    /* Lighter Vivid Azure */
    /* Application Colors - Using brand colors */
    --cailo-dark: #495057;           /* Slate Grey for dark elements */
    --cailo-text-primary: #495057;   /* Slate Grey for primary text (professionalism) */
    --cailo-text-secondary: #6c757d; /* Secondary text */
    --cailo-text-disabled: #adb5bd;  /* Disabled text */
    --cailo-background: #F8F9FA;     /* Soft White background */
    --cailo-surface: #ffffff;        /* Pure white surface */
    --cailo-light-bg: #F8F9FA;      /* Soft White for light backgrounds */
    --cailo-white: #ffffff;          /* Pure white */
    --cailo-border-color: #dee2e6;   /* Light border */
    --cailo-border-light: #F8F9FA;   /* Very light border */
    /* Shadows - Updated for new brand colors */
    --cailo-shadow-color: rgba(27, 153, 134, 0.1);    /* Earth Green shadow */
    --cailo-shadow-hover: rgba(27, 153, 134, 0.15);   /* Earth Green hover shadow */
    --cailo-shadow-primary: rgba(27, 153, 134, 0.2);  /* Earth Green primary shadow */
    --cailo-shadow-secondary: rgba(82, 183, 136, 0.2); /* Smart Green shadow */
    --cailo-shadow-tertiary: rgba(62, 106, 225, 0.2);  /* Tech Blue shadow */
    --cailo-shadow-accent: rgba(62, 200, 178, 0.2);  /* Accent Green shadow */
    /* Additional transparent whites for consistency */
    --cailo-white-90: rgba(255, 255, 255, 0.9);
    --cailo-white-80: rgba(255, 255, 255, 0.8);
    --cailo-white-55: rgba(255, 255, 255, 0.55);
    --cailo-white-20: rgba(255, 255, 255, 0.2);
    --cailo-white-15: rgba(255, 255, 255, 0.15);
    --cailo-white-10: rgba(255, 255, 255, 0.1);
    /* Additional color shades for consistency - Updated for new brand */
    --cailo-primary-05: rgba(27, 153, 134, 0.05);     /* Earth Green 5% */
    --cailo-primary-10: rgba(27, 153, 134, 0.1);      /* Earth Green 10% */
    --cailo-primary-25: rgba(27, 153, 134, 0.25);     /* Earth Green 25% */
    --cailo-secondary-05: rgba(82, 183, 136, 0.05);   /* Smart Green 5% */
    --cailo-secondary-10: rgba(82, 183, 136, 0.1);    /* Smart Green 10% */
    --cailo-secondary-25: rgba(82, 183, 136, 0.25);   /* Smart Green 25% */
    --cailo-tertiary-05: rgba(62, 106, 225, 0.05);    /* Tech Blue 5% */
    --cailo-tertiary-10: rgba(62, 106, 225, 0.1);     /* Tech Blue 10% */
    --cailo-tertiary-25: rgba(62, 106, 225, 0.25);    /* Tech Blue 25% */
    --cailo-accent-05: rgba(62, 200, 178, 0.05);      /* Accent Green 5% */
    --cailo-accent-10: rgba(62, 200, 178, 0.1);       /* Accent Green 10% */
    --cailo-accent-25: rgba(62, 200, 178, 0.25);      /* Accent Green 25% */
    --cailo-black-20: rgba(0, 0, 0, 0.2);
    --cailo-black-30: rgba(0, 0, 0, 0.3);
    --cailo-black-40: rgba(0, 0, 0, 0.4);
    /* Semantic color for highlights */
    --cailo-highlight: #fffacd;
    /* Typography - Updated for CAILO Brand Guidelines */
    --cailo-font-family-headings: 'Montserrat', 'Open Sans', 'Roboto', system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
    --cailo-font-family-body: 'Open Sans', 'Roboto', 'Inter', system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
    --cailo-font-family: var(--cailo-font-family-body); /* Default to body font */
    --cailo-font-family-mono: 'Roboto Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
    /* Layout */
    --cailo-border-radius: 8px;
    --cailo-border-radius-sm: 4px;
    --cailo-border-radius-lg: 12px;
    --cailo-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --cailo-transition-fast: all 0.15s ease;
    --cailo-spacing: 1rem;
    --cailo-spacing-xs: 0.25rem;
    --cailo-spacing-sm: 0.5rem;
    --cailo-spacing-md: 1rem;
    --cailo-spacing-lg: 1.5rem;
    --cailo-spacing-xl: 2rem;
    --cailo-spacing-xxl: 3rem;
    /* Legacy variables for backward compatibility */
    --primary-color: var(--cailo-primary);
    --accent-color: var(--cailo-accent);
    --secondary-color: var(--cailo-success);
    --danger-color: var(--cailo-danger);
    --text-color: var(--cailo-text-primary);
    --light-bg: var(--cailo-light-bg);
    --white: var(--cailo-white);
    --border-color: var(--cailo-border-color);
    --shadow-color: var(--cailo-shadow-color);
    --font-family: var(--cailo-font-family);
    --border-radius: var(--cailo-border-radius);
    --transition: var(--cailo-transition);
    /* Cailo white variations for nav menu styling */
    --Cailo-white: var(--cailo-white);
    --Cailo-white-90: var(--cailo-white-90);
    --Cailo-white-80: var(--cailo-white-80);
    --Cailo-white-55: var(--cailo-white-55);
    --Cailo-white-20: var(--cailo-white-20);
    --Cailo-white-15: var(--cailo-white-15);
    --Cailo-white-10: var(--cailo-white-10);
    /* Cailo highlight for error UI */
    --Cailo-highlight: var(--cailo-highlight);
}

/* Global Styles */
body {
    font-family: var(--cailo-font-family);
    background-color: var(--cailo-background);
    color: var(--cailo-text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cailo-font-family-headings);
    color: var(--cailo-primary);
    margin-bottom: var(--cailo-spacing);
    outline: none;
}

/* Remove focus outlines from non-interactive elements */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, div:focus, span:focus, section:focus, article:focus,
.login-container:focus, .login-card:focus, .login-header:focus {
    outline: none;
}

h1, h2, h3, h4 {
    font-weight: 700;  /* Bold for main headings per brand guidelines */
    color: var(--cailo-primary);
}

h5, h6 {
    font-weight: 500;  /* Medium for subheadings per brand guidelines */
    color: var(--cailo-primary);
}

/* Card Styling */
.card {
    background: var(--cailo-surface);
    border-radius: var(--cailo-border-radius);
    border: 1px solid var(--cailo-border-color);
    box-shadow: 0 2px 8px var(--cailo-shadow-color);
    margin-bottom: var(--cailo-spacing-lg);
    transition: var(--cailo-transition);
    overflow: hidden;
}

    .card:hover {
        /* Hover effects disabled */
    }

.card-header {
    background: var(--cailo-surface);
    border-bottom: 1px solid var(--cailo-border-color);
    padding: var(--cailo-spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        margin: 0;
        color: var(--cailo-primary);
        font-weight: 500;
    }

.card-body {
    padding: var(--cailo-spacing-lg);
}

/* Table Styling */
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

    .table th,
    .table td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--cailo-border-color);
    }

    .table thead th {
        font-weight: 600;
        background-color: var(--cailo-primary-05);
        border-bottom: 2px solid var(--cailo-border-color);
        color: var(--cailo-primary);
    }

.table-hover tbody tr:hover {
    background-color: rgba(27, 153, 134, 0.05);
}

/* Button Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cailo-spacing-sm) var(--cailo-spacing-md);
    font-family: var(--cailo-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--cailo-border-radius);
    transition: var(--cailo-transition);
    cursor: pointer;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.02857em;
    text-decoration: none;
    box-shadow: 0 2px 4px var(--cailo-shadow-color);
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px var(--cailo-shadow-hover);
    }

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

    .btn-primary:hover {
        background-color: var(--cailo-primary-hover);
        border-color: var(--cailo-primary-hover);
    }

.btn-outline-primary {
    color: var(--cailo-primary);
    background-color: transparent;
    border-color: var(--cailo-primary);
    box-shadow: none;
}

    .btn-outline-primary:hover {
        color: var(--cailo-white);
        background-color: var(--cailo-primary);
        box-shadow: 0 2px 4px var(--cailo-shadow-color);
    }

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

    .btn-success:hover {
        background-color: var(--cailo-success-dark);
        border-color: var(--cailo-success-dark);
    }

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

    .btn-danger:hover {
        background-color: var(--cailo-danger-dark);
        border-color: var(--cailo-danger-dark);
    }

.btn-warning {
    background-color: var(--cailo-warning);
    color: var(--cailo-text-primary);
    border-color: var(--cailo-warning);
}

    .btn-warning:hover {
        background-color: var(--cailo-warning-dark);
        border-color: var(--cailo-warning-dark);
        color: var(--cailo-white);
    }

.btn-accent {
    background-color: var(--cailo-accent);
    color: var(--cailo-white);
    border-color: var(--cailo-accent);
}

    .btn-accent:hover {
        background-color: var(--cailo-accent-dark);
        border-color: var(--cailo-accent-dark);
    }

/* Form Controls */
.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--cailo-font-family);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cailo-text-primary);
    background-color: var(--cailo-surface);
    background-clip: padding-box;
    border: 1px solid var(--cailo-border-color);
    border-radius: var(--cailo-border-radius);
    transition: var(--cailo-transition-fast);
}

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--cailo-border-light);
        color: var(--cailo-text-disabled);
        font-weight: 400;
        opacity: 1;
        cursor: not-allowed;
        border-color: var(--cailo-border-color);
    }

    .form-control:focus {
        border-color: var(--cailo-primary);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--cailo-accent-25);
        }

    .form-control::placeholder {
        color: var(--cailo-text-disabled);
        opacity: 1;
    }

/* Simplified autofill handling - let MudBlazor theme handle colors */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--mud-palette-white, #ffffff) inset !important;
    -webkit-text-fill-color: var(--mud-palette-black, #212529) !important;
}


.form-label {
    font-weight: 500;
    color: var(--cailo-text-primary);
    margin-bottom: var(--cailo-spacing-xs);
}

/* Modal Styling */
.modal-content {
    border-radius: var(--cailo-border-radius);
    border: none;
    box-shadow: 0 0.5rem 1rem var(--cailo-shadow-hover);
}

.modal-header {
    border-bottom: 1px solid var(--cailo-border-color);
    padding: var(--cailo-spacing-lg);
}

.modal-body {
    padding: var(--cailo-spacing-lg);
}

.modal-footer {
    border-top: 1px solid var(--cailo-border-color);
    padding: var(--cailo-spacing-lg);
}

/* Navigation */
.sidebar {
    box-shadow: 2px 0 8px var(--cailo-shadow-color);
}

/* Apply gradient-primary class to sidebar for gradient effect */

.nav-item a {
    color: var(--cailo-white-90);
    text-decoration: none;
    transition: var(--cailo-transition-fast);
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: var(--cailo-spacing-sm) var(--cailo-spacing-md);
    border-radius: var(--cailo-border-radius-sm);
    margin: 0 var(--cailo-spacing-sm);
}

    .nav-item a:hover {
        color: var(--cailo-white);
        background-color: var(--cailo-white-15);
        transform: translateX(2px);
    }

    .nav-item a.active {
        color: var(--cailo-white);
        background-color: var(--cailo-accent);
        box-shadow: 0 2px 4px var(--cailo-black-20);
    }

    .nav-item a .nav-icon {
        margin-right: var(--cailo-spacing-sm);
        width: 1.25rem;
        height: 1.25rem;
    }

/* Navigation Pills */
.nav-pills .nav-link {
    color: var(--cailo-text-primary);
    background: none;
    border: none;
    border-radius: var(--cailo-border-radius);
    padding: var(--cailo-spacing-sm) var(--cailo-spacing-md);
    transition: var(--cailo-transition-fast);
    font-weight: 500;
}

    .nav-pills .nav-link:hover {
        background-color: var(--cailo-primary-10);
        color: var(--cailo-primary);
    }

    .nav-pills .nav-link.active {
        background-color: var(--cailo-primary);
        color: var(--cailo-white);
        box-shadow: 0 2px 4px var(--cailo-shadow-color);
    }

/* Utilities */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem var(--cailo-shadow-color) !important;
}

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

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

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

/* MudBlazor Cailo Theme Overrides - Minimal, let theme handle most styling */
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-secondary:hover {
    transform: translateY(-1px);
}

/* Let MudBlazor handle paper and card styling through theme */

/* Let MudBlazor theme handle component styling - only override icon button hover effects */
.mud-icon-button.mud-primary:hover {
    background-color: var(--cailo-primary-10);
}

.mud-icon-button.mud-secondary:hover {
    background-color: var(--cailo-accent-10);
}

/* Custom Cailo Brand Styling */
.cailo-gradient-bg {
    /* Deprecated - use gradient-primary-light class instead */
}

.cailo-primary-gradient {
    /* Deprecated - use gradient-primary-accent class instead */
}

.cailo-accent-gradient {
    /* Deprecated - use gradient-accent class instead */
}

.cailo-brand-header {
    color: var(--cailo-white);
    padding: var(--cailo-spacing-xl);
    border-radius: var(--cailo-border-radius-lg);
    margin-bottom: var(--cailo-spacing-lg);
    box-shadow: 0 4px 16px var(--cailo-shadow-color);
}

/* Apply gradient-primary-dark class to brand header for gradient effect */

    .cailo-brand-header h1,
    .cailo-brand-header h2,
    .cailo-brand-header h3 {
        color: var(--cailo-white);
        margin: 0;
    }

.cailo-accent-border {
    border-left: 4px solid var(--cailo-accent);
    padding-left: var(--cailo-spacing-md);
}

.cailo-metric-card {
    background: var(--cailo-surface);
    border-radius: var(--cailo-border-radius-lg);
    padding: var(--cailo-spacing-lg);
    border: 1px solid var(--cailo-border-color);
    box-shadow: 0 2px 8px var(--cailo-shadow-color);
    transition: var(--cailo-transition);
    position: relative;
    overflow: hidden;
}

    .cailo-metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        /* Apply gradient-primary-accent-bar class for gradient effect */
    }

    .cailo-metric-card:hover {
        /* Hover effects disabled */
    }

.cailo-metric-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--cailo-primary);
    margin: 0;
    line-height: 1.2;
}

.cailo-metric-label {
    font-size: 0.875rem;
    color: var(--cailo-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--cailo-spacing-xs);
}

.cailo-shadow-primary {
    box-shadow: 0 4px 20px var(--cailo-shadow-primary);
}

.cailo-shadow-accent {
    box-shadow: 0 4px 20px var(--cailo-shadow-accent);
}

.cailo-text-gradient {
    /* Deprecated - use gradient-text class with gradient-primary-accent-full */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cailo-hexagon-pattern {
    position: relative;
    overflow: hidden;
}

    .cailo-hexagon-pattern::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background-image: radial-gradient(circle at 25% 25%, var(--cailo-accent-05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, var(--cailo-primary-05) 0%, transparent 50%);
        animation: hexagonFloat 20s ease-in-out infinite;
        z-index: -1;
    }

@keyframes hexagonFloat {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }
}

/* Brand Utilities */
.text-accent {
    color: var(--cailo-accent) !important;
}

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

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

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

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

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

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

.border-accent {
    border-color: var(--cailo-accent) !important;
}

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

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

/* Animation Utilities */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Gradient Classes */
.gradient-primary {
    background: linear-gradient(180deg, var(--cailo-primary) 0%, var(--cailo-primary-dark) 100%);
}

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

.gradient-primary-accent {
    background: linear-gradient(135deg, var(--cailo-primary) 0%, var(--cailo-primary-hover) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--cailo-accent) 0%, var(--cailo-accent-hover) 100%);
}

.gradient-primary-dark {
    background: linear-gradient(135deg, var(--cailo-primary) 0%, var(--cailo-primary-dark) 100%);
}

.gradient-primary-accent-full {
    background: linear-gradient(135deg, var(--cailo-primary) 0%, var(--cailo-accent) 100%);
}

.gradient-primary-accent-bar {
    background: linear-gradient(90deg, var(--cailo-primary), var(--cailo-accent));
}

.gradient-success {
    background: linear-gradient(135deg, var(--cailo-success) 0%, var(--cailo-success-dark) 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, var(--cailo-warning) 0%, var(--cailo-warning-dark) 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, var(--cailo-danger) 0%, var(--cailo-danger-dark) 100%);
}

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

/* Dashboard card gradients */
.gradient-dashboard-gold {
    background: linear-gradient(45deg, #D4A843, #E8C86A);
    color: var(--cailo-white);
}

.gradient-dashboard-teal {
    background: linear-gradient(45deg, #1B9986, #3EC8B2);
    color: var(--cailo-white);
}

.gradient-dashboard-green {
    background: linear-gradient(45deg, #1B9986, #3EC8B2);
    color: var(--cailo-white);
}

.gradient-dashboard-smart {
    background: linear-gradient(45deg, #52B788, #6fd1a0);
    color: var(--cailo-white);
}

.gradient-dashboard-success {
    background: linear-gradient(45deg, #28a745, #6ccf8e);
    color: var(--cailo-white);
}

.gradient-dashboard-info {
    background: linear-gradient(45deg, #17a2b8, #58a4ad);
    color: var(--cailo-white);
}

/*
 * Note: Cailo uses a light theme only (per style guide).
 * Dark theme override removed as it's not part of the Cailo Design System.
 * If dark theme is needed in the future, it should be designed following Cailo brand guidelines.
 */

/* Login Page Specific Styling */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cailo-light-bg) 0%, var(--cailo-white) 100%);
    padding: var(--cailo-spacing-lg);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--cailo-surface);
    border-radius: var(--cailo-border-radius-lg);
    box-shadow: 0 8px 32px var(--cailo-shadow-color);
    padding: var(--cailo-spacing-xxl);
    border: 1px solid var(--cailo-border-color);
}

.login-header {
    text-align: center;
    margin-bottom: var(--cailo-spacing-xl);
}

.login-title {
    color: var(--cailo-primary);
    font-size: 1.875rem;
    font-weight: 300;
    margin-bottom: var(--cailo-spacing-sm);
    letter-spacing: -0.025em;
}

.login-subtitle {
    color: var(--cailo-text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.login-form .form-group {
    margin-bottom: var(--cailo-spacing-lg);
}

.login-form .form-group:last-of-type {
    margin-bottom: var(--cailo-spacing-xl);
}

.login-form .checkbox-group {
    margin-bottom: var(--cailo-spacing-lg);
}

.login-form .form-label {
    display: block;
    font-weight: 500;
    color: var(--cailo-text-primary);
    margin-bottom: var(--cailo-spacing-sm);
    font-size: 0.875rem;
}

.login-form .form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    border: 1.5px solid var(--cailo-border-color);
    border-radius: var(--cailo-border-radius);
    color: var(--cailo-text-primary);
    transition: var(--cailo-transition-fast);
}

.login-form .form-control:focus {
    border-color: var(--cailo-primary);
    box-shadow: 0 0 0 3px var(--cailo-accent-25);
    outline: none;
}

.login-form .form-control::placeholder {
    color: var(--cailo-text-disabled);
    font-weight: 400;
}

/* Enhanced autofill styling for login form - using theme variables */
.login-form .form-control:-webkit-autofill,
.login-form .form-control:-webkit-autofill:hover,
.login-form .form-control:-webkit-autofill:focus,
.login-form .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--mud-palette-white, #ffffff) inset !important;
    -webkit-text-fill-color: var(--mud-palette-black, #212529) !important;
    border: 1px solid var(--cailo-border-color) !important;
}

.login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--mud-palette-white, #ffffff) inset !important;
    border: 1px solid var(--cailo-primary) !important;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--cailo-text-primary);
}

.checkbox-label .form-check-input {
    margin-right: var(--cailo-spacing-sm);
    cursor: pointer;
    accent-color: var(--cailo-primary);
}

.checkbox-text {
    font-weight: 400;
    user-select: none;
}

.login-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    border-radius: var(--cailo-border-radius);
    border: none;
    background: linear-gradient(135deg, var(--cailo-primary) 0%, var(--cailo-primary-hover) 100%);
    color: var(--cailo-white);
    cursor: pointer;
    transition: var(--cailo-transition);
    box-shadow: 0 3px 12px var(--cailo-shadow-primary);
}

.login-btn:hover {
    background: linear-gradient(135deg, var(--cailo-primary-hover) 0%, var(--cailo-primary-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--cailo-shadow-primary);
}

.login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--cailo-accent-25), 0 6px 20px var(--cailo-shadow-primary);
}

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

.validation-summary {
    background-color: rgba(217, 83, 79, 0.05);
    border: 1px solid var(--cailo-danger);
    border-radius: var(--cailo-border-radius);
    padding: var(--cailo-spacing);
    margin-bottom: var(--cailo-spacing-lg);
}

.field-validation {
    font-size: 0.8rem;
    margin-top: var(--cailo-spacing-xs);
    display: block;
    font-weight: 400;
}

/* Responsive login adjustments */
@media (max-width: 480px) {
    .login-container {
        padding: var(--cailo-spacing);
    }

    .login-card {
        padding: var(--cailo-spacing-xl);
        margin: var(--cailo-spacing);
    }

    .login-title {
        font-size: 1.5rem;
    }
}

/* Fix text selection visibility globally */
::selection {
    background-color: var(--cailo-primary, #1B9986) !important;
    color: white !important;
}

input::selection,
textarea::selection {
    background-color: var(--cailo-primary, #1B9986) !important;
    color: white !important;
}

/* Fix for Firefox */
::-moz-selection {
    background-color: var(--cailo-primary, #1B9986) !important;
    color: white !important;
}

input::-moz-selection,
textarea::-moz-selection {
    background-color: var(--cailo-primary, #1B9986) !important;
    color: white !important;
}

/* Let MudBlazor theme handle input text colors - minimal overrides only */
/* Only override autofill to prevent browser styling conflicts */
.mud-input:-webkit-autofill,
.mud-textfield input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--mud-palette-white) inset !important;
    -webkit-text-fill-color: var(--mud-palette-black) !important;
}

/* Ensure dropdowns use theme colors */
.mud-popover .mud-list-item:hover {
    background-color: var(--mud-palette-action-hover, rgba(0,0,0,0.04)) !important;
}

.mud-selected-item {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-contrast-text, #ffffff) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

        .card-header > :not(:first-child) {
            margin-top: var(--cailo-spacing);
        }

    .mud-container {
        padding-left: var(--cailo-spacing);
        padding-right: var(--cailo-spacing);
    }

    .cailo-brand-header {
        padding: var(--cailo-spacing-lg);
        text-align: center;
    }

    .cailo-metric-card {
        margin-bottom: var(--cailo-spacing-md);
    }
}