/**
 * BizzPlugin Options Framework - Dark Mode Styles
 * 
 * Dark theme styles for the options framework.
 * Applied when .bizzplugin-dark-mode class is present on wrapper.
 * 
 * @package BizzPlugin_Options_Framework
 * @version 1.0.0
 */
body.bizzplugin-panel-page.bizzplugin-theme-dark #wpcontent {
    background: black;
}
/* =============================================
   Dark Mode CSS Variables
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode {
    --bizzplugin-primary: #60a5fa;
    --bizzplugin-primary-dark: #3b82f6;
    --bizzplugin-primary-light: #1e3a5f;
    --bizzplugin-success: #22c55e;
    --bizzplugin-error: #f87171;
    --bizzplugin-error-dark: #dc2626;
    --bizzplugin-error-light: #ef4444;
    --bizzplugin-warning: #fbbf24;
    --bizzplugin-text: #e5e7eb;
    --bizzplugin-text-secondary: #9ca3af;
    --bizzplugin-border: #374151;
    --bizzplugin-border-dark: #4b5563;
    --bizzplugin-bg: #1f2937;
    --bizzplugin-bg-secondary: #111827;
    --bizzplugin-bg-white: #1f2937;
    --bizzplugin-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --bizzplugin-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    --bizzplugin-premium-color: #4ade80;
    --bizzplugin-free-color: #9ca3af;
}

/* =============================================
   Dark Mode Navigation
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav {
    background: #111827;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-header {
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-title-main {
    color: #f3f4f6;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-link {
    color: #d1d5db;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-link:hover,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-item.active > .bizzplugin-nav-link {
    background: #374151;
    color: #60a5fa;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-sublink {
    color: #9ca3af;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-sublink:hover,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-nav-sublink.current {
    color: #60a5fa;
    background: #1f2937;
}

/* =============================================
   Dark Mode Content Area
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-content {
    background: #1f2937;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-section-header h2 {
    color: #f3f4f6;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-section-header p {
    color: #9ca3af;
}

/* =============================================
   Dark Mode Fields
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-field {

}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-field-label {
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-field-desc {
    color: #9ca3af;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-input, .bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-textarea, .bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-select {
    background: #030a13;
    border-color: #374151;
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-input:focus,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-textarea:focus,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-input::placeholder,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-textarea::placeholder {
    color: #6b7280;
}

/* =============================================
   Dark Mode Buttons
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .button {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .button:hover {
    background: #4b5563;
    border-color: #6b7280;
    color: #f3f4f6;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .button-primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .button-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* =============================================
   Dark Mode Sidebar
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-sidebar {
    background: #111827;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-sidebar-card {
    background: #1f2937;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-sidebar-card-header {
    background: #374151;
    border-color: #4b5563;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-sidebar-card-title {
    color: #f3f4f6;
}

/* =============================================
   Dark Mode Repeater & Single Repeater
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-repeater-item,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-single-repeater-item {
    background: #1f2937;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-repeater-item:hover,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-single-repeater-item:hover {
    border-color: #4b5563;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-repeater-item-header {
    background: #111827;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-repeater-item-title {
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-single-repeater-item:hover .bizzplugin-single-repeater-remove {
    opacity: 1;
    background: #d42525;
    color: white;
}

/* =============================================
   Dark Mode Toggle/Switch
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-toggle-slider {
    background: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-toggle-input:checked + .bizzplugin-toggle-slider {
    background: #3b82f6;
}

/* =============================================
   Dark Mode Search
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-search-input {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-search-input:focus {
    border-color: #60a5fa;
}

/* =============================================
   Dark Mode Badges
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-badge-free {
    background: #374151;
    color: #9ca3af;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-badge-pro {
    background: #065f46;
    color: #34d399;
}

/* =============================================
   Dark Mode Theme Switcher
   ============================================= */

.bizzplugin-theme-switcher {
    background: transparent;
    border: 1px solid var(--bizzplugin-border);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--bizzplugin-text-secondary);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bizzplugin-theme-switcher:hover {
    background: var(--bizzplugin-bg);
    color: var(--bizzplugin-primary);
    border-color: var(--bizzplugin-primary);
}

.bizzplugin-theme-switcher .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-theme-switcher {
    color: #fbbf24;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-theme-switcher:hover {
    background: #374151;
    color: #fcd34d;
    border-color: #fbbf24;
}

/* =============================================
   Dark Mode Notifications
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-notification {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-notification-success {
    border-color: #22c55e;
    background: #052e16;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-notification-error {
    border-color: #ef4444;
    background: #450a0a;
}

/* =============================================
   Dark Mode Image Select / Option Select
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-image-select-item,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-option-select-item {
    background: #1f2937;
    border-color: #374151;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-image-select-item:hover,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-option-select-item:hover {
    border-color: #60a5fa;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-image-select-item.selected,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-option-select-item.selected {
    border-color: #3b82f6;
    background: #1e3a5f;
}

/* =============================================
   Dark Mode Code Blocks
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode code,
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-code-block {
    background: #111827;
    color: #e5e7eb;
    border-color: #374151;
}

/* =============================================
   Dark Mode Scrollbar
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode ::-webkit-scrollbar-track {
    background: #1f2937;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-field-error {
    background: #fef2f224;
}
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-save-status.error {
    background: #fef2f224;
    color: var(--bizzplugin-error-light);
}

/* =============================================
   Dark Mode Topbar
   ============================================= */

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar {
    background: #111827;
    border-color: #374151;
}

/* Dark mode menu-style links */
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-menu-link {
    color: #9ca3af;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-menu-link:hover {
    color: #60a5fa;
    background: #1f2937;
}

/* Dark mode button-style links */
.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn:hover {
    background: #374151;
    color: #60a5fa;
    border-color: #60a5fa;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn.bizzplugin-topbar-btn-primary {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn.bizzplugin-topbar-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn.bizzplugin-topbar-btn-success {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.bizzplugin-framework-wrap.bizzplugin-dark-mode .bizzplugin-topbar-btn.bizzplugin-topbar-btn-success:hover {
    background: #16a34a;
    border-color: #16a34a;
}