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

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #f1f5f9; color: #1e293b; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; }

.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* ==================== LOGIN PAGE ==================== */
.login-container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); width: 90%; max-width: 400px; text-align: center; }
.login-logo { width: 60px; margin-bottom: 15px; }
.input-group { margin-bottom: 20px; text-align: left; }
.input-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.input-group input, .input-group select { width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 10px; outline: none; transition: 0.3s; font-family: 'Poppins', sans-serif; }
.input-group input:focus, .input-group select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.btn-login { width: 100%; padding: 12px; background: #2563eb; color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.error-msg { color: #ef4444; font-size: 0.85rem; margin-top: 15px; display: none; font-weight: 500; }

/* ==================== ADMIN LAYOUT & SIDEBAR ==================== */
.admin-layout { display: none; width: 100%; min-height: 100vh; background: #f1f5f9; }

.sidebar { width: 280px; background: #0f172a; color: white; padding: 30px 20px; display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; z-index: 1000; transition: transform 0.3s ease; }
.sidebar-logo { display: flex; align-items: center; gap: 15px; font-size: 1.5rem; font-weight: 800; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-logo img { height: 40px; }
.menu-label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; }
.sidebar-menu { list-style: none; margin-bottom: 30px; }
.sidebar-menu li { margin-bottom: 5px; }
.sidebar-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: #cbd5e1; text-decoration: none; border-radius: 10px; font-weight: 500; font-size: 0.95rem; transition: 0.3s; cursor: pointer; }
.sidebar-menu a:hover { background: rgba(255,255,255,0.05); color: white; }
.sidebar-menu a.active { background: #2563eb; color: white; font-weight: 600; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); }

.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }

/* ==================== HEADER ==================== */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; background: white; padding: 20px 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.header-left { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; }
.btn-menu-mobile { display: none; background: #f8fafc; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 8px; font-size: 1.5rem; color: #1e40af; cursor: pointer; flex-shrink: 0; }
.header-left h2 { font-size: 1.5rem; margin-bottom: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { display: flex; gap: 10px; flex-shrink: 0; }
.btn-logout { background: #ef4444; color: white; padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.3s; white-space: nowrap; display: flex; align-items: center; gap: 6px; }

/* ==================== CARD & CONTENT (DESKTOP) ==================== */
.tab-content { display: none; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); margin-bottom: 30px; max-width: 100%; overflow: hidden; }
.card h3 { margin-bottom: 20px; color: #1e40af; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.btn-cancel { width: 100%; padding: 12px; background: #64748b; color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; margin-top: 10px; display: none; }

/* Quill Editor */
.ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; border-color: #cbd5e1; font-family: 'Poppins', sans-serif; }
.ql-container.ql-snow { border-radius: 0 0 10px 10px; border-color: #cbd5e1; font-family: 'Poppins', sans-serif; font-size: 0.95rem;}
.ql-editor { min-height: 250px; }

/* Action Buttons & Badges */
.action-btn { padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.8rem; color: white; margin-right: 5px; margin-bottom: 5px; display: inline-block;}
.btn-edit { background: #f59e0b; } .btn-delete { background: #ef4444; } .btn-success { background: #10b981; }

.status-badge { padding: 5px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; }
.status-merah { background: #fee2e2; color: #ef4444; }
.status-hijau { background: #d1fae5; color: #10b981; }

/* ==================== TABEL (DESKTOP) ==================== */
.finance-table-wrapper { overflow-x: auto; border-radius: 10px; border: 1px solid #cbd5e1; width: 100%; }
.finance-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; min-width: 600px;}
.finance-table th { padding: 12px; background: #1e40af; color: white; font-weight: 600; text-align: center; border: 1px solid #cbd5e1;}
.finance-table td { padding: 10px 12px; border: 1px solid #cbd5e1; vertical-align: middle; }
.td-uang { text-align: right; font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600;}

/* ==================== DASHBOARD KEUANGAN ==================== */
.grid-keuangan-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }
.grid-keuangan-detail { display: grid; grid-template-columns: 1.2fr 2fr; gap: 20px; }
.card-keuangan { padding: 20px; text-align: center; margin-bottom: 0; }
.label-keu { font-size: 0.85rem; color: #64748b; font-weight: 600; text-transform: uppercase; line-height: 1.3; }
.angka-keu { font-size: 1.8rem; font-weight: 800; margin-top: 5px; word-wrap: break-word; font-family: 'Poppins', sans-serif;}
.text-hijau { color: #10b981; } .text-merah { color: #ef4444; } .text-biru { color: #3b82f6; }
.action-keuangan-box { display: flex; gap: 10px; flex-wrap: wrap; }

/* =======================================================
   RESPONSIVE LAYOUT (TABLET & PC)
   ======================================================= */
@media (min-width: 769px) {
    .sidebar { transform: translateX(0); }
    .main-content { flex: 1; margin-left: 280px; padding: 40px; transition: margin-left 0.3s ease, width 0.3s ease; width: calc(100% - 280px); }
    .btn-menu-mobile { display: none !important; }
}
@media (max-width: 992px) and (min-width: 769px) { 
    .grid-2 { grid-template-columns: 1fr; } 
}

/* =======================================================
   RESPONSIVE MOBILE (SMARTPHONE - Max 768px)
   ======================================================= */
@media (max-width: 768px) {
    /* Layout & Sidebar */
    .sidebar { transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .main-content { margin-left: 0; width: 100%; padding: 15px; overflow-x: hidden; }
    
    /* Header */
    .header { flex-direction: column; align-items: stretch; padding: 15px; gap: 15px; border-radius: 12px; margin-bottom: 20px;}
    .header-left { align-items: flex-start; }
    .btn-menu-mobile { display: block; }
    .header-left h2 { font-size: 1.2rem !important; white-space: normal; } 
    #namaLoginUser { display: block; white-space: normal; line-height: 1.3; margin-top: 5px; font-size: 0.95rem;}
    .header-right { flex-direction: row; width: 100%; }
    .header-right .btn-logout { flex: 1; justify-content: center; font-size: 0.95rem; padding: 12px; }

    /* Form & Input */
    .card { padding: 20px; border-radius: 12px; width: 100%; }
    .grid-2 { grid-template-columns: 1fr; }
    .input-group label { font-size: 1rem !important; margin-bottom: 8px !important; }
    .input-group input, .input-group select { font-size: 1rem !important; padding: 12px 15px !important; }
    .drive-container { height: 60vh !important; min-height: 300px !important; }

    /* Navigasi Sub-Tab (Tombol Hijau/Abu di atas Form) */
    div[style*="display: flex; gap: 10px; flex-wrap: wrap;"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }
    div[style*="display: flex; gap: 10px; flex-wrap: wrap;"] button {
        width: 100% !important;
        font-size: 1.05rem !important;
        padding: 14px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    /* Dashboard Keuangan (Auto Susun) */
    .grid-keuangan-summary { grid-template-columns: 1fr !important; gap: 15px !important; }
    .grid-keuangan-detail { grid-template-columns: 1fr !important; gap: 15px !important; }
    .card-keuangan { padding: 15px !important; }
    .angka-keu { font-size: 1.6rem !important; } 
    .action-keuangan-box { flex-direction: column; width: 100%; margin-top: 10px; }
    .action-keuangan-box button { width: 100%; justify-content: center; padding: 14px !important; font-size: 1.05rem !important; margin: 0 !important; }

    /* ==========================================================
       PERUBAHAN TABEL MENJADI COMPACT LIST (SEPERTI APLIKASI KASIR)
       ========================================================== */
    .finance-table-wrapper {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .finance-table {
        border: none !important;
        background: transparent !important;
        min-width: 100% !important;
    }
    .finance-table thead { display: none !important; }
    .finance-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    
    /* Ganti Box Card menjadi List Datar dengan Garis Bawah */
    .finance-table tr {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 15px 5px !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    .finance-table tr:last-child { border-bottom: none !important; }

    .finance-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 2px 0 !important;
        text-align: left !important;
        color: #334155 !important;
        white-space: normal !important;
    }

    /* --- LAYOUT COMPACT: TABEL KELOLA BOOKING --- */
    #tableSewa tr {
        display: grid !important;
        grid-template-areas:
            "nama status"
            "kendaraan kendaraan"
            "tanggal biaya"
            "aksi aksi";
        grid-template-columns: 1fr auto !important;
        gap: 4px 10px !important;
        align-items: center !important;
    }
    #tableSewa td:nth-child(1) { /* Tanggal */
        grid-area: tanggal; font-size: 0.8rem !important; color: #64748b !important; font-weight: 500 !important;
    }
    #tableSewa td:nth-child(2) { /* Nama */
        grid-area: nama; font-weight: 700 !important; color: #0f172a !important; font-size: 0.95rem !important;
    }
    #tableSewa td:nth-child(2) small { /* Nomor HP */
        display: inline-block !important; margin-left: 8px !important; color: #64748b !important; font-size: 0.75rem !important; font-weight: normal !important;
    }
    #tableSewa td:nth-child(3) { /* Kendaraan */
        grid-area: kendaraan; font-size: 0.85rem !important; color: #475569 !important;
    }
    #tableSewa td:nth-child(4) { /* Biaya */
        grid-area: biaya; text-align: right !important; font-weight: 700 !important; color: #0f172a !important; font-size: 0.95rem !important;
    }
    #tableSewa td:nth-child(5) { /* Status */
        grid-area: status; text-align: right !important;
    }
    #tableSewa td:nth-child(5) span {
        padding: 4px 10px !important; font-size: 0.7rem !important; border-radius: 6px !important; margin: 0 !important; display: inline-block !important;
    }
    #tableSewa td:nth-child(6) { /* Aksi */
        grid-area: aksi; justify-content: flex-start !important; display: flex !important; gap: 8px !important; margin-top: 5px !important;
    }
    #tableSewa td:nth-child(6) .action-btn { 
        width: auto !important; border-radius: 6px !important; font-size: 0.8rem !important; padding: 6px 12px !important; margin: 0 !important;
    }

    /* --- LAYOUT COMPACT: TABEL BUKU KAS --- */
    #tableKasSewa tr {
        display: grid !important;
        grid-template-areas:
            "jenis tanggal"
            "ket nominal"
            "aksi aksi";
        grid-template-columns: 1fr auto !important;
        gap: 2px 10px !important;
        align-items: start !important;
    }
    
    /* MENGHILANGKAN TANGGAL/BULAN GANDA */
    #tableKasSewa td:nth-child(1) strong { display: none !important; }
    #tableKasSewa td:nth-child(1) br { display: none !important; }
    
    #tableKasSewa td:nth-child(1) { /* Tanggal */
        grid-area: tanggal; text-align: right !important; font-size: 0.8rem !important; color: #64748b !important; font-weight: 500 !important;
    }
    #tableKasSewa td:nth-child(2) { /* Keterangan */
        grid-area: ket; font-size: 0.85rem !important; color: #475569 !important; line-height: 1.4 !important; padding-right: 15px !important;
    }
    #tableKasSewa td:nth-child(3) { /* Jenis / Kategori */
        grid-area: jenis; font-weight: 700 !important; font-size: 0.9rem !important;
    }
    #tableKasSewa td:nth-child(3) small { display: none !important; } /* Sembunyikan detail text abu-abu agar simpel */
    
    #tableKasSewa td:nth-child(4) { /* Nominal */
        grid-area: nominal; text-align: right !important; font-weight: 700 !important; color: #0f172a !important; font-size: 0.95rem !important;
    }
    #tableKasSewa td:nth-child(5) { /* Aksi */
        grid-area: aksi; justify-content: flex-end !important; display: flex !important; gap: 8px !important; margin-top: 5px !important;
    }
    #tableKasSewa td:nth-child(5) .action-btn { 
        width: auto !important; border-radius: 6px !important; font-size: 0.8rem !important; padding: 6px 12px !important; margin: 0 !important;
    }

    /* Baris Total & Saldo Khusus Buku Kas */
    #tableKasSewa tr[style*="background"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 15px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        border-bottom: none !important;
    }
    #tableKasSewa tr[style*="background:#f1f5f9"] { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
    #tableKasSewa tr[style*="background:#0f172a"] { background: #1e293b !important; color: white !important; }
    
    #tableKasSewa tr[style*="background"] td[colspan] { font-size: 0.85rem !important; font-weight: 600 !important; }
    #tableKasSewa tr[style*="background"] td.td-uang { font-size: 1.05rem !important; font-weight: 800 !important; text-align: right !important; }
}

