:root{ --orange:#FF6A00; --dark:#0F0F0F; --light:#FFFFFF; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--light); color:#222; }
.header{
  background: linear-gradient(90deg, var(--dark) 0%, #1b1b1b 40%, var(--orange) 100%);
  color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
}
.header .title{ font-weight:700; font-size:18px; letter-spacing:0.3px; }
.header .brand{ display:flex; align-items:center; gap:10px; }
.header img{ height:34px; }
.footer{
  text-align:center; padding:10px; color:#fff; background:var(--dark);
}
.card{ background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:16px; margin:16px auto; width:min(1100px, 94vw); }
.btn{ background:var(--orange); color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn.secondary{ background:#222; }
.btn.ghost{ background:#fff; color:#222; border:1px solid #ddd; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1 1 280px; }
.input, select{ width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; }
.tabbar{ display:flex; gap:6px; overflow:auto; background:#111; padding:6px; }
.tabbar .tab{ color:#fff; background:#222; padding:10px 12px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.tabbar .tab.active{ background:var(--orange); }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border:1px solid #ddd; padding:8px; }
.table th{ background:#f6f6f6; }
.util-topbar{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-bottom:10px; }
.badge{ background:#eee; padding:6px 10px; border-radius:999px; font-weight:600; }
.notice{ background:#fff8e6; border:1px solid #ffd18f; padding:10px; border-radius:8px; }
.print-only{ display:none; }
@media print{
  .no-print{ display:none !important; }
  .print-only{ display:block; }
}
.tabview {
  display: none;
  padding: 10px;
  background: #fff;
  color: #000;
}

.tab.active {
  background-color: orange !important;
  color: #fff !important;
}
.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-copy, .btn-add, .btn-delete, .btn-edit {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.btn-copy {
  background-color: #000;
  color: white;
}

.btn-add {
  background-color: #28a745;
  color: white;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-edit {
  background-color: #000;
  color: white;
}

.btn-copy:hover {
  background-color: #333;
}

.btn-add:hover {
  background-color: #218838;
}

.btn-delete:hover {
  background-color: #c82333;
}

.btn-edit:hover {
  background-color: #333;
}

.kegiatan-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
}

.kegiatan-select option {
  padding: 4px;
  border-bottom: 1px solid #eee;
}

.kegiatan-select option:hover {
  background-color: #f0f0f0;
}

/* Style untuk multiple select yang lebih baik */
.kegiatan-select[multiple] {
  background-color: white;
}

.kegiatan-select[multiple] option:checked {
  background-color: #007bff;
  color: white;
}

.uraian-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
}

.total-cell {
  font-weight: bold;
  background-color: #f8f9fa;
}

/* ===========================
   TOMBOL RKT ACTION BAR
   =========================== */

/* Tombol oranye (Ambil dari Solusi, Ambil dari Refleksi) */
.btn-rkt-orange {
    background-color: #ff7a00;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}
.btn-rkt-orange:hover {
    background-color: #e66b00;
}

/* Tombol hitam (Refresh dari Solusi, Clear RKT) */
.btn-rkt-black {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
#tblARKAS td:last-child,
#tblARKAS th:last-child {
    width: 120px !important;
    min-width: 120px !important;
}
}
#tblARKAS .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}
/* ======================================================
   FIX TOMBOL AKSI ARKAS (HORIZONTAL)
   ====================================================== */

#tblARKAS th:last-child,
#tblARKAS td:last-child {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    text-align: center !important;
}

#tblARKAS .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.btn-copy, .btn-add, .btn-delete {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50%;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

.btn-copy { background:#000; }
.btn-add { background:#28a745; }
.btn-delete { background:#dc3545; }

.btn-copy:hover { background:#333; }
.btn-add:hover { background:#218838; }
.btn-delete:hover { background:#c82333; }

.btn-pbd {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  margin-right: 6px;
}

.btn-kembali {
  background: #ffffff;
  color: #000;
  border: 1px solid #bbb;
}

.btn-cetak {
  background: #ff6600;
  color: #ffffff;
}

.btn-keluar {
  background: #000000;
  color: #ffffff;
}

.button-group {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

.button-group h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 14px;
}

.btn-rkt-blue {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px;
}

.btn-rkt-green {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px;
    font-weight: bold;
}

.btn-rkt-orange {
    background: #fd7e14;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px;
    font-size: 12px;
}

/* ===============================
   WARNA INDIKATOR BERDASARKAN LABEL (LEMBUT)
   =============================== */
.label-1 {
  color: #c82333;   /* merah normal */
  font-weight: normal;
}

.label-2 {
  color: #b58900;   /* kuning lebih kalem */
  font-weight: normal;
}

.label-3 {
  color: #2f7d32;   /* hijau natural */
  font-weight: normal;
}

/* =====================================================
   ANALISIS MASALAH & AKAR MASALAH
   ===================================================== */

#view-analisis {
  padding: 20px;
}

/* Wrapper utama */
.analisis-wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 15px;
}

/* Box tabel kiri & kanan */
.analisis-box {
  flex: 1;
}

/* Judul kecil di atas tabel */
.analisis-box h4 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

/* Panah tengah */
.analisis-arrow {
  font-size: 42px;
  font-weight: bold;
  color: #444;
  margin-top: 80px; /* sejajarkan ke tengah tabel */
}

/* ================= TABEL ================= */

#tblMasalah,
#tblAkarMasalah {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

/* Header */
#tblMasalah thead th,
#tblAkarMasalah thead th {
  background: #2f343a;
  color: #fff;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #444;
}

/* Body */
#tblMasalah tbody td,
#tblAkarMasalah tbody td {
  padding: 7px 10px;
  border: 1px solid #ccc;
  vertical-align: top;
}

/* Kolom nomor */
#tblMasalah td:first-child,
#tblAkarMasalah td:first-child {
  text-align: center;
  width: 40px;
}

/* Kolom SNP */
#tblMasalah td:nth-child(2),
#tblAkarMasalah td:nth-child(2) {
  width: 180px;
  font-weight: 500;
}

/* Kolom indikator */
.indikator-cell {
  font-weight: 500;
}

/* ================= WELCOME PAGE (HITAM • ORANYE • PUTIH) ================= */

.welcome-page {
  background: #0f0f0f;
  color: #ffffff;
  padding: 48px 40px 56px;
  border-bottom: 6px solid #ff8c00;
}

/* HERO */
.welcome-hero {
  max-width: 960px;
  margin-bottom: 40px;
}

.welcome-hero h1 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 14px;
  color: #ffffff;
}

.welcome-hero .subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #dddddd;
}

/* CONTENT BOX */
.welcome-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* BOX UMUM */
.welcome-box {
  border-radius: 18px;
  padding: 26px 28px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.welcome-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.welcome-box p {
  font-size: 14px;
  line-height: 1.6;
}

/* BOX ORANYE */
.welcome-box.orange {
  background: linear-gradient(135deg, #ff8c00, #e67600);
  color: #000;
}

.welcome-box.orange:hover {
  transform: translateY(-4px);
}

/* BOX PUTIH */
.welcome-box.yellow {
  background: #ffffff;
  color: #111;
  border-left: 6px solid #ff8c00;
}

.welcome-box.yellow:hover {
  transform: translateY(-4px);
}

/* CTA */
.welcome-box .cta {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: inherit;
}

/* FOOTER QUOTE */
.welcome-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-style: italic;
  font-size: 14px;
  color: #cccccc;
  max-width: 960px;
}

/* aksesibilitas & interaksi */
.welcome-box:focus {
  outline: 3px solid rgba(255,140,0,0.6);
  outline-offset: 3px;
}

/* =========================
   SEMBUNYIKAN TAB SAAT WELCOME
   ========================= */
body.welcome-mode #tabs {
  display: none !important;
}

/* =========================
   WELCOME CARD (WAJIB)
   ========================= */
.welcome-card {
  max-width: 1100px;
  margin: 0 auto;
}

.welcome-header {
  margin-bottom: 32px;
}

.welcome-header h1 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 12px;
}

.welcome-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #dddddd;
}

.welcome-actions {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.tabview {
  min-height: calc(100vh - 120px); /* header + footer */
}

.welcome-page {
  min-height: calc(100vh - 120px);
}

/* ================= DASHBOARD MODERN FINAL ================= */
.dashboard-modern{
  padding:24px;
  background:linear-gradient(135deg,#fff7ed,#ffffff 45%,#f8fafc);
}

.dash-hero{
  background:linear-gradient(135deg,#111827,#1f2937);
  color:white;
  padding:24px 28px;
  border-radius:24px;
  margin-bottom:18px;
  box-shadow:0 18px 38px rgba(0,0,0,.16);
}

.dash-hero h2{
  margin:0;
  font-size:30px;
}

.dash-hero p{
  margin:8px 0 0;
  color:#fed7aa;
  font-size:15px;
}

.dash-summary,
#dashboardSummaryBox{
  display:none !important;
}

.dash-chart-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}

.dash-card{
  background:white;
  border-radius:22px;
  padding:20px;
  border:1px solid #e5e7eb;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}

.dash-card h3{
  margin:0 0 16px;
  color:#111827;
  font-size:18px;
}

.dash-chart-box{
  height:300px;
  position:relative;
}

.dash-chart-snp{
  height:360px;
}

.dash-legend{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
  font-size:13px;
}

.dot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:4px;
  margin-right:6px;
}

.dot.baik{background:#22c55e;}
.dot.cukup{background:#facc15;}
.dot.kurang{background:#ef4444;}

.dash-table-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.dash-table-title span{
  background:#fff7ed;
  color:#c2410c;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.dash-table-scroll{
  max-height:330px;
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:16px;
}

.dash-table{
  width:100%;
  min-width:950px;
  border-collapse:collapse;
  font-size:13px;
}

.dash-table th{
  position:sticky;
  top:0;
  background:#111827;
  color:white;
  padding:11px;
  z-index:2;
}

.dash-table td{
  padding:10px 11px;
  border-bottom:1px solid #e5e7eb;
  background:white;
}

.dash-table tbody tr:hover td{
  background:#fff7ed;
}

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

.dash-summary-anggaran{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:18px;
}

.dash-summary-item{
  background:white;
  border-radius:18px;
  padding:18px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border:1px solid #e5e7eb;
}

.dash-summary-item .title{
  font-size:13px;
  color:#64748b;
  margin-bottom:10px;
  font-weight:600;
}

.dash-summary-item .value{
  font-size:30px;
  font-weight:800;
  color:#ff7a00;
}

@media(max-width:900px){
  .dash-summary-anggaran{
    grid-template-columns:1fr 1fr;
  }
}
/* Tombol keluar sebagai menu terakhir setelah Dashboard */
#tabs .sip-logout-tab {
  background: #b42318 !important;
  color: #fff !important;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
#tabs .sip-logout-tab:hover, #tabs .sip-logout-tab:focus-visible {
  background: #8f1d14 !important;
}
/* Navigasi dan formulir siklus SPMI */
.spmi-mainbar{gap:8px;align-items:center;flex-wrap:wrap;overflow:visible;padding:10px}
.spmi-mainbar .tab{font-size:14px;font-weight:600}
.spmi-subnav{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;background:#fff3e8;border-bottom:1px solid #f0d6c0}
.spmi-subnav[hidden]{display:none!important}
.spmi-subtab{border:1px solid #e7b489;background:white;color:#222;border-radius:9px;padding:9px 14px;cursor:pointer;font-weight:600}
.spmi-subtab.active{background:#ff7b00;color:#111}
.spmi-newview{padding:24px;max-width:100%;min-height:65vh}
.spmi-newview h2{margin-top:0}.spmi-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0}
.spmi-table-wrap{overflow-x:auto}.spmi-table{min-width:1000px}.spmi-table textarea{width:100%;min-width:155px;min-height:75px;border:1px solid #cbd5e1;border-radius:7px;padding:8px;font:inherit;resize:vertical}
.spmi-delete{background:#a52d21;color:white;border:0;border-radius:6px;padding:8px;cursor:pointer}
#spmi-msg-menetapkan,#spmi-msg-melaksanakan,#spmi-msg-mengendalikan{font-weight:600;color:#14532d}
@media(max-width:720px){.spmi-mainbar .tab{font-size:12px}.spmi-newview{padding:14px}.header .title{font-size:15px}}

/* Beranda: enam kartu siklus tanpa tab navigasi. Navigasi kontekstual pada halaman tahap. */
#tabs.spmi-mainbar{display:none!important}
body.spmi-home #spmi-subnav{display:none!important}
.spmi-cycle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0}
.spmi-cycle-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:220px;border:1px solid #e6e6e6;border-radius:20px;padding:24px;background:#fff;color:#151515;box-shadow:0 10px 25px rgba(0,0,0,.22);cursor:pointer;font:inherit;transition:transform .15s,box-shadow .15s}
.spmi-cycle-card:nth-child(odd){background:linear-gradient(135deg,#ff9d20,#ff7700);border-color:#ff8c00}
.spmi-cycle-card:hover,.spmi-cycle-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.32);outline-offset:3px}
.spmi-cycle-num{font-size:12px;font-weight:800;letter-spacing:.12em;opacity:.8}
.spmi-cycle-card h2{font-size:25px;margin:18px 0 10px}
.spmi-cycle-card p{font-size:15px;line-height:1.5;margin:0 0 20px}
.spmi-cycle-cta{font-size:14px;font-weight:800;margin-top:auto}
.spmi-subnav{align-items:center;gap:10px;background:#181818!important;color:#fff;padding:12px 16px!important}
.spmi-current-stage{font-weight:800;font-size:16px;margin:0 8px}
.spmi-subtab{background:#303030!important;color:#fff!important;border:1px solid #444!important}
.spmi-subtab.active{background:#ff8a00!important;color:#141414!important;border-color:#ff8a00!important}
.spmi-subtab.spmi-back{background:#fff!important;color:#181818!important}
.spmi-subtab.spmi-exit{background:#b91c1c!important;color:#fff!important;margin-left:auto}
@media(max-width:850px){.spmi-cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.spmi-cycle-grid{grid-template-columns:1fr}.spmi-cycle-card{min-height:185px}}

/* Revisi: akun di kanan atas; dashboard menjadi submenu Mengevaluasi. */
.header .spmi-account{margin-left:auto;position:relative;z-index:100}
.spmi-account-toggle{background:#fff;color:#181818;border:0;border-radius:10px;padding:10px 15px;font:inherit;font-weight:700;cursor:pointer;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spmi-account-menu{position:absolute;right:0;top:calc(100% + 9px);background:white;color:#222;border-radius:12px;padding:12px;min-width:250px;box-shadow:0 12px 35px #0004;z-index:200}
.spmi-account-menu[hidden],.spmi-account-overlay[hidden]{display:none!important}
.spmi-account-menu button{display:block;width:100%;padding:11px;border:0;border-radius:8px;text-align:left;background:#f3f4f6;color:#222;margin-top:8px;cursor:pointer;font-weight:600}
.spmi-account-menu button:last-child{background:#b91c1c;color:white}
.spmi-account-email{font-size:12px;overflow-wrap:anywhere;color:#555;padding:6px}
.spmi-account-overlay{position:fixed;inset:0;z-index:10000;background:#0009;display:flex;align-items:center;justify-content:center;padding:20px}
.spmi-account-dialog{width:min(460px,100%);max-height:90vh;overflow:auto;background:#fff;color:#222;border-radius:16px;padding:24px;box-shadow:0 20px 60px #0006}
.spmi-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.spmi-dialog-head button{border:0;background:transparent;font-size:23px;cursor:pointer}
.spmi-account-dialog form{display:grid;gap:12px;margin:16px 0}
.spmi-account-dialog label{display:grid;gap:6px;font-weight:600}
.spmi-account-dialog input{padding:11px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;width:100%;box-sizing:border-box}
.spmi-account-dialog form button{background:#f97316;color:white;border:0;border-radius:9px;padding:12px;cursor:pointer;font-weight:700}
.spmi-account-dialog form+form{border-top:1px solid #ddd;padding-top:12px}
#spmi-account-message{font-weight:600;overflow-wrap:anywhere}
@media(max-width:600px){.header .title{font-size:13px}.spmi-account-toggle{max-width:150px;font-size:12px}}

/* Diagram siklus interaktif: panah berurutan 1 → 2 → 3 → 4 → 5 → 6 → 1. */
.spmi-cycle-diagram{position:relative;max-width:1160px;margin:20px auto 34px;isolation:isolate}
.spmi-cycle-diagram .spmi-cycle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(185px,auto));gap:36px 40px;margin:0;position:relative;z-index:2}
.spmi-cycle-diagram .spmi-cycle-card{min-height:180px;padding:20px;border:2px solid #fff2;border-radius:22px;color:#fff;box-shadow:0 8px 24px #0005;background:linear-gradient(145deg,#ea580c,#fb923c)}
.spmi-cycle-diagram .spmi-cycle-card h2{font-size:23px;margin:10px 0 6px}
.spmi-cycle-diagram .spmi-cycle-card p{font-size:14px;line-height:1.4;margin:0 0 10px}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(2){background:linear-gradient(145deg,#c2410c,#f97316)}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(3){background:linear-gradient(145deg,#ca8a04,#eab308);color:#161616}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(4){background:linear-gradient(145deg,#4338ca,#818cf8)}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(5){background:linear-gradient(145deg,#be185d,#f472b6)}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(6){background:linear-gradient(145deg,#9a3412,#fb923c)}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(1){grid-column:2;grid-row:1}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(2){grid-column:3;grid-row:1}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(3){grid-column:3;grid-row:3}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(4){grid-column:2;grid-row:3}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(5){grid-column:1;grid-row:3}
.spmi-cycle-diagram .spmi-cycle-card:nth-child(6){grid-column:1;grid-row:1}
.spmi-cycle-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.spmi-cycle-arrows>path{fill:none;stroke:#fb923c;stroke-width:9;stroke-linecap:round;marker-end:url(#spmi-arrow-tip)}
.spmi-cycle-center{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:170px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0%,#fef3c7 80%);border:9px solid #fb923c;box-shadow:0 8px 25px #0005;color:#242424;text-align:center;justify-self:center;align-self:center;width:min(100%,210px)}
.spmi-cycle-center strong{font-size:36px;letter-spacing:2px}.spmi-cycle-center span{font-weight:800}.spmi-cycle-center small{line-height:1.4}.spmi-cycle-center .spmi-loop-symbol{font-size:27px;color:#ea580c}
@media(max-width:900px){.spmi-cycle-diagram .spmi-cycle-grid{gap:20px 18px;grid-template-rows:repeat(3,minmax(155px,auto))}.spmi-cycle-diagram .spmi-cycle-card{min-height:155px;padding:14px}.spmi-cycle-diagram .spmi-cycle-card h2{font-size:19px}.spmi-cycle-center{width:min(100%,165px);min-height:130px}.spmi-cycle-center strong{font-size:28px}}
@media(max-width:650px){.spmi-cycle-diagram .spmi-cycle-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:25px}.spmi-cycle-diagram .spmi-cycle-card:nth-child(n){grid-column:1;grid-row:auto;min-height:145px}.spmi-cycle-center{grid-column:1;grid-row:1;width:155px;min-height:145px;margin:0 auto 15px}.spmi-cycle-arrows{display:none}.spmi-cycle-diagram .spmi-cycle-card:not(:nth-child(6))::after{content:"↓";position:absolute;bottom:-29px;left:50%;font-size:25px;color:#fb923c}.spmi-cycle-diagram .spmi-cycle-card{position:relative}}


/* Revisi keterbacaan: urutan dimulai dari Menetapkan, panah besar kontras. */
.spmi-flow{max-width:1180px;margin:24px auto 40px;padding:22px 18px 28px;border:1px solid #4b5563;border-radius:22px;background:#171b22}
.spmi-flow-heading{text-align:center;color:#fff;font-size:25px;font-weight:850;margin:0 0 22px}
.spmi-flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) 70px minmax(0,1fr);grid-template-rows:minmax(205px,auto) 70px minmax(205px,auto);gap:0;align-items:stretch}
.spmi-flow-grid .spmi-flow-step{grid-column:auto;grid-row:auto;min-width:0;min-height:205px;margin:0;padding:22px 20px;border:3px solid #fff;border-radius:18px;box-shadow:0 5px 14px #0007;display:flex;flex-direction:column;text-align:left;align-items:flex-start;color:#fff!important;background:#9a3412;position:relative;z-index:2}
.spmi-flow-grid .spmi-flow-step .spmi-cycle-num{font-size:15px;color:#fff;opacity:1;letter-spacing:.06em;font-weight:900}
.spmi-flow-grid .spmi-flow-step h2{font-size:clamp(21px,2vw,29px);color:#fff;margin:12px 0 7px;line-height:1.1}
.spmi-flow-grid .spmi-flow-step p{font-size:clamp(14px,1.2vw,17px);line-height:1.4;color:#fff;margin:0 0 12px}
.spmi-flow-grid .spmi-flow-step .spmi-cycle-cta{font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:3px;margin-top:auto}
.spmi-flow-grid .spmi-cycle-01{grid-area:1/1;background:#c2410c}
.spmi-flow-grid .spmi-cycle-02{grid-area:1/3;background:#1d4ed8}
.spmi-flow-grid .spmi-cycle-03{grid-area:1/5;background:#a16207}
.spmi-flow-grid .spmi-cycle-04{grid-area:3/5;background:#4338ca}
.spmi-flow-grid .spmi-cycle-05{grid-area:3/3;background:#9d174d}
.spmi-flow-grid .spmi-cycle-06{grid-area:3/1;background:#0f766e}
.spmi-flow-grid .spmi-flow-arrow{display:flex;align-items:center;justify-content:center;color:#fbbf24;font-size:clamp(45px,5vw,76px);font-weight:900;line-height:1;text-shadow:0 2px 5px #000;z-index:3;pointer-events:none}
.spmi-a12{grid-area:1/2}.spmi-a23{grid-area:1/4}.spmi-a34{grid-area:2/5}.spmi-a45{grid-area:3/4}.spmi-a56{grid-area:3/2}.spmi-a61{grid-area:2/1}
.spmi-flow-grid .spmi-flow-center{grid-area:2/2/3/5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;font-size:25px;font-weight:900}
.spmi-flow-center span{font-size:14px;font-weight:600;color:#fde68a}
.spmi-flow-step:focus-visible{outline:4px solid #facc15;outline-offset:3px}
@media(max-width:760px){
.spmi-flow{padding:16px 12px}.spmi-flow-grid{display:flex;flex-direction:column;gap:0}
.spmi-flow-grid .spmi-flow-step{min-height:160px;padding:18px;margin:0}
.spmi-flow-grid .spmi-cycle-01{order:1}.spmi-flow-grid .spmi-cycle-02{order:3}.spmi-flow-grid .spmi-cycle-03{order:5}.spmi-flow-grid .spmi-cycle-04{order:7}.spmi-flow-grid .spmi-cycle-05{order:9}.spmi-flow-grid .spmi-cycle-06{order:11}
.spmi-flow-grid .spmi-a12{order:2}.spmi-flow-grid .spmi-a23{order:4}.spmi-flow-grid .spmi-a34{order:6}.spmi-flow-grid .spmi-a45{order:8}.spmi-flow-grid .spmi-a56{order:10}.spmi-flow-grid .spmi-a61{order:12}
.spmi-flow-grid .spmi-flow-arrow{height:46px;font-size:0}.spmi-flow-grid .spmi-flow-arrow::after{content:'⬇';font-size:42px}
.spmi-flow-grid .spmi-flow-center{order:13;font-size:21px;padding-top:12px}
}

/* Penyempurnaan navigasi dan tindakan formulir, 18 Oktober 2026 */
.spmi-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;min-width:0}
.spmi-profile-shortcut{background:#fff;border:1px solid #e2e8f0;border-radius:11px;color:#17202b;font-weight:800;padding:12px 17px;cursor:pointer;white-space:nowrap;font-size:14px}
.spmi-profile-shortcut:hover,.spmi-profile-shortcut:focus-visible{background:#fff1dc;outline-offset:2px}
.spmi-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 26px}
.spmi-form-actions button:disabled{opacity:.55;cursor:wait}
.spmi-form-actions [role=status]{font-weight:600}
/* Semua panah memakai gaya dan ukuran identik */
.spmi-flow-grid .spmi-flow-arrow{font-family:Arial,sans-serif;font-size:62px;font-weight:900;color:#ffcb35;text-shadow:0 3px 4px #0008;line-height:1}
@media(max-width:760px){.spmi-flow-grid .spmi-flow-arrow{font-size:0}.spmi-flow-grid .spmi-flow-arrow::after{font-size:42px}.spmi-header-actions{gap:6px}.spmi-profile-shortcut{padding:9px;font-size:12px}}
@media(max-width:500px){.spmi-header-actions{flex-wrap:wrap;justify-content:flex-end}.spmi-profile-shortcut{padding:7px}}

/* Analisis akar masalah: konsisten dengan tabel Memetakan */
.spmi-akar-table{width:100%;min-width:1280px;border-collapse:collapse}
.spmi-akar-table th{background:#343a40;color:#fff;text-align:center;vertical-align:middle}
.spmi-akar-table td{vertical-align:top;padding:9px}
.spmi-akar-table textarea{display:block;width:100%;min-width:140px;min-height:88px;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font:inherit;line-height:1.35;resize:vertical}
.spmi-akar-table .spmi-akar-readonly{min-width:110px;white-space:normal;line-height:1.4}
.spmi-akar-table .spmi-akar-indikator{min-width:180px}
.spmi-akar-table .spmi-hapus-akar{background:#a92a22;color:#fff;border:0;padding:9px 12px;border-radius:7px}
.spmi-akar-note{font-size:14px;color:#555;margin:12px 0}

/* Tabel refleksi: ringkas dan muat dalam satu layar */
.spmi-table-wrap:has(#tblAkarMasalah){overflow-x:auto;max-width:100%;scrollbar-width:thin;position:relative}
.spmi-akar-table{min-width:0!important;width:100%!important;table-layout:fixed;font-size:clamp(11px,1vw,14px)}
.spmi-akar-table th,.spmi-akar-table td{padding:6px!important;overflow-wrap:anywhere}
.spmi-akar-table th:first-child{width:3.5%}.spmi-akar-table th:last-child{width:10%}
.spmi-akar-table .spmi-akar-readonly{min-width:0!important}.spmi-akar-table .spmi-akar-indikator{min-width:0!important}
.spmi-akar-table textarea{min-width:0!important;min-height:55px!important;padding:6px!important;font-size:inherit!important;resize:vertical}
.spmi-akar-actions{white-space:nowrap;text-align:center}
.spmi-aksi{border:0;border-radius:50%;width:25px;height:25px;padding:0;margin:1px;color:white;font-weight:bold;cursor:pointer;background:#111}
.spmi-plus{background:#20a74b}.spmi-minus{background:#db3348}
@media(max-width:850px){.spmi-akar-table{min-width:850px!important}}

/* Akar Masalah Level 2: tampilan teks bersih seperti Level 1 */
.spmi-akar-table .spmi-akar-clean{vertical-align:top;line-height:1.4}
.spmi-akar-table .spmi-akar-code{display:block;width:100%;text-align:left;background:transparent;color:inherit;border:0;padding:0;font:inherit;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.spmi-akar-table .spmi-akar-code:hover{text-decoration:underline;text-decoration-style:dotted}
.spmi-akar-table .spmi-akar-picker:not([hidden]){display:block;width:100%;max-width:100%;font:inherit;padding:5px;border:1px solid #ff7900;border-radius:5px;background:#fff}
.spmi-akar-table .spmi-akar-picker[hidden],.spmi-akar-table .spmi-akar-code[hidden]{display:none!important}
.spmi-akar-table .spmi-akar-name{display:block;white-space:normal;overflow-wrap:anywhere}

/* Level 2 tampil seperti teks biasa, namun bisa diedit langsung oleh sekolah. */
.spmi-akar-table .spmi-akar-editable{display:block;min-height:2.5em;padding:2px 3px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;cursor:text;border-radius:4px}
.spmi-akar-table .spmi-akar-editable:focus{outline:2px solid #ff7900;background:#fff8ee}
.spmi-akar-table .spmi-akar-editable:empty:focus::before{content:'Ketik di sini';color:#888}

/* Akses cetak sejajar Profil Sekolah */
.spmi-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spmi-print-shortcut{white-space:nowrap}
@media(max-width:760px){.spmi-header-actions{gap:6px}.spmi-print-shortcut{font-size:13px}}

/* Panah satu bentuk, rotasi menunjukkan alur SPMI yang konsisten */
.spmi-flow-grid .spmi-a12,.spmi-flow-grid .spmi-a23{transform:rotate(0deg)}
.spmi-flow-grid .spmi-a34{transform:rotate(90deg)}
.spmi-flow-grid .spmi-a45,.spmi-flow-grid .spmi-a56{transform:rotate(180deg)}
.spmi-flow-grid .spmi-a61{transform:rotate(270deg)}
@media(max-width:760px){.spmi-flow-grid .spmi-flow-arrow{transform:none!important}.spmi-flow-grid .spmi-flow-arrow::after{content:'↓'}}

/* Revisi tampilan tahapan SPMI dan tabel input: 19 Oktober 2026 */
.spmi-stage-heading{font-size:14px;font-weight:800;letter-spacing:.06em;color:#b84c00;margin:10px 0 10px;padding:0 0 8px;border-bottom:2px solid #ffe1c6}
.spmi-newview h2{margin-top:8px}
.spmi-clean-table{width:100%;table-layout:fixed;border-collapse:collapse}
.spmi-clean-table th{background:#343a40;color:#fff;text-align:center;vertical-align:middle;padding:12px 7px}
.spmi-clean-table td{padding:7px 8px;vertical-align:top;overflow-wrap:anywhere}
.spmi-clean-table th:first-child,.spmi-clean-table td:first-child{width:44px;text-align:center}
.spmi-clean-table th:last-child,.spmi-clean-table td:last-child{width:75px;text-align:center}
.spmi-clean-table .spmi-clean-input{display:block;width:100%;box-sizing:border-box;min-width:0;min-height:54px;height:auto;padding:7px 8px;border:1px solid transparent;border-radius:4px;background:transparent;box-shadow:none;font:inherit;line-height:1.35;resize:vertical;overflow:auto}
.spmi-clean-table .spmi-clean-input:hover{border-color:#d5dbe3;background:#fafafa}
.spmi-clean-table .spmi-clean-input:focus{border-color:#ff7900;background:#fff;outline:2px solid #ffecd9}
.spmi-clean-table .spmi-clean-input:placeholder-shown{color:#777}
.spmi-clean-table .spmi-delete{max-width:100%;white-space:normal;padding:8px 5px}
@media(max-width:850px){.spmi-clean-table{min-width:900px}}

/* SISEMUT: sel tabel seperti RKT, tanpa scrollbar maupun tombol resize */
.spmi-clean-table .spmi-clean-cell{display:block;width:100%;height:auto;min-height:28px;padding:5px 3px;overflow:visible;resize:none;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;cursor:text;font:inherit;}
.spmi-clean-table .spmi-clean-cell:focus{background:#fff8eb;outline:1px solid #f59e0b;border-radius:3px;}
.spmi-clean-table .spmi-clean-cell:empty:before{content:attr(data-placeholder);color:#888;}
.spmi-clean-table td{vertical-align:top;padding:10px 8px;}
.spmi-clean-table .spmi-delete{border:0;border-radius:6px;padding:8px 7px;background:#a92d25;color:white;cursor:pointer;}
.spmi-clean-table textarea{resize:none;overflow:hidden;}

.spmi-clean-table .spmi-clean-cell:empty:before{content:none!important}
.spmi-clean-table .spmi-clean-cell{min-height:24px;padding:2px 0;border:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important}
.spmi-clean-table .spmi-clean-cell:focus{outline:1px solid #f59e0b!important;background:#fff9f1!important}
.spmi-clean-table td{padding:12px 10px;vertical-align:top}

/* SPMI: sel tabel langsung dapat diklik seperti tabel Refleksi, tanpa kotak input tersendiri */
.spmi-clean-table td.spmi-clean-cell{display:table-cell!important;min-height:0!important;height:auto!important;padding:12px 10px!important;border:1px solid #dedede!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top;cursor:text}
.spmi-clean-table td.spmi-clean-cell:focus{outline:2px solid #252525!important;outline-offset:-2px;background:#fff!important;border-radius:0!important}
.spmi-clean-table td.spmi-clean-cell:empty:before{content:none!important}

.tahun-spmi-panel{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff6e9;border:1px solid #ffcb93;border-radius:10px;padding:14px 16px;margin:12px 0 4px}.tahun-spmi-panel label{font-weight:700}.tahun-spmi-help{color:#6b7280;font-size:14px;margin:4px 0 20px}

/* Penyeragaman judul dan keterangan tabel SISEMUT */
.spmi-newview > h2, #view-rapor > h3 {font-size:24px;line-height:1.3;margin:12px 0 12px;font-weight:700;}
.spmi-table-description {font-size:16px;line-height:1.55;color:#4b5563;margin:0 0 20px;max-width:1050px;}

/* SISEMUT: sel langsung diedit seperti RKT; tidak ada textarea, spinner, atau handle resize. */
.spmi-clean-table td.spmi-direct-cell {
  padding:12px 10px; vertical-align:top; white-space:pre-wrap; overflow-wrap:anywhere;
  border:1px solid #dedede; background:#fff; min-height:50px; cursor:text;
  line-height:1.4; outline:none;
}
.spmi-clean-table td.spmi-direct-cell[contenteditable="true"]:focus {
  background:#fffaf1; outline:2px solid #ff8500; outline-offset:-2px;
}
.spmi-clean-table td.spmi-direct-cell[data-from-rkt="true"] {cursor:default;}
.spmi-clean-table td.spmi-direct-cell:empty::before {content:"";}

/* Siklus 05 — tabel langsung isi tanpa textarea/scroll di dalam sel */
.evaluasi-table{width:100%;border-collapse:collapse;table-layout:auto}
.evaluasi-table th{background:#343a40!important;color:#fff!important;text-align:center;padding:12px 9px}
.evaluasi-table td{border:1px solid #dedede;padding:12px 10px;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere;min-width:110px}
.evaluasi-table td:first-child{min-width:45px;text-align:center}
.evaluasi-table td.evaluasi-cell[contenteditable="true"]{cursor:text;outline:none}
.evaluasi-table td.evaluasi-cell[contenteditable="true"]:focus{outline:2px solid #f97316;outline-offset:-2px;background:#fffaf5}
.evaluasi-table td[data-source="melaksanakan"]{background:#fafafa}
.evaluasi-delete{background:#a82820;color:white;border:0;border-radius:7px;padding:8px;cursor:pointer}
.spmi-cycle-kicker{font-size:17px;font-weight:800;color:#bc4d00;border-bottom:1px solid #ffd2b2;padding-bottom:10px;margin:14px 0}