/* Custom Color Scheme for Call Center Scheduling System */

/* Color Variables */
:root {
    --custom-red: rgb(224, 8, 0);
    --custom-white: #ffffff;
    --custom-black: #000000;
    --custom-grey: #3F3F3F;
    --gradient-light-green: #47CB6C;
    --gradient-dark-green: #16363A;
    --gradient-burgundy: #7C0124;
    --gradient-red: rgb(224, 8, 0);
}

/* Page Heading Gradient Underline */
.border-bottom {
    border-bottom: 8px solid transparent !important;
    background: linear-gradient(to right, 
        var(--gradient-light-green) 0%, 
        var(--gradient-dark-green) 30%, 
        var(--gradient-burgundy) 50%, 
        rgb(224, 8, 0) 80%, 
        rgb(224, 8, 0) 100%) bottom/100% 8px no-repeat !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.h2, h2 {
    color: var(--custom-black) !important;
}

.h1, h1 {
    color: var(--custom-black) !important;
}

/* Red Items and Backgrounds */
.text-danger, .text-red {
    color: var(--custom-red) !important;
}

.bg-danger {
    background-color: var(--custom-red) !important;
    color: var(--custom-white) !important;
}

.badge.bg-danger {
    background-color: var(--custom-red) !important;
    color: var(--custom-white) !important;
}

.btn-danger {
    background-color: var(--custom-red) !important;
    border-color: var(--custom-red) !important;
    color: var(--custom-white) !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #c00700 !important;
    border-color: #c00700 !important;
    color: var(--custom-white) !important;
}

.btn-outline-danger {
    color: var(--custom-red) !important;
    border-color: var(--custom-red) !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    background-color: var(--custom-red) !important;
    border-color: var(--custom-red) !important;
    color: var(--custom-white) !important;
}

.alert-danger {
    background-color: rgba(224, 8, 0, 0.1) !important;
    border-color: var(--custom-red) !important;
    color: var(--custom-red) !important;
}

/* Black Accent Colors to Grey */
.text-dark, .text-black {
    color: var(--custom-grey) !important;
}

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

.table-dark {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

.table-dark th, .table-dark td {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.table-dark th a {
    color: var(--custom-white) !important;
}

/* All table headers should have white text */
.table th, .table thead th, table th, table thead th {
    color: var(--custom-white) !important;
    background-color: var(--custom-grey) !important;
}

.table th a, .table thead th a, table th a, table thead th a {
    color: var(--custom-white) !important;
}

.table th a:hover, .table thead th a:hover, table th a:hover, table thead th a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-dark {
    background-color: var(--custom-grey) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--custom-white) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.8) !important;
}

.btn-dark {
    background-color: var(--custom-grey) !important;
    border-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
    background-color: #2f2f2f !important;
    border-color: #2f2f2f !important;
    color: var(--custom-white) !important;
}

.btn-outline-dark {
    color: var(--custom-grey) !important;
    border-color: var(--custom-grey) !important;
}

.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    background-color: var(--custom-grey) !important;
    border-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

/* Card Headers with Dark Background */
.card-header {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.card-header h5, .card-header h6, .card-header .card-title {
    color: var(--custom-white) !important;
}

/* Sidebar Navigation */
.sidebar {
    background-color: var(--custom-grey) !important;
}

.sidebar .nav-link {
    color: var(--custom-black) !important;
}

.sidebar .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--custom-black) !important;
}

.sidebar .nav-link.active {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--custom-black) !important;
}

/* Form Controls and Inputs */
.form-control:focus {
    border-color: var(--custom-grey) !important;
    box-shadow: 0 0 0 0.2rem rgba(63, 63, 63, 0.25) !important;
}

.form-select:focus {
    border-color: var(--custom-grey) !important;
    box-shadow: 0 0 0 0.2rem rgba(63, 63, 63, 0.25) !important;
}

/* Links - Black on light backgrounds */
a {
    color: var(--custom-black) !important;
}

a:hover {
    color: var(--custom-grey) !important;
}

/* Links on dark backgrounds - White text (except sidebar) */
.bg-dark a, .table-dark a, .card-header a, .navbar-dark a {
    color: var(--custom-white) !important;
}

