/* ===== Root + Base (Apple-ish) ===== */
:root {
    --bg-main: #f5f5f7;
    --bg-sidebar: #05060a;
    --bg-sidebar-soft: rgba(5, 6, 10, 0.90);
    --bg-card: #ffffff;
    --border-soft: rgba(15, 23, 42, 0.06);
    --text-main: #111827;
    --text-muted: #6b7280;
    --accent: #0071e3; /* Apple blue */
    --accent-soft: rgba(0, 113, 227, 0.12);
    --danger-soft: rgba(255, 59, 48, .16);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    system-ui, -system-ui, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #ffffff 0, #f5f5f7 55%, #e5e7eb 100%);
    color: var(--text-main);
}

a {
    text-decoration: none;
}

/* Wrapper */
#wrapper {
    min-height: 100vh;
}

/* ===== Sidebar Desktop ===== */
.sidebar {
    width: 248px;
    background: var(--bg-sidebar-soft);
    color: #e5e7eb;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.sidebar-brand {
    font-weight: 700;
    letter-spacing: .06em;
    font-size: .85rem;
    text-transform: uppercase;
    color: #f9fafb;
}

.sidebar-brand span.logo-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #34d399, #22c55e);
    margin-right: .4rem;
}

.sidebar .nav {
    gap: .15rem;
}

.sidebar .nav-link {
    border-radius: .9rem;
    font-size: .88rem;
    padding: .55rem .80rem;
    color: rgba(249, 250, 251, 0.78);
    display: flex;
    align-items: center;
    gap: .55rem;
    transition:
        background .18s ease,
        color .18s ease,
        transform .10s ease,
        box-shadow .18s ease;
}

.sidebar .nav-link i {
    font-size: 1.05rem;
}

.sidebar .nav-link:hover {
    background: rgba(148, 163, 184, 0.20);
    color: #f9fafb;
    transform: translateX(1px);
}

.sidebar .nav-link.active {
    background: radial-gradient(circle at top, #0f172a, #020617);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.75);
    color: #f9fafb;
}

/* Supaya text putih konsisten */
.sidebar .nav-link span,
.sidebar .nav-link i {
    color: inherit;
}

/* Footer sidebar */
.sidebar-footer {
    font-size: .78rem;
    color: rgba(209, 213, 219, 0.8);
}

/* ===== Offcanvas (mobile sidebar) ===== */
.offcanvas.bg-dark {
    background: var(--bg-sidebar-soft) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.offcanvas .nav-link {
    border-radius: .9rem;
    font-size: .9rem;
}

.offcanvas .nav-link.active {
    background: radial-gradient(circle at top, #0f172a, #020617);
    color: #f9fafb;
}

/* ===== Topbar ===== */
.topbar-glass {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-soft);
}

.navbar-brand.h6 {
    font-weight: 600;
    letter-spacing: .02em;
}

.topbar-user {
    font-size: .88rem;
    color: var(--text-muted);
}

/* Button icon ghost (☰) */
.btn-icon-ghost {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #ffffff;
    padding: .25rem .55rem;
}

.btn-icon-ghost:hover {
    border-color: rgba(107, 114, 128, 0.9);
    background: #f9fafb;
}

/* Logout button */
.btn-outline-danger.btn-apple {
    border-radius: 999px;
    border-color: rgba(248, 113, 113, 0.4);
    color: #b91c1c;
    background: transparent;
    padding-inline: .9rem;
}
.btn-outline-danger.btn-apple:hover {
    background: var(--danger-soft);
    border-color: rgba(248, 113, 113, 0.8);
}

/* Cabang badge */
.badge-cabang {
    border-radius: 999px;
    background: var(--accent-soft);
    color: #0369a1;
    font-size: .75rem;
    padding: .25rem .65rem;
}

/* ===== Cards (bisa dipakai di view lain) ===== */
.card-apple {
    border-radius: 1.1rem;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.6);
}

.card-apple-header {
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
}

/* Stats card */
.card-stat {
    border: none;
    border-radius: 1.1rem;
    color: #f9fafb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.3);
}
.card-stat .card-body {
    padding: 1.2rem 1.3rem;
}

.card-stat-title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
}
.card-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
}
.card-stat-change {
    font-size: .82rem;
}

.bg-stat-1 { background: radial-gradient(circle at top,#22d3ee,#0284c7); }
.bg-stat-2 { background: radial-gradient(circle at top,#a855f7,#4c1d95); }
.bg-stat-3 { background: radial-gradient(circle at top,#22c55e,#166534); }
.bg-stat-4 { background: radial-gradient(circle at top,#60a5fa,#1d4ed8); }

/* ===== Table style ===== */
.table-apple thead {
    background: #f3f4f6;
    border-bottom: 1px solid var(--border-soft);
}
.table-apple th {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-status {
    border-radius: 999px;
    font-size: .75rem;
    padding: .25rem .7rem;
}

/* ===== Layout tweaks ===== */
#page-content-wrapper {
    background: transparent;
}

/* HIDE desktop sidebar on mobile */
@media (max-width: 991.98px) {
    .sidebar-desktop {
        display: none !important;
    }
}

/* (Opsional) main container spacing */
main.container-fluid {
    max-width: 1440px;
}