.details-layout-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.details-layout-main {
    flex: 1;
    height: 100%;
    overflow: auto;
    position: relative;
}

.details-layout-resize-handle {
    width: 4px;
    height: 100%;
    background-color: var(--border);
    cursor: col-resize;
    transition: background-color var(--transition-fast);
}

.details-layout-resize-handle:hover {
    background-color: var(--accent);
}

.details-layout-panel {
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .details-layout-container {
        flex-direction: column;
    }

    .details-layout-main,
    .details-layout-panel {
        width: 100% !important;
    }

    .details-layout-main {
        height: calc(100% - 300px);
    }

    .details-layout-panel {
        height: 300px;
    }

    .details-layout-resize-handle {
        width: 100%;
        height: 4px;
        cursor: row-resize;
    }
}