/**
 * AI Page Builder Design System Overrides
 * Overrides existing styles to match the unified design system
 */

/* Override root variables from editor.css */
:root {
    /* Force our primary violet color everywhere */
    --aipb-primary: #9933CC !important;
    --aipb-primary-dark: #7d2eb8 !important;
    --aipb-primary-light: #b366d9 !important;
    --aipb-secondary: #7d2eb8 !important;
    --aipb-accent: #9933CC !important;
    
    /* Update other colors to match dark theme */
    --aipb-dark: #1e1e1e !important;
    --aipb-light: #ffffff !important;
    --aipb-gray: #b3b3b3 !important;
}

/* Force Inter font everywhere */
body,
.aipb-toolbar,
.aipb-prompt-container,
.aipb-modal,
.aipb-sidebar,
.aipb-popup,
.aipb-form,
.aipb-button,
.aipb-input,
.aipb-textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Dark theme for toolbar */
.aipb-toolbar {
    background: rgba(30, 30, 30, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(51, 51, 51, 0.5) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.aipb-toolbar h3 {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: normal !important;
}

/* Update all buttons to match design system - ONLY editor UI */
.aipb-btn,
.aipb-toolbar button,
.aipb-prompt-container button,
.aipb-modal button,
.aipb-sidebar button[class^="aipb-"],
.aipb-popup button[class^="aipb-"],
.aipb-theme-builder button[class^="aipb-"],
.aipb-extra-code-panel button,
.aipb-code-editor-panel button {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

/* Primary buttons - ONLY for editor UI elements */
.aipb-btn-primary,
.aipb-button-primary,
.aipb-toolbar button.aipb-btn-primary,
.aipb-modal button.aipb-btn-primary,
.aipb-popup button.aipb-btn-primary,
.aipb-sidebar button.aipb-btn-primary {
    background: #9933CC !important;
    color: white !important;
    border: 1px solid #9933CC !important;
}

.aipb-btn-primary:hover,
.aipb-button-primary:hover,
.aipb-toolbar button.aipb-btn-primary:hover,
.aipb-modal button.aipb-btn-primary:hover,
.aipb-popup button.aipb-btn-primary:hover,
.aipb-sidebar button.aipb-btn-primary:hover {
    background: #7d2eb8 !important;
    border-color: #7d2eb8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(153, 51, 204, 0.3) !important;
}

/* Secondary/Ghost buttons - ONLY for editor UI elements */
.aipb-btn-secondary,
.aipb-button-ghost,
.aipb-button-secondary,
.aipb-toolbar button.aipb-btn-secondary,
.aipb-modal button.aipb-btn-secondary,
.aipb-popup button.aipb-btn-secondary,
.aipb-sidebar button.aipb-btn-secondary {
    background: transparent !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
}

.aipb-btn-secondary:hover,
.aipb-button-ghost:hover,
.aipb-button-secondary:hover,
.aipb-toolbar button.aipb-btn-secondary:hover,
.aipb-modal button.aipb-btn-secondary:hover,
.aipb-popup button.aipb-btn-secondary:hover,
.aipb-sidebar button.aipb-btn-secondary:hover {
    background: #252525 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* Danger buttons - ONLY for editor UI elements */
.aipb-btn-danger,
.aipb-button-danger,
.aipb-toolbar button.aipb-btn-danger,
.aipb-modal button.aipb-btn-danger,
.aipb-popup button.aipb-btn-danger,
.aipb-sidebar button.aipb-btn-danger {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
}

.aipb-btn-danger:hover,
.aipb-button-danger:hover,
.aipb-toolbar button.aipb-btn-danger:hover,
.aipb-modal button.aipb-btn-danger:hover,
.aipb-popup button.aipb-btn-danger:hover,
.aipb-sidebar button.aipb-btn-danger:hover {
    background: #ef4444 !important;
    color: white !important;
}

/* Dark theme for prompt container */
.aipb-prompt-container {
    background: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.aipb-prompt-container h3 {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
}

.aipb-prompt-input,
.aipb-prompt-container textarea,
.aipb-prompt-container input {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    font-family: 'Inter', sans-serif !important;
}

.aipb-prompt-input:focus,
.aipb-prompt-container textarea:focus,
.aipb-prompt-container input:focus {
    border-color: #9933CC !important;
    background: #2a2a2a !important;
    box-shadow: 0 0 0 1px #9933CC !important;
}

/* Prompt toolbar buttons */
.aipb-prompt-toolbar button {
    background: transparent !important;
    color: #b3b3b3 !important;
    border: none !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
}

.aipb-prompt-toolbar button:hover {
    background: #333333 !important;
    color: #9933CC !important;
}

.aipb-prompt-toolbar button.active {
    background: #9933CC !important;
    color: white !important;
}

/* Code editor dark theme */
.aipb-code-editor,
.aipb-custom-code-editor {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

.aipb-code-editor textarea,
.aipb-custom-code-editor textarea {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace !important;
}

/* Modal dark theme */
.aipb-modal-content,
.aipb-popup-content {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.aipb-modal h2,
.aipb-modal h3,
.aipb-popup h2,
.aipb-popup h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.aipb-modal p,
.aipb-popup p {
    color: #b3b3b3 !important;
}

/* Inputs dark theme - ONLY for editor UI elements */
.aipb-toolbar input,
.aipb-toolbar textarea,
.aipb-toolbar select,
.aipb-modal input,
.aipb-modal textarea,
.aipb-modal select,
.aipb-popup input,
.aipb-popup textarea,
.aipb-popup select,
.aipb-sidebar input,
.aipb-sidebar textarea,
.aipb-sidebar select,
.aipb-prompt-container input,
.aipb-prompt-container textarea,
input.aipb-input,
textarea.aipb-textarea,
select.aipb-select {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
}

/* Color inputs should not have padding */
.aipb-toolbar input[type="color"],
.aipb-modal input[type="color"],
.aipb-popup input[type="color"],
.aipb-sidebar input[type="color"],
input[type="color"].aipb-color-input {
    padding: 0 !important;
    border-radius: 7px !important;
    cursor: pointer !important;
}

.aipb-toolbar input:focus,
.aipb-toolbar textarea:focus,
.aipb-toolbar select:focus,
.aipb-modal input:focus,
.aipb-modal textarea:focus,
.aipb-modal select:focus,
.aipb-popup input:focus,
.aipb-popup textarea:focus,
.aipb-popup select:focus,
.aipb-sidebar input:focus,
.aipb-sidebar textarea:focus,
.aipb-sidebar select:focus,
.aipb-prompt-container input:focus,
.aipb-prompt-container textarea:focus,
input.aipb-input:focus,
textarea.aipb-textarea:focus,
select.aipb-select:focus {
    border-color: #9933CC !important;
    background: #2a2a2a !important;
    box-shadow: 0 0 0 1px #9933CC !important;
    outline: none !important;
}

/* Labels - ONLY for editor UI elements */
.aipb-toolbar label,
.aipb-modal label,
.aipb-popup label,
.aipb-sidebar label,
.aipb-form label,
.aipb-prompt-container label,
label.aipb-label {
    color: #e0e0e0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
    text-transform: unset !important;
}

/* Spinner/Loading */
.spinner,
.aipb-spinner {
    border-color: #333333 !important;
    border-top-color: #9933CC !important;
}

/* Success messages */
.aipb-toast-success {
    background: #10b981 !important;
}

/* Scrollbars - ONLY for editor UI elements */
.aipb-toolbar::-webkit-scrollbar,
.aipb-modal::-webkit-scrollbar,
.aipb-popup::-webkit-scrollbar,
.aipb-sidebar::-webkit-scrollbar,
.aipb-prompt-container::-webkit-scrollbar,
.aipb-code-editor-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.aipb-toolbar::-webkit-scrollbar-track,
.aipb-modal::-webkit-scrollbar-track,
.aipb-popup::-webkit-scrollbar-track,
.aipb-sidebar::-webkit-scrollbar-track,
.aipb-prompt-container::-webkit-scrollbar-track,
.aipb-code-editor-container::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.aipb-toolbar::-webkit-scrollbar-thumb,
.aipb-modal::-webkit-scrollbar-thumb,
.aipb-popup::-webkit-scrollbar-thumb,
.aipb-sidebar::-webkit-scrollbar-thumb,
.aipb-prompt-container::-webkit-scrollbar-thumb,
.aipb-code-editor-container::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}

.aipb-toolbar::-webkit-scrollbar-thumb:hover,
.aipb-modal::-webkit-scrollbar-thumb:hover,
.aipb-popup::-webkit-scrollbar-thumb:hover,
.aipb-sidebar::-webkit-scrollbar-thumb:hover,
.aipb-prompt-container::-webkit-scrollbar-thumb:hover,
.aipb-code-editor-container::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

/* Remove uppercase from editor buttons only */
.aipb-toolbar button,
.aipb-modal button,
.aipb-popup button,
.aipb-sidebar button,
.aipb-prompt-container button,
button.aipb-btn,
button.aipb-button {
    text-transform: none !important;
}

/* Ensure consistent hover effects for editor buttons */
button.aipb-btn:hover,
button.aipb-button:hover,
.aipb-btn-primary:hover,
.aipb-btn-secondary:hover,
.aipb-btn-danger:hover {
    transform: translateY(-1px);
}

/* Fix font inheritance for editor elements only */
.aipb-toolbar *,
.aipb-modal *,
.aipb-popup *,
.aipb-sidebar *,
.aipb-prompt-container *,
.aipb-code-editor-panel *,
.aipb-extra-code-panel * {
    font-family: inherit;
}

/* Special fix for code areas in editor */
.aipb-code-editor-container pre,
.aipb-code-editor-container code,
.aipb-extra-code-textarea,
pre.aipb-code,
code.aipb-code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace !important;
}