:root {
  --sms-primary: #1f4e79;
  --sms-primary-dark: #163a59;
  --sms-secondary: #f4f7fb;
  --sms-border: #d8e0ea;
  --sms-text: #1f2937;
  --sms-muted: #6b7280;
  --sms-danger: #b91c1c;
  --sms-success: #047857;
}

.scroll-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}

.scroll-form fieldset {
  border: 1px solid var(--sms-border);
  border-radius: 14px;
  margin: 0 0 24px;
  padding: 22px;
  background: #fff;
}

.scroll-form legend {
  font-weight: 800;
  color: var(--sms-primary);
  padding: 0 10px;
  border: none;
  width: auto;
  margin-bottom: 0;
  font-size: 16px;
}

.scroll-form .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.scroll-form .field,
.scroll-form .field-2 { grid-column: span 2; }
.scroll-form .field-3 { grid-column: span 3; }
.scroll-form .field-4 { grid-column: span 4; }
.scroll-form .field-5 { grid-column: span 5; }
.scroll-form .field-6 { grid-column: span 6; }
.scroll-form .field-8 { grid-column: span 8; }
.scroll-form .field-12 { grid-column: span 12; }

.scroll-form-subsection {
  grid-column: span 12; /* default full-width */
  border: 1px solid var(--sms-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fafbfc;
}
/* Allow subsections to use field-N column widths */
.scroll-form .grid .scroll-form-subsection.field-6  { grid-column: span 6; }
.scroll-form .grid .scroll-form-subsection.field-4  { grid-column: span 4; }
.scroll-form .grid .scroll-form-subsection.field-3  { grid-column: span 3; }
.scroll-form .grid .scroll-form-subsection.field-8  { grid-column: span 8; }
.scroll-form .grid .scroll-form-subsection.field-12 { grid-column: span 12; }
/* Nested grid inside subsection — reuse same 12-col system */
.scroll-form-subsection > .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.scroll-form-subsection-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--sms-primary);
}

.pg-address-wrap.is-hidden {
  display: none;
}

.scroll-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--sms-text);
}

.scroll-form label.required::after {
  content: " *";
  color: var(--sms-danger);
}

.scroll-form input,
.scroll-form select,
.scroll-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--sms-border);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--sms-text);
}

.scroll-form select,
.scroll-form select.form-control {
  height: auto !important;
  min-height: 42px;
  max-height: none !important;
  padding: 8px 36px 8px 12px !important;
  line-height: 1.5 !important;
  color: var(--sms-text) !important;
  background-color: #fff !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-appearance: menulist;
  appearance: auto;
}

.scroll-form select option {
  color: #1f2937;
  background: #fff;
}

.scroll-form textarea {
  min-height: 92px;
  resize: vertical;
}

.scroll-form input[readonly],
.scroll-form select[disabled],
.scroll-form textarea[readonly] {
  background: #f3f4f6;
}

.side-menu {
  position: sticky;
  top: 20px;
  align-self: start;
  background: var(--sms-secondary);
  border: 1px solid var(--sms-border);
  border-radius: 14px;
  padding: 16px;
}

.side-menu a {
  display: block;
  padding: 9px 10px;
  color: var(--sms-primary);
  text-decoration: none;
  font-weight: 700;
  border-radius: 8px;
}

.side-menu a:hover {
  background: #dbeafe;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.badge {
  background: #dbeafe;
  color: var(--sms-primary-dark);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Modals appended to body from nested scroll forms */
#guestModal,
#ua-assignment-modal {
  z-index: 1060;
}

#guestModal .modal-dialog,
#ua-assignment-modal .modal-dialog {
  z-index: 1061;
}

#ua-assignment-modal .modal-dialog {
  z-index: 1061;
}

.modal-backdrop.ua-modal-backdrop {
  z-index: 1055;
}

.ua-modal-form .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.ua-modal-form .field-3,
.ua-modal-form .field-4,
.ua-modal-form .field-12 {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .ua-modal-form .field-3 { grid-column: span 4; }
  .ua-modal-form .field-4 { grid-column: span 4; }
}

#ua-assignment-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.is-hidden {
  display: none !important;
}

.admission-identity-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--sms-border);
}

.admission-identity-block {
  margin-bottom: 14px;
}

.admission-identity-list {
  margin: 8px 0 0 18px;
  padding: 0;
}

.admission-returning-options {
  margin-top: 10px;
}

.admission-returning-option {
  display: block;
  margin-bottom: 8px;
  font-weight: normal;
  cursor: pointer;
}

.admission-returning-option input {
	margin-right: 8px;
}

.finance-revert-highlight {
	border-color: #f0ad4e;
	box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.25);
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--sms-muted);
}

