/* ==========================================================
   CIBM Studio Pro
   Docking Framework
   Version 9.1
========================================================== */

/* ----------------------------------------------------------
   Left / Right Dock
---------------------------------------------------------- */

#dockLeft,
#dockRight {

    display: flex;
    flex-direction: column;

    overflow: auto;

    background: var(--surface);

    border-color: var(--border);

}

/* ----------------------------------------------------------
   Bottom Dock
---------------------------------------------------------- */

#dockBottom {

    display: flex;

    overflow: auto;

    background: var(--surface);

}

/* ----------------------------------------------------------
   Dock Panel
---------------------------------------------------------- */

.dock-panel {

    display: flex;
    flex-direction: column;

    background: var(--background);

    border-bottom: 1px solid var(--border);

    min-height: 120px;

}

/* ----------------------------------------------------------
   Panel Header
---------------------------------------------------------- */

.dock-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 34px;

    padding: 0 10px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    font-size: 13px;

    font-weight: 600;

    cursor: move;

}

/* ----------------------------------------------------------
   Panel Body
---------------------------------------------------------- */

.dock-panel-body {

    flex: 1;

    overflow: auto;

    padding: 8px;

}

/* ----------------------------------------------------------
   Floating Panels
---------------------------------------------------------- */

.dock-floating {

    position: absolute;

    background: var(--background);

    border: 1px solid var(--border);

    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    border-radius: 4px;

    resize: both;

    overflow: hidden;

    z-index: 1000;

}

/* ----------------------------------------------------------
   Dock Tabs
---------------------------------------------------------- */

.dock-tabs {

    display: flex;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

}

.dock-tab {

    padding: 8px 14px;

    cursor: pointer;

    font-size: 12px;

    transition: .15s;

}

.dock-tab:hover {

    background: rgba(0,0,0,.05);

}

.dock-tab.active {

    background: white;

    border-bottom: 2px solid var(--accent);

}

/* ----------------------------------------------------------
   Auto Hide
---------------------------------------------------------- */

.dock-autohide {

    width: 26px;

    overflow: hidden;

}

.dock-autohide:hover {

    width: var(--left-dock-width);

    transition: width .25s;

}

/* ----------------------------------------------------------
   Splitters
---------------------------------------------------------- */

.dock-splitter-vertical {

    width: 4px;

    cursor: ew-resize;

    background: transparent;

}

.dock-splitter-horizontal {

    height: 4px;

    cursor: ns-resize;

    background: transparent;

}

.dock-splitter-vertical:hover,
.dock-splitter-horizontal:hover {

    background: var(--accent);

}

/* ----------------------------------------------------------
   Dock Placeholder
---------------------------------------------------------- */

.dock-placeholder {

    border: 2px dashed var(--accent);

    background: rgba(0,102,204,.08);

}

/* ----------------------------------------------------------
   Drag Overlay
---------------------------------------------------------- */

.dock-overlay {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 5000;

}

/* ----------------------------------------------------------
   Dock Indicators
---------------------------------------------------------- */

.dock-indicator {

    position: absolute;

    width: 48px;

    height: 48px;

    border-radius: 6px;

    background: rgba(0,102,204,.25);

    border: 2px solid var(--accent);

}

.dock-indicator.active {

    background: rgba(0,102,204,.45);

}