/* ==========================================
   1. BASE & LAYOUT UTAMA (HEADER COMPACT & RAPI)
========================================== */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 0; 
    background-color: #f1f5f9; 
    color: #334155; 
}

.smooth-transition { 
    transition: all 0.3s ease; 
}

/* TAMPILAN HEADER SUPER ELEGAN & RAPAT */
.top-header { 
    background: linear-gradient(to right, #0f172a, #1e293b); 
    color: white; 
    padding: 8px 25px; /* <-- Dipangkas biar lebih rapat (tinggi berkurang) */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-bottom: 4px solid #ef4444; 
}

.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-area span { font-size: 24px !important; }
.logo-area h2 { 
    margin: 0; 
    font-size: 22px; 
    font-weight: 800; 
    letter-spacing: 1px; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4); 
}
/* PERBAIKAN TAMPILAN CUSTOMER, TANGGAL, KASIR (SUPER RAPAT & SEIMBANG) */
.header-info { 
    display: flex; 
    gap: 30px; /* Jarak antarkolom */
    text-align: right; 
    align-items: center; 
}

.header-info div { 
    display: block; /* Berubah jadi block agar stabil */
}

.header-info small { 
    color: #cbd5e1; 
    font-size: 11px; /* Dibesarkan sedikit agar lebih selaras */
    font-weight: 700; 
    letter-spacing: 0.5px; 
    display: block; /* Paksa teks di bawahnya turun otomatis */
    margin-bottom: 1px; /* Jarak menempel ke teks bawah */
}

.header-info b { 
    font-size: 14px; /* Ukuran diseimbangkan dengan judulnya */
    color: #ffffff; 
    font-weight: 700; 
}

/* Matikan <br> bawaan HTML yang bikin spasi ganda membandel */
.header-info div br { 
    display: none; 
}

/* Penyesuaian tinggi area utama agar tidak terpotong */
.pos-container { 
    display: flex; 
    height: calc(100vh - 58px); 
}

.main-panel { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
    overflow-y: auto; 
}

