/*
 * SaaS Brurce — gaya dasar layout aplikasi (tema SB Admin 2 / Bootstrap 5.3).
 * Warna brand diatur lewat CSS variable di layout (dari config/saas.php).
 */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bs-body-bg);
    color: #858796;
}
h1, h2, h3, h4, h5, h6 { color: #5a5c69; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-w);
    background-color: var(--brand);
    background-image: linear-gradient(180deg, var(--brand) 10%, var(--brand-dark) 100%);
    background-size: cover;
    color: #fff;
    min-height: 100vh;
}
.sidebar .brand { font-weight: 800; color: #fff; }
.sidebar .nav-link {
    color: rgba(255, 255, 255, .8);
    border-radius: .35rem;
    padding: .6rem .85rem;
}
.sidebar .nav-link:hover { color: #fff; }
.sidebar .nav-link.active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .12); }
.sidebar .nav-link i { width: 1.4rem; color: rgba(255, 255, 255, .55); }
.sidebar .nav-link.active i { color: #fff; }
.sidebar .section-title {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Konten */
.content { margin-left: var(--sidebar-w); }
@media (max-width: 991.98px) { .content { margin-left: 0; } }
.topbar {
    background: #fff;
    height: 4.375rem;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
}
main { padding: 1rem 1rem 2rem; }
@media (min-width: 768px) { main { padding: 1.5rem 1.5rem 2.5rem; } }

/* Kartu & tabel */
.card-stat { border: 0; border-radius: .45rem; box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15); }
.card-stat .icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; }
.card-header { border-radius: .45rem .45rem 0 0 !important; }
.btn, .form-control, .form-select, .input-group-text, .badge { border-radius: .35rem; }
.table { --bs-table-hover-bg: #f8f9fc; }

/* Halaman login */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--auth-from) 0%, var(--auth-mid) 45%, var(--auth-to) 100%);
    position: relative;
    overflow: hidden;
}
.auth-wrap::before, .auth-wrap::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.auth-wrap::before { width: 380px; height: 380px; top: -120px; right: -100px; }
.auth-wrap::after { width: 300px; height: 300px; bottom: -120px; left: -80px; }
.auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    padding: 2.25rem 2rem;
}
.auth-logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--auth-from) 0%, var(--auth-mid) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2rem;
}
.auth-title { font-weight: 800; color: var(--auth-from); letter-spacing: .5px; }
.auth-card .input-group-text { background: #f5f7fb; border-right: 0; }
.auth-card .form-control { border-left: 0; }
.auth-card .form-control:focus { box-shadow: none; border-color: #90caf9; }
.auth-card .input-group:focus-within { box-shadow: 0 0 0 .2rem rgba(25, 118, 210, .15); border-radius: .5rem; }
.btn-login {
    background: linear-gradient(135deg, var(--auth-from) 0%, var(--auth-mid) 100%);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    border: 0;
    border-radius: .6rem;
}
.btn-login:hover { filter: brightness(1.05); color: #fff; }
.toggle-pass { cursor: pointer; background: #f5f7fb; border-left: 0; }