:root{
    --bg:#070b14;
    --bg2:#0b1120;
    --panel:#101827;
    --panel2:#131d2e;
    --panel3:#172237;
    --border:#24314a;
    --border2:#1c2940;
    --text:#f5f7fb;
    --muted:#8997ac;
    --blue:#4285ff;
    --cyan:#24d4df;
    --green:#32d699;
    --yellow:#f3b740;
    --red:#ff6271;
    --purple:#a95cf5;
    --shadow:0 18px 50px rgba(0,0,0,.28);
    --radius:18px;
}

*{
    box-sizing:border-box
}

html,body{
    margin:0;
    min-height:100%;
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    background:
        radial-gradient(circle at 25% 0%,rgba(66,133,255,.09),transparent 30%),
        radial-gradient(circle at 90% 20%,rgba(169,92,245,.06),transparent 30%),
        var(--bg);
    color:var(--text);
}

body{
    overflow-x:hidden;
}

button,input,select,textarea{
    font:inherit
}

button{
    cursor:pointer
}

button:disabled{
    cursor:not-allowed;
    opacity:.55
}

a{
    color:inherit;
    text-decoration:none
}

/* APP */

.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:278px minmax(0,1fr);
}

.sidebar{
    height:100vh;
    position:sticky;
    top:0;
    padding:22px 16px;
    background:
        linear-gradient(180deg,#080d18,#09101d);
    border-left:1px solid #172238;
    overflow:auto;
    z-index:50;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:3px 8px 20px;
}

.brand-logo{
    width:47px;
    height:47px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:25px;
    background:linear-gradient(145deg,#317aff,#24ceda);
    box-shadow:0 10px 30px rgba(49,122,255,.25);
}

.brand strong{
    display:block;
    font-size:20px
}

.brand small{
    display:block;
    margin-top:3px;
    color:#77859a;
    font-size:10px
}

.nav-dashboard,
.nav-item{
    width:100%;
    border:0;
    color:#cbd4e1;
    background:transparent;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
    text-align:right;
}

.nav-dashboard:hover,
.nav-item:hover{
    color:#fff;
    background:#111b2c
}

.nav-dashboard.active,
.nav-item.active{
    color:white;
    background:
        linear-gradient(90deg,rgba(66,133,255,.20),rgba(66,133,255,.05));
    box-shadow:inset -3px 0 var(--blue);
}

.nav-icon{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    font-size:16px;
    color:#aebbd0;
}

.nav-label{
    flex:1
}

.nav-label small{
    display:block;
    margin-top:2px;
    color:#6f7d93;
    font-size:9px
}

.menu-section{
    margin-top:9px;
    border-radius:14px;
}

.menu-head{
    width:100%;
    border:0;
    background:transparent;
    color:#f0aa48;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px 8px;
    font-size:12px;
}

.menu-arrow{
    transition:.2s ease;
    color:#7f8ca0
}

.menu-section.open .menu-arrow{
    transform:rotate(180deg)
}

.menu-items{
    display:none;
    gap:5px
}

.menu-section.open .menu-items{
    display:grid
}

.sidebar-footer{
    margin-top:28px;
    padding-top:17px;
    border-top:1px solid #172238;
}

.demo-box{
    padding:12px;
    border-radius:13px;
    border:1px solid #1d2a40;
    background:#0e1726;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.demo-box strong{
    font-size:11px
}

.demo-box small{
    display:block;
    margin-top:3px;
    color:#718097;
    font-size:9px
}

/* MAIN */

.main{
    min-width:0
}

.topbar{
    height:77px;
    display:flex;
    align-items:center;
    gap:13px;
    justify-content:space-between;
    padding:0 27px;
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(7,11,20,.84);
    backdrop-filter:blur(18px);
    border-bottom:1px solid #172238;
}

.page-title strong{
    display:block;
    font-size:16px
}

.page-title small{
    display:block;
    color:#5a9fff;
    margin-top:3px;
    font-size:10px
}

.top-tools{
    display:flex;
    align-items:center;
    gap:9px
}

.search-wrap{
    position:relative
}

.search-input{
    width:min(360px,31vw);
    height:40px;
    outline:0;
    border:1px solid #25334b;
    background:#0e1625;
    border-radius:12px;
    color:#fff;
    padding:0 13px;
}

.search-input:focus{
    border-color:#4285ff;
    box-shadow:0 0 0 3px rgba(66,133,255,.10)
}

.search-results{
    display:none;
    position:absolute;
    top:47px;
    right:0;
    width:360px;
    max-height:410px;
    overflow:auto;
    border:1px solid #293951;
    background:#0d1625;
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:8px;
}

.search-results.show{
    display:block
}

.search-result{
    width:100%;
    border:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#dfe7f3;
    background:transparent;
    border-radius:10px;
    padding:10px;
    text-align:right;
}

.search-result:hover{
    background:#152238
}

.search-result small{
    display:block;
    margin-top:3px;
    color:#78869b;
    font-size:9px
}

.btn{
    min-height:40px;
    border-radius:11px;
    padding:0 13px;
    color:#e6edf7;
    background:#121c2d;
    border:1px solid #26364f;
}

.btn:hover{
    background:#17243a
}

.btn-primary{
    border:0;
    color:white;
    background:linear-gradient(120deg,#3375ff,#755cff);
    box-shadow:0 10px 25px rgba(70,100,255,.18)
}

.btn-ai{
    border:0;
    background:linear-gradient(120deg,#415fff,#a451ea);
    color:white
}

.profile{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:128px;
}

.profile-avatar{
    width:39px;
    height:39px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#1b2a42;
    border:2px solid #2f4260;
    font-weight:700
}

.profile small{
    display:block;
    color:#7a889d;
    font-size:9px;
    margin-top:2px
}

.mobile-menu{
    display:none
}

.content{
    padding:25px 26px 38px;
    max-width:1700px;
    margin:auto
}

.page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:17px
}

.page-head h1{
    margin:0 0 5px;
    font-size:22px
}

.page-head p{
    margin:0;
    font-size:12px;
    color:#8997ac
}

.page-actions{
    display:flex;
    align-items:center;
    gap:8px
}

.breadcrumbs{
    display:flex;
    gap:7px;
    align-items:center;
    color:#708097;
    font-size:10px;
    margin-bottom:13px
}

.breadcrumbs b{
    color:#b9c5d6;
    font-weight:500
}

/* CARDS */

.stats{
    display:grid;
    grid-template-columns:repeat(6,minmax(130px,1fr));
    gap:11px;
    margin-bottom:17px
}

.stat{
    min-height:119px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:17px;
    background:
        linear-gradient(145deg,rgba(21,31,49,.98),rgba(12,20,33,.98));
    box-shadow:var(--shadow)
}

.stat-head{
    display:flex;
    justify-content:space-between;
    gap:8px
}

.stat-label{
    color:#dce4ef;
    font-size:11px
}

.stat-label small{
    display:block;
    color:#748299;
    font-size:8px;
    margin-top:3px
}

.stat-icon{
    width:37px;
    height:37px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#19263c;
    color:#6f98ff
}

.stat-value{
    display:block;
    margin-top:13px;
    font-size:25px;
    font-weight:700
}

.stat-foot{
    display:block;
    margin-top:8px;
    color:#738198;
    font-size:9px
}

.green{color:var(--green)!important}
.red{color:var(--red)!important}
.yellow{color:var(--yellow)!important}
.blue{color:#6d96ff!important}
.purple{color:#bf79ff!important}
.cyan{color:var(--cyan)!important}

/* LAYOUT */

.grid-2{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(295px,.9fr);
    gap:15px
}

.grid-equal{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
}

.stack{
    display:grid;
    gap:15px
}

.panel{
    border:1px solid var(--border);
    border-radius:17px;
    background:
        linear-gradient(145deg,rgba(17,26,42,.98),rgba(12,19,31,.98));
    box-shadow:var(--shadow);
    overflow:hidden
}

.panel-head{
    min-height:58px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid #202d43
}

.panel-title{
    font-size:13px;
    font-weight:600
}

.panel-title small{
    display:block;
    margin-top:3px;
    color:#738198;
    font-size:9px;
    font-weight:400
}

.panel-body{
    padding:15px
}

/* TABLES */

.table-wrap{
    overflow:auto
}

table{
    border-collapse:collapse;
    width:100%;
    min-width:760px
}

th,td{
    border-bottom:1px solid #1d293d;
    padding:12px 11px;
    white-space:nowrap;
    text-align:right;
    font-size:10px
}

th{
    background:#101929;
    color:#8b99ad;
    font-weight:500
}

td{
    color:#dde5f0
}

tr:hover td{
    background:rgba(27,40,62,.32)
}

.person{
    display:flex;
    align-items:center;
    gap:8px
}

.avatar{
    width:29px;
    height:29px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#253753;
    color:#c2d6ff;
    font-size:10px;
    font-weight:700
}

.person small{
    display:block;
    margin-top:2px;
    color:#75849a;
    font-size:8px
}

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid transparent;
    font-size:9px
}

.status.ok{
    color:var(--green);
    background:rgba(50,214,153,.08);
    border-color:rgba(50,214,153,.12)
}

.status.wait{
    color:var(--yellow);
    background:rgba(243,183,64,.08);
    border-color:rgba(243,183,64,.12)
}

.status.live{
    color:#84a3ff;
    background:rgba(66,133,255,.09);
    border-color:rgba(66,133,255,.13)
}

.status.bad{
    color:var(--red);
    background:rgba(255,98,113,.08);
    border-color:rgba(255,98,113,.12)
}

.row-actions{
    display:flex;
    gap:6px
}

.icon-btn{
    min-width:29px;
    height:29px;
    padding:0 8px;
    border-radius:8px;
    background:#132036;
    border:1px solid #253650;
    color:#afbed2;
    font-size:9px
}

.icon-btn:hover{
    color:#fff;
    background:#1b2a43
}

/* TABS */

.tabs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:14px
}

.tab{
    border:1px solid #253550;
    background:#111c2d;
    color:#8f9db2;
    padding:8px 11px;
    border-radius:10px;
    font-size:10px
}

.tab.active{
    background:rgba(66,133,255,.14);
    border-color:#345fa7;
    color:#c9d8ff
}

/* DETAIL */

.detail-header{
    padding:18px;
    border-radius:17px;
    border:1px solid #273750;
    background:
        linear-gradient(135deg,rgba(57,93,161,.18),rgba(17,27,45,.96));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px
}

.detail-person{
    display:flex;
    align-items:center;
    gap:13px
}

.big-avatar{
    width:58px;
    height:58px;
    border-radius:17px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#263d61,#17253b);
    border:1px solid #3a5278;
    color:#dce9ff;
    font-weight:700;
    font-size:20px
}

.detail-person h2{
    margin:0;
    font-size:17px
}

.detail-person p{
    margin:5px 0 0;
    color:#8795aa;
    font-size:10px
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px
}

.info-box{
    padding:12px;
    border:1px solid #24334b;
    background:#101a2a;
    border-radius:12px
}

.info-box small{
    color:#738198;
    display:block;
    margin-bottom:5px;
    font-size:8px
}

.info-box strong{
    font-size:11px
}

/* QUICK ACTION */

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}

.quick{
    min-height:83px;
    border:1px solid #24344d;
    border-radius:13px;
    background:#111c2d;
    color:#dae4f2;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px
}

.quick:hover{
    transform:translateY(-2px);
    background:#16243a
}

.quick i{
    font-size:20px;
    font-style:normal
}

.quick span{
    font-size:9px
}

/* AI */

.ai-card{
    padding:15px;
    border:1px solid rgba(169,92,245,.30);
    border-radius:14px;
    background:
        linear-gradient(145deg,rgba(169,92,245,.12),rgba(65,95,255,.06))
}

.ai-card h3{
    margin:0 0 8px;
    font-size:12px
}

.ai-card p{
    color:#bfb2d4;
    line-height:1.7;
    font-size:10px;
    margin:0 0 12px
}

/* FORMS */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px
}

.field{
    display:grid;
    gap:6px
}

.field.full{
    grid-column:1/-1
}

.field label{
    color:#94a1b4;
    font-size:9px
}

.input{
    width:100%;
    height:40px;
    border-radius:10px;
    border:1px solid #2a3953;
    background:#0d1726;
    color:#edf2fa;
    outline:0;
    padding:0 11px
}

textarea.input{
    min-height:95px;
    height:auto;
    padding:10px;
    resize:vertical
}

.input:focus{
    border-color:#4285ff
}

/* MODAL */

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(1,5,11,.72);
    backdrop-filter:blur(6px);
    display:grid;
    place-items:center;
    padding:18px
}

