/*
Theme Name: azdc-theme
Theme URI: https://namadomainkamu.id
Author: Irham
Description: Custom theme untuk portofolio tutorial Arduino & Scratch
Version: 1.0
*/

* { box-sizing: border-box; }

body {
  background: #0f2a4a;
  background-image: linear-gradient(rgba(74,107,145,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(74,107,145,0.5) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #eef2f6;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
}

a { color: inherit; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px 80px; }

/* Header & Nav */
header {
  padding: 48px 0 32px;
  border-bottom: 1px dashed #4a6b91;
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 42px; height: 42px; border: 2px solid #e2925c;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; color: #e2925c;
}
.brand-name { font-weight: 800; font-size: 20px; }
.brand-sub { font-size: 11px; color: #a9c6e8; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.02em; }
nav { display: flex; gap: 24px; font-size: 13px; }
nav a { text-decoration: none; color: #a9c6e8; }
nav a:hover { color: #e2925c; }
.nav-disabled { color: #4a6b91; cursor: default; }

.popular-slider-wrap {
  margin: 24px 0 36px;
  padding: 20px 18px 16px;
  background: rgba(17, 42, 72, 0.85);
  border: 1px solid rgba(255, 161, 108, 0.18);
  border-radius: 20px;
}
.popular-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.popular-slider-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #f6c49e;
}
.popular-slider-controls {
  display: flex; gap: 10px;
}
.popular-slider-button {
  border: 1px solid rgba(255, 146, 92, 0.7);
  background: transparent;
  color: #e8d3c2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}
.popular-slider-button:hover {
  background: rgba(226,146,92,0.18);
  color: #e2925c;
}
.popular-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.popular-slider::-webkit-scrollbar {
  height: 8px;
}
.popular-slider::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
.popular-slider::-webkit-scrollbar-thumb {
  background: rgba(255,146,92,0.45);
  border-radius: 999px;
}
.popular-card {
  scroll-snap-align: start;
  min-width: 240px;
  border: 1px solid rgba(74,107,145,0.5);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,31,56,0.95);
}
.popular-card a {
  color: inherit;
  display: block;
  text-decoration: none;
}
.popular-card-thumb {
  height: 160px;
  overflow: hidden;
}
.popular-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popular-card {
  scroll-snap-align: start;
  min-width: 240px;
  border: 1px solid rgba(74,107,145,0.5);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,31,56,0.95);
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.popular-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.popular-card h3 {
  font-size: 15px;
  margin: 0;
  line-height: 1.4;
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-card-excerpt {
  margin: 0;
  font-size: 13px;
  color: #c3d6ee;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-card-level {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid #7fd66b;
  border-radius: 999px;
  color: #7fd66b;
  margin: 0 auto;
}
.popular-card-level.mid { color: #e2925c; border-color: #e2925c; }
.popular-card-level.advanced { color: #ff6b6b; border-color: #ff6b6b; }
.popular-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #a9c6e8;
}
.popular-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.popular-card-category,
.popular-card-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(126, 180, 228, 0.12);
  color: #c3d6ee;
}
.popular-card-category { border: 1px solid rgba(127,214,107,0.25); }
.popular-card-date { border: 1px solid rgba(226,146,92,0.25); }

/* Responsive */
@media (max-width: 780px) {
  .popular-slider { grid-auto-columns: minmax(210px, 1fr); }
}
@media (max-width: 560px) {
  .popular-slider-wrap { padding: 16px 12px 14px; }
  .popular-slider-header { flex-direction: column; align-items: stretch; }
  .popular-slider-controls { justify-content: flex-start; }
  .popular-slider { gap: 12px; }
}

/* Heading styles (global) */
h1 { font-size: 40px; line-height: 1.15; max-width: 600px; }
h1 em { font-style: normal; color: #e2925c; }

/* Page content (Proyek) */
.page-content {
  margin-top: 18px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(7,20,34,0.92), rgba(10,31,56,0.92));
  border: 1px solid rgba(226,146,92,0.10);
  box-shadow: 0 8px 24px rgba(2,8,20,0.55);
  border-radius: 10px;
  max-width: 820px;
  color: #ffffff;
}
.page-content p { font-size: 15.5px; line-height: 1.9; margin-bottom: 14px; color: #eef6ff; }
.page-content a { color: #ffd5a8; text-decoration: underline; }
.page-content h2 { color: #ffd5a8; margin-top: 18px; border-bottom: 1px solid rgba(226,146,92,0.06); padding-bottom: 8px; }

.back-link { color: #a9c6e8; }


/* Home grid */
.section-label { font-size: 12px; text-transform: uppercase; color: #7f9ec4; margin: 56px 0 18px; letter-spacing: 0.1em; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card, a.card {
  display: block; border: 1px solid #4a6b91; padding: 20px;
  background: rgba(10,31,56,0.55); text-decoration: none; cursor: pointer;
}
a.card:hover { border-color: #e2925c; }
.card-thumb { margin: -20px -20px 14px; overflow: hidden; aspect-ratio: 340 / 160; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-level { font-size: 10px; text-transform: uppercase; color: #7fd66b; border: 1px solid #7fd66b; padding: 2px 8px; display: inline-block; }
.card-level.mid { color: #e2925c; border-color: #e2925c; }
.card-level.advanced { color: #ff6b6b; border-color: #ff6b6b; }
.card h3 { font-size: 17px; margin: 10px 0 8px; }
.card p { font-size: 13px; color: #c3d6ee; line-height: 1.6; }
.card-meta {
  margin-top: 14px;
  font-size: 11px;
  color: #7f9ec4;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-category, .card-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(126, 180, 228, 0.12);
  color: #c3d6ee;
}
.card-category { border: 1px solid rgba(127,214,107,0.25); }
.card-date { border: 1px solid rgba(226,146,92,0.25); }

/* Banner les */
.les-banner {
  margin-top: 56px; padding: 28px; border: 1px dashed #e2925c;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.les-banner h4 { font-size: 18px; margin-bottom: 6px; }
.les-banner p { font-size: 13px; color: #c3d6ee; }
.btn {
  font-size: 13px; padding: 12px 20px; border: 1px solid #e2925c; color: #e2925c;
  text-decoration: none; display: inline-block;
}
.btn:hover { background: #e2925c; color: #0a1f38; }

/* Halaman detail tutorial */
.back-link { color: #7f9ec4; text-decoration: none; font-size: 13px; display: inline-block; margin-top: 40px; }
.back-link:hover { color: #e2925c; }
.detail-head { margin-top: 20px; padding-bottom: 8px; }
.detail-head h1 { font-size: 32px; }
.detail-tags { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.tag {
  font-size: 12px; padding: 6px 14px; border-radius: 4px;
  display: inline-block; font-weight: 500;
}
.tag-level {
  color: #7fd66b; border: 1px solid #7fd66b; background: rgba(127,214,107,0.08);
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em;
}
.tag-level.mid { color: #e2925c; border-color: #e2925c; background: rgba(226,146,92,0.08); }
.tag-level.advanced { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255,107,107,0.08); }
.tag-category {
  color: #f6c49e;
  border: 1px solid rgba(246,196,158,0.25);
  background: rgba(246,196,158,0.1);
}
.tag-date {
  color: #a9c6e8;
  border: 1px solid rgba(169,198,232,0.25);
  background: rgba(169,198,232,0.1);
}
.tag-durasi {
  color: #a9c6e8; border: 1px solid #4a6b91; background: rgba(74,107,145,0.15);
}
.tag-alat {
  color: #c3d6ee; border: 1px solid #4a6b91; background: rgba(10,31,56,0.5);
  width: 100%; margin-top: 4px;
}
.detail-thumb { margin-top: 20px; }
.detail-thumb img { width: 100%; max-height: 360px; object-fit: cover; border: 1px solid #4a6b91; display: block; }

/* Konten tutorial (dari editor WordPress) */
.tutorial-content { margin-top: 32px; max-width: 700px; }
.tutorial-content h2 {
  font-size: 21px; font-weight: 700; margin: 44px 0 14px; color: #e2925c;
  padding-bottom: 8px; border-bottom: 1px solid rgba(74,107,145,0.5);
}
.tutorial-content h3 { font-size: 17px; font-weight: 600; margin: 32px 0 10px; color: #e2925c; }
.tutorial-content p { font-size: 14.5px; color: #d4e4f7; line-height: 1.85; margin-bottom: 18px; }
.tutorial-content ul, .tutorial-content ol { padding-left: 22px; margin-bottom: 18px; }
.tutorial-content li { font-size: 14.5px; color: #d4e4f7; line-height: 1.85; margin-bottom: 6px; }
.tutorial-content strong { color: #ffffff; font-weight: 700; }
.tutorial-content img { max-width: 100%; border: 1px solid #4a6b91; margin: 20px 0; display: block; }
.tutorial-content a { color: #e2925c; }

/* Blok kode di dalam konten — warna diatur Prism.js, di sini cuma border/spacing */
.tutorial-content pre {
  border: 1px solid #4a6b91 !important; padding: 18px 16px !important;
  margin: 24px 0 !important; font-size: 13px !important;
}
.tutorial-content pre code {
  font-family: 'Consolas', monospace !important; line-height: 1.8 !important;
}
.tutorial-content code {
  font-family: 'Consolas', monospace; font-size: 13px; color: #8fe67e;
  background: rgba(8,23,41,0.8); padding: 2px 6px;
}

/* Tombol download di dalam konten */
.tutorial-content .download-btn {
  display: inline-block;
  margin: 20px 0;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0a1f38;
  background: #e2925c;
  text-decoration: none;
  border: 1px solid #e2925c;
  transition: background 0.15s ease, color 0.15s ease;
}
.tutorial-content .download-btn:hover {
  background: transparent;
  color: #e2925c;
}

/* Tabel di dalam konten */
.tutorial-content table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 22px 0;
  border: 1px solid #4a6b91;
}
.tutorial-content th {
  text-align: left; color: #e2925c; padding: 12px 16px;
  background: rgba(226,146,92,0.08);
  border: 1px solid #4a6b91;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
}
.tutorial-content td {
  padding: 12px 16px; color: #eef2f6;
  border: 1px solid #4a6b91;
}
.tutorial-content tbody tr:nth-child(even) {
  background: rgba(10,31,56,0.4);
}

/* Catatan/callout box */
.tutorial-content blockquote {
  margin: 26px 0; padding: 16px 20px; border-left: 3px solid #e2925c;
  background: rgba(226,146,92,0.1); font-size: 14px; color: #ffffff; line-height: 1.7;
}

/* Footer */
footer {
  margin-top: 64px; padding-top: 24px; border-top: 1px dashed #4a6b91;
  font-size: 11px; color: #7f9ec4; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  h1, .detail-head h1 { font-size: 30px; }
}

@media (max-width: 500px) {
  .brand-sub { font-size: 10px; }
}

.tutorial-content pre.line-numbers {
  position: relative;
  padding-left: 3.5em !important;
}
.tutorial-content .line-numbers-rows {
  border-right: 1px solid #4a6b91;
}
.tutorial-content .line-numbers-rows > span::before {
  color: #4a6b91;
}

.tutorial-content .wokwi-embed {
  margin: 24px 0;
  border: 1px solid #4a6b91;
  overflow: hidden;
}
.tutorial-content .wokwi-embed iframe {
  display: block;
}

.tutorial-content .wokwi-embed {
  margin: 24px 0;
  border: 1px solid #4a6b91;
  overflow: hidden;
}
.tutorial-content .wokwi-embed iframe {
  display: block;
}

.search-form { display: flex; gap: 8px; align-items: center; }
.search-form input {
  background: rgba(10,31,56,0.6); border: 1px solid #4a6b91; color: #eef2f6;
  padding: 8px 12px; font-size: 13px; width: 180px;
}
.search-form input::placeholder { color: #7f9ec4; }
.search-form input:focus { outline: none; border-color: #e2925c; }
.search-form button {
  background: transparent; border: 1px solid #4a6b91; color: #a9c6e8;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.search-form button:hover { border-color: #e2925c; color: #e2925c; }
.no-results { color: #c3d6ee; font-size: 14px; margin-top: 20px; }

@media (max-width: 640px) {
  .search-form input { width: 120px; }
}
.pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
  display: inline-block; padding: 8px 14px; font-size: 13px;
  border: 1px solid #4a6b91; color: #a9c6e8; text-decoration: none;
}
.pagination .page-numbers:hover { border-color: #e2925c; color: #e2925c; }
.pagination .page-numbers.current { background: #e2925c; border-color: #e2925c; color: #0a1f38; }
.pagination .dots { border: none; color: #4a6b91; }

.wokwi-locked {
  margin: 24px 0; padding: 28px; border: 1px dashed #e2925c;
  background: rgba(226,146,92,0.05); text-align: center;
}
.wokwi-locked p { color: #eef2f6; font-size: 14px; margin-bottom: 16px; }
.wokwi-locked form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wokwi-locked input {
  background: rgba(10,31,56,0.6); border: 1px solid #4a6b91; color: #eef2f6;
  padding: 10px 14px; font-size: 13px; width: 200px;
}
.wokwi-locked input:focus { outline: none; border-color: #e2925c; }
.wokwi-locked button {
  background: #e2925c; border: 1px solid #e2925c; color: #0a1f38;
  padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wokwi-locked button:hover { background: transparent; color: #e2925c; }
.wokwi-error { color: #ff6b6b; font-size: 12.5px; margin-top: 12px; min-height: 16px; }

.tutorial-content .sheet-embed {
  margin: 24px 0;
  border: 1px solid #4a6b91;
  overflow: hidden;
}
.tutorial-content .sheet-embed iframe {
  width: 100%;
  border: none;
  display: block;
}

.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 48px; padding-top: 24px; border-top: 1px dashed #4a6b91;
}
.post-nav-link {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border: 1px solid #4a6b91; text-decoration: none; color: inherit;
}
.post-nav-link:hover { border-color: #e2925c; }
.post-nav-link.next { text-align: right; align-items: flex-end; }
.post-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #7f9ec4; }
.post-nav-title { font-size: 14px; font-weight: 600; color: #eef2f6; }

@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { text-align: left; align-items: flex-start; }
}

.tutorial-content .scratch-embed {
  margin: 0 0 28px;
  border: 1px solid #4a6b91;
  display: inline-block;
  overflow: hidden;
}
.tutorial-content .scratch-embed iframe {
  display: block;
  max-width: 100%;
}

.tutorial-content .video-embed {
  margin: 0 0 28px;
  border: 1px solid #4a6b91;
  overflow: hidden;
  background: #000;
}
.tutorial-content .video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.single-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }

.sidebar { display: flex; flex-direction: column; gap: 28px; }
.sidebar-block { border: 1px solid #4a6b91; padding: 18px; background: rgba(10,31,56,0.4); }
.sidebar-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #e2925c;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(74,107,145,0.5);
}
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sidebar-list li a {
  font-size: 13px; color: #c3d6ee; text-decoration: none; line-height: 1.5; display: block;
}
.sidebar-list li a:hover { color: #e2925c; }
.sidebar-count { color: #4a6b91; font-size: 11px; }

@media (max-width: 900px) {
  .single-layout { grid-template-columns: 1fr; }
}

a.brand-name { color: inherit !important; text-decoration: none !important; }

.home-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; margin-top: 4px; }

@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
}

.jalur-progress { margin: 40px 0 32px; }
.jalur-progress-bar {
  height: 8px; background: rgba(74,107,145,0.3); border: 1px solid #4a6b91;
  overflow: hidden;
}
.jalur-progress-fill {
  height: 100%; width: 0%; background: #7fd66b; transition: width 0.3s ease;
}
.jalur-progress-text { font-size: 12px; color: #7f9ec4; margin-top: 8px; }

.jalur-list { display: flex; flex-direction: column; gap: 10px; }
.jalur-item {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  border: 1px solid #4a6b91; background: rgba(10,31,56,0.35);
  transition: border-color 0.15s ease;
}
.jalur-item.done { border-color: #7fd66b; background: rgba(127,214,107,0.05); }

.jalur-checkbox { position: relative; flex-shrink: 0; cursor: pointer; }
.jalur-check { position: absolute; opacity: 0; width: 22px; height: 22px; cursor: pointer; margin: 0; }
.jalur-check-mark {
  display: block; width: 22px; height: 22px; border: 2px solid #4a6b91;
}
.jalur-check:checked ~ .jalur-check-mark { background: #7fd66b; border-color: #7fd66b; }
.jalur-check:checked ~ .jalur-check-mark::after {
  content: '✓'; display: flex; align-items: center; justify-content: center;
  color: #0a1f38; font-weight: 700; font-size: 14px; height: 100%;
}

.jalur-number {
  font-family: 'Consolas', monospace; font-size: 22px; font-weight: 700; color: #e2925c;
  width: 32px; flex-shrink: 0; text-align: center;
}
.jalur-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; flex: 1; }
.jalur-title { font-size: 15px; font-weight: 600; }
.jalur-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #7f9ec4; }

.home-main .section-label { margin-top: 0; }

.kumpul-form label { font-size: 13px; color: #c3d6ee; font-weight: 600; }
.kumpul-form select, .kumpul-form input, .kumpul-form textarea {
  background: rgba(10,31,56,0.6); border: 1px solid #4a6b91; color: #eef2f6;
  padding: 10px 12px; font-size: 14px; margin-top: 6px; width: 100%; max-width: 400px;
  font-family: inherit;
}
.kumpul-form textarea { max-width: 100%; resize: vertical; }
.kumpul-form select:focus, .kumpul-form input:focus, .kumpul-form textarea:focus { outline: none; border-color: #e2925c; }
.kumpul-form select:disabled, .kumpul-form input:disabled, .kumpul-form textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.kumpul-success { color: #7fd66b; font-weight: 600; }
.kumpul-error { color: #ff6b6b; font-weight: 600; }

/* Kolom kode akses kelas */
#kelas-kode {
  background: rgba(10,31,56,0.6); border: 1px solid #4a6b91; color: #eef2f6;
  padding: 10px 12px; font-size: 14px; margin-top: 6px; width: 100%; max-width: 240px;
}
#kelas-kode-btn {
  background: transparent; font-family: inherit; cursor: pointer;
  margin-top: 6px; margin-left: 8px; vertical-align: bottom;
}
#kelas-kode-error { display: inline-block; margin-top: 6px; font-size: 13px; }

/* Wadah tabel monitoring.
   Wadahnya yang digulir, bukan halamannya — itu syarat supaya baris judul bisa
   menempel. Kalau overflow dipasang tanpa batas tinggi, position:sticky tidak
   punya acuan untuk menempel dan judulnya tetap ikut hilang saat digulir. */
#monitoring-table-container {
  margin-top: 20px;
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* gulir mulus di iPad/HP */
}

.monitoring-table {
  width: 100%;
  font-size: 13px;
  /* separate, bukan collapse. Dengan collapse, garis tabel dimiliki oleh tabel
     dan bukan oleh selnya — akibatnya garis pada sel yang menempel ikut hilang
     saat digulir. Dengan separate, tiap sel membawa garisnya sendiri. */
  border-collapse: separate;
  border-spacing: 0;
}

.monitoring-table th,
.monitoring-table td {
  padding: 10px 12px;
  text-align: left;
  border-right: 1px solid #4a6b91;
  border-bottom: 1px solid #4a6b91;
  /* Latar wajib pekat, bukan transparan: sel yang menempel harus benar-benar
     menutupi isi yang lewat di bawahnya. */
  background: #0f2a4a;
}
.monitoring-table thead th { border-top: 1px solid #4a6b91; }
.monitoring-table th:first-child,
.monitoring-table td:first-child { border-left: 1px solid #4a6b91; }

/* Baris judul project menempel di atas saat digulir ke bawah */
.monitoring-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #e2925c;
  background: #20324b;
}

/* Sengaja TIDAK dipakai white-space: nowrap di judul kolom.
   Kalau nama project dipaksa satu baris, tabel melebar lebih cepat dan
   penggeser kanan-kiri sudah muncul padahal projectnya baru sedikit.
   Dibiarkan membungkus, kolom menyempit sendiri selama masih muat — jadi
   penggesernya baru muncul kalau projectnya memang sudah kebanyakan. */

/* Kolom nama siswa menempel di kiri saat digulir ke kanan */
.monitoring-table th:first-child,
.monitoring-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 140px;
}

/* Sel pojok kiri-atas ditimpa dua-duanya, jadi lapisannya harus paling tinggi */
.monitoring-table thead th:first-child { z-index: 3; }

/* Baris kelompok yang slot whitelist-nya belum diisi tampil lebih redup
   supaya guru/admin langsung tahu baris mana yang masih kosong. Teks kolom
   ketua/sekretaris/anggota adalah em-dash ('—'), bukan string nama siswa. */
.monitoring-table tr.kosong td {
  color: #7f9ec4;
  font-style: italic;
}
.status-sudah { color: #7fd66b; text-decoration: none; font-weight: 600; }
.status-sudah:hover { text-decoration: underline; }
.status-belum { color: #ff6b6b; }
.status-waktu { color: #7f9ec4; font-weight: normal; }

.hapus-btn {
  background: transparent; border: 1px solid #ff6b6b; color: #ff6b6b;
  width: 20px; height: 20px; line-height: 1; font-size: 11px; cursor: pointer;
  margin-left: 6px; padding: 0;
}
.hapus-btn:hover { background: #ff6b6b; color: #0a1f38; }

.catatan-cell { min-width: 220px; }
.catatan-input {
  width: 100%; min-width: 200px; background: rgba(10,31,56,0.6);
  border: 1px solid #4a6b91; color: #eef2f6; font-family: inherit;
  font-size: 13px; padding: 8px 10px; resize: vertical;
}
.catatan-input:focus { outline: none; border-color: #e2925c; }
.catatan-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.catatan-simpan-btn {
  background: transparent; border: 1px solid #e2925c; color: #e2925c;
  font-family: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.catatan-simpan-btn:hover:not(:disabled) { background: #e2925c; color: #0a1f38; }
.catatan-simpan-btn:disabled { opacity: 0.5; cursor: default; }
.catatan-status { font-size: 12px; color: #7f9ec4; }
.catatan-status-ok { color: #7fd66b; }
.catatan-status-error { color: #ff6b6b; }

.progress-cell { min-width: 160px; }
.progress-status {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em;
}
.progress-status-belum-mulai { background: rgba(255,107,107,0.12); color: #ff6b6b; }
.progress-status-jalan { background: rgba(226,146,92,0.12); color: #e2925c; }
.progress-status-selesai { background: rgba(127,214,107,0.12); color: #7fd66b; }
.progress-desc {
  font-size: 12px; color: #c3d6ee; margin-top: 6px; max-width: 220px;
  white-space: normal; overflow-wrap: break-word; line-height: 1.5;
}
.progress-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #e2925c; text-decoration: none; }
.progress-link:hover { text-decoration: underline; }
/* Catatan guru per minggu: tampil inline (read-only) jika sudah ada isinya,
   supaya guru bisa scan feedback minggu-minggu sebelumnya tanpa harus buka
   editor. Editor (textarea + simpan) tersembunyi sampai tombol toggle ditekan. */
.progress-catatan-display {
  font-size: 12px; color: #f6c49e; background: rgba(226,146,92,0.10);
  border-left: 2px solid #e2925c; padding: 6px 8px; margin-top: 6px;
  line-height: 1.5; overflow-wrap: break-word; font-style: italic;
}
.progress-catatan-toggle {
  display: block; margin-top: 6px; background: transparent;
  border: 1px solid #e2925c; color: #e2925c; font-family: inherit;
  font-size: 11px; padding: 4px 8px; cursor: pointer; border-radius: 3px;
}
.progress-catatan-toggle:hover { background: rgba(226,146,92,0.18); }
.progress-catatan-edit { margin-top: 6px; }
.hapus-progress-btn {
  display: block; background: transparent; border: 1px solid #ff6b6b; color: #ff6b6b;
  width: 20px; height: 20px; line-height: 1; font-size: 11px; cursor: pointer;
  margin-top: 8px; padding: 0;
}
.hapus-progress-btn:hover { background: #ff6b6b; color: #0a1f38; }

/* Sengaja dibuat beda jauh dari .hapus-progress-btn (ikon ✕ kecil) — supaya
   dua tombol hapus yang cakupannya beda jauh (satu laporan minggu vs seluruh
   proposal) tidak gampang tertukar waktu diklik cepat. */
.hapus-proposal-btn {
  background: rgba(255,107,107,0.08); border: 1px solid #ff6b6b; color: #ff6b6b;
  font-family: inherit; font-size: 12px; padding: 8px 14px; cursor: pointer;
  white-space: nowrap;
}
.hapus-proposal-btn:hover { background: #ff6b6b; color: #0a1f38; }

/* Toolbar monitoring: pilih kelas + tombol refresh */
.monitoring-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.monitoring-toolbar-field { flex: 1 1 240px; }
.monitoring-toolbar label { display: block; font-size: 13px; color: #c3d6ee; font-weight: 600; }
.monitoring-toolbar select {
  background: rgba(10,31,56,0.6); border: 1px solid #4a6b91; color: #eef2f6;
  padding: 10px 12px; font-size: 14px; margin-top: 6px; width: 100%; max-width: 300px;
}
.monitoring-toolbar select:focus { outline: none; border-color: #e2925c; }
.monitoring-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.monitoring-refresh {
  background: transparent; border: 1px solid #e2925c; color: #e2925c;
  font-family: inherit; font-size: 13px; padding: 10px 18px; cursor: pointer;
}
.monitoring-refresh:hover:not(:disabled) { background: #e2925c; color: #0a1f38; }
.monitoring-refresh:disabled { opacity: 0.5; cursor: default; }

/* Tombol secondary (Export CSV, Print). Mirip monitoring-refresh tapi
   menggunakan border biru tema (#4a6b91) supaya tidak terlihat sama
   pentingnya dengan refresh — refresh adalah aksi "ambil data", export
   dan print adalah aksi "olah data". */
.monitoring-action {
  background: transparent; border: 1px solid #4a6b91; color: #a9c6e8;
  font-family: inherit; font-size: 13px; padding: 10px 18px; cursor: pointer;
}
.monitoring-action:hover:not(:disabled) { background: #4a6b91; color: #eef2f6; }
.monitoring-action:disabled { opacity: 0.5; cursor: default; }

/* "Keluar" dipakai di komputer lab yang dipakai bergantian: warnanya dibedakan
   dari aksi lain supaya tidak salah klik, dan tetap ikut tersembunyi saat print
   karena ia juga memakai class .monitoring-action. */
.monitoring-keluar { border-color: #b4536b; color: #f0a9b8; }
.monitoring-keluar:hover:not(:disabled) { background: #b4536b; color: #fff; }

.monitoring-last-update { font-size: 12px; color: #7f9ec4; }
.monitoring-hint { font-size: 13px; color: #7f9ec4; margin-top: 20px; }

/* ============================================================
   PRINT STYLESHEET — untuk monitoring-proyek.

   Tujuan: ketika guru/admin print halaman, mereka dapat laporan
   yang rapi tanpa header navigation, filter dropdown, atau warna
   tema gelap. Hanya tabel data yang dicetak, dengan warna dasar
   putih dan teks hitam supaya tinta printer tidak boros dan
   hasilnya bisa dibaca.

   Sasarannya selektif: hanya berlaku untuk halaman yang punya
   #monitoring-proyek-content di dalam .tutorial-content (ciri
   unik monitoring-proyek). Halaman lain tidak akan terpengaruh.
   ============================================================ */
@media print {
  /* Sembunyikan elemen navigasi dan filter — yang relevan untuk layar
     saja, tidak untuk laporan tercetak. */
  header, .monitoring-toolbar, .back-link, .detail-head,
  .monitoring-hint, .monitoring-last-update,
  .hapus-btn, .hapus-progress-btn, .hapus-proposal-btn,
  .progress-catatan-toggle, .catatan-simpan-btn,
  .progress-catatan-simpan-btn, .progress-catatan-edit,
  .monitoring-action, .monitoring-refresh {
    display: none !important;
  }

  /* Latar putih, teks hitam — supaya tinta printer tidak boros dan
     hasil print terbaca jelas. Body biasanya gradient biru gelap;
     override di sini. */
  body, body .tutorial-content, #monitoring-proyek-content {
    background: #ffffff !important;
    color: #000000 !important;
    background-image: none !important;
  }

  /* Heading H1 hitam dengan ukuran wajar — terlalu besar = 1 baris
     memakan > 1/3 halaman. */
  h1 { font-size: 18pt !important; color: #000 !important; max-width: 100% !important; }

  /* Container tabel tidak dibatasi tinggi dan tidak overflow — supaya
     semua baris tampil tanpa terpotong halaman. Sticky juga tidak
     relevan di atas kertas. */
  #monitoring-proyek-table-container {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Sel tabel: tanpa background gelap, teks hitam, border tipis.
     Padding ringkas supaya muat banyak kolom per halaman A4. */
  .monitoring-table,
  .monitoring-table th,
  .monitoring-table td {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000 !important;
  }
  .monitoring-table th,
  .monitoring-table td { padding: 4px 6px !important; font-size: 9pt !important; }
  .monitoring-table th { font-weight: 700 !important; }

  /* Sticky tidak relevan di print (tidak ada scroll) — reset ke static. */
  .monitoring-table thead th,
  .monitoring-table th:first-child,
  .monitoring-table td:first-child {
    position: static !important;
  }

  /* Hapus warna status-waktu (warna abu tema) — di print jadi hitam. */
  .status-waktu { color: #000 !important; }
}

.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-trigger {
  color: #a9c6e8; cursor: pointer; user-select: none;
}
.nav-dropdown:hover .nav-dropdown-trigger { color: #e2925c; }

.nav-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; padding-top: 12px;
  min-width: 160px; z-index: 100;
  flex-direction: column;
}
.nav-dropdown-menu-inner {
  background: #0a1f38; border: 1px solid #4a6b91;
  display: flex; flex-direction: column;
}
.nav-dropdown:hover .nav-dropdown-menu { display: flex; }

.nav-dropdown-menu a,
.nav-dropdown-menu .nav-disabled {
  padding: 10px 16px; font-size: 13px; color: #a9c6e8;
  text-decoration: none; border-bottom: 1px solid rgba(74,107,145,0.3);
}
/* Item tanpa halaman: tetap tampil sebagai baris menu tapi tidak bisa diklik. */
.nav-dropdown-menu .nav-disabled { cursor: not-allowed; opacity: 0.55; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; padding-top: 12px; min-width: 160px; z-index: 100; flex-direction: column; }
.nav-dropdown.open .nav-dropdown-menu { display: flex; }

/* Form styling untuk Daftar Kelompok */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  color: #c3d6ee;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group select,
.form-group input {
  background: rgba(10,31,56,0.6);
  border: 1px solid #4a6b91;
  color: #eef2f6;
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  max-width: 400px;
  font-family: inherit;
}

.form-group select:focus,
.form-group input:focus {
  outline: none;
  border-color: #e2925c;
}

.form-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-actions button {
  background: #e2925c;
  border: 1px solid #e2925c;
  color: #0a1f38;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.form-actions button:hover {
  background: transparent;
  color: #e2925c;
}

#daftar-kelompok-status {
  margin-top: 16px;
  font-size: 14px;
  min-height: 20px;
}

/* ============================================================
   MOBILE RESPONSIVE — tambahan khusus untuk tap target, layout
   form di layar sempit, dan tabel monitoring di HP.

   Tap target minimum 44×44 px direkomendasikan Apple HIG dan
   Material Design untuk akurasi sentuh. Banyak kontrol tema ini
   secara default jauh lebih kecil dari itu (mis. tombol hapus
   20×20 px) karena awalnya dipakai oleh admin dengan mouse.
   Di mobile, target sekecil itu sering meleset ke tombol tetangga.

   Breakpoint: tablet ≤768px, HP kecil ≤480px.
   ============================================================ */

@media (max-width: 768px) {
  /* Tombol hapus kecil (× di sebelah nama siswa di daftar-kelompok dan
     di sel progress monitoring-proyek). Default 20×20 — di HP jari
     siswa sering meleset ke tombol tetangga saat tap. */
  .hapus-btn,
  .hapus-progress-btn {
    min-width: 36px; min-height: 36px;
    font-size: 16px; /* biar ikon ✕ tetap terbaca saat tombol membesar */
  }

  /* Tombol simpan catatan (proposal & progress) juga kecil di desktop.
     Naikkan sedikit di tablet; HP kecil ditangani di breakpoint di bawah. */
  .catatan-simpan-btn,
  .progress-catatan-toggle {
    min-height: 38px;
  }

  /* Tombol refresh monitoring: padding default masih di bawah 44px total,
     tambah sedikit di mobile. */
  .monitoring-refresh {
    min-height: 42px;
  }

  /* Form input full-width di mobile: max-width 400px di desktop hilang,
     default width: 100% sudah diterapkan tapi ada beberapa yang masih
     punya min-width eksplisit — paksa ulang di sini. */
  .kumpul-form select,
  .kumpul-form input,
  .kumpul-form textarea,
  .form-group select,
  .form-group input,
  .wokwi-locked input {
    max-width: 100%;
    min-width: 0; /* override min-width: 200px dari .catatan-input di mobile */
  }
  .catatan-input { min-width: 0; }

  /* Sticky kolom pertama tabel monitoring agak terlalu lebar di HP —
     140 px menyita hampir setengah viewport kecil. Sempitkan sedikit
     supaya kolom Minggu lebih banyak terlihat tanpa scroll horizontal. */
  .monitoring-table th:first-child,
  .monitoring-table td:first-child {
    min-width: 100px;
  }

  /* Wokwi/sheet passcode: input punya width: 200px eksplisit — izinkan
     menyusut di mobile. Flex parent sudah wrap jadi tidak masalah. */
  .wokwi-locked input { width: 100%; }
}

@media (max-width: 480px) {
  /* Di HP kecil, tap target harus benar-benar ≥44 px supaya nyaman
     disentuh. */
  .hapus-btn,
  .hapus-progress-btn,
  .progress-catatan-toggle {
    min-width: 44px; min-height: 44px;
  }
  .catatan-simpan-btn,
  .monitoring-refresh {
    min-height: 44px;
  }

  /* Search form header menyusut lagi biar muat di HP sempit, dan tombol
     search-nya tidak terlalu dominan. */
  .search-form input { width: 140px; }

  /* Padding sel monitoring tabel dikecilkan di HP supaya lebih banyak kolom
     terlihat sebelum harus scroll. Tetap cukup untuk sentuhan. */
  .monitoring-table th,
  .monitoring-table td { padding: 8px 6px; font-size: 12px; }

  /* Heading H1 dan brand name agak lebih kecil di HP kecil agar tidak
     memotong baris. */
  h1 { font-size: 28px; }
  .brand-name { font-size: 17px; }
  .brand-sub  { font-size: 9px; }

  /* Wadah tabel monitoring: turunkan max-height di HP karena layar sudah
     pendek; scroll vertikal yang lebih pendek lebih natural di jempol. */
  #monitoring-table-container { max-height: 60vh; }
}

/* Filter minggu monitoring-proyek: kolom selain yang dipilih di-select akan
   display:none. Atribut data-minggu-filter di-set oleh JS (lihat
   applyMingguFilter di monitoring-proyek.js); ketika string kosong, tidak ada
   aturan yang cocok jadi semua kolom tampil (= "Semua minggu").

   Selector ini HANYA berlaku untuk tabel monitoring-proyek (id container
   monitoring-proyek-table-container) supaya tidak mengganggu tabel monitoring
   lain yang tidak punya filter minggu. */

/* Selector utama: sembunyikan sel kolom minggu yang tidak sesuai filter.
   Pakai :not() dengan data attribute matcher — bukan :nth-child, karena
   urutan kolom bisa bergeser kalau ada/kolom catatan disembunyikan.

   Daftar minggu 1-30 sudah mencakup 2 semester (masing-masing ±15 minggu).
   Kalau ada kelas dengan lebih dari 30 minggu (mis. tahunan), filter untuk
   minggu >30 tidak akan menyembunyikan apa-apa — kolom tetap tampil.
   Dropdown option juga hanya di-generate sampai minggu yang dikirim server,
   jadi filter >30 tidak akan pernah dipilih user lewat UI. */
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="1"] [data-minggu]:not([data-minggu="1"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="2"] [data-minggu]:not([data-minggu="2"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="3"] [data-minggu]:not([data-minggu="3"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="4"] [data-minggu]:not([data-minggu="4"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="5"] [data-minggu]:not([data-minggu="5"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="6"] [data-minggu]:not([data-minggu="6"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="7"] [data-minggu]:not([data-minggu="7"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="8"] [data-minggu]:not([data-minggu="8"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="9"] [data-minggu]:not([data-minggu="9"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="10"] [data-minggu]:not([data-minggu="10"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="11"] [data-minggu]:not([data-minggu="11"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="12"] [data-minggu]:not([data-minggu="12"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="13"] [data-minggu]:not([data-minggu="13"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="14"] [data-minggu]:not([data-minggu="14"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="15"] [data-minggu]:not([data-minggu="15"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="16"] [data-minggu]:not([data-minggu="16"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="17"] [data-minggu]:not([data-minggu="17"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="18"] [data-minggu]:not([data-minggu="18"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="19"] [data-minggu]:not([data-minggu="19"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="20"] [data-minggu]:not([data-minggu="20"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="21"] [data-minggu]:not([data-minggu="21"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="22"] [data-minggu]:not([data-minggu="22"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="23"] [data-minggu]:not([data-minggu="23"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="24"] [data-minggu]:not([data-minggu="24"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="25"] [data-minggu]:not([data-minggu="25"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="26"] [data-minggu]:not([data-minggu="26"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="27"] [data-minggu]:not([data-minggu="27"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="28"] [data-minggu]:not([data-minggu="28"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="29"] [data-minggu]:not([data-minggu="29"]),
#monitoring-proyek-table-container table.monitoring-table[data-minggu-filter="30"] [data-minggu]:not([data-minggu="30"]) {
  display: none;
}