/* --- FIX: KEMBALIKAN BUKU KAS UMUM & NPL JADI TABEL NORMAL (BISA DIGESER KANAN-KIRI DI HP) --- */
    #tabelKasWrap, 
    #sub-jakeu-npl .finance-table-wrapper {
        display: block !important;
        border: 1px solid #cbd5e1 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #tabelKasWrap .finance-table, 
    #sub-jakeu-npl .finance-table {
        display: table !important;
        min-width: 800px !important;
    }
    #tabelKasWrap .finance-table thead, 
    #sub-jakeu-npl .finance-table thead {
        display: table-header-group !important;
    }
    #tabelKasWrap .finance-table tbody, 
    #sub-jakeu-npl .finance-table tbody {
        display: table-row-group !important;
    }
    #tabelKasWrap .finance-table tr, 
    #sub-jakeu-npl .finance-table tr {
        display: table-row !important;
        background: white !important;
    }
    #tabelKasWrap .finance-table th, 
    #tabelKasWrap .finance-table td, 
    #sub-jakeu-npl .finance-table th, 
    #sub-jakeu-npl .finance-table td {
        display: table-cell !important;
        border: 1px solid #cbd5e1 !important;
        width: auto !important;
        padding: 10px !important;
    }
/* =======================================================
   PENGATURAN CETAK (PRINT PDF A4 PORTRAIT)
   ======================================================= */
