/* ============================================================================
   style.css — Portal Pengurus (siapii.sigitadi.id)
   Tema "Amanah Modern Enterprise": Emerald + Gold + Plus Jakarta Sans.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Sidebar ---- */
.sidebar { transition: transform .25s ease, width .25s ease; }
.nav-item { transition: background .15s ease, color .15s ease; }
.nav-item.active {
  background: #047857; color: #fff; font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(4,120,87,.6);
}
.nav-item.active svg { color: #FCD34D; }
.nav-item:not(.active):hover { background: #D1FAE5; color: #022C22; }

/* ---- Kartu & tombol ---- */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 12px 32px -12px rgba(4,120,87,.22); }
.btn { transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: scale(.97); }
.btn-primary { background: #047857; color: #fff; }
.btn-primary:hover { background: #065F46; box-shadow: 0 10px 22px -10px rgba(4,120,87,.7); }
.btn-gold { background: #F59E0B; color: #022C22; }
.btn-gold:hover { background: #D97706; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn-ghost { background: transparent; color: #047857; border: 1.5px solid #A7F3D0; }
.btn-ghost:hover { background: #D1FAE5; }

/* ---- Badge status ---- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 9999px; white-space: nowrap;
}
.badge-DRAFT, .badge-DIAJUKAN     { background: #E5E7EB; color: #4B5563; }
.badge-PENDING_APPROVAL, .badge-PENDING,
.badge-VERIFIED_BY_BENDAHARA,
.badge-VERIFIED_BY_KETUM          { background: #FEF3C7; color: #B45309; }
.badge-PUBLISHED, .badge-APPROVED,
.badge-DISETUJUI                  { background: #D1FAE5; color: #047857; }
.badge-REJECTED, .badge-DITOLAK   { background: #FEE2E2; color: #B91C1C; }

/* ---- Tabel ---- */
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; }
.tbl th {
  background: #F0FDF4; color: #022C22; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
  text-align: left; padding: .7rem .85rem; border-bottom: 2px solid #A7F3D0;
  white-space: nowrap;
}
.tbl td { padding: .7rem .85rem; border-bottom: 1px solid #ECFDF5; font-size: .875rem; }
.tbl tbody tr:hover { background: #F7FAF7; }

/* ---- Form ---- */
.field {
  width: 100%; padding: .65rem .85rem; border-radius: .75rem;
  border: 1.5px solid #D1D5DB; outline: none; transition: border-color .15s, box-shadow .15s;
  font-size: .9rem; background: #fff;
}
.field:focus { border-color: #047857; box-shadow: 0 0 0 3px rgba(4,120,87,.15); }
label.lbl { display: block; font-size: .78rem; font-weight: 700; color: #374151; margin-bottom: .35rem; }

/* ---- Modal ---- */
.modal-backdrop { background: rgba(2,44,34,.55); backdrop-filter: blur(3px); }
.modal-panel { animation: pop .18s ease both; }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Toast ---- */
.toast { animation: slideIn .25s ease both; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Scrollbar & seleksi ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #A7F3D0; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: #A7F3D0; color: #022C22; }

/* ---- Util ---- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Responsive Card-Feed View on Mobile (<640px) ---- */
@media (max-width: 640px) {
  .tbl-responsive thead { display: none; }
  .tbl-responsive, 
  .tbl-responsive tbody, 
  .tbl-responsive tr, 
  .tbl-responsive td {
    display: block;
    width: 100%;
  }
  .tbl-responsive tr {
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    transition: all .2s ease;
  }
  .tbl-responsive tr:hover {
    border-color: #A7F3D0;
    box-shadow: 0 8px 20px -4px rgba(4, 120, 87, 0.12);
  }
  .tbl-responsive tr:has(td[colspan]),
  .tbl-responsive tr.tbl-empty {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .tbl-responsive tr:has(td[colspan]) td,
  .tbl-responsive tr.tbl-empty td {
    padding: 2rem 0;
    text-align: center;
    border: none;
  }
  .tbl-responsive td {
    padding: 0.25rem 0;
    border-bottom: none;
  }
  .tbl-responsive td.tbl-actions,
  .tbl-responsive td:has([data-act]),
  .tbl-responsive td:has(button) {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #E5E7EB;
  }
  .tbl-responsive td.tbl-actions .flex,
  .tbl-responsive td:has([data-act]) .flex,
  .tbl-responsive td:has(button) .flex {
    width: 100%;
    justify-content: flex-end;
  }
  .tbl-responsive td.tbl-actions button,
  .tbl-responsive td:has([data-act]) button,
  .tbl-responsive td:has(button) button {
    flex: 1 1 auto;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ---- Kertas Virtual A4 (Paper Replica) ---- */
.paper-a4 {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  font-family: 'Times New Roman', Times, serif;
}
.hr-double-top {
  border-top: 2.5px solid #000;
  margin-top: 4px;
}
.hr-double-bottom {
  border-top: 1px solid #000;
  margin-top: 2px;
  margin-bottom: 14px;
}

.paper-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: system-ui, -apple-system, sans-serif;
  z-index: 10;
}
.paper-watermark-DRAFT {
  color: #9CA3AF;
  opacity: 0.14;
}
.paper-watermark-PENDING_APPROVAL {
  color: #D97706;
  opacity: 0.16;
}
.paper-watermark-REJECTED {
  color: #DC2626;
  opacity: 0.18;
}

.stempel-basah {
  position: absolute;
  width: 105px;
  height: 105px;
  top: -24px;
  left: -20px;
  opacity: 0.88;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  filter: contrast(1.15) saturate(1.2);
  z-index: 5;
}

@media print {
  body * {
    visibility: hidden;
  }
  #printPaperArea, #printPaperArea * {
    visibility: visible;
  }
  #printPaperArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.5in !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .modal-backdrop, .modal-panel, #modalRoot {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .no-print {
    display: none !important;
  }
}