/* public/assets/css/style.css */
* { font-family: 'Inter', sans-serif; }
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-hover {
    transition: all 0.3s ease;
}
.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.float-animation {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
.fade-in {
    animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ... (CSS Anda yang sudah ada) ... */

/* Sidebar Mobile */
@media (max-width: 767px) {
    .sidebar-transition { transition: transform 0.3s ease-in-out; }
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); }
}

/* Menambahkan style untuk sidebar collapsed */
body.sidebar-collapsed .sidebar-text {
    display: none;
}

/* ================================================================== */
/* ==                  PERBAIKAN RESPONSIVITAS ANGKA                 == */
/* ================================================================== */

.summary-card-amount {
  
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    word-break: break-all;
}

.summary-card-subtitle {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

/* [GANTI BLOK @media print LAMA DENGAN INI DI style.css] */

@media print {
    /* Sembunyikan semua elemen di body secara default */
    body > * {
        display: none !important;
    }
    
    /* Tampilkan hanya area cetak invoice dan pastikan ia mengisi halaman */
    #invoice-content-wrapper, #invoice-content-wrapper * {
        display: block !important;
        visibility: visible !important;
    }
    
    #invoice-content-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0; /* Hapus padding saat cetak */
    }

    /* Pengaturan spesifik untuk printer thermal 58mm */
    @page {
        size: 58mm auto; /* Lebar 58mm, tinggi otomatis */
        margin: 3mm;
    }
}

/* ========================================================== */
/* [PERBAIKAN] Aturan CSS Responsif Kustom untuk Laporan      */
/* ========================================================== */

/* Sembunyikan label ini di layar lebar (768px ke atas) */
@media (min-width: 768px) {
    .mobile-only-label {
        display: none;
    }
}

/* Tampilkan header tabel hanya di layar lebar */
@media (max-width: 767px) {
    .desktop-only-header {
        display: none;
    }
}

/* ===============================================
   PERBAIKAN Z-INDEX UNTUK SWEETALERT
   =============================================== */
.swal2-container {
    z-index: 9999 !important;
}

/* ===============================================
   PERBAIKAN UI/UX - STYLING FORM GLOBAL
   =============================================== */
/* 
 * Memberikan padding yang konsisten untuk semua elemen input,
 * select, dan textarea agar teks tidak menempel pada garis batas.
*/
input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
    padding-left: 0.75rem !important;  /* 12px */
    padding-right: 0.75rem !important; /* 12px */
    padding-top: 0.5rem !important;    /* 8px */
    padding-bottom: 0.5rem !important; /* 8px */
}

/* ===============================================
   PERBAIKAN UI/UX - INPUT NUMERIK
   =============================================== */
/* 
 * Memberikan padding kanan pada input kuantitas dan Rupiah 
 * agar teks tidak menempel pada garis batas kanan.
*/
.qty-input,
.price-input,
#jumlahBayarInput,
#rev-ongkir,
#ongkir {
    padding-right: 0.75rem !important; /* 12px */
}

/* ================================================================== */
/* ==               PAGINATION ADAPTIF & MOBILE-FRIENDLY           == */
/* ================================================================== */

#pagination-controls {
    /* Memastikan tombol bisa 'wrap' atau turun baris jika diperlukan di layar sangat kecil */
    flex-wrap: wrap;
    /* Memberi sedikit jarak antar baris jika terjadi wrap */
    gap: 0.5rem; /* 8px */
}

/* Styling untuk elipsis (...) agar terlihat seperti teks biasa */
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem; /* 8px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #6b7280; /* gray-500 */
}



@media print {
    /* [PERBAIKAN] Sembunyikan elemen-elemen spesifik, bukan semuanya */
    body > header, /* Header utama aplikasi */
    #sidebar,      /* Sidebar */
    .container > div:not(#print-report-modal) { /* Semua div di container kecuali modal cetak */
        display: none !important;
    }

#reportContainer .text-center.mb-6 {
    display: none !important;
}


