/**
 * Teacher Registration Form Styles
 *
 * Form-specific styles for the teacher registration page.
 * Global formset color schemes are defined in static/app/admin.css
 */

/* Base formset row styles */
.formset-row {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Formset row marked for deletion */
.formset-row.to-delete {
  opacity: 0.5;
  background: #ffebee;
}

/* Remove button cursor */
.remove-formset-row {
  cursor: pointer;
}

/* Hidden conditional sections */
.conditional-section {
  display: none !important;
}

.conditional-section.show {
  display: block !important;
}

/* Teaching details conditional fields */
#class-type-field {
  display: none;
}

#claimed-duties-section {
  display: none;
}

/* Claimed duties section - hidden by default */
.claimed-duties-section {
  display: none;
}

/* Progress field - hidden by default, shown by JavaScript when completed is unchecked */
.progress-field {
  display: none;
}

/* Tooltip icons - help cursor */
.tooltip-icon {
  cursor: help;
}

/* Scrollable container for duty groups in modal */
.duty-groups-container {
  max-height: 400px;
  overflow-y: auto;
}

/* Hidden template elements (used for cloning by JavaScript) */
.template-hidden {
  display: none;
}

/* Fixed width for timestamp columns in tables */
.timestamp-column {
  width: 140px;
}

/* Preserve line breaks in address fields */
.preserve-linebreaks {
  white-space: pre-line;
}

/* Sticky positioning with offset for fixed header */
.sticky-with-offset {
  top: 80px;
}

/*
 * Badge Color Schemes
 *
 * Two distinct palettes to visually separate application workflow from
 * acquired registration status:
 *
 * 1. Application Flow (bg-app-*) — "Traffic Light" palette
 *    Draft (#78909c slate) → Submitted (#1565c0 blue) →
 *    Under Review (#f9a825 amber) → Ready for Approval (#9e9d24 olive) →
 *    Approved (#43a047 emerald)
 *    Rejected (#e53935 crimson) — divergent/negative outcome
 *    Expired (#e53935 crimson) — same as rejected
 *
 * 2. Registration Status (bg-reg-*) — "Royal Purple" hierarchy
 *    Full (#4a148c deep purple) → Conditional (#7b1fa2 purple) →
 *    Provisional (#ab47bc orchid) → Limited (#ce93d8 lavender) →
 *    Expired (#757575 gray)
 */

/* --- Application Flow badges --- */
.bg-app-draft {
  background-color: #78909c !important;
  color: #fff;
}

.bg-app-submitted {
  background-color: #1565c0 !important;
  color: #fff;
}

.bg-app-under-review {
  background-color: #f9a825 !important;
  color: #212529;
}

.bg-app-ready-for-approval {
  background-color: #9e9d24 !important;
  color: #fff;
}

.bg-app-approved {
  background-color: #43a047 !important;
  color: #fff;
}

.bg-app-rejected {
  background-color: #e53935 !important;
  color: #fff;
}

.bg-app-expired {
  background-color: #e53935 !important;
  color: #fff;
}

/* --- Registration Status badges --- */
.bg-reg-full {
  background-color: #4a148c !important;
  color: #fff;
}

.bg-reg-conditional {
  background-color: #7b1fa2 !important;
  color: #fff;
}

.bg-reg-provisional {
  background-color: #ab47bc !important;
  color: #fff;
}

.bg-reg-limited {
  background-color: #ce93d8 !important;
  color: #4a148c;
}

.bg-reg-expired {
  background-color: #757575 !important;
  color: #fff;
}

/* --- Passport photo --- */
.passport-photo {
  width: 3.5cm;
  height: 4.5cm;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* --- Checklist table styles --- */
.checklist-col-check {
  width: 70px;
}

.checklist-badge-onfile {
  font-size: 0.65em;
}

.checklist-icon-absent {
  font-size: 0.75em;
}

/* --- Workflow reference diagram --- */
.workflow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workflow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

.workflow-arrow {
  color: #adb5bd;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.workflow-branch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
}

.workflow-branch-line {
  width: 2px;
  height: 1.5rem;
  background-color: #adb5bd;
  margin-left: 1.25rem;
}

.reg-status-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.reg-status-row + .reg-status-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.reg-status-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 6.5rem;
  text-align: center;
}

.reg-status-desc {
  font-size: 0.85rem;
  color: #495057;
}