/* =========================================================
   ADMIN DASHBOARD
   Dashboard shell only
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root{

    --admin-bg:#000000;

    --admin-panel:#ffffff;

    --admin-dark:#111827;

    --admin-blue:#0b3d91;

    --admin-green:#28a745;

    --admin-red:#dc3545;

    --admin-orange:#ff9800;

    --admin-border:#dcdcdc;

    --admin-radius:10px;

    --admin-shadow:0 6px 18px rgba(0,0,0,.12);

}

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

html,
body{

    margin:0;

    padding:0;

    width:100%;

    height:100%;

    background:var(--admin-bg);

    font-family:Arial,Helvetica,sans-serif;

}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.container{

    width:100%;

    min-height:100vh;

}

/* =========================================================
   TOP BAR
========================================================= */

.topbar{

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 25px;

    background:var(--admin-dark);

    color:#fff;

    box-shadow:0 3px 10px rgba(0,0,0,.25);

}



/* =========================================================
   MODULE TITLE
========================================================= */

#moduleTitle{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    font-size:24px;

    font-weight:bold;

    white-space:nowrap;

    pointer-events:none;
}

/* =========================================================
   ICONS
========================================================= */

.icon{

    font-size:22px;

    color:#fff;

    cursor:pointer;

    transition:.2s;
}

.icon:hover{

    color:#ffd54f;

    transform:scale(1.15);

}

.icon.logout{

    margin-left:auto;
    
    color:#ff6666;

}

.icon.logout:hover{

    color:#ff2222;

}

/* =========================================================
   MAIN CONTENT
========================================================= */

.content{

    display:none;

    padding:25px;

    min-height:calc(100vh - 70px);

    background:var(--admin-bg);

}

.content.active{

    display:block;

}

/* =========================================================
   MODULE WRAPPER
========================================================= */

.module{

    background:var(--admin-panel);

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

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

    padding:25px;

}

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

.loading{

    text-align:center;

    padding:80px;

    font-size:20px;

    color:#777;

}

/* =========================================================
   IFRAME MODULES
========================================================= */

.module-iframe{

    width:100%;

    height:calc(100vh - 120px);

    border:none;

    display:block;

    background:#fff;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}

/* =========================================================
   HELPERS
========================================================= */

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt10{

    margin-top:10px;

}

.mt20{

    margin-top:20px;

}

.mt30{

    margin-top:30px;

}

.mb10{

    margin-bottom:10px;

}

.mb20{

    margin-bottom:20px;

}

.mb30{

    margin-bottom:30px;

}

/* =========================================================
   ADMIN LOGIN
========================================================= */

.admin-login{

    max-width:420px;

    margin:80px auto;

    text-align:center;

    background:#1f1f1f;

    padding:35px;

    border-radius:12px;

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

.admin-login h1{

    color:#ff9800;

    margin-bottom:30px;

    font-size:30px;

}

.admin-login-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.admin-login-form input{

    width:100%;

    padding:14px;

    border:1px solid #444;

    border-radius:8px;

    background:#2a2a2a;

    color:#fff;

    font-size:16px;

    box-sizing:border-box;

}

.admin-login-form input::placeholder{

    color:#bbb;

}

.login-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:8px;

    background:#ff9800;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.login-btn:hover{

    background:#e68900;

}

.login-btn-grey{

    background:#666;

}

.login-btn-grey:hover{

    background:#555;

}

.login-buttons{

    display:flex;

    gap:12px;

}

.login-buttons button{

    flex:1;

}

.login-message{

    color:#fff;

    margin-bottom:20px;

}

.login-error{

    color:#ff4444;

    margin-bottom:20px;

    font-weight:bold;

}