/* ================================================================== */
/* ==       PERBAIKAN SCROLLING MODAL FINAL (LEBIH SPESIFIK)       == */
/* ================================================================== */

/* Targetkan kontainer utama modal */
#revision-modal .sm\\:max-w-4xl {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Batasi tinggi keseluruhan modal */
    overflow: hidden; /* Sembunyikan overflow di level ini */
}

/* Targetkan form di dalamnya */
#revision-modal #revision-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Biarkan form meregang mengisi ruang modal */
    min-height: 0; /* Trik penting untuk flexbox */
}

/* Targetkan area konten utama */
.modal-body-content {
    flex-grow: 1; /* Izinkan area ini untuk tumbuh */
    overflow-y: auto; /* Tambahkan scrollbar vertikal di sini */
    min-height: 0; /* Trik penting untuk flexbox */
}

/* [PERBAIKAN] Pastikan div pembungkus di dalamnya juga fleksibel */
.modal-body-content > .border-t {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Pastikan ia mencoba mengisi ruang */
}

/* [PERBAIKAN] Targetkan area item agar bisa meregang */
#rev-items-container {
    flex-grow: 1;
}

/* Pastikan header dan footer tidak meregang atau mengecil */
.modal-body-header,
.modal-body-footer {
    flex-shrink: 0;
}

/* ===============================================
   MODAL & FORM STANDARD COMPONENT LIBRARY (GLOBAL)
   =============================================== */

/* 1. Modal Overlay & Container */
.modal-standard {
    position: fixed;
    z-index: 50; /* Z-index tinggi untuk di atas segalanya */
    inset: 0;
    overflow-y: auto;
    display: none; /* Default tersembunyi */
}
.modal-standard.open {
    display: flex; /* Tampilkan dengan flexbox untuk alignment */
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
}
.modal-container {
    background-color: white;
    border-radius: 0.5rem; /* 8px */
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translate(0, 0);
    transition: all 0.3s ease-out;
    margin: auto; /* Pusatkan di tengah */
    width: 95%;
    max-width: 64rem; /* 1024px, bisa disesuaikan */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Batasi tinggi agar tidak full screen */
}

/* 2. Modal Header, Body, Footer */
.modal-header, .modal-footer {
    flex-shrink: 0; /* Pastikan header dan footer tidak mengecil */
    padding: 1rem 1.5rem; /* 16px 24px */
}
.modal-header {
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
.modal-footer {
    background-color: #f9fafb; /* gray-50 */
    border-top: 1px solid #e5e7eb; /* gray-200 */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem; /* 12px */
}
.modal-body {
    padding: 1.5rem; /* 24px */
    overflow-y: auto; /* Area body adalah satu-satunya yang bisa di-scroll */
    flex-grow: 1; /* Biarkan body mengisi sisa ruang */
}

/* 3. Item Row Standard (Pola dari Produksi-Gudang) */
.item-row-standard {
    background-color: #f9fafb; /* gray-50 */
    padding: 0.75rem; /* 12px */
    border-radius: 0.375rem; /* 6px */
    border: 1px solid #e5e7eb; /* gray-200 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

@media (min-width: 768px) { /* md breakpoint */
    .item-row-standard {
        flex-direction: row;
        align-items: flex-end;
        gap: 1rem; /* 16px */
    }
}

/* 4. Styling Input di dalam Item Row */
.item-row-standard .item-product { flex: 2 1 0%; } /* Paling lebar */
.item-row-standard .item-qty { width: 100%; }
.item-row-standard .item-price { flex: 1 1 0%; }
.item-row-standard .item-subtotal { width: 100%; text-align: right; }
.item-row-standard .item-remove { flex-shrink: 0; }

@media (min-width: 768px) {
    .item-row-standard .item-qty { width: 8rem; /* 128px */ }
    .item-row-standard .item-subtotal { width: auto; }
}

/* 5. Utility untuk Label Input */
.input-label {
    display: block;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: #4b5563; /* gray-600 */
    margin-bottom: 0.25rem; /* 4px */
}

/* ===============================================
   "LEM" CSS UNTUK ROLLBACK JAVASCRIPT
   =============================================== */

/* Memastikan modal tetap tersembunyi oleh JS lama */
.modal-standard.hidden {
    display: none;
}

/* Memastikan modal bisa ditampilkan oleh JS yang dipoles */
.modal-standard.open {
    display: flex;
}

/* Menyembunyikan label di template item pada layar medium ke atas */
@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
}


/* ===============================================
   PERBAIKAN STICKY FOOTER UNTUK PROSES GAJI
   =============================================== */
@media (max-width: 767px) {
    #payroll-footer {
        position: sticky;
        bottom: 0;
        padding: 1rem;
        box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-top-lg */
        z-index: 20;
    }
}

