/* ====================================
   GrapesJS Block Editor Customization
   Matching Form Builder Style with Dark Mode Support
   ==================================== */

/* ===== LIGHT MODE (DEFAULT) ===== */
:root,
.gjs-editor-container {
    --kb-bg-primary: #ffffff;
    --kb-bg-secondary: #f5f5f5;
    --kb-bg-tertiary: #fafafa;
    --kb-bg-canvas: #f9f9f9;
    --kb-text-primary: #1e1e1e;
    --kb-text-secondary: #757575;
    --kb-border-color: #e0e0e0;
    --kb-border-light: #eeeeee;
    --kb-category-bg: #f3f0f7;
    --kb-category-hover: #e8e2f3;
    --kb-icon-bg: rgba(103, 58, 183, 0.12);
    --kb-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --kb-shadow-md: 0 2px 4px rgba(0,0,0,0.08);
}

/* ===== DARK MODE ===== Matching Form Builder exactly */
.kb-dark-mode,
.kb-dark-mode .gjs-editor-container,
body.mud-theme-dark .gjs-editor-container,
.mud-theme-dark .gjs-editor-container,
body.mud-theme-dark #gjs,
.mud-theme-dark #gjs {
    --kb-bg-primary: #2d2d2d !important;        /* MudBlazor Surface (rgba(45,45,45,1)) */
    --kb-bg-secondary: #1e1e24 !important;      /* Darker areas for contrast */
    --kb-bg-tertiary: #33333d !important;       /* Headers and dividers */
    --kb-bg-canvas: #1e1e24 !important;         /* Canvas background */
    --kb-text-primary: #e2e8f0 !important;      /* Matching Form Builder primary text */
    --kb-text-secondary: #a0aec0 !important;    /* Matching Form Builder secondary text */
    --kb-border-color: #3f3f4a !important;      /* Matching Form Builder borders */
    --kb-border-light: #35353e !important;      /* Matching Form Builder subtle borders */
    --kb-category-bg: rgba(103, 58, 183, 0.15);
    --kb-category-hover: rgba(103, 58, 183, 0.25);
    --kb-icon-bg: rgba(103, 58, 183, 0.2);
    --kb-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --kb-shadow-md: 0 2px 6px rgba(0,0,0,0.5);
}

/* Force dark background on the editor wrapper */
body.mud-theme-dark #gjs,
.mud-theme-dark #gjs {
    background-color: #2d2d2d !important;
}

/* Force dark backgrounds on all GrapesJS containers */
body.mud-theme-dark .gjs-editor,
.mud-theme-dark .gjs-editor,
body.mud-theme-dark .gjs-pn-panels,
.mud-theme-dark .gjs-pn-panels,
body.mud-theme-dark .gjs-blocks-c,
.mud-theme-dark .gjs-blocks-c,
body.mud-theme-dark .gjs-cv-canvas,
.mud-theme-dark .gjs-cv-canvas {
    background-color: #2d2d2d !important;
}

/* Editor Container - matching Form Builder structure */
.gjs-editor-container {
    height: 600px;
    border: 1px solid var(--kb-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--kb-bg-secondary);
    box-shadow: var(--kb-shadow-sm);
}

/* Three-column layout matching Form Builder */
.gjs-editor-row {
    display: flex;
    height: 100%;
    gap: 0;
    background: var(--kb-bg-secondary);
}

.gjs-editor-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--kb-bg-primary);
}

/* Left panel (blocks) - matching Form Builder Field Types width */
.gjs-editor-column:first-child {
    width: 280px;
    border-right: 1px solid var(--kb-border-color);
    background: var(--kb-bg-primary);
}

/* Center panel (canvas) - flexible, matching Form Builder Canvas */
.gjs-editor-canvas {
    flex: 1;
    background-color: var(--kb-bg-canvas);
    position: relative;
}

/* Right panel (layers + styles) - matching Form Builder Properties width */
.gjs-editor-column:last-child {
    width: 300px;
    border-left: 1px solid var(--kb-border-color);
    background: var(--kb-bg-primary);
}

/* ==========================================
   BLOCKS CONTAINER - Matching Form Builder
   ========================================== */

