/* ==========================================================
   VerifyEBlastX Enterprise
   Version 2.0
========================================================== */

:root{

    --bg:#08111f;
    --bg2:#0f172a;

    --glass:rgba(18,27,44,.70);
    --glass-border:rgba(255,255,255,.08);

    --primary:#22d3ee;
    --primary-dark:#0891b2;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --text:#edf4ff;
    --muted:#9caec7;

    --radius:20px;

    --shadow:
        0 25px 60px rgba(0,0,0,.45);

}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:
        radial-gradient(circle at top left,#11355e 0%,transparent 35%),
        radial-gradient(circle at bottom right,#0b6ea0 0%,transparent 30%),
        linear-gradient(
            135deg,
            var(--bg),
            var(--bg2)
        );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    max-width:100%;

}

button{

    font-family:inherit;

}

.glass{

    background:var(--glass);

    backdrop-filter:blur(24px);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

    display:inline-block;

    box-shadow:0 0 15px var(--success);

}

.icon-button{

    width:44px;

    height:44px;

    border:none;

    cursor:pointer;

    color:white;

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

    border-radius:12px;

    transition:.25s;

}

.icon-button:hover{

    background:rgba(34,211,238,.18);

    transform:translateY(-2px);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border:none;

    border-radius:14px;

    font-weight:700;

    padding:14px;

}

.btn-primary:hover{

    filter:brightness(1.08);

}

.form-control{

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

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

    color:white;

    border-radius:14px;

}

.form-control:focus{

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

    border-color:var(--primary);

    color:white;

    box-shadow:
        0 0 0 .2rem rgba(34,211,238,.20);

}

.input-group-text{

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

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

    color:var(--primary);

}

.form-label,
label{

    color:#d7e5ff;

    margin-bottom:8px;

    font-weight:600;

}

/* ==========================================================
   APPLICATION LAYOUT
========================================================== */

#app{

    display:flex;

    min-height:100vh;

}

.main-wrapper{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

}

.page-wrapper{

    flex:1;

    padding:32px;

    overflow:auto;

}

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar{

    width:280px;

    background:rgba(9,17,30,.88);

    backdrop-filter:blur(22px);

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

    display:flex;

    flex-direction:column;

    transition:.30s;

}

.sidebar-header{

    padding:28px;

    display:flex;

    align-items:center;

    gap:16px;

}

.sidebar-logo{

    width:58px;

    height:58px;

    object-fit:contain;

}

.sidebar-brand h2{

    font-size:22px;

    font-weight:800;

    margin:0;

}

.sidebar-brand span{

    color:var(--muted);

    font-size:13px;

}

.sidebar-nav{

    flex:1;

    padding:12px;

}

.sidebar-nav a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#d5e7ff;

    padding:14px 18px;

    margin-bottom:8px;

    border-radius:14px;

    transition:.25s;

}

.sidebar-nav a:hover{

    background:rgba(34,211,238,.10);

    transform:translateX(4px);

}

.sidebar-nav a.active{

    background:linear-gradient(
        90deg,
        rgba(34,211,238,.22),
        rgba(34,211,238,.08)
    );

    color:white;

    border-left:4px solid var(--primary);

}

.sidebar-nav hr{

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

    margin:20px 8px;

}

.sidebar-footer{

    padding:20px;

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

}

.system-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}


/* ==========================================================
   TOPBAR
========================================================== */

