:root{
    --primary:#0d3b66;
    --primary-light:#14539c;
    --accent:#e07a1f;
    --bg:#f2f4f7;
}
*{box-sizing:border-box;}
body{background:var(--bg);font-family:'Segoe UI',Roboto,Arial,sans-serif;margin:0;}
.wrapper{display:flex;min-height:100vh;}

.sidebar{
    width:250px;
    background:linear-gradient(180deg,var(--primary),var(--primary-light));
    color:#fff;
    position:fixed;
    top:0;left:0;bottom:0;
    display:flex;flex-direction:column;
    z-index:1000;
    transition:.3s;
}
.sidebar-brand{
    display:flex;align-items:center;gap:10px;
    padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.15);
    font-size:1.3rem;
}
.sidebar-brand small{display:block;font-size:.7rem;opacity:.8;font-weight:normal;}

/* Logo di sidebar-brand: dikecilkan + lingkaran putih biar teks/logo hitam tetap kelihatan */
.sidebar-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    background:#fff;
    border-radius:50%;
    padding:6px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    flex-shrink:0;
}

.sidebar-menu{list-style:none;padding:10px 0;margin:0;flex:1;}
.sidebar-menu li a{
    display:flex;align-items:center;gap:10px;
    color:#e8eef5;text-decoration:none;
    padding:12px 20px;font-size:.95rem;
    border-left:4px solid transparent;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active{
    background:rgba(255,255,255,.12);
    border-left:4px solid var(--accent);
    color:#fff;
}

.main-content{margin-left:250px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{
    background:#fff;padding:12px 24px;display:flex;align-items:center;
    box-shadow:0 1px 4px rgba(0,0,0,.08);position:sticky;top:0;z-index:900;
}
.content-area{padding:24px;flex:1;}
.footer{padding:14px 24px;text-align:center;font-size:.8rem;color:#777;background:#fff;border-top:1px solid #eee;}

.card-stat{
    border:none;border-radius:14px;color:#fff;padding:20px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.card-stat h2{margin:0;font-size:2rem;}
.card-stat p{margin:0;opacity:.9;}
.bg-blue{background:linear-gradient(135deg,#0d3b66,#1f6fb2);}
.bg-orange{background:linear-gradient(135deg,#e07a1f,#f2a154);}
.bg-green{background:linear-gradient(135deg,#1e824c,#3fb87f);}
.bg-red{background:linear-gradient(135deg,#a4161a,#e5383b);}

.panel{background:#fff;border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:24px;}
.panel h5{margin-bottom:16px;color:var(--primary);font-weight:600;}

#mapaTimor{height:380px;border-radius:12px;}

.login-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
}
.login-box{
    background:#fff;border-radius:16px;padding:40px;width:100%;max-width:400px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.login-box .icon{
    width:70px;height:70px;border-radius:50%;background:var(--primary);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;
    margin:0 auto 16px;
}

@media (max-width:992px){
    .sidebar{left:-250px;}
    .sidebar.show{left:0;}
    .main-content{margin-left:0;}
}

@media print{
    .sidebar, .topbar, .footer, .no-print{display:none !important;}
    .main-content{margin-left:0 !important;}
}