:root { 
    --coffee-dark: #3c2a21; 
    --coffee-accent: #d4a373;
    --bg-soft: #fbfbfb; 
}

body { 
    background-color: var(--bg-soft); 
    font-family: 'Inter', sans-serif; 
    color: #333; 
}

#loginOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.95); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}

.glass-card { 
    background: white; border: none; border-radius: 16px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); 
}

.form-control, .form-select {
    border: 1px solid #eee; padding: 10px 15px; border-radius: 10px; font-size: 0.9rem;
}

.form-control:focus { border-color: var(--coffee-accent); box-shadow: none; }

.btn-coffee { background-color: var(--coffee-dark); color: white; border-radius: 10px; transition: 0.3s; }
.btn-coffee:hover { background-color: #000; color: white; transform: translateY(-2px); }

.badge-Melayani { background: #e0f2fe; color: #0369a1; }
.badge-Produksi { background: #dcfce7; color: #15803d; }
.badge-Kasir { background: #fef9c3; color: #a16207; }
.badge-Menerima { background: #f3e8ff; color: #7e22ce; }
.badge-Menawarkan { background: #ffedd5; color: #c2410c; }
.badge-archive { background: #6c757d; color: white; }

.sop-category-badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
}

.priority-high { border-left: 4px solid #ef4444 !important; }
.is-archived { opacity: 0.6; background-color: #f8f9fa !important; }

.table thead th { 
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
    font-weight: 600; color: #888; border-bottom: 2px solid #f8f8f8;
}

.pagination .page-link { border: none; color: var(--coffee-dark); margin: 0 5px; border-radius: 8px; }
.pagination .active .page-link { background-color: var(--coffee-dark); }

.sticky-form { top: 20px; }
.cursor-pointer { cursor: pointer; }

.nav-tabs-custom .nav-link { border: none; color: #888; font-weight: 600; }
.nav-tabs-custom .nav-link.active { color: var(--coffee-dark); border-bottom: 3px solid var(--coffee-dark); }