/* HIRA Full Input — front-end styles
   Plain, professional white dashboard: stat row, search + status
   filter, table with pill badges, and an outlined "View" action
   that opens a modal with the full form.

   NOTE: colors/backgrounds are forced with !important throughout.
   This widget is often embedded on pages whose active theme applies
   its own global styling to bare tags (table, td, label, etc.) —
   without !important those theme rules can bleed in and produce a
   dark, low-contrast look. Forcing the palette here guarantees the
   dashboard always renders as intended, regardless of the theme. */

.hfi-app {
  --hfi-red: #d0353f;
  --hfi-amber: #a16207;
  --hfi-amber-bg: #fdf1d9;
  --hfi-green: #1f8a4c;
  --hfi-pink: #c23670;
  --hfi-indigo: #4338ca;
  --hfi-border: #e3e4e8;
  --hfi-text: #1f2937;
  --hfi-heading: #111827;
  --hfi-muted: #667085;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--hfi-text) !important;
  background: #ffffff !important;
  padding: 4px;
  border-radius: 12px;
}
.hfi-app, .hfi-app * { box-sizing: border-box; }

/* ---- stat row ---- */
.hfi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hfi-border) !important;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #ffffff !important;
}

.hfi-stat {
  padding: 18px 22px;
  border-right: 1px solid var(--hfi-border) !important;
  background: #ffffff !important;
}
.hfi-stat:last-child { border-right: none !important; }

.hfi-stat-num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hfi-heading) !important;
}
.hfi-stat-open { color: var(--hfi-red) !important; }
.hfi-stat-investigating { color: var(--hfi-amber) !important; }
.hfi-stat-closed { color: var(--hfi-green) !important; }

.hfi-stat-label {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--hfi-muted) !important;
}

@media (max-width: 640px) {
  .hfi-stats { grid-template-columns: repeat(2, 1fr); }
  .hfi-stat:nth-child(2) { border-right: none !important; }
}

/* ---- toolbar ---- */
.hfi-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hfi-search {
  flex: 1;
  min-width: 220px;
  padding: 11px 16px;
  border: 1px solid var(--hfi-border) !important;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #ffffff !important;
  color: var(--hfi-text) !important;
}
.hfi-search::placeholder { color: var(--hfi-muted) !important; opacity: 1; }

.hfi-status-filter {
  padding: 11px 14px;
  border: 1px solid var(--hfi-border) !important;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #ffffff !important;
  color: var(--hfi-text) !important;
}

.hfi-add-btn {
  padding: 11px 18px;
  border: none;
  border-radius: 8px;
  background: var(--hfi-indigo) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.hfi-add-btn:hover { filter: brightness(1.08); }

/* ---- table ---- */
.hfi-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hfi-border) !important;
  border-radius: 10px;
  background: #ffffff !important;
}

table.hfi-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 960px;
  font-size: 0.92rem;
  background: #ffffff !important;
  color: var(--hfi-text) !important;
}

table.hfi-table th {
  text-align: left;
  padding: 13px 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #374151 !important;
  border-bottom: 1px solid var(--hfi-border) !important;
  background: #f8f9fb !important;
  white-space: nowrap;
}

table.hfi-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hfi-border) !important;
  vertical-align: top;
  background: #ffffff !important;
  color: var(--hfi-text) !important;
}

table.hfi-table tbody tr {
  transition: background-color 0.12s ease;
}

table.hfi-table tbody tr:hover td {
  background: #f5f6fa !important;
}

table.hfi-table tbody tr.hfi-row-hidden {
  display: none !important;
}

table.hfi-table tbody tr:last-child td {
  border-bottom: none !important;
}

