/*==================================================
 IshtiaqAli.com
 System Components v1.0
 Reusable UI Components
==================================================*/

/*==================================================
 PANEL
==================================================*/

.panel {
    position: relative;
    display: flex;
    flex-direction: column;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

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

    backdrop-filter: blur(18px);

    overflow: hidden;
}

.panel__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 1.5rem;

    border-bottom: 1px solid rgba(255,255,255,.06);
}

.panel__body {

    padding: 1.5rem;
}

.panel__footer {

    padding: 1rem 1.5rem;

    border-top: 1px solid rgba(255,255,255,.06);
}

.panel__title {

    margin: 0;

    font-size: .95rem;

    font-weight: 600;

    color: var(--color-text);
}

.panel__subtitle {

    font-size: .8rem;

    color: var(--color-text-muted);
}

/*==================================================
 STATUS PILL
==================================================*/

.status-pill {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    padding: .45rem .85rem;

    border-radius: 999px;

    background: rgba(34,197,94,.12);

    color: #7ee787;

    font-size: .75rem;

    font-weight: 600;
}

.status-pill::before {

    content: "";

    width: .5rem;

    height: .5rem;

    border-radius: 50%;

    background: currentColor;
}

/*==================================================
 CHIP
==================================================*/

.chip {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .65rem 1rem;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.03);

    color: var(--color-text-muted);

    font-size: .85rem;

    transition: all .25s ease;
}

.chip:hover {

    border-color: rgba(255,255,255,.18);

    color: var(--color-text);
}

/*==================================================
 METRIC CARD
==================================================*/

.metric-card {

    display: flex;

    flex-direction: column;

    gap: .4rem;

    padding: 1.25rem;

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

    border: 1px solid rgba(255,255,255,.06);

    background: rgba(255,255,255,.02);
}

.metric-card__label {

    font-size: .8rem;

    color: var(--color-text-muted);
}

.metric-card__value {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--color-text);
}

.metric-card__meta {

    font-size: .8rem;

    color: var(--color-text-muted);
}

/*==================================================
 BADGE
==================================================*/

.badge {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    padding: .6rem 1rem;

    border-radius: 999px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(12px);

    font-size: .85rem;

    color: var(--color-text-muted);
}

.badge__dot {

    width: .55rem;

    height: .55rem;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 10px #22c55e;
}

/*==================================================
 GLASS SURFACE
==================================================*/

.glass {

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(20px);
}

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

.divider {

    height: 1px;

    background: rgba(255,255,255,.06);

}

/*==================================================
 ACTIVITY LIST
==================================================*/

.activity-list {

    display: flex;

    flex-direction: column;

    gap: .9rem;
}

.activity-item {

    display: flex;

    align-items: center;

    gap: .75rem;

    color: var(--color-text-muted);

    font-size: .9rem;
}

.activity-item::before {

    content: "";

    width: .45rem;

    height: .45rem;

    border-radius: 50%;

    background: #22c55e;

    flex-shrink: 0;
}

/*==================================================
 WINDOW DOTS
==================================================*/

.window-dots {

    display: flex;

    gap: .45rem;
}

.window-dot {

    width: .7rem;

    height: .7rem;

    border-radius: 50%;
}

.window-dot--red {

    background: #ff5f57;
}

.window-dot--yellow {

    background: #febc2e;
}

.window-dot--green {

    background: #28c840;
}

/*==================================================
SCENE SYSTEM
Enterprise Background Language
==================================================*/

.scene{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

/*--------------------------------------------------
Scene Overlay
--------------------------------------------------*/

.scene::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:-2;

}

/*--------------------------------------------------
Ambient Light
--------------------------------------------------*/

.scene::after{

    content:"";

    position:absolute;

    inset:-20%;

    pointer-events:none;

    z-index:-1;

    filter:blur(120px);

    opacity:.45;

}

/*==================================================
Scene 01
Hero
==================================================*/

.scene-hero::after{

    background:

    radial-gradient(circle at 20% 20%,

    rgba(99,102,241,.20),

    transparent 45%),

    radial-gradient(circle at 80% 10%,

    rgba(139,92,246,.15),

    transparent 40%);

}

/*==================================================
Scene 02
Operations
==================================================*/

.scene-grid::before{

    background:

    linear-gradient(

        rgba(255,255,255,.025) 1px,

        transparent 1px),

    linear-gradient(

        90deg,

        rgba(255,255,255,.025) 1px,

        transparent 1px);

    background-size:60px 60px;

    mask-image:

    radial-gradient(circle,

    white 35%,

    transparent 100%);

}

.scene-grid::after{

    background:

    radial-gradient(circle at center,

    rgba(59,130,246,.10),

    transparent 60%);

}

