/* ═══════════════════════════════════════════════════════════════════════════
   split-workspace.css — Base reutilizavel de paineis divididos
   Inspirado no Chrome split-screen: paineis independentes com divisores
   arrstaveis, bordas suaves e respiro visual.

   Uso:
     <div class="sw-container d-flex">
       <div class="sw-panel">
         <div class="sw-panel-header">Titulo</div>
         <div class="sw-scrollable p-3">Conteudo</div>
       </div>
       <div class="sw-divider"></div>
       <div class="sw-panel">...</div>
       <div class="sw-divider"></div>
       <div class="sw-panel">...</div>
     </div>

   JS: hermmesWorkspace.initWorkspace3Col(containerId, col1Id, div1Id, ...)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────────────── */
.sw-container {
    background: var(--bs-body-bg);
    padding: 6px 8px;
    gap: 0;
    overflow-x: hidden; /* defesa contra overflow horizontal da ultima coluna */
}

/* ── Paineis ────────────────────────────────────────────────────────────── */
.sw-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    max-width: 100%; /* impede filhos grandes de estourar o painel */
    flex: none; /* JS controla width em px */
    background: var(--bs-body-bg);
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
}

/* Contrato: todo conteúdo dentro de sw-panel respeita a largura */
.sw-panel * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Header do painel ──────────────────────────────────────────────────── */
.sw-panel-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex-shrink: 0;
    background: var(--bs-gray-50, var(--bs-light));
    border-radius: 7px 7px 0 0;
}

/* ── Divisor arrastavel ────────────────────────────────────────────────── */
.sw-divider {
    width: 8px;
    min-width: 8px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.sw-divider:hover {
    background: var(--bs-gray-100);
}

.sw-divider:active {
    background: var(--bs-primary-bg-subtle);
}

/* Grip handle — linha vertical sutil */
.sw-divider::before {
    content: '';
    position: absolute;
    top: calc(50% - 16px);
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background: var(--bs-gray-400);
    pointer-events: none;
    transition: background 0.2s ease, height 0.2s ease;
}

.sw-divider:hover::before {
    background: var(--bs-primary);
    height: 40px;
    top: calc(50% - 20px);
}

.sw-divider::after {
    content: none;
}

/* ── Area scrollavel dentro de um painel ────────────────────────────────── */
.sw-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Scrollbars estilizadas */
.sw-scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sw-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.sw-scrollable::-webkit-scrollbar-thumb {
    background: var(--bs-gray-300);
    border-radius: 3px;
    transition: background 0.2s;
}

.sw-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

/* Firefox */
.sw-scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300) transparent;
}

/* ── Responsividade ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sw-container {
        flex-direction: column !important;
        padding: 0;
    }
    .sw-divider {
        display: none !important;
    }
    .sw-panel {
        min-width: 100% !important;
        max-height: 40vh;
        flex: none !important;
        border-radius: 0;
        border: none;
    }
    .sw-panel-header {
        display: none;
    }
}

/* ── Microanimacao de atencao — pulse sutil para botoes/elementos ───── */
@keyframes sw-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(var(--bs-success-rgb), 0.15); }
}

.sw-pulse {
    animation: sw-pulse-glow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sw-pulse:hover,
.sw-pulse:focus {
    animation: none; /* para ao interagir */
}