.hfi-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.hfi-badge-open { background: #fbe4e4 !important; color: var(--hfi-red) !important; }
.hfi-badge-investigating { background: var(--hfi-amber-bg) !important; color: var(--hfi-amber) !important; }
.hfi-badge-closed { background: #e2f4e8 !important; color: var(--hfi-green) !important; }
.hfi-badge-default { background: #eef0f2 !important; color: var(--hfi-muted) !important; }

/* Risk-level badges (Initial Risk Level: Low / Medium / High / Extreme) */
.hfi-badge-risk-low { background: #e2f4e8 !important; color: var(--hfi-green) !important; }
.hfi-badge-risk-medium { background: var(--hfi-amber-bg) !important; color: var(--hfi-amber) !important; }
.hfi-badge-risk-high { background: #fce3d8 !important; color: #c2540f !important; }
.hfi-badge-risk-extreme { background: #fbe4e4 !important; color: var(--hfi-red) !important; }

.hfi-response-text { color: var(--hfi-text) !important; }
.hfi-response-author { color: var(--hfi-muted) !important; font-size: 0.85rem; margin-top: 2px; }

.hfi-view-btn {
  background: #ffffff !important;
  border: 1px solid var(--hfi-pink) !important;
  color: var(--hfi-pink) !important;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}
.hfi-view-btn:hover { background: #fdf0f5 !important; }

.hfi-empty {
  text-align: center;
  color: var(--hfi-muted) !important;
  padding: 30px;
  background: #ffffff !important;
}

.hfi-footer-count {
  color: var(--hfi-muted) !important;
  font-size: 0.9rem;
  margin-top: 14px;
}

/* ---- modal ---- */
.hfi-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55) !important;
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}
.hfi-modal-overlay.is-open { display: flex !important; }

.hfi-modal {
  background: #ffffff !important;
  color: var(--hfi-text) !important;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  padding: 28px 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.hfi-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.hfi-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--hfi-heading) !important;
}

.hfi-modal-close {
  background: none !important;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--hfi-muted) !important;
}
.hfi-modal-close:hover { color: var(--hfi-red) !important; }

.hfi-field { margin-bottom: 14px; }
.hfi-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--hfi-heading) !important;
}
.hfi-field input,
.hfi-field select,
.hfi-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hfi-border) !important;
  font-size: 0.92rem;
  background: #ffffff !important;
  color: var(--hfi-text) !important;
}
.hfi-field input:focus,
.hfi-field select:focus,
.hfi-field textarea:focus {
  outline: none;
  border-color: var(--hfi-indigo) !important;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}
.hfi-field textarea { min-height: 64px; resize: vertical; }

.hfi-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--hfi-border) !important;
  padding-top: 16px;
}