.blocks-container {
    padding: 0;
    overflow-y: auto;
    position: relative;
    background: var(--kb-bg-primary) !important;
    height: 100%;
}

/* Panel Header - matching Form Builder style exactly */
.blocks-container::before {
    content: 'Content Blocks';
    display: block;
    background: var(--kb-bg-tertiary);
    color: var(--kb-text-primary);
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--kb-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--kb-shadow-sm);
}

/* ==========================================
   LAYERS & STYLES CONTAINERS
   ========================================== */

/* Layers container */
.layers-container {
    padding: 0;
    border-bottom: 1px solid var(--kb-border-color);
    overflow-y: auto;
    position: relative;
    background: var(--kb-bg-primary);
    min-height: 250px;
    max-height: 50%;
}

/* Panel Header */
.layers-container::before {
    content: 'Layers';
    display: block;
    background: var(--kb-bg-tertiary);
    color: var(--kb-text-primary);
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--kb-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--kb-shadow-sm);
}

/* Styles container */
.styles-container {
    padding: 0;
    overflow-y: auto;
    position: relative;
    background: var(--kb-bg-primary);
    flex: 1;
}

/* Panel Header */
.styles-container::before {
    content: 'Styles';
    display: block;
    background: var(--kb-bg-tertiary);
    color: var(--kb-text-primary);
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--kb-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--kb-shadow-sm);
}

/* ==========================================
   GRAPES JS DEFAULT OVERRIDES
   ========================================== */

/* Adjust editor panels for better visibility */
#gjs {
    border: none;
}

/* Style the blocks panel */
.gjs-blocks-c {
    min-height: 100%;
    background: var(--kb-bg-primary) !important;
    border-right: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ==========================================
   BLOCK CATEGORIES - Matching Form Builder
   ========================================== */

.gjs-block-category {
    border-bottom: none;
    margin-bottom: 0;
    background: transparent !important;
}

/* Category Header - matching Form Builder collapsible groups */
.gjs-block-category .gjs-title {
    background: var(--kb-bg-tertiary) !important;
    color: var(--kb-text-primary) !important;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid var(--kb-border-color);
    box-shadow: none;
}

.gjs-block-category .gjs-title:hover {
    background: var(--kb-category-hover) !important;
}

/* Add arrow indicator for expandable categories */
.gjs-block-category .gjs-title::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.gjs-block-category.gjs-open .gjs-title::after {
    transform: rotate(-180deg);
}

/* Category content */
.gjs-blocks-c .gjs-block-category .gjs-blocks-c {
    background: var(--kb-bg-primary);
    padding: 12px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

/* ==========================================
   INDIVIDUAL BLOCKS - Matching Form Builder Style
   ========================================== */

.gjs-block {
    width: 100% !important;
    padding: 12px 14px;
    margin-bottom: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none;
    border-bottom: 1px solid var(--kb-border-light);
    border-radius: 0;
    background: var(--kb-bg-primary);
    cursor: grab;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    position: relative;
    box-sizing: border-box;
    box-shadow: none;
}

.gjs-block:hover {
    background: var(--kb-bg-tertiary) !important;
    border-left: 3px solid #673ab7;
    padding-left: 11px;
}

.gjs-block:active {
    cursor: grabbing;
    background: var(--kb-category-bg) !important;
}

/* Icon container - matching Form Builder icons */
.gjs-block::before {
    content: attr(data-gjs-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--kb-icon-bg);
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: #673ab7;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Block label container */
.gjs-block-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.4;
    color: var(--kb-text-primary) !important;
}

/* Block name (strong/first line) */
.gjs-block-label strong,
.gjs-block-label > div:first-child {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--kb-text-primary) !important;
    line-height: 1.3;
    margin-bottom: 3px;
}

/* Block description (small/second line) */
.gjs-block-label small,
.gjs-block-label > div:last-child {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--kb-text-secondary) !important;
    line-height: 1.4;
    opacity: 1 !important;
}

/* Drag indicator - subtle on the right */
.gjs-block::after {
    content: '⋮⋮';
    font-size: 16px;
    color: var(--kb-text-secondary);
    line-height: 1;
    font-weight: bold;
    flex-shrink: 0;
    opacity: 0.3;
    position: static;
    transform: none;
    transition: opacity 0.2s ease;
}

