/* ═══════════════════════════════════════════════════
   SAFR PROJECT — VIEWS
   Berisi: CSS spesifik per halaman/fitur:
           Pipeline Kanban, List Table, Alumni,
           Kloter Cards, Jamaah, Mini Table
   ═══════════════════════════════════════════════════ */

/* ── LIST TABLE VIEW ── */
.list-wrap{flex:1;overflow-y:auto;padding:14px 20px}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{padding:7px 10px;text-align:left;font-size:9px;font-weight:700;color:var(--w4);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--black);position:sticky;top:0;z-index:1}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--w2);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--w5)}
.td-kode{font-family:var(--fh);color:var(--orange);font-size:11px}
.td-nama{font-weight:600}
.td-action-btns{display:flex;gap:4px}

/* ── PIPELINE PANEL ── */
.pipeline-wrap{flex:1;overflow-x:auto;overflow-y:hidden;padding:14px 20px;min-height:0}
.pipeline{display:flex;gap:10px;height:100%;min-width:900px}
.pipeline-col{flex:1;min-width:180px;max-width:240px;display:flex;flex-direction:column;min-height:0}
.pipeline-col-header{
  padding:7px 10px;border-radius:var(--r);margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.col-hd-left{display:flex;align-items:center;gap:6px}
.col-hd-title{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase}
.col-hd-count{font-family:var(--fh);font-size:14px;font-weight:800}

/* Warna header per stage */
.col-inquiry{background:var(--blue-dim);color:var(--blue)}
.col-nurturing{background:var(--amber-dim);color:var(--amber)}
.col-konsultasi{background:var(--green-dim);color:var(--green)}
.col-proposal{background:var(--purple-dim);color:var(--purple)}
.col-pricing{background:var(--teal-dim);color:var(--teal)}
.col-closing_won{background:var(--orange-dim);color:var(--orange)}

.pipeline-cards{flex:1;overflow-y:auto;padding-bottom:10px;min-height:0}

/* Lead card */
.lead-card{
  background:var(--black3);border:1px solid var(--border);border-radius:var(--r);
  padding:10px;margin-bottom:6px;cursor:pointer;transition:all 0.15s;
  position:relative;
}
.lead-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.lead-card.closing_won{border-color:rgba(232,89,60,0.3);background:rgba(232,89,60,0.05)}
.lead-card.card-rejected{border-color:rgba(229,85,85,0.5);background:rgba(229,85,85,0.04)}
.lc-rejected-badge{font-size:10px;font-weight:700;color:#e55;background:rgba(229,85,85,0.12);border:1px solid rgba(229,85,85,0.3);border-radius:4px;padding:2px 6px;margin-bottom:4px;display:inline-block}
.lead-card.dragging{opacity:0.5;transform:rotate(2deg)}
.lc-kode{font-size:9px;color:var(--orange);font-family:var(--fh);font-weight:700;letter-spacing:0.5px;margin-bottom:3px}
.lc-nama{font-size:12px;font-weight:600;color:var(--white);line-height:1.2}
.lc-detail{font-size:10px;color:var(--w4);margin-top:2px}
.lc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.lc-actions{display:flex;gap:4px;opacity:0;transition:opacity 0.15s;position:absolute;top:8px;right:8px;white-space:nowrap}
.lead-card:hover .lc-actions{opacity:1}
.lc-btn{background:var(--black5);border:1px solid var(--border);border-radius:5px;color:var(--w3);cursor:pointer;font-size:10px;padding:2px 6px;transition:all 0.12s;font-family:var(--fd)}
.lc-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.lc-btn.del:hover{background:var(--red);border-color:var(--red)}

/* Drop zone highlight saat drag */
.pipeline-cards.drag-over{
  background:var(--orange-dim);border:2px dashed var(--orange);border-radius:var(--r);
}

/* ── KLOTER VIEW ── */
.kloter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;padding:14px 20px}
.kloter-card{background:var(--black3);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;cursor:pointer;transition:all 0.15s;position:relative;overflow:hidden}
.kloter-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.kloter-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kloter-card.status-open::before{background:var(--green)}
.kloter-card.status-full::before{background:var(--amber)}
.kloter-card.status-closed::before{background:var(--red)}
.kloter-card.status-berangkat::before{background:var(--blue)}
.kc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.kc-kode{font-family:var(--fh);font-size:10px;color:var(--orange);font-weight:700;letter-spacing:0.5px}
.kc-nama{font-size:14px;font-weight:700;color:var(--white);margin:3px 0}
.kc-maskapai{font-size:11px;color:var(--w4)}
.kc-meta{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.kc-meta-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--w3)}
.kc-progress-wrap{margin-top:10px}
.kc-progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--w4);margin-bottom:4px}
.kc-progress-bar{height:5px;background:var(--black5);border-radius:3px;overflow:hidden}
.kc-progress-fill{height:100%;border-radius:3px}
.kc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.kc-actions{display:flex;gap:4px;opacity:0;transition:opacity 0.15s;position:absolute;top:12px;right:12px}
.kloter-card:hover .kc-actions{opacity:1}

