/* CSS Custom Properties for Theme Support */
:root {
    /* Font */
    --font-family: Roboto;
    /* Light Theme Colors */
    --rival-primary: #F2F2F2;
    --rival-secondary: #4A4A4A;
    --rival-background-primary: #F2F2F7;
    --rival-background-secondary: #FFFFFF;
    --rival-surface: #F5F5F5;
    --rival-border: #E6E6E6;
    --rival-text-primary: #121212;
    --rival-text-secondary: #4A4A4A;
    --rival-text-muted: #D3D3D9;
    --rival-green: #59BF98;
    --rival-green-disabled: #CFCFCF;
    --rival-dark-blue: #0D3556;
    --rival-light-blue: #6288C5;
    --rival-yellow: #E3DD57;
    --rival-orange: #F48459;
    --rival-orange-disabled: #A45B3F;
    --rival-link-blue: #0056B1;
    --rival-dark-grey: #D9D9D9;
    --rival-light-grey: #E6E6E6;
    --rival-red: #F04643;
    --rival-red-error: #ef4444;
    --rival-black: #FAFAFA;
    --rival-light-yellow: #A19C00;
    --rival-zinc-400: #D3D3D9;
    --rival-gray-700: #F5F5F5;
    --rival-gray-600: #E6E6E6;
    --rival-hover-dark: rgba(0, 0, 0, 0.1);
    --rival-disabled-text: #A0A0A0;
    --rival-input-disabled-background: #F0F0F0;
    --rival-border-secondary: #CCCCCC;
    --rival-card-background: #FFFFFF;
    --rival-card-content: #FAFAFA;
    --rival-toast-success-bg: #DFF5DC;
    --rival-toast-success-border: #107C10;
    --rival-toast-info-bg: #E6F4FD;
    --rival-toast-info-border: #0099BC;
    --rival-toast-warning-bg: #F8E8E3;
    --rival-toast-warning-border: #DA3B01;
    --rival-toast-error-bg: #F9E4E3;
    --rival-toast-error-border: #C50F1F;
    --rival-border-muted: #dee2e6;
    --rival-border-error: #f5c6cb;
    --rival-border-gray: #6c757d;
    --rival-border-light: #ced4da;
    --rival-box-shadow-light: rgba(255, 255, 255, 0.2);
    --rival-overlay-light: rgba(255, 255, 255, 0.1);
    --rival-outline-blue: #60a5fa;
    --rival-outline-gray: #9b9b9b;
    --rival-border-focus: #707070;
    /* Layout Colors */
    --rival-layout-button-text: #4A4A4A;
    --rival-layout-border: #E6E6E6;
    --rival-layout-nav-text: #4A4A4A;
    --rival-layout-nav-border: #4A4A4A;
    --rival-checkbox-border: #4A4A4A;
    /* Grid Colors */
    --rival-grid-header-bg: #ffffff;
    --rival-grid-table-bg: #ffffff;
    --rival-grid-row-hover-bg: #f8f9fa;
    --rival-grid-active-bg: #e9ecef;
    --rival-grid-text: #4A4A4A;
    --rival-grid-header-text: #4A4A4A;
    --rival-grid-pager-bg: #ffffff;
    --rival-grid-pager-item-bg: #ffffff;
    --rival-grid-pager-text: #4A4A4A;
    --rival-grid-search-border: #dee2e6;
    /* Panel Colors */
    --rival-panel-header-bg: #f8f9fa;
    --rival-panel-header-text: #4A4A4A;
    --rival-component-bg: #ffffff;
    --rival-component-text: #4A4A4A;
    --rival-dialog-bg: #ffffff;
    --rival-dialog-text: #4A4A4A;
    --rival-toolbar-bg: #f8f9fa;
    --rival-toolbar-text: #4A4A4A;
    --rival-input-group-bg: #ffffff;
    --rival-input-group-text: #4A4A4A;
    --rival-dropdown-bg: #f8f9fa;
    --rival-dropdown-text: #4A4A4A;
    /* Input and Search Colors */
    --rival-input-bg: #ffffff;
    --rival-input-placeholder: #9b9b9b;
    --rival-search-input-bg: #f8f9fa;
    --rival-button-bg: #ffffff;
    --rival-social-link-bg: #e6e6e6;
    /* Status Colors */
    --rival-success: #59bf98;
    --rival-success-hover: #059669;
    --rival-warning: #f59e0b;
    --rival-warning-hover: #d97706;
    /* Badge Text Colors - Contrasting text for colored backgrounds */
    --rival-badge-text-on-success: #ffffff;
    --rival-badge-text-on-danger: #ffffff;
    --rival-badge-text-on-primary: #ffffff;
    /* Button/Component Text Colors - Contrasting text for colored backgrounds */
    --rival-text-on-orange: #ffffff;
    --rival-text-on-green: #ffffff;
    --rival-text-on-blue: #ffffff;
    /* Generic contrasting text for components */
    --rival-text-contrasting: #000000;
    --rival-text-light-grey: #4A4A4A;
    --rival-dropdown-item: #E6E6E6;
    --rival-gray-600-on-text: #4a4a4a;
    /* Text colors for specific components */
    --rival-search-text: #000000;
    /* Background colors for specific components */
    --rival-search-bg: #dee2e6;
    --rival-search-bg-on-box: 6c757d;
    --rival-userview-bg: #dee2e6;
    --rival-rolodex-bg: #D9D9D9;
    --rival-rolodex-hover: #bfbfbf;
    --rival-rolodex-chevron: #6c757d;
    /* Skeleton loader */
    --rival-skeleton-bg: #e0e0e0;
}

    /* Dark Theme Colors */
    :root.dark {
        --rival-primary: #FFFFFF;
        --rival-secondary: #9ca3af;
        --rival-background-primary: #121212;
        --rival-background-secondary: #262626;
        --rival-surface: #393939;
        --rival-border: #373737;
        --rival-text-primary: #FFFFFF;
        --rival-text-secondary: #9ca3af;
        --rival-text-muted: #a1a1aa;
        --rival-green: #59BF98;
        --rival-green-disabled: #CFCFCF;
        --rival-dark-blue: #0D3556;
        --rival-light-blue: #6288C5;
        --rival-yellow: #E3DD57;
        --rival-orange: #F48459;
        --rival-orange-disabled: #A45B3F;
        --rival-link-blue: #0056B1;
        --rival-dark-grey: #707070;
        --rival-darker-grey: #393939;
        --rival-light-grey: #9B9B9B;
        --rival-red: #F04643;
        --rival-red-error: #ef4444;
        --rival-black: #0a0a0a;
        --rival-light-yellow: #E8E154;
        --rival-zinc-400: #a1a1aa;
        --rival-gray-700: #333333;
        --rival-gray-600: #9B9B9B;
        --rival-hover-dark: rgba(255, 255, 255, 0.1);
        --rival-disabled-text: #666666;
        --rival-input-disabled-background: #393939;
        --rival-border-secondary: #495565;
        --rival-card-background: #262626;
        --rival-card-content: #393939;
        --rival-toast-success-bg: #2d4a2a;
        --rival-toast-success-border: #4ade80;
        --rival-toast-info-bg: #1e3a5f;
        --rival-toast-info-border: #38bdf8;
        --rival-toast-warning-bg: #451a03;
        --rival-toast-warning-border: #fb923c;
        --rival-toast-error-bg: #450a0a;
        --rival-toast-error-border: #f87171;
        --rival-border-muted: #374151;
        --rival-border-error: #7f1d1d;
        --rival-border-gray: #4b5563;
        --rival-border-light: #374151;
        --rival-box-shadow-light: rgba(0, 0, 0, 0.3);
        --rival-overlay-light: rgba(0, 0, 0, 0.2);
        --rival-outline-blue: #3b82f6;
        --rival-outline-gray: #ced4da;
        --rival-border-focus: #9ca3af;
        /* Layout Colors */
        --rival-layout-button-text: #ffffff;
        --rival-layout-border: #262626;
        --rival-layout-nav-text: #ffffff;
        --rival-layout-nav-border: #ffffff;
        --rival-checkbox-border: #ffffff;
        /* Grid Colors */
        --rival-grid-header-bg: #262626;
        --rival-grid-table-bg: #262626;
        --rival-grid-row-hover-bg: #444444;
        --rival-grid-active-bg: #444444;
        --rival-grid-text: #ffffff;
        --rival-grid-header-text: #ffffff;
        --rival-grid-pager-bg: #262626;
        --rival-grid-pager-item-bg: #262626;
        --rival-grid-pager-text: #ffffff;
        --rival-grid-search-border: #262626;
        /* Panel Colors */
        --rival-panel-header-bg: #262626;
        --rival-panel-header-text: #ffffff;
        --rival-component-bg: #393939;
        --rival-component-text: #ffffff;
        --rival-dialog-bg: #262626;
        --rival-dialog-text: #ffffff;
        --rival-toolbar-bg: #393939;
        --rival-toolbar-text: #ffffff;
        --rival-input-group-bg: #262626;
        --rival-input-group-text: #ffffff;
        --rival-dropdown-bg: #262626;
        --rival-dropdown-text: #ffffff;
        /* Input and Search Colors */
        --rival-input-bg: #393939;
        --rival-input-placeholder: #9b9b9b;
        --rival-search-input-bg: #393939;
        --rival-button-bg: #262626;
        --rival-social-link-bg: #373737;
        /* Status Colors */
        --rival-success: #59bf98;
        --rival-success-hover: #059669;
        --rival-warning: #f59e0b;
        --rival-warning-hover: #d97706;
        /* Badge Text Colors - Contrasting text for colored backgrounds */
        --rival-badge-text-on-success: #000000;
        --rival-badge-text-on-danger: #000000;
        --rival-badge-text-on-primary: #000000;
        /* Button/Component Text Colors - Contrasting text for colored backgrounds */
        --rival-text-on-orange: #000000;
        --rival-text-on-green: #000000;
        --rival-text-on-blue: #000000;
        /* Generic contrasting text for buttons and components */
        --rival-text-contrasting: #ffffff;
        --rival-text-light-grey: #9B9B9B;
        --rival-dropdown-item: #E6E6E6;
        --rival-gray-600-on-text: #9b9b9b;
        /* Text colors for specific components */
        --rival-search-text: #9b9b9b;
        /* Background colors for specific components */
        --rival-search-bg: #262626;
        --rival-search-bg-on-box: 6c757d;
        --rival-userview-bg: #393939;
        --rival-rolodex-bg: #4d4d4d;
        --rival-rolodex-hover: #5a5a5a;
        --rival-rolodex-chevron: #121212;
        /* Skeleton loader */
        --rival-skeleton-bg: #2f2f2f;
    }

