/* XHtml Component Styles */
/* Styled to match XRich.razor and XTBAI.razor */

/* =============================================
   Base Layout & Container Styles
   ============================================= */

/* Main container */
.html-editor-light {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.html-editor-light.html-editor-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bs-body-bg, #fff);
}

/* =============================================
   AI Toolbar Header - Override to match toolbar
   ============================================= */

/* Make AI toolbar border match the editor toolbar */
.html-editor-light .ai-toolbar-header {
    border: 1px solid rgba(108, 117, 125, 0.5) !important;
    border-bottom: none !important;
}

/* =============================================
   Editor Content Area - Keep Light Theme
   ============================================= */

/* DevExpress Blazor HTML Editor - content area stays white */
.html-editor-light .dxbl-html-editor .ql-container,
.html-editor-light .dxbl-html-editor .ql-editor,
.html-editor-light .ql-container,
.html-editor-light .ql-editor {
    background-color: #fff !important;
    color: #212529 !important;
}

.html-editor-fullscreen .dxbl-html-editor {
    border: none !important;
}

/* Make links visually clickable */
.html-editor-light .ql-editor a {
    cursor: pointer !important;
    color: var(--bs-link-color, #0d6efd) !important;
    text-decoration: underline !important;
    pointer-events: auto !important;
}

.html-editor-light .ql-editor a:hover {
    color: var(--bs-link-hover-color, #0a58ca) !important;
}

/* =============================================
   Dark Theme for DxHtmlEditor Toolbar
   Matching XRich/XTBAI styling
   ============================================= */

/* Main toolbar container - thin dim border */
.html-editor-light .dxbl-btn-toolbar,
.html-editor-light .dxbl-btn-plain-toolbar {
    background: var(--bs-dark, #212529) !important;
    border: 1px solid rgba(108, 117, 125, 0.5) !important;
    border-radius: 0 !important;
    min-height: auto !important;
    padding: 4px 6px !important;
}

/* Toolbar content area */
.html-editor-light .dxbl-adaptive-container-content {
    background: transparent !important;
    padding: 0 !important;
}

/* Toolbar groups */
.html-editor-light .dxbl-toolbar-group,
.html-editor-light .dxbl-btn-group {
    background: transparent !important;
    margin: 0 !important;
}

/* Group separators - thin dim line */
.html-editor-light .dxbl-toolbar-group-separator {
    background: rgba(108, 117, 125, 0.5) !important;
    width: 1px !important;
    height: 20px !important;
    margin: 0 4px !important;
}

/* All toolbar buttons - bright white icons */
.html-editor-light .dxbl-btn-toolbar .dxbl-btn,
.html-editor-light .dxbl-toolbar-btn,
.html-editor-light .dxbl-office-bar-button,
.html-editor-light .dxbl-office-bar-togglebutton,
.html-editor-light .dxbl-ribbon-item {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
}

/* Button icons (SVG) - bright white */
.html-editor-light .dxbl-btn-toolbar .dxbl-btn .dxbl-image,
.html-editor-light .dxbl-toolbar-btn .dxbl-image,
.html-editor-light .dxbl-office-bar-button .dxbl-image,
.html-editor-light .dxbl-office-bar-togglebutton .dxbl-image,
.html-editor-light .dxbl-ribbon-item .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

/* SVG use elements - bright white */
.html-editor-light .dxbl-btn-toolbar .dxbl-image use,
.html-editor-light .dxbl-toolbar-btn .dxbl-image use,
.html-editor-light .dxbl-ribbon-item .dxbl-image use {
    fill: #ffffff !important;
}

/* SVG paths and other elements */
.html-editor-light .dxbl-btn-toolbar svg,
.html-editor-light .dxbl-toolbar-btn svg,
.html-editor-light .dxbl-ribbon-item svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Button hover state */
.html-editor-light .dxbl-btn-toolbar .dxbl-btn:hover,
.html-editor-light .dxbl-toolbar-btn:hover,
.html-editor-light .dxbl-office-bar-button:hover,
.html-editor-light .dxbl-office-bar-togglebutton:hover,
.html-editor-light .dxbl-ribbon-item:hover {
    background: var(--bs-gray-700, #495057) !important;
    color: #ffffff !important;
}

/* Button active/pressed state */
.html-editor-light .dxbl-btn-toolbar .dxbl-btn[aria-pressed="true"],
.html-editor-light .dxbl-toolbar-btn[aria-pressed="true"],
.html-editor-light .dxbl-office-bar-togglebutton[aria-pressed="true"] {
    background: var(--bs-gray-800, #343a40) !important;
    color: var(--bs-primary, #0d6efd) !important;
}

.html-editor-light .dxbl-btn-toolbar .dxbl-btn[aria-pressed="true"] .dxbl-image,
.html-editor-light .dxbl-toolbar-btn[aria-pressed="true"] .dxbl-image {
    color: var(--bs-primary, #0d6efd) !important;
    fill: var(--bs-primary, #0d6efd) !important;
}

/* Disabled buttons */
.html-editor-light .dxbl-btn-toolbar .dxbl-btn.dxbl-disabled,
.html-editor-light .dxbl-toolbar-btn.dxbl-disabled,
.html-editor-light .dxbl-btn.dxbl-disabled {
    opacity: 0.35 !important;
}

.html-editor-light .dxbl-btn.dxbl-disabled .dxbl-image {
    opacity: 0.35 !important;
}

/* Combobox/dropdown styling - transparent background to match toolbar */
.html-editor-light .dxbl-toolbar-combobox,
.html-editor-light .dxbl-toolbar-edit-combobox,
.html-editor-light .dxbl-combo-box,
.html-editor-light .dxbl-text-edit {
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
}

/* Combobox input text - bright white */
.html-editor-light .dxbl-toolbar-combobox .dxbl-text-edit-input,
.html-editor-light .dxbl-combo-box .dxbl-text-edit-input,
.html-editor-light .dxbl-text-edit-input {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    padding: 2px 6px !important;
}

/* Combobox placeholder text - bright white */
.html-editor-light .dxbl-toolbar-combobox .dxbl-text-edit-input::placeholder,
.html-editor-light .dxbl-combo-box .dxbl-text-edit-input::placeholder,
.html-editor-light .dxbl-text-edit-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Combobox wrapper - transparent */
.html-editor-light .dxbl-toolbar-edit-combobox {
    background: transparent !important;
}

.html-editor-light .dxbl-toolbar-combobox .dxbl-btn,
.html-editor-light .dxbl-combo-box .dxbl-btn,
.html-editor-light .dxbl-edit-btn-dropdown {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.html-editor-light .dxbl-toolbar-combobox .dxbl-btn .dxbl-image,
.html-editor-light .dxbl-combo-box .dxbl-btn .dxbl-image,
.html-editor-light .dxbl-edit-btn-dropdown .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.html-editor-light .dxbl-toolbar-combobox .dxbl-btn:hover,
.html-editor-light .dxbl-combo-box .dxbl-btn:hover,
.html-editor-light .dxbl-edit-btn-dropdown:hover {
    background: var(--bs-gray-700, #495057) !important;
}

.html-editor-light .dxbl-btn-group-right {
    border: none !important;
    background: transparent !important;
}

/* Toolbar item template - transparent */
.html-editor-light .dxbl-toolbar-item-tmpl {
    border: none !important;
    background: transparent !important;
}

/* Split buttons (color pickers) */
.html-editor-light .dxbl-btn-split {
    border: none !important;
}

.html-editor-light .dxbl-btn-split .dxbl-btn {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.html-editor-light .dxbl-btn-split .dxbl-btn:hover {
    background: var(--bs-gray-700, #495057) !important;
}

.html-editor-light .dxbl-btn-split .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ellipsis/more buttons */
.html-editor-light .dxbl-toolbar-btn-ellipsis {
    border: none !important;
}

.html-editor-light .dxbl-toolbar-btn-ellipsis .dxbl-btn {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.html-editor-light .dxbl-toolbar-btn-ellipsis .dxbl-btn:hover {
    background: var(--bs-gray-700, #495057) !important;
}

.html-editor-light .dxbl-toolbar-btn-ellipsis .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.html-editor-light .dxbl-toolbar-adaptive-item-text {
    color: #ffffff !important;
}

/* Ribbon skeleton (loading state) - hide */
.html-editor-light .dxbl-ribbon-skeleton {
    display: none !important;
}

/* Placeholder - hide */
.html-editor-light .dxbl-toolbar-placeholder {
    display: none !important;
}

/* Validation status icons in toolbar - hide */
.html-editor-light .dxbl-edit-validation-status {
    display: none !important;
}

/* Remove borders from html editor wrapper */
.html-editor-light .dxbl-html-editor {
    border: none !important;
}

/* Container border - thin dim border, no top */
.html-editor-light .ql-container {
    border: 1px solid rgba(108, 117, 125, 0.5) !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
}

/* Remove outline borders */
.html-editor-light .dxbl-btn-outline-secondary {
    border: none !important;
    background: transparent !important;
}

/* General button overrides for white icons */
.html-editor-light .dxbl-btn-text-secondary {
    color: #ffffff !important;
}

.html-editor-light .dxbl-btn-text-secondary .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Color picker image source */
.html-editor-light .dxbl-ribbon-color-picker-image-source .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =============================================
   Fullscreen mode adjustments
   ============================================= */

.html-editor-fullscreen .dxbl-btn-toolbar,
.html-editor-fullscreen .dxbl-btn-plain-toolbar {
    border-radius: 0 !important;
}

.html-editor-fullscreen .ql-container {
    border-radius: 0 !important;
}

.html-editor-fullscreen .ai-toolbar-header {
    border-radius: 0 !important;
}