/* Progress bar warna */
.prog-green{background:var(--green)}
.prog-amber{background:var(--amber)}
.prog-red{background:var(--red)}

/* ── JAMAAH VIEW ── */
.jamaah-filter-row{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--black);flex-wrap:wrap}

/* Progress bar pembayaran */
.bayar-bar{height:4px;background:var(--black5);border-radius:2px;margin-top:3px;overflow:hidden}
.bayar-fill{height:100%;background:var(--green);border-radius:2px}

/* ── MINI TABLE (di dalam modal kloter detail) ── */
.mini-table{width:100%;border-collapse:collapse;font-size:11px}
.mini-table th{padding:5px 8px;text-align:left;font-size:9px;font-weight:700;color:var(--w4);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border)}
.mini-table td{padding:7px 8px;border-bottom:1px solid var(--border);color:var(--w2)}
.mini-table tr:last-child td{border-bottom:none}
.mini-table tr:hover td{background:var(--w5)}

/* ── APPROVAL STATUS BADGE (kartu kanban stage pricing) ── */
.lc-approval-badge{font-size:10px;font-weight:700;border-radius:4px;padding:2px 6px;margin-bottom:4px;display:block;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-approval-pending{color:#f59e0b;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3)}
.lc-approval-rejected{color:#e55;background:rgba(229,85,85,0.12);border:1px solid rgba(229,85,85,0.3)}
.lc-approval-approved{color:var(--green);background:var(--green-dim);border:1px solid rgba(74,222,128,0.3)}
.card-approval-pending{border-color:rgba(245,158,11,0.4)!important;background:rgba(245,158,11,0.03)!important}
.card-approval-approved{border-color:rgba(74,222,128,0.35)!important;background:rgba(74,222,128,0.03)!important}

/* ════════════════════════════════════════
   VIEW: DAFTAR USER
   ════════════════════════════════════════ */

/* Row nonaktif di tabel */
#user-table tr.row-nonaktif td {
  opacity: 0.45;
}
#user-table tr.row-nonaktif:hover td {
  opacity: 0.75;
}

/* Tombol aksi di dalam tabel user */
.action-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Dot pemilih warna avatar di modal */
.avatar-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.avatar-color-dot:hover {
  transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════
   ROLES VIEW
   ═══════════════════════════════════════════════════ */

/* Grid kartu role */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Kartu role */
.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.role-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.role-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #fff;
}
.role-card-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.role-card-info { flex: 1; min-width: 0; }
.role-card-nama { font-weight: 600; font-size: 14px; }
.role-card-kode { font-size: 11px; opacity: .75; font-family: monospace; }

.role-badge-sys, .role-badge-custom {
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  background: rgba(255,255,255,.25);
  color: #fff;
  flex-shrink: 0;
}

.role-card-body { padding: 14px 16px; }
.role-card-desc {
  font-size: 12px;
  color: var(--w4);
  min-height: 36px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.role-card-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.role-stat {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
}
.role-stat:last-child { border-right: none; }
.role-stat-val  { font-size: 18px; font-weight: 700; line-height: 1; }
.role-stat-lbl  { font-size: 10px; color: var(--w4); margin-top: 3px; }

.role-card-actions {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ── Permission Matrix Table ── */
.perm-matrix-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  min-width: 100%;
}
.perm-matrix-table th {
  background: var(--surface);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  color: var(--w4);
  position: sticky;
  top: 0;
  z-index: 2;
}
.perm-matrix-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.perm-matrix-table tbody tr:hover td { background: var(--w1); }

.perm-grup-header {
  background: var(--w1) !important;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .8px;
  color: var(--w4);
  padding: 6px 10px !important;
  text-transform: uppercase;
}
.perm-modul-cell {
  font-weight: 500;
  padding-left: 16px !important;
}

/* ── Permission Form di Modal ── */
.perm-grup-title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--w4);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.perm-grup-title:first-child { padding-top: 0; }

.perm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.perm-row:last-child { border-bottom: none; }
.perm-row-label {
  flex: 1;
  font-size: 13px;
}
.perm-row-checks {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.perm-check-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--w4);
  cursor: pointer;
  user-select: none;
}
.perm-check-label input { cursor: pointer; width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════
   PERMISSIONS VIEW — Matrix Hak Akses
   ═══════════════════════════════════════════════════ */

/* ── Summary bar: grid container — setiap kartu dapat
   kolom minimal terjamin, otomatis pindah baris bila
   layar sempit. Tidak akan pernah overflow/terpotong. ── */
.perm-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.perm-summary-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: var(--black3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 0;
}
.perm-sum-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 150px;
  min-width: 0;
}
.perm-sum-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.perm-sum-nama {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.perm-sum-bar {
  flex: 1 1 40px;
  height: 4px;
  background: var(--w5);
  border-radius: 2px;
  overflow: hidden;
  min-width: 30px;
}
.perm-sum-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}
.perm-sum-pct {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.perm-sum-pct span { font-weight: 400; color: var(--w4); }
.perm-sum-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.perm-sum-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--w3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--fd);
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}
.perm-sum-action-btn:hover { background: var(--w5); color: var(--white); border-color: var(--w5); }
.perm-sum-action-btn.is-danger:hover { background: rgba(248,113,113,.12); color: #f87171; border-color: rgba(248,113,113,.4); }

/* ── Legend bar: ikon-ikon tetap satu baris, catatan bantuan
   boleh pindah baris sendiri bila ruang sempit — tidak terpotong. ── */
.perm-legend-bar {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  flex-shrink: 0;
  background: var(--black2);
}
.perm-legend-title { flex-shrink: 0; }
.perm-legend-icons {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--w3);
  flex-shrink: 0;
}
.perm-legend-note {
  font-size: 10px;
  color: var(--w4);
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
}


