.text-foreground {
    color: #16a34a; /* setara green-600 */
}

.text-background {
    color: #bbf7d0; /* setara green-200 */
}

.color-background {
    background-color: #bbf7d0;
}
.color-foreground {
    background-color: #16a34a;
}

/* Sidebar scroll independen */
#app-menu {
    overflow-y: auto;
}

/* Workspace mengisi sisa ruang penuh sampai kanan */
.workspace,
.workspace.h-100 {
    flex: 1 1 0 !important;
    min-width: 0 !important;  
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    max-width: 100% !important;
}

.btn-shu {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* ========================================================= */
/* KHUSUS MOBILE: Amanin Sidebar Biar Ga Nutupin Layar       */
/* ========================================================= */
@media (max-width: 768px) {
    /* Sembunyiin sidebar ke kiri biar layar utama bisa diklik */
    div[data-controller="menu"] {
        position: fixed !important; 
        transform: translateX(-100%); 
        z-index: 1050 !important; 
        transition: transform 0.3s ease-in-out; 
    }

    /* Class untuk memunculkan sidebar kembali saat tombol menu diklik */
    div[data-controller="menu"].menu-open {
        transform: translateX(0);
    }
    
    /* Lepas kunci layar workspace biar konten bisa di-scroll jari pakai HP */
    .workspace,
    .workspace.h-100 {
        height: auto !important;
        overflow: visible !important;
    }
}

/* ========================================================= */
/* KHUSUS MOBILE: Amanin Header & Menu Toggle Baru         */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Matikan FAB lama biar ga nongol */
    #btn-toggle-mobile {
        display: none !important;
    }

    /* 2. Gaya untuk tombol menu header baru */
    #btn-toggle-mobile-header {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #015920 !important; /* Hijau yang sama */
        padding: 0 !important;
    }
    
    /* 3. Menata header biar tombol menu di samping search */
    .header-pencarian {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }
}
/* ========================================================= */
/* KHUSUS MOBILE: Mencegah Action Dropdown Kepotong          */
/* ========================================================= */
@media (max-width: 768px) {
    /* Desain Premium Bottom Action Sheet */
    .table-responsive .dropdown-menu.show {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        
        /* Premium Aesthetics */
        border-radius: 28px 28px 0 0 !important;
        border: none !important;
        background: #ffffff !important;
        z-index: 1050 !important;
        
        /* Huge spread shadow acts as a dark backdrop */
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1), 0 0 0 100vmax rgba(0,0,0,0.4) !important;
        padding: 35px 20px 40px 20px !important;
        animation: actionSheetSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    }

    /* Handle/Grip ala iOS di bagian atas menu */
    .table-responsive .dropdown-menu.show::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 5px;
        background-color: #d1d5db;
        border-radius: 10px;
    }

    /* Style untuk setiap tombol aksi */
    .table-responsive .dropdown-menu.show .dropdown-item {
        padding: 16px 20px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        border-radius: 16px !important;
        margin-bottom: 8px !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Jarak antara icon dan teks */
    .table-responsive .dropdown-menu.show .dropdown-item i,
    .table-responsive .dropdown-menu.show .dropdown-item svg {
        margin-right: 14px !important;
        font-size: 20px !important;
        color: #6b7280 !important;
    }

    /* Efek saat tombol ditekan */
    .table-responsive .dropdown-menu.show .dropdown-item:active {
        background-color: #f3f4f6 !important;
        transform: scale(0.98) !important;
    }
    
    /* Khusus untuk tombol hapus/bahaya */
    .table-responsive .dropdown-menu.show .dropdown-item.text-danger {
        background-color: #fef2f2 !important;
        color: #dc2626 !important;
    }
    
    .table-responsive .dropdown-menu.show .dropdown-item.text-danger i {
        color: #dc2626 !important;
    }
}

@keyframes actionSheetSlideUp {
    from { 
        transform: translateY(100%); 
    }
    to { 
        transform: translateY(0); 
    }
}