/* ============================================================================
   DARK MODE - PREMIUM FEATURE (CLEAN & COMPREHENSIVE)
   ============================================================================ */

/* Dark mode class applied to body when enabled */
body.dark-mode {
    /* Base colors */
    --bg: #0a0a0a;
    --surface: #1a1a1a;
    --surface-elevated: #242424;
    --surface-hover: #2d2d2d;
    --text: #e8e8e8;
    --text-light: #b0b0b0;
    --text-disabled: #666666;
    --border: #333333;

    /* Accent colors (keep vibrant in dark mode) */
    --green: #6CFF00;
    --green-dark: #5AE000;
    --purple: #DA9FFF;
    --purple-dark: #C785FF;
    --blue: #4DD0FF;
    --blue-dark: #33C2FF;
    --orange: #FFB040;
    --pink: #FF85B5;
    --yellow: #FFD740;
    --red: #FF6B6B;

    /* Shadows adjusted for dark mode */
    --shadow: 0 4px 20px rgba(0,0,0,0.6);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.8);

    background: var(--bg);
    color: var(--text);
}

/* ============================================================================
   SMOOTH TRANSITIONS
   ============================================================================ */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================================================
   LANDING PAGE
   ============================================================================ */

body.dark-mode .hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

body.dark-mode .hero h1,
body.dark-mode .hero p,
body.dark-mode .hero-content {
    color: var(--text);
}

body.dark-mode .hero-badge {
    background: rgba(218, 159, 255, 0.15);
    color: var(--purple);
    border: 1px solid var(--purple);
}

/* ============================================================================
   CARDS & SURFACES
   ============================================================================ */