/* ── Matrix Table ── */
.perm-matrix-tbl {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}
.perm-matrix-tbl th,
.perm-matrix-tbl td {
  padding: 0;
}

/* Role header */
.perm-role-header {
  background: var(--black3);
  padding: 10px 8px !important;
  text-align: center;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
}
.perm-role-hname {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Sub-header row (icons) */
.perm-sub-row th {
  background: var(--black3);
  padding: 6px 10px !important;
  text-align: center;
  border-bottom: 2px solid var(--border);
  color: var(--w4);
  font-size: 10px;
  position: sticky;
  top: 36px;
  z-index: 3;
  white-space: nowrap;
}
.perm-col-sub { width: 42px !important; min-width: 42px; }

/* Modul header */
.perm-modul-hdr {
  background: var(--black3) !important;
  padding: 10px 12px !important;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--w4);
  min-width: 200px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
}

/* Grup row */
.perm-grup-lbl {
  background: var(--black2) !important;
  padding: 6px 12px !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--w4);
  border-top: 2px solid var(--border);
}

/* Modul row */
.perm-mod-row {
  transition: background .1s;
}
.perm-mod-row:hover td { background: rgba(255,255,255,.03); }
.perm-mod-row.perm-mod-inactive { opacity: .5; }

.perm-modul-lbl {
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: sticky;
  left: 0;
  background: var(--black);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}
.perm-mod-row:hover .perm-modul-lbl { background: var(--black2); }

