/* GLOBAL */

body{
font-family:Poppins, Arial, sans-serif;
margin:0;
}

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

.login-body{

height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:linear-gradient(135deg,#1e3a8a,#2563eb);

}

.login-card{

background:white;
padding:40px;
border-radius:10px;
width:320px;
text-align:center;

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

}

.login-card input{

width:100%;
padding:10px;
margin:10px 0;

border:1px solid #ddd;
border-radius:5px;

}

.login-card button{

width:100%;
padding:10px;
background:#2563eb;
color:white;
border:none;
border-radius:5px;
cursor:pointer;

}

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

.topbar{

display:flex;
align-items:center;
background:#1e293b;
color:white;
padding:12px 20px;

}

.menu-btn{

font-size:24px;
background:none;
border:none;
color:white;
cursor:pointer;
margin-right:15px;

}

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

.container{

display:flex;
height:100vh;

}

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

.sidebar{

width:220px;
background:#1e293b;
color:white;
padding:20px;

position:fixed;
height:100%;

left:-220px; /* default tertutup */

top:0;

transition:0.3s;

}

.sidebar.open{

left:0;

}

.sidebar h2{

margin-top:0;

}

.sidebar a{

display:block;
margin:10px 0;
color:white;
text-decoration:none;

}

.sidebar button{

width:100%;
margin-top:10px;
padding:8px;

background:#334155;
border:none;
color:white;
cursor:pointer;

}

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

.main{

flex:1;
padding:20px;

margin-left:0;
transition:0.3s;

}

/* MAIN BERGESER SAAT SIDEBAR DIBUKA */

.main.shift{

margin-left:220px;

}

/* ========================
STAT CARD
======================== */

.stats{

display:flex;
gap:20px;
margin-top:20px;

}

.card{

background:#f1f5f9;
padding:20px;
border-radius:10px;
flex:1;

text-align:center;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}

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

.dashboard iframe{

width:100%;
height:600px;
border:none;

margin-top:20px;

border-radius:10px;

}

/* ========================
DARK MODE
======================== */

.dark{

background:#0f172a;
color:white;

}

.dark .card{

background:#1e293b;

}

.dark .sidebar{

background:#020617;

}

.dark .topbar{

background:#020617;

}

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

@media(max-width:768px){

.main{

margin-left:0;

}

.main.shift{

margin-left:0;

}

.sidebar{

left:-220px;

}

.sidebar.open{

left:0;

}

.stats{

flex-direction:column;

}

}