/* Modern Blue-Gray & Orange CSS Overrides */
:root {
    --bg-base: #0f172a;
    /* slate-900 */
    --bg-surface: #1e293b;
    /* slate-800 */
    --bg-surface-elevated: #334155;
    /* slate-700 */
    --accent-orange: #f97316;
    /* orange-500 */
    --accent-orange-hover: #ea580c;
    /* orange-600 */
    --text-primary: #f8fafc;
    /* slate-50 */
    --text-secondary: #cbd5e1;
    /* slate-300 */
    --border-color: rgba(255, 255, 255, 0.08);
}

/* Base Body Application */
body.dark-edition,
.dark-edition .wrapper,
html {
    background-color: var(--bg-base) !important;
}

/* Sidebar and Main Panels */
.dark-edition .sidebar,
.dark-edition .main-panel,
.dark-edition .sidebar::after,
.dark-edition .sidebar[data-color="orange"]::after {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
}

/* Sidebar Active Items */
.dark-edition .sidebar[data-color="orange"] li.active>a {
    background-color: var(--accent-orange) !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(249, 115, 22, 0.4) !important;
    color: #ffffff !important;
}

/* Top Navbar */
.dark-edition .navbar {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Modals and Cards */
.dark-edition .modal-content,
.dark-edition .card,
.dark-edition .wp-theme-context,
.dark-edition .wp-background-context,
.dark-edition .wp-model-context,
.dark-edition .wp-camera-view,
.dark-edition .specification,
.price-adjustment {
    /* background-color: var(--bg-surface-elevated) !important; */
    border-radius: 12px !important;
    /* border: 1px solid var(--border-color); */
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important; */
}

/* Buttons */
.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active:focus,
.btn.btn-warning:active:hover,
.btn.btn-warning.active:focus,
.btn.btn-warning.active:hover {
    background-color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(249, 115, 22, 0.4) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.btn.btn-outline {
    border-color: var(--text-secondary) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}

.btn.btn-outline:hover {
    border-color: var(--accent-orange) !important;
    color: var(--accent-orange) !important;
}

/* Toggles and Sliders */
.dark-edition .togglebutton label input[type=checkbox]:checked+.toggle {
    background-color: rgba(249, 115, 22, 0.5) !important;
}

.dark-edition .togglebutton label input[type=checkbox]:checked+.toggle:after {
    border-color: var(--accent-orange) !important;
}

.slider.slider-info .slider-selection {
    background-image: none !important;
    background-color: var(--accent-orange) !important;
}

.slider.slider-info .slider-handle {
    background-image: none !important;
    background-color: var(--text-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* Typography Overrides */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
a,
span,
button,
input {
    font-family: 'Outfit', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--text-primary) !important;
}

p,
span,
small,
label {
    color: var(--text-secondary) !important;
}

.panel-info span {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.nav-pills .nav-item .nav-link {
    color: var(--text-secondary) !important;
}

.nav-pills .nav-item .nav-link.active {
    color: var(--text-primary) !important;
}

/* Inputs */
.form-control,
.is-focused .form-control {
    background-image: linear-gradient(to top, var(--accent-orange) 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, rgba(180, 180, 180, 0.1) 1px, rgba(180, 180, 180, 0) 1px) !important;
    color: var(--text-primary) !important;
}