/* Theme Customizer Styles for CloudHUB 2.0 */

/* Theme Toggle Icon Styles - single icon that swaps between sun/moon, no switch/pill */
.theme-mode-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    outline: none !important;
    box-shadow: none !important;
}

.theme-mode-toggle:focus,
.theme-mode-toggle:focus-visible,
.theme-mode-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

.theme-icon-sun,
.theme-icon-moon {
    display: none;
    transition: transform 0.25s ease;
}

html[data-bs-theme="light"] .theme-mode-toggle .theme-icon-sun {
    display: inline-block;
}

html[data-bs-theme="dark"] .theme-mode-toggle .theme-icon-moon {
    display: inline-block;
}

.theme-mode-toggle:hover .theme-icon-sun,
.theme-mode-toggle:hover .theme-icon-moon {
    transform: rotate(20deg) scale(1.1);
}

/* Theme Settings Offcanvas Styles */
.theme-settings-offcanvas .avatar-md {
    width: 3.5rem;
    height: 3.5rem;
}

.theme-settings-offcanvas .card-radio {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.theme-settings-offcanvas .card-radio:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.theme-settings-offcanvas .form-check-input:checked + .form-check-label {
    border: 2px solid var(--ct-primary);
    border-radius: 0.375rem;
}

.theme-settings-offcanvas .bg-dark-lighten {
    background-color: rgba(var(--ct-dark-rgb), 0.2) !important;
}

.theme-settings-offcanvas .bg-primary-lighten {
    background-color: rgba(var(--ct-primary-rgb), 0.2) !important;
}

.theme-settings-offcanvas .bg-light-lighten {
    background-color: rgba(var(--ct-light-rgb), 0.8) !important;
}

/* Smooth transitions for theme changes */
html, body, .navbar-custom, .content-page {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode specific adjustments */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--ct-gray-800) !important;
}

[data-bs-theme="dark"] .border-secondary {
    border-color: var(--ct-gray-600) !important;
}

/* Dark mode form input styling */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border-strong) !important;
    color: var(--brand-text-heading) !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--brand-text-muted) !important;
    opacity: 1;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text-muted) !important;
}

/* Dark mode checkbox and radio styling */
[data-bs-theme="dark"] .form-check-input {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-success-green) !important;
    border-color: var(--brand-success-green) !important;
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--brand-border-strong) !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

/* Dark mode text colors */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text {
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--brand-text-muted) !important;
}

/* Dark mode file input styling */
[data-bs-theme="dark"] .form-control[type="file"] {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] .form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--brand-border);
    border-color: var(--brand-border);
    color: var(--brand-text-heading);
}

/* Dark mode dropdown styling */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--brand-border) !important;
    color: var(--brand-text-heading) !important;
}

/* Topbar theme adjustments */
[data-topbar-color="dark"] .navbar-custom {
    background-color: var(--ct-dark) !important;
    color: var(--ct-white) !important;
}

[data-topbar-color="light"] .navbar-custom {
    background-color: var(--ct-white) !important;
    color: var(--ct-dark) !important;
}

[data-topbar-color="brand"] .navbar-custom {
    background: linear-gradient(135deg, var(--ct-primary), var(--ct-secondary)) !important;
    color: var(--ct-white) !important;
}

/* Enhanced form styling for better dark mode appearance */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-radius: 0.375rem !important;
    transition: all 0.15s ease-in-out !important;
}

[data-bs-theme="dark"] .form-control:hover:not(:focus),
[data-bs-theme="dark"] .form-select:hover:not(:focus) {
    border-color: #adb5bd !important;
}

/* Input mask specific styling */
[data-bs-theme="dark"] input[data-inputmask],
[data-bs-theme="dark"] input[data-mask] {
    background-color: var(--brand-surface-muted) !important;
    color: var(--brand-text-heading) !important;
    border-color: var(--brand-form-border) !important;
}

/* Better contrast for form sections */
[data-bs-theme="dark"] .card {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text-heading) !important;
}

/* Button styling for dark mode */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--brand-text-muted) !important;
    border-color: var(--brand-border-strong) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--brand-border) !important;
    border-color: var(--brand-border-strong) !important;
    color: var(--brand-text-heading) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-settings-offcanvas .avatar-md {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .theme-settings-offcanvas .col-6 {
        margin-bottom: 0.5rem;
    }
}

/* Additional dark mode input and form overrides */
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border-strong) !important;
    color: var(--brand-text-heading) !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
    color: var(--brand-text-muted) !important;
}