.bg-dark a:hover, .table-dark a:hover, .card-header a:hover, .navbar-dark a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Sidebar links should be black */
.sidebar a {
    color: var(--custom-black) !important;
}

.sidebar a:hover {
    color: var(--custom-black) !important;
}

/* Pagination */
.page-link {
    color: var(--custom-black) !important;
}

.page-link:hover {
    color: var(--custom-white) !important;
    background-color: var(--custom-grey) !important;
    border-color: var(--custom-grey) !important;
}

.page-item.active .page-link {
    background-color: var(--custom-grey) !important;
    border-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

/* Progress Bars */
.progress-bar {
    background-color: var(--custom-grey) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    border: 1px solid var(--custom-grey) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

/* Modal Headers */
.modal-header {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
}

.modal-header .modal-title {
    color: var(--custom-white) !important;
}

.modal-header .btn-close {
    filter: invert(1) !important;
}

/* Tabs */
.nav-tabs .nav-link.active {
    background-color: var(--custom-grey) !important;
    color: var(--custom-white) !important;
    border-color: var(--custom-grey) !important;
}

.nav-tabs .nav-link {
    color: var(--custom-black) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--custom-grey) !important;
}

/* Borders */
.border-dark {
    border-color: var(--custom-grey) !important;
}

/* Text Colors */
.text-muted {
    color: #6c757d !important;
}

/* Custom Widget Box Headers */
.widget-box .card-header {
    background: linear-gradient(135deg, var(--custom-grey) 0%, #2f2f2f 100%) !important;
    color: var(--custom-white) !important;
    border-bottom: 2px solid var(--gradient-light-green) !important;
}

/* Performance Badges - Keep existing colors but ensure red uses custom red */
.badge.bg-danger {
    background-color: var(--custom-red) !important;
    color: var(--custom-white) !important;
}

/* Status Indicators */
.status-excellent {
    color: #28a745 !important;
}

.status-warning {
    color: #ffc107 !important;
}

.status-danger {
    color: var(--custom-red) !important;
}

/* Custom Gradient Line Class for Headings */
.gradient-underline {
    position: relative;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.gradient-underline::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, 
        var(--gradient-light-green) 0%, 
        var(--gradient-dark-green) 30%, 
        var(--gradient-burgundy) 50%, 
        rgb(224, 8, 0) 80%, 
        rgb(224, 8, 0) 100%);
}

/* Ensure white text on red backgrounds */
.bg-danger, .badge.bg-danger, .btn-danger {
    color: var(--custom-white) !important;
}

/* Make alert danger text black per request */
.alert-danger, .alert-danger * {
    color: var(--custom-black) !important;
}

/* Table striping with grey accents */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(63, 63, 63, 0.05) !important;
}

/* Hover effects */
.table-hover > tbody > tr:hover > td {
    background-color: rgba(63, 63, 63, 0.1) !important;
}

/* Text color rules for light vs dark backgrounds */
.table tbody td {
    color: var(--custom-black) !important;
}

.table-dark tbody td, .table-dark tbody th {
    color: var(--custom-white) !important;
}

/* Card body text - black on light background */
.card-body {
    color: var(--custom-black) !important;
}

/* Dark card body text - white on dark background */
.bg-dark .card-body, .table-dark .card-body {
    color: var(--custom-white) !important;
}

/* General text color rules */
body {
    color: var(--custom-black) !important;
}

/* Dark background text (except sidebar) */
.bg-dark, .bg-dark *, .table-dark, .table-dark *, .card-header, .card-header *, .navbar-dark, .navbar-dark * {
    color: var(--custom-white) !important;
}

/* Sidebar text should be black */
.sidebar, .sidebar * {
    color: var(--custom-black) !important;
}

/* Exception: User info box should have white text on red background */
.sidebar .user-info, .sidebar .user-info * {
    color: var(--custom-white) !important;
}

/* Light background text */
.bg-light, .bg-light *:not(.btn):not(.btn *):not(table *), .bg-white, .bg-white *:not(.btn):not(.btn *):not(table *), .card-body, .card-body *:not(.btn):not(.btn *):not(table *) {
    color: var(--custom-black) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--custom-grey);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2f2f2f;
}