/* Custom Colors for Ibiza Songs Administration */
/* Corporate Colors:
   - PRIMARY BURDEOS: #661916
   - GRIS OSCURO: #282828 - GRIS CLARO: #5C5C5C - BEIGE: #F0EDEA */
/* QR Code identifiers color override */
code {
    color: #661916 !important;
}

/* Fix dropdown background color */
.profile-dropdown {
    background-color: white !important;
}

.profile-dropdown .dropdown-item {
    color: #333 !important;
}

.profile-dropdown .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: var(--ct-primary) !important;
}

.profile-dropdown .dropdown-header {
    background-color: white !important;
    color: #333 !important;
}

/* Fix main content background - make it white instead of beige */
/* Force white background on all content areas with maximum specificity */
html body[data-menu-color="light"] .wrapper .content-page {
    background-color: white !important;
    background: white !important;
}

html body[data-menu-color="light"] .wrapper .content-page .content {
    background-color: white !important;
    background: white !important;
}

html body[data-menu-color="light"] .wrapper .content-page .content .container-fluid {
    background-color: white !important;
    background: white !important;
}

/* Also force white background on the main content areas */
html body .wrapper .content-page {
    background-color: white !important;
    background: white !important;
}

html body .wrapper .content-page .content {
    background-color: white !important;
    background: white !important;
}

html body .wrapper .content-page .content .container-fluid {
    background-color: white !important;
    background: white !important;
}

/* Additional specificity for any beige backgrounds */
html body .content-page,
html body .content,
html body .container-fluid {
    background-color: white !important;
    background: white !important;
}

/* Ibiza-specific content classes for complete control */
.ibiza-content-main {
    background-color: white !important;
    background: white !important;
}

.ibiza-content-area {
    background-color: white !important;
    background: white !important;
}

.ibiza-content-container {
    background-color: white !important;
    background: white !important;
}


:root {
    /* Replace purple/indigo colors with burdeos */
    --ct-indigo: #661916;
    --ct-primary: #661916;
    --ct-primary-rgb: 102, 25, 22;
    --ct-link-color: #661916;
    --ct-link-color-rgb: 102, 25, 22;
    --ct-link-hover-color: #8B2A26;
    --ct-link-hover-color-rgb: 139, 42, 38;

    /* Fix beige background colors to white */
    --ct-body-bg: #ffffff;
    --ct-body-bg-rgb: 255, 255, 255;
    --ct-light-rgb: 255, 255, 255;
    --ct-light-bg-subtle: #ffffff;

    /* Override the main body background that was causing beige */
    --ct-body-bg: #ffffff !important;

    /* Force white background for modal and main content areas */
    body {
        background-color: #ffffff !important;
    }

    .modal-content {
        background-color: #ffffff !important;
    }

    .modal-body {
        background-color: #ffffff !important;
    }

    .card {
        background-color: #ffffff !important;
    }

    /* Burdeos color variations */
    --ct-burdeos-light: #8B2A26;
    --ct-burdeos-lighter: #A33A36;
    --ct-burdeos-dark: #4D120F;
    --ct-burdeos-darker: #330C0A;


}

/* Menu customization - Beige background with gray text */
html[data-menu-color=light] {
    --ct-menu-bg: #ffffff;
    --ct-menu-item-color: #5C5C5C;
    --ct-menu-item-hover-color: #661916;
    --ct-menu-item-active-color: #661916;
    --ct-help-box-bg: #661916;
}


/* Topbar customization */
html[data-topbar-color=light] {
    --ct-topbar-bg: #ffffff;
    --ct-topbar-item-color: #5C5C5C;
    --ct-topbar-item-hover-color: #661916;
    --ct-topbar-search-bg: #ffffff;
    --ct-topbar-user-bg: #ffffff;
    --ct-topbar-user-border: #E0DDDA;
}