/* Utility Classes for Theme-Aware Text Colors */
.text-theme-primary {
    color: var(--rival-text-primary) !important;
}

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

.text-theme-component {
    color: var(--rival-component-text) !important;
}

/* Contrasting Text Colors for Colored Backgrounds */
.text-on-orange {
    color: var(--rival-text-on-orange) !important;
}

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

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

/* Generic contrasting text utility */
.text-contrasting {
    color: var(--rival-text-contrasting) !important;
}

/* Global Font Family */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-brands):not([style*="Font Awesome"]):not(.e-icons):not(.e-arrow-tip-inner):not(.e-arrow-tip-outer):not(.e-chips-close) {
    font-family: var(--font-family) !important;
}

/* Button Styles */
.btn-primary {
    background-color: var(--rival-light-blue);
    border-color: var(--rival-light-blue);
    color: var(--rival-text-primary);
}

    .btn-primary:hover {
        background-color: var(--rival-light-blue);
        border-color: var(--rival-light-blue);
        opacity: 0.8;
        cursor: pointer;
    }

.btn-link {
    color: var(--rival-light-blue);
}

    .btn-link:hover {
        color: var(--rival-light-blue);
        opacity: 0.8;
        cursor: pointer;
    }

/* Text Color Classes */
.text-rival-primary {
    color: var(--rival-text-primary) !important;
}

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

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

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

