/* ========================================
   Yapit Theme — light base from BeautifulGrids
   + warm yellow accent
   ======================================== */

:root {
    /* Override accent from blue to Yapit yellow */
    --color-accent: #f0c850;
    --color-accent-hover: #d4a830;
    --color-accent-dim: rgba(240, 200, 80, 0.3);

    /* Glow tokens — warm amber for active states */
    --glow-color: rgba(240, 200, 80, 0.08);
    --glow-border: rgba(240, 200, 80, 0.3);
    --glow-shadow: 0 0 8px rgba(240, 200, 80, 0.1);
}

/* Active chips use Yapit yellow instead of blue */
.step-popover-scroll .chip-group .chip.active {
    background: rgba(240, 200, 80, 0.2);
    color: #8B6914;
    box-shadow: inset 0 0 0 1px rgba(240, 200, 80, 0.4);
}

.chip-toggle-btn.active {
    background: rgba(240, 200, 80, 0.2);
    color: #8B6914;
}

/* Slider fill bar — warm yellow */
.step-popover-scroll .hybrid-track::before {
    background: rgba(240, 200, 80, 0.18);
}

/* Active sidebar step */
.step-card.active {
    background: rgba(240, 200, 80, 0.15);
    color: #8B6914;
    box-shadow: 0 0 0 1px rgba(240, 200, 80, 0.4);
}

/* Dropzone — yellow tint */
.dropzone {
    border-color: rgba(240, 200, 80, 0.3);
    background: rgba(240, 200, 80, 0.04);
}

.dropzone:hover {
    border-color: rgba(240, 200, 80, 0.5);
    background: rgba(240, 200, 80, 0.08);
}

.dropzone.drag-over {
    border-color: var(--color-accent);
    background: rgba(240, 200, 80, 0.15);
}

/* Primary action buttons — yellow accent block */
.step-popover-scroll .btn.btn-block {
    background: rgba(240, 200, 80, 0.15);
    color: #8B6914;
    border: 1px solid rgba(240, 200, 80, 0.3);
}

.step-popover-scroll .btn.btn-block:hover {
    background: rgba(240, 200, 80, 0.25);
}

/* ---- Button accents ---- */

/* Action buttons — red: do something in this phase */
.btn-action {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.btn-action:hover {
    background: rgba(239, 68, 68, 0.18) !important;
}

/* Navigation buttons — blue: advance to next section */
.btn-nav-next {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

.btn-nav-next:hover {
    background: rgba(37, 99, 235, 0.18) !important;
}

.btn-nav-next:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Panel header */
.panel-header {
    color: var(--color-text-primary);
    font-size: var(--font-size-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px;
    height: var(--grid-cell, 30px);
    display: flex;
    align-items: center;
    cursor: grab;
}