/* Custom styles beyond Tailwind */

/* Scrollbar for matrix */
.matrix-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.matrix-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.matrix-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

/* Sticky matrix first column */
.matrix-sticky-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}
.matrix-sticky-header {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 10;
}
.matrix-sticky-corner {
    position: sticky;
    top: 0;
    left: 0;
    background: #f8fafc;
    z-index: 15;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}

/* Level color chips */
.level-not_trained { background: #f1f5f9; color: #64748b; }
.level-basic { background: #dbeafe; color: #1e40af; }
.level-intermediate { background: #d1fae5; color: #065f46; }
.level-advanced { background: #fef3c7; color: #92400e; }
.level-expert { background: #fce7f3; color: #9f1239; }

/* Status chips */
.status-assigned { background: #e0e7ff; color: #3730a3; }
.status-in_progress { background: #fef3c7; color: #92400e; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-certified { background: #cffafe; color: #0e7490; }
.status-expired { background: #fee2e2; color: #991b1b; }

/* Heatmap cells */
.heat-0 { background: #f1f5f9; }
.heat-1 { background: #dbeafe; }
.heat-2 { background: #bfdbfe; }
.heat-3 { background: #60a5fa; color: white; }
.heat-4 { background: #2563eb; color: white; }
.heat-5 { background: #1e40af; color: white; }

/* Nav active */
.nav-link { padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; color: #475569; }
.nav-link:hover { background: #f1f5f9; color: #0f172a; }
.nav-link.active { background: #0f172a; color: white; }
.nav-link.active:hover { background: #1e293b; color: white; }

/* Modal backdrop */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
    padding: 1rem;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

input, select, textarea {
    font-family: inherit;
}

/* Make native select dropdowns look consistent */
select.compact {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background: white;
}