.perm-mod-ikon { font-size: 14px; flex-shrink: 0; }
.perm-mod-info { flex: 1; min-width: 0; }
.perm-mod-nama { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-mod-kode { font-size: 10px; color: var(--w4); font-family: monospace; }
.perm-mod-actions { display: none; }
.perm-mod-row:hover .perm-mod-actions { display: flex; }
.perm-mod-btn { padding: 2px 5px !important; }

/* Cells */
.perm-cell {
  text-align: center;
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--border);
  width: 42px;
}

/* Toggle checkbox custom */
.perm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  cursor: pointer;
  border-radius: 5px;
  transition: background .1s;
  position: relative;
}
.perm-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.perm-toggle-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border2);
  border-radius: 4px;
  background: transparent;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.perm-toggle input:checked ~ .perm-toggle-box {
  background: var(--green-dim);
  border-color: var(--green);
}
.perm-toggle input:checked ~ .perm-toggle-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid var(--green);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.perm-toggle:hover .perm-toggle-box {
  border-color: var(--orange);
  background: var(--orange-dim);
}

/* Saving / saved flash states */
.perm-toggle.perm-saving .perm-toggle-box {
  border-color: var(--amber) !important;
  animation: perm-pulse .5s infinite alternate;
}
.perm-toggle.perm-saved .perm-toggle-box {
  border-color: var(--green) !important;
  background: var(--green-dim) !important;
}
@keyframes perm-pulse {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   KONTRAK-APPROVAL — View/layout halaman persetujuan
   Body class: .kontrak-approval-page
   ══════════════════════════════════════════════════════════════ */

/* Reset layout utama untuk halaman standalone (tanpa sidebar) */
.kontrak-approval-page{
  overflow-y:auto;overflow-x:hidden;
  background:var(--black2);
  min-height:100vh;
}

/* Container utama dokumen */
.kap-container{
  max-width:680px;margin:0 auto;
  padding:24px 16px 48px;
}

/* ── Brand header ───────────────────────────────────────────── */
.kap-brand-header{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;margin-bottom:20px;
  background:var(--black3);border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.kap-brand-logo-wrap{flex-shrink:0}
.kap-brand-logo{display:block;height:32px;width:auto;object-fit:contain}
.kap-brand-logo-fallback{
  font-family:var(--fh);font-size:15px;font-weight:800;
  letter-spacing:2px;color:var(--white);
}
.kap-brand-fallback-s{color:var(--orange)}
.kap-brand-divider{
  width:1px;height:28px;background:var(--border2);flex-shrink:0;
}
.kap-brand-sub{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--w3);font-weight:500;
}
.kap-brand-sub-icon{font-size:14px}

/* ── Doc title block ────────────────────────────────────────── */
.kap-doc-title-block{
  text-align:center;padding:28px 20px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--black3),var(--black4));
  border:1px solid var(--border);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
}
.kap-doc-title-block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--orange),#f0997b,var(--orange));
}
.kap-doc-no{
  font-family:monospace;font-size:11px;letter-spacing:1.5px;
  color:var(--orange);background:var(--orange-dim);
  border:1px solid rgba(232,89,60,0.25);
  display:inline-block;padding:3px 12px;border-radius:20px;
  margin-bottom:12px;
}
.kap-doc-main-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(22px,5vw,30px);font-weight:800;
  color:var(--white);line-height:1.2;margin-bottom:8px;
}
.kap-doc-subtitle{
  font-size:12px;color:var(--w4);
}
.kap-doc-subtitle time{color:var(--w3);font-weight:500}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media(max-width:600px){
  .kap-container{padding:16px 12px 40px}
  .kap-brand-header{padding:12px 14px;gap:10px}
  .kap-card-body{padding:14px}
  .kap-card-header{padding:12px 14px}
  .kap-paket-highlight{flex-direction:column;align-items:flex-start}
  .kap-harga-wrap{text-align:left}
}

/* ── Laporan Keuangan ──────────────────────────── */
.laporan-kloter-card {
  background: var(--black3);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 16px;
  transition: border-color .15s, transform .15s;
}
.laporan-kloter-card:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
}