.hfi-submit {
  padding: 11px 22px;
  border: none;
  border-radius: 8px;
  background: var(--hfi-indigo) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.hfi-submit:hover { filter: brightness(1.08); }
.hfi-submit:disabled { opacity: 0.6; cursor: wait; }

.hfi-btn-outline {
  padding: 11px 22px;
  border: 1px solid #c23636 !important;
  border-radius: 8px;
  background: #ffffff !important;
  color: #c23636 !important;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.hfi-btn-outline:hover { background: #fdf0f0 !important; }

.hfi-msg {
  font-size: 0.88rem;
  min-height: 1.1em;
  margin: 6px 0 0;
}
.hfi-msg.is-ok { color: var(--hfi-green) !important; }
.hfi-msg.is-err { color: var(--hfi-red) !important; }

/* ---- Final Action (read-only, dari HIRA Manager) ---- */
.hfi-final-box { background: #eef2ff !important; border: 1px solid #c7d2fe !important; border-radius: 10px; padding: 12px 16px; margin: 6px 0 14px; }
.hfi-final-title { font-weight: 700; color: #3730a3 !important; margin-bottom: 6px; }
.hfi-final-text { white-space: pre-wrap; color: #1f2937 !important; }
.hfi-final-meta { margin-top: 4px; font-size: 0.85rem; color: #667085 !important; }

/* ---- v1.5.0: form sederhana (Job Type, No. HIRA, Date & Time, PDF) ---- */
table.hfi-table { min-width: 640px !important; }
.hfi-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hfi-row2 input { width: 100%; }
.hfi-pdf-link { color: var(--hfi-indigo) !important; font-weight: 600; text-decoration: underline; word-break: break-all; }
.hfi-muted { color: var(--hfi-muted) !important; }
.hfi-file-note { margin-top: 6px; font-size: 0.85rem; color: var(--hfi-muted) !important; }
.hfi-file-note a { color: var(--hfi-indigo) !important; font-weight: 600; }

/* ---- v1.6.0: aksi View / Edit / Delete ---- */
table.hfi-table { min-width: 420px !important; }
.hfi-th-actions { width: 1%; white-space: nowrap; }
.hfi-actions-cell { white-space: nowrap; }
.hfi-actions-cell button { margin-right: 6px; }
.hfi-actions-cell button:last-child { margin-right: 0; }
.hfi-edit-btn { background: #ffffff !important; border: 1px solid var(--hfi-indigo) !important; color: var(--hfi-indigo) !important; border-radius: 8px; padding: 7px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.hfi-edit-btn:hover { background: #eef2ff !important; }
.hfi-del-btn { background: #ffffff !important; border: 1px solid #c23636 !important; color: #c23636 !important; border-radius: 8px; padding: 7px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.hfi-del-btn:hover { background: #fdf0f0 !important; }
.hfi-del-btn:disabled { opacity: .6; cursor: wait; }
#hfi-modal-form.is-view .hfi-submit,
#hfi-modal-form.is-view input[type=file] { display: none !important; }
#hfi-modal-form.is-view input:disabled { background: #f3f4f6 !important; color: #1f2937 !important; -webkit-text-fill-color: #1f2937; }

/* ---- v1.7.0: form HIRA lengkap, tanda tangan, tombol PDF ---- */
.hfi-modal { max-width: 1000px !important; }
.hfi-modal-actions .hfi-spacer { flex: 1; }
.hfi-section-title { font-weight: 700; font-size: 0.95rem; color: var(--hfi-heading) !important; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #4a86d4 !important; }
.hfi-btn-soft { padding: 9px 16px; border: 1px solid var(--hfi-indigo) !important; border-radius: 8px; background: #ffffff !important; color: var(--hfi-indigo) !important; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.hfi-btn-soft:hover { background: #eef2ff !important; }
.hfi-link-del { background: none !important; border: none; color: #c23636 !important; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.hfi-pdf-btn { background: #ffffff !important; border: 1px solid var(--hfi-green) !important; color: var(--hfi-green) !important; border-radius: 8px; padding: 7px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.hfi-pdf-btn:hover { background: #e2f4e8 !important; }
.hfi-pdf-btn:disabled { opacity: .6; cursor: wait; }
table.hfi-table { min-width: 520px !important; }

.hfi-step { border: 1px solid var(--hfi-border) !important; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #fafbfd !important; }
.hfi-step-head { display: flex; align-items: flex-end; gap: 14px; }
.hfi-step-head .hfi-field { flex: 1; margin-bottom: 8px; }
.hfi-item { border: 1px solid var(--hfi-border) !important; border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #ffffff !important; }
.hfi-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hfi-item-no { font-weight: 700; font-size: 0.82rem; color: var(--hfi-muted) !important; }
.hfi-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hfi-item-risk { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap: 10px; align-items: end; }
.hfi-risk-box { margin-bottom: 14px; }
.hfi-risk-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: var(--hfi-heading) !important; }
.hfi-risk-row { display: flex; align-items: center; gap: 6px; }
.hfi-risk-row label { font-size: 0.8rem; font-weight: 700; color: var(--hfi-muted) !important; }
.hfi-risk-row select { width: 62px !important; padding: 8px 6px !important; border: 1px solid var(--hfi-border) !important; border-radius: 8px; background: #ffffff !important; color: var(--hfi-text) !important; }
.hfi-rbadge { display: inline-block; min-width: 40px; text-align: center; padding: 7px 8px; border-radius: 6px; font-weight: 700; border: 1px solid rgba(0,0,0,.25); }

.hfi-sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.hfi-sig { border: 1px solid var(--hfi-border) !important; border-radius: 10px; padding: 12px; background: #ffffff !important; }
.hfi-sig-role { font-weight: 700; margin-bottom: 8px; color: var(--hfi-heading) !important; }
.hfi-sig input[type=text] { width: 100%; padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--hfi-border) !important; border-radius: 8px; background: #ffffff !important; color: var(--hfi-text) !important; }
.hfi-sig-pad { position: relative; border: 1px dashed #9aa3b2 !important; border-radius: 8px; background: #ffffff !important; }
.hfi-sig-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 220; touch-action: none; cursor: crosshair; }
.hfi-sig-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa3b2 !important; font-size: 0.85rem; pointer-events: none; }
.hfi-sig-tools { display: flex; gap: 8px; margin-top: 8px; }
.hfi-sig-tools button, .hfi-sig-upload { padding: 6px 12px; border: 1px solid var(--hfi-border) !important; border-radius: 8px; background: #ffffff !important; color: var(--hfi-text) !important; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.hfi-sig-upload input { display: none; }

#hfi-modal-form.is-view .hfi-edit-only { display: none !important; }
#hfi-modal-form.is-view .hfi-sig-pad canvas { cursor: default; }
#hfi-modal-form.is-view textarea:disabled, #hfi-modal-form.is-view select:disabled { background: #f3f4f6 !important; color: #1f2937 !important; -webkit-text-fill-color: #1f2937; }
#hfi-modal-form.is-view .hfi-sig-hint { display: none !important; }

@media (max-width: 820px) {
  .hfi-item-grid, .hfi-item-risk, .hfi-sig-grid { grid-template-columns: 1fr; }
}


/* v1.8.0: Status (dropdown di tabel) */
.hfi-status-cell { white-space: nowrap; }
table.hfi-table select.hfi-status-sel { padding: 6px 28px 6px 12px !important; border-radius: 999px !important; border: 1px solid #cbd5e1 !important; background-color: #ffffff !important; color: #1f2937 !important; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
table.hfi-table select.hfi-status-sel[data-status="Open"] { background-color: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }
table.hfi-table select.hfi-status-sel[data-status="Investigating"] { background-color: #fef3c7 !important; border-color: #fcd34d !important; color: #92400e !important; }
table.hfi-table select.hfi-status-sel[data-status="Closed"] { background-color: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }

/* v1.8.1: tombol hapus pada datepicker Due Date */
.hfi-fp-clear { display:block; width:100%; border:0; border-top:1px solid #e6e6e6; background:#f7f7f7; padding:8px; font-size:13px; cursor:pointer; }
.hfi-fp-clear:hover { background:#eee; }