/*==================================================
Scene 03
Engineering
==================================================*/

.scene-blueprint::before{

    background:

    repeating-linear-gradient(

        0deg,

        rgba(255,255,255,.018),

        rgba(255,255,255,.018) 1px,

        transparent 1px,

        transparent 50px),

    repeating-linear-gradient(

        90deg,

        rgba(255,255,255,.018),

        rgba(255,255,255,.018) 1px,

        transparent 1px,

        transparent 50px);

}

.scene-blueprint::after{

    background:

    radial-gradient(circle at left center,

    rgba(59,130,246,.14),

    transparent 45%);

}

/*==================================================
Scene 04
Growth
==================================================*/

.scene-dashboard::after{

    background:

    radial-gradient(circle at top right,

    rgba(139,92,246,.18),

    transparent 45%),

    radial-gradient(circle at bottom left,

    rgba(59,130,246,.12),

    transparent 45%);

}

/*==================================================
Scene 05
Infrastructure
==================================================*/

.scene-network::before{

    background:

    radial-gradient(

        rgba(255,255,255,.04) 1px,

        transparent 1px);

    background-size:42px 42px;

    opacity:.4;

}

.scene-network::after{

    background:

    radial-gradient(circle at right,

    rgba(59,130,246,.14),

    transparent 40%);

}

/*==================================================
Scene 06
Minimal
==================================================*/

.scene-minimal::after{

    background:

    radial-gradient(circle at center,

    rgba(255,255,255,.035),

    transparent 55%);

}

/*==================================================
SCENE BACKGROUND SYSTEM V2
==================================================*/

.scene{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.scene>*{
    position:relative;
    z-index:2;
}

.scene::before,
.scene::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

/*==================================================
HERO
==================================================*/

.scene-hero{

    background:
    linear-gradient(
        180deg,
        #131c46 0%,
        #0d1434 35%,
        #090f26 100%
    );

}

.scene-hero::before{

    background:

        radial-gradient(
            circle at 50% -15%,
            rgba(93,132,255,.28),
            transparent 55%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(0,183,255,.12),
            transparent 40%
        );

}

.scene-hero::after{

    background:

    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );

    background-size:80px 80px;

    opacity:.45;

}

/*==================================================
MISSION CONTROL
==================================================*/

.scene-control{

    background:
    #0a1125;

}

.scene-control::before{

    background:

    radial-gradient(
        circle at top left,
        rgba(0,183,255,.14),
        transparent 45%
    );

}

.scene-control::after{

    background-image:

    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);

    background-size:44px 44px;

}

/*==================================================
ENGINEERING
==================================================*/

.scene-blueprint{

    background:
    #0d1627;

}

.scene-blueprint::before{

    background:

    linear-gradient(
        135deg,
        rgba(110,170,255,.10),
        transparent 40%
    );

}

.scene-blueprint::after{

    background-image:

    linear-gradient(rgba(98,164,255,.055) 1px, transparent 1px),

    linear-gradient(90deg, rgba(98,164,255,.055) 1px, transparent 1px);

    background-size:28px 28px;

}

/*==================================================
ANALYTICS
==================================================*/

.scene-dashboard{

    background:
    #0b1624;

}

.scene-dashboard::before{

    background:

    radial-gradient(
        circle at 85% 90%,
        rgba(0,210,255,.18),
        transparent 42%
    );

}

.scene-dashboard::after{

    background:

    repeating-linear-gradient(

        180deg,

        transparent,

        transparent 45px,

        rgba(255,255,255,.03) 46px,

        transparent 47px

    );

}

/*==================================================
NETWORK
==================================================*/

.scene-network{

    background:
    #091220;

}

.scene-network::before{

    background:

    radial-gradient(
        circle at top right,
        rgba(88,145,255,.18),
        transparent 45%
    );

}

.scene-network::after{

    background-image:

    radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.2px);

    background-size:26px 26px;

    opacity:.45;

}

/*==================================================
TRUST
==================================================*/

.scene-minimal{

    background:
    #0a0d18;

}

.scene-minimal::before{

    background:

    radial-gradient(
        circle at center,
        rgba(255,255,255,.05),
        transparent 70%
    );

}

.scene-minimal::after{

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.015),

        transparent

    );

}

/*==================================================
CTA
==================================================*/

.scene-hero-return{

    background:

    linear-gradient(
        180deg,
        #10173c,
        #0b1028
    );

}

.scene-hero-return::before{

    background:

    radial-gradient(
        circle at 50% 0,
        rgba(93,132,255,.26),
        transparent 55%
    );

}

.scene-hero-return::after{

    background:

    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );

    background-size:80px 80px;

    opacity:.35;

}