/* ==========================================================================
   IAZ ERP V25 - MASTER STYLESHEET
   Dikemaskini untuk: Mobile Responsive, Print A4 & Role Security
   ========================================================================== */

/* IMPORT FONT INTER (Moden & Bersih) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- 1. GLOBAL RESET & BASE --- */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar (Gaya Mac/Modern) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Utility Classes */
.hidden { display: none !important; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }

/* Animasi Slide Up (Untuk Modal) */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ==========================================================================
   2. SIDEBAR & NAVIGATION
   ========================================================================== */
.nav-item {
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
}

/* Active State (Hijau Emerald) */
.nav-item.active {
    background-color: #1e293b; /* Slate-800 */
    color: #34d399; /* Emerald-400 */
    border-left-color: #34d399;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.nav-item:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

/* ==========================================================================
   3. ROLE BASED SECURITY (VIEWER/BOD MODE)
   ========================================================================== */

/* Sembunyikan butang sensitif untuk BOD */
body.role-bod .action-btn,
body.role-bod .admin-only,
body.role-bod .staff-only,
body.role-bod .editor-only { 
    display: none !important; 
}

/* Kunci borang (Read-Only) untuk BOD */
body.role-bod input, 
body.role-bod select, 
body.role-bod textarea {
    pointer-events: none;           /* Halang klik */
    background-color: #f1f5f9;      /* Kelabu (Slate-100) */
    border-color: transparent;      /* Hilangkan border */
    color: #475569;                 /* Teks gelap sikit */
}

/* PENGECUALIAN: Benarkan Filter & Search berfungsi untuk BOD */
body.role-bod .filter-input, 
body.role-bod .nav-item, 
body.role-bod #searchContactInput, 
body.role-bod select[id^="rpt"],        /* Filter Laporan */
body.role-bod select[id^="dashboard"],  /* Filter Dashboard */
body.role-bod select[id^="ledger"] {    /* Filter Lejar */
    pointer-events: auto !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer;
}

/* ==========================================================================
   4. MOBILE RESPONSIVE (TRANSFORMASI TABLE KE CARD)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* A. Layout Utama */
    #appPage {
        position: fixed; inset: 0; border: none; border-radius: 0;
        flex-direction: column;
    }
    
    /* B. Sidebar (Hamburger Style) */
    #mainSidebar {
        position: absolute; top: 0; left: 0; bottom: 0;
        transform: translateX(-100%); width: 80%; z-index: 50;
        transition: transform 0.3s ease-in-out;
    }
    #mainSidebar.mobile-menu-open { transform: translateX(0); }
    
    /* C. Table Responsive (Stacking) */
    /* Tukar table biasa jadi bentuk Kad supaya tak perlu scroll kiri-kanan */
    table, thead, tbody, th, td, tr { display: block; }
    
    /* Sorok Header Table */
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    
    tr {
        margin-bottom: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        background: white;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        padding: 0.5rem;
    }
    
    td {
        border: none;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
        padding-left: 50% !important; /* Ruang untuk label */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        text-align: right;
    }
    
    td:last-child { border-bottom: none; }
    
    /* Label Pseudo-Element (Pilihan) */
    td::before {
        content: attr(data-label); /* Jika HTML ada data-label */
        position: absolute;
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700;
        color: #64748b;
        font-size: 0.7rem;
        text-transform: uppercase;
    }
    
    /* D. Dashboard Grid */
    .grid-cols-4, .grid-cols-3, .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* E. Dokumen Editor di Mobile */
    .a4-paper {
        width: 100% !important;
        padding: 15px !important;
        min-height: auto !important;
    }
}

/* ==========================================================================
   5. PRINT STYLES (INVOICE & REPORTS)
   ========================================================================== */
@media print {
    /* Reset Halaman */
    @page { margin: 0; size: auto; }
    
    body {
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        overflow: visible !important;
    }

    /* Sembunyikan elemen UI Sistem */
    aside, 
    #loginPage, 
    .no-print, 
    .action-btn,
    ::-webkit-scrollbar { 
        display: none !important; 
    }

    /* Format Kontena Utama */
    #appPage {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        overflow: visible !important;
    }

    /* Format Kertas A4 (Invoice) */
    #documentEditor {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        height: auto !important;
        background: white !important;
        z-index: 9999;
        overflow: visible !important;
    }

    .a4-paper {
        box-shadow: none !important;
        margin: 0 !important;
        border: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 20mm !important; /* Margin standard A4 */
    }

    /* Paksa Grafik/Logo Muncul */
    img { 
        display: block !important; 
        max-width: 100% !important; 
    }
    
    /* Class khas untuk print sahaja */
    .print\:block { display: block !important; }
    .print\:hidden { display: none !important; }
    
    /* Laporan Kewangan (Container) */
    .print-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

/* KERTAS A4 (PAPARAN SKRIN) */
.a4-paper {
    background: white;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 20mm;
    position: relative;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
}

/* Utility tambahan untuk Table Transaksi */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   6. BIZTOOLS MODAL FIX
   ========================================================================== */
#bizToolsModal {
    z-index: 9999 !important; /* Pastikan ia duduk paling atas */
}

#bizToolsModal iframe {
    background-color: #ffffff !important; /* Pastikan background putih, tak tembus */
    width: 100%;
    height: 100%;
    border: none;
}

/* Pastikan content dalam modal tak kena blur effect dari body */
body.blur-active #bizToolsModal {
    filter: none !important;
}