/* =====================================================
   CYBERPUNK COMMAND CENTER
   COMPONENTS
===================================================== */


/* ==========================
   HUD CARDS
========================== */

.hud-card{

    position:relative;

    padding:2rem;

    background:var(--panel-bg);

    border:var(--panel-border);

    border-radius:var(--radius-md);

    backdrop-filter:var(--glass-blur);

    box-shadow:var(--shadow-panel);

    overflow:hidden;

    transition:var(--transition);

}


/* Animated edge */

.hud-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:2px;

    background:var(--cyan);

    box-shadow:var(--glow-cyan);

}


.hud-card::after{

    content:"";

    position:absolute;

    bottom:0;
    right:0;

    width:40%;
    height:2px;

    background:var(--purple);

    box-shadow:var(--glow-purple);

}



.hud-card:hover{

    transform:translateY(-8px);

    border-color:var(--cyan);

    box-shadow:

        0 0 20px rgba(0,247,255,.3),

        0 0 50px rgba(0,247,255,.12);

}



/* ==========================
   CARD HEADINGS
========================== */


.hud-card h2{

    color:var(--text-muted);

    font-size:1rem;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:1rem;

}



.hud-card h3{

    color:var(--cyan);

    font-size:2rem;

    text-shadow:var(--glow-cyan);

}



/* ==========================
   PROGRESS BARS
========================== */


.progress{

    margin-top:1.5rem;

    height:8px;

    width:100%;

    background:

    rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

}



.fill{

    height:100%;

    background:

    linear-gradient(

        90deg,

        var(--cyan),

        var(--purple)

    );

    box-shadow:var(--glow-cyan);

    border-radius:20px;

}



/* Values */

.ninety{

    width:90%;

}


.sixty{

    width:60%;

}


.hundred{

    width:100%;

}



/* ==========================
   STAT BLOCKS
========================== */


.stat{

    background:

    linear-gradient(

        145deg,

        rgba(0,247,255,.08),

        transparent

    );

    border:1px solid rgba(0,247,255,.12);

    border-radius:var(--radius-md);

    backdrop-filter:blur(10px);

    transition:var(--transition);

}



.stat:hover{

    transform:scale(1.05);

    box-shadow:var(--glow-cyan);

}



.stat p{

    letter-spacing:2px;

    text-transform:uppercase;

}



/* ==========================
   HOLOGRAM CORE
========================== */


#hologram{

    position:relative;

    overflow:hidden;

}



#hologram::before{

    content:"";

    position:absolute;

    inset:15%;

    border-radius:50%;

    border:

    1px solid rgba(0,247,255,.3);

    animation:

    pulseRing 3s infinite;

}



#hologram::after{

    content:"";

    position:absolute;

    inset:5%;

    border-radius:50%;

    border:

    1px dashed rgba(157,77,255,.4);

    animation:

    rotateRing 12s linear infinite;

}



/* ==========================
   TERMINAL STYLE BOX
========================== */


.terminal{

    background:#020409;

    border:1px solid rgba(0,247,255,.2);

    padding:1.5rem;

    font-family:var(--font-body);

    color:var(--green);

    border-radius:var(--radius-sm);

    box-shadow:

    inset 0 0 30px rgba(0,247,255,.08);

}



/* Terminal cursor */


.terminal::after{

    content:"_";

    animation:

    blink .8s infinite;

}



/* ==========================
   CYBER BADGES
========================== */


.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.4rem .8rem;

    border-radius:50px;

    border:1px solid var(--cyan);

    color:var(--cyan);

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

}



.badge::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:

    0 0 10px var(--green);

}



/* ==========================
   NEON DIVIDER
========================== */


.cyber-line{

    height:1px;

    width:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--cyan),

        transparent

    );



    box-shadow:var(--glow-cyan);

}



/* ==========================
   BUTTON ADDITIONS
========================== */


.primary,
.secondary{

    position:relative;

    overflow:hidden;

}



.primary::before,
.secondary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.5s;

}



.primary:hover::before,
.secondary:hover::before{

    left:120%;

}

/* =====================================================

    TERMINAL PANEL

    Mission 011
    HEARTBEAT

====================================================== */

.terminal-panel{

    /*
        4th card in .dashboard's 3-column grid (layout.css) —
        without this it's confined to a single 1/3-width
        column like the three HUD cards above it, wrapping
        terminal output awkwardly. Spans the full row instead.
        Same fix as CyberCore.Blazor's layout.css.
    */
    grid-column:1 / -1;

    min-height:320px;

    display:flex;

    flex-direction:column;

}



#terminal{

    flex:1;

    margin-top:18px;

    padding:18px;

    overflow-y:auto;

    border-radius:10px;

    border:1px solid rgba(0,247,255,.15);

    background:rgba(0,10,18,.75);

    font-family:"JetBrains Mono", monospace;

    font-size:.9rem;

    line-height:1.8;

    color:#8ffcff;

    box-shadow:
        inset 0 0 30px rgba(0,247,255,.05);

}



/*
    Individual terminal lines
*/

.terminal-line{

    opacity:0;

    animation:

        terminalFade .35s forwards;

}

/* =====================================================

    TERMINAL CURSOR

====================================================== */

#terminal::after{

    content:"▋";

    color:#00f7ff;

    animation:

        terminalCursor .9s infinite;

}

/* =====================================================

🎖️ COMPONENT

Mission Control Overlay

Purpose

Persistent development HUD.

Ad Astra.

====================================================== */

#missionControl{

    position:fixed;

    top:90px;

    right:30px;

    width:270px;

    padding:20px;

    z-index:9999;

    background:rgba(5,15,25,.92);

    border:1px solid rgba(0,247,255,.25);

    backdrop-filter:blur(10px);

    border-radius:12px;

    box-shadow:

        0 0 35px rgba(0,247,255,.12);

}

.mission-header{

    font-family:"Orbitron",sans-serif;

    font-size:1rem;

    color:#00f7ff;

    letter-spacing:3px;

    margin-bottom:18px;

    text-align:center;

}

.mission-content{

    font-family:"JetBrains Mono",monospace;

    font-size:.82rem;

}

.mission-content p{

    display:flex;

    justify-content:space-between;

    margin:10px 0;

}

.mission-content ul{

    list-style:none;

    margin-top:15px;

    padding-left:0;

}

.mission-content li{

    margin:8px 0;

}