/**
#############################################
Dark Theme (No Gradients)
#############################################
*/

body.layout-dark,
body.layout-dark:before {
    background: #121212 !important;
}

/* Header */
body.layout-dark .header-container {
    background: #1e1e1e !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Sidebar */
.sidebar-theme {
    background: #181818 !important;
}

.theme-brand {
    background: #181818 !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Cards */
.card {
    background: #1e1e1e !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Active sidebar item */
body.layout-dark #sidebar ul.menu-categories li.menu.active > .dropdown-toggle {
    background: #b22222 !important;
}

/**
 Language Dropdown (Dark Theme)
**/
#language-dropdown {
    background: #1e1e1e url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px 40px 8px 12px !important;
    min-width: 160px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-size: 14px !important;
}

#language-dropdown:focus {
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

#language-dropdown option {
    background: #1e1e1e !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* For Firefox */
#language-dropdown option:checked {
    background: #b22222 !important;
    color: #ffffff !important;
}

/**
 Select2 Dropdown Dark Theme Fix
**/
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    min-height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 42px !important;
    padding-left: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #ffffff transparent !important;
}

/* Dropdown options */
.select2-container--default .select2-results__option {
    background: #1e1e1e !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #b22222 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--selected {
    background: #8b0000 !important;
    color: #ffffff !important;
}