.sidebar-panel { 
    width: 320px; 
    background-color: white; 
    border-left: 1px solid #e2e8f0; 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
    box-shadow: -2px 0 10px rgba(0,0,0,0.02); 
    overflow-y: auto;
}
/* ==========================================
   2. INPUT & PENCARIAN
========================================== */
.input-total-row { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.input-section { flex: 1; position: relative; }
.input-section label { display: block; margin-bottom: 8px; font-weight: 600; color: #475569; font-size: 13px; }
.input-section input { width: 100%; padding: 12px 15px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px; outline: none; box-sizing: border-box; }
.input-section input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

.dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 5px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); z-index: 100; max-height: 300px; overflow-y: auto; }
.dropdown-item { padding: 12px 15px; border-bottom: 1px solid #f1f5f9; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.dropdown-item:hover { background-color: #f8fafc; padding-left: 20px; color: #3b82f6; }

.big-total-section { background: white; padding: 15px 25px; border-radius: 8px; border: 2px dashed #e2e8f0; text-align: right; min-width: 250px; display: flex; flex-direction: column; justify-content: center; }
.big-total-section h1 { margin: 0; font-size: 36px; color: #1e293b; }


/* ==========================================
   3. TOOLBAR & TOMBOL
========================================== */
.action-toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.action-toolbar button { padding: 10px 15px; border: 1px solid #cbd5e1; background: white; border-radius: 6px; cursor: pointer; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 5px; font-size: 13px; }
.action-toolbar button:hover { background: #f1f5f9; border-color: #94a3b8; }

.sidebar-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: auto; }
.sidebar-buttons button { padding: 15px 10px; border: 1px solid #e2e8f0; background: white; border-radius: 8px; cursor: pointer; font-weight: 600; color: #334155; font-size: 13px; }
.sidebar-buttons button:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.btn-primary { background: #3b82f6; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-primary:hover { background: #2563eb; }
.btn-danger { background: #ef4444; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-danger:hover { background: #dc2626; }
.btn-secondary { background: #64748b; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-secondary:hover { background: #475569; }

.btn-bayar { background: #ef4444; color: white; border: none; padding: 20px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 20px; width: 100%; margin-top: 20px; box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3); }
.btn-bayar:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 6px 8px -1px rgba(239, 68, 68, 0.4); }
.btn-bayar:disabled { background: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }


/* ==========================================
   4. TABEL KERANJANG
========================================== */
.table-container { background: white; border-radius: 8px; border: 1px solid #e2e8f0; flex: 1; overflow-y: auto; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { background: #ef4444; color: white; padding: 12px 15px; text-align: left; font-size: 13px; position: sticky; top: 0; z-index: 10; }
.cart-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.cart-table tbody tr:hover { background-color: #f8fafc; }


/* ==========================================
   5. RINGKASAN PEMBAYARAN
========================================== */
.payment-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-top: 20px; }
.input-group { margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #475569; font-size: 13px; }
.input-group input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 16px; outline: none; box-sizing: border-box; }
.input-group input:focus { border-color: #10b981; }


/* ==========================================
   6. MODAL UTAMA (POP-UP)
========================================== */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; backdrop-filter: blur(4px); }
.modal-content { background: white; padding: 30px; border-radius: 12px; width: 400px; max-width: 90%; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); transform: translateY(0); }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
#struk-preview { background: #fff; padding: 20px; border: 1px solid #e2e8f0; border-radius: 4px; font-family: 'Courier New', Courier, monospace; margin-bottom: 20px; max-height: 400px; overflow-y: auto; color: #000; }


/* ==========================================
   7. TOAST NOTIFICATION
========================================== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast-msg { min-width: 250px; max-width: 350px; padding: 15px 20px; color: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; align-items: center; font-size: 14px; font-weight: 600; animation: slideInToast 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, fadeOutToast 0.4s ease 2.6s forwards; }
.toast-success { background-color: #10b981; border-left: 6px solid #059669; }
.toast-error { background-color: #ef4444; border-left: 6px solid #dc2626; }
.toast-info { background-color: #3b82f6; border-left: 6px solid #2563eb; }

@keyframes slideInToast { 
    from { transform: translateX(120%); opacity: 0; } 
    to { transform: translateX(0); opacity: 1; } 
}
@keyframes fadeOutToast { 
    from { opacity: 1; } 
    to { opacity: 0; transform: translateY(-10px); } 
}


/* ==========================================
   8. GAYA LOGIN SCREEN
========================================== */
#login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #10b981, #059669); display: flex; justify-content: center; align-items: center; z-index: 99999; }
.login-box { background: white; padding: 40px 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); width: 100%; max-width: 350px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.login-box span { font-size: 50px !important; margin-bottom: 10px; }
.login-box h2 { margin: 0 0 25px 0; color: #1e293b; font-size: 24px; }
.login-box input { width: 100%; padding: 14px; margin-bottom: 15px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; box-sizing: border-box; outline: none; transition: all 0.2s; }
.login-box input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.login-box button { width: 100%; padding: 14px; font-size: 16px; border-radius: 8px; font-weight: bold; margin-top: 10px; border: none; cursor: pointer; background-color: #10b981; color: white; transition: background-color 0.2s; }
.login-box button:hover { background-color: #059669; }


/* ==========================================
   9. GAYA TOMBOL FAVORIT
========================================== */
.btn-fav-item { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.btn-fav-item:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-fav-item span.fav-name { font-weight: 600; font-size: 13px; color: #334155; line-height: 1.2; }
.btn-fav-item span.fav-price { font-size: 11px; color: #10b981; font-weight: bold; }


/* ==========================================
   10. GAYA DASHBOARD LAPORAN
========================================== */
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.report-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.report-card h4 { margin: 0 0 10px 0; color: #64748b; font-size: 14px; }
.report-card h2 { margin: 0; color: #10b981; font-size: 20px; }
@media (max-width: 600px) { .report-grid { grid-template-columns: 1fr; } }


/* ==========================================
   11. GAYA CETAK PDF UNTUK LAPORAN
========================================== */
@media print {
    body * { visibility: hidden; }
    #area-print-laporan, #area-print-laporan * { visibility: visible; }
    #area-print-laporan { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: none; padding: 0; }
    #aksi-laporan { display: none !important; } 
}
/* ==========================================
   12. TAMPILAN MOBILE (HP & TABLET)
========================================== */
@media screen and (max-width: 768px) {
    /* 1. Header menyesuaikan layar HP */
    .top-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
        padding: 15px; 
        height: auto; 
    }
    .header-info { 
        width: 100%; 
        justify-content: space-between; 
        flex-wrap: wrap; 
        gap: 10px; 
        text-align: left; 
    }
    .header-info div { 
        align-items: flex-start; 
    }
    
    /* 2. Tata Letak Utama (Jadi Atas-Bawah, bukan Kiri-Kanan) */
    .pos-container { 
        flex-direction: column; 
        height: auto; 
        overflow: visible; 
    }
    .main-panel { 
        padding: 10px; 
    }
    .sidebar-panel { 
        width: 100%; 
        border-left: none; 
        border-top: 3px dashed #e2e8f0; 
        padding: 15px; 
        box-sizing: border-box; 
    }
    
    /* 3. Input & Total Harga (Numpuk Rapi) */
    .input-total-row { 
        flex-direction: column; 
        gap: 10px; 
    }
    .big-total-section { 
        min-width: 100%; 
        text-align: center; 
        padding: 15px; 
    }
    
    /* 4. Tombol Aksi (Dibuat Grid Rapi) */
    .action-toolbar { 
        justify-content: space-between; 
        gap: 8px; 
    }
    .action-toolbar button { 
        flex: 1 1 48%; /* Bagi 2 kolom */
        justify-content: center; 
        padding: 12px 5px; 
        font-size: 12px; 
    }
    #btn-logout { 
        margin-left: 0; 
        flex: 1 1 100%; /* Tombol keluar full 1 baris */
    }
    
    /* 5. Tabel Keranjang (Bisa di-swipe kanan-kiri) */
    .table-container { 
        overflow-x: auto; 
        margin-bottom: 20px; 
        border-radius: 6px;
    }
    .cart-table { 
        min-width: 600px; /* Lebar minimum agar teks tidak tergencet */
    }
    
    /* 6. Modal / Pop-up (Tidak terpotong layar) */
    .modal-content { 
        width: 95%; 
        padding: 20px; 
        margin: 10px; 
        max-height: 90vh; 
        overflow-y: auto; 
        box-sizing: border-box; 
    }
    
    /* 7. Login Screen (Lebih compact) */
    .login-box { 
        width: 90%; 
        padding: 30px 20px; 
    }
}