/* ============================================================
   SiPinjam – Gaya Utama
   ============================================================ */

/* ── Variabel ────────────────────────────────────────────── */
:root {
    --sidebar-lebar: 240px;
    --sidebar-bg: #1e2a3a;
    --navbar-tinggi: 56px;
    --transisi: 0.25s ease;
}

/* ── Layout Dasar ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Navbar ──────────────────────────────────────────────── */
#navbar-utama {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--navbar-tinggi);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--navbar-tinggi);
    left: 0;
    bottom: 0;
    width: var(--sidebar-lebar);
    overflow-y: auto;
    transition: transform var(--transisi);
    z-index: 1020;
    background-color: var(--sidebar-bg) !important;
}

.sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-lebar))); }

.sidebar-brand { font-size: 1.1rem; }

.sidebar-section-title {
    font-size: .7rem;
    letter-spacing: .08em;
}

.sidebar-link {
    color: #adb5bd;
    border-radius: 6px;
    padding: .45rem .75rem;
    transition: background var(--transisi), color var(--transisi);
}
.sidebar-link:hover,
.sidebar-link.aktif {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.sidebar-link.aktif { font-weight: 600; }

/* ── Konten Utama ────────────────────────────────────────── */
.konten-utama {
    margin-left: var(--sidebar-lebar);
    margin-top: var(--navbar-tinggi);
    padding: 1.5rem;
    flex: 1;
    transition: margin-left var(--transisi);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--navbar-tinggi));
}

.konten-utama.lebar-penuh { margin-left: 0; }

/* ── Kartu Statistik Dashboard ───────────────────────────── */
.stat-card {
    border: none;
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: .85;
}
.stat-card .stat-nilai { font-size: 2rem; font-weight: 700; }
.stat-card .stat-label { font-size: .85rem; opacity: .9; }

/* ── Tabel ───────────────────────────────────────────────── */
.table-wrapper { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.table thead th { background: #343a40; color: #fff; font-weight: 500; font-size: .85rem; }
.table tbody tr:hover { background: #f8f9fa; }

/* ── Form ────────────────────────────────────────────────── */
.card { border: none; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.card-header { border-radius: 12px 12px 0 0 !important; font-weight: 600; }

/* ── Foto Alat ───────────────────────────────────────────── */
.foto-alat-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* ── Halaman Login ───────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}
.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ── Cetak Laporan ───────────────────────────────────────── */
@media print {
    .sidebar, #navbar-utama, .btn, .no-print { display: none !important; }
    .konten-utama { margin: 0 !important; }
}

/* ── Responsif ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { transform: translateX(calc(-1 * var(--sidebar-lebar))); }
    .sidebar.mobile-buka { transform: translateX(0); }
    .konten-utama { margin-left: 0; }
}