/* Dropdown container */
.select2-container--default .select2-results > .select2-results__options {
    background: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    margin-top: 4px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin: 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

/* Flag styling */
.select2-selection__rendered .flag-width {
    width: 20px !important;
    height: 15px !important;
    margin-right: 8px !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Dropdown option flags */
.select2-results__option .flag-width {
    width: 20px !important;
    height: 15px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Hover states */
.select2-container--default .select2-results__option--selectable:hover {
    background: #2a2a2a !important;
}

/* Disabled states */
.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #9a9a9a !important;
}

/* Scrollbar styling */
.select2-results__options::-webkit-scrollbar {
    width: 8px !important;
}

/**
 Select2 Search Input White Background Fix
**/
.select2-search.select2-search--dropdown {
    background: #1e1e1e !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 8px !important;
    margin: 0 !important;
}

.select2-search__field {
    background: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.select2-search__field:focus {
    background: #141414 !important;
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

.select2-search__field::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}

/**
 Complete Select2 Dark Theme Fix
**/

/* Main dropdown container */
.select2-dropdown.select2-dropdown--below,
.select2-dropdown.select2-dropdown--above {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Search container */
.select2-search.select2-search--dropdown {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    padding: 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Search input field */
.select2-search__field {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    width: calc(100% - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.select2-search__field:focus {
    background: #141414 !important;
    background-color: #141414 !important;
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

/* Results container */
.select2-results {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
}

/* Results options list */
.select2-results__options {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

/* Individual options */
.select2-results__option {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}

/* Hover state */
.select2-results__option--selectable:hover {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Highlighted (keyboard navigation) */
.select2-results__option--highlighted {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* Selected option */
.select2-results__option--selected {
    background: #8b0000 !important;
    background-color: #8b0000 !important;
    color: #ffffff !important;
}

/* Disabled options */
.select2-results__option[aria-disabled="true"] {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    color: #9a9a9a !important;
    opacity: 0.5 !important;
}

/* Flag styling */
.flag-width {
    width: 20px !important;
    height: 15px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* For the selected display */
.select2-selection__rendered .flag-width {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Remove any default browser styling */
.select2-search__field::-webkit-input-placeholder { color: #9a9a9a !important; }
.select2-search__field::-moz-placeholder { color: #9a9a9a !important; opacity: 1 !important; }
.select2-search__field:-ms-input-placeholder { color: #9a9a9a !important; }
.select2-search__field::-ms-input-placeholder { color: #9a9a9a !important; }
.select2-search__field::placeholder { color: #9a9a9a !important; }

/* Remove search input decorations */
.select2-search__field::-webkit-search-decoration,
.select2-search__field::-webkit-search-cancel-button,
.select2-search__field::-webkit-search-results-button,
.select2-search__field::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Also fix the main selection */
.select2-container--default .select2-selection--single {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}


/* Remove any default browser styles */
.select2-search__field::-webkit-search-decoration,
.select2-search__field::-webkit-search-cancel-button,
.select2-search__field::-webkit-search-results-button,
.select2-search__field::-webkit-search-results-decoration {
    display: none !important;
    appearance: none !important;
}

/* For IE/Edge */
.select2-search__field::-ms-clear {
    display: none !important;
}

/* More specific targeting for the search container */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Fix for when dropdown is above */
.select2-container--default.select2-container--open.select2-container--above .select2-search--dropdown {
    border-top: 1px solid #2a2a2a !important;
    border-bottom: none !important;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #141414 !important;
    border-radius: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #2a2a2a !important;
    border-radius: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a !important;
}

/* Make sure the dropdown opens above if needed */
.select2-container--open .select2-dropdown--below {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* For Chrome/Safari - using data attributes for flags */
#language-dropdown {
    background-size: 20px !important;
    padding-left: 40px !important;
    background-position: left 12px center !important;
}

/* Style the dropdown to show flags (optional enhancement) */
#language-dropdown option {
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    padding-left: 40px !important;
    background-size: 20px !important;
}

/* Optional: Add hover effect for better UX */
#language-dropdown:hover {
    border-color: #3a3a3a !important;
}

/**
 Text
**/
body {
    color: #eaeaea !important;
}

.header-container,
.card-header {
    color: #ffffff !important;
}

a {
    color: #ff4d4d !important;
}

a:hover {
    color: #ff7878 !important;
}

/**
 Fix Blue Outline/Shadow on Dashboard Cards
**/

/* Remove blue outline from all cards in dark theme */
body.layout-dark .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #2a2a2a !important;
    outline: none !important;
}

/* Remove focus/hover blue outlines */
body.layout-dark .card:focus,
body.layout-dark .card:hover,
body.layout-dark .card:active {
    outline: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Remove any blue border classes */
body.layout-dark .border-primary,
body.layout-dark .border-info,
body.layout-dark .border-warning,
body.layout-dark .border-danger,
body.layout-dark .border-success {
    border-color: #2a2a2a !important;
}

/* Fix for Bootstrap's shadow classes */
body.layout-dark .shadow,
body.layout-dark .shadow-sm,
body.layout-dark .shadow-lg,
body.layout-dark .shadow-none {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/**
 Remove Ugly Blue Shadows from All Elements
**/
*,
*:before,
*:after {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Specific override for common blue shadow classes */
body.layout-dark .card,
body.layout-dark .header-container,
body.layout-dark .sidebar-theme,
body.layout-dark .theme-brand,
body.layout-dark .dropdown-menu,
body.layout-dark .modal-content,
body.layout-dark .btn,
body.layout-dark .form-control {
    box-shadow: none !important;
}

/* Reapply your desired dark shadows only */
body.layout-dark .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

body.layout-dark .select2-dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/**
 Buttons
**/
button {
    background-color: #b22222 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    transition: background-color 0.2s ease !important;
}

button:hover {
    background-color: #8b0000 !important;
}

/**
#############################################
Additional Dark Theme Fixes
#############################################
*/

/* Fix for form-select elements */
body.layout-dark .form-select,
body.layout-dark select {
    background: #141414 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    min-height: 42px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

body.layout-dark .form-select:focus,
body.layout-dark select:focus {
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

body.layout-dark .form-select option,
body.layout-dark select option {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* Fix for serverSelect and intervalSelect specifically */
body.layout-dark #serverSelect,
body.layout-dark #intervalSelect,
body.layout-dark .col-md-4.form-select {
    background: #141414 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px !important;
    background-color: #141414 !important;
}

/* Fix for DataTables elements */
body.layout-dark .dt-input,
body.layout-dark .dt-length select,
body.layout-dark .dt-search input[type="search"] {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    min-height: 38px !important;
}

body.layout-dark .dt-input:focus,
body.layout-dark .dt-length select:focus,
body.layout-dark .dt-search input[type="search"]:focus {
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

body.layout-dark .dt-length select {
    background: #141414 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px !important;
    background-color: #141414 !important;
    padding-right: 35px !important;
}

/* Fix for DataTables pagination buttons */
body.layout-dark .dt-paging-button {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .dt-paging-button:hover:not(.disabled) {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    border-color: #ff4d4d !important;
}

body.layout-dark .dt-paging-button.current {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
    border-color: #b22222 !important;
}

body.layout-dark .dt-paging-button.disabled {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #9a9a9a !important;
    border-color: #2a2a2a !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Fix for DataTables table styling */
body.layout-dark .dataTable {
    background: transparent !important;
    color: #eaeaea !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.layout-dark .dataTable thead th {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-bottom: 2px solid #2a2a2a !important;
    padding: 12px 10px !important;
    font-weight: 600 !important;
}

body.layout-dark .dataTable tbody td {
    background: transparent !important;
    background-color: transparent !important;
    color: #eaeaea !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 10px !important;
}

body.layout-dark .dataTable tbody tr:hover td {
    background: rgba(42, 42, 42, 0.3) !important;
    background-color: rgba(42, 42, 42, 0.3) !important;
}

body.layout-dark .dataTable tbody tr:nth-child(even) td {
    background: rgba(26, 26, 26, 0.5) !important;
    background-color: rgba(26, 26, 26, 0.5) !important;
}

/* Fix for badges */
body.layout-dark .badge {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

body.layout-dark .badge-danger {
    background: #b22222 !important;
    background-color: #b22222 !important;
}

body.layout-dark .badge-success {
    background: #28a745 !important;
    background-color: #28a745 !important;
}

/* Fix for action buttons */
body.layout-dark .action-container .btn {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .action-container .btn:hover {
    background: #3a3a3a !important;
    background-color: #3a3a3a !important;
    border-color: #ff4d4d !important;
    transform: translateY(-1px) !important;
}

body.layout-dark .action-container .btn-success {
    background: #28a745 !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

body.layout-dark .action-container .btn-success:hover {
    background: #218838 !important;
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

body.layout-dark .action-container .btn-info {
    background: #17a2b8 !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

body.layout-dark .action-container .btn-info:hover {
    background: #138496 !important;
    background-color: #138496 !important;
    border-color: #117a8b !important;
}

/* Fix for progress bars */
body.layout-dark .progress {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    border-radius: 4px !important;
    height: 20px !important;
    overflow: hidden !important;
}

body.layout-dark .progress-bar {
    background: #b22222 !important;
    background-color: #b22222 !important;
}

body.layout-dark .progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 1rem 1rem !important;
}

body.layout-dark .progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite !important;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Fix for table hover blue glow */
body.layout-dark .table-hover tbody tr:hover {
    box-shadow: none !important;
    outline: none !important;
}

/* Fix for DataTables sorting icons */
body.layout-dark .dt-column-order {
    color: #ffffff !important;
    opacity: 0.5 !important;
}

body.layout-dark .dt-orderable-asc:hover .dt-column-order,
body.layout-dark .dt-orderable-desc:hover .dt-column-order {
    opacity: 0.8 !important;
}

/* Fix for card white outline/glow */
body.layout-dark .card {
    outline: none !important;
    border: 1px solid #2a2a2a !important;
}

/* Remove any remaining blue shadows on focus */
body.layout-dark *:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

/* Fix for interval-container label */
body.layout-dark .interval-container label {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Fix for dropdown hover states */
body.layout-dark .form-select:hover,
body.layout-dark select:hover {
    border-color: #3a3a3a !important;
}

/* Remove blue text from DataTables info */
body.layout-dark .dt-info {
    color: #eaeaea !important;
}

/* Fix for search placeholder */
body.layout-dark .dt-search input[type="search"]::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}

/* Fix for DataTables processing spinner */
body.layout-dark .dt-processing .spinner {
    border-color: #b22222 !important;
    border-top-color: transparent !important;
}

/* Fix for responsive table controls */
body.layout-dark .dt-container {
    background: transparent !important;
    color: #eaeaea !important;
}

/* Fix for table border radius */
body.layout-dark .table-responsive {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/**
#############################################
Modal & Form Element Fixes for Dark Theme
#############################################
*/

/* Modal background and content */
body.layout-dark .modal-content {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

body.layout-dark .modal-header {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
}

body.layout-dark .modal-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Modal close button */
body.layout-dark .btn-close {
    filter: invert(1) brightness(2) !important;
    opacity: 0.7 !important;
}

body.layout-dark .btn-close:hover {
    opacity: 1 !important;
}

/* Modal body */
body.layout-dark .modal-body {
    color: #eaeaea !important;
    padding: 20px !important;
}

/* Form labels in modals */
body.layout-dark .modal-body label {
    color: #ffffff !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Form controls in modals - Fix the blue background */
body.layout-dark .modal-body .form-select,
body.layout-dark .modal-body select,
body.layout-dark .modal-body .form-control,
body.layout-dark .modal-body input[type="text"],
body.layout-dark .modal-body input[type="search"] {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

/* Specific fix for form-select dropdown arrow */
body.layout-dark .modal-body .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* Modal buttons */
body.layout-dark .modal-body .btn {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

body.layout-dark .modal-body .btn:hover {
    background: #8b0000 !important;
    background-color: #8b0000 !important;
}

body.layout-dark .modal-body .btn:active {
    background: #5a0000 !important;
    background-color: #5a0000 !important;
    transform: translateY(1px) !important;
}

/* Remove blue outline on all button clicks */
body.layout-dark .btn:focus,
body.layout-dark .btn:active {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(178, 34, 34, 0.25) !important;
}

/* Section background fix - remove blue from chart-section */
body.layout-dark .chart-section,
body.layout-dark .interval-container,
body.layout-dark section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Interval container specific fix */
body.layout-dark .interval-container {
    background: transparent !important;
    background-color: transparent !important;
    padding: 16px 0 !important;
    margin-bottom: 16px !important;
}

body.layout-dark .interval-container label {
    color: #ffffff !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Card header fixes */
body.layout-dark .card-header {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
    padding: 16px !important;
}

body.layout-dark .card-header h5 {
    color: #ffffff !important;
    margin: 0 !important;
}

/* Remove blue glow from ApexCharts containers */
body.layout-dark .apexcharts-canvas,
body.layout-dark .apexcharts-svg,
body.layout-dark #s-line-area,
body.layout-dark #s-line-area-average {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for ApexCharts text colors */
body.layout-dark .apexcharts-text {
    fill: #eaeaea !important;
}

body.layout-dark .apexcharts-xaxis-label,
body.layout-dark .apexcharts-yaxis-label {
    fill: #9a9a9a !important;
}

/* Fix for table hover blue effect */
body.layout-dark .table-hover tbody tr:hover {
    background-color: rgba(42, 42, 42, 0.5) !important;
    transition: background-color 0.2s ease !important;
}

/* Remove blue borders from table */
body.layout-dark .table {
    border-color: #2a2a2a !important;
    color: #eaeaea !important;
}

body.layout-dark .table thead th {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-bottom: 2px solid #2a2a2a !important;
    font-weight: 600 !important;
}

body.layout-dark .table tbody td {
    border-bottom: 1px solid #2a2a2a !important;
}

body.layout-dark .table-borderless tbody td {
    border-bottom: 1px solid #2a2a2a !important;
}

/* Fix for links in tables */
body.layout-dark .table a {
    color: #ff4d4d !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

body.layout-dark .table a:hover {
    color: #ff7878 !important;
    text-decoration: underline !important;
}

/* Remove all blue box shadows and outlines */
body.layout-dark *:focus,
body.layout-dark *:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Specific fix for Bootstrap focus states */
body.layout-dark .form-control:focus,
body.layout-dark .form-select:focus,
body.layout-dark .form-check-input:focus,
body.layout-dark .btn:focus {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Remove blue from active button states */
body.layout-dark .btn:active,
body.layout-dark .btn.active {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Fix for Bootstrap primary button variants */
body.layout-dark .btn-primary {
    background-color: #b22222 !important;
    border-color: #b22222 !important;
}

body.layout-dark .btn-primary:hover {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
}

body.layout-dark .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
}

/* Fix for table responsive containers */
body.layout-dark .table-responsive {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for row backgrounds */
body.layout-dark .row {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for col backgrounds */
body.layout-dark .col-md-6,
body.layout-dark .col-md-4,
body.layout-dark .col-md-12 {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for form groups */
body.layout-dark .form-group {
    margin-bottom: 15px !important;
}

body.layout-dark .form-group label {
    color: #ffffff !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

/* Fix for sticky hover states on buttons */
body.layout-dark .btn:hover {
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .btn:active {
    transform: translateY(0) !important;
}

/* Remove blue glow from all interactive elements */
body.layout-dark a:focus,
body.layout-dark button:focus,
body.layout-dark input:focus,
body.layout-dark select:focus,
body.layout-dark textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Add custom focus styles for accessibility */
body.layout-dark a:focus-visible,
body.layout-dark button:focus-visible,
body.layout-dark input:focus-visible,
body.layout-dark select:focus-visible {
    outline: 2px solid #ff4d4d !important;
    outline-offset: 2px !important;
}

/* Fix for progress bars in tables */
body.layout-dark .progress {
    background-color: #2a2a2a !important;
    border-radius: 4px !important;
    height: 20px !important;
    overflow: hidden !important;
}

body.layout-dark .progress-bar {
    background-color: #28a745 !important;
}

body.layout-dark .progress-bar.bg-success {
    background-color: #28a745 !important;
}

body.layout-dark .progress-bar.bg-danger {
    background-color: #b22222 !important;
}

/* Fix for striped progress bars */
body.layout-dark .progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 1rem 1rem !important;
}

/* Fix for small text and headers */
body.layout-dark h6 {
    color: #ffffff !important;
    margin-top: 16px !important;
    margin-bottom: 12px !important;
}

/* Fix for sticker search input */
body.layout-dark #stickerSearch {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
}

body.layout-dark #stickerSearch::placeholder {
    color: #9a9a9a !important;
}

/* Fix for select options background */
body.layout-dark .form-select option {
    background: #141414 !important;
    background-color: #141414 !important;
    color: #ffffff !important;
}

/* Fix for form-select padding with arrow */
body.layout-dark .form-select {
    padding-right: 2.5rem !important;
}

/* Additional specificity for problematic elements */
body.layout-dark div[class*="col-"],
body.layout-dark div[class*="row"],
body.layout-dark div[class*="container"],
body.layout-dark div[class*="section"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for the "No Data check back later" text */
body.layout-dark .apexcharts-text tspan {
    fill: #ffffff !important;
}

/* Remove any remaining blue gradients */
body.layout-dark * {
    background-image: none !important;
}

/* Force remove blue backgrounds from any element */
body.layout-dark [style*="background-color: rgb"],
body.layout-dark [style*="background-color:#"],
body.layout-dark [style*="background: rgb"],
body.layout-dark [style*="background:#"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Specific fix for ApexCharts blue gradient */
body.layout-dark #SvgjsLinearGradient1178 stop {
    stop-color: #b22222 !important;
    stop-opacity: 0.65 !important;
}

body.layout-dark #SvgjsLinearGradient1178 stop:last-child {
    stop-color: #8b0000 !important;
    stop-opacity: 0.5 !important;
}

/* Fix for ApexCharts line colors */
body.layout-dark .apexcharts-area {
    stroke: #b22222 !important;
    fill: url(#SvgjsLinearGradient1178) !important;
}

/* Fix for ApexCharts markers */
body.layout-dark .apexcharts-marker {
    stroke: #ffffff !important;
    fill: #b22222 !important;
}

/**
#############################################
Final Blue Hover & Background Fixes
#############################################
*/

/* Fix for table row hover (remove blue) */
body.layout-dark .table-hover tbody tr:hover {
    background-color: rgba(42, 42, 42, 0.7) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

/* More specific targeting for server list table rows */
body.layout-dark #serverList tr:hover {
    background-color: rgba(42, 42, 42, 0.7) !important;
    background: rgba(42, 42, 42, 0.7) !important;
}

/* Fix for sidebar active/open item blue background */
body.layout-dark .dropdown-toggle[aria-expanded="true"] {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for sidebar dropdown arrow color */
body.layout-dark .dropdown-toggle svg.feather-chevron-right {
    stroke: #ffffff !important;
}

/* Fix for sidebar hover state */
body.layout-dark .dropdown-toggle:hover {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
}

/* Fix for select dropdown options hover (remove blue) */
body.layout-dark .form-select option:hover,
body.layout-dark .form-select option:checked,
body.layout-dark .form-select option:focus {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for select dropdown option hover states */
body.layout-dark #weapon_team option:hover,
body.layout-dark #wearSelect option:hover,
body.layout-dark .sticker-select option:hover,
body.layout-dark .keychain-select option:hover {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for modal close button visibility */
body.layout-dark .modal-header .btn-close {
    filter: invert(1) brightness(2) !important;
    opacity: 0.8 !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.layout-dark .modal-header .btn-close:hover {
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for button active/click states (remove blue) */
body.layout-dark .btn-primary:active,
body.layout-dark .btn-primary.active,
body.layout-dark .btn:active,
body.layout-dark .btn.active {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
    transform: translateY(1px) !important;
}

/* Specific fix for apply-skin button */
body.layout-dark .apply-skin {
    background: #b22222 !important;
    background-color: #b22222 !important;
    border-color: #b22222 !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .apply-skin:hover {
    background: #8b0000 !important;
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    transform: translateY(-1px) !important;
}

body.layout-dark .apply-skin:active {
    background: #5a0000 !important;
    background-color: #5a0000 !important;
    border-color: #5a0000 !important;
    transform: translateY(0) !important;
}

/* Fix for connect button */
body.layout-dark .btn-success {
    background: #28a745 !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .btn-success:hover {
    background: #218838 !important;
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    transform: translateY(-1px) !important;
}

body.layout-dark .btn-success:active {
    background: #1c7430 !important;
    background-color: #1c7430 !important;
    border-color: #1c7430 !important;
    transform: translateY(0) !important;
}

/* Fix for table links hover */
body.layout-dark .view-players:hover,
body.layout-dark .copy-ipandport:hover {
    color: #ff4d4d !important;
    transform: scale(1.1) !important;
    transition: all 0.2s ease !important;
}

body.layout-dark .view-players i,
body.layout-dark .copy-ipandport i {
    color: #ff4d4d !important;
    transition: color 0.2s ease !important;
}

body.layout-dark .view-players:hover i,
body.layout-dark .copy-ipandport:hover i {
    color: #ff7878 !important;
}

/* Remove blue glow from all interactive elements on active state */
body.layout-dark *:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Force remove blue from all button states */
body.layout-dark .btn:not(:disabled):not(.disabled):active,
body.layout-dark .btn:not(:disabled):not(.disabled).active {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    color: #ffffff !important;
}

/* Fix for Bootstrap focus ring - change from blue to red */
body.layout-dark .btn:focus-visible {
    outline: 2px solid #ff4d4d !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
}

/* Remove blue from all form controls when active */
body.layout-dark .form-control:active,
body.layout-dark .form-select:active {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Fix for dropdown menu backgrounds */
body.layout-dark .dropdown-menu {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

body.layout-dark .dropdown-item {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.layout-dark .dropdown-item:hover,
body.layout-dark .dropdown-item:focus {
    background: #b22222 !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for select2 dropdown hover states */
body.layout-dark .select2-results__option--highlighted {
    background: #b22222 !important;
    background-color: #b22222 !important;
}

/* Remove all browser default blue outlines */
body.layout-dark ::selection {
    background: #b22222 !important;
    color: #ffffff !important;
}

body.layout-dark ::-moz-selection {
    background: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for the specific server section in sidebar */
body.layout-dark #serverSection {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for collapse transition */
body.layout-dark .collapse.show {
    background: transparent !important;
    background-color: transparent !important;
}

/* Additional fix for table borderless hover */
body.layout-dark .table-borderless tbody tr:hover {
    background-color: rgba(42, 42, 42, 0.7) !important;
}

/* Fix for table cell borders on hover */
body.layout-dark .table-hover tbody tr:hover td {
    border-color: #3a3a3a !important;
}

/* Remove blue from any remaining element */
body.layout-dark [style*="blue"],
body.layout-dark [style*="Blue"],
body.layout-dark [style*="BLUE"] {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: #2a2a2a !important;
}

/* Fix for icon colors */
body.layout-dark .fas,
body.layout-dark .fa,
body.layout-dark .feather {
    color: #ffffff !important;
}

body.layout-dark .fas.fa-eye,
body.layout-dark .fas.fa-copy {
    color: #ff4d4d !important;
}

/* Fix for button group focus */
body.layout-dark .btn-group .btn:focus {
    z-index: 1 !important;
}

/* Fix for all form-select dropdowns */
body.layout-dark .form-select {
    background-color: #141414 !important;
    border: 1px solid #2a2a2a !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Remove blue border from all inputs on invalid state */
body.layout-dark .form-control.is-invalid,
body.layout-dark .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Remove blue border from all inputs on valid state */
body.layout-dark .form-control.is-valid,
body.layout-dark .form-select.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Fix for pagination active states */
body.layout-dark .page-item.active .page-link {
    background: #b22222 !important;
    background-color: #b22222 !important;
    border-color: #b22222 !important;
    color: #ffffff !important;
}

/* Fix for badges */
body.layout-dark .badge {
    color: #ffffff !important;
}

/* Final override for any remaining blue */
body.layout-dark * {
    --bs-blue: #b22222 !important;
    --bs-primary: #b22222 !important;
    --bs-primary-rgb: 178, 34, 34 !important;
}

/* Force remove blue from Bootstrap variables */
:root body.layout-dark {
    --bs-blue: #b22222 !important;
    --bs-primary: #b22222 !important;
}

/* Remove blue tooltip backgrounds */
body.layout-dark .apexcharts-tooltip {
    background: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

/* Remove blue from grid lines */
body.layout-dark .apexcharts-gridline {
    stroke: #3a3a3a !important;
}

body.layout-dark .apexcharts-xaxis-tick {
    stroke: #3a3a3a !important;
}

/* Fix for crosshair lines */
body.layout-dark .apexcharts-xcrosshairs,
body.layout-dark .apexcharts-ycrosshairs {
    stroke: #4a4a4a !important;
}

/* Fix for DataTables wrapper */
body.layout-dark .dt-container {
    padding: 0 !important;
}

/* Fix for collapsed rows */
body.layout-dark .dtr-inline.collapsed tbody td.dtr-control:before {
    background-color: #b22222 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

/* Fix for hidden columns in responsive mode */
body.layout-dark .dtr-hidden {
    display: none !important;
}

/* Additional specificity for Bootstrap classes */
body.layout-dark .btn:focus,
body.layout-dark .form-control:focus,
body.layout-dark .form-select:focus,
body.layout-dark .dt-input:focus {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}

/**
#############################################
Ultimate Blue Removal Fixes
#############################################
*/

/* ULTRA AGGRESSIVE BLUE REMOVAL - Override everything with !important */
body.layout-dark tr:hover,
body.layout-dark tr:focus,
body.layout-dark tr:active {
    background-color: rgba(42, 42, 42, 0.7) !important;
    background: rgba(42, 42, 42, 0.7) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #2a2a2a !important;
}

/* Specific fix for all table row hover states */
body.layout-dark .table-hover tbody tr:hover td,
body.layout-dark .table-hover tbody tr:hover th,
body.layout-dark .table-hover tbody tr:focus td,
body.layout-dark .table-hover tbody tr:focus th {
    background-color: rgba(42, 42, 42, 0.7) !important;
    background: rgba(42, 42, 42, 0.7) !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Fix for sidebar active state - MORE SPECIFIC */
body.layout-dark .menu .dropdown-toggle[aria-expanded="true"],
body.layout-dark .menu-categories li.menu .dropdown-toggle[aria-expanded="true"] {
    background: linear-gradient(to right, #b22222, #8b0000) !important;
    background-color: #b22222 !important;
    color: #ffffff !important;
    border-color: #b22222 !important;
    box-shadow: 0 2px 8px rgba(178, 34, 34, 0.3) !important;
}

/* Fix for select dropdown options - FORCE RED THEME */
body.layout-dark select option {
    background-color: #141414 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
}

/* When option is hovered (browser specific) */
body.layout-dark select option:hover,
body.layout-dark select option:focus,
body.layout-dark select option:checked,
body.layout-dark select option:active {
    background-color: #b22222 !important;
    background: #b22222 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px #b22222 !important;
}

/* For Firefox specifically */
body.layout-dark select option:-moz-focusring,
body.layout-dark select option:-moz-selected {
    background-color: #b22222 !important;
    color: #ffffff !important;
}

/* For Webkit browsers (Chrome, Safari) */
body.layout-dark select option:checked,
body.layout-dark select option:focus,
body.layout-dark select option:active {
    background: linear-gradient(#b22222, #8b0000) !important;
    background-color: #b22222 !important;
}

/* Modal close button - MAKE IT VISIBLE */
body.layout-dark .modal .btn-close,
body.layout-dark [data-bs-dismiss="modal"].btn-close,
body.layout-dark .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.9 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: .25rem !important;
    box-sizing: content-box !important;
    width: 1em !important;
    height: 1em !important;
    padding: .25em .25em !important;
    color: #ffffff !important;
}

body.layout-dark .modal .btn-close:hover,
body.layout-dark [data-bs-dismiss="modal"].btn-close:hover,
body.layout-dark .modal-header .btn-close:hover {
    opacity: 1 !important;
    filter: invert(1) grayscale(100%) brightness(250%) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Button active states - COMPLETE OVERRIDE */
body.layout-dark .btn:active,
body.layout-dark .btn.active,
body.layout-dark .btn:focus:active,
body.layout-dark .btn-primary:active,
body.layout-dark .btn-primary.active,
body.layout-dark .btn-primary:focus:active,
body.layout-dark .apply-skin:active,
body.layout-dark .apply-skin.active {
    background-color: #5a0000 !important;
    background: linear-gradient(to bottom, #5a0000, #3a0000) !important;
    border-color: #5a0000 !important;
    color: #ffffff !important;
    transform: translateY(1px) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Fix for button focus states */
body.layout-dark .btn:focus,
body.layout-dark .btn-primary:focus,
body.layout-dark .apply-skin:focus {
    outline: 2px solid #ff4d4d !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.3rem rgba(178, 34, 34, 0.5) !important;
    border-color: #ff4d4d !important;
}

/* Remove ALL blue from ANY element */
body.layout-dark * {
    --blue: #b22222 !important;
    --primary: #b22222 !important;
    --bs-blue: #b22222 !important;
    --bs-primary: #b22222 !important;
    --bs-primary-rgb: 178, 34, 34 !important;
    --bs-link-color: #ff4d4d !important;
    --bs-link-hover-color: #ff7878 !important;
}

/* Override Bootstrap's CSS variables globally */
body.layout-dark {
    --bs-blue: #b22222 !important;
    --bs-indigo: #b22222 !important;
    --bs-purple: #b22222 !important;
    --bs-pink: #b22222 !important;
    --bs-red: #b22222 !important;
    --bs-orange: #b22222 !important;
    --bs-yellow: #b22222 !important;
    --bs-green: #b22222 !important;
    --bs-teal: #b22222 !important;
    --bs-cyan: #b22222 !important;
    --bs-white: #ffffff !important;
    --bs-gray: #6c757d !important;
    --bs-gray-dark: #343a40 !important;
    --bs-primary: #b22222 !important;
    --bs-secondary: #6c757d !important;
    --bs-success: #198754 !important;
    --bs-info: #0dcaf0 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-light: #f8f9fa !important;
    --bs-dark: #212529 !important;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* Force remove blue backgrounds from any element with inline styles */
body.layout-dark [style*="background-color: blue"],
body.layout-dark [style*="background-color: #007bff"],
body.layout-dark [style*="background-color: #0d6efd"],
body.layout-dark [style*="background: blue"],
body.layout-dark [style*="background: #007bff"],
body.layout-dark [style*="background: #0d6efd"],
body.layout-dark [style*="background: rgb(13, 110, 253)"],
body.layout-dark [style*="background: rgb(0, 123, 255)"],
body.layout-dark [style*="background: rgba(13, 110, 253"],
body.layout-dark [style*="background: rgba(0, 123, 255"] {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    background-image: none !important;
}

/* Remove blue from all pseudo-elements */
body.layout-dark ::before,
body.layout-dark ::after,
body.layout-dark *::before,
body.layout-dark *::after {
    background-color: transparent !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Force remove blue from all states */
body.layout-dark .table-hover tbody tr:hover {
    --bs-table-accent-bg: rgba(42, 42, 42, 0.7) !important;
    background-color: rgba(42, 42, 42, 0.7) !important;
}

/* Remove blue from dropdown toggle */
body.layout-dark .dropdown-toggle:focus,
body.layout-dark .dropdown-toggle:active {
    background-color: #b22222 !important;
    border-color: #b22222 !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Remove blue from all form elements */
body.layout-dark .form-control:focus,
body.layout-dark .form-select:focus,
body.layout-dark .form-check-input:focus {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.25) !important;
}

/* Remove blue from all links */
body.layout-dark a:hover,
body.layout-dark a:focus,
body.layout-dark a:active {
    color: #ff7878 !important;
    text-decoration-color: #ff7878 !important;
}

/* Remove blue from pagination */
body.layout-dark .page-link:hover,
body.layout-dark .page-link:focus {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Remove blue from badges */
body.layout-dark .badge:hover,
body.layout-dark .badge:focus {
    background-color: #b22222 !important;
    border-color: #b22222 !important;
    color: #ffffff !important;
}

/**
#############################################
Final Fixes for Close Button and Active States
#############################################
*/

/* Fix for modal close button - MAKE IT RED */
body.layout-dark .modal .btn-close,
body.layout-dark [data-bs-dismiss="modal"].btn-close,
body.layout-dark .modal-header .btn-close {
    filter: invert(27%) sepia(87%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    opacity: 0.8 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b22222'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: .25rem !important;
    box-sizing: content-box !important;
    width: 1em !important;
    height: 1em !important;
    padding: .25em .25em !important;
    color: #b22222 !important;
}

body.layout-dark .modal .btn-close:hover,
body.layout-dark [data-bs-dismiss="modal"].btn-close:hover,
body.layout-dark .modal-header .btn-close:hover {
    opacity: 1 !important;
    filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(358deg) brightness(91%) contrast(114%) !important;
    background-color: rgba(178, 34, 34, 0.1) !important;
    transform: scale(1.1) !important;
    transition: all 0.2s ease !important;
}

/* Alternative: White close button if red doesn't work */
body.layout-dark .modal .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    filter: none !important;
    opacity: 0.7 !important;
}

body.layout-dark .modal .btn-close:hover {
    opacity: 1 !important;
    background-color: rgba(255, 77, 77, 0.2) !important;
}

/* Fix for apply-skin button active state (blue when pressed) */
body.layout-dark .apply-skin {
    background: linear-gradient(to bottom, #b22222, #8b0000) !important;
    background-color: #b22222 !important;
    border-color: #8b0000 !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* Remove any blue box-shadow on active state */
body.layout-dark .apply-skin:active,
body.layout-dark .apply-skin.active,
body.layout-dark .apply-skin:focus:active {
    background: linear-gradient(to bottom, #5a0000, #3a0000) !important;
    background-color: #5a0000 !important;
    border-color: #3a0000 !important;
    color: #ffffff !important;
    transform: translateY(2px) !important;
    box-shadow: 
        inset 0 3px 5px rgba(0, 0, 0, 0.5),
        0 0 0 0.3rem rgba(178, 34, 34, 0.5) !important;
}

/* Specifically remove blue from button focus state */
body.layout-dark .apply-skin:focus {
    outline: 3px solid #ff4d4d !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 0.3rem rgba(178, 34, 34, 0.5),
        0 4px 8px rgba(178, 34, 34, 0.3) !important;
    border-color: #ff4d4d !important;
}

/* Remove blue from ALL button active states */
body.layout-dark .btn:active {
    --bs-btn-active-bg: #5a0000 !important;
    --bs-btn-active-border-color: #3a0000 !important;
    --bs-btn-active-color: #ffffff !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
    color: var(--bs-btn-active-color) !important;
}

/* Remove blue from Bootstrap's btn-primary active state */
body.layout-dark .btn-primary:active {
    background-color: #5a0000 !important;
    border-color: #3a0000 !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.5) !important;
}

/* Force remove any blue shadow on click */
body.layout-dark .btn-primary:focus:active {
    box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.5) !important;
}

/* Nuclear option for button active states */
body.layout-dark button:active,
body.layout-dark button.active {
    background-image: none !important;
    background-color: #5a0000 !important;
    border-color: #3a0000 !important;
    color: #ffffff !important;
}

/* Remove blue from col-12 container */
body.layout-dark .col-12 {
    background: transparent !important;
}

/* Fix for button text and icon */
body.layout-dark .apply-skin i {
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
}

body.layout-dark .apply-skin:hover i {
    transform: rotate(30deg) !important;
}

/* JavaScript fallback - this will be applied by JS if needed */
body.layout-dark .no-blue * {
    background-color: transparent !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* If all else fails, use this nuclear option */
body.layout-dark .force-no-blue,
body.layout-dark .force-no-blue *,
body.layout-dark .force-no-blue *:hover,
body.layout-dark .force-no-blue *:focus,
body.layout-dark .force-no-blue *:active {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/**
 Inputs
**/
input,
textarea {
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 10px !important;
}

input::placeholder,
textarea::placeholder {
    color: #9a9a9a !important;
}

input:focus,
textarea:focus {
    border-color: #ff4d4d !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.25) !important;
}