/* ============================================== */
/* FILE: jux-scroll-bar-test.css                  */
/* ============================================== */

/* 1. MAIN TARGET CONTAINER */
#jux-flow-target {
    width: 100%;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: 30px; margin-bottom: 5px;
    
    background: rgba(0, 0, 0, 0.2); 
    /* Uses Global Glass Border */
    border: 2px solid var(--glass-border); 
    border-radius: 12px; 
    padding: 20px; 
    backdrop-filter: blur(10px); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 2. LOADING STATE */
.jux-flow-empty-state {
    text-align: center; width: 100%; opacity: 0.5;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-color);
}

/* 3. SCROLL AREA */
.jux-flow-internal-wrapper { width: 100%; overflow: hidden; position: relative; }

.jux-flow-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;
    color: var(--accent-color); font-weight: 800; margin-bottom: 15px; padding-left: 2px;
    display: flex; align-items: center; gap: 10px;
}
.jux-flow-label::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--glass-border), transparent);
}

.jux-flow-scroll {
    display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; padding-left: 2px; -webkit-overflow-scrolling: touch;
    /* Scrollbar styling is now HANDLED GLOBALLY via jz-global-test.css */
}

/* 4. FLOW CARDS */
.jux-flow-card {
    flex: 0 0 160px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 15px; text-decoration: none;
    position: relative; scroll-snap-align: start; transition: all 0.3s ease;
    filter: grayscale(100%) opacity(0.5); cursor: not-allowed;
}
.jux-flow-icon { font-size: 1.5rem; margin-bottom: 8px; display: block; color: var(--text-color); }
.jux-flow-brand { font-size: 0.6rem; color: var(--accent-color); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.jux-flow-name { font-size: 0.8rem; color: var(--text-color); font-weight: 600; display: block; line-height: 1.2; }

/* UNLOCKED */
.jux-flow-card.unlocked {
    filter: grayscale(0%) opacity(1); cursor: pointer;
    background: var(--panel-bg); border-color: rgba(255,255,255,0.1);
}
.jux-flow-card.unlocked:hover {
    transform: translateY(-3px); border-color: var(--accent-color);
    box-shadow: 0 5px 20px var(--accent-color); /* Uses variable glow */
}