@media print {
    @page { size: A4 portrait; margin: 15mm; }
    body, html { background: white !important; margin: 0 !important; padding: 0 !important; }
    .no-print { display: none !important; }
    
    /* Sembunyikan UI Admin saat cetak */
    .login-container, .admin-layout, .sidebar, .header, .btn-menu-mobile, [id^="btnSub"] { display: none !important; }
    div[style*="display: flex; gap: 10px; flex-wrap: wrap;"] { display: none !important; } 

    /* Paksa Kertas Cetak */
    #modalPreviewLaporan { 
        display: block !important; 
        position: absolute !important; 
        left: 0 !important;
        top: 0 !important;
        background: white !important; 
        padding: 0 !important; 
        height: auto !important; 
        width: 100% !important;
        overflow: visible !important;
    }
    #areaKertasCetak { 
        margin: 0 !important; 
        padding: 0 !important; 
        width: 100% !important; 
        max-width: 100% !important; 
        box-shadow: none !important; 
    }

    /* Tabel Khusus Cetak A4 */
    .finance-table {
        width: 100% !important;
        min-width: 100% !important; 
        table-layout: auto !important;
    }
    #headTabelLaporanKeu th, .finance-table th {
        color: #000 !important;
        font-size: 11pt !important; 
        font-weight: 900 !important;
        text-align: center !important; 
        text-transform: uppercase !important; 
        padding: 8px !important; 
        background-color: #e2e8f0 !important;
        border: 1px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .finance-table td {
        color: #000 !important;
        font-size: 10pt !important; 
        padding: 6px 8px !important; 
        border: 1px solid #cbd5e1 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    .td-uang, .text-right {
        text-align: right !important; 
        white-space: nowrap !important; /* Angka tidak boleh terpotong */
    }
}