.text-rival-dark-blue {
    color: var(--rival-dark-blue) !important;
}

.text-rival-light-blue {
    color: var(--rival-light-blue) !important;
}

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

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

.text-rival-link-blue {
    color: var(--rival-link-blue) !important;
}

.text-rival-darker-grey {
    color: var(--rival-darker-grey) !important;
}

.text-rival-dark-grey {
    color: var(--rival-dark-grey) !important;
}

.text-rival-light-grey {
    color: var(--rival-text-light-grey) !important;
}

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

.text-transparent {
    color: transparent !important;
}

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

.text-rival-zinc-400 {
    color: var(--rival-zinc-400) !important;
}

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

/* Background Color Classes */
.bg-rival-primary {
    background-color: var(--rival-background-primary) !important;
}

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

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

.bg-rival-dark-blue {
    background-color: var(--rival-dark-blue) !important;
}

.bg-rival-light-blue {
    background-color: var(--rival-light-blue) !important;
}

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

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

.bg-rival-orange-disabled {
    background-color: var(--rival-orange-disabled) !important;
}

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

.bg-rival-dark-grey {
    background-color: var(--rival-dark-grey) !important;
}

.bg-rival-light-grey {
    background-color: var(--rival-light-grey) !important;
}

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

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

.bg-transparent {
    background-color: transparent !important;
}

/* Border Color Classes */
.border-primary {
    border-color: var(--rival-background-primary) !important;
}

.border-secondary {
    border-color: var(--rival-background-secondary) !important;
}

.border-rival-green {
    border-color: var(--rival-green) !important;
}

.border-rival-dark-blue {
    border-color: var(--rival-dark-blue) !important;
}

.border-rival-light-blue {
    border-color: var(--rival-light-blue) !important;
}

.border-rival-yellow {
    border-color: var(--rival-yellow) !important;
}

.border-rival-orange {
    border-color: var(--rival-orange) !important;
}

.border-rival-orange-disabled {
    border-color: var(--rival-orange-disabled) !important;
}

.border-rival-darker-grey {
    border-color: #393939 !important;
}

.border-rival-dark-grey {
    border-color: var(--rival-dark-grey) !important;
}

.border-rival-light-grey {
    border-color: var(--rival-light-grey) !important;
}

.border-rival-gray-700 {
    border-color: var(--rival-gray-700) !important;
}

.border-transparent {
    border-color: transparent !important;
}

.border-dashed {
    border-style: dashed !important;
    border-width: 1px !important;
}

.border-dashed-thick {
    border-style: dashed !important;
    border-width: 2px !important;
}

.btn-hoverable:hover {
    opacity: 0.8;
    cursor: pointer;
}

.validation-required-asterisk {
    color: #EF5350 !important; /* Keep as fixed validation color */
}

.validation-message {
    color: var(--rival-red);
}

/* Form Controls */
.e-control-wrapper .form-control {
    color: var(--rival-text-primary) !important;
    background-color: var(--rival-surface) !important;
    border: unset;
}

.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
    background: var(--rival-surface) !important;
    color: var(--rival-text-primary) !important;
}

.e-readonly .e-input {
    background-color: unset !important;
}

.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::before, .e-multiselect.e-input-group.e-control-wrapper.e-input-focus::after {
    color: var(--rival-text-primary) !important;
    background-color: var(--rival-surface) !important;
}

.e-multi-select-wrapper .e-input-group-icon {
    color: #6c757d !important;
}