.field-disabled {
  opacity: 0.72;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.scroll-form .grid > .checkbox-row {
  grid-column: span 12;
}

.checkbox-row input {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}

.scroll-form .checkbox-row label {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}

.behavior-incident-form [data-field-wrap="student_id"] select {
  min-width: 0;
}

.behavior-incident-form [data-field-wrap="incident_date"] input {
  min-width: 9.5rem;
}

.behavior-incident-form [data-field-wrap="incident_type"] select,
.behavior-incident-form [data-field-wrap="severity"] select {
  min-width: 6.5rem;
}

.behavior-incident-form [data-field-wrap="class_id"] select {
  min-width: 8rem;
}

.behavior-incident-form [data-field-wrap="points"] input {
  min-width: 4.5rem;
  max-width: 6rem;
}

.scroll-form .actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.scroll-form .logo-preview {
  max-height: 80px;
  max-width: 240px;
  border: 1px solid var(--sms-border);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}

.navbar-brand-logo {
  height: 32px;
  width: auto;
  max-width: 180px;
  display: block;
}

.login-layout {
  background-color: #ffffff;
}

.login-brand-logo {
  max-height: 72px;
  max-width: 260px;
  margin-bottom: 16px;
}
.scroll-form .actions button,
.scroll-form .actions a {
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}

.scroll-form .btn-primary { background: var(--sms-primary); color: #fff; }
.scroll-form .btn-secondary { background: #e5e7eb; color: var(--sms-text); }
.scroll-form .btn-success { background: var(--sms-success); color: #fff; }

.page-content .sms-card {
  background: #fff;
  border: 1px solid var(--sms-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.sms-status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sms-badge-muted { background: #e5e7eb; color: #374151; }
.sms-badge-info { background: #dbeafe; color: #1d4ed8; }
.sms-badge-success { background: #d1fae5; color: #047857; }
.sms-badge-warning { background: #fef3c7; color: #b45309; }
.sms-badge-danger { background: #fee2e2; color: #b91c1c; }

.admission-workflow h3 {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--sms-primary);
}

.workflow-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.workflow-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  max-width: 900px;
}

.workflow-inline-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.workflow-verify-form {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.workflow-grid-form .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.workflow-grid-form .field-3 { grid-column: span 3; }
.workflow-grid-form .field-4 { grid-column: span 4; }
.workflow-grid-form .field-6 { grid-column: span 6; }
.workflow-grid-form .field-12 { grid-column: span 12; }

.workflow-grid-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.workflow-grid-form label.required::after {
  content: " *";
  color: var(--sms-danger);
}

.sms-address-location {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.sms-address-location .field-3 { grid-column: span 3; }
.sms-address-location .field-4 { grid-column: span 4; }
.sms-address-location .field-6 { grid-column: span 6; }
.sms-address-location .field-12 { grid-column: span 12; }

.workflow-grid-form .sms-address-location label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--sms-text);
}

.workflow-grid-form .sms-address-location input:not([type="hidden"]),
.workflow-grid-form .sms-address-location textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--sms-border);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--sms-text);
  box-sizing: border-box;
}

.workflow-grid-form .sms-address-location .field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--sms-muted);
}

.sms-table {
  width: 100%;
  border-collapse: collapse;
}

.sms-table th,
.sms-table td {
  border-bottom: 1px solid var(--sms-border);
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
}

.sms-table th {
  background: var(--sms-secondary);
  color: var(--sms-primary-dark);
}

@media (max-width: 900px) {
  .scroll-form .field,
  .scroll-form .field-2,
  .scroll-form .field-3,
  .scroll-form .field-4,
  .scroll-form .field-5,
  .scroll-form .field-6,
  .scroll-form .field-8,
  .scroll-form .field-12 {
    grid-column: span 12;
  }
  .scroll-layout {
    grid-template-columns: 1fr;
  }
  .side-menu {
    position: static;
  }
}

.rp-matrix-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.rp-matrix-wrap {
  overflow: auto;
  border: 1px solid var(--sms-border);
  border-radius: 12px;
  background: #fff;
}

.rp-matrix {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.rp-matrix th,
.rp-matrix td {
  text-align: center;
  vertical-align: middle;
  padding: 10px 8px;
  border-bottom: 1px solid var(--sms-border);
}

.rp-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sms-secondary);
}

.rp-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left !important;
  min-width: 200px;
}

.rp-matrix thead .rp-sticky-col {
  z-index: 3;
  background: var(--sms-secondary);
}

.rp-module-name small {
  display: block;
  color: var(--sms-muted);
  font-weight: 400;
}

.rp-action-col span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.rp-action-col .btn-link,
.rp-row-toggle-col .btn-link {
  padding: 0;
  font-size: 11px;
}

.rp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  cursor: pointer;
}

.rp-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.rp-na {
  color: #cbd5e1;
}

.rp-matrix-legend {
  background: #f8fafc;
  border: 1px solid var(--sms-border);
  border-radius: 12px;
}

.rp-legend-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--sms-muted, #64748b);
}

.rp-legend-list li {
  margin: 4px 0;
}

