/* ═══════════════════════════════════════════════════════════
   Splitter – resizable pane divider
   ═══════════════════════════════════════════════════════════ */

.oo-splitter {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.oo-splitter--horizontal {
    flex-direction: row;
}

.oo-splitter--vertical {
    flex-direction: column;
}

/* ── Pane ──────────────────────────────────────────────────── */
.oo-splitter-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    /* flex-basis wird per inline-style gesetzt */
}

.oo-splitter-pane--flex {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
}

.oo-splitter-pane--collapsed-horizontal {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.oo-splitter-pane--collapsed-vertical {
    flex: 0 0 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ── Handle ────────────────────────────────────────────────── */
.oo-splitter-handle {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    user-select: none;
    touch-action: none;
    background-color: var(--oo-neutral);
    transition: background-color 0.15s ease;
}

.oo-splitter--horizontal > .oo-splitter-handle {
    width: 5px;
    cursor: col-resize;
    flex-direction: column;
}

.oo-splitter--vertical > .oo-splitter-handle {
    height: 5px;
    cursor: row-resize;
    flex-direction: row;
}

.oo-splitter-handle:hover,
.oo-splitter-handle--dragging {
    background-color: var(--oo-primary);
    opacity: 0.7;
}

/* Visueller Grip-Indikator */
.oo-splitter-handle__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.oo-splitter--horizontal > .oo-splitter-handle .oo-splitter-handle__grip {
    flex-direction: column;
}

.oo-splitter--vertical > .oo-splitter-handle .oo-splitter-handle__grip {
    flex-direction: row;
}

.oo-splitter-handle__grip-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--oo-primary-dark);
    opacity: 0.5;
}

.oo-splitter-handle:hover .oo-splitter-handle__grip-dot,
.oo-splitter-handle--dragging .oo-splitter-handle__grip-dot {
    background-color: #fff;
    opacity: 1;
}

/* Collapse-Button am Handle */
.oo-splitter-handle__collapse-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--oo-primary);
    color: var(--oo-primary-on);
    font-size: 16px;
    font-variation-settings: 'FILL' 1;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
    z-index: 1;
    border: none;
    padding: 0;
    line-height: 1;
}

.oo-splitter-handle:hover .oo-splitter-handle__collapse-btn {
    opacity: 1;
}

.oo-splitter--horizontal > .oo-splitter-handle .oo-splitter-handle__collapse-btn {
    top: 50%;
    transform: translateY(-50%);
}

.oo-splitter--vertical > .oo-splitter-handle .oo-splitter-handle__collapse-btn {
    left: 50%;
    transform: translateX(-50%);
}

/* Globaler Drag-Cursor-Override während Drag */
body.oo-splitter-dragging-h * {
    cursor: col-resize !important;
}

body.oo-splitter-dragging-v * {
    cursor: row-resize !important;
}

/* ── Fixed-Modus: Handle als Border ohne Interaktion ──────── */
.oo-splitter--fixed > .oo-splitter-handle,
.oo-splitter-handle--fixed {
    background-color: var(--oo-neutral-light);
    cursor: default;
    pointer-events: none;
}

.oo-splitter--fixed > .oo-splitter-handle:hover,
.oo-splitter-handle--fixed:hover {
    background-color: var(--oo-neutral-light);
    opacity: 1;
}

.oo-splitter--horizontal > .oo-splitter-handle--fixed {
    width: 1px;
}

.oo-splitter--vertical > .oo-splitter-handle--fixed {
    height: 1px;
}