.e-multiselect .e-delim-view {
    color: var(--rival-text-primary) !important;
    -webkit-text-fill-color: var(--rival-text-primary) !important;
}
/* Dialog Styles */
.e-dlg-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.e-dialog {
    background-color: var(--rival-background-secondary) !important;
    border: 1px solid var(--rival-light-grey) !important;
    border-radius: 5px;
    color: var(--rival-text-primary);
}

    .e-dialog .e-dlg-content {
        background-color: var(--rival-background-secondary);
    }

    .e-dialog .e-dlg-header-content {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom: 1px solid var(--rival-light-grey) !important;
    }

    .e-dialog .e-dlg-closeicon-btn {
        margin-top: 0.5rem !important;
    }

    .e-dialog .e-dlg-header {
        font-size: 1.3rem;
    }

    .e-dialog .e-dlg-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .e-dialog .e-control-wrapper {
        background-color: var(--rival-surface) !important;
        border: 1px solid #ced4da !important;
        color: var(--rival-text-primary) !important;
    }

.e-icon-dlg-close {
    color: var(--rival-text-primary) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--rival-background-primary);
    width: max-content !important;
    max-width: 90vw !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

    .dropdown-menu div.active, .dropdown-menu div:hover {
        background-color: var(--rival-dropdown-item) !important;
        opacity: 0.8 !important;
    }

    .dropdown-menu div:not(.active):hover {
        cursor: pointer !important;
    }

    .dropdown-menu div.active:hover {
        cursor: default !important;
    }

/* Grid and Table Styles */
.e-grid, .e-grid * {
    border-color: var(--rival-border) !important;
}

    .e-grid .e-headercell {
        background-color: var(--rival-background-secondary) !important;
    }

    .e-grid .e-table {
        background-color: var(--rival-background-secondary) !important;
    }

    .e-grid .e-row:hover .e-rowcell {
        background-color: var(--rival-surface) !important;
    }

    .e-grid td.e-active {
        background: var(--rival-surface);
    }

    .e-grid .e-pager {
        background-color: var(--rival-background-secondary) !important;
    }

        .e-grid .e-pager .e-icons,
        .e-grid .e-pager .e-link {
            background-color: var(--rival-background-secondary) !important;
            color: var(--rival-light-blue) !important;
        }

            .e-grid .e-pager .e-icons.e-disable,
            .e-grid .e-pager .e-link.e-disable {
                color: var(--rival-light-grey) !important;
            }

    .e-grid .e-headertext {
        color: var(--rival-text-primary) !important;
    }

    .e-grid .e-row .e-rowcell {
        color: var(--rival-text-primary) !important;
    }

    .e-grid .e-pager .e-parentmsgbar {
        color: var(--rival-text-primary) !important;
    }

    .e-grid .e-table .e-rowcell {
        position: relative !important;
    }

        .e-grid .e-table .e-rowcell .e-dropdown-btn {
            background-color: var(--rival-background-secondary) !important;
            width: 100% !important;
            box-sizing: border-box !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: left !important;
        }

            .e-grid .e-table .e-rowcell .e-dropdown-btn .e-btn-icon {
                position: absolute !important;
                right: 20px !important;
                top: 20px !important;
            }

        .e-grid .e-table .e-rowcell input {
            color: var(--rival-text-primary) !important;
        }

    .e-grid .e-table a {
        color: var(--rival-green);
        text-decoration: none;
    }

    .e-grid .e-table .bi-trash {
        color: var(--rival-text-primary) !important;
    }

    .e-grid .e-pagercontainer {
        background-color: inherit !important;
    }

    .e-grid .e-filterbarcell {
        background-color: var(--rival-background-secondary) !important;
    }

    .e-grid .e-filterdiv {
        background-color: var(--rival-light-grey) !important;
        border-radius: 5px !important;
    }

    .e-grid .e-filterbarcell .e-input-group {
        color: var(--rival-text-primary) !important;
        background-color: var(--rival-surface) !important;
        border: 1px solid var(--rival-light-grey) !important
    }

    .e-grid .e-pager-default {
        background-color: inherit !important;
    }

/* DataGrid Styling */
.datagrid-styling {
    background-color: var(--rival-background-secondary) !important;
    border: 1px solid var(--rival-border) !important;
}

    .datagrid-styling .e-grid {
        background-color: var(--rival-background-secondary) !important;
        border: none !important;
    }

        .datagrid-styling .e-grid .e-row:hover .e-rowcell {
            background-color: var(--rival-surface) !important;
        }

        .datagrid-styling .e-grid .e-rowcell {
            border-color: var(--rival-border) !important;
            color: var(--rival-text-primary) !important;
        }

        .datagrid-styling .e-grid .e-headertext {
            color: var(--rival-text-primary) !important;
        }

        .datagrid-styling .e-grid .e-pager {
            background-color: var(--rival-background-secondary) !important;
            border-top: 1px solid var(--rival-border) !important;
        }

            .datagrid-styling .e-grid .e-pager .e-icons,
            .datagrid-styling .e-grid .e-pager .e-link {
                background-color: var(--rival-background-secondary) !important;
                color: var(--rival-light-blue) !important;
            }

                .datagrid-styling .e-grid .e-pager .e-icons.e-disable,
                .datagrid-styling .e-grid .e-pager .e-link.e-disable {
                    color: var(--rival-light-grey) !important;
                }

            .datagrid-styling .e-grid .e-pager .e-parentmsgbar {
                color: var(--rival-text-primary) !important;
            }

    /* Contact-specific styling for datagrid-styling class */
    .datagrid-styling .contact-link {
        color: var(--rival-light-blue) !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }

        .datagrid-styling .contact-link:hover {
            color: #7a9dd1 !important;
            text-decoration: underline !important;
        }

    /* Social media links styling */
    .datagrid-styling .social-link-text {
        color: var(--rival-text-secondary) !important;
        text-decoration: none !important;
        font-size: 12px !important;
        margin-right: 4px !important;
    }

        .datagrid-styling .social-link-text:hover {
            color: var(--rival-light-blue) !important;
            text-decoration: underline !important;
        }

    /* Hide toolbar and related elements */
    .datagrid-styling .e-grid .e-toolbar,
    .datagrid-styling .e-grid .e-separator,
    .datagrid-styling .e-grid .e-toolbar-items,
    .datagrid-styling .e-grid .e-toolbar-left,
    .datagrid-styling .e-grid .e-toolbar-right,
    .datagrid-styling .e-grid .e-toolbar-center,
    .datagrid-styling .e-blazor-toolbar-items,
    .datagrid-styling [id*="toolbar"] {
        display: none !important;
    }

