/* Custom styles supplementing Tailwind */
html { scroll-behavior: smooth; }

/* =============== WIZARD =============== */
.wizard-step.hidden { display: none; }

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.wizard-steps::-webkit-scrollbar { height: 4px; }
.wizard-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem 0.2rem;
  background: transparent;
  border: 0;
  cursor: default;
  transition: color 0.2s ease;
}
.wizard-step-item.clickable { cursor: pointer; }
.wizard-step-num {
  width: 1.9rem; height: 1.9rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgb(241 245 249);
  color: rgb(100 116 139);
  border: 2px solid rgb(226 232 240);
  transition: all 0.25s ease;
}
.wizard-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(100 116 139);
  white-space: nowrap;
  transition: color 0.2s ease;
}
/* Active */
.wizard-step-item.is-active .wizard-step-num {
  background: linear-gradient(135deg, rgb(20 184 166), rgb(13 148 136));
  color: white;
  border-color: rgb(94 234 212);
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
}
.wizard-step-item.is-active .wizard-step-label {
  color: rgb(15 118 110);
}
/* Done */
.wizard-step-item.is-done .wizard-step-num {
  background: rgb(5 150 105);
  color: white;
  border-color: rgb(5 150 105);
}
.wizard-step-item.is-done .wizard-step-label {
  color: rgb(4 120 87);
}
.wizard-step-item.is-done .wizard-step-num::after {
  content: '';
  display: block;
  width: 0.7rem; height: 0.7rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='3' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.wizard-step-item.is-done .wizard-step-num > * { display: none; }
.wizard-step-item.is-done .wizard-step-num { position: relative; font-size: 0; }

.wizard-line {
  flex: 1;
  height: 2px;
  background: rgb(226 232 240);
  min-width: 1rem;
  margin-bottom: 1.2rem;
  transition: background 0.3s ease;
}
.wizard-line.is-done { background: rgb(5 150 105); }

@media (max-width: 640px) {
  .wizard-step-label { display: none; }
  .wizard-step-item.is-active .wizard-step-label { display: inline; }
}

/* =============== LAMAR FORM =============== */
.form-section {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}
.form-section-head {
  display: flex; align-items: flex-start; gap: 0.9rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(241 245 249);
}
.form-section-num {
  width: 2rem; height: 2rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgb(94 234 212), rgb(13 148 136));
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex-shrink: 0;
}
.form-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(15 23 42);
  font-size: 1.1rem;
}
.form-section-desc {
  color: rgb(100 116 139);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .md\:col-span-2 { grid-column: span 2; }
}
.field {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.field > span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(71 85 105);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.field > span.req::after {
  content: ' *';
  color: rgb(244 63 94);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.6rem;
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  transition: border 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-size: 0.92rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgb(20 184 166);
  background: white;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: rgb(252 165 165);
}
.reference-block {
  background: rgb(248 250 252);
  border: 1px dashed rgb(203 213 225);
  border-radius: 0.85rem;
  padding: 1rem 1.15rem;
}

/* =============== REVIEW BLOCK =============== */
.review-block {
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  padding: 0.9rem 1.15rem;
}
.review-block-head {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(15 118 110);
  margin-bottom: 0.5rem;
}
.review-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2fr;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgb(241 245 249);
  font-size: 0.87rem;
}
.review-row:last-child { border-bottom: 0; }
.review-label { color: rgb(100 116 139); font-weight: 500; }
.review-val { color: rgb(15 23 42); font-weight: 500; word-break: break-word; }

