/* =============================================
FILE: /assets/03-tools-page/css/jztools-w02-w04-univ-tools-adaptor.css
LINK: <link rel="stylesheet" href="/assets/03-tools-page/css/jztools-w02-w04-univ-tools-adaptor.css">
PURPOSE: Global UI Shell for Tool Staging Areas (w02/w04) across all categories.
VERSION: v1.0  DATE CREATED: 2026-04-18 - "Initial Architecture & Typography Routing"
VERSION: v1.1  DATE MODIFIED: 2026-04-19 - "Added Teleporter Shell Padding"
VERSION: v1.2  DATE MODIFIED: 2026-04-21 - "Section 4 - Revamped to Legacy model"
============================================== */

:root {
    /* --- Brat Tweaks: Container Spacing & Borders --- */
    --jux-shell-padding: 5px;         /* <-- Brat Tweak: Space between Outer RGB box and Inner Tool Border */
    --jux-stage-padding: 30px;         /* <-- Brat Tweak: Internal padding of the tool area */
    --jux-stage-gap: 25px;             /* <-- Brat Tweak: Vertical gap between internal blocks */
    --jux-border-thickness: 2px;       /* <-- Brat Tweak: Thickness of the glass border */
    --jux-glass-blur: 12px;            /* <-- Brat Tweak: Intensity of the background blur */
    --jux-glass-opacity: 0.6;          /* <-- Brat Tweak: Transparency of the glass panels */

    /* --- Brat Tweaks: Typography scaling --- */
    --jux-h2-shadow-intensity: 10px;   /* <-- Brat Tweak: Glow spread of tool titles */
    --jux-text-opacity: 0.8;           /* <-- Brat Tweak: Default opacity for secondary text */
}

/* =========================
SECTION 1: STAGE CORE LAYOUT
============================ */

/* The Teleporter Cargo Shell - Keeps the tool from touching outer edges */
#jux-universal-tool-stage {
    width: 100%;
    padding: var(--jux-shell-padding);
    box-sizing: border-box;
    margin-bottom: 5px; /* <-- Brat Tweak: (inner box to ad - 5px gap to adspot) */
}

/* The main wrapper for every tool in the w04 widget */
.jux-stage-content {
    position: relative; /* <-- Critical for placing the info button in the corner */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--jux-stage-gap);
    padding: var(--jux-stage-padding);
    background: rgba(0, 0, 0, var(--jux-glass-opacity));
    backdrop-filter: blur(var(--jux-glass-blur));
    -webkit-backdrop-filter: blur(var(--jux-glass-blur));
    border: var(--jux-border-thickness) solid var(--jzn-container-border-c);
    border-radius: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* =========================
SECTION 2: TYPOGRAPHY ROUTING (v6.0)
============================ */

/* Tool Header (H2) - Routed to v6.0 Heading Font */
.jux-stage-content h2,
.JuX-Header h2 {
    font-family: var(--jzn-active-heading-font);
    font-size: var(--jzn-size-h2);
    color: var(--jzn-heading-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 var(--jux-h2-shadow-intensity) rgba(0, 204, 255, 0.5);
    margin: 0;
    text-align: center;
}

/* Secondary Header/Sub-titles (H3) */
.jux-stage-content h3 {
    font-family: var(--jzn-active-font);
    font-size: var(--jzn-size-h3);
    color: var(--jzn-subtext-color);
    margin-bottom: 10px;
}

/* Standard Body & Helper Text */
.jux-stage-content p,
.jux-upload-desc {
    font-family: var(--jzn-active-font);
    font-size: var(--jzn-size-text);
    color: var(--jzn-text);
    opacity: var(--jux-text-opacity);
    line-height: 1.6;
}

/* Micro Trust Labels (Blueprint v6.0 Compliance) */
.jux-trust-item,
.jux-trust-pill {
    font-family: var(--jzn-active-font);
    font-size: var(--jzn-size-micro);
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--jzn-text);
    opacity: 0.6;
}

/* =========================
SECTION 3: UNIVERSAL UI COMPONENTS
============================ */

/* Standardized Drop Zone / Upload Area */
.jux-upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.3); /* <-- Brat Tweak: Dash style */
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
}

.jux-upload-area:hover,
.jux-upload-area.dragover {
    border-color: var(--jzn-hover);
    background: rgba(0, 204, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 204, 255, 0.1);
}

/* The Cobalt Button - Standard Primary Action */
.btn-cobalt,
.jux-btn-primary {
    background: linear-gradient(135deg, #0044cc 0%, #0088ff 100%);
    font-family: var(--jzn-active-font);
    font-size: var(--jzn-size-text);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 80, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-cobalt:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 80, 255, 0.6);
}

.btn-cobalt:disabled {
    background: #333 !important;
    color: #777 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================
SECTION 4: PROGRESS & SUCCESS STATES
============================ */

.jux-progress-container {
    width: 100%;
    display: none; /* Controlled via JS */
    margin: 20px 0;
}

.jux-progress-bar {
    width: 100%;
    height: 6px; /* <-- Brat Tweak: Bar thickness */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.jux-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--jzn-hover);
    box-shadow: 0 0 10px var(--jzn-hover);
    transition: width 0.4s ease;
}

/* Success Download Area - GREEN OVERRIDE */
.jux-download-area {
    display: none; /* Controlled via JS */
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: rgba(0, 200, 81, 0.1);             /* <-- Brat Tweak: Success Box Background (Soft Green) */
    border: 1px solid rgba(0, 200, 81, 0.4);       /* <-- Brat Tweak: Success Box Border (Green) */
}

/* Success Title overrides the default H3 */
.jux-download-area .jux-success-title {
    color: #00C851 !important;                     /* <-- Brat Tweak: Success Title Color (Solid Green) */
    font-family: var(--jzn-active-heading-font);
    margin-bottom: 10px;
}