.topbar{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

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

    background:rgba(9,17,30,.55);

    backdrop-filter:blur(20px);

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-left h2{

    margin:0;

    font-weight:700;

}

.topbar-left small{

    color:var(--muted);

}

.topbar-center{

    flex:1;

    display:flex;

    justify-content:center;

    padding:0 30px;

}

.search-box{

    width:100%;

    max-width:420px;

    display:flex;

    align-items:center;

    gap:12px;

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

    border-radius:16px;

    padding:12px 18px;

}

.search-box input{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.live-status{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#dbe8ff;

}

.profile-card{

    display:flex;

    align-items:center;

    gap:14px;

}

.profile-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    font-size:20px;

}

/* ==========================================================
   LOGIN PAGE
========================================================== */

.login-screen{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.login-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.orb{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

}

.orb-one{

    width:420px;

    height:420px;

    background:#22d3ee;

    top:-120px;

    left:-120px;

}

.orb-two{

    width:380px;

    height:380px;

    background:#2563eb;

    right:-120px;

    bottom:-120px;

}

.orb-three{

    width:260px;

    height:260px;

    background:#06b6d4;

    top:45%;

    left:55%;

}

.login-card{

    position:relative;

    width:100%;

    max-width:520px;

    padding:45px;

    z-index:5;

}

.logo-area{

    text-align:center;

    margin-bottom:35px;

}

.login-logo{

    width:95px;

    margin-bottom:20px;

}

.logo-area h1{

    font-size:36px;

    font-weight:800;

    margin-bottom:10px;

}

.logo-area p{

    color:var(--muted);

    margin-bottom:0;

}

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0 28px;

    font-size:14px;

}

.login-options a{

    color:var(--primary);

}

.login-button{

    width:100%;

    height:56px;

    font-size:17px;

}

.system-status-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:35px;

}

.status-card{

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

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

    border-radius:16px;

    text-align:center;

    padding:18px;

}

.status-card i{

    font-size:26px;

    color:var(--primary);

    margin-bottom:12px;

}

.status-card span{

    display:block;

    color:var(--muted);

    font-size:13px;

}

.status-card strong{

    display:block;

    margin-top:8px;

    color:var(--success);

}

.login-footer{

    text-align:center;

    margin-top:28px;

    color:var(--muted);

    letter-spacing:1px;

    font-size:13px;

}

/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.dashboard-header h1{

    font-size:34px;

    font-weight:800;

}

.dashboard-header p{

    color:var(--muted);

    margin-top:8px;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

    margin-bottom:28px;

}

.stat-card{

    padding:24px;

}

.stat-title{

    color:var(--muted);

    font-size:14px;

}

.stat-value{

    font-size:34px;

    font-weight:800;

    margin-top:12px;

}

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    margin-bottom:24px;

}

.chart-panel{

    padding:25px;

    min-height:380px;

}

.system-panel{

    padding:25px;

}

.system-row{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

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

}

.jobs-panel{

    padding:25px;

}

.panel-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

/* ==========================================================
   TABLES
========================================================== */

.table{

    color:var(--text);

    margin-bottom:0;

}

.table thead th{

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

    color:#dbe8ff;

    font-weight:700;

    padding:18px;

}

.table tbody td{

    padding:18px;

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

    vertical-align:middle;

}

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

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

}


/* ==========================================================
   ALERTS
========================================================== */

.alert{

    border:none;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

}

.alert-danger{

    background:rgba(239,68,68,.15);

    color:#ffd9d9;

}

.alert-success{

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

    color:#d9ffe5;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#09111e;

}

::-webkit-scrollbar-thumb{

    background:rgba(34,211,238,.40);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(34,211,238,.65);

}


/* ==========================================================
   LOADING SPINNER
========================================================== */

.spinner{

    width:42px;

    height:42px;

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

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.glass{

    animation:fadeUp .45s ease;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:992px){

    .sidebar{

        position:fixed;

        top:0;

        left:0;

        bottom:0;

        z-index:1000;

        transform:translateX(-100%);

    }

    body.sidebar-collapsed .sidebar{

        transform:translateX(0);

    }

    .topbar-center{

        display:none;

    }

}

@media (max-width:768px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .system-status-grid{

        grid-template-columns:1fr;

    }

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .login-card{

        padding:30px;

    }

    .page-wrapper{

        padding:20px;

    }

}

@media (max-width:576px){

    .sidebar{

        width:260px;

    }

    .topbar{

        padding:0 18px;

    }

    .topbar-right{

        gap:10px;

    }

    .profile-card{

        display:none;

    }

}


/* ==========================================================
   END
========================================================== */