.rp-legend-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.rp-legend-open { background: #e0f2fe; color: #0369a1; }
.rp-legend-assignment { background: #fef3c7; color: #b45309; }
.rp-legend-alias { background: #ede9fe; color: #6d28d9; }
.rp-legend-orphan { background: #f1f5f9; color: #475569; }
.rp-legend-missing { background: #fee2e2; color: #b91c1c; }

.rp-group-header th {
  background: #eef2ff !important;
  color: #1e3a8a;
  text-align: left !important;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px !important;
  border-bottom: 2px solid #c7d2fe;
}

.rp-group-header .fa {
  margin-right: 6px;
  opacity: 0.85;
}

.rp-group-orphan th {
  background: #f1f5f9 !important;
  color: #334155;
  border-bottom-color: #cbd5e1;
}

.rp-group-toggle {
  font-weight: 600;
  margin-left: 8px;
}

.rp-menu-name {
  padding-left: 22px !important;
  min-width: 240px;
}

.rp-menu-name small {
  display: block;
  color: var(--sms-muted);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.35;
}

.rp-info-row {
  background: #fafafa;
}

.rp-info-row .rp-menu-name {
  border-left: 3px solid #e2e8f0;
}

.rp-info-open .rp-menu-name { border-left-color: #38bdf8; }
.rp-info-assignment .rp-menu-name { border-left-color: #fbbf24; }
.rp-info-alias .rp-menu-name { border-left-color: #a78bfa; }

.rp-info-note {
  text-align: left !important;
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
  padding: 12px 14px !important;
}

.rp-orphan-row .rp-menu-name {
  border-left: 3px solid #94a3b8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sms-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.sms-kpi {
  flex: 1 1 180px;
  background: #fff;
  border: 1px solid var(--sms-border, #e5e7eb);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 160px;
}

a.sms-kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.sms-kpi-link:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.sms-kpi-value {
  font-size: 1.65em;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

.sms-kpi-label {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.sms-kpi-label .fa {
  margin-right: 4px;
}

.sms-kpi-primary { border-left: 4px solid #2563eb; }
.sms-kpi-success { border-left: 4px solid #059669; }
.sms-kpi-info { border-left: 4px solid #0284c7; }
.sms-kpi-warning { border-left: 4px solid #d97706; }
.sms-kpi-danger { border-left: 4px solid #dc2626; }

.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dashboard-section-head h3 {
  margin: 0;
}

.dashboard-section-head a {
  font-size: 13px;
  font-weight: 600;
}

.sms-table-compact td,
.sms-table-compact th {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ============================================================
   Upload Field — inv_upload_field / inv_upload_multi_field
   ============================================================ */
.inv-upload-field { display: flex; flex-direction: column; gap: 6px; }
.inv-upload-field > label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 2px; }

/* Hide real file input, show custom button */
.inv-upload-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.inv-upload-input {
  /* Keep in layout (not display:none / not z-index:-1) so browsers always submit selected files */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}
.inv-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; border: 1px solid #c5cdd8;
  background: #f4f7fb; color: #374151; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap;
}
.inv-upload-btn:hover { background: #e8eef7; border-color: #1f4e79; color: #1f4e79; }
.inv-upload-btn i { font-size: 13px; }
.inv-upload-filename { font-size: 12px; color: #6b7280; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Current / Preview area */
.inv-upload-current { margin-top: 6px; }
.inv-upload-thumb {
  width: 90px; height: 90px; object-fit: cover; border-radius: 8px;
  border: 2px solid #e2e8f0; display: block;
}
.inv-upload-file-link { font-size: 13px; color: #1f4e79; text-decoration: none; }
.inv-upload-file-link:hover { text-decoration: underline; }

/* Multi-upload thumbnail grid */
.inv-upload-thumbs { margin-top: 8px; }
.inv-upload-current-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.inv-upload-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-upload-thumb-item { position: relative; display: inline-block; }
.inv-upload-thumb-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 2px solid #e2e8f0; display: block; }
.inv-upload-current .inv-upload-thumb-item { display: inline-block; }

/* Delete / clear button on thumbnails */
.inv-upload-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 2;
}
.inv-upload-remove:hover { background: #a93226; }
.inv-upload-remove i { pointer-events: none; }

/* WYSIWYG description */
.inv-wysiwyg-field { grid-column: span 12; }
.inv-wysiwyg {
  border: 1px solid #c5cdd8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.inv-wysiwyg-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #f4f7fb;
  border-bottom: 1px solid #e2e8f0;
}
.inv-wysiwyg-btn {
  min-width: 30px;
  height: 28px;
  border: 1px solid #c5cdd8;
  border-radius: 5px;
  background: #fff;
  color: #1f4e79;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.inv-wysiwyg-btn:hover { border-color: #1f4e79; background: #e8eef7; }
.inv-wysiwyg-editor {
  min-height: 110px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  outline: none;
}
.inv-wysiwyg-source { display: none; }