/* The "Process Another File" Refresh Button */
.jux-btn-refresh {
    background: #00C851;                           /* <-- Brat Tweak: Refresh Button Background (Green) */
    color: #ffffff;
    font-family: var(--jzn-active-font);
    font-size: var(--jzn-size-sub);
    border: 1px solid #ffffff;                     /* <-- Brat Tweak: Refresh Button Border (White) */
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.jux-btn-refresh:hover {
    background: #007E33;                           /* <-- Brat Tweak: Refresh Button Hover Background (Darker Green) */
    box-shadow: 0 0 15px rgba(0, 200, 81, 0.4);    /* <-- Brat Tweak: Refresh Button Hover Glow */
    transform: translateY(-2px);
}

/* =========================
SECTION 5: THE TRUST GRID (Pill Update)
============================ */

.jux-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop & Tablet: 4 in a straight line */
    gap: 15px; /* <-- Brat Tweak: Gap between the trust cards */
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.jux-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 8px 15px; /* <-- Brat Tweak: Top/Bottom and Left/Right inner padding */
    border: 2px solid transparent; /* <-- Brat Tweak: Transparent border to allow RGB pulse */
    border-radius: 50px; /* <-- Brat Tweak: Pill shape roundness (50px for full pill) */
    background: rgba(0, 0, 0, 0.4); /* <-- Brat Tweak: Dark glass background for the card */
    animation: jz-8-color-pulse 6s linear infinite; /* <-- Brat Tweak: RGB pulse animation speed */
    transition: all 0.3s ease;
}

.jux-trust-item:hover {
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.4); /* <-- Brat Tweak: Hover glow effect */
}

/* Mobile Dictionary: Switch to 2x2 Grid below 768px */
@media (max-width: 768px) {
    .jux-tech-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobile: 2 items per row */
        gap: 10px; /* <-- Brat Tweak: Tighter gap on mobile */
    }
}

/* =========================
SECTION 6: INFO MODAL & RGB ENGINE
============================ */

/* The Signature Juxtazone 8-Color Pulse - HIGH INTENSITY */
@keyframes jz-8-color-pulse {
    /* <-- Brat Tweak: Glow spread increased to 15px, opacity cranked to 0.8, added an inset glow for neon depth */
    0% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255,0,0,0.8), inset 0 0 5px rgba(255,0,0,0.4); }
    14% { border-color: #ff7f00; box-shadow: 0 0 15px rgba(255,127,0,0.8), inset 0 0 5px rgba(255,127,0,0.4); }
    28% { border-color: #ffff00; box-shadow: 0 0 15px rgba(255,255,0,0.8), inset 0 0 5px rgba(255,255,0,0.4); }
    42% { border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.8), inset 0 0 5px rgba(0,255,0,0.4); }
    57% { border-color: #0000ff; box-shadow: 0 0 15px rgba(0,0,255,0.8), inset 0 0 5px rgba(0,0,255,0.4); }
    71% { border-color: #4b0082; box-shadow: 0 0 15px rgba(75,0,130,0.8), inset 0 0 5px rgba(75,0,130,0.4); }
    85% { border-color: #9400d3; box-shadow: 0 0 15px rgba(148,0,211,0.8), inset 0 0 5px rgba(148,0,211,0.4); }
    100% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255,0,0,0.8), inset 0 0 5px rgba(255,0,0,0.4); }
}

/* Universal Info Trigger Button */
.jux-info-trigger {
    position: absolute;
    top: 20px; /* <-- Brat Tweak: Distance from top edge */
    right: 20px; /* <-- Brat Tweak: Distance from right edge */
    width: 32px; /* <-- Brat Tweak: Button width */
    height: 32px; /* <-- Brat Tweak: Button height */
    border-radius: 50%; /* <-- Brat Tweak: Perfectly round */
    border: 1px solid var(--jzn-hover); /* <-- Brat Tweak: Info button border color */
    background: rgba(0, 0, 0, 0.5); /* <-- Brat Tweak: Info button background */
    color: var(--jzn-hover); /* <-- Brat Tweak: Info icon (?) color */
    font-family: var(--jzn-active-font);
    font-size: 1.2rem; /* <-- Brat Tweak: Size of the question mark */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.jux-info-trigger:hover {
    animation: jz-8-color-pulse 2s linear infinite; /* <-- Brat Tweak: Hover RGB animation speed */
    color: #fff;
}

/* Universal Modal Base */
.jux-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* <-- Brat Tweak: Dark overlay background */
    backdrop-filter: blur(10px); /* <-- Brat Tweak: Background blur intensity behind modal */
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jux-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.jux-modal-box {
    background: rgba(5, 10, 20, 0.95); /* <-- Brat Tweak: Modal inner background */
    border: 2px solid transparent;
    border-radius: 15px; /* <-- Brat Tweak: Modal roundness */
    padding: 30px; /* <-- Brat Tweak: Modal inner padding */
    max-width: 450px; /* <-- Brat Tweak: Max width of the modal */
    width: 90%;
    animation: jz-8-color-pulse 4s linear infinite; /* <-- Brat Tweak: Modal RGB pulse speed */
    color: var(--jzn-text);
    position: relative;
    text-align: left;
}

.jux-modal-close {
    position: absolute;
    top: 15px; /* <-- Brat Tweak: Close button top positioning */
    right: 15px; /* <-- Brat Tweak: Close button right positioning */
    cursor: pointer;
    color: #ff4444; /* <-- Brat Tweak: Close button (X) color */
    font-size: 1.5rem; /* <-- Brat Tweak: Close button size */
    line-height: 1;
}