/* ================================================================== */
/* ==                  PERBAIKAN RESPONSIVITAS ANGKA                 == */
/* ================================================================== */

.summary-card-amount {
    /* Ukuran font akan fleksibel dari 1.5rem (24px) hingga 2.25rem (36px), 
       beradaptasi dengan 3.5% dari lebar viewport. */
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 1.2; /* Menjaga jarak baris tetap rapat jika pecah */
    word-break: break-words; /* Mematahkan kata dengan lebih baik daripada break-all */
}

.summary-card-subtitle {
    /* Ukuran font fleksibel dari 0.75rem (12px) hingga 0.875rem (14px) */
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

/* ========================================================== */
/* [TAMBAHAN BARU] CSS untuk Tabel Responsif (Layout Kartu)   */
/* ========================================================== */

@media (max-width: 767px) {
    .responsive-table {
        border: none;
    }
    .responsive-table thead {
        /* Sembunyikan header tabel asli di mobile */
        display: none;
    }
    .responsive-table tr {
        /* Setiap baris menjadi kartu */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        text-align: right; /* Ratakan kanan semua nilai */
        border-bottom: 1px solid #f3f4f6; /* Garis pemisah antar data */
    }
    .responsive-table td:last-child {
        border-bottom: none;
    }
    .responsive-table td::before {
        /* Tampilkan label data dari atribut data-label */
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: #4b5563; /* gray-600 */
    }
}

/* Modal Styles */
.fixed {
    position: fixed;
}
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.z-50 {
    z-index: 50;
}
.hidden {
    display: none;
}
.flex {
    display: flex;
}
.opacity-75 {
    opacity: 0.75;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transform {
    transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Input Styles */
.border {
    border-width: 1px;
}
.rounded-md {
    border-radius: 0.375rem;
}
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.focus\:border-blue-500:focus {
    border-color: #3b82f6;
}
.focus\:ring-blue-500:focus {
    --tw-ring-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}






<style>
    @page { size: A4; margin: 1.5cm; }
    html, body { height: 100%; margin: 0; padding: 0; } /* Pastikan body mengisi seluruh halaman */
    body { 
        font-family: 'Inter', Arial, sans-serif; 
        font-size: 9pt; 
        color: #333;
        display: flex; /* Aktifkan flexbox */
        flex-direction: column; /* Tumpuk elemen secara vertikal */
    }
    table { 
        width: 100%; 
        border-collapse: collapse; 
        flex-grow: 1; /* Biarkan tabel meregang mengisi ruang kosong */
    }
    thead { display: table-header-group; }
    th { background-color: #f9fafb !important; font-weight: bold; border-bottom: 2px solid #ddd; }
    tfoot { display: table-footer-group; } /* tfoot akan otomatis menempel di bawah */
    td, th { padding: 5px 8px; text-align: left; vertical-align: top; }
    .currency { text-align: right; white-space: nowrap; }
    .invoice-header { font-weight: bold; background-color: #f3f4f6 !important; }
    .item-row td:nth-child(2) { padding-left: 24px; }
</style>