/* assets/css/styles.css */

/* --- 1. Global & Reset --- */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* --- 2. Sidebar Styles --- */
.sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* --- 3. Animations --- */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 4. Read-Only Mode (Arkib) --- */
/* Apabila body atau parent ada class .readonly-mode */
.readonly-mode input:not(.search-input), 
.readonly-mode select:not(#sessionSelector), 
.readonly-mode textarea {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    pointer-events: none !important;
    border-color: #cbd5e1 !important;
}

.readonly-mode button[type="submit"],
.readonly-mode .btn-save,
.readonly-mode .btn-add,
.readonly-mode .btn-delete,
.readonly-mode .action-btn {
    display: none !important;
}

/* --- 5. Navigation State --- */
.menu-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: rgba(0,0,0,0.2);
}

/* --- 6. Full Width Utilities (Override jika perlu) --- */
.content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}