/* =============== JOBS LIST =============== */
.job-card {
  position: relative;
  overflow: hidden;
}
.job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(45, 212, 191, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.job-card:hover::before { opacity: 1; }

/* =============== APPLICANT DETAIL =============== */
.app-field {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(241 245 249);
}
.app-field-label {
  min-width: 160px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(100 116 139);
  flex-shrink: 0;
}
.app-field-value {
  color: rgb(15 23 42);
  flex: 1;
  word-break: break-word;
}
.app-field-value a { color: rgb(15 118 110); text-decoration: underline; }

.admin-tab {
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(100 116 139);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-tab:hover { color: rgb(34 47 199); }
.admin-tab.active {
  color: rgb(34 47 199);
  border-bottom-color: rgb(34 47 199);
}

/* =============== Document List (new compact UI) =============== */
.doc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-item {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  transition: all 0.2s ease;
}
.doc-item.ready { border-color: rgb(134 239 172); background: rgb(240 253 244); }
.doc-item.error { border-color: rgb(252 165 165); background: rgb(254 242 242); }

.doc-item-head {
  display: flex; align-items: center; gap: 0.85rem;
}
.doc-item-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.6rem;
  background: rgb(240 253 249);
  color: rgb(15 118 110);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.doc-item-icon svg { width: 1.15rem; height: 1.15rem; }
.doc-item.ready .doc-item-icon { background: rgb(209 250 229); color: rgb(5 150 105); }
.doc-item-title { flex: 1; min-width: 0; }
.doc-item-name { font-size: 0.92rem; font-weight: 600; color: rgb(15 23 42); line-height: 1.2; }
.doc-item-hint { font-size: 0.75rem; color: rgb(100 116 139); margin-top: 0.15rem; }
.doc-item-state {
  font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem;
  flex-shrink: 0;
}
.doc-item-state .ok { color: rgb(5 150 105); }
.doc-item-state .err { color: rgb(190 18 60); }
.doc-item-state .remove-btn {
  font-size: 0.72rem; color: rgb(244 63 94); cursor: pointer;
  background: none; border: 0; font-weight: 600; padding: 0; margin-left: 0.35rem;
}
.doc-item-state .remove-btn:hover { text-decoration: underline; }

.doc-mode-tabs {
  display: flex;
  margin-top: 0.75rem;
  gap: 0;
  background: rgb(241 245 249);
  padding: 0.18rem;
  border-radius: 0.55rem;
  width: fit-content;
}
.doc-mode-tab {
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(100 116 139);
  background: transparent;
  border: 0;
  border-radius: 0.42rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.doc-mode-tab:hover { color: rgb(15 23 42); }
.doc-mode-tab.active {
  background: white;
  color: rgb(15 118 110);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.doc-mode-panel { margin-top: 0.6rem; }
.doc-mode-panel.hidden { display: none; }

.doc-file-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgb(248 250 252);
  border: 1px dashed rgb(203 213 225);
  border-radius: 0.55rem;
  color: rgb(51 65 85);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.doc-file-btn:hover { border-color: rgb(94 234 212); background: rgb(240 253 249); color: rgb(15 118 110); }
.doc-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.doc-url-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.55rem;
  background: rgb(248 250 252);
  font-size: 0.87rem;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.doc-url-input:focus {
  outline: none;
  border-color: rgb(20 184 166);
  background: white;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

@media (max-width: 640px) {
  .doc-item-head { flex-wrap: wrap; }
  .doc-item-state { width: 100%; margin-left: 3rem; }
}

/* =============== File Upload (legacy, kept for compat) =============== */
.file-up { display: flex; flex-direction: column; gap: 0.5rem; }
.file-up-header { display: flex; justify-content: space-between; align-items: baseline; }
.file-up-label { font-size: 0.75rem; font-weight: 600; color: rgb(71 85 105); text-transform: uppercase; letter-spacing: 0.03em; }
.file-up-hint  { font-size: 0.7rem; color: rgb(100 116 139); }
.file-up-drop {
  position: relative;
  display: block;
  border: 1.5px dashed rgb(203 213 225);
  border-radius: 0.85rem;
  padding: 1rem;
  background: rgb(248 250 252);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: center;
}
.file-up-drop:hover { border-color: rgb(94 234 212); background: rgb(240 253 249); }
.file-up-drop.dragging { border-color: rgb(45 212 191); background: rgb(204 251 239); }
.file-up-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-up-inner { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; }
.file-up-text { font-size: 0.85rem; color: rgb(71 85 105); font-weight: 500; }
.file-up.uploading .file-up-drop { border-color: rgb(94 234 212); background: rgb(240 253 249); }
.file-up.uploaded .file-up-drop {
  border-color: rgb(52 211 153);
  background: linear-gradient(135deg, rgb(240 253 249), rgb(209 250 229));
}
.file-up.uploaded .file-up-inner svg { color: rgb(16 185 129); }
.file-up.error .file-up-drop { border-color: rgb(248 113 113); background: rgb(254 242 242); }
.file-up-status {
  font-size: 0.78rem;
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 1.2em;
}
.file-up-status .ok    { color: rgb(5 150 105); font-weight: 600; }
.file-up-status .err   { color: rgb(190 18 60); font-weight: 600; }
.file-up-status .pending{ color: rgb(100 116 139); }
.file-up-progress {
  height: 4px; width: 100%;
  background: rgb(226 232 240);
  border-radius: 999px;
  overflow: hidden;
}
.file-up-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgb(20 184 166), rgb(13 148 136));
  transition: width 0.2s ease;
}
.file-up-remove {
  font-size: 0.72rem; color: rgb(244 63 94); font-weight: 600; cursor: pointer;
}
.file-up-remove:hover { text-decoration: underline; }



/* Question option button styling */
.opt-btn {
  width: 100%;
  text-align: left;
  border: 1.5px solid rgb(226 232 240);
  background: white;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.15s ease;
}
.opt-btn:hover { border-color: rgb(94 131 255); background: rgb(238 244 255); }
.opt-btn .badge {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgb(241 245 249);
  color: rgb(51 65 85);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.opt-btn.selected {
  border-color: rgb(42 63 234);
  background: linear-gradient(180deg, rgb(238 244 255), white);
  box-shadow: 0 0 0 4px rgb(187 207 255 / 0.4);
}
.opt-btn.selected .badge {
  background: rgb(42 63 234);
  color: white;
}

/* Question card */
.q-card {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color 0.15s ease;
}
.q-card.unanswered { border-color: rgb(254 215 170); background: linear-gradient(180deg, rgb(255 251 235 / 0.5), white); }
.q-card.answered { border-color: rgb(187 207 255); }
.q-card .q-num {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgb(34 47 199);
  color: white;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* Psikogram tables */
.psk-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.psk-table th, .psk-table td { border: 1px solid rgb(226 232 240); padding: 0.55rem 0.75rem; text-align: left; }
.psk-table thead th {
  background: rgb(238 244 255);
  color: rgb(29 41 128);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.psk-table tbody tr:nth-child(even) td { background: rgb(248 250 252); }

.level-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.lvl-1 { background: #fee2e2; color: #b91c1c; }
.lvl-2 { background: #fed7aa; color: #c2410c; }
.lvl-3 { background: #fef9c3; color: #a16207; }
.lvl-4 { background: #d1fae5; color: #047857; }
.lvl-5 { background: #c7e6ff; color: #1e40af; }

.verdict-card {
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.verdict-lulus { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.verdict-pertimbangan { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.verdict-tidak { background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b; }

/* Print styles */
@media print {
  body { background: white !important; font-size: 11pt; }
  header, footer { display: none !important; }
  main { padding: 0 !important; }
  .print\:hidden { display: none !important; }
  .psk-table thead th { background: #e0e7ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .verdict-card, .level-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}