html[data-topbar-color=dark] {
    --ct-topbar-bg: #282828;
    --ct-topbar-item-color: #5C5C5C;
    --ct-topbar-item-hover-color: #661916;
    --ct-topbar-search-bg: #3A3A3A;
    --ct-topbar-user-bg: #3A3A3A;
    --ct-topbar-user-border: #4A4A4A;
}

html[data-topbar-color=brand] {
    --ct-topbar-bg: linear-gradient(135deg, #661916 0%, #8B2A26 60%);
    --ct-topbar-item-color: rgba(255, 255, 255, 0.8);
    --ct-topbar-item-hover-color: #ffffff;
    --ct-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ct-topbar-user-bg: rgba(255, 255, 255, 0.1);
    --ct-topbar-user-border: rgba(255, 255, 255, 0.15);
}

/* Button overrides */
.btn-primary {
    color: #fff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;
    background-color: #8B2A26 !important;
    border-color: #8B2A26 !important;
}

.btn-outline-primary {
    color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

/* Form controls */
.form-check-input:checked {
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

/* Links */
a {
    color: #661916;
}

a:hover {
    color: #8B2A26;
}

/* Text colors */
.text-primary {
    color: #661916 !important;
}

/* Background colors */
.bg-primary {
    background-color: #661916 !important;
}

.bg-primary-lighten {
    background-color: rgba(102, 25, 22, 0.1) !important;
}

/* Border colors */
.border-primary {
    border-color: #661916 !important;
}

/* Badge colors */
.badge-primary {
    background-color: #661916 !important;
}

.badge-primary-lighten {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.18) !important;
}

/* Progress bars */
.progress-bar {
    background-color: #661916 !important;
}

/* Sidebar specific overrides */
.left-side-menu {
    background: #F0EDEA !important;
}

.side-nav {
    background: #F0EDEA !important;
}

.side-nav .side-nav-link {
    color: #5C5C5C !important;
}

.side-nav .side-nav-link:hover {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.1) !important;
}

.side-nav .mm-active>a,
.side-nav .side-nav-link.active {
    color: #661916 !important;
    background-color: transparent !important;
}

.side-nav-title {
    color: #282828 !important;
    font-weight: 600;
}

/* Force beige background for all sidebar elements */
.side-nav .side-nav-item {
    background: #F0EDEA !important;
}

.side-nav .side-nav-second-level,
.side-nav .side-nav-third-level,
.side-nav .side-nav-forth-level {
    background: #F0EDEA !important;
}

/* Logo area background */
.leftbar-user {
    background: #F0EDEA !important;
    background-color: #F0EDEA !important;
}

/* Force beige on leftbar-user and all its elements */
.leftbar-user,
.leftbar-user *,
.leftbar-user a,
.leftbar-user img,
.leftbar-user span {
    background-color: #F0EDEA !important;
    background: #F0EDEA !important;
    background-image: none !important;
}

/* Logo styling - make it bigger and ensure proper colors */
.leftbar-user .logo-dark,
.leftbar-user .logo-light,
.side-nav .logo-dark,
.side-nav .logo-light {
    background: #F0EDEA !important;
    background-color: #F0EDEA !important;
}

/* Make logo bigger but not too big */
.leftbar-user img,
.side-nav img,
.logo-dark img,
.logo-light img {
    height: 25px !important;
    width: auto !important;
    max-width: 150px !important;
}

/* Logo text styling */
.leftbar-user .logo-text,
.side-nav .logo-text {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #661916 !important;
}

/* Ensure logo container has proper background */
.logo-dark,
.logo-light {
    background: #F0EDEA !important;
    background-color: #F0EDEA !important;
    padding: 10px !important;
}

/* Force beige on all logo elements */
.logo,
.logo *,
.logo a,
.logo span,
.logo img {
    background-color: #F0EDEA !important;
    background: #F0EDEA !important;
    background-image: none !important;
}

/* Specific targeting for logo containers */
.logo-light,
.logo-dark,
.logo-lg,
.logo-sm {
    background: #F0EDEA !important;
    background-color: #F0EDEA !important;
    background-image: none !important;
}

/* Help box background */
.help-box {
    background-color: #661916 !important;
}



/* Topbar specific overrides */
.navbar-custom {
    background: #ffffff !important;
}

.navbar-custom .nav-link {
    color: #5C5C5C !important;
}

.navbar-custom .nav-link:hover {
    color: #661916 !important;
}

/* Dropdown menus */
.dropdown-menu {
    border-color: #E0DDDA !important;
}

.dropdown-item:hover {
    background-color: rgba(102, 25, 22, 0.1) !important;
    color: #661916 !important;
}

/* Cards and components */
.card {
    border-color: #E0DDDA !important;
}

.card-header {
    background-color: #ffffff !important;
    border-bottom-color: #E0DDDA !important;
}

/* Tables */
.table thead th {
    background-color: #F0EDEA !important;
    border-bottom-color: #E0DDDA !important;
    color: #282828 !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(102, 25, 22, 0.05) !important;
}

/* Pagination */
.page-link {
    color: #661916 !important;
    border-color: #E0DDDA !important;
}

.page-link:hover {
    color: #8B2A26 !important;
    background-color: #f8f9fa !important;
    border-color: #661916 !important;
}

.page-item.active .page-link {
    background-color: #661916 !important;
    border-color: #661916 !important;
    color: #fff !important;
}

/* Alert customizations */
.alert-primary {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.1) !important;
    border-color: rgba(102, 25, 22, 0.2) !important;
}

