/* ========================================
   COMPREHENSIVE FIXES FOR LAYOUT AND COLORS
   ======================================== */

/* ===== 1. HEADER FIXES ===== */
/* Fix header height - logo cutting off at bottom */
.main-header {
    min-height: 60px !important; /* Original: 85px - reduced to 60px */
    height: 60px !important; /* Original: 85px - reduced to 60px */
    padding-bottom: 15px !important;
    border-bottom: 3px solid #f4f4f4 !important;
    margin-bottom: 20px !important;
}

.main-header .navbar {
    min-height: 60px !important; /* Original: 85px - reduced to 60px */
    height: 60px !important; /* Original: 85px - reduced to 60px */
}

.main-header .logo {
    height: 60px !important; /* Original: 85px - reduced to 60px */
    line-height: 60px !important; /* Original: 85px - reduced to 60px */
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
}

.main-header .logo img {
    max-height: 65px !important;
    width: auto !important;
}

/* Fix user name positioning in header */
.main-header .navbar-custom-menu {
    height: 60px !important; /* Original: 85px - reduced to 60px */
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar .nav > li > a {
    height: 60px !important; /* Original: 85px - reduced to 60px */
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* ===== 2. CONTENT SPACING =====  */
/* Push content down to avoid overlap with header */
.content {
    padding-top: 85px !important; /* Original: 110px - reduced by 25px to match header reduction */
    margin-top: 0 !important;
}

/* ===== 3. INFO BOX POSITIONING ===== */
/* Match Import Assignments spacing - buttons start right after content padding */
.tabLine {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Match Import Assignments - nav-tabs spacing */
.content .nav.nav-tabs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.content .nav.nav-tabs .row {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* MATCH DASHBOARD BUTTON SIZE - SMALL NOT HUGE */
.info-box {
    min-height: 48px !important;
    height: 48px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    opacity: 0.7 !important;
}

/* SELECTED/CLICKED STATE */
.info-box.active,
.info-box:active {
    opacity: 1 !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    /* DO NOT transform the info-box itself - only visual effects */
}

/* HOVER STATE */
.info-box:hover {
    opacity: 0.9 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    /* DO NOT transform on hover - only visual effects */
}

.info-box-icon {
    height: 36px !important;
    width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.info-box-icon i {
    font-size: 22px !important;
    color: #fff !important;
    margin-right: 10px !important;
    transition: color 0.3s ease !important;
}

.info-box-content {
    flex: 1 !important;
    padding: 0 !important;
    margin-left: 0 !important;
}

.info-box-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    transition: color 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.42857143 !important;
}

.numberCircle {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    /* Static - does not move with parent transforms */
}

/* ===== 4. MATCH OVERVIEW COLORS TO DASHBOARD EXACTLY ===== */
/* At Location - EXACT MATCH to Dashboard Screening Report button */
.peacock_green {
    background: -moz-linear-gradient(left, #28cfb1 0%, #09aa78 100%) !important;
    background: -webkit-linear-gradient(left, #28cfb1 0%,#09aa78 100%) !important;
    background: linear-gradient(to right, #28cfb1 0%,#09aa78 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28cfb1', endColorstr='#09aa78',GradientType=1 ) !important;
    border-color: #09aa78 !important;
    color: #fff !important;
}

.peacock_green:hover,
.peacock_green:focus,
.peacock_green:active {
    background: -moz-linear-gradient(left, #20b89a 0%, #078a65 100%) !important;
    background: -webkit-linear-gradient(left, #20b89a 0%,#078a65 100%) !important;
    background: linear-gradient(to right, #20b89a 0%,#078a65 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20b89a', endColorstr='#078a65',GradientType=1 ) !important;
    border-color: #078a65 !important;
    color: #fff !important;
}

/* In Route - EXACT MATCH to Dashboard Performance Report button */
.blue {
    background: -moz-linear-gradient(left, #5daeec 0%, #0b78ab 100%) !important;
    background: -webkit-linear-gradient(left, #5daeec 0%,#0b78ab 100%) !important;
    background: linear-gradient(to right, #5daeec 0%,#0b78ab 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5daeec', endColorstr='#0b78ab',GradientType=1 ) !important;
    border-color: #5CADEC !important;
    color: #fff !important;
}

.blue:hover,
.blue:focus,
.blue:active {
    background: -moz-linear-gradient(left, #4ba0dc 0%, #0a6b8a 100%) !important;
    background: -webkit-linear-gradient(left, #4ba0dc 0%,#0a6b8a 100%) !important;
    background: linear-gradient(to right, #4ba0dc 0%,#0a6b8a 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ba0dc', endColorstr='#0a6b8a',GradientType=1 ) !important;
    border-color: #0A78AB !important;
    color: #fff !important;
}

/* Available - EXACT MATCH to Dashboard Deviation Report button */
.purple {
    background: -moz-linear-gradient(left, #f1c40f 0%, #f39c12 100%) !important;
    background: -webkit-linear-gradient(left, #f1c40f 0%,#f39c12 100%) !important;
    background: linear-gradient(to right, #f1c40f 0%,#f39c12 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c40f', endColorstr='#f39c12',GradientType=1 ) !important;
    border-color: #f1c40f !important;
    color: #fff !important;
}

.purple:hover,
.purple:focus,
.purple:active {
    background: -moz-linear-gradient(left, #d4a809 0%, #d68910 100%) !important;
    background: -webkit-linear-gradient(left, #d4a809 0%,#d68910 100%) !important;
    background: linear-gradient(to right, #d4a809 0%,#d68910 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4a809', endColorstr='#d68910',GradientType=1 ) !important;
    border-color: #d4a809 !important;
    color: #fff !important;
}

/* Green (Completed) - Screening Details */
.green {
    background: -moz-linear-gradient(left, #5cb85c 0%, #449d44 100%) !important;
    background: -webkit-linear-gradient(left, #5cb85c 0%,#449d44 100%) !important;
    background: linear-gradient(to right, #5cb85c 0%,#449d44 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb85c', endColorstr='#449d44',GradientType=1 ) !important;
    border-color: #5cb85c !important;
    color: #fff !important;
}

.green:hover,
.green:focus,
.green:active {
    background: -moz-linear-gradient(left, #4c9f4c 0%, #3a8a3a 100%) !important;
    background: -webkit-linear-gradient(left, #4c9f4c 0%,#3a8a3a 100%) !important;
    background: linear-gradient(to right, #4c9f4c 0%,#3a8a3a 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c9f4c', endColorstr='#3a8a3a',GradientType=1 ) !important;
    border-color: #449d44 !important;
    color: #fff !important;
}

/* Red (Rejected) - Assignment Approval */
.red {
    background: -moz-linear-gradient(left, #d9534f 0%, #c9302c 100%) !important;
    background: -webkit-linear-gradient(left, #d9534f 0%,#c9302c 100%) !important;
    background: linear-gradient(to right, #d9534f 0%,#c9302c 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9534f', endColorstr='#c9302c',GradientType=1 ) !important;
    border-color: #d9534f !important;
    color: #fff !important;
}

.red:hover,
.red:focus,
.red:active {
    background: -moz-linear-gradient(left, #c8423e 0%, #b32b27 100%) !important;
    background: -webkit-linear-gradient(left, #c8423e 0%,#b32b27 100%) !important;
    background: linear-gradient(to right, #c8423e 0%,#b32b27 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8423e', endColorstr='#b32b27',GradientType=1 ) !important;
    border-color: #c9302c !important;
    color: #fff !important;
}

/* Atech AI - Assignment Approval */
.aitech_ai {
    background: -moz-linear-gradient(left, #39cccc 0%, #2bb5b5 100%) !important;
    background: -webkit-linear-gradient(left, #39cccc 0%,#2bb5b5 100%) !important;
    background: linear-gradient(to right, #39cccc 0%,#2bb5b5 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39cccc', endColorstr='#2bb5b5',GradientType=1 ) !important;
    border-color: #39cccc !important;
    color: #fff !important;
}

.aitech_ai:hover,
.aitech_ai:focus,
.aitech_ai:active {
    background: -moz-linear-gradient(left, #32b8b8 0%, #26a3a3 100%) !important;
    background: -webkit-linear-gradient(left, #32b8b8 0%,#26a3a3 100%) !important;
    background: linear-gradient(to right, #32b8b8 0%,#26a3a3 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b8b8', endColorstr='#26a3a3',GradientType=1 ) !important;
    border-color: #2bb5b5 !important;
    color: #fff !important;
}

/* Yellow (Deviation) - Screening Details */
.yellow {
    background: -moz-linear-gradient(left, #f1c40f 0%, #f39c12 100%) !important;
    background: -webkit-linear-gradient(left, #f1c40f 0%,#f39c12 100%) !important;
    background: linear-gradient(to right, #f1c40f 0%,#f39c12 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c40f', endColorstr='#f39c12',GradientType=1 ) !important;
    border-color: #f1c40f !important;
    color: #fff !important;
}

.yellow:hover,
.yellow:focus,
.yellow:active {
    background: -moz-linear-gradient(left, #d4a809 0%, #d68910 100%) !important;
    background: -webkit-linear-gradient(left, #d4a809 0%,#d68910 100%) !important;
    background: linear-gradient(to right, #d4a809 0%,#d68910 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4a809', endColorstr='#d68910',GradientType=1 ) !important;
    border-color: #d4a809 !important;
    color: #fff !important;
}

/* Incident - Screening Details */
.incident {
    background: -moz-linear-gradient(left, #d9534f 0%, #c9302c 100%) !important;
    background: -webkit-linear-gradient(left, #d9534f 0%,#c9302c 100%) !important;
    background: linear-gradient(to right, #d9534f 0%,#c9302c 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9534f', endColorstr='#c9302c',GradientType=1 ) !important;
    border-color: #d9534f !important;
    color: #fff !important;
}

.incident:hover,
.incident:focus,
.incident:active {
    background: -moz-linear-gradient(left, #c8423e 0%, #b32b27 100%) !important;
    background: -webkit-linear-gradient(left, #c8423e 0%,#b32b27 100%) !important;
    background: linear-gradient(to right, #c8423e 0%,#b32b27 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8423e', endColorstr='#b32b27',GradientType=1 ) !important;
    border-color: #c9302c !important;
    color: #fff !important;
}

/* ===== 5. BUTTON SIZING CONSISTENCY ===== */
/* Ensure all buttons match Dashboard sizing */
.btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.42857143 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.btn-md {
    padding: 10px 16px !important;
    font-size: 14px !important;
}

.btn-sm {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.btn-lg {
    padding: 12px 20px !important;
    font-size: 16px !important;
}

/* ===== 6. SIDEBAR ADJUSTMENT FOR NEW HEADER ===== */
.main-sidebar {
    padding-top: 60px !important; /* Original: 85px - reduced to 60px */
}

@media (max-width: 767px) {
    .main-sidebar {
        padding-top: 60px !important; /* Original: 85px - reduced to 60px */
    }
    
    .content {
        padding-top: 95px !important;
    }
}

/* ===== 7. ENSURE FIXED POSITIONING WORKS ===== */
.fixed .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

.fixed .content-wrapper {
    padding-top: 60px !important; /* Original: 85px - reduced to 60px */
}

/* ===== 8. MAP PAGE SPECIFIC FIXES ===== */
/* Map positioned slightly under buttons with proper spacing */
#map {
    min-height: 600px !important;
    margin-top: 5px !important;
}

.mapAgentList {
    top: 110px !important;
}

/* ===== 9. USER PANEL IN HEADER ===== */
.navbar-custom-menu .user-menu {
    height: 60px !important; /* Original: 85px - reduced to 60px */
}

.navbar-custom-menu .user-menu > a {
    height: 60px !important; /* Original: 85px - reduced to 60px */
    line-height: 60px !important; /* Original: 85px - reduced to 60px */
}

/* ===== 10. RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 991px) {
    .main-header {
        min-height: 100px !important;
        height: 100px !important;
    }
    
    .main-header .navbar {
        min-height: 50px !important;
        height: 50px !important;
    }
    
    .main-header .logo {
        height: 50px !important;
        line-height: 50px !important;
    }
    
    .content {
        padding-top: 120px !important;
    }
}

/* ===== 11. BOX TOOLS (COUNT BADGES) POSITIONING ===== */
/* Static positioning - CENTERED vertically, does NOT move with hover/active states */
/* Override any conflicting styles from component CSS (especially map.component.css top: -12px) */
.info-box {
    position: relative !important;
}

.info-box .box-tools {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    /* Override component CSS that might set top: -12px */
}

/* Ensure numberCircle stays static - CENTERED, never moves */
.info-box .box-tools .numberCircle {
    position: relative !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* ===== 12. FONT AND TEXT CONSISTENCY ===== */
.info-box-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* ===== 13. REMOVE ANY CONFLICTING STYLES ===== */
.info-box.peacock_green .info-box-text,
.info-box.blue .info-box-text,
.info-box.purple .info-box-text,
.info-box.green .info-box-text,
.info-box.yellow .info-box-text,
.info-box.incident .info-box-text,
.info-box.red .info-box-text,
.info-box.aitech_ai .info-box-text {
    color: #fff !important;
}

.info-box.peacock_green .info-box-icon,
.info-box.blue .info-box-icon,
.info-box.purple .info-box-icon,
.info-box.green .info-box-icon,
.info-box.yellow .info-box-icon,
.info-box.incident .info-box-icon,
.info-box.red .info-box-icon,
.info-box.aitech_ai .info-box-icon {
    color: #fff !important;
}

/* Ensure button text and icons MATCH on ALL states */
/* Icons MUST match text color exactly - including dark when selected/hovered */

/* Default state - white text and icons */
.info-box .info-box-text,
.info-box .info-box-content .info-box-text,
.info-box .info-box-icon i {
    color: #fff !important;
}

/* HOVER STATE - Text becomes dark (#000), icons MUST match */
.info-box:hover .info-box-content .info-box-text,
.info-box:hover .info-box-icon i {
    color: #000 !important;
    opacity: 0.5 !important;
}

/* SELECTED STATE - When .info-box-text-selected class is applied, text is dark, icons MUST match */
.info-box-text-selected,
.info-box .info-box-text-selected {
    color: #000 !important;
    opacity: 0.5 !important;
}

/* When button is active AND text has selected class - icons match dark text */
.info-box.active .info-box-icon i {
    color: #000 !important;
    opacity: 0.5 !important;
}

.info-box.active .info-box-text,
.info-box.active .info-box-content .info-box-text {
    color: #000 !important;
    opacity: 0.5 !important;
}

/* All button color variants - HOVER state (dark text and icons) */
.info-box.peacock_green:hover .info-box-content .info-box-text,
.info-box.peacock_green:hover .info-box-icon i,
.info-box.blue:hover .info-box-content .info-box-text,
.info-box.blue:hover .info-box-icon i,
.info-box.purple:hover .info-box-content .info-box-text,
.info-box.purple:hover .info-box-icon i,
.info-box.green:hover .info-box-content .info-box-text,
.info-box.green:hover .info-box-icon i,
.info-box.yellow:hover .info-box-content .info-box-text,
.info-box.yellow:hover .info-box-icon i,
.info-box.red:hover .info-box-content .info-box-text,
.info-box.red:hover .info-box-icon i,
.info-box.aitech_ai:hover .info-box-content .info-box-text,
.info-box.aitech_ai:hover .info-box-icon i {
    color: #000 !important;
    opacity: 0.5 !important;
}

/* All button color variants - ACTIVE/SELECTED state (dark text and icons) */
.info-box.peacock_green.active .info-box-text,
.info-box.peacock_green.active .info-box-content .info-box-text,
.info-box.peacock_green.active .info-box-icon i,
.info-box.blue.active .info-box-text,
.info-box.blue.active .info-box-content .info-box-text,
.info-box.blue.active .info-box-icon i,
.info-box.purple.active .info-box-text,
.info-box.purple.active .info-box-content .info-box-text,
.info-box.purple.active .info-box-icon i,
.info-box.green.active .info-box-text,
.info-box.green.active .info-box-content .info-box-text,
.info-box.green.active .info-box-icon i,
.info-box.yellow.active .info-box-text,
.info-box.yellow.active .info-box-content .info-box-text,
.info-box.yellow.active .info-box-icon i,
.info-box.red.active .info-box-text,
.info-box.red.active .info-box-content .info-box-text,
.info-box.red.active .info-box-icon i,
.info-box.aitech_ai.active .info-box-text,
.info-box.aitech_ai.active .info-box-content .info-box-text,
.info-box.aitech_ai.active .info-box-icon i {
    color: #000 !important;
    opacity: 0.5 !important;
}

/* ===== 14. BUTTON OPACITY - DIM UNSELECTED BUTTONS ===== */
/* Make unselected buttons dimmer so selected ones stand out */
.info-box:not(.active) {
    opacity: 0.4 !important;
}

.info-box.active {
    opacity: 1 !important;
}

/* ===== 15. TEAM BADGES - RECTANGULAR SHAPE ===== */
/* Team badges in right pane - rectangular instead of oval */
.team-badge {
    border-radius: 4px !important;
}

/* Team name circle - show first letter only and make rectangular */
.mapAgentList .teams {
    text-align: center;
    line-height: 25px;
    color: white;
    font-weight: bold;
}

/* Make team badge circles rectangular */
.mapAgentList [ngStyle*="border-radius"] {
    border-radius: 4px !important;
}

/* Team circle - center text and show first letter */
.mapAgentList .teams {
    text-align: center !important;
    line-height: 25px !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Incident circle - align like other circles */
.mapAgentList .numberCircleStatus.red {
    vertical-align: super !important;
    display: inline-block !important;
}

/* Team name circle on right - center alignment */
.mapAgentList .numberCircleStatus.teamName {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
}

/* Ensure all circles stay on one line */
.map-agent-msg .d-flex > div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.map-agent-msg .notiIcons {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Ensure avatar images are in color (not grayscale) */
.avatar,
.userimg,
img[src*="user"],
img[src*="avatar"] {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* ===== TONE DOWN COLORS IN RIGHT PANE ===== */
/* Reduce saturation and opacity of colorful elements */
.mapAgentList .team-logo {
    opacity: 0.7 !important;
    filter: saturate(0.7) !important;
    -webkit-filter: saturate(0.7) !important;
}

.mapAgentList .numberCircleStatus.voilet {
    opacity: 0.75 !important;
    filter: saturate(0.8) brightness(0.9) !important;
    -webkit-filter: saturate(0.8) brightness(0.9) !important;
}

.mapAgentList .numberCircleStatus.red {
    opacity: 0.8 !important;
    filter: saturate(0.8) brightness(0.95) !important;
    -webkit-filter: saturate(0.8) brightness(0.95) !important;
}

.mapAgentList .numberCircleStatus.teamName {
    opacity: 0.7 !important;
    filter: saturate(0.7) !important;
    -webkit-filter: saturate(0.7) !important;
}

.mapAgentList .agent-status {
    opacity: 0.8 !important;
}

/* Tone down status colors on team logos */
.mapAgentList [ngStyle*="background"] {
    opacity: 0.7 !important;
    filter: saturate(0.7) brightness(0.95) !important;
    -webkit-filter: saturate(0.7) brightness(0.95) !important;
}

/* Reduce intensity of badge colors */
.mapAgentList .badge2 {
    opacity: 0.85 !important;
}

/* ===== AGENT ASSIGNMENT MODAL - ROUNDED EDGES ===== */
/* Override AdminLTE's border-radius: 0 for this specific modal */
#AgentAssignmentInformationModal.modal .modal-dialog {
    border-radius: 12px !important;
    overflow: visible !important;
}

#AgentAssignmentInformationModal.modal .modal-content,
#AgentAssignmentInformationModal.modal .modal-content.agent-assignment-modal {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    overflow: hidden !important;
}

#AgentAssignmentInformationModal.modal .modal-header,
#AgentAssignmentInformationModal.modal .modal-header.agent-assignment-modal-header {
    border-radius: 12px 12px 0 0 !important;
    -webkit-border-radius: 12px 12px 0 0 !important;
    -moz-border-radius: 12px 12px 0 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#AgentAssignmentInformationModal.modal .modal-body {
    border-radius: 0 0 12px 12px !important;
    -webkit-border-radius: 0 0 12px 12px !important;
    -moz-border-radius: 0 0 12px 12px !important;
}

/* Close button - override Bootstrap, match theme, top right */
#AgentAssignmentInformationModal .agent-assignment-modal-header .close,
#AgentAssignmentInformationModal .agent-assignment-modal-header .close.agent-assignment-close {
    float: none !important;
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
    opacity: 1 !important;
    font-size: 18px !important;
    text-shadow: none !important;
    z-index: 10 !important;
}

#AgentAssignmentInformationModal .agent-assignment-modal-header .close:hover,
#AgentAssignmentInformationModal .agent-assignment-modal-header .close.agent-assignment-close:hover {
    background-color: #fff5f5 !important;
    background: #fff5f5 !important;
    border-color: #c85a5a !important;
    color: #c85a5a !important;
    opacity: 1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

#AgentAssignmentInformationModal .agent-assignment-modal-header .close i,
#AgentAssignmentInformationModal .agent-assignment-modal-header .close.agent-assignment-close i {
    font-size: 14px !important;
    color: #666 !important;
}

#AgentAssignmentInformationModal .agent-assignment-modal-header .close:hover i,
#AgentAssignmentInformationModal .agent-assignment-modal-header .close.agent-assignment-close:hover i {
    color: #c85a5a !important;
}

/* ===== AI ROUTING RECOMMENDATIONS MODAL - THEME MATCHING ===== */
/* Modal size - smaller for generate view, larger for recommendations */
#aiRoutingRecommendationsModal.modal .modal-dialog.ai-routing-modal-dialog {
    width: 600px !important;
    max-width: 90% !important;
    border-radius: 12px !important;
    overflow: visible !important;
    margin: 30px auto !important;
}

/* Large size when recommendations are shown */
#aiRoutingRecommendationsModal.modal .modal-dialog.ai-routing-modal-dialog.modal-lg {
    width: 900px !important;
    max-width: 95% !important;
}

@media (max-width: 768px) {
    #aiRoutingRecommendationsModal.modal .modal-dialog.ai-routing-modal-dialog {
        width: 95% !important;
        margin: 15px auto !important;
    }
    
    #aiRoutingRecommendationsModal.modal .modal-dialog.ai-routing-modal-dialog.modal-lg {
        width: 95% !important;
    }
}

#aiRoutingRecommendationsModal.modal .modal-content,
#aiRoutingRecommendationsModal.modal .modal-content.ai-routing-modal,
#aiRecommendationsModal.modal .modal-content {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

/* Header removed - no styles needed */

#aiRoutingRecommendationsModal.modal .modal-header .modal-title {
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

#aiRoutingRecommendationsModal.modal .modal-header .modal-title i {
    margin-right: 8px;
    color: #5cb85c;
}

/* Close button removed - no styles needed */

/* Modal body - rounded top corners since no header */
#aiRoutingRecommendationsModal.modal .modal-body,
#aiRoutingRecommendationsModal.modal .modal-body.ai-routing-modal-body,
#aiRecommendationsModal.modal .modal-body {
    border-radius: 12px 12px 0 0 !important;
    -webkit-border-radius: 12px 12px 0 0 !important;
    -moz-border-radius: 12px 12px 0 0 !important;
    padding: 15px 20px !important;
    position: relative !important;
}

/* Generate section - reduced padding */
.ai-routing-generate-section,
#aiRecommendationsModal .ai-routing-generate-section {
    padding: 10px 10px !important;
}

.ai-routing-generate-section h4 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
}

.ai-routing-generate-section p {
    font-size: 14px !important;
    margin-bottom: 15px !important;
}

.ai-routing-generate-section ul {
    margin: 15px 0 !important;
}

.ai-routing-generate-section ul li {
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.ai-routing-generate-section .fa-robot {
    font-size: 36px !important;
    margin-bottom: 15px !important;
}

/* Modal footer - reduced padding and make buttons smaller */
.ai-routing-modal-footer,
#aiRecommendationsModal.modal .modal-footer {
    padding: 12px 20px !important;
    border-top: 1px solid #e5e5e5 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    border-radius: 0 0 12px 12px !important;
}

/* Generate Recommendations button - match theme, smaller and elegant */
.ai-generate-btn,
#aiRecommendationsModal .ai-generate-btn {
    background: -moz-linear-gradient(left, #5cb85c 0%, #449d44 100%) !important;
    background: -webkit-linear-gradient(left, #5cb85c 0%,#449d44 100%) !important;
    background: linear-gradient(to right, #5cb85c 0%,#449d44 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb85c', endColorstr='#449d44',GradientType=1 ) !important;
    border-color: #5cb85c !important;
    color: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.ai-generate-btn:hover:not(:disabled) {
    background: -moz-linear-gradient(left, #4c9f4c 0%, #3a8a3a 100%) !important;
    background: -webkit-linear-gradient(left, #4c9f4c 0%,#3a8a3a 100%) !important;
    background: linear-gradient(to right, #4c9f4c 0%,#3a8a3a 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c9f4c', endColorstr='#3a8a3a',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.ai-generate-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Footer buttons - match theme with gradients, smaller and elegant */
.ai-footer-btn {
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.ai-footer-btn i {
    font-size: 12px !important;
    margin-right: 4px !important;
}

/* Recommendations table - larger when recommendations shown */
#aiRoutingRecommendationsModal .table-responsive,
#aiRecommendationsModal .table-responsive {
    margin: 0 !important;
    max-height: 500px !important;
    overflow-y: auto !important;
}

#aiRoutingRecommendationsModal .table,
#aiRecommendationsModal .table {
    margin-bottom: 15px !important;
    font-size: 13px !important;
}

#aiRoutingRecommendationsModal .table thead th,
#aiRecommendationsModal .table thead th {
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background-color: #f4f4f4 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#aiRoutingRecommendationsModal .table tbody td,
#aiRecommendationsModal .table tbody td {
    padding: 8px 10px !important;
    font-size: 13px !important;
}

#aiRoutingRecommendationsModal .alert,
#aiRecommendationsModal .alert {
    padding: 10px 15px !important;
    font-size: 13px !important;
    margin-bottom: 15px !important;
}

#aiRoutingRecommendationsModal .mt-3,
#aiRecommendationsModal .mt-3 {
    margin-top: 15px !important;
    font-size: 13px !important;
}

/* Close button - gray gradient */
.ai-close-btn {
    background: -moz-linear-gradient(left, #95a5a6 0%, #7f8c8d 100%) !important;
    background: -webkit-linear-gradient(left, #95a5a6 0%,#7f8c8d 100%) !important;
    background: linear-gradient(to right, #95a5a6 0%,#7f8c8d 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95a5a6', endColorstr='#7f8c8d',GradientType=1 ) !important;
    border-color: #95a5a6 !important;
    color: #fff !important;
}

.ai-close-btn:hover {
    background: -moz-linear-gradient(left, #7f8c8d 0%, #6c7a7b 100%) !important;
    background: -webkit-linear-gradient(left, #7f8c8d 0%,#6c7a7b 100%) !important;
    background: linear-gradient(to right, #7f8c8d 0%,#6c7a7b 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8c8d', endColorstr='#6c7a7b',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* Approve button - green gradient */
.ai-approve-btn {
    background: -moz-linear-gradient(left, #5cb85c 0%, #449d44 100%) !important;
    background: -webkit-linear-gradient(left, #5cb85c 0%,#449d44 100%) !important;
    background: linear-gradient(to right, #5cb85c 0%,#449d44 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb85c', endColorstr='#449d44',GradientType=1 ) !important;
    border-color: #5cb85c !important;
    color: #fff !important;
}

.ai-approve-btn:hover:not(:disabled) {
    background: -moz-linear-gradient(left, #4c9f4c 0%, #3a8a3a 100%) !important;
    background: -webkit-linear-gradient(left, #4c9f4c 0%,#3a8a3a 100%) !important;
    background: linear-gradient(to right, #4c9f4c 0%,#3a8a3a 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c9f4c', endColorstr='#3a8a3a',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.ai-approve-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Modify button - yellow/warning gradient */
.ai-modify-btn {
    background: -moz-linear-gradient(left, #f0ad4e 0%, #ec971f 100%) !important;
    background: -webkit-linear-gradient(left, #f0ad4e 0%,#ec971f 100%) !important;
    background: linear-gradient(to right, #f0ad4e 0%,#ec971f 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0ad4e', endColorstr='#ec971f',GradientType=1 ) !important;
    border-color: #f0ad4e !important;
    color: #fff !important;
}

.ai-modify-btn:hover:not(:disabled) {
    background: -moz-linear-gradient(left, #ec971f 0%, #d58512 100%) !important;
    background: -webkit-linear-gradient(left, #ec971f 0%,#d58512 100%) !important;
    background: linear-gradient(to right, #ec971f 0%,#d58512 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec971f', endColorstr='#d58512',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.ai-modify-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Decline All button - red gradient */
.ai-decline-btn {
    background: -moz-linear-gradient(left, #d9534f 0%, #c9302c 100%) !important;
    background: -webkit-linear-gradient(left, #d9534f 0%,#c9302c 100%) !important;
    background: linear-gradient(to right, #d9534f 0%,#c9302c 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9534f', endColorstr='#c9302c',GradientType=1 ) !important;
    border-color: #d9534f !important;
    color: #fff !important;
}

.ai-decline-btn:hover:not(:disabled) {
    background: -moz-linear-gradient(left, #c9302c 0%, #a02622 100%) !important;
    background: -webkit-linear-gradient(left, #c9302c 0%,#a02622 100%) !important;
    background: linear-gradient(to right, #c9302c 0%,#a02622 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9302c', endColorstr='#a02622',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.ai-decline-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Revert to Original button - info/blue gradient */
.ai-revert-btn {
    background: -moz-linear-gradient(left, #5bc0de 0%, #46b8da 100%) !important;
    background: -webkit-linear-gradient(left, #5bc0de 0%,#46b8da 100%) !important;
    background: linear-gradient(to right, #5bc0de 0%,#46b8da 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc0de', endColorstr='#46b8da',GradientType=1 ) !important;
    border-color: #5bc0de !important;
    color: #fff !important;
}

.ai-revert-btn:hover:not(:disabled) {
    background: -moz-linear-gradient(left, #46b8da 0%, #31b0d5 100%) !important;
    background: -webkit-linear-gradient(left, #46b8da 0%,#31b0d5 100%) !important;
    background: linear-gradient(to right, #46b8da 0%,#31b0d5 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b8da', endColorstr='#31b0d5',GradientType=1 ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.ai-revert-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ========================================
   GLOBAL ADMIN DARK MODE FIXES
   ======================================== */

/* General Panels and Boxes */
.skin-black .panel,
.skin-black .box,
.skin-black .color-palette-box {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Panel Headings - typically colored, but let's ensure text is white if not already */
.skin-black .panel-heading {
    color: #fff !important;
    border-bottom-color: #444 !important;
}

/* Panel Body */
.skin-black .panel-body,
.skin-black .box-body {
    background-color: #222 !important;
    color: #ddd !important;
}

/* Typography Overrides */
.skin-black p[style*="color: #666"],
.skin-black p[style*="color:#666"],
.skin-black span[style*="color: #666"],
.skin-black span[style*="color:#666"],
.skin-black div[style*="color: #666"],
.skin-black div[style*="color:#666"] {
    color: #bbb !important;
}

.skin-black h1, .skin-black h2, .skin-black h3, .skin-black h4, .skin-black h5, .skin-black h6,
.skin-black h1[style*="color"], .skin-black h2[style*="color"], .skin-black h3[style*="color"], 
.skin-black h4[style*="color"], .skin-black h5[style*="color"], .skin-black h6[style*="color"] {
    color: #fff !important;
}

/* Keep primary accent colors for headings if specified */
.skin-black h3[style*="color: #0b78ab"],
.skin-black h3[style*="color:#0b78ab"] {
    color: #5daeec !important;
}

/* Tables in Dark Mode */
.skin-black .table {
    background-color: #222 !important;
    color: #ddd !important;
}

.skin-black .table > thead > tr > th,
.skin-black .table > tbody > tr > th,
.skin-black .table > tfoot > tr > th,
.skin-black .table > thead > tr > td,
.skin-black .table > tbody > tr > td,
.skin-black .table > tfoot > tr > td {
    border-color: #444 !important;
}

.skin-black .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2a2a !important;
}

.skin-black .table-hover > tbody > tr:hover {
    background-color: #333 !important;
}

/* Table headers specifically */
.skin-black th[style*="background: #f5f5f5"],
.skin-black th[style*="background:#f5f5f5"],
.skin-black th[style*="background-color: #f5f5f5"],
.skin-black th[style*="background-color:#f5f5f5"] {
    background-color: #333 !important;
    color: #fff !important;
}

.skin-black th[style*="background: #f9f9f9"],
.skin-black th[style*="background:#f9f9f9"],
.skin-black th[style*="background-color: #f9f9f9"],
.skin-black th[style*="background-color:#f9f9f9"] {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

/* Table cells with explicit backgrounds */
.skin-black td[style*="background"],
.skin-black th[style*="background"] {
    /* Only override if it's a light background */
}

/* Forms and Inputs */
.skin-black .form-control {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

.skin-black .form-control:focus {
    border-color: #0b78ab !important;
    background-color: #2a2a2a !important;
}

.skin-black select.form-control option {
    background-color: #333 !important;
    color: #fff !important;
}

/* General specific background overrides */
.skin-black div[style*="background: #f9f9f9"],
.skin-black div[style*="background:#f9f9f9"],
.skin-black div[style*="background-color: #f9f9f9"],
.skin-black div[style*="background-color:#f9f9f9"] {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}

.skin-black div[style*="background: #f5f5f5"],
.skin-black div[style*="background:#f5f5f5"],
.skin-black div[style*="background-color: #f5f5f5"],
.skin-black div[style*="background-color:#f5f5f5"] {
    background-color: #333 !important;
    border-color: #444 !important;
}

/* Modals */
.skin-black .modal-content {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

.skin-black .modal-header {
    border-bottom-color: #444 !important;
}

.skin-black .modal-footer {
    border-top-color: #444 !important;
}

.skin-black .close {
    color: #fff !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

.skin-black .close:hover {
    color: #fff !important;
    opacity: 1 !important;
}