/* ==========================================================
   PROJECT : QatarLotto V2
   FILE    : layout.css
   VERSION : 1.0
   STEP    : 02 - Dashboard Foundation
   STATUS  : DEVELOPMENT
========================================================== */

/* ===== Global ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0D1117;
    color:#ffffff;
    font-family:'Outfit',sans-serif;
    overflow-x:hidden;
}

/* ===== Main Wrapper ===== */

.ql-app{
    display:flex;
    min-height:100vh;
}

/* ===== Main Area ===== */

.ql-main{

    flex:1;

    display:flex;

    flex-direction:column;

    margin-left:250px;

    transition:.3s;

}

/* ===== Content ===== */

.ql-content{

    flex:1;

    padding:30px;

    background:#0D1117;

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

.ql-topbar{

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    background:#111827;

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

}

.ql-topbar-left h1{

    font-size:28px;

    font-weight:700;

    color:#ffffff;

}

.ql-topbar-left p{

    margin-top:4px;

    color:#94A3B8;

    font-size:14px;

}

.ql-topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.ql-live-status{

    display:flex;

    align-items:center;

    gap:8px;

    background:#1B2333;

    padding:10px 16px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

}

.ql-live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

}