/* custom.css */
:root {
    --primary: red;
    --fosfor: #CCF505;
    --fosfor-dark: #B3D904;
    --fosfor-dark-more: #657b00;
    /* Optional darker shade for hover effects */
    --darkGray: #7A7A7A;
    --blackGray: #111111;
    --lightGrey: #7A7A7A54;
}

/*################### Pagination ###################*/
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--blackGray);
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.pagination .page-link:focus {
    outline: none;
    /* Remove default blue outline */
    border-color: var(--darkGray) !important;
    box-shadow: 0 0 0 0.1rem var(--darkGray);
    /* Optional: Add a red shadow */
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--blackGray) !important;
    background-color: var(--fosfor) !important;
    border-color: var(--blackGray) !important;
}

.page-link:hover {
    z-index: 2;
    color: #dee2e6;
    text-decoration: none;
    background-color: var(--blackGray) !important;
    border-color: #dee2e6;
}

/*##################################################*/

.form-control:focus {
    border-color: var(--blackGray) !important;
    box-shadow: 0 0 5px rgba(204, 245, 5, 0.5);
}

/* Button Styles */
.btn-fosfor {
    background-color: var(--fosfor) !important;
    border-color: var(--fosfor) !important;
    color: #111111 !important;
    font-weight: bold;
}

.btn-fosfor:hover {
    background-color: var(--fosfor-dark) !important;
    border-color: var(--fosfor-dark) !important;
}

/* Dark Gray Button Styles */
.btn-dark-gray {
    background-color: var(--darkGray) !important;
    border-color: var(--darkGray) !important;
    color: #FFFFFF !important;
    font-weight: bold;
}

.btn-dark-gray:hover {
    background-color: #606060 !important;
    /* Slightly darker gray for hover */
    border-color: #606060 !important;
}

/* Black Gray Button Styles */
.btn-black-gray {
    background-color: var(--blackGray) !important;
    border-color: var(--blackGray) !important;
    color: #FFFFFF !important;
    font-weight: bold;
}

.btn-black-gray:hover {
    background-color: #000000 !important;
    /* Fully black hover effect */
    border-color: #000000 !important;
}

.box-profile-dark-gray {
    color: #111111 !important;
    border-top: 3px solid var(--darkGray)
}

.card-header-dark-gray {
    color: #111111 !important;
    border-top: 3px solid var(--darkGray)
}

/* Customize nav-pills */
.custom-nav-pills .nav-link {
    color: #6c757d;
    /* Default text color */

}

/* Active tab styling */
.custom-nav-pills .nav-link.active {
    background-color: var(--fosfor) !important;
    /* Active tab background */
    color: black;
    /* Active tab text color */
}

.nav-pills .nav-link:not(.active):hover {
    color: #fff;
    /* Text color on hover */

}

/* Hover effect */
.custom-nav-pills .nav-link:hover {
    background-color: var(--darkGray);
    color: var(--darkGray);
    /* Text color on hover */
}

/* Card Styles */
.card.card-outline.card-fosfor {
    border-color: var(--fosfor) !important;
}

.card.card-outline.card-fosfor .card-header {
    color: #111111 !important;
    border-top: 3px solid var(--fosfor);
    /* Optional black border for header */

}

.card.card-outline.card-dark-gray {
    border-color: var(--darkGray) !important;
}

.card.card-outline.card-dark-gray .card-header {
    color: #111111 !important;
    border-top: 3px solid var(--darkGray);
    /* Optional black border for header */
}

.card.card-outline.card-black-gray {
    border-color: var(--blackGray) !important;
}

.card.card-outline.card-black-gray .card-header {
    color: #111111 !important;
    border-top: 3px solid var(--blackGray);
    /* Optional black border for header */

}

.card-header-fosfor {
    background-color: var(--fosfor) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: .75rem 1.25rem;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-top: 3px solid var(--blackGray);
    /* Optional black border for header */

}

/* Form Control Styles */
.form-control-fosfor:focus {
    border-color: var(--fosfor) !important;
    box-shadow: 0 0 5px rgba(204, 245, 5, 0.5) !important;
}

.form-control-dark-gray:focus {
    border-color: var(--darkGray) !important;
    box-shadow: 0 0 5px rgba(122, 122, 122, 0.5) !important;
}

.form-control-black-gray:focus {
    border-color: var(--blackGray) !important;
    box-shadow: 0 0 5px rgba(17, 17, 17, 0.5) !important;
}

/* Background Styles */
.bg-dark-gray {
    background-color: var(--darkGray) !important;
    color: #FFFFFF !important;
}

.bg-black-gray {
    background-color: var(--blackGray) !important;
    color: #FFFFFF !important;
}

.bg-fosfor {
    background-color: var(--fosfor) !important;
    color: var(--blackGray) !important;
}
.bg-light-grey {
    background-color: var(--lightGrey) !important;
    color: var(--blackGray) !important;
}
/* Text Styles */
.text-dark-gray {
    color: var(--darkGray) !important;
}

.text-black-gray {
    color: var(--blackGray) !important;

}

.form-check-input-fosfor {
    border: 2px solid var(--blackGray);
    /* Default border color */
    width: 15px;
    height: 15px;
}

