@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #64748b;
    --danger: #ef4444;
    --dark: #0f172a;
    --light: #f8fafc;
    --border: #e2e8f0;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--light);
    color: var(--dark);
    font-size: 0.85rem;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* --- LAYOUT UTAMA --- */
.layout-wrapper { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px;
    background-color: #ffffff;
    border-right: 1px solid var(--border);
    display: none;
    flex-direction: column;
    position: sticky; top: 0; height: 100vh; flex-shrink: 0;
    z-index: 1040;
}
@media (min-width: 992px) { .sidebar { display: flex; } }

.sidebar-brand { padding: 1.5rem; font-size: 1.1rem; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); }
.nav-link { color: var(--secondary); padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 10px; transition: 0.2s; text-decoration: none; font-weight: 500; }
.nav-link:hover, .nav-link.active { background-color: #eff6ff; color: var(--primary); }
.main-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.top-navbar { background: #fff; height: 60px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.5rem; justify-content: space-between; position: sticky; top: 0; z-index: 1020; }

/* --- KOMPONEN UI --- */
.card-clean { background: #fff; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.02); padding: 1.5rem; }

/* VISUAL KARTU KREDIT */
.cc-visual {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff; border-radius: 16px; padding: 1.25rem; min-height: 200px;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); position: relative; overflow: hidden;
}
.cc-visual.alert-due { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.card-chip { width: 40px; height: 28px; background: linear-gradient(135deg, #fcd34d, #d97706); border-radius: 6px; margin-bottom: 10px; }
.cc-progress-bg { background: rgba(255,255,255,0.2); height: 6px; border-radius: 10px; overflow: hidden; margin: 8px 0; }
.cc-progress-fill { background: #fff; height: 100%; }
.icon-btn-equal { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; }
.badge-glass { background: rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; }

/* --- TABEL LAYAR (SCREEN) --- */
.table { margin-bottom: 0; width: 100%; border-collapse: collapse; }
.table th { 
    font-size: 0.75rem; text-transform: uppercase; color: var(--secondary); 
    background-color: #f8fafc; border-bottom: 2px solid var(--border); 
    padding: 0.5rem 0.75rem; 
}
.table td { 
    padding: 0.35rem 0.75rem; 
    vertical-align: middle; 
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

/* --- LOGIN --- */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f1f5f9; }
.login-card { background: #fff; padding: 2.5rem; border-radius: 16px; width: 100%; max-width: 380px; border: 1px solid var(--border); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

/* --- MODE CETAK (PRINT) - A4 & THIN BORDER --- */
@media print {
    /* Set Ukuran Kertas A4 */
    @page {
        size: A4;
        margin: 15mm 15mm 15mm 15mm; /* Margin halaman */
    }

    /* Hapus elemen navigasi */
    .sidebar, .offcanvas, .top-navbar, .btn, form, .modal, .d-print-none { display: none !important; }
    
    /* Reset Layout */
    body, .layout-wrapper, .main-content { 
        display: block !important; width: 100% !important; background: #fff !important; 
        margin: 0 !important; padding: 0 !important;
    }
    
    .card-clean { border: none !important; padding: 0 !important; box-shadow: none !important; }
    
    /* --- TABEL CETAK (Border Tipis 1px) --- */
    .table { 
        width: 100% !important; 
        border-collapse: collapse !important; /* Kunci agar sudut menyatu */
        border-spacing: 0 !important;
        margin-top: 10px !important;
        
        /* Frame Luar Tipis */
        border: 1px solid #000 !important; 
    }
    
    /* Header Tabel */
    .table thead { 
        display: table-header-group; /* Agar header berulang di halaman baru */
        border-bottom: 1px solid #000 !important;
    }
    
    .table th {
        border: 1px solid #000 !important; /* Grid Header Tipis */
        background-color: #f2f2f2 !important; /* Abu-abu sangat muda */
        color: #000 !important;
        font-weight: bold !important;
        font-size: 9pt !important; /* Ukuran font A4 */
        padding: 6px 8px !important;
        -webkit-print-color-adjust: exact;
    }
    
    /* Isi Tabel */
    .table td { 
        border: 1px solid #000 !important; /* Grid Data Tipis */
        font-size: 9pt !important; 
        padding: 5px 8px !important; 
        color: #000 !important; 
    }
    
    /* --- TABEL RINGKASAN BAWAH --- */
    .table-bordered { 
        border: 1px solid #000 !important;
    }
    .table-bordered th, 
    .table-bordered td {
        border: 1px solid #000 !important;
        padding: 4px 8px !important;
    }
}