/* CARIAD CI Color Variables */
:root {
    /* Primary CI Colors */
    --cariad-primary-purple: #442ee0;
    --cariad-primary-green: #1eef97;
    --cariad-primary-yellow: #fef04a;
    --cariad-primary-red: #ee5340;
    --cariad-dark-purple: #1d0638;
    --cariad-light-gray: #cdcdd2;
    --cariad-dark-gray: #373741;
    
    /* Purple Gradient */
    --cariad-purple-1: #442ee0;
    --cariad-purple-2: #6958e6;
    --cariad-purple-3: #8f82ec;
    --cariad-purple-4: #b4abf3;
    --cariad-purple-5: #dad5f9;
    
    /* Green Gradient */
    --cariad-green-1: #1eef97;
    --cariad-green-2: #4bf2ac;
    --cariad-green-3: #78f5c1;
    --cariad-green-4: #a5f9d5;
    --cariad-green-5: #d2fcea;
    
    /* Red Gradient */
    --cariad-red-1: #ee5340;
    --cariad-red-2: #f5988c;
    --cariad-red-3: #f8bab3;
    --cariad-red-4: #fcddd9;
    
    /* Yellow Gradient */
    --cariad-yellow-1: #fef04a;
    --cariad-yellow-2: #fef36e;
    --cariad-yellow-3: #fef692;
    --cariad-yellow-4: #fff9b7;
    --cariad-yellow-5: #fffcdb;
    
    /* Dark Gradient */
    --cariad-dark-1: #1d0638;
    --cariad-dark-2: #4a3860;
    --cariad-dark-3: #776a88;
    --cariad-dark-4: #a59baf;
    --cariad-dark-5: #d2cdd7;
    
    /* Gray Gradient */
    --cariad-gray-1: #373741;
    --cariad-gray-2: #55555e;
    --cariad-gray-3: #73737a;
    --cariad-gray-4: #919197;
    --cariad-gray-5: #afafb3;
    --cariad-gray-6: #cdcdd2;
    --cariad-gray-7: #d7d7db;
    --cariad-gray-8: #e1e1e4;
    --cariad-gray-9: #ebebed;
    --cariad-gray-10: #f5f5f6;
    
    /* Text Colors */
    --cariad-text-primary: #1d0638;        /* Dark text for light backgrounds */
    --cariad-text-secondary: #373741;      /* Secondary dark text */
    --cariad-text-light: #f5f5f6;          /* Light text for dark backgrounds */
    --cariad-text-on-color: #ffffff;       /* White text for colored backgrounds */
    
    /* Additional Colors */
    --cariad-white: #ffffff;               /* Pure white */
    --cariad-black: #000000;               /* Pure black */
}

.titleheader{
    background-color: --bs-primary;
    padding: 10;
}

.navbar.second-navbar {
  margin-top: 59px;
  z-index:1
}

.dropdown-menu {
  z-index:2
}

/* Team Role Visualization Badge Styles - CARIAD CI Colors */
.badge.badge-level-1 { 
    background-color: var(--cariad-primary-purple) !important; 
    color: var(--cariad-text-on-color) !important; 
    --bs-badge-color: var(--cariad-text-on-color) !important;
    border: none !important;
}
.badge.badge-level-2 { 
    background-color: var(--cariad-primary-green) !important; 
    color: var(--cariad-dark-purple) !important; 
    --bs-badge-color: var(--cariad-dark-purple) !important;
    border: none !important;
}
.badge.badge-level-3 { 
    background-color: var(--cariad-primary-yellow) !important; 
    color: var(--cariad-dark-purple) !important; 
    --bs-badge-color: var(--cariad-dark-purple) !important;
    border: none !important;
}
.badge.badge-level-4 { 
    background-color: var(--cariad-primary-red) !important; 
    color: var(--cariad-text-on-color) !important; 
    --bs-badge-color: var(--cariad-text-on-color) !important;
    border: none !important;
}

/* Level-based styling for accordion items - CARIAD CI Colors */
.level-1 { border-left: 4px solid var(--cariad-primary-purple); }
.level-2 { border-left: 4px solid var(--cariad-primary-green); }
.level-3 { border-left: 4px solid var(--cariad-primary-yellow); }
.level-4 { border-left: 4px solid var(--cariad-primary-red); }

/* Bootstrap Button Overrides - CARIAD CI Colors */
.btn-primary {
    background-color: var(--cariad-primary-purple) !important;
    border-color: var(--cariad-primary-purple) !important;
    color: var(--cariad-text-on-color) !important;
}

.btn-primary:hover {
    background-color: var(--cariad-purple-2) !important;
    border-color: var(--cariad-purple-2) !important;
}

.btn-success {
    background-color: var(--cariad-primary-green) !important;
    border-color: var(--cariad-primary-green) !important;
    color: var(--cariad-dark-purple) !important;
}

.btn-success:hover {
    background-color: var(--cariad-green-2) !important;
    border-color: var(--cariad-green-2) !important;
}

.btn-warning {
    background-color: var(--cariad-primary-yellow) !important;
    border-color: var(--cariad-primary-yellow) !important;
    color: var(--cariad-dark-purple) !important;
}

.btn-warning:hover {
    background-color: var(--cariad-yellow-2) !important;
    border-color: var(--cariad-yellow-2) !important;
}

.btn-danger {
    background-color: var(--cariad-primary-red) !important;
    border-color: var(--cariad-primary-red) !important;
    color: var(--cariad-text-on-color) !important;
}

.btn-danger:hover {
    background-color: var(--cariad-red-2) !important;
    border-color: var(--cariad-red-2) !important;
}

.btn-info {
    background-color: var(--cariad-primary-purple) !important;
    border-color: var(--cariad-primary-purple) !important;
    color: var(--cariad-text-on-color) !important;
}

.btn-info:hover {
    background-color: var(--cariad-purple-2) !important;
    border-color: var(--cariad-purple-2) !important;
}

/* Text colors using Cariad palette */
.text-primary {
    color: var(--cariad-primary-purple) !important;
}

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

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

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

/* Spinner colors */
.spinner-border.text-primary {
    color: var(--cariad-primary-purple) !important;
}

.spinner-border.text-success {
    color: var(--cariad-primary-green) !important;
}

.spinner-border.text-warning {
    color: var(--cariad-primary-yellow) !important;
}

.spinner-border.text-danger {
    color: var(--cariad-primary-red) !important;
}