:root{
  --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#22d3ee; --border:#1f2937;
}
*{box-sizing:border-box;font-family:system-ui, Segoe UI, Roboto, Arial}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1021,#0f172a);color:var(--text)}

.container{max-width:960px;margin:32px auto;padding:24px;background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:960px){.container{margin:24px 16px;padding:20px}}

h1,h2,h3{margin:0 0 12px}
p{margin:0 0 12px}
a{color:#7dd3fc;text-underline-offset:2px}

label{display:block;margin:12px 0 6px;color:var(--muted)}
input,select,button{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:#0b1220;color:#fff;font-size:16px
}
input[readonly]{cursor:text}

.row{display:flex;gap:12px}
.col{flex:1}
@media (max-width:640px){.row{flex-direction:column}}

.help{color:var(--muted);font-size:.9rem}
.notice{padding:10px;border:1px dashed var(--border);border-radius:10px;background:#0b1220;color:#cbd5e1}

button{
  margin-top:16px;padding:12px 18px;border:0;border-radius:12px;
  background:var(--accent);color:#003042;font-weight:700;cursor:pointer
}

.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--border);display:inline-block;text-decoration:none}
.btn:hover{background:#0b1220}
.btn.small{font-size:.9rem;padding:6px 10px}

/* Input + Button group */
.input-group{display:flex;gap:8px;align-items:stretch}
.input-group input{flex:1}
@media (max-width:640px){.input-group{flex-direction:column}}

/* Images */
img{max-width:100%;height:auto;border-radius:10px}

/* Table */
.table-responsive{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
th{text-align:left;color:#cbd5e1;font-weight:700}
td.num{text-align:right}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:.5rem;font-size:.75rem;background:#1f2937;color:#e5e7eb}
.badge.red{background:#7f1d1d}
.badge.green{background:#065f46}
.muted{opacity:.6;text-decoration:line-through}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#374151;transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;transition:.2s;border-radius:50%}
input:checked + .slider{background:#10b981}
input:checked + .slider:before{transform:translateX(18px)}

/* Card-mode table on small screens */
@media (max-width:768px){
  table.table-card, .table-card thead, .table-card tbody, .table-card th, .table-card td, .table-card tr{display:block}
  .table-card thead{position:absolute;top:-9999px;left:-9999px}
  .table-card tr{margin-bottom:12px;background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:10px}
  .table-card td{border:none;display:flex;justify-content:space-between;gap:12px;padding:8px 10px}
  .table-card td::before{content:attr(data-label);flex:0 0 42%;color:var(--muted);font-weight:600}
  .table-card td a{word-break:break-all}
}

/* Toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#10b981;color:#052e2b;padding:10px 14px;border-radius:10px;display:none;z-index:9999}

/* Print (untuk halaman hasil/QR) */
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .container{box-shadow:none;background:#fff;color:#000}
}



/* === Icon buttons for Aksi column === */
.actions{display:flex;gap:8px;flex-wrap:wrap}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--border);
  border-radius:10px;background:transparent;color:#e5e7eb;cursor:pointer;
}
.icon-btn:hover{background:#0b1220}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.icon-btn.danger{border-color:#7f1d1d;color:#fecaca}
.icon-btn.active{background:#0b1220;border-color:#10b981;color:#a7f3d0}


/* Pendekin kolom Target di desktop */
.col-target{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1200px){
  .col-target{ max-width: 300px; }
}
/* Di mobile (card-mode), biarkan teks membungkus normal */
@media (max-width: 768px){
  .table-card .col-target{
    max-width: none;
    white-space: normal;
  }
}

/* Kontras ikon di dark mode */
.icon-btn{ color:#e5e7eb; }                       /* default terang */
.icon-btn:hover{ color:#ffffff; }

/* Spesifik: tombol copy */
.icon-btn.copy-btn{ color:#93c5fd; }              /* biru muda */
.icon-btn.copy-btn:hover{ color:#bfdbfe; }

/* Spesifik: toggle icon */
.icon-btn.toggle-icon-btn{ color:#34d399; }       /* hijau terang */
.icon-btn.toggle-icon-btn.active{
  color:#a7f3d0;                                  /* hijau muda saat aktif */
  background: rgba(16,185,129,.12);
  border-color:#10b981;
}

/* Perbaiki kontras switch slider */
.slider{ background:#334155; border:1px solid #475569; }
input:checked + .slider{
  background:#10b981; border-color:#10b981;
}


/* Pastikan ikon SVG terlihat jelas di dark mode */


/* Warna khusus untuk tombol Copy & Toggle agar kontras */
.icon-btn.copy-btn{ color:#93c5fd; }
.icon-btn.copy-btn:hover{ color:#bfdbfe; }
.icon-btn.toggle-icon-btn{ color:#34d399; }
.icon-btn.toggle-icon-btn.active{
  color:#a7f3d0; background: rgba(16,185,129,.12); border-color:#10b981;
}


/* Icon helpers */
.icon-stroke * {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-fill * {
  fill: currentColor;
  stroke: none;
}

/* Warna copy icon biar kontras di dark */
.icon-btn.copy-btn { color:#60a5fa; }        /* biru */
.icon-btn.copy-btn:hover { color:#93c5fd; }



/* Tombol teks kecil */
.txt-btn{
  display:inline-block;
  font-size:.78rem;
  line-height:1;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:#e5e7eb;
  cursor:pointer;
}
.txt-btn:hover{ background:#0b1220; }
.txt-btn.blue{ color:#93c5fd; border-color:#334155; }
.txt-btn.blue:hover{ color:#bfdbfe; }


/* Toolbar di atas tabel */
.toolbar{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:12px;
}

/* Tombol aksen utama */
.btn.accent{
  background: var(--accent);
  color:#003042;
  font-weight:700;
  border-color: transparent;
}
.btn.accent:hover{
  filter: brightness(1.05);
  background: var(--accent);
}


/* --- PATCH: perbaiki input-group agar tidak sempit --- */
.input-group { display:flex; gap:8px; align-items:stretch; }
.input-group input { flex:1 1 auto; min-width:0; }   /* biar bisa menyusut */
.input-group .btn { flex:0 0 auto; width:auto; }     /* override rule global width:100% */

/* Di mobile, biar stack dan tombol full-width lagi */
@media (max-width: 640px){
  .input-group { flex-direction:column; }
  .input-group .btn { width:100%; }
}


/* Paksa baris menjadi vertikal */
.row.stack { flex-direction: column; }