.gjs-block:hover::after {
    opacity: 0.6;
}

/* ==========================================
   CANVAS AREA - Matching Form Builder
   ========================================== */

.gjs-cv-canvas {
    background-color: var(--kb-bg-canvas);
    width: 100%;
    height: 100%;
}

.gjs-cv-canvas__frames {
    background-color: var(--kb-bg-canvas);
}

/* ==========================================
   STYLE MANAGER PANEL
   ========================================== */

.gjs-sm-sector {
    border-bottom: 1px solid var(--kb-border-color);
    background: var(--kb-bg-primary);
}

.gjs-sm-sector .gjs-sm-title {
    background-color: var(--kb-bg-tertiary) !important;
    color: var(--kb-text-primary) !important;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gjs-sm-properties {
    background-color: var(--kb-bg-primary) !important;
    padding: 12px;
}

/* Make all style manager elements use theme colors */
.gjs-sm-property,
.gjs-sm-label,
.gjs-sm-field,
.gjs-field,
.gjs-input,
.gjs-select,
.gjs-field-select,
.gjs-field-text,
.gjs-sm-property-value {
    color: var(--kb-text-primary) !important;
    background: transparent;
}

.gjs-sm-label {
    font-weight: 500;
    font-size: 12px;
    color: var(--kb-text-primary) !important;
    margin-bottom: 6px;
}

/* Force all text inside styles container to use theme colors */
.styles-container *,
.gjs-sm-properties *,
.gjs-sm-sector * {
    color: var(--kb-text-primary) !important;
}

/* Ensure input fields and selects are visible in dark mode */
.gjs-field input,
.gjs-field select,
.gjs-sm-field input,
.gjs-sm-field select {
    color: var(--kb-text-primary) !important;
    background-color: var(--kb-bg-secondary) !important;
    border: 1px solid var(--kb-border-color) !important;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
}

.gjs-field input:focus,
.gjs-field select:focus,
.gjs-sm-field input:focus,
.gjs-sm-field select:focus {
    border-color: #673ab7 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(103, 58, 183, 0.1);
}

/* ==========================================
   LAYER MANAGER - Matching Form Builder
   ========================================== */

.gjs-layer {
    color: var(--kb-text-primary) !important;
    background: var(--kb-bg-primary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--kb-border-light);
    transition: background 0.15s ease;
}

.gjs-layer:hover {
    background: var(--kb-bg-tertiary) !important;
}

.gjs-layer-title {
    font-size: 12px;
    color: var(--kb-text-primary) !important;
    font-weight: 500;
}

.gjs-layer-name {
    color: var(--kb-text-primary) !important;
    font-weight: 500 !important;
    font-size: 13px;
}

.gjs-layer-title-c {
    color: var(--kb-text-primary) !important;
}

/* Make all layer text use theme colors */
.gjs-layers .gjs-layer,
.gjs-layers .gjs-layer-title,
.gjs-layers .gjs-layer-name,
.gjs-layers .gjs-layer-title-c,
.gjs-layer-item,
.gjs-layer-vis,
.gjs-layer > div,
.gjs-layer span {
    color: var(--kb-text-primary) !important;
    opacity: 1 !important;
}

/* Force all text inside layers to use theme colors */
.layers-container * {
    color: var(--kb-text-primary) !important;
}

.gjs-layer-count {
    background-color: #673ab7;
    color: white !important;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
}

/* ==========================================
   TOOLBAR & TOP PANELS
   ========================================== */

.gjs-toolbar {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 6px;
    padding: 4px;
    box-shadow: var(--kb-shadow-md);
}

.gjs-toolbar-item {
    color: white;
    padding: 6px 10px;
    transition: background-color 0.2s;
    border-radius: 4px;
    font-size: 12px;
}

.gjs-toolbar-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Top panel (buttons) */
.gjs-pn-panel {
    background-color: var(--kb-bg-primary);
    border-bottom: 1px solid var(--kb-border-color);
}

.gjs-pn-btn {
    color: var(--kb-text-primary);
    padding: 10px 14px;
    font-size: 13px;
    transition: all 0.2s;
    border-radius: 0;
}

.gjs-pn-btn:hover {
    background-color: var(--kb-bg-tertiary);
}

.gjs-pn-active {
    background-color: var(--kb-category-bg) !important;
    color: #673ab7 !important;
    font-weight: 600;
}

/* Views panel */
.gjs-pn-views {
    border-right: 1px solid var(--kb-border-color);
    background-color: var(--kb-bg-primary);
}

.gjs-pn-views-container {
    height: 100%;
    overflow-y: auto;
    background: var(--kb-bg-primary);
}

/* ==========================================
   SCROLLBARS - Matching Form Builder
   ========================================== */

.blocks-container::-webkit-scrollbar,
.layers-container::-webkit-scrollbar,
.styles-container::-webkit-scrollbar,
.gjs-editor-column::-webkit-scrollbar {
    width: 8px;
}

.blocks-container::-webkit-scrollbar-track,
.layers-container::-webkit-scrollbar-track,
.styles-container::-webkit-scrollbar-track,
.gjs-editor-column::-webkit-scrollbar-track {
    background: var(--kb-bg-tertiary);
}

.blocks-container::-webkit-scrollbar-thumb,
.layers-container::-webkit-scrollbar-thumb,
.styles-container::-webkit-scrollbar-thumb,
.gjs-editor-column::-webkit-scrollbar-thumb {
    background: var(--kb-border-color);
    border-radius: 4px;
}

.blocks-container::-webkit-scrollbar-thumb:hover,
.layers-container::-webkit-scrollbar-thumb:hover,
.styles-container::-webkit-scrollbar-thumb:hover,
.gjs-editor-column::-webkit-scrollbar-thumb:hover {
    background: var(--kb-text-secondary);
}

/* ==========================================
   GRAPES JS THEME OVERRIDES
   ========================================== */

/* Fix for GrapesJS default overlays */
.gjs-block-categories {
    background: var(--kb-bg-primary) !important;
}

.gjs-block-category {
    background: var(--kb-bg-primary) !important;
}

/* Remove any overlay or mask from block manager */
.gjs-blocks-c::before,
.gjs-blocks-c::after {
    display: none !important;
}

.gjs-block-category::before {
    background: transparent !important;
    display: none !important;
}

.gjs-block-category::after {
    background: transparent !important;
}

/* Ensure category backgrounds use theme colors */
.gjs-block-category .gjs-blocks-c {
    background: var(--kb-bg-primary) !important;
    opacity: 1 !important;
}

/* Remove any dark placeholders or overlays */
.gjs-blocks-c .gjs-placeholder,
.gjs-blocks-c .gjs-placeholder-int {
    background: var(--kb-bg-primary) !important;
    color: var(--kb-text-secondary) !important;
}

/* Ensure blocks container has proper background */
.blocks-container {
    background: var(--kb-bg-primary) !important;
}

/* Remove any GrapesJS default theming */
.gjs-one-bg,
.gjs-two-bg,
.gjs-three-bg,
.gjs-four-bg {
    background-color: var(--kb-bg-primary) !important;
}

.gjs-one-color,
.gjs-two-color,
.gjs-three-color,
.gjs-four-color {
    color: var(--kb-text-primary) !important;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 1400px) {
    .gjs-editor-column:first-child,
    .gjs-editor-column:last-child {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .gjs-editor-container {
        height: 500px;
    }

    .gjs-editor-column:first-child,
    .gjs-editor-column:last-child {
        width: 200px;
    }

    .gjs-block {
        min-height: 56px;
        padding: 10px 12px;
    }

    .gjs-block::before {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .gjs-block-label strong {
        font-size: 12px;
    }

    .gjs-block-label small {
        font-size: 11px;
    }

    .blocks-container::before,
    .layers-container::before,
    .styles-container::before {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* ==========================================
   LOADING & ERROR STATES
   ========================================== */

.gjs-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    background-color: var(--kb-bg-secondary);
    color: var(--kb-text-secondary);
    font-size: 16px;
    font-weight: 500;
}

.gjs-editor-loading::after {
    content: ' ';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 3px solid #673ab7;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gjs-editor-error {
    padding: 20px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    color: #c62828;
    margin: 20px;
}

/* ==========================================
   TOOLTIPS
   ========================================== */

.gjs-tooltip {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

/* ==========================================
   DARK MODE SPECIFIC ADJUSTMENTS
   ========================================== */

.mud-theme-dark .gjs-editor-container,
body.mud-theme-dark .gjs-editor-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.mud-theme-dark .gjs-block:hover,
body.mud-theme-dark .gjs-block:hover {
    box-shadow: inset 0 0 0 1px rgba(103, 58, 183, 0.3);
}

.mud-theme-dark .gjs-editor-loading,
body.mud-theme-dark .gjs-editor-loading {
    background-color: var(--kb-bg-primary);
}

.mud-theme-dark .gjs-editor-error,
body.mud-theme-dark .gjs-editor-error {
    background-color: rgba(211, 47, 47, 0.15);
    border-color: rgba(211, 47, 47, 0.5);
    color: #ef5350;
}

/* Force all GrapesJS elements to use dark theme */
.mud-theme-dark .gjs-editor-container *,
body.mud-theme-dark .gjs-editor-container * {
    color: var(--kb-text-primary);
}

.mud-theme-dark .gjs-blocks-c,
body.mud-theme-dark .gjs-blocks-c {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-cv-canvas,
body.mud-theme-dark .gjs-cv-canvas {
    background-color: var(--kb-bg-canvas) !important;
}

.mud-theme-dark .gjs-cv-canvas__frames,
body.mud-theme-dark .gjs-cv-canvas__frames {
    background-color: var(--kb-bg-canvas) !important;
}

/* Force panel backgrounds in dark mode */
.mud-theme-dark .blocks-container,
body.mud-theme-dark .blocks-container {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .layers-container,
body.mud-theme-dark .layers-container {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .styles-container,
body.mud-theme-dark .styles-container {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-editor-column,
body.mud-theme-dark .gjs-editor-column {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-editor-row,
body.mud-theme-dark .gjs-editor-row {
    background-color: var(--kb-bg-secondary) !important;
}

/* Force block backgrounds in dark mode */
.mud-theme-dark .gjs-block,
body.mud-theme-dark .gjs-block {
    background-color: var(--kb-bg-primary) !important;
    border-bottom-color: var(--kb-border-light) !important;
}

.mud-theme-dark .gjs-block:hover,
body.mud-theme-dark .gjs-block:hover {
    background-color: var(--kb-bg-tertiary) !important;
}

/* Force category backgrounds in dark mode */
.mud-theme-dark .gjs-block-category,
body.mud-theme-dark .gjs-block-category {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-block-category .gjs-title,
body.mud-theme-dark .gjs-block-category .gjs-title {
    background-color: var(--kb-bg-tertiary) !important;
    color: var(--kb-text-primary) !important;
}

.mud-theme-dark .gjs-block-category .gjs-blocks-c,
body.mud-theme-dark .gjs-block-category .gjs-blocks-c {
    background-color: var(--kb-bg-primary) !important;
}

/* Force layer backgrounds in dark mode */
.mud-theme-dark .gjs-layer,
body.mud-theme-dark .gjs-layer {
    background-color: var(--kb-bg-primary) !important;
    border-bottom-color: var(--kb-border-light) !important;
}

.mud-theme-dark .gjs-layer:hover,
body.mud-theme-dark .gjs-layer:hover {
    background-color: var(--kb-bg-tertiary) !important;
}

/* Force style manager backgrounds in dark mode */
.mud-theme-dark .gjs-sm-sector,
body.mud-theme-dark .gjs-sm-sector {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-sm-properties,
body.mud-theme-dark .gjs-sm-properties {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .gjs-sm-sector .gjs-sm-title,
body.mud-theme-dark .gjs-sm-sector .gjs-sm-title {
    background-color: var(--kb-bg-tertiary) !important;
    color: var(--kb-text-primary) !important;
}

/* Force text colors in dark mode */
.mud-theme-dark .gjs-block-label strong,
.mud-theme-dark .gjs-block-label > div:first-child,
body.mud-theme-dark .gjs-block-label strong,
body.mud-theme-dark .gjs-block-label > div:first-child {
    color: var(--kb-text-primary) !important;
}

.mud-theme-dark .gjs-block-label small,
.mud-theme-dark .gjs-block-label > div:last-child,
body.mud-theme-dark .gjs-block-label small,
body.mud-theme-dark .gjs-block-label > div:last-child {
    color: var(--kb-text-secondary) !important;
}

/* Force input field styles in dark mode */
.mud-theme-dark .gjs-field input,
.mud-theme-dark .gjs-field select,
body.mud-theme-dark .gjs-field input,
body.mud-theme-dark .gjs-field select {
    background-color: var(--kb-bg-secondary) !important;
    color: var(--kb-text-primary) !important;
    border-color: var(--kb-border-color) !important;
}

/* Override any white backgrounds */
.mud-theme-dark .gjs-editor-container [style*="background: white"],
.mud-theme-dark .gjs-editor-container [style*="background: #fff"],
.mud-theme-dark .gjs-editor-container [style*="background-color: white"],
.mud-theme-dark .gjs-editor-container [style*="background-color: #fff"],
body.mud-theme-dark .gjs-editor-container [style*="background: white"],
body.mud-theme-dark .gjs-editor-container [style*="background: #fff"],
body.mud-theme-dark .gjs-editor-container [style*="background-color: white"],
body.mud-theme-dark .gjs-editor-container [style*="background-color: #fff"] {
    background-color: var(--kb-bg-primary) !important;
}

/* ==========================================
   NUCLEAR OPTION - FORCE DARK MODE ON EVERYTHING
   ========================================== */

/* Target ALL possible GrapesJS elements */
body.mud-theme-dark #gjs *,
body.mud-theme-dark .gjs-editor *,
body.mud-theme-dark .gjs-editor-container *,
.mud-theme-dark #gjs *,
.mud-theme-dark .gjs-editor *,
.mud-theme-dark .gjs-editor-container * {
    /* Don't override text color for everything, just backgrounds */
}

/* Force dark on all possible background elements */
body.mud-theme-dark .gjs-pn-panel,
body.mud-theme-dark .gjs-pn-panels,
body.mud-theme-dark .gjs-pn-views,
body.mud-theme-dark .gjs-pn-views-container,
body.mud-theme-dark .gjs-pn-commands,
body.mud-theme-dark .gjs-pn-options,
body.mud-theme-dark .gjs-pn-devices-c,
body.mud-theme-dark #gjs-pn-views,
body.mud-theme-dark #gjs-pn-views-container,
.mud-theme-dark .gjs-pn-panel,
.mud-theme-dark .gjs-pn-panels,
.mud-theme-dark .gjs-pn-views,
.mud-theme-dark .gjs-pn-views-container,
.mud-theme-dark .gjs-pn-commands,
.mud-theme-dark .gjs-pn-options,
.mud-theme-dark .gjs-pn-devices-c {
    background-color: #27272f !important;
    color: #e2e8f0 !important;
}

/* ==========================================
   MUDPAPER EDITOR MODE TOGGLE
   ========================================== */

/* Light mode - matching MudBlazor light theme */
.kb-editor-mode-toggle {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa !important;
}

/* Dark mode - matching MudBlazor dark theme */
.mud-theme-dark .kb-editor-mode-toggle {
    border: 1px solid var(--kb-border-color) !important;
    background-color: var(--kb-bg-tertiary) !important;
}

/* ==========================================
   RADZEN RICH TEXT EDITOR DARK MODE
   ========================================== */

/* Radzen HTML Editor - Light Mode (default) */
.rz-html-editor {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Radzen HTML Editor - Dark Mode */
.mud-theme-dark .rz-html-editor {
    background-color: var(--kb-bg-primary) !important;
    border: 1px solid var(--kb-border-color) !important;
    color: var(--kb-text-primary) !important;
}

/* Radzen toolbar in dark mode */
.mud-theme-dark .rz-html-editor-toolbar {
    background-color: var(--kb-bg-tertiary) !important;
    border-bottom: 1px solid var(--kb-border-color) !important;
}

/* Radzen toolbar buttons in dark mode */
.mud-theme-dark .rz-html-editor-toolbar .rz-button {
    color: var(--kb-text-primary) !important;
    background-color: transparent !important;
}

.mud-theme-dark .rz-html-editor-toolbar .rz-button:hover {
    background-color: var(--kb-bg-primary) !important;
}

.mud-theme-dark .rz-html-editor-toolbar .rz-button.rz-state-active {
    background-color: var(--kb-bg-primary) !important;
    border: 1px solid var(--kb-border-color) !important;
}

/* Radzen content area in dark mode */
.mud-theme-dark .rz-html-editor-content,
.mud-theme-dark .rz-html-editor-content iframe {
    background-color: var(--kb-bg-primary) !important;
    color: var(--kb-text-primary) !important;
}

/* Radzen dropdown menus in dark mode */
.mud-theme-dark .rz-dropdown {
    background-color: var(--kb-bg-primary) !important;
    border: 1px solid var(--kb-border-color) !important;
    color: var(--kb-text-primary) !important;
}

.mud-theme-dark .rz-dropdown-item {
    color: var(--kb-text-primary) !important;
}

.mud-theme-dark .rz-dropdown-item:hover {
    background-color: var(--kb-bg-tertiary) !important;
}
.mud-theme-dark .gjs-pn-options,
.mud-theme-dark .gjs-pn-devices-c,
.mud-theme-dark #gjs-pn-views,
.mud-theme-dark #gjs-pn-views-container {
    background-color: #2d2d2d !important;
    background: #2d2d2d !important;
}

/* Force dark on blocks area */
body.mud-theme-dark .gjs-blocks-cs,
body.mud-theme-dark .gjs-blocks,
body.mud-theme-dark .gjs-block-categories,
.mud-theme-dark .gjs-blocks-cs,
.mud-theme-dark .gjs-blocks,
.mud-theme-dark .gjs-block-categories {
    background-color: #2d2d2d !important;
    background: #2d2d2d !important;
}

/* Force dark on frame/canvas */
body.mud-theme-dark .gjs-frame,
body.mud-theme-dark .gjs-frame-wrapper,
body.mud-theme-dark iframe.gjs-frame,
.mud-theme-dark .gjs-frame,
.mud-theme-dark .gjs-frame-wrapper,
.mud-theme-dark iframe.gjs-frame {
    background-color: #1e1e24 !important;
    background: #1e1e24 !important;
}

/* Force text colors */
body.mud-theme-dark .gjs-block-label,
body.mud-theme-dark .gjs-layer-name,
body.mud-theme-dark .gjs-sm-label,
.mud-theme-dark .gjs-block-label,
.mud-theme-dark .gjs-layer-name,
.mud-theme-dark .gjs-sm-label {
    color: #e2e8f0 !important;
}

/* Override GrapesJS default color classes */
body.mud-theme-dark .gjs-one-bg,
body.mud-theme-dark .gjs-two-bg,
body.mud-theme-dark .gjs-three-bg,
body.mud-theme-dark .gjs-four-bg,
.mud-theme-dark .gjs-one-bg,
.mud-theme-dark .gjs-two-bg,
.mud-theme-dark .gjs-three-bg,
.mud-theme-dark .gjs-four-bg {
    background-color: #2d2d2d !important;
}

/* Force all white/light backgrounds to dark */
body.mud-theme-dark .gjs-editor-container div[style*="rgb(255, 255, 255)"],
body.mud-theme-dark .gjs-editor-container div[style*="background: rgb(255, 255, 255)"],
body.mud-theme-dark .gjs-editor-container div[style*="background-color: rgb(255, 255, 255)"],
.mud-theme-dark .gjs-editor-container div[style*="rgb(255, 255, 255)"],
.mud-theme-dark .gjs-editor-container div[style*="background: rgb(255, 255, 255)"],
.mud-theme-dark .gjs-editor-container div[style*="background-color: rgb(255, 255, 255)"] {
    background-color: #2d2d2d !important;
}

/* ==========================================
   ULTRA-NUCLEAR OPTION - LAST RESORT
   ========================================== */

/* Override EVERYTHING in GrapesJS with highest specificity */
body.mud-theme-dark #gjs,
body.mud-theme-dark #gjs *,
body.mud-theme-dark #gjs-editor,
body.mud-theme-dark .gjs-editor-container,
body.mud-theme-dark .gjs-editor-container * {
    /* Remove any white/light background properties */
}

/* Force EVERY possible element to dark */
body.mud-theme-dark [id*="gjs"],
body.mud-theme-dark [class*="gjs-"],
.mud-theme-dark [id*="gjs"],
.mud-theme-dark [class*="gjs-"] {
    background-color: #2d2d2d !important;
}

/* Specifically target canvas/frame elements */
body.mud-theme-dark [id*="gjs"][class*="canvas"],
body.mud-theme-dark [class*="gjs-cv"],
body.mud-theme-dark [class*="gjs-frame"],
.mud-theme-dark [id*="gjs"][class*="canvas"],
.mud-theme-dark [class*="gjs-cv"],
.mud-theme-dark [class*="gjs-frame"] {
    background-color: #1e1e24 !important;
}

/* Kill any white backgrounds at the root */
body.mud-theme-dark #gjs-editor,
body.mud-theme-dark #gjs-pn-views,
body.mud-theme-dark #gjs-pn-views-container,
.mud-theme-dark #gjs-editor,
.mud-theme-dark #gjs-pn-views,
.mud-theme-dark #gjs-pn-views-container {
    background: #2d2d2d !important;
    background-color: #2d2d2d !important;
}

/* Override any possible white color variations */
body.mud-theme-dark .gjs-editor-container [style*="#fff"],
body.mud-theme-dark .gjs-editor-container [style*="#FFF"],
body.mud-theme-dark .gjs-editor-container [style*="#ffffff"],
body.mud-theme-dark .gjs-editor-container [style*="#FFFFFF"],
body.mud-theme-dark .gjs-editor-container [style*="white"],
body.mud-theme-dark .gjs-editor-container [style*="White"],
body.mud-theme-dark .gjs-editor-container [style*="WHITE"],
.mud-theme-dark .gjs-editor-container [style*="#fff"],
.mud-theme-dark .gjs-editor-container [style*="#FFF"],
.mud-theme-dark .gjs-editor-container [style*="#ffffff"],
.mud-theme-dark .gjs-editor-container [style*="#FFFFFF"],
.mud-theme-dark .gjs-editor-container [style*="white"],
.mud-theme-dark .gjs-editor-container [style*="White"],
.mud-theme-dark .gjs-editor-container [style*="WHITE"] {
    background: #2d2d2d !important;
    background-color: #2d2d2d !important;
}

/* Force all GrapesJS default classes */
body.mud-theme-dark .gjs-bdrag,
body.mud-theme-dark .gjs-dropzone,
body.mud-theme-dark .gjs-placeholder,
body.mud-theme-dark .gjs-grabbing,
.mud-theme-dark .gjs-bdrag,
.mud-theme-dark .gjs-dropzone,
.mud-theme-dark .gjs-placeholder,
.mud-theme-dark .gjs-grabbing {
    background-color: #2d2d2d !important;
}

/* Last resort - use CSS variables with !important everywhere */
body.mud-theme-dark .gjs-editor-container,
body.mud-theme-dark .gjs-editor-container > *,
body.mud-theme-dark .gjs-editor-container > * > *,
body.mud-theme-dark .gjs-editor-container > * > * > * {
    --gjs-primary-color: #27272f !important;
    --gjs-secondary-color: #1e1e24 !important;
    --gjs-tertiary-color: #33333d !important;
    --gjs-quaternary-color: #2d2d2d !important;
}

/* ==========================================
   KB EDITOR MODE TOGGLE (MudPaper)
   ========================================== */

/* Light mode (default) */
.kb-editor-mode-toggle {
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Dark mode - Higher specificity to override MudBlazor's .mud-paper styles */
.mud-theme-dark .mud-paper.kb-editor-mode-toggle,
body.mud-theme-dark .mud-paper.kb-editor-mode-toggle,
.mud-theme-dark .kb-editor-mode-toggle,
body.mud-theme-dark .kb-editor-mode-toggle {
    background-color: #2d2d2d !important;
    border-color: #3f3f4a !important;
    color: #e2e8f0 !important;
}

/* Ensure MudBlazor's elevation doesn't add shadows in dark mode */
.mud-theme-dark .mud-paper.kb-editor-mode-toggle.mud-elevation-0,
body.mud-theme-dark .mud-paper.kb-editor-mode-toggle.mud-elevation-0 {
    box-shadow: none !important;
}