/* Add spacing above the table */
.datagrid-styling {
    margin-top: 1rem !important;
}

/* Utility: Compact badge variant */
.rival-badge.badge-compact {
    border-radius: 620rem !important;
}

/* Social media icons styling - Match design */
.social-links-icons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .social-icon.facebook {
        color: #3b82f6;
    }

        .social-icon.facebook:hover {
            color: #60a5fa;
        }

    .social-icon.twitter {
        color: #60a5fa;
    }

        .social-icon.twitter:hover {
            color: #93c5fd;
        }

    .social-icon.linkedin {
        color: #2563eb;
    }

        .social-icon.linkedin:hover {
            color: #3b82f6;
        }

    .social-icon.instagram {
        color: #8b5cf6;
    }

        .social-icon.instagram:hover {
            color: #a78bfa;
        }

    .social-icon.youtube {
        color: #ef4444;
    }

        .social-icon.youtube:hover {
            color: #f87171;
        }

    .social-icon.google {
        color: #4285f4;
    }

        .social-icon.google:hover {
            color: #5a95f5;
        }

    .social-icon.generic {
        color: var(--rival-text-secondary);
    }

        .social-icon.generic:hover {
            color: var(--rival-text-secondary);
        }

/* Form Styles */
.form-group-container {
    display: flex;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 15px;
    flex: 1;
    margin-right: 10px;
}

.e-dropdownlist {
    color: inherit !important;
}

.e-dropdown-menu,
.e-dropdown-menu li,
.e-dropdownbase .e-list-item,
.e-selectall-parent,
.e-selectall-parent .e-all-text,
.e-remain {
    background-color: var(--rival-surface) !important;
    color: var(--rival-text-primary) !important;
    -webkit-text-fill-color: var(--rival-text-primary) !important;
}

    .e-dropdown-menu li:hover,
    .e-dropdownbase .e-list-item:hover {
        opacity: 0.8;
        cursor: pointer;
    }

/* Spinner and Loading */
.spinner-blur-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

@media (max-width: 550px) {
    .form-group-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 15px;
        flex: 1;
        margin-right: 10px;
    }

    .createopportunities-card {
        justify-content: start;
    }

    .searchresulttable-header {
        font: normal normal bold 0.75rem var(--font-family);
        letter-spacing: 0px;
        color: var(--rival-text-primary);
        opacity: 1;
    }

    .searchresulttable-tr {
        text-align: left;
        font: normal normal normal 0.75rem var(--font-family);
        letter-spacing: 0px;
        color: var(--rival-text-primary);
        opacity: 1;
        cursor: pointer;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .opportunities-card {
        justify-content: start;
    }

    .opportunities-searchresult {
        background-color: var(--rival-surface);
        border: none !important;
        opacity: 1;
        max-width: 56.25rem !important;
        max-height: 15.5rem !important;
        overflow-y: auto;
    }

    .referrals-cardBottom {
        justify-content: center;
    }
}

@media (min-width: 551px) {
    .form-group-container {
        display: flex;
        justify-content: space-between;
    }

    .form-group {
        margin-bottom: 15px;
        flex: 1;
        margin-right: 10px;
    }

    .createopportunities-card {
        justify-content: start;
    }

    .searchresulttable-header {
        font: normal normal bold 1.25rem var(--font-family);
        letter-spacing: 0px;
        color: var(--rival-text-primary);
        opacity: 1;
    }

    .searchresulttable-tr {
        text-align: left;
        font: normal normal normal 20px var(--font-family);
        letter-spacing: 0px;
        color: var(--rival-text-primary);
        opacity: 1;
        cursor: pointer;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .opportunities-card {
        justify-content: start;
    }

    .opportunities-searchresult {
        background-color: var(--rival-surface);
        border: none !important;
        opacity: 1;
        max-width: 56.25rem !important;
        max-height: 25.5rem !important;
        overflow-y: auto;
    }

    .referrals-cardBottom {
        justify-content: center;
    }
}

::-webkit-scrollbar {
    opacity: 1;
    border-radius: 8px;
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--rival-light-grey);
}

::-webkit-scrollbar-track {
    border-radius: 8px;
}

.page-indicator {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    color: var(--rival-text-primary);
}

@media (max-width: 480px) {
    .contact-actions {
        flex-direction: column;
    }

        .contact-actions .btn {
            width: 100%;
        }

    .e-carousel.e-partial .e-carousel-slide-container {
        padding: 5%;
    }

    .e-btn, .e-css.e-btn {
        font-size: 0.75rem;
    }

    .row {
        min-width: 50% !important;
    }
}

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

