/* ============================================================
   E-LKPJ Kabupaten Pemalang — tema aplikasi
   ============================================================ */
:root {
    --brand: #1c5d99;
    --brand-dark: #10365c;
    --brand-deeper: #0b2640;
    --accent: #2ec4b6;
    --gold: #f4a259;
    --body-bg: #eef2f7;
    --sidebar-w: 292px;
}

* { scrollbar-width: thin; scrollbar-color: #b8c7d9 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #b8c7d9; border-radius: 8px; }

body { background: var(--body-bg); font-size: .925rem; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    min-height: calc(100vh - 58px);
    background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-deeper) 100%);
    position: sticky;
    top: 58px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    padding: .9rem .75rem 2rem;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .5rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .75rem;
}
.sidebar-brand .brand-ico {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    display: grid; place-items: center;
    color: #fff; font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(46,196,182,.35);
}
.sidebar-brand .brand-txt { line-height: 1.15; }
.sidebar-brand .brand-txt strong { color: #fff; font-size: 1rem; letter-spacing: .02em; }
.sidebar-brand .brand-txt small { color: #8fb4d6; display: block; font-size: .7rem; }

/* accordion group */
.menu-group-toggle {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
    color: #dbe9f6;
    border-radius: .6rem;
    padding: .55rem .7rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    margin-top: .55rem;
    cursor: pointer;
    transition: background .2s;
}
.menu-group-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu-group-toggle .g-ico {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
    background: linear-gradient(135deg, var(--brand) 0%, #2e77b8 100%);
    display: grid; place-items: center; font-size: .9rem; color: #fff;
}
.menu-group-toggle .chevron { margin-left: auto; transition: transform .3s; font-size: .85rem; }
.menu-group-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.menu-group-toggle .rekap-link {
    margin-left: .2rem; color: #8fb4d6; font-size: .85rem; text-decoration: none;
}
.menu-group-toggle .rekap-link:hover { color: var(--accent); }

.sidebar .nav-link {
    display: flex; align-items: center; gap: .6rem;
    color: #b9d2e8;
    border-radius: .55rem;
    padding: .45rem .65rem .45rem 1rem;
    margin: .12rem 0 .12rem .4rem;
    font-size: .84rem;
    position: relative;
    transition: all .18s ease;
}
.sidebar .nav-link .m-ico {
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    font-size: .95rem;
    transition: all .18s ease;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link:hover .m-ico { background: rgba(46,196,182,.25); color: var(--accent); }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(28,93,153,.55), rgba(46,196,182,.16));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar .nav-link.active .m-ico { background: var(--accent); color: #fff; }

.sidebar .home-link { font-weight: 600; }
.sidebar .admin-note { color: #6f9ac0; font-size: .68rem; padding: .25rem .6rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }

/* ---------- Topbar ---------- */
.topbar {
    background: rgba(11, 38, 64, .92);
    backdrop-filter: blur(8px);
    color: #fff; height: 58px;
    position: sticky; top: 0; z-index: 1030;
    box-shadow: 0 2px 12px rgba(11,38,64,.25);
}
.topbar .btn-year {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff; border-radius: 2rem; padding: .3rem .9rem;
}
.user-chip {
    display: flex; align-items: center; gap: .55rem;
    background: rgba(255,255,255,.08);
    border-radius: 2rem; padding: .28rem .85rem .28rem .35rem;
    color: #fff; text-decoration: none;
}
.user-chip:hover { background: rgba(255,255,255,.16); color: #fff; }
.user-chip .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #e76f51);
    display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .8rem;
}

/* ---------- Konten ---------- */
.content { max-width: 1340px; }
.page-head h5 { font-weight: 700; color: var(--brand-dark); }
.card {
    border: 0; border-radius: .9rem;
    box-shadow: 0 2px 10px rgba(16,42,67,.07);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 6px 18px rgba(16,42,67,.11); }

.modul-card { border-radius: .9rem; }
.modul-card .card-header { background: linear-gradient(90deg, #fff, #f0f6fc); border-bottom: 1px solid #e8eef5; border-radius: .9rem .9rem 0 0 !important; }

/* kartu modul di dashboard */
.tile {
    display: block; text-decoration: none;
    border: 1px solid #e6edf4; border-radius: .8rem;
    background: #fff; padding: .8rem .85rem; height: 100%;
    transition: all .18s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 8px 18px rgba(28,93,153,.14); }
.tile .t-ico {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, #e3f0fb, #cfe6f8);
    color: var(--brand); display: grid; place-items: center; font-size: 1.15rem;
    margin-bottom: .45rem;
}
.tile:hover .t-ico { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; }
.tile .t-label { color: #33475b; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.tile .t-count { font-size: 1.15rem; font-weight: 800; color: var(--brand-dark); }
.tile .t-count small { font-weight: 500; color: #7d93a8; font-size: .7rem; }

/* tabel */
.table > :not(caption) > * > * { padding: .6rem .7rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #5c7186; }
.table-hover > tbody > tr:hover > * { background-color: #f2f8fd; }

/* tombol */
.btn { border-radius: .55rem; font-weight: 600; }
.btn-sm { border-radius: .45rem; }
.btn-primary { background: linear-gradient(135deg, var(--brand), #2e77b8); border: 0; }
.btn-primary:hover { background: linear-gradient(135deg, #174a7a, var(--brand)); }
.btn-success { background: linear-gradient(135deg, #1a9b77, var(--accent)); border: 0; }
.btn-success:hover { background: linear-gradient(135deg, #148566, #26a69a); }

/* form */
.form-control, .form-select { border-radius: .55rem; border-color: #d8e2ec; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .18rem rgba(28,93,153,.14); }
.form-label { color: #445b70; font-weight: 600; font-size: .83rem; }

/* badge count */
.badge.text-bg-light { background: #eaf3fb !important; color: var(--brand-dark) !important; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(46,196,182,.25), transparent 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(244,162,89,.22), transparent 55%),
        linear-gradient(160deg, var(--brand-deeper) 0%, var(--brand-dark) 45%, var(--brand) 100%);
    position: relative; overflow: hidden;
}
.login-wrap::before, .login-wrap::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.045);
}
.login-wrap::before { width: 420px; height: 420px; top: -140px; left: -120px; }
.login-wrap::after { width: 520px; height: 520px; bottom: -190px; right: -140px; }
.login-card { border-radius: 1.1rem; backdrop-filter: blur(4px); box-shadow: 0 22px 60px rgba(4,20,35,.45); border: 1px solid rgba(255,255,255,.35); }
.login-logo {
    width: 62px; height: 62px; border-radius: 18px; margin: 0 auto .6rem;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    display: grid; place-items: center; color: #fff; font-size: 1.7rem;
    box-shadow: 0 8px 22px rgba(46,196,182,.4);
}

/* ---------- Animasi ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .4s ease both; }
.fade-up > * { animation: fadeUp .45s ease both; }
.fade-up > *:nth-child(2) { animation-delay: .06s; }
.fade-up > *:nth-child(3) { animation-delay: .12s; }
.fade-up > *:nth-child(4) { animation-delay: .18s; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .app-wrap { flex-direction: column; }
    .sidebar { position: fixed; top: 58px; left: 0; bottom: 0; width: 280px; z-index: 1040;
        transform: translateX(-105%); transition: transform .28s ease; max-height: none; }
    .sidebar.show { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
    .sidebar-backdrop { position: fixed; inset: 58px 0 0 0; background: rgba(8,20,33,.5); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .25s; }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}