/* ============================================================
   OBSERVE.CSS — Observation Form Specific Styles
   ============================================================ */

/* Header color variant for observe page */
.observe-header {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 40%, #4f46e5 100%) !important;
}

/* ---------- Instruction Box ---------- */
.instruction-box {
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(79,70,229,.06));
  border: 1.5px solid rgba(124,58,237,.2);
  border-left: 5px solid #7c3aed;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin-bottom: 24px;
}

.instruction-title {
  font-family: 'Prompt', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #6d28d9;
  margin-bottom: 8px;
}

.instruction-box p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
}

/* ---------- Observation Items ---------- */
.obs-item {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.obs-item:hover {
  border-color: #c4b5fd;
  box-shadow: var(--shadow-sm);
}
.obs-item.has-answer {
  border-color: #7c3aed;
  background: linear-gradient(135deg, rgba(124,58,237,.03), transparent);
}

.obs-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: 'Prompt', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
}

.obs-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
}

/* ---------- Radio Choices ---------- */
.obs-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.obs-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: white;
  transition: all var(--transition);
  position: relative;
}
.obs-choice:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
}

.obs-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.obs-choice-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: all var(--transition);
  background: white;
}
.obs-choice-box::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #7c3aed;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease;
}

.obs-choice input:checked ~ .obs-choice-box {
  border-color: #7c3aed;
  background: #ede9fe;
}
.obs-choice input:checked ~ .obs-choice-box::after {
  transform: translate(-50%, -50%) scale(1);
}

.obs-choice input:checked ~ .obs-choice-text {
  color: #5b21b6;
  font-weight: 600;
}

.obs-choice-text {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.6;
  transition: color var(--transition);
}

/* Selected choice highlight */
.obs-choice:has(input:checked) {
  border-color: #7c3aed;
  background: #f5f3ff;
  box-shadow: 0 2px 8px rgba(124,58,237,.15);
}

/* ---------- Note Row ---------- */
.obs-note-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.obs-note-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

.obs-note-input {
  flex: 1;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* ---------- 3-Party Signature Grid ---------- */
.sig3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.obs-sig-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Section title color for observe ---------- */
.observe-header + .container .section-title,
body:has(.observe-header) .section-title {
  color: #5b21b6;
}
body:has(.observe-header) .section-header {
  border-bottom-color: #ede9fe;
}
body:has(.observe-header) .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 6px 20px rgba(124,58,237,.35);
}
body:has(.observe-header) .btn-primary:hover {
  box-shadow: 0 10px 28px rgba(124,58,237,.45);
}
body:has(.observe-header) .questions-section-title {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
body:has(.observe-header) .section-header {
  border-bottom-color: #ede9fe;
}
body:has(.observe-header) .nav-link-active {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

/* ---------- Responsive: Tablet (max 860px) ---------- */
@media (max-width: 860px) {
  .sig3-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .obs-item { padding: 16px 18px; }
  .obs-item-title { font-size: 15px; }
  .obs-choice-text { font-size: 14px; }
}

/* ---------- Responsive: Mobile (max 600px) ---------- */
@media (max-width: 600px) {
  .sig3-grid { grid-template-columns: 1fr; gap: 14px; }
  .obs-note-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .obs-note-label { white-space: normal; }
  .obs-note-input { width: 100%; }
  .instruction-box { padding: 14px 16px; }
  .instruction-title { font-size: 14px; }
  .instruction-box p { font-size: 13px; }
  .obs-item { padding: 14px 14px; margin-bottom: 12px; }
  .obs-item-title { font-size: 14px; gap: 10px; }
  .obs-choice { padding: 10px 12px; gap: 10px; }
  .obs-choice-text { font-size: 13px; }
  .obs-choice-box { width: 20px; height: 20px; }
}