/* =========================================================
   TANGGAL PENTING (WHITE, subtle, professional)
   Scoped: #tanggal_penting
   File: public/assets/css/tanggal-penting.css
   ========================================================= */

#tanggal_penting{
  /* scoped tokens (tidak ganggu :root AKP) */
  --tp-text: #0b1b3a;
  --tp-muted: rgba(11,27,58,.70);
  --tp-border: rgba(11,27,58,.10);
  --tp-shadow: 0 18px 45px rgba(11,27,58,.10);
  --tp-blue: #0a3d8f;
  --tp-blue-2: #1e66d0;
  --tp-cyan: #0ea5e9;
  --tp-bg-soft: rgba(14,165,233,.06);
}

#tanggal_penting.tp-wrap{
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

/* subtle background canvas (VERY LOW) */
#tanggal_penting .tp-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity: .25; /* tidak dominan */
}
#tanggal_penting #tpCanvas{
  width:100%;
  height:100%;
  display:block;
}

/* keep content above bg */
#tanggal_penting .container{
  position: relative;
  z-index: 1;
}

#tanggal_penting .tp-head h2{
  margin-bottom: 10px;
}
#tanggal_penting .tp-head p{
  color: var(--tp-muted);
  margin: 0 auto 22px;
  max-width: 72ch;
}

/* card */
#tanggal_penting .tp-card{
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  box-shadow: var(--tp-shadow);
  overflow: hidden;
}

/* top bar */
#tanggal_penting .tp-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tp-border);
  background:
    linear-gradient(90deg, rgba(14,165,233,.08), rgba(30,102,208,.05), rgba(255,255,255,0));
}

#tanggal_penting .tp-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color: var(--tp-text);
}
#tanggal_penting .tp-card-title i{
  color: var(--tp-blue-2);
  font-size: 16px;
}

#tanggal_penting .tp-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#tanggal_penting .tp-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,58,.12);
  background: rgba(11,27,58,.03);
  color: rgba(11,27,58,.75);
}
#tanggal_penting .tp-pill-dot{
  width:8px;height:8px;border-radius:50%;
  background: rgba(11,27,58,.35);
}
#tanggal_penting .tp-pill--soon{
  border-color: rgba(14,165,233,.25);
  background: rgba(14,165,233,.08);
}
#tanggal_penting .tp-pill--soon .tp-pill-dot{ background: var(--tp-cyan); }

#tanggal_penting .tp-pill--future{
  border-color: rgba(30,102,208,.22);
  background: rgba(30,102,208,.06);
}
#tanggal_penting .tp-pill--future .tp-pill-dot{ background: var(--tp-blue-2); }

/* table */
#tanggal_penting .tp-table-wrap{
  overflow:auto;
}
#tanggal_penting .tp-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  min-width: 860px; /* rapi desktop; auto scroll di mobile */
  margin:0;
}

#tanggal_penting .tp-table thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(11,27,58,.70);
  padding: 12px 18px;
  background: #f7f9fc;
  border-bottom: 1px solid var(--tp-border);
  position: sticky;
  top: 0;
  z-index: 2;
}

#tanggal_penting .tp-table tbody td{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(11,27,58,.08);
  vertical-align: top;
  color: var(--tp-text);
}

#tanggal_penting .tp-row{
  transition: background .18s ease, transform .18s ease;
}
#tanggal_penting .tp-row:hover{
  background: var(--tp-bg-soft);
  transform: translateY(-1px);
}

#tanggal_penting .tp-date-main{
  font-weight: 900;
  color: var(--tp-text);
}
#tanggal_penting .tp-date-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--tp-muted);
}

#tanggal_penting .tp-agenda-title{
  font-weight: 900;
}
#tanggal_penting .tp-agenda-desc{
  margin-top: 6px;
  font-size: 13px;
  color: var(--tp-muted);
  max-width: 75ch;
}

/* tags */
#tanggal_penting .tp-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(11,27,58,.12);
  background: rgba(11,27,58,.03);
  white-space: nowrap;
}
#tanggal_penting .tp-tag--soon{
  border-color: rgba(14,165,233,.28);
  background: rgba(14,165,233,.10);
  color: #075985;
}
#tanggal_penting .tp-tag--future{
  border-color: rgba(30,102,208,.22);
  background: rgba(30,102,208,.08);
  color: #0a3d8f;
}

/* footer note */
#tanggal_penting .tp-foot{
  padding: 12px 18px;
  background: #fff;
}
#tanggal_penting .tp-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: var(--tp-muted);
  font-size: 13px;
}
#tanggal_penting .tp-note i{
  color: var(--tp-blue-2);
  margin-top: 2px;
}

/* responsive */
@media (max-width: 768px){
  #tanggal_penting .tp-card-top{
    flex-direction: column;
    align-items: flex-start;
  }
}