/* Guru Pintar v3.0 — Components */

/* ── Auth Pages ───────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sidebar-bg);
}
.auth-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
}
.auth-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 40px;
  border: 1px solid var(--border);
  animation: slideUp .4s cubic-bezier(.4,0,.2,1);
  align-self: center;
  margin: 40px auto;
}
.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--bg-main);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: 24px 16px; }
  .auth-card { padding: 28px 24px; }
}

/* ── School Dropdown ──────────────────────────────────────────── */
.school-dropdown {
  position: absolute; top:100%; left:0; right:0;
  background: var(--bg-card); border:1px solid var(--border-mid);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 50; max-height: 200px; overflow-y: auto; display: none;
  animation: slideDown .15s ease;
}
.school-item { padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); }
.school-item:hover { background:var(--primary-light); }
.school-item strong { display:block; color:var(--text-primary); }
.school-item span { color:var(--text-secondary); font-size:12px; }

/* ── Wizard ───────────────────────────────────────────────────── */
.wizard-steps { display:flex; align-items:center; margin-bottom:28px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.wizard-steps::-webkit-scrollbar { display:none; }
.wizard-step { display:flex; align-items:center; gap:8px; }
.step-number { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--border);color:var(--text-secondary);flex-shrink:0;transition:all var(--transition); }
.wizard-step.active .step-number,.wizard-step.done .step-number { background:var(--primary);color:white; }
.wizard-connector { flex:1;height:2px;background:var(--border);margin:0 8px;min-width:20px;transition:background var(--transition); }
.wizard-connector.done { background:var(--primary); }
.step-label { font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap; }
.wizard-step.active .step-label { color:var(--primary);font-weight:700; }

/* ── Form Row ─────────────────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px) { .form-row { grid-template-columns:1fr; } }

/* ── Msg boxes ────────────────────────────────────────────────── */
.msg { display:none; padding:12px 16px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; line-height:1.6; border-left:4px solid; }
.msg-err { background:var(--danger-light); color:var(--danger); border-color:var(--danger); }
.msg-ok  { background:var(--success-light); color:var(--success); border-color:var(--success); }
.auth-link { color:var(--primary); font-weight:600; text-decoration:none; cursor:pointer; }
.auth-link:hover { text-decoration:underline; }

/* ── ID Card / Kartu Pelajar ──────────────────────────────────── */
.kartu-pelajar {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  color: white;
  aspect-ratio: 1.6 / 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.kartu-header { padding:10px 14px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.15); z-index:1; }
.kartu-header span { font-size:11px; font-weight:700; }
.kartu-body { flex:1; display:flex; align-items:center; gap:12px; padding:10px 14px; z-index:1; }
.kartu-foto { width:54px;height:54px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0;overflow:hidden; }
.kartu-foto img { width:100%;height:100%;object-fit:cover; }
.kartu-info .nama { font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kartu-info .detail { font-size:10px;opacity:.8; }
.kartu-barcode { background:white;padding:6px 10px;text-align:center;margin-top:auto; }
.kartu-barcode .kode { font-size:9px;color:#333;font-family:monospace;letter-spacing:1px; }

/* ── Dimension Cards (Asesmen) ────────────────────────────────── */
.dim-card { background:var(--bg-card);border-radius:var(--radius);padding:16px;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all var(--transition); }
.dim-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.cp-btn { padding:5px 4px;border:1.5px solid var(--border-mid);border-radius:6px;font-size:9px;font-weight:600;cursor:pointer;background:var(--bg-main);color:var(--text-secondary);text-align:center;transition:all .15s;line-height:1.3;font-family:var(--font-main); }
.cp-btn:hover { border-color:var(--primary);color:var(--primary); }
.cp-4 { border-color:var(--success)!important;background:var(--success-light)!important;color:var(--success)!important; }
.cp-3 { border-color:var(--primary)!important;background:var(--primary-light)!important;color:var(--primary)!important; }
.cp-2 { border-color:var(--warning)!important;background:var(--warning-light)!important;color:var(--warning)!important; }
.cp-1 { border-color:var(--danger)!important;background:var(--danger-light)!important;color:var(--danger)!important; }

/* ── Video Cards ──────────────────────────────────────────────── */
.video-card { border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:all var(--transition);cursor:pointer;background:var(--bg-card); }
.video-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary); }
.video-thumb { aspect-ratio:16/9;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;overflow:hidden; }
.video-thumb .play-btn { width:52px;height:52px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:white;backdrop-filter:blur(4px);transition:all var(--transition); }
.video-card:hover .play-btn { background:var(--primary);transform:scale(1.1); }

/* ── Content Generator Cards ──────────────────────────────────── */
.content-type-card { border:2px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;transition:all var(--transition);text-align:center; }
.content-type-card:hover,.content-type-card.selected { border-color:var(--primary);background:var(--primary-light); }
.content-type-card .ct-icon { font-size:36px;margin-bottom:8px; }
.content-type-card .ct-label { font-size:13px;font-weight:700;color:var(--text-primary); }
.content-type-card .ct-desc { font-size:11px;color:var(--text-secondary);margin-top:3px; }

/* ── E-Learning Cards ─────────────────────────────────────────── */
.lesson-card { background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:all var(--transition);cursor:pointer; }
.lesson-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-md); }
.lesson-header { height:8px; }
.lesson-body { padding:16px; }
.lesson-badge { font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);display:inline-block;margin-bottom:8px; }
.lesson-title { font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:6px; }
.lesson-meta  { font-size:12px;color:var(--text-secondary); }
.lesson-progress-wrap { height:4px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden; }
.lesson-progress-fill { height:4px;border-radius:2px;background:var(--primary);transition:width .4s ease; }

/* ── WA Notification button (PR #8 #23) ──────────────────────── */
.wa-btn { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#25D366;color:white;border-radius:var(--radius-pill);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all var(--transition); }
.wa-btn:hover { background:#1DA851;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,.4); }
.wa-btn .ti { font-size:16px; }