/* ═══════════════════════════════════════════════════════════════════
   GrapesJS — MudBlazor dark-theme overrides for FreshTag
   ═══════════════════════════════════════════════════════════════════ */

/* ── Editor chrome ─────────────────────────────────────────────── */
.gjs-one-bg       { background-color: var(--mud-palette-surface) !important; }
.gjs-two-color    { color: var(--mud-palette-text-primary) !important; }
.gjs-three-bg     { background-color: var(--mud-palette-dark) !important; }
.gjs-four-color,
.gjs-four-color-h:hover { color: var(--mud-palette-primary) !important; }

.gjs-editor {
    font-family: var(--mud-typography-default-family) !important;
    border: none !important;
}

/* ── Panels ────────────────────────────────────────────────────── */
.gjs-pn-panel {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.gjs-pn-views-container,
.gjs-pn-views {
    background-color: var(--mud-palette-surface) !important;
    border-left: 1px solid var(--mud-palette-lines-default) !important;
}

/* ── Block manager ─────────────────────────────────────────────── */
.gjs-blocks-cs {
    background-color: var(--mud-palette-surface) !important;
}

.gjs-block {
    background-color: var(--mud-palette-background) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 6px !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: .72rem !important;
    padding: 8px 6px !important;
    min-height: 56px !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.gjs-block:hover {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-primary) !important;
}

.gjs-block svg {
    fill: var(--mud-palette-primary) !important;
}

.gjs-block-label {
    font-size: .68rem !important;
    color: var(--mud-palette-text-secondary) !important;
    margin-top: 4px !important;
}

.gjs-block-category .gjs-title {
    background-color: var(--mud-palette-dark) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    font-weight: 600 !important;
    font-size: .74rem !important;
    padding: 8px 10px !important;
    letter-spacing: .02em !important;
}

/* ── Canvas ────────────────────────────────────────────────────── */
.gjs-cv-canvas {
    background-color: var(--mud-palette-background) !important;
}

.gjs-frame-wrapper {
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    border-radius: 3px;
}

/* ── Toolbar (floating on selected component) ──────────────────── */
.gjs-toolbar {
    background-color: var(--mud-palette-primary) !important;
    border-radius: 4px !important;
}

.gjs-toolbar-item {
    color: #fff !important;
    font-size: .7rem !important;
}

/* ── Style manager ─────────────────────────────────────────────── */
.gjs-sm-sector .gjs-sm-sector-title {
    background-color: var(--mud-palette-dark) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
}

.gjs-sm-sector .gjs-sm-properties {
    background-color: var(--mud-palette-surface) !important;
}

.gjs-field,
.gjs-sm-input {
    background-color: var(--mud-palette-background) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 4px !important;
    color: var(--mud-palette-text-primary) !important;
}

.gjs-field:focus,
.gjs-sm-input:focus {
    border-color: var(--mud-palette-primary) !important;
}

/* ── Layer manager ─────────────────────────────────────────────── */
.gjs-layer-title {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

.gjs-layer-title-inn {
    font-size: .72rem !important;
}

.gjs-layer.gjs-selected .gjs-layer-title {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
}

/* ── Rich-text editor ──────────────────────────────────────────── */
.gjs-rte-toolbar {
    background-color: var(--mud-palette-dark) !important;
    border-radius: 4px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.gjs-rte-action {
    color: var(--mud-palette-text-primary) !important;
    border-right: 1px solid var(--mud-palette-lines-default) !important;
}

.gjs-rte-active {
    color: var(--mud-palette-primary) !important;
}

/* ── Scrollbar styling ─────────────────────────────────────────── */
.gjs-pn-views-container::-webkit-scrollbar,
.gjs-blocks-cs::-webkit-scrollbar {
    width: 6px;
}

.gjs-pn-views-container::-webkit-scrollbar-thumb,
.gjs-blocks-cs::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
}

/* ── Token highlight inside canvas ─────────────────────────────── */
[data-gjs-type="token-block"] {
    outline: 1px dashed var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── View buttons (Blocks, Styles, Layers) ─────────────────────── */
.gjs-pn-btn {
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 4px !important;
}

.gjs-pn-btn.gjs-pn-active {
    color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

/* ── Resize handles ────────────────────────────────────────────── */
.gjs-resizer-h {
    border: 2px solid var(--mud-palette-primary) !important;
}

/* ── Component selection highlight ─────────────────────────────── */
.gjs-selected {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: -2px;
}

.gjs-hovered {
    outline: 1px dashed var(--mud-palette-info) !important;
}

/* ── Hide GrapesJS branding ────────────────────────────────────── */
.gjs-logo-version { display: none !important; }