/* Dark mode for custom inputs and special classes */
[data-bs-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
}

[data-bs-theme="dark"] .custom-file-label {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-heading) !important;
}

[data-bs-theme="dark"] .custom-select {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-heading) !important;
}

/* Better visibility for invalid feedback in dark mode */
[data-bs-theme="dark"] .invalid-feedback {
    color: #f8b4b4 !important;
}

[data-bs-theme="dark"] .valid-feedback {
    color: #b8e6b8 !important;
}

/* Dark mode range slider styling */
[data-bs-theme="dark"] .irs {
    font-family: inherit;
}

[data-bs-theme="dark"] .irs--flat .irs-line {
    background-color: #6c757d !important;
    border: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-bar {
    background-color: #2cc701 !important;
    border: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-handle {
    background-color: #ffffff !important;
    border: 2px solid #2cc701 !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-handle > i:first-child {
    background-color: #2cc701 !important;
}

[data-bs-theme="dark"] .irs--flat .irs-handle:hover {
    background-color: #f8f9fa !important;
}

[data-bs-theme="dark"] .irs--flat .irs-min,
[data-bs-theme="dark"] .irs--flat .irs-max {
    color: var(--brand-text-muted) !important;
    background-color: var(--brand-surface-muted) !important;
    border-radius: 4px !important;
}

[data-bs-theme="dark"] .irs--flat .irs-from,
[data-bs-theme="dark"] .irs--flat .irs-to,
[data-bs-theme="dark"] .irs--flat .irs-single {
    color: #ffffff !important;
    background-color: #2cc701 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    border: none !important;
    outline: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-from:before,
[data-bs-theme="dark"] .irs--flat .irs-to:before,
[data-bs-theme="dark"] .irs--flat .irs-single:before {
    border-top-color: #2cc701 !important;
}

[data-bs-theme="dark"] .irs--flat .irs-grid-pol {
    background-color: #6c757d !important;
}

[data-bs-theme="dark"] .irs--flat .irs-grid-text {
    color: #adb5bd !important;
}

/* Range slider track styling for dark mode */
[data-bs-theme="dark"] .irs--flat .irs-bar--single {
    background: linear-gradient(to right, #2cc701, #2cc701) !important;
}

/* Additional range slider enhancements */
[data-bs-theme="dark"] .irs--flat .irs-handle {
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .irs--flat .irs-handle:active {
    transform: scale(1.1);
}

[data-bs-theme="dark"] .irs--flat .irs-single {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* HTML5 range input styling for dark mode */
[data-bs-theme="dark"] input[type="range"] {
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

[data-bs-theme="dark"] input[type="range"]::-webkit-slider-track {
    background: #6c757d !important;
    height: 6px !important;
    border-radius: 3px !important;
}

[data-bs-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    border: 2px solid #2cc701 !important;
    border-radius: 50% !important;
    height: 20px !important;
    width: 20px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-bs-theme="dark"] input[type="range"]::-moz-range-track {
    background: #6c757d !important;
    height: 6px !important;
    border-radius: 3px !important;
    border: none !important;
}

[data-bs-theme="dark"] input[type="range"]::-moz-range-thumb {
    background: #ffffff !important;
    border: 2px solid #2cc701 !important;
    border-radius: 50% !important;
    height: 20px !important;
    width: 20px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Range slider container styling */
[data-bs-theme="dark"] .range-slider-container {
    background-color: transparent !important;
}

/* Ensure tooltip text is readable */
[data-bs-theme="dark"] .irs--flat .irs-single,
[data-bs-theme="dark"] .tooltip {
    text-shadow: none !important;
}

/* Range slider value display styling */
[data-bs-theme="dark"] .range-value,
[data-bs-theme="dark"] .slider-value {
    color: #ffffff !important;
    background-color: #2cc701 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    border: none !important;
    outline: none !important;
}

/* Ion Range Slider specific dark mode fixes */
[data-bs-theme="dark"] .irs {
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .irs-with-grid .irs-grid {
    height: 25px !important;
}

[data-bs-theme="dark"] .irs--flat .irs-grid-pol {
    background-color: #495057 !important;
    width: 1px !important;
}

[data-bs-theme="dark"] .irs--flat .irs-grid-pol.small {
    height: 8px !important;
}

/* Ensure proper spacing and alignment */
[data-bs-theme="dark"] .irs-slider {
    top: 25px !important;
}

/* Range input hover effects */
[data-bs-theme="dark"] input[type="range"]:hover::-webkit-slider-thumb {
    background: #f8f9fa !important;
    transform: scale(1.1) !important;
}

[data-bs-theme="dark"] input[type="range"]:hover::-moz-range-thumb {
    background: #f8f9fa !important;
    transform: scale(1.1) !important;
}

/* Remove all outlines and borders from range slider elements */
[data-bs-theme="dark"] .irs,
[data-bs-theme="dark"] .irs *,
[data-bs-theme="dark"] input[type="range"],
[data-bs-theme="dark"] input[type="range"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-line {
    border: none !important;
    outline: none !important;
}

[data-bs-theme="dark"] .irs--flat .irs-handle:focus,
[data-bs-theme="dark"] .irs--flat .irs-handle:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure the slider track has the green fill color */
[data-bs-theme="dark"] .irs--flat .irs-bar {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    border: none !important;
    outline: none !important;
}

/* Additional comprehensive slider bar overrides */
[data-bs-theme="dark"] .irs .irs-bar {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
}

[data-bs-theme="dark"] .irs--flat .irs-bar,
[data-bs-theme="dark"] .irs--flat .irs-bar--single {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    background-image: none !important;
}

/* Override any remaining primary color references */
[data-bs-theme="dark"] .irs--flat .irs-handle > i:first-child,
[data-bs-theme="dark"] .irs--flat .irs-bar,
[data-bs-theme="dark"] .irs--flat .irs-from,
[data-bs-theme="dark"] .irs--flat .irs-to,
[data-bs-theme="dark"] .irs--flat .irs-single,
[data-bs-theme="dark"] .irs--flat .irs-from:before,
[data-bs-theme="dark"] .irs--flat .irs-to:before,
[data-bs-theme="dark"] .irs--flat .irs-single:before {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    border-color: #2cc701 !important;
    border-top-color: #2cc701 !important;
}

/* Force override any blue colors in slider */
[data-bs-theme="dark"] .irs * {
    background-color: initial !important;
}

[data-bs-theme="dark"] .irs--flat .irs-bar * {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
}

/* Ultra-specific overrides to force green color on ALL slider elements */
[data-bs-theme="dark"] .irs .irs-bar,
[data-bs-theme="dark"] .irs--flat .irs-bar,
[data-bs-theme="dark"] .irs--flat .irs-bar--single,
[data-bs-theme="dark"] .irs .irs-bar--single,
[data-bs-theme="dark"] .irs-bar,
[data-bs-theme="dark"] .irs-bar--single {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    background-image: linear-gradient(to right, #2cc701, #2cc701) !important;
}

/* Remove any potential gradients or patterns */
[data-bs-theme="dark"] .irs .irs-bar::before,
[data-bs-theme="dark"] .irs .irs-bar::after,
[data-bs-theme="dark"] .irs--flat .irs-bar::before,
[data-bs-theme="dark"] .irs--flat .irs-bar::after {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    display: none !important;
}

/* Override any possible CSS variables */
[data-bs-theme="dark"] .irs {
    --primary-color: #2cc701 !important;
    --irs-bar-color: #2cc701 !important;
    --slider-color: #2cc701 !important;
}

/* Target specific blue color overrides for sliders */
[data-bs-theme="dark"] .irs .irs-bar[style*="#515df3"],
[data-bs-theme="dark"] .irs--flat .irs-bar[style*="#515df3"],
[data-bs-theme="dark"] .irs .irs-bar[style*="rgb(81, 93, 243)"],
[data-bs-theme="dark"] .irs--flat .irs-bar[style*="rgb(81, 93, 243)"] {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
}

/* Final override for ion range slider */
[data-bs-theme="dark"] .irs .irs-bar,
[data-bs-theme="dark"] .irs--flat .irs-bar {
    background: #2cc701 !important;
    background-color: #2cc701 !important;
    background-image: none !important;
}

/* Dark mode language dropdown styling */
[data-bs-theme="dark"] .language-dropdown .nav-link {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .language-dropdown .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-menu {
    background-color: var(--brand-menu-bg-dark) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-item {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-item:hover,
[data-bs-theme="dark"] .language-dropdown .dropdown-item:focus {
    background-color: var(--brand-border) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-item .btn {
    color: #ffffff !important;
    text-decoration: none !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-item .btn:hover {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .language-dropdown .dropdown-item .align-middle {
    color: #ffffff !important;
}

/* Animation for theme switching */
@keyframes themeSwitch {
    0% { opacity: 0.8; transform: scale(0.98); }
    50% { opacity: 0.9; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

.theme-switching {
    animation: themeSwitch 0.4s ease-in-out;
}