:root{
    --brand:#0b6e6b;          /* teal jaringan */
    --brand-dark:#084f4d;
    --brand-accent:#3ddc97;   /* hijau sinyal */
    --ink:#102a2a;
}

/* ---------- Tombol & aksen brand ---------- */
.btn-brand{background:var(--brand);border:none;color:#fff;}
.btn-brand:hover{background:var(--brand-dark);color:#fff;}
.text-brand-accent{color:var(--brand-accent)!important;}

/* ---------- Halaman login ---------- */
.auth-body{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 30% 20%,#0e8480 0%,var(--brand-dark) 60%,#06302f 100%);
    padding:1rem;
}
.auth-card{
    width:100%;max-width:760px;background:#fff;border-radius:18px;overflow:hidden;
    display:grid;grid-template-columns:1fr 1fr;
}
.auth-brand{
    background:linear-gradient(160deg,var(--brand) 0%,var(--brand-dark) 100%);
    color:#fff;padding:2.5rem 2rem;display:flex;flex-direction:column;justify-content:center;
}
.auth-brand-name{font-size:1.9rem;font-weight:800;letter-spacing:-.5px;margin:1rem 0 .25rem;}
.auth-brand-name span{color:var(--brand-accent);}
.auth-brand-tag{color:rgba(255,255,255,.7);font-size:.85rem;margin:0;}
.auth-form{padding:2.5rem 2rem;}

/* Signature element: batang sinyal WiFi yang "menyala" bertahap */
.auth-signal{display:flex;align-items:flex-end;gap:5px;height:34px;}
.auth-signal span{
    width:8px;border-radius:3px;background:var(--brand-accent);opacity:.35;
    animation:signal 1.8s ease-in-out infinite;
}
.auth-signal span:nth-child(1){height:25%;animation-delay:0s;}
.auth-signal span:nth-child(2){height:50%;animation-delay:.2s;}
.auth-signal span:nth-child(3){height:75%;animation-delay:.4s;}
.auth-signal span:nth-child(4){height:100%;animation-delay:.6s;}
@keyframes signal{0%,100%{opacity:.35;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.auth-signal span{animation:none;opacity:.8;}}

@media (max-width:640px){
    .auth-card{grid-template-columns:1fr;}
    .auth-brand{padding:2rem 1.5rem;}
}

/* ---------- Shell aplikasi ---------- */
.app-body{background:#f4f6f6;}
.app-navbar{background:var(--brand-dark);}
.stat-card{border:none;border-radius:14px;box-shadow:0 1px 3px rgba(16,42,42,.08);}
.stat-card{border-left:4px solid var(--brand);}

/* ---------- Layout sidebar ---------- */
.app-wrap{display:flex;min-height:calc(100vh - 56px);}
.app-sidebar{
    width:220px;flex-shrink:0;background:#fff;border-right:1px solid #e4e9e9;
}
.app-sidebar .nav-link{color:var(--ink);border-radius:8px;margin-bottom:2px;font-size:.92rem;}
.app-sidebar .nav-link:hover{background:#eef4f4;}
.app-sidebar .nav-link.active{background:var(--brand);color:#fff;}
.app-main{flex:1;min-width:0;}
@media (max-width:991px){
    .app-sidebar{
        position:fixed;top:56px;left:0;bottom:0;z-index:1030;
        transform:translateX(-100%);transition:transform .2s ease;
    }
    .app-sidebar.show{transform:translateX(0);}
}
.navbar.app-navbar{height:56px;}