body.dark-mode .feature-card,
body.dark-mode .step-card,
body.dark-mode .pricing-card,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .section,
body.dark-mode .control-panel,
body.dark-mode .settings-panel,
body.dark-mode .info-box,
body.dark-mode .design-card,
body.dark-mode .designs-grid > div,
body.dark-mode .stat-card,
body.dark-mode .onboarding-card {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

body.dark-mode .feature-card:hover,
body.dark-mode .step-card:hover,
body.dark-mode .pricing-card:hover,
body.dark-mode .panel:hover,
body.dark-mode .card:hover,
body.dark-mode .design-card:hover,
body.dark-mode .panel-hover:hover {
    background: var(--surface-elevated);
    border-color: var(--purple);
}

body.dark-mode .pricing-card.popular {
    border: 2px solid var(--purple);
}

/* Special gradient for stat cards */
body.dark-mode .stat-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

/* ============================================================================
   MAIN APP INTERFACE
   ============================================================================ */

body.dark-mode .container,
body.dark-mode .app-container {
    background: var(--bg);
}

/* Left and right column panels */
body.dark-mode .controls,
body.dark-mode .sequence-panel {
    background: var(--surface);
    border-color: var(--border);
}

/* Header */
body.dark-mode .header,
body.dark-mode .admin-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

body.dark-mode .header h1 {
    color: var(--text);
}

/* Mobile step indicator and buttons */
body.dark-mode .mobile-step-indicator {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

body.dark-mode .mobile-step {
    background: var(--surface-elevated) !important;
    color: var(--text-light);
}

body.dark-mode .mobile-step.active {
    background: var(--purple) !important;
    color: white;
}

/* ============================================================================
   TEXT ELEMENTS
   ============================================================================ */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .feature-card h3,
body.dark-mode .step-card h3,
body.dark-mode .pricing-card h3,
body.dark-mode .design-card h4,
body.dark-mode .info-box h3 {
    color: var(--text);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode div,
body.dark-mode .design-card p {
    color: var(--text);
}

body.dark-mode .text-light,
body.dark-mode .subtitle,
body.dark-mode .section-subtitle,
body.dark-mode .user-email,
body.dark-mode .design-details,
body.dark-mode .price-currency {
    color: var(--text-light);
}

body.dark-mode .price,
body.dark-mode .design-details strong {
    color: var(--text);
}

body.dark-mode .info-box h3 {
    border-bottom: 1px solid var(--border);
}

body.dark-mode #stringLength,
body.dark-mode #linesGenerated {
    color: var(--purple);
}

body.dark-mode .status,
body.dark-mode #status,
body.dark-mode .status-text {
    color: var(--text);
}

/* ============================================================================
   CONTROLS & INPUTS
   ============================================================================ */

body.dark-mode input[type="range"],
body.dark-mode input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-input,
body.dark-mode .auth-input,
body.dark-mode .color-input,
body.dark-mode .custom-color-input {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(218, 159, 255, 0.2);
}

body.dark-mode input::placeholder {
    color: var(--text-disabled);
}

body.dark-mode input:disabled,
body.dark-mode button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Range sliders */
body.dark-mode input[type="range"] {
    background: var(--surface-elevated);
}

body.dark-mode input[type="range"]::-webkit-slider-track {
    background: var(--surface-elevated);
}

body.dark-mode input[type="range"]::-webkit-slider-thumb {
    background: var(--purple);
}

body.dark-mode input[type="range"]::-moz-range-track {
    background: var(--surface-elevated);
}

body.dark-mode input[type="range"]::-moz-range-thumb {
    background: var(--purple);
}

/* Checkboxes and radio */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    border-color: var(--border);
}

/* Color preview */
body.dark-mode .color-preview {
    border: 1px solid var(--border);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Improve contrast on purple and green buttons */
body.dark-mode .btn-primary,
body.dark-mode .btn-download,
body.dark-mode .btn-restore,
body.dark-mode .btn-cta-primary {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode button[class*="secondary"],
body.dark-mode .custom-color-input button,
body.dark-mode .btn-header {
    background: var(--surface-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-header:hover {
    background: var(--surface-hover);
    border-color: var(--purple);
}

/* Keep primary buttons vibrant */
body.dark-mode .btn-primary,
body.dark-mode .btn-cta-primary {
    /* Keep original colors - they're already vibrant */
}

/* String mode container - override light gradient */
body.dark-mode .string-color-toggle {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

/* String mode buttons */
body.dark-mode .string-mode-btn {
    background: var(--surface-elevated);
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .string-mode-btn:hover {
    background: var(--surface-hover);
    border-color: var(--purple);
}

body.dark-mode .string-mode-btn.active {
    background: var(--surface-hover);
    border-color: var(--purple);
}

/* Color palette dropdown */
body.dark-mode .color-palette-group label {
    color: var(--purple);
}

body.dark-mode .color-palette-group .dropdown-header {
    background: var(--surface-elevated) !important;
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .color-palette-group .dropdown-header:hover {
    background: var(--surface-hover) !important;
    border-color: var(--purple);
}

body.dark-mode .color-palette-group .dropdown-options {
    background: var(--surface-elevated) !important;
    border-color: var(--border);
}

body.dark-mode .color-palette-group .dropdown-option {
    color: var(--text);
    background: transparent;
}

body.dark-mode .color-palette-group .dropdown-option:hover {
    background: var(--surface-hover) !important;
}

/* ============================================================================
   TABS
   ============================================================================ */

body.dark-mode .tabs {
    background: var(--surface);
    border: 1px solid var(--border);
}

body.dark-mode .tab-button {
    color: var(--text-light);
    background: transparent;
}

body.dark-mode .tab-button:hover {
    background: var(--surface-hover);
    color: var(--text);
}

body.dark-mode .tab-button.active {
    background: var(--purple);
    color: white;
}

body.dark-mode .tab-content {
    background: var(--surface);
    border: 1px solid var(--border);
}

/* ============================================================================
   MODALS & DIALOGS
   ============================================================================ */

body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .modal-content,
body.dark-mode .dialog,
body.dark-mode .modal-body,
body.dark-mode .auth-modal,
body.dark-mode .form-container {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

body.dark-mode .modal-header {
    border-bottom: 1px solid var(--border);
}

body.dark-mode .modal-footer {
    border-top: 1px solid var(--border);
}

/* Close button */
body.dark-mode .close,
body.dark-mode .modal-close {
    color: var(--text-light);
}

body.dark-mode .close:hover {
    color: var(--text);
}

/* Auth modal specific */
body.dark-mode .auth-tabs {
    border-bottom: 1px solid var(--border);
}

body.dark-mode .auth-tab {
    color: var(--text-light);
}

body.dark-mode .auth-tab.active {
    color: var(--purple);
    border-bottom-color: var(--purple);
}

/* ============================================================================
   SEQUENCE DISPLAY
   ============================================================================ */

body.dark-mode .sequence-item,
body.dark-mode .sequence-number {
    /* Background removed - handled by JavaScript for proper contrast */
    border: 1px solid var(--border);
    color: var(--text);
}

body.dark-mode .sequence-item:hover {
    background: var(--surface-elevated);
}

body.dark-mode .sequence-item.current {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

body.dark-mode #sequenceDisplay,
body.dark-mode .sequence-container {
    background: var(--surface);
    border-color: var(--border);
}

/* ============================================================================
   VOICE CONTROLS
   ============================================================================ */

body.dark-mode .voice-controls,
body.dark-mode .voice-panel {
    background: var(--surface);
    border: 1px solid var(--border);
}

/* ============================================================================
   FILE UPLOAD
   ============================================================================ */

body.dark-mode .upload-area,
body.dark-mode .file-upload,
body.dark-mode input[type="file"] {
    background: var(--surface-elevated) !important;
    border: 2px dashed var(--border) !important;
    color: var(--text) !important;
}

body.dark-mode .upload-area:hover,
body.dark-mode input[type="file"]:hover {
    background: var(--surface-hover) !important;
    border-color: var(--purple) !important;
}

body.dark-mode .file-indicator {
    background: var(--surface-elevated);
    color: var(--green);
    border: 1px solid var(--border);
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

body.dark-mode .progress-bar,
body.dark-mode .progress-container {
    background: var(--surface-elevated);
}

body.dark-mode .progress-fill {
    background: linear-gradient(90deg, var(--purple), var(--blue));
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */

body.dark-mode .toast {
    background: var(--surface-elevated) !important;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* ============================================================================
   STATUS MESSAGES
   ============================================================================ */

body.dark-mode .status {
    background: var(--surface-elevated) !important;
    color: var(--text);
    border: 1px solid var(--border);
}

/* ============================================================================
   DROPDOWNS & MENUS
   ============================================================================ */

body.dark-mode .dropdown,
body.dark-mode .dropdown-menu,
body.dark-mode .user-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

body.dark-mode .dropdown-item {
    color: var(--text);
}

body.dark-mode .dropdown-item:hover {
    background: var(--surface-hover);
}

body.dark-mode .user-info {
    color: var(--text);
}

/* ============================================================================
   MOBILE UI
   ============================================================================ */

body.dark-mode .mobile-step-indicator {
    background: var(--surface);
    border: 1px solid var(--border);
}

body.dark-mode .step {
    background: var(--surface-elevated);
    color: var(--text);
}

body.dark-mode .step.active {
    background: var(--purple);
    color: white;
}

body.dark-mode .step.complete {
    background: var(--green);
    color: white;
}

/* ============================================================================
   CANVAS (SPECIAL HANDLING)
   ============================================================================ */

/* Canvas background is NOT affected by dark mode */
/* It's controlled by string mode:
   - White strings = black canvas background
   - Black/color strings = white canvas background */
body.dark-mode canvas {
    /* Don't override - controlled by string mode */
}

/* But the canvas container can be dark */
body.dark-mode .canvas-container,
body.dark-mode #canvas-container {
    background: #000000 !important; /* Pure black to match canvas dark corners - force override */
}

/* ============================================================================
   DIVIDERS & BORDERS
   ============================================================================ */

body.dark-mode hr,
body.dark-mode .divider {
    border-color: var(--border);
}

/* ============================================================================
   LINKS
   ============================================================================ */

body.dark-mode a {
    color: var(--blue);
}

body.dark-mode a:hover {
    color: var(--blue-dark);
}

/* ============================================================================
   STATUS STATES
   ============================================================================ */

body.dark-mode .error {
    background: rgba(255, 107, 107, 0.15);
    color: var(--red);
    border: 1px solid var(--red);
}

body.dark-mode .success {
    background: rgba(108, 255, 0, 0.15);
    color: var(--green);
    border: 1px solid var(--green);
}

body.dark-mode .warning {
    background: rgba(255, 176, 64, 0.15);
    color: var(--orange);
    border: 1px solid var(--orange);
}

body.dark-mode .info {
    background: rgba(77, 208, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
}

/* ============================================================================
   SCROLLBARS
   ============================================================================ */

body.dark-mode ::-webkit-scrollbar {
    background: var(--surface);
    width: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--surface);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================================================
   ADMIN DASHBOARD
   ============================================================================ */

body.dark-mode .filters {
    background: var(--surface);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

body.dark-mode footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark-mode footer p {
    color: var(--text) !important;
}

body.dark-mode footer span {
    color: var(--border) !important;
}

/* ============================================================================
   CANVAS CONTAINER & CORNER DARKENING
   ============================================================================ */

body.dark-mode .canvas-container {
    background: #000000 !important; /* Pure black to match canvas dark corners - force override */
}

body.dark-mode .canvas-wrapper {
    background: #000000 !important; /* Pure black wrapper to prevent white edges */
}

/* Canvas corners are now drawn directly on the canvas via JavaScript
   for pixel-perfect alignment with the circular image */

/* Active/current pin highlighting - more prominent in dark mode */
body.dark-mode .sequence-item.active {
    background: #ff3333 !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.8), 0 0 5px rgba(255, 51, 51, 1) !important;
    border: 2px solid #ff6666 !important;
    transform: scale(1.1);
}

/* ============================================================================
   NOTIFICATIONS PANEL - DARK MODE FIX
   ============================================================================ */

/* Notifications panel in dark mode */
body.dark-mode .notifications-panel {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body.dark-mode .notifications-header {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

body.dark-mode .notifications-header h2 {
    color: var(--text) !important;
}

body.dark-mode .notifications-header button {
    color: var(--text-light) !important;
}

body.dark-mode .notifications-header button:hover {
    background: var(--surface-hover) !important;
}

body.dark-mode .notifications-tabs {
    border-bottom-color: var(--border) !important;
}

body.dark-mode .notification-tab {
    color: var(--text-light) !important;
}

body.dark-mode .notification-tab.active {
    background: var(--green) !important;
    color: #000000 !important; /* Use black text for better contrast on bright green background */
    font-weight: 600 !important;
}

body.dark-mode .notifications-list {
    background: var(--bg) !important;
}

body.dark-mode .notification-item {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

body.dark-mode .notification-item:hover {
    background: var(--surface-hover) !important;
    border-color: var(--green) !important;
}

body.dark-mode .notification-item.unread {
    background: var(--surface-elevated) !important;
    border-color: var(--green) !important;
}

body.dark-mode .notification-title {
    color: var(--text) !important;
}

body.dark-mode .notification-message {
    color: var(--text-light) !important;
}

body.dark-mode .notification-time {
    color: var(--text-disabled) !important;
}

body.dark-mode .notification-delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ff6b6b !important;
}

body.dark-mode .notifications-empty {
    color: var(--text-light) !important;
}