/* Switch components */
input[data-switch]:checked+label {
    background-color: #661916 !important;
}

/* Custom utility classes */
.text-burdeos {
    color: #661916 !important;
}

.bg-burdeos {
    background-color: #661916 !important;
}

.border-burdeos {
    border-color: #661916 !important;
}

.text-gris-oscuro {
    color: #282828 !important;
}

.bg-gris-oscuro {
    background-color: #282828 !important;
}

.text-gris-claro {
    color: #5C5C5C !important;
}

.bg-gris-claro {
    background-color: #5C5C5C !important;
}

.text-beige {
    color: #F0EDEA !important;
}

.bg-beige {
    background-color: #F0EDEA !important;
}

/* Hover effects */
.hover-burdeos:hover {
    color: #661916 !important;
}

.hover-bg-burdeos:hover {
    background-color: #661916 !important;
}

/* Focus states */
.focus-burdeos:focus {
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

/* Login page specific overrides */
.authentication-bg {
    background: linear-gradient(135deg, #661916 0%, #8B2A26 60%) !important;
}

.auth-fluid-form-box {
    background: #ffffff !important;
}

.auth-fluid-form-box .card {
    background: #ffffff !important;
    border-color: #E0DDDA !important;
}

/* Ensure login form has proper white background */
.auth-fluid-form-box .card-body {
    background: #ffffff !important;
}

/* Force white background on ALL login form elements */
.auth-fluid-form-box,
.auth-fluid-form-box *,
.auth-fluid-form-box>*,
.auth-fluid-form-box>*>*,
.auth-fluid-form-box>*>*>*,
.auth-fluid-form-box .card,
.auth-fluid-form-box .card *,
.auth-fluid-form-box .card>*,
.auth-fluid-form-box .card>*>* {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Specific targeting for any beige elements in login */
.auth-fluid-form-box .logo,
.auth-fluid-form-box .logo *,
.auth-fluid-form-box .logo-light,
.auth-fluid-form-box .logo-dark,
.auth-fluid-form-box .logo-lg,
.auth-fluid-form-box .logo-sm,
.auth-fluid-form-box .auth-brand,
.auth-fluid-form-box .auth-brand * {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Target the specific banner area that might be beige */
.auth-fluid-form-box .auth-brand,
.auth-fluid-form-box .auth-brand *,
.auth-fluid-form-box .logo-dark,
.auth-fluid-form-box .logo-light,
.auth-fluid-form-box .logo-dark *,
.auth-fluid-form-box .logo-light *,
.auth-fluid-form-box .logo-dark span,
.auth-fluid-form-box .logo-light span,
.auth-fluid-form-box .logo-dark img,
.auth-fluid-form-box .logo-light img {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Force white on any element that might have beige background */
.authentication-bg .auth-fluid-form-box *,
.authentication-bg .auth-fluid-form-box>*,
.authentication-bg .auth-fluid-form-box>*>*,
.authentication-bg .auth-fluid-form-box>*>*>* {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Fix language dropdown in login */
.auth-fluid-form-box .dropdown-menu {
    background: #ffffff !important;
    border-color: #E0DDDA !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
}

.auth-fluid-form-box .dropdown-item {
    color: #5C5C5C !important;
    background: #ffffff !important;
    padding: 8px 16px !important;
}

.auth-fluid-form-box .dropdown-item:hover {
    background-color: rgba(102, 25, 22, 0.1) !important;
    color: #661916 !important;
}

/* Ensure dropdown text is visible */
.auth-fluid-form-box .dropdown-menu *,
.auth-fluid-form-box .dropdown-item * {
    color: inherit !important;
    background: transparent !important;
}

/* Force dropdown visibility */
.auth-fluid-form-box .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdown items are visible */
.auth-fluid-form-box .dropdown-menu li,
.auth-fluid-form-box .dropdown-menu li a,
.auth-fluid-form-box .dropdown-menu li a span {
    color: #5C5C5C !important;
    background: transparent !important;
}

.auth-fluid-form-box .dropdown-menu li a:hover,
.auth-fluid-form-box .dropdown-menu li a:hover span {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.1) !important;
}

/* NUCLEAR OPTION for dropdown visibility */
.auth-fluid-form-box .dropdown-menu,
.auth-fluid-form-box .dropdown-menu *,
.auth-fluid-form-box .dropdown-menu li,
.auth-fluid-form-box .dropdown-menu li *,
.auth-fluid-form-box .dropdown-menu li a,
.auth-fluid-form-box .dropdown-menu li a *,
.auth-fluid-form-box .dropdown-menu li a span,
.auth-fluid-form-box .dropdown-menu li a span * {
    color: #5C5C5C !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.auth-fluid-form-box .dropdown-menu li a:hover,
.auth-fluid-form-box .dropdown-menu li a:hover *,
.auth-fluid-form-box .dropdown-menu li a:hover span,
.auth-fluid-form-box .dropdown-menu li a:hover span * {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.1) !important;
}

/* Force dropdown to be visible when opened */
.auth-fluid-form-box .dropdown-menu.show,
.auth-fluid-form-box .dropdown-menu.show * {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #5C5C5C !important;
}



.auth-fluid-form-box .btn-primary {
    background-color: #661916 !important;
    border-color: #661916 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
}

.auth-fluid-form-box .btn-primary:hover {
    background-color: #8B2A26 !important;
    border-color: #8B2A26 !important;
    color: #ffffff !important;
}

.auth-fluid-form-box .btn-primary:focus {
    background-color: #8B2A26 !important;
    border-color: #8B2A26 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

.auth-fluid-form-box .btn-primary i {
    color: #ffffff !important;
    margin-right: 8px !important;
}

/* Fix any icon color issues in login button */
.auth-fluid-form-box .btn-primary *,
.auth-fluid-form-box .btn-primary i,
.auth-fluid-form-box .btn-primary span,
.auth-fluid-form-box .btn-primary .mdi {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure button text and icon are always white */
.auth-fluid-form-box .btn-primary {
    color: #ffffff !important;
    background-color: #661916 !important;
    background: #661916 !important;
}

.auth-fluid-form-box .btn-primary * {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove any background from button icons */
.auth-fluid-form-box .btn-primary i,
.auth-fluid-form-box .btn-primary .mdi,
.auth-fluid-form-box .btn-primary span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.auth-fluid-form-box .form-control:focus {
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

.auth-fluid-form-box .form-check-input:checked {
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.auth-fluid-form-box a {
    color: #661916 !important;
}

.auth-fluid-form-box a:hover {
    color: #8B2A26 !important;
}

.auth-fluid-form-box .text-primary {
    color: #661916 !important;
}

.auth-fluid-form-box .alert-primary {
    color: #661916 !important;
    background-color: rgba(102, 25, 22, 0.1) !important;
    border-color: rgba(102, 25, 22, 0.2) !important;
}

/* Logo colors for login */
.auth-brand .logo-dark img,
.auth-brand .logo-light img {
    filter: none !important;
}

/* Login form specific styles */
.auth-fluid-form-box .card-body {
    background: #ffffff !important;
}

.auth-fluid-form-box .btn {
    border-radius: 0.375rem !important;
}

.auth-fluid-form-box .form-control {
    border-color: #E0DDDA !important;
}

.auth-fluid-form-box .form-control:focus {
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

/* Custom colors for Ibiza Songs */
:root {
    --ct-primary: #661916;
    /* Burdeos */
    --ct-burdeos-light: #8B2D26;
    --ct-burdeos-dark: #4A120F;
    --ct-gris-oscuro: #282828;
    --ct-gris-claro: #5C5C5C;
    --ct-beige: #F0EDEA;
    --ct-beige-light: #F8F6F4;
    --ct-beige-dark: #E8E4E0;
}

/* Override default colors */
:root {
    --ct-menu-bg: var(--ct-beige);
    --ct-menu-item-color: var(--ct-gris-claro);
    --ct-menu-item-hover-bg: transparent;
    --ct-menu-item-hover-color: var(--ct-primary);
    --ct-menu-item-active-bg: transparent;
    --ct-menu-item-active-color: var(--ct-primary);
    --ct-topbar-bg: #ffffff;
    --ct-topbar-color: var(--ct-gris-oscuro);
}

/* Image crop modal styles */
.img-container {
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.img-preview {
    overflow: hidden;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
}

.img-preview-sm {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.img-preview-lg {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.preview-container {
    text-align: center;
}

.preview-container h6 {
    margin-bottom: 1rem;
    color: var(--ct-gris-oscuro);
}

/* Cropper.js custom styles */
.cropper-container {
    max-height: 400px;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.cropper-line,
.cropper-point {
    background-color: var(--ct-primary);
}

.cropper-bg {
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Transparent background for image previews */
.img-preview {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Profile photo display with transparent background */
.account-user-avatar img,
.profile-preview img {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Crop modal background for better transparency visibility */
#imageCropModal .img-container {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: 8px;
    padding: 10px;
}

/* Volume slider styling - burdeos color */
input[type="range"].volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
    outline: none;
}

input[type="range"].volume-slider::-webkit-slider-track {
    background: #e9ecef;
    height: 6px;
    border-radius: 3px;
    width: 100%;
}

input[type="range"].volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #661916;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -7px;
}

input[type="range"].volume-slider::-moz-range-track {
    background: #e9ecef;
    height: 6px;
    border-radius: 3px;
    border: none;
    width: 100%;
}

input[type="range"].volume-slider::-moz-range-thumb {
    background: #661916;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Para Edge y otros navegadores */
input[type="range"].volume-slider::-ms-track {
    background: #e9ecef;
    height: 6px;
    border-radius: 3px;
    border: none;
    width: 100%;
    color: transparent;
}

input[type="range"].volume-slider::-ms-thumb {
    background: #661916;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"].volume-slider::-ms-fill-lower {
    background: #e9ecef;
    border-radius: 3px;
}

input[type="range"].volume-slider::-ms-fill-upper {
    background: #e9ecef;
    border-radius: 3px;
}

/* Remote Control and TeamViewer buttons - burdeos color */
.btn-remote-control,
.btn-teamviewer-connect {
    background-color: #661916 !important;
    border-color: #661916 !important;
    color: white !important;
}

.btn-remote-control:hover,
.btn-teamviewer-connect:hover {
    background-color: #4d120f !important;
    border-color: #4d120f !important;
    color: white !important;
}

.btn-remote-control:focus,
.btn-teamviewer-connect:focus {
    background-color: #661916 !important;
    border-color: #661916 !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.25) !important;
}

.btn-remote-control:active,
.btn-teamviewer-connect:active {
    background-color: #3a0e0b !important;
    border-color: #3a0e0b !important;
    color: white !important;
}

/* HDD Status progress bar - burdeos color for critical levels */
.progress-bar.bg-hdd-danger {
    background-color: #661916 !important;
}

/* Action buttons in tables - burdeos color */
.btn-outline-danger {
    color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.5) !important;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.5) !important;
}

/* Monitor action buttons - spacing and colors */
table td.monitor-actions {
    white-space: nowrap !important;
    text-align: left !important;
    width: auto !important;
}

table td.monitor-actions .btn {
    display: inline-block !important;
    float: none !important;
    position: relative !important;
    margin-right: 5px !important;
    margin-bottom: 0 !important;
    vertical-align: top !important;
}

table td.monitor-actions .btn:last-child {
    margin-right: 0 !important;
}

/* All action buttons in monitor should be burdeos */
.btn-outline-warning,
.btn-outline-success,
.btn-outline-primary {
    color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-warning:hover,
.btn-outline-success:hover,
.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus,
.btn-outline-success:focus,
.btn-outline-success.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 25, 22, 0.5) !important;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #ffffff !important;
    background-color: #661916 !important;
    border-color: #661916 !important;
}

/* Custom burdeos badge for offline status */
.badge.bg-burdeos {
    background-color: #661916 !important;
    color: white !important;
}

/* All spinners should be burdeos color */
.spinner-border,
.spinner-grow,
.mdi-spin,
.fa-spin,
[class*="spinner"],
[class*="loading"] {
    color: #661916 !important;
    border-color: #661916 !important;
}

/* Specific spinner overrides */
.spinner-border {
    border-color: #661916 !important;
    border-right-color: transparent !important;
}

.spinner-grow {
    background-color: #661916 !important;
}

/* Loading text color */
.loading,
.loading-text {
    color: #661916 !important;
}

/* View Ticket Modal: ensure white background only inside the modal */
#viewTicketModal {
    /* Modal components in Hyper use these variables */
    --ct-modal-bg: #ffffff;
    --ct-secondary-bg: #ffffff;
    --ct-light-rgb: 255, 255, 255;
    /* Also force subtle backgrounds to white so no beige leaks inside modal */
    --ct-secondary-bg-subtle: #ffffff;
    --ct-light-bg-subtle: #ffffff;
    --ct-body-bg: #ffffff;
    --ct-body-bg-rgb: 255, 255, 255;
}

/* Ensure all modal surfaces are white inside the view modal */
#viewTicketModal .modal-content,
#viewTicketModal .modal-body,
#viewTicketModal .card,
#viewTicketModal .card-body,
#viewTicketModal .bg-light,
#viewTicketModal .bg-light-subtle,
#viewTicketModal .bg-secondary-subtle {
    background-color: #ffffff !important;
}

/* Fix dropdown backgrounds globally */
.dropdown-menu {
    background-color: #ffffff !important;
}

/* Fix notification dropdown and other dropdowns */
.notification-dropdown,
.profile-dropdown,
.dropdown-menu {
    background-color: #ffffff !important;
}

/* Fix all Bootstrap components that use the problematic variables */
.bg-secondary-subtle,
.bg-light-subtle,
.card,
.modal-content,
.accordion,
.pagination,
.list-group,
.popover,
.offcanvas {
    background-color: #ffffff !important;
}

/* Override the specific CSS variables that cause beige backgrounds */
:root {
    --ct-dropdown-bg: #ffffff !important;
    --ct-modal-bg: #ffffff !important;
    --ct-card-bg: #ffffff !important;
    --ct-accordion-bg: #ffffff !important;
    --ct-pagination-bg: #ffffff !important;
    --ct-list-group-bg: #ffffff !important;
    --ct-popover-bg: #ffffff !important;
    --ct-offcanvas-bg: #ffffff !important;
}