/* ============================================================
   24. NAIK KELAS MASSAL (1.16.0)
   ============================================================ */

.nk-header-aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nk-header-aksi button { width: auto; margin: 0; white-space: nowrap; }
.nk-header-aksi .nk-btn-naik { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); box-shadow: none; padding: 12px 20px; }
.nk-header-aksi .nk-btn-naik:hover { background: var(--primary-light); transform: none; box-shadow: none; }

.nk-kartu { max-width: 760px; display: flex; flex-direction: column; }
.nk-kartu button { width: auto; margin: 0; }
.nk-kartu > * { flex-shrink: 0; }
.nk-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: #475569; }
.nk-peringatan { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; line-height: 1.5; }
.nk-tautan { background: none !important; border: none !important; box-shadow: none !important; color: var(--primary) !important; padding: 0 !important; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; transform: none !important; display: inline !important; width: auto !important; line-height: inherit; }

.nk-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.nk-toolbar select, .nk-toolbar input { margin: 0; padding: 9px 12px; font-size: 13px; width: auto; flex: 1 1 150px; min-width: 0; }
.nk-kartu .nk-btn-kecil { padding: 9px 14px; font-size: 12.5px; border-radius: 10px; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; box-shadow: none; font-weight: 700; cursor: pointer; }
.nk-kartu .nk-btn-kecil:hover { background: #e2e8f0; transform: none; box-shadow: none; }

.nk-daftar { border: 1px solid #e2e8f0; border-radius: 12px; max-height: 42vh; overflow-y: auto; background: #fff; }
.nk-baris { display: grid; grid-template-columns: minmax(0, 1fr) 230px auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.nk-baris:last-child { border-bottom: none; }
.nk-siswa { min-width: 0; }
.nk-siswa strong { display: block; font-size: 13.5px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-siswa span { font-size: 11.5px; color: #64748b; }
.nk-pilih { margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important; }
.nk-wa { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 8px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 800; text-decoration: none; }
.nk-wa.mati { background: #f1f5f9; color: #94a3b8; }
.nk-kosong { padding: 22px; text-align: center; color: #64748b; font-size: 13px; }

.nk-ringkas { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; }
.nk-chip { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f1f5f9; color: #334155; }
.nk-chip.naik { background: #dbeafe; color: #1e40af; }
.nk-chip.nonaktif { background: #fee2e2; color: #991b1b; }
.nk-chip.lewati { background: #f1f5f9; color: #475569; }
.nk-reset { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #334155; margin: 6px 0 14px; cursor: pointer; line-height: 1.5; }
.nk-reset input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary); }

.nk-aksi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nk-aksi-spasi { flex: 1; }
.nk-kartu .nk-btn-simpan { padding: 10px 26px; }
.nk-kartu .nk-btn-simpan:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
    .nk-baris { grid-template-columns: 1fr auto; }
    .nk-pilih { grid-column: 1 / -1; grid-row: 2; }
    .nk-daftar { max-height: 38vh; }
    .nk-aksi { flex-direction: column; align-items: stretch; }
    .nk-aksi-spasi { display: none; }
    .nk-kartu .nk-aksi button { width: 100%; }
    .nk-header-aksi { width: 100%; }
    .nk-header-aksi button { flex: 1; padding: 12px 10px; }
}

body.dark-mode .nk-intro, body.dark-mode .nk-reset { color: #cbd5e1; }
body.dark-mode .nk-peringatan { background: #422006; border-color: #92400e; color: #fde68a; }
body.dark-mode .nk-daftar { background: #0f172a; border-color: #334155; }
body.dark-mode .nk-baris { border-color: #1e293b; }
body.dark-mode .nk-siswa strong { color: #f1f5f9; }
body.dark-mode .nk-siswa span, body.dark-mode .nk-kosong { color: #94a3b8; }
body.dark-mode .nk-kartu .nk-btn-kecil { background: #334155; color: #e2e8f0; border-color: #475569; }
body.dark-mode .nk-header-aksi .nk-btn-naik { background: #1e293b; color: #93c5fd; border-color: #3b82f6; }
body.dark-mode .nk-chip { background: #334155; color: #e2e8f0; }
body.dark-mode .nk-chip.naik { background: #1e3a8a; color: #bfdbfe; }
body.dark-mode .nk-chip.nonaktif { background: #450a0a; color: #fecaca; }
body.dark-mode .nk-wa { background: #14532d; color: #bbf7d0; }
body.dark-mode .nk-wa.mati { background: #1e293b; color: #64748b; }
body.dark-mode .nk-kartu { background: #1e293b; }
body.dark-mode .nk-kartu h3 { color: #f1f5f9; }