.detailsButton {
    width: 49%;
}


@media (min-width: 551px) {
    .e-carousel.e-partial .e-carousel-slide-container {
        padding: 0%;
    }
}

.e-carousel .e-carousel-navigators {
    min-height: 24px;
}

.e-carousel .e-carousel-navigator-wrap {
    justify-content: center;
    margin-top: 8px;
}

.e-carousel .e-carousel-navigator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rival-light-blue);
    opacity: 0.5;
    margin: 0 4px;
}

    .e-carousel .e-carousel-navigator.e-active {
        opacity: 1;
    }

.zeroRecord {
    height: 100px !important;
    min-height: 6.25rem !important;
}

.gridRecord {
    height: 100px !important;
    min-height: 20rem !important;
}

.social-fallback {
    width: 35px;
    height: 35px;
    align-items: center;
    text-align: center !important;
    align-content: center;
    justify-content: center;
    margin: 0 0;
}

.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover, .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):hover, .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):hover {
    background-color: transparent !important;
    outline: none;
}


.users-card .e-input-group.e-control-wrapper.e-ddl .e-input[disabled],
.users-card .e-input-group.e-control-wrapper.e-ddl input[aria-disabled="true"],
.users-card .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
.users-card .e-input-group.e-control-wrapper.e-ddl input[readonly],
.users-card .e-input-group.e-control-wrapper.e-ddl .e-input,
.users-card .e-input-group.e-control-wrapper.e-ddl input {
    color: var(--rival-text-primary) !important;
    opacity: 1 !important;
    background-color: var(--rival-surface) !important;
}

    .users-card .e-input-group.e-control-wrapper.e-ddl .e-input[disabled]::placeholder,
    .users-card .e-input-group.e-control-wrapper.e-ddl input[aria-disabled="true"]::placeholder {
        color: var(--rival-text-primary) !important;
        opacity: 1 !important;
    }

    .users-card .e-input-group.e-control-wrapper.e-ddl .e-input[disabled]::selection,
    .users-card .e-input-group.e-control-wrapper.e-ddl input[aria-disabled="true"]::selection {
        color: var(--rival-text-primary) !important;
        background: var(--rival-surface) !important;
    }

.referrals-card {
    justify-content: start;
}

.referrals-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.referrals-header {
    font-size: 1.09rem;
    font-family: Roboto;
    letter-spacing: 0px;
}

.referrals-remarks {
    font-size: 1rem;
}

.referrals-users {
    height: 60px !important;
    width: 60px !important;
    font-size: 20px !important;
}

.form-groupItem {
    max-width: 50%;
    justify-items: right !important;
    position: absolute;
    right: 0;
}

.referrals-saveButton {
    text-align: center;
    font: normal normal normal 20px var(--font-family);
    letter-spacing: 0px;
    color: var(--rival-text-primary);
    opacity: 1;
    background-color: var(--rival-light-blue) !important;
}

.referrals-labelFirst {
    text-align: left;
    letter-spacing: 0px;
    color: var(--rival-text-muted) !important;
    opacity: 1;
}

.referrals-label {
    text-align: left;
    letter-spacing: 0px;
}

.e-radio-wrapper {
    text-align: left;
    font: normal normal normal 12px var(--font-family);
    letter-spacing: 0px;
    color: var(--rival-text-muted) !important;
    opacity: 1;
    background-color: inherit !important;
    border-radius: 5px !important;
}

.e-checkbox-wrapper .e-label {
    color: var(--rival-text-primary) !important;
    font: normal normal normal 20px var(--font-family) !important;
}

.e-checkbox-wrapper .e-frame {
    background-color: inherit !important;
    border-color: var(--rival-outline-gray) !important;
}

.e-checkbox-wrapper .e-check {
    background-color: var(--rival-light-blue) !important;
    border-color: var(--rival-outline-gray) !important;
}


.referrals-textboxDisable {
    max-width: 26.75rem !important;
    background: #F3F3F3 0% 0% no-repeat padding-box !important;
    border: 1px solid #8C8C8C;
    color: #333333 !important;
    border-radius: 0.125rem;
    opacity: 1;
}

.referrals-textbox {
    max-width: 26.75rem !important;
    background: var(--rival-surface) 0% 0% no-repeat padding-box !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.125rem;
    color: var(--rival-text-primary) !important;
    opacity: 1;
}

.referrals-remarksTextbox {
    background: var(--rival-surface) 0% 0% no-repeat padding-box !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.125rem;
    color: var(--rival-text-primary) !important;
    opacity: 1;
    height: 5rem !important;
    width: 100% !important;
}

.referrals-card, .referrals-card .e-card-content {
    overflow: unset !important;
}

.referrals-back-button {
    font-size: 24px;
    color: var(--rival-text-primary) !important;
}

    .referrals-back-button:hover {
        text-decoration: none !important;
    }

.referrals-ReAssignButton {
    text-align: center;
    font: normal normal normal 20px var(--font-family);
    letter-spacing: 0px;
    color: var(--rival-text-primary);
    opacity: 1;
    background-color: var(--rival-orange) !important;
}

.vertical-separator {
    width: 1px;
    height: 100%;
    border: 2px solid #FFFFFF;
    margin: 0 20px; /* Space between elements */
}

.validation-messageReason {
    color: red;
    font: normal normal medium 10px Roboto;
}

