/* ============================================================
   Komponen khusus Aplikasi Pemilihan Mata Pelajaran Pilihan
   MAN 1 Jember — melengkapi design system app.css / portal.css
   ============================================================ */

/* ---------- Stepper wizard ---------- */
.stepbar{display:flex;gap:6px;align-items:stretch;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:10px;box-shadow:var(--shadow-sm);margin-bottom:20px;overflow-x:auto}
.stepbar-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;flex:1;min-width:150px;
  color:var(--ink-3);font-size:12.6px;font-weight:600;text-decoration:none}
.stepbar-item .sb-num{width:26px;height:26px;border-radius:8px;background:#eef2f7;color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.stepbar-item.active{background:var(--teal-50);color:var(--teal-600);box-shadow:inset 0 0 0 1px #b6e3dd}
.stepbar-item.active .sb-num{background:var(--teal-600);color:#fff}
.stepbar-item.done{color:var(--emerald)}
.stepbar-item.done .sb-num{background:var(--success-bg);color:var(--emerald)}
.stepbar-item .sb-text{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.stepbar-item .sb-text small{font-size:11px;color:var(--muted);font-weight:600}
.stepbar-sep{display:flex;align-items:center;color:#cbd5e1}
@media(max-width:860px){.stepbar-item .sb-text small{display:none}.stepbar-item{min-width:0;flex:none}}

/* ---------- Tata letak wizard ---------- */
.wz-layout{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.wz-side{position:sticky;top:88px}
@media(max-width:1000px){.wz-layout{grid-template-columns:1fr}.wz-side{position:static}}

/* Kartu identitas siswa */
.siswa-card{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  color:#fff;border-radius:14px;padding:16px 18px}
.siswa-card .avatar-initial{width:52px;height:52px;font-size:19px;border:2px solid rgba(255,255,255,.25)}
.siswa-card strong{display:block;font-size:15px}
.siswa-card span{display:block;font-size:12.4px;color:#a9c0d9}
.siswa-card .sc-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.siswa-card .badge{background:rgba(255,255,255,.14);color:#fff}

/* Kotak ringkasan pilihan */
.ringkas-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:13.4px}
.ringkas-item:last-child{border-bottom:0}
.ringkas-no{width:22px;height:22px;border-radius:7px;background:var(--teal-50);color:var(--teal-600);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;margin-top:1px}
.ringkas-item b{display:block;color:var(--ink);font-size:13.4px}
.ringkas-item small{color:var(--ink-3);font-size:11.6px}
.ringkas-empty{color:var(--muted);font-size:12.8px;font-style:italic}

/* ---------- Kartu pilihan mapel / klaster ---------- */
.pilihan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.pilih-tile{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.6px solid var(--border-2);
  border-radius:13px;padding:14px 15px;cursor:pointer;transition:.15s;user-select:none}
.pilih-tile:hover{border-color:var(--teal-500);transform:translateY(-2px);box-shadow:var(--shadow)}
.pilih-tile input{position:absolute;opacity:0;pointer-events:none}
.pilih-tile .pt-check{width:22px;height:22px;border-radius:7px;border:1.6px solid var(--border-2);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff;transition:.15s}
.pilih-tile .pt-check .icon{width:14px;height:14px;opacity:0}
.pilih-tile .pt-body{flex:1;min-width:0}
.pilih-tile .pt-body strong{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.pilih-tile .pt-body small{display:block;font-size:11.8px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.pilih-tile .pt-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.6px;font-weight:700;
  padding:2px 8px;border-radius:99px;background:#f1f5f9;color:var(--ink-3);margin-top:7px}
.pilih-tile.sel{border-color:var(--teal-600);background:var(--teal-50);box-shadow:0 0 0 1px var(--teal-600)}
.pilih-tile.sel .pt-check{background:var(--teal-600);border-color:var(--teal-600)}
.pilih-tile.sel .pt-check .icon{opacity:1}
.pilih-tile.locked{opacity:.45;cursor:not-allowed}
.pilih-tile.locked:hover{transform:none;border-color:var(--border-2);box-shadow:none}
.pilih-tile.radio .pt-check{border-radius:50%}
.pilih-tile.radio.sel .pt-check{background:var(--teal-600)}
.pilih-tile .kode-badge{position:absolute;top:10px;right:12px;font-size:10px;font-weight:800;letter-spacing:.5px;
  color:var(--muted);text-transform:uppercase}
.pilih-tile.klaster{padding:18px;flex-direction:column;gap:0}
.pilih-tile.klaster .kl-head{display:flex;gap:12px;align-items:center;width:100%;margin-bottom:11px}
.pilih-tile.klaster .kl-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.pilih-tile.klaster .kl-mapel{display:flex;flex-wrap:wrap;gap:5px;width:100%}
.pilih-tile.klaster .kl-mapel span{font-size:11px;background:#f1f5f9;color:var(--ink-2);border-radius:6px;padding:3px 9px;font-weight:600}
.pilih-tile.klaster.sel .kl-mapel span{background:rgba(13,148,136,.14);color:var(--teal-600)}
.pilih-tile.klaster .pt-check{position:absolute;top:14px;right:14px;border-radius:50%}

.pt-order{position:absolute;top:-9px;left:14px;background:var(--emerald);color:#fff;font-size:10.4px;font-weight:800;
  letter-spacing:.4px;border-radius:99px;padding:3px 10px;box-shadow:0 3px 8px rgba(5,150,105,.35);z-index:2}
.pilih-tile.klaster .pt-order{top:-9px;left:20px}
.tbl-mini .ctr{text-align:center}

/* ---------- Langkah 3: pemilihan rumpun (bertumpuk) ---------- */
.pilihan-grid.rumpun-bertumpuk{display:block}
.rumpun-blok{margin-bottom:16px;transition:opacity .18s}
.rumpun-blok:last-child{margin-bottom:0}
.rumpun-blok.terabaikan{opacity:.5}
.rumpun-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#f8fafc;
  border:1px solid var(--border);border-left:4px solid var(--teal-600);margin-bottom:12px}
.rumpun-head .rh-ic{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.rumpun-head strong{display:block;font-size:14.6px;color:var(--ink)}
.rumpun-head small{display:block;color:var(--ink-3);font-size:12.2px;line-height:1.4}
.rumpun-head .badge{margin-left:auto}
.rumpun-blok.terpilih .rumpun-head{background:var(--teal-50);border-color:#b6e3dd}
.rg-mapel{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.rumpun-kesimpulan{display:flex;gap:9px;align-items:center;margin-top:10px;padding:10px 13px;border-radius:10px;
  background:var(--success-bg);border:1px solid #a7f3d0;color:#065f46;font-size:13.2px;font-weight:600}
.rumpun-kesimpulan.besar{align-items:flex-start;margin:0 0 18px;padding:14px 16px;font-weight:400}
.rumpun-kesimpulan.besar .icon{width:22px;height:22px;color:var(--emerald);flex:none;margin-top:2px}
.rumpun-kesimpulan.besar small{display:block;font-size:11.4px;text-transform:uppercase;letter-spacing:.4px;color:#047857;font-weight:700}
.rumpun-kesimpulan.besar b{display:block;font-size:16px;color:#065f46}
.rumpun-kesimpulan.besar span{display:block;font-size:12.6px;color:#047857;line-height:1.5}
@media(max-width:640px){.rg-mapel{grid-template-columns:1fr}}

/* Penghitung pilihan */
.pick-counter{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:700;color:var(--ink-2);
  background:#fff;border:1px solid var(--border);border-radius:99px;padding:6px 14px}
.pick-counter b{color:var(--teal-600);font-size:14px}
.pick-counter.penuh{background:var(--success-bg);border-color:#a7f3d0;color:#065f46}
.pick-counter.penuh b{color:var(--emerald)}
.pick-counter.kurang{background:var(--warning-bg);border-color:#fde68a;color:#92400e}
.pick-counter.kurang b{color:#b45309}

/* Chip rencana prodi */
.chipbar{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid var(--border-2);border-radius:99px;
  background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.14s;user-select:none}
.chip:hover{border-color:var(--teal-500);color:var(--teal-600)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip.sel{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.chip .icon{width:14px;height:14px}

/* ---------- Tanda tangan ---------- */
.sig-wrap{border:1.6px dashed var(--border-2);border-radius:14px;background:#fbfdff;padding:10px;position:relative}
.sig-wrap.aktif{border-style:solid;border-color:var(--teal-500);background:#fff}
.sig-wrap canvas{width:100%;height:210px;display:block;border-radius:10px;cursor:crosshair;touch-action:none;background:#fff}
.sig-hint{position:absolute;inset:auto 0 42%;text-align:center;color:#c3ceda;font-size:15px;font-weight:700;
  letter-spacing:.4px;pointer-events:none}
.sig-wrap.aktif .sig-hint{display:none}
.sig-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 4px 2px;font-size:12px;color:var(--ink-3)}

/* ---------- Kartu bukti pemilihan (cetak) ---------- */
.bukti{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 30px;max-width:900px;margin:0 auto;
  box-shadow:var(--shadow-sm)}
.bukti-kop{width:100%;border-bottom:2.5px solid #000;padding-bottom:6px;margin-bottom:16px}
.bukti-judul{text-align:center;margin-bottom:18px}
.bukti-judul h2{font-size:17px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}
.bukti-judul p{margin:0;font-size:12.6px;color:var(--ink-3)}
.bukti-table{width:100%;border-collapse:collapse;font-size:13.4px;margin-bottom:16px}
.bukti-table td{padding:5px 8px;vertical-align:top;border:0}
.bukti-table td.k{width:190px;color:var(--ink-3)}
.bukti-table td.s{width:14px}
.bukti-blok{border:1.4px solid #d7deea;border-radius:11px;padding:13px 16px;margin-bottom:14px}
.bukti-blok h4{font-size:13px;margin-bottom:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy-800)}
.bukti-list{margin:0;padding-left:20px;font-size:13.4px}
.bukti-list li{margin-bottom:4px}
.bukti-ttd{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;font-size:12.8px;text-align:center}
.bukti-ttd .ttd-box{min-height:110px}
.bukti-ttd img{max-height:80px}
.bukti-note{font-size:11.6px;color:var(--muted);text-align:center;margin-top:18px;border-top:1px dashed var(--border);padding-top:10px}

/* ---------- Pilih mode (kartu radio admin) ---------- */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.mode-grid{grid-template-columns:1fr}}
.mode-card{position:relative;border:1.8px solid var(--border-2);border-radius:15px;padding:20px;background:#fff;cursor:pointer;transition:.16s}
.mode-card:hover{border-color:var(--teal-500);box-shadow:var(--shadow)}
.mode-card input{position:absolute;opacity:0;pointer-events:none}
.mode-card .mc-no{display:inline-flex;align-items:center;gap:8px;font-size:11.4px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--teal-600);background:var(--teal-50);border-radius:99px;padding:4px 12px;margin-bottom:12px}
.mode-card h3{font-size:16.5px;margin-bottom:6px}
.mode-card p{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.mode-card ul{margin:0;padding-left:18px;font-size:12.8px;color:var(--ink-2)}
.mode-card ul li{margin-bottom:3px}
.mode-card.sel{border-color:var(--teal-600);background:var(--teal-50);box-shadow:0 0 0 1px var(--teal-600)}
.mode-card.sel .mc-no{background:var(--teal-600);color:#fff}

/* ---------- Donut & grafik ---------- */
.donut-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donut{position:relative;width:154px;height:154px;flex:none}
.donut svg{transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center b{font-size:25px;line-height:1}
.donut-center span{font-size:11.4px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.donut-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:180px}
.donut-legend .dl-row{display:flex;align-items:center;gap:9px;font-size:13.2px;color:var(--ink-2)}
.donut-legend .dl-row i{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.donut-legend .dl-row b{margin-left:auto;font-variant-numeric:tabular-nums}

/* Kolom grafik */
.colchart{display:flex;align-items:flex-end;gap:10px;height:190px;padding:10px 4px 0;border-bottom:1px solid var(--border)}
.colchart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.colchart .col-bar{width:100%;max-width:52px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--teal-500),var(--teal-600));
  min-height:4px;transition:height .5s;position:relative}
.colchart .col:hover .col-bar{filter:brightness(1.08)}
.colchart .col-val{font-size:11.6px;font-weight:800;color:var(--ink-2)}
.colchart-labels{display:flex;gap:10px;padding:8px 4px 0}
.colchart-labels span{flex:1;text-align:center;font-size:11.4px;color:var(--ink-3);font-weight:600}

/* ---------- Panel info ---------- */
.info-panel{display:flex;gap:13px;align-items:flex-start;background:#f8fafc;border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;font-size:13.2px;color:var(--ink-2);margin-bottom:16px}
.info-panel .icon{color:var(--teal-600);flex:none;margin-top:2px}
.info-panel.warn{background:var(--warning-bg);border-color:#fde68a;color:#92400e}
.info-panel.warn .icon{color:#d97706}

/* ---------- Lain-lain ---------- */
.dropzone{border:2px dashed var(--border-2);border-radius:14px;background:#f8fafc;padding:26px;text-align:center;
  position:relative;transition:.16s}
.dropzone:hover{border-color:var(--teal-500);background:var(--teal-50)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone .dz-ic{width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--border);color:var(--teal-600);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.dropzone b{display:block;font-size:14.4px;color:var(--ink)}
.dropzone small{color:var(--ink-3)}
.dropzone.tersedia{border-style:solid;border-color:var(--emerald);background:var(--success-bg)}
.dz-file{font-size:12.8px;font-weight:700;color:var(--emerald);margin-top:6px}
.tbl-mini{width:100%;border-collapse:collapse;font-size:12.8px}
.tbl-mini th{text-align:left;font-size:10.8px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border)}
.tbl-mini td{padding:7px 8px;border-bottom:1px solid #f1f5f9;color:var(--ink-2)}
.tbl-mini tr:last-child td{border-bottom:0}
.tbl-mini tbody tr:hover{background:#fafbfd}
.avatar-initial.sm{width:34px;height:34px;font-size:13px}
.sub-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.sub-nav a{padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--border);font-size:13.2px;
  font-weight:600;color:var(--ink-2)}
.sub-nav a:hover{border-color:var(--teal-500);color:var(--teal-600)}
.sub-nav a.active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.kode-pill{font-family:ui-monospace,Consolas,monospace;font-size:11.6px;background:#f1f5f9;border:1px solid var(--border);
  border-radius:6px;padding:2px 7px;color:var(--ink-2)}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px}
@media(max-width:980px){.form-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.form-grid-4{grid-template-columns:1fr}}
.step-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.progress-line{height:8px;border-radius:99px;background:#e9eef5;overflow:hidden;margin-top:8px}
.progress-line i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-500),var(--emerald))}

/* ---------- Cetak ---------- */
@media print{
  .bukti{border:0;box-shadow:none;padding:0;max-width:100%}
  .no-print{display:none!important}
  body{background:#fff;font-size:12px}
  @page{size:A4 portrait;margin:12mm}
}