.modal{
    width:min(680px,100%);
    max-height:90vh;
    overflow:auto;
    border:1px solid #31415d;
    background:#0e1726;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.55)
}

.modal-head{
    padding:15px 17px;
    border-bottom:1px solid #24324a;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.modal-head h3{
    margin:0;
    font-size:14px
}

.modal-body{
    padding:17px
}

.modal-footer{
    padding:13px 17px;
    border-top:1px solid #24324a;
    display:flex;
    justify-content:flex-end;
    gap:8px
}

/* TOAST */

.toast{
    opacity:0;
    pointer-events:none;
    position:fixed;
    left:23px;
    bottom:23px;
    z-index:200;
    background:#152239;
    color:#e4ebf6;
    border:1px solid #354a69;
    padding:12px 15px;
    border-radius:12px;
    box-shadow:var(--shadow);
    font-size:10px;
    transform:translateY(12px);
    transition:.2s ease
}

.toast.show{
    opacity:1;
    transform:none
}

/* EMPTY */

.empty{
    padding:35px 15px;
    text-align:center;
    color:#748299;
    font-size:11px
}

/* RESPONSIVE */

@media(max-width:1280px){
    .stats{
        grid-template-columns:repeat(3,1fr)
    }

    .grid-2{
        grid-template-columns:1fr
    }

    .info-grid{
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width:920px){
    .app-shell{
        grid-template-columns:1fr
    }

    .sidebar{
        position:fixed;
        width:278px;
        right:-300px;
        transition:.24s ease;
        box-shadow:-20px 0 55px rgba(0,0,0,.5)
    }

    body.menu-open .sidebar{
        right:0
    }

    .mobile-menu{
        display:inline-flex
    }

    .topbar{
        padding:0 13px
    }

    .page-title,
    .profile,
    .btn-ai{
        display:none
    }

    .top-tools{
        flex:1
    }

    .search-wrap{
        flex:1
    }

    .search-input{
        width:100%
    }

    .search-results{
        width:min(360px,90vw)
    }

    .content{
        padding:17px 13px 30px
    }

    .grid-equal{
        grid-template-columns:1fr
    }
}

@media(max-width:600px){
    .stats{
        grid-template-columns:repeat(2,1fr)
    }

    .stat{
        min-height:112px;
        padding:12px
    }

    .stat-value{
        font-size:21px
    }

    .page-head{
        align-items:flex-start;
        flex-direction:column
    }

    .form-grid,
    .info-grid{
        grid-template-columns:1fr
    }

    .quick-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .detail-header{
        flex-direction:column;
        align-items:flex-start
    }
}

body.en{
    direction:ltr
}

body.en .sidebar{
    border-left:0;
    border-right:1px solid #172238
}

body.en .nav-dashboard,
body.en .nav-item,
body.en th,
body.en td,
body.en .search-result{
    text-align:left
}

body.en .nav-dashboard.active,
body.en .nav-item.active{
    box-shadow:inset 3px 0 var(--blue)
}
/* Dr Abdullah Alqarni - responsive finishing */
@media (max-width: 920px){

    .topbar{
        height:64px;
    }

    .content{
        width:100%;
        max-width:100%;
    }

    .stats{
        width:100%;
    }

    table{
        min-width:700px;
    }

    .modal{
        width:calc(100vw - 24px);
        max-height:92vh;
    }

    .sidebar{
        max-width:88vw;
    }
}

@media (max-width: 600px){

    .content{
        padding:14px 10px 28px;
    }

    .stats{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .stat{
        min-width:0;
    }

    .top-tools{
        min-width:0;
    }

    .search-input{
        min-width:0;
    }

    .page-head h1{
        font-size:19px;
    }

    .panel{
        border-radius:14px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full{
        grid-column:auto;
    }
}

@media (max-width: 390px){

    .stats{
        grid-template-columns:1fr;
    }

    .quick-grid{
        grid-template-columns:1fr 1fr;
    }
}