/* Custom Dark Glass Theme for Generator Editors */
:root {
    --editor-card-bg: #111827;
    --editor-card-border: rgba(255, 255, 255, 0.08);
    --editor-input-bg: #1e293b;
    --editor-input-border: rgba(255, 255, 255, 0.15);
    --editor-text-main: #ffffff;
    --editor-text-muted: #94a3b8;
    --editor-text-dim: #cbd5e1;
}

/* Background for main editor layout */
main {
    background-color: #0a0e1a !important;
}

/* Main white panels convert to dark glass cards */
.bg-white {
    background-color: var(--editor-card-bg) !important;
    border-color: var(--editor-card-border) !important;
    color: var(--editor-text-main) !important;
}

/* Light gray backgrounds convert to dark panel backgrounds */
.bg-gray-50, .bg-gray-100 {
    background-color: #172033 !important;
    border-color: var(--editor-card-border) !important;
    color: var(--editor-text-main) !important;
}

/* Sticky headers background fix */
.sticky.top-0 {
    background-color: var(--editor-card-bg) !important;
    border-color: var(--editor-card-border) !important;
}

/* Text colors */
.text-gray-900, .text-gray-800, h1, h2, h3 {
    color: #ffffff !important;
}

.text-gray-700, .text-gray-600, label {
    color: var(--editor-text-dim) !important;
}

.text-gray-500, .text-gray-400 {
    color: var(--editor-text-muted) !important;
}

/* Borders */
.border, .border-b, .border-t, .border-l, .border-r {
    border-color: var(--editor-card-border) !important;
}

/* Inputs, Selects, Textareas */
input[type="text"],
input[type="number"],
input[type="color"],
input[type="file"],
select,
textarea,
.para-name,
.para-text {
    background-color: var(--editor-input-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--editor-input-border) !important;
    border-radius: 8px !important;
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2) !important;
    outline: none !important;
}

/* Pro Plan Badge */
.bg-blue-50 {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    color: #e0e7ff !important;
}

/* Buttons in Presets & Action Bar */
.bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #a78bfa !important;
}
.bg-indigo-100:hover {
    background-color: rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
}

.bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}
.bg-gray-200:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
.bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.35) !important;
}

/* Paragraph Blocks inside Editor */
.paragraph-block {
    background-color: #1a2332 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Custom Scrollbar for form left pane */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #0a0e1a;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}