.custom-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* High z-index to make sure it is above all content */
}

.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] {
    color: var(--rival-text-primary) !important;
}

.e-input-group.e-control-wrapper.e-ddl .e-input[disabled] {
    color: var(--rival-disabled-text) !important;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-disabled, .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-disabled {
    border-style: solid;
    color: var(--rival-disabled-text) !important;
    background-color: var(--rival-input-disabled-background) !important;
}

.remarks-result {
    border: none !important;
    opacity: 1;
    max-height: 31rem !important;
    overflow-y: auto;
}

.timeAgoTextAlign {
    text-align: left !important;
    color: #c4c4c4 !important; /* Keep as specific gray for time display */
}

input[type="radio"]:disabled {
    background-color: var(--rival-light-blue) !important; /* Changes the background */
    border-color: var(--rival-border-gray) !important;
    /* Changes the border color */
    opacity: 0.1; /* Makes the button appear lighter */
    -webkit-appearance: radio; /* Ensures it's rendered as a radio button */
}

input[type="radio"]:checked:disabled {
    background-color: var(--rival-light-blue) !important; /* Light blue that contrasts well */
    transform: scale(1);
    opacity: 1;
    -webkit-appearance: radio;
}

.referrals-mandatory {
    color: #EF5350 !important; /* Keep as fixed validation color */
}

.e-btn.e-round:disabled {
    background-color: var(--rival-light-blue) !important;
}

.referral-reassignment-broker-triage-dropdown {
    overflow-x: auto !important; /* enable horizontal scroll */
    overflow-y: auto !important; /* keep vertical scroll */
    white-space: nowrap !important; /* prevent wrapping */
    max-width: 100vw !important; /* never exceed screen width */
}

    .referral-reassignment-broker-triage-dropdown .head,
    .referral-reassignment-broker-triage-dropdown .item {
        display: table !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

        .referral-reassignment-broker-triage-dropdown .head span {
            font-weight: 600;
            font-size: 1.2em !important;
        }

        .referral-reassignment-broker-triage-dropdown .head .name,
        .referral-reassignment-broker-triage-dropdown .head .role,
        .referral-reassignment-broker-triage-dropdown .head .region,
        .referral-reassignment-broker-triage-dropdown .head .email-address {
            text-align: left;
        }

    .referral-reassignment-broker-triage-dropdown .head,
    .referral-reassignment-broker-triage-dropdown .item {
        border-bottom: 1px solid #707070;
        border-right: 1px solid #707070;
    }

    .referral-reassignment-broker-triage-dropdown .item {
        padding-left: 3px !important;
    }

    .referral-reassignment-broker-triage-dropdown * {
        background-color: var(--rival-surface) !important;
        color: var(--rival-text-primary) !important;
    }

    .referral-reassignment-broker-triage-dropdown .name,
    .referral-reassignment-broker-triage-dropdown .role,
    .referral-reassignment-broker-triage-dropdown .region,
    .referral-reassignment-broker-triage-dropdown .email-address {
        display: table-cell !important;
        vertical-align: middle !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .referral-reassignment-broker-triage-dropdown .head .name {
        width: 26% !important;
    }

    .referral-reassignment-broker-triage-dropdown .item .name {
        width: 25% !important;
    }

    .referral-reassignment-broker-triage-dropdown .head .role {
        width: 19% !important;
    }

    .referral-reassignment-broker-triage-dropdown .item .role {
        width: 18% !important;
    }

    .referral-reassignment-broker-triage-dropdown .head .region {
        width: 16% !important;
    }

    .referral-reassignment-broker-triage-dropdown .item .region {
        width: 15% !important;
    }

    .referral-reassignment-broker-triage-dropdown .email-address {
        width: 41% !important;
    }

.referral-reassignment-dialog .e-dlg-header-content,
.referral-reassignment-dialog .e-dlg-header,
.referral-reassignment-dialog .e-dlg-content {
    background-color: var(--rival-background-primary);
    color: var(--rival-text-primary);
    overflow-x: auto !important; /* enable horizontal scroll */
    overflow-y: auto !important; /* keep vertical scroll */
    white-space: nowrap !important; /* prevent wrapping */
}

.referral-reassignment-broker-triage-dropdown .e-popup {
    max-width: 100vw !important; /* never exceed screen width */
    overflow-x: auto; /* horizontal scroll on narrow screens */
    overflow-y: auto; /* vertical scroll for long lists */
}

.max-w-4xl {
    max-width: 61.25rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.referral-reassignment-broker-triage-dropdown .e-dropdownbase .e-content {
    overflow-x: auto !important; /* enable horizontal scroll */
    overflow-y: auto !important; /* keep vertical scroll */
    white-space: nowrap !important; /* prevent wrapping */
}

.border-red {
    border-color: var(--rival-red) !important;
}

@media (prefers-contrast: more) {
    .trigger {
        border-color: var(--rival-text-secondary);
    }

    .menu {
        border-color: var(--rival-text-secondary);
    }
}

/*Customer Record Contact Interests*/

.interestselect-cancel-btn.btn.btn-link:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-chip-remove:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-category-header:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-interest-btn:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-interest-btn.interestselect-selected:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-add-custom:hover {
    opacity: 0.8;
    cursor: pointer;
}

.interestselect-clear-all:hover {
    color: var(--rival-text-primary) !important;
}

.disable-pointer-events {
    pointer-events: none;
}

.cursor-default {
    cursor: default !important;
}

.filter-date-input {
    flex: 1;
    min-width: 0; /* Allow input to shrink below content size */
    padding: 0.35rem 0.15rem;
    background-color: var(--rival-background-secondary) !important;
    border: none !important;
    border-radius: 4px;
    color: var(--rival-text-primary);
    font-size: 0.875rem;
    max-width: 100%;
}


.drop-zone {
    min-height: 140px;
    transition: all 0.3s ease;
}

    .drop-zone.drag-over {
        border-color: var(--rival-orange) !important;
        background-color: rgba(244, 132, 89, 0.02) !important;
        transform: scale(1.02);
    }

    .drop-zone.file-selected {
        border-color: var(--rival-green) !important;
        background-color: rgba(89, 191, 152, 0.02) !important;
    }

    .drop-zone.has-error {
        border-color: var(--rival-red) !important;
        background-color: rgba(240, 70, 67, 0.02) !important;
    }

/* Theme-aware logo switching */
.theme-logo-light {
    display: block;
}

.theme-logo-dark {
    display: none;
}

html.dark .theme-logo-light {
    display: none;
}

html.dark .theme-logo-dark {
    display: block;
}

.e-switch-wrapper.rival-toggle-switch-button {
    width: 42px;
    height: 24px;
}

    .e-switch-wrapper.rival-toggle-switch-button .e-switch-on {
        background-color: var(--rival-light-blue) !important;
        border-color: var(--rival-light-blue) !important;
    }

    .e-switch-wrapper.rival-toggle-switch-button .e-switch-inner.e-switch-active,
    .e-switch-wrapper.rival-toggle-switch-button:hover .e-switch-inner.e-switch-active .e-switch-on {
        background-color: var(--rival-light-blue) !important;
        border-color: var(--rival-light-blue) !important;
    }

    .e-switch-wrapper.rival-toggle-switch-button .e-switch-handle {
        background-color: var(--rival-background-primary) !important;
        width: 20px;
        height: 20px;
    }

        .e-switch-wrapper.rival-toggle-switch-button .e-switch-handle.e-switch-active {
            margin-left: -22px;
        }

.e-radio + label .e-label {
    color: var(--rival-text-primary) !important;
}

.e-radio + label::before {
    border-color: var(--rival-outline-gray) !important;
}

#task-form-assignments-dropdown::placeholder {
    color: var(--rival-light-blue) !important;
}

.e-calendar {
    background-color: var(--rival-surface) !important;
}

.e-calendar .e-title {
    color: var(--rival-text-primary) !important;
}

.e-calendar .e-cell span.e-day {
    color: var(--rival-text-primary) !important;
}

.e-daterangepicker,
.e-daterangepicker.e-popup .e-range-header,
.e-daterangepicker.e-popup .e-range-header a,
.e-daterangepicker .e-calendar,
.e-daterangepicker .e-calendar .e-cell span.e-day,
.e-daterangepicker .e-calendar .e-title,
.e-daterangepicker .e-calendar .e-icons,
.e-daterangepicker.e-popup .e-footer,
.e-daterangepicker .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon {
    background-color: var(--rival-background-secondary) !important;
    color: var(--rival-text-primary) !important;
}

    .e-daterangepicker .e-calendar .e-title:hover {
        background-color: unset !important;
    }

    .e-daterangepicker .e-calendar .e-cell.e-other-month span.e-day {
        color: var(--rival-light-grey) !important;
    }

    .e-daterangepicker .e-calendar .e-cell.e-focused-date span.e-day,
    .e-daterangepicker .e-calendar .e-cell:not(.e-selected) span.e-day:hover,
    .e-daterangepicker .e-calendar .e-cell:not(.e-selected):hover span.e-day {
        background-color: var(--rival-background-secondary) !important;
    }

    .e-daterangepicker .e-calendar .e-cell.e-selected span.e-day,
    .e-daterangepicker .e-calendar .e-cell.e-range-hover span.e-day,
    .e-daterangepicker .e-calendar .e-cell.e-range-hover,
    .e-daterangepicker .e-calendar .e-footer-container .e-today,
    .e-daterangepicker .e-calendar .e-footer-container {
        background-color: var(--rival-light-blue) !important;
    }

    .e-daterangepicker .e-calendar .e-cell.e-today span.e-day {
        border-color: var(--rival-light-blue) !important;
    }

.e-filter-parent,
.e-dropdownbase.e-nodata,
.e-timepicker,
.e-timepicker .e-list-parent {
    background-color: var(--rival-surface) !important;
}

    .e-timepicker .e-list-item {
        color: var(--rival-primary) !important;
    }

.e-input-group.filter-dropdown-multiselect, .e-input-group.e-control-wrapper.filter-dropdown-multiselect {
    padding: 0.3rem 0.75rem !important;
    background-color: var(--rival-surface) !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    color: var(--rival-text-primary) !important;
    cursor: pointer !important;
    transition: background-color 0.2s;
}

/* Validation highlight for error navigation */
.validation-highlight .trigger {
    animation: highlight-pulse 2s ease-out;
    border-color: var(--rival-red) !important;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 70, 67, 0.7);
    }
    50% {
        box-shadow: 0 0 10px 5px rgba(240, 70, 67, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(240, 70, 67, 0);
    }
}