/**
 * BriefSync — GrapesJS Builder Theme
 * Dark sidebar, BriefSync accent colors, DM Sans font
 */

/* ═══════════════════════════════════════════════
   CUSTOM TOPBAR
   ═══════════════════════════════════════════════ */

.gjs-custom-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 52px; min-height: 52px;
    background: linear-gradient(135deg, #1a1f36 0%, #2b2c40 100%);
    flex-shrink: 0; z-index: 10; gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.gjs-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.gjs-topbar-center { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gjs-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.gjs-back-btn {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); font-size: 17px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.gjs-back-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.gjs-title-group { min-width: 0; display: flex; align-items: center; gap: 8px; }
.gjs-title-input {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #fff; padding: 5px 10px; font-size: 13px; font-weight: 600;
    width: 180px; font-family: inherit; transition: all .15s;
}
.gjs-title-input:focus { outline: none; border-color: #1E78CD; background: rgba(255,255,255,0.12); }
.gjs-title-input::placeholder { color: rgba(255,255,255,0.35); }

.gjs-slug-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; color: rgba(255,255,255,0.5); padding: 5px 10px; font-size: 11px;
    width: 120px; font-family: inherit;
}
.gjs-slug-input:focus { outline: none; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }

/* Device & Tool Buttons */
.gjs-device-group, .gjs-tool-group {
    display: flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.06); border-radius: 8px; padding: 2px;
}
.gjs-device-group { margin-right: 6px; }

.gjs-device-btn, .gjs-tool-btn {
    width: 32px; height: 32px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.5); font-size: 15px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.gjs-device-btn:hover, .gjs-tool-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.gjs-device-btn.active, .gjs-tool-btn.active { color: #fff; background: #1E78CD; }

/* Save Buttons */
.gjs-save-draft {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); font-size: 12px;
    font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
    font-family: inherit;
}
.gjs-save-draft:hover { background: rgba(255,255,255,0.15); color: #fff; }

.gjs-publish-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 16px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #1E78CD, #389FD8); color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s;
    white-space: nowrap; box-shadow: 0 2px 8px rgba(30,120,205,0.3); font-family: inherit;
}
.gjs-publish-btn:hover { box-shadow: 0 4px 16px rgba(30,120,205,0.45); transform: translateY(-1px); }


/* ═══════════════════════════════════════════════
   EDITOR 3-PANEL LAYOUT
   ═══════════════════════════════════════════════ */

.gjs-editor-wrap {
    flex: 1; display: flex; overflow: hidden; position: relative;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Left Panel */
.gjs-panel-left {
    width: 280px; min-width: 280px; background: #1a1f36;
    display: flex; flex-direction: column; overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.06);
    z-index: 5;
}

/* Right Panel — hidden for simplified builder */
.gjs-panel-right {
    display: none !important;
}

/* Panel Tabs */
.gjs-panel-tabs {
    display: flex; padding: 4px; gap: 2px;
    background: rgba(0,0,0,0.15); flex-shrink: 0;
}
.gjs-ptab {
    flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.5); font-size: 12px;
    font-weight: 600; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-family: inherit;
}
.gjs-ptab:hover { color: rgba(255,255,255,0.75); }
.gjs-ptab.active { background: rgba(255,255,255,0.1); color: #fff; }
.gjs-ptab i { font-size: 14px; }

/* Panel Body */
.gjs-panel-body {
    flex: 1; overflow-y: auto;
}
.gjs-panel-section { padding: 8px; }

/* Canvas Area */
.gjs-canvas-wrap {
    flex: 1; overflow: hidden;
}


/* ═══════════════════════════════════════════════
   GRAPESJS CORE OVERRIDES
   ═══════════════════════════════════════════════ */

/* Editor container */
.gjs-one-bg { background: #f0f2f8 !important; }
.gjs-two-color { color: #fff !important; }
.gjs-three-bg { background: #1a1f36 !important; }
.gjs-four-color, .gjs-four-color-h:hover { color: #1E78CD !important; }

/* Remove default GrapesJS panels since we use custom */
.gjs-pn-panels { display: none !important; }

/* Canvas */
.gjs-cv-canvas { top: 0 !important; width: 100% !important; height: 100% !important; }
.gjs-frame-wrapper { background: #e8eaef; }

/* Toolbar (floating on selected element) — minimal for non-technical users */
.gjs-toolbar {
    background: #fff !important; border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important; padding: 3px !important;
    border: 1px solid #e2e5ea !important;
}
.gjs-toolbar-item {
    padding: 5px 7px !important; color: #6f6b7d !important;
    font-size: 13px !important; transition: all .15s !important;
    border-radius: 5px !important;
}
.gjs-toolbar-item:hover { color: #2b2c40 !important; background: #f2f2f6 !important; }

/* Selected border — subtle */
.gjs-selected { outline: 2px solid rgba(30,120,205,0.5) !important; outline-offset: -1px; }
.gjs-hovered { outline: 1px dashed rgba(30,120,205,0.3) !important; }

/* Badge — HIDDEN to keep canvas clean for non-technical users */
.gjs-badge { display: none !important; }

/* Highlightable outlines — HIDDEN (the "div garbage" the client sees) */
.gjs-dashed *[data-gjs-highlightable] { outline: none !important; }

/* Resizer */
.gjs-resizer-h { border-color: rgba(30,120,205,0.5) !important; }


/* ═══════════════════════════════════════════════
   BLOCK MANAGER (Left Panel - Blocks)
   ═══════════════════════════════════════════════ */

/* Block category titles */
.gjs-block-category .gjs-title {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.8px !important;
    padding: 10px 14px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gjs-block-category .gjs-title:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Block items container */
.gjs-block-category .gjs-blocks-c {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 6px !important; padding: 8px !important;
}

/* Individual blocks */
.gjs-block {
    width: auto !important; min-height: auto !important;
    padding: 12px 8px !important; margin: 0 !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important; cursor: grab !important;
    transition: all .15s !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px !important; color: rgba(255,255,255,0.7) !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gjs-block:hover {
    background: rgba(30,120,205,0.12) !important;
    border-color: rgba(30,120,205,0.3) !important;
    color: #fff !important; transform: translateY(-1px);
}
.gjs-block:active { cursor: grabbing !important; }

.gjs-block svg { width: 28px !important; height: 28px !important; }

.gjs-block-label {
    font-size: 10px !important; font-weight: 600 !important;
    line-height: 1.2 !important; text-align: center !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #1E78CD !important;
}


/* Style Manager & Selector Manager removed — simplified builder */


/* ═══════════════════════════════════════════════
   LAYER MANAGER
   ═══════════════════════════════════════════════ */

.gjs-layer {
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gjs-layer:hover { background: rgba(255,255,255,0.04) !important; }
.gjs-layer.gjs-selected { background: rgba(30,120,205,0.15) !important; color: #fff !important; }
.gjs-layer-title { padding: 6px 10px !important; }
.gjs-layer-name { font-size: 12px !important; }
.gjs-layer-count { color: rgba(255,255,255,0.3) !important; }


/* ═══════════════════════════════════════════════
   TRAIT MANAGER
   ═══════════════════════════════════════════════ */

.gjs-trt-trait {
    padding: 6px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-family: 'DM Sans', sans-serif !important;
}
.gjs-trt-trait .gjs-label {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important; font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════
   RADIO / CHECKBOX BUTTONS
   ═══════════════════════════════════════════════ */

.gjs-radio-item {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 11px !important;
}
.gjs-radio-item:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.gjs-radio-item input:checked + .gjs-radio-item-label {
    background: #1E78CD !important; color: #fff !important;
    border-color: #1E78CD !important;
}


/* ═══════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════ */

.gjs-field-color .gjs-field-colorp { border-radius: 3px !important; }
.sp-container {
    background: #1a1f36 !important; border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.sp-input { background: rgba(255,255,255,0.08) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }


/* ═══════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════ */

.gjs-panel-left .gjs-panel-body::-webkit-scrollbar,
.gjs-panel-right .gjs-panel-body::-webkit-scrollbar { width: 4px; }
.gjs-panel-left .gjs-panel-body::-webkit-scrollbar-track,
.gjs-panel-right .gjs-panel-body::-webkit-scrollbar-track { background: transparent; }
.gjs-panel-left .gjs-panel-body::-webkit-scrollbar-thumb,
.gjs-panel-right .gjs-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }


/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 991px) {
    .gjs-panel-left {
        position: absolute; top: 0; left: 0; bottom: 0;
        z-index: 20; transform: translateX(-100%); transition: transform .3s;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    .gjs-panel-left.open { transform: translateX(0); }

    .gjs-mobile-toggle-left {
        display: flex !important;
    }

    .gjs-slug-input { display: none; }
    .gjs-title-input { width: 140px; }
    .gjs-save-draft span { display: none; }
}

@media (min-width: 992px) {
    .gjs-mobile-toggle-left, .gjs-mobile-toggle-right { display: none !important; }
}

@media (max-width: 768px) {
    .gjs-custom-topbar { padding: 0 10px; height: 48px; min-height: 48px; }
    .gjs-title-input { width: 110px; font-size: 12px; }
    .gjs-device-group { display: none; }
    .gjs-tool-group { display: none; }
}


/* ═══════════════════════════════════════════════
   MOBILE PANEL TOGGLES
   ═══════════════════════════════════════════════ */

.gjs-mobile-toggle-left, .gjs-mobile-toggle-right {
    display: none; position: fixed; z-index: 100003;
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #1E78CD, #389FD8); color: #fff; border: none;
    font-size: 18px; cursor: pointer; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(30,120,205,0.35);
}
.gjs-mobile-toggle-left { bottom: 80px; left: 16px; }
.gjs-mobile-toggle-right { bottom: 80px; right: 16px; }

.gjs-mobile-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 15; backdrop-filter: blur(2px);
}
.gjs-mobile-backdrop.show { display: block; }


/* ═══════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════ */

.gjs-cv-canvas .gjs-frame-wrapper__top:empty + .gjs-frame-wrapper {
    display: flex; align-items: center; justify-content: center;
}