/* ── Custom styles that complement Tailwind ── */

/* Fix select/option white background on dark theme */
select, select option {
    background-color: #18181b !important;
    color: #fafafa !important;
}
select option:checked {
    background-color: #27272a !important;
}
select:focus {
    background-color: #18181b !important;
    color: #fafafa !important;
}
/* Ensure all dropdowns in modals and dynamic content are dark */
[id*="modal"] select,
[id*="modal"] select option,
#admin-content select,
#admin-content select option,
.bg-surface select,
.bg-surface select option {
    background-color: #18181b !important;
    color: #fafafa !important;
}

/* Global custom scrollbar */
html, body, * {
    scrollbar-width: thin !important;
    scrollbar-color: #1c1c20 #060608 !important;
}
*::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
*::-webkit-scrollbar-track { background: #060608 !important; }
*::-webkit-scrollbar-thumb { background: #1c1c20 !important; border-radius: 4px !important; }
*::-webkit-scrollbar-thumb:hover { background: #2a2a30 !important; }
*::-webkit-scrollbar-corner { background: #060608 !important; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #fafafa, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar styling */
.docs-sidebar::-webkit-scrollbar { width: 4px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }

/* Doc body — styles for WYSIWYG HTML content */
.doc-body h1 { font-size: 1.75rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.doc-body h2 { font-size: 1.375rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #27272a; }
.doc-body h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.doc-body p { margin-bottom: 1rem; line-height: 1.8; color: #a1a1aa; }
.doc-body strong { color: #fafafa; }
.doc-body a { color: #6366f1; }
.doc-body a:hover { color: #818cf8; }
.doc-body ul, .doc-body ol { padding-left: 1.5rem; margin-bottom: 1rem; color: #a1a1aa; }
.doc-body li { margin-bottom: 0.25rem; line-height: 1.8; }
.doc-body blockquote { border-left: 3px solid #6366f1; padding: 0.75rem 1rem; margin: 1rem 0; background: rgba(99,102,241,0.05); border-radius: 0 8px 8px 0; }
.doc-body blockquote p { margin-bottom: 0; color: #e4e4e7; }
.doc-body code { background: #18181b; padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.8125rem; font-family: 'Cascadia Code', 'Fira Code', monospace; }
.doc-body pre { background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 1rem; overflow-x: auto; margin-bottom: 1.25rem; }
.doc-body pre code { background: none; padding: 0; font-size: 0.8125rem; line-height: 1.6; color: #e4e4e7; }
.doc-body img { max-width: 100%; border-radius: 8px; border: 1px solid #27272a; margin: 1rem 0; }

/* Quill editor overrides for dark theme */
.ql-toolbar.ql-snow { border-color: #27272a !important; background: #111113; border-radius: 8px 8px 0 0; }
.ql-container.ql-snow { border-color: #27272a !important; border-radius: 0 0 8px 8px; }
.ql-editor { color: #e4e4e7; min-height: 200px; font-size: 14px; }
.ql-editor.ql-blank::before { color: #52525b; }
.ql-snow .ql-stroke { stroke: #a1a1aa !important; }
.ql-snow .ql-fill { fill: #a1a1aa !important; }
.ql-snow .ql-picker-label { color: #a1a1aa !important; }
.ql-snow .ql-picker-options { background: #18181b !important; border-color: #27272a !important; }
.ql-snow .ql-picker-item { color: #a1a1aa !important; }
.ql-snow .ql-picker-item:hover { color: #fafafa !important; }
.ql-editor pre.ql-syntax { background: #0a0a0b; color: #e4e4e7; border-radius: 6px; padding: 0.75rem; }