.form-check-input-fosfor:checked {
    accent-color: var(--fosfor) !important;
    border-color: var(--blackGray) !important;
    /* Fosfor border color */

}

/* Custom checkmark color when checked */
.form-check-input-fosfor:checked:focus {
    border-color: var(--blackGray) !important;
    /* Keep fosfor border color when focused */
}

/* Optional: Customize the label color */
.form-check-label {
    margin-left: 4px;
    color: var(--blackGray);
    /* Customize label color if needed */
}

/* Override the default DataTable pagination styles with higher specificity */
table.dataTable .dataTables_paginate .paginate_button {
    color: var(--fosfor) !important;
    /* Set pagination color to fosfor */
    border: 1px solid var(--fosfor) !important;
    /* Set border color to fosfor */
}

table.dataTable .dataTables_paginate .paginate_button:hover {
    color: var(--fosfor) !important;
    /* Set pagination color to fosfor on hover */
    background-color: transparent !important;
}

/* Current page - changes background to fosfor */
table.dataTable .dataTables_paginate .current {
    background-color: var(--fosfor) !important;
    /* Set current page background color to fosfor */
    color: #000 !important;
    /* Black text color */
}

/* Pagination arrows - previous and next buttons */
table.dataTable .dataTables_paginate .previous,
table.dataTable .dataTables_paginate .next {
    color: var(--fosfor) !important;
    /* Change pagination arrow color to fosfor */
}

/* Disabled pagination buttons */
table.dataTable .dataTables_paginate .disabled {
    color: var(--blackGray) !important;
    /* Set disabled pagination button color */
    pointer-events: none;
    background-color: transparent !important;
}


/* Change Sidebar Background Color to Dark Gray */
.main-sidebar {
    background-color: #333333 !important;
    /* Dark Gray */
}

/* Change the Menu Item Text Color (Default State) */
.nav-sidebar .nav-link {
    color: white !important;
}

/* Change the Menu Item Text Color When Hovered */
.nav-sidebar .nav-link:hover {
    color: white !important;
    /* White color on hover */
}

/* Active Menu Item Background and Text Color */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--fosfor) !important;
    /* Fosfor color */
    color: var(--blackGray) !important;
    /* Dark Gray */
}

/* Change the menu Icon Color to white by default */
.nav-sidebar .nav-link i {
    color: white !important;
    /* White icon color */
}


/* Change Icon Color to Black When Menu is Active */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active i,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active i {
    color: black !important;
    /* Black icon color when active */
}

/* Optional: Change Submenu Item Color When Active */
.nav-treeview .nav-link.active {
    color: var(--blackGray) !important;
    /* Dark Gray */
}

/* Change Icon Color to Black When Menu is Active */
.nav-treeview .nav-link.active .nav-icon {
    color: var(--blackGray) !important;
    /* Dark Gray */
}



.buttons-copy,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print,
.buttons-colvis {
    background-color: var(--darkGray) !important;
    border-color: var(--darkGray) !important;
    color: #FFFFFF !important;
    font-weight: bold;
}

.buttons-copy:hover,
.buttons-csv:hover,
.buttons-excel:hover,
.buttons-pdf:hover,
.buttons-print:hover,
.buttons-colvis:hover {
    background-color: #606060 !important;
    /* Slightly darker gray for hover */
    border-color: #606060 !important;
}


.custom-control-input:checked~.custom-control-label::after {
    background-color: var(--fosfor-dark-more) !important;
    border-color: var(--fosfor-dark-more) !important;
}

.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--fosfor) !important;
    border-color: var(--fosfor-dark-more) !important;
}

/* Focus style for the Select2 container */
.select2-container--bootstrap4.select2-container--focus .select2-selection--single {
    border-color: var(--blackGray) !important;
    /* Custom border color */
    box-shadow: 0 0 5px rgba(204, 245, 5, 0.5);
    /* Custom shadow */
    outline: none;
    /* Remove the default outline */
}

/* Ensure the default state of the select box is styled */
.select2-container--bootstrap4 .select2-selection--single {
    border: 1px solid #ced4da;
    /* Default border */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Style for highlighted option in Select2 dropdown */
.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: #e0e0e0 !important;
    /* Light gray background */
    color: #000 !important;
    /* Ensure readable text */
    cursor: pointer;
    /* Pointer cursor for better UX */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition */
}

/* Style for non-highlighted options (optional for consistency) */
.select2-container--bootstrap4 .select2-results__option {
    background-color: #fff;
    /* White background for unselected items */
    color: #000;
    /* Black text for readability */
}

.badge-fosfor {
    background-color: var(--fosfor) !important;

}


/* Change the hover background color */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fosfor) !important;
    /* Fosfor (LimeGreen) */
    color: var(--blackGray) !important;
}

/* Change the color of selected items and make them rounded */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fosfor) !important;
    color: var(--blackGray) !important;
    border: 2px solid var(--fosfor-dark-more) !important;
    border-radius: 5px !important;
    /* Rounded corners */
}

/* Make the dropdown text black */
.select2-container--default .select2-results__option {
    color: var(--blackGray) !important;
}