:root {
  /* Calibri first (matches the printed/Word documents the consultancy
     already sends students - Statement of Purpose, offer letters, etc.),
     Inter as the web-safe fallback for platforms without Calibri
     installed (most Linux, some mobile). --vd-font is the same stack
     exposed as a custom property so the many `font-family: var(--vd-font)`
     rules elsewhere in this file (previously pointing at an undefined
     variable and silently falling back to inheritance) resolve to it
     explicitly. */
  --vd-font: Calibri, Candara, "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--vd-font);
  color: var(--vd-text);
  background: var(--vd-bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--vd-primary); text-decoration: none; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  height: 100vh;
  max-height: 100vh;
  background: #111a2e;
  color: white;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  z-index: 10;
}
.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 24px 22px;
  color: white;
}
.sidebar-brand small { display: block; opacity: .55; margin-top: 3px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--vd-primary); color: white; font-weight: 900;
}
.sidebar-nav {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  height: 100%;
  padding: 8px 14px 18px;
  gap: 4px;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.38) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.40);
}
.sidebar-nav a {
  color: #d7deee; padding: 11px 13px; border-radius: 9px; font-weight: 650;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-nav a.disabled { opacity: .38; pointer-events: none; }
.sidebar-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 10px 24px 14px;
  opacity: .55;
}
.app-shell { margin-left: 248px; min-height: 100vh; }
.topbar {
  height: 66px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-bottom: 1px solid #e4e8f0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { padding: 8px 11px; border-radius: 999px; background: #f0f3f8; font-size: 13px; font-weight: 650; }
.container { max-width: 1500px; margin: 0 auto; padding: 28px 28px 60px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h1 { margin: 0 0 5px; font-size: 30px; }
.page-heading p { margin: 0; color: #68738a; }
.page-actions { display: flex; gap: 8px; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #ccd3e0; border-radius: 9px;
  padding: 10px 15px; background: white; color: var(--vd-text);
  font-weight: 650; cursor: pointer;
}
.button.primary { background: var(--vd-primary); color: white; border-color: var(--vd-primary); }
.button.small { padding: 7px 10px; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.stats-8 { grid-template-columns: repeat(8, minmax(0,1fr)); }
.stat, .panel {
  background: white; border: 1px solid #e0e5ef; border-radius: 14px;
  box-shadow: 0 4px 18px rgba(25,40,75,.04);
}
.stat { padding: 17px; }
.stat strong { display: block; font-size: 25px; }
.stat span { color: #68738a; font-size: 13px; }
.panel { padding: 21px; margin-bottom: 20px; }
.panel h2 { margin-top: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.span-2 { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 10px; text-align: left; border-bottom: 1px solid #edf0f5; vertical-align: top; }
th { font-size: 11px; color: #68738a; text-transform: uppercase; letter-spacing: .05em; }
small { color: #68738a; display: block; }
.badge { display: inline-flex; background: #eef2ff; color: var(--vd-primary); border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 7px; font-weight: 650; font-size: 14px; }
/* Portal Stages layout simplification (2026-08-15) - a small muted note
   next to a field's label (e.g. "defaults to All" on Country/Visa
   category) so the common case reads as optional, not a blank you
   forgot to fill in. */
.field-hint { font-weight: 400; font-size: 11px; margin-top: -3px; }
input, select, textarea {
  width: 100%; border: 1px solid #cfd6e3; border-radius: 9px;
  padding: 11px 12px; background: white; color: var(--vd-text); font: inherit;
}
textarea { resize: vertical; }
.form-actions { grid-column: 1 / -1; }
.form-section-title { grid-column: 1 / -1; margin-top: 8px; padding: 10px 0 4px; font-size: 17px; font-weight: 800; border-bottom: 1px solid #e7ebf2; }
.full-width { grid-column: 1 / -1; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.details { display: grid; grid-template-columns: 145px 1fr; gap: 10px; }
.details dt { color: #68738a; }
.details dd { margin: 0; font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.application-card { display: grid; gap: 7px; border: 1px solid #e0e5ef; border-radius: var(--vd-radius); padding: 17px; color: var(--vd-text); }
.inline-form { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.inline-form.no-margin { margin-top: 0; }
.empty { padding: 22px; color: #68738a; text-align: center; }
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 10px; align-items: end; }
.profile-banner { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.profile-banner > div { background: var(--vd-text); color: white; border-radius: var(--vd-radius); padding: 15px; }
.profile-banner span { display: block; opacity: .65; font-size: 11px; text-transform: uppercase; }
.profile-banner strong { display: block; margin-top: 5px; }
.student-row, .task-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 0; border-bottom: 1px solid #edf0f5; color: var(--vd-text);
}
.student-row:last-child, .task-row:last-child { border-bottom: 0; }
.align-right { text-align: right; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid #dde3ec; margin-bottom: 20px; }
.tabs a { padding: 11px 14px; color: #67728a; font-weight: 700; border-bottom: 3px solid transparent; }
.tabs a.active { color: var(--vd-primary); border-bottom-color: var(--vd-primary); }
.progress { height: 10px; background: #edf1f7; border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress span { display: block; height: 100%; background: var(--vd-primary); }
.checklist-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.checklist-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #e2e7ef; border-radius: 10px; }
.checklist-item strong { font-size: 12px; }
.status-approved { background: #f0fbf4; border-color: #ccebd7; }
.status-received { background: #fff9ed; border-color: #f0dfb7; }
.status-missing { background: #fff3f3; border-color: #f0cccc; }
.note-card { padding: 14px 0; border-bottom: 1px solid #edf0f5; }
.note-card p { margin-top: 0; }
.timeline { position: relative; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 13px; padding-bottom: 20px; }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--vd-primary); margin-top: 5px; box-shadow: 0 0 0 4px #e9edff; }
.timeline-item p { margin: 4px 0; }
@media (max-width: 1200px) {
  .stats-8 { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 900px) {
  .sidebar { width: 78px; }
  .sidebar-brand span:not(.logo-mark), .sidebar-nav a { font-size: 0; }
  .sidebar-nav a::first-letter { font-size: 18px; }
  .app-shell { margin-left: 78px; }
  .dashboard-grid, .two-column { grid-template-columns: 1fr; }
  .profile-banner { grid-template-columns: 1fr 1fr; }
  .checklist-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .stats, .stats-8, .form-grid, .cards, .profile-banner, .checklist-grid { grid-template-columns: 1fr; }
  .container { padding: 20px 14px 40px; }
}

/* Review Queue documents — professional review cards (2026-08-21).
   The server-side table is retained for accessibility and action safety,
   while desktop/mobile presentation follows the actual review workflow. */
.review-document-section {
  padding: 18px;
  border-color: #d7e1ef;
  background: #f8faff;
}

.review-document-section .review-section-heading {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe7f2;
}

.review-document-section .review-section-heading h2 { font-size: 20px; }
.review-document-section .review-section-heading p {
  max-width: 760px;
  margin: 4px 0 0;
  color: #66758b;
  font-size: 13px;
}

.review-document-filter {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
}

.review-document-filter label { margin: 0; }
.review-document-filter label span {
  display: block;
  margin-bottom: 4px;
  color: #617189;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.review-document-filter select { min-width: 220px; }

.review-document-wrap {
  overflow: visible;
  border: 0;
  background: transparent;
}

.review-document-table,
.review-document-table tbody {
  display: grid;
  gap: 12px;
  width: 100%;
}

.review-document-table thead { display: none; }

.review-document-table tbody tr {
  display: grid;
  grid-template-columns: 180px minmax(260px, 1fr) minmax(290px, 350px);
  grid-template-areas:
    "student item status"
    "category files review"
    "priority files review";
  gap: 0 18px;
  padding: 16px;
  border: 1px solid #d9e3ef;
  border-left: 4px solid #3157c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(35, 57, 91, .055);
}

.review-document-table tbody tr:hover {
  border-color: #bfcde1;
  box-shadow: 0 8px 22px rgba(35, 57, 91, .09);
}

.review-document-table tbody tr.review-queue-urgent {
  border-left-color: #dc3545;
  background: linear-gradient(90deg, #fff8f8 0%, #fff 24%);
}

.review-document-table td {
  display: block;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  font-size: 13px;
  vertical-align: top;
}

.review-document-table td::before {
  display: block;
  margin-bottom: 5px;
  color: #75839a;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.review-document-table td:nth-child(1) { grid-area: student; }
.review-document-table td:nth-child(1)::before { content: "Student"; }
.review-document-table td:nth-child(2) { grid-area: item; }
.review-document-table td:nth-child(2)::before { content: "Checklist item"; }
.review-document-table td:nth-child(3) { grid-area: category; }
.review-document-table td:nth-child(3)::before { content: "Category"; }
.review-document-table td:nth-child(4) { grid-area: priority; }
.review-document-table td:nth-child(4)::before { content: "Priority"; }
.review-document-table td:nth-child(5) {
  grid-area: files;
  padding: 10px 12px;
  border: 1px solid #dfe7f2;
  border-radius: 9px;
  background: #f7f9fc;
}
.review-document-table td:nth-child(5)::before { content: "Submitted files"; }
.review-document-table td:nth-child(6) { grid-area: status; }
.review-document-table td:nth-child(6)::before { content: "Current status"; }
.review-document-table td:nth-child(7) {
  grid-area: review;
  padding: 10px 12px;
  border: 1px solid #dce5f1;
  border-radius: 9px;
  background: #fbfcfe;
}
.review-document-table td:nth-child(7)::before { content: "Review decision"; }

.review-document-table td:nth-child(1) a {
  color: #183a7a;
  font-size: 14px;
  font-weight: 800;
}
.review-document-table td:nth-child(2) > strong { color: #1c2e49; font-size: 14px; }
.review-document-table td:nth-child(2) > small { display: inline-block; margin-top: 4px; color: #6b788d; line-height: 1.4; }

.review-document-table .institute-file-pair {
  margin: 0 0 8px;
  padding: 9px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #fff;
}
.review-document-table .institute-file-pair a { font-weight: 700; }
.review-document-table .institute-file-pair small { display: block; margin-top: 5px; color: #68768a; }

.review-document-table .compact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
}
.review-document-table .compact-form input:not([type="checkbox"]),
.review-document-table .compact-form select { width: 100%; min-width: 0; }
.review-document-table .permission-toggle { justify-content: flex-start; margin: 0; }
.review-document-table .review-flag-toggle { margin-top: 9px; }
.review-document-table .review-flag-toggle form { align-items: stretch; }

@media (max-width: 1050px) {
  .review-document-table tbody tr {
    grid-template-columns: 150px minmax(240px, 1fr);
    grid-template-areas:
      "student status"
      "item item"
      "category priority"
      "files review";
  }
}

@media (max-width: 720px) {
  .review-document-section { padding: 12px; }
  .review-document-filter { align-items: stretch; flex-direction: column; }
  .review-document-filter select { width: 100%; min-width: 0; }
  .review-document-table tbody tr {
    grid-template-columns: 1fr;
    grid-template-areas: "student" "status" "item" "category" "priority" "files" "review";
    gap: 5px;
    padding: 13px;
  }
}

.button.danger {
  background: #b42318;
  border-color: #b42318;
  color: white;
}
.visa-file-add-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--vd-border, #d8dce3);
  border-radius: var(--vd-radius, 8px);
  background: var(--vd-surface-muted, #f8fafc);
}
.visa-file-add-form label {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.visa-file-add-form input[type="text"],
.visa-file-add-form input[type="file"] {
  font-weight: 400;
}
.visa-file-add-form button {
  flex: 0 0 auto;
}
.danger-panel {
  border-color: #f0c7c4;
  background: #fffafa;
}
.danger-panel h2 {
  color: #9f1c13;
}

.record-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f5;
}
.record-card:last-child { border-bottom: 0; }
.form-grid.compact { gap: 10px; }
.tabs { overflow-x: auto; flex-wrap: nowrap; }
.tabs a { white-space: nowrap; }

.alert {
  padding: 13px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-weight: 650;
}
.alert.success {
  background: #ecfdf3;
  border: 1px solid #b7e5c8;
  color: #176b39;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}
.import-form {
  max-width: 520px;
  margin-top: 20px;
}
.completion-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 260px;
  gap: 14px;
  margin-bottom: 20px;
}
.completion-summary > div,
.completion-summary > form {
  background: white;
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 15px;
}
.completion-summary span {
  display: block;
  color: #68738a;
  font-size: 12px;
  margin-bottom: 4px;
}
.completion-summary strong {
  font-size: 22px;
}
.mini-progress {
  height: 7px;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
  margin-top: 10px;
}
.mini-progress i {
  display: block;
  height: 100%;
  background: var(--vd-primary);
}
@media (max-width: 900px) {
  .completion-summary { grid-template-columns: 1fr; }
}

.view-toggle {
  display: flex;
  gap: 8px;
}
.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 290px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 18px;
}
.pipeline-column {
  background: #eef2f8;
  border: 1px solid #dde4ef;
  border-radius: 13px;
  min-height: 460px;
}
.pipeline-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid #dce3ed;
}
.pipeline-heading span {
  background: white;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  padding: 3px 7px;
  font-size: 12px;
}
.pipeline-cards {
  padding: 10px;
  display: grid;
  gap: 10px;
}
.pipeline-card {
  background: white;
  border: 1px solid #dfe5ee;
  border-radius: 11px;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(20, 32, 60, .04);
}
.pipeline-card a {
  display: grid;
  gap: 4px;
  color: var(--vd-text);
  margin-bottom: 10px;
}
.pipeline-card select {
  padding: 7px 8px;
  font-size: 12px;
}
.pipeline-empty {
  text-align: center;
  color: #8791a5;
  padding: 26px 8px;
  font-size: 13px;
}
.application-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.application-summary > div {
  background: white;
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 15px;
}
.application-summary span {
  display: block;
  color: #68738a;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.checklist-table {
  display: grid;
}
.checklist-row {
  display: grid;
  grid-template-columns: 1fr 120px 310px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f5;
}
.checklist-row form {
  display: flex;
  gap: 8px;
}
.status-badge-approved { background: #e8f8ee; color: #16703a; }
.status-badge-received { background: #fff6dd; color: #8b6500; }
.status-badge-missing { background: #ffeded; color: #a22727; }
.status-badge-not-applicable { background: #eef1f5; color: #667085; }
@media (max-width: 900px) {
  .application-summary { grid-template-columns: 1fr 1fr; }
  .checklist-row { grid-template-columns: 1fr; }
}

.dual-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.dual-progress span {
  display: block;
  font-size: 12px;
  color: #68738a;
  margin-bottom: 6px;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--vd-primary);
}
.approved-progress i {
  background: #17884b;
}
.document-category {
  margin-top: 20px;
}
.document-category h3 {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e9f0;
}
.checklist-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.checklist-actions form {
  display: flex;
  gap: 7px;
}
.document-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.document-card {
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 15px;
  display: grid;
  gap: 13px;
}
.document-card > div:first-child {
  display: grid;
  gap: 5px;
}
.document-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
.document-card-actions form {
  display: flex;
  gap: 7px;
  align-items: center;
}
.document-card-actions input[type="file"] {
  max-width: 210px;
  padding: 6px;
  font-size: 12px;
}
@media (max-width: 900px) {
  .dual-progress, .document-cards { grid-template-columns: 1fr; }
}

.drop-zone {
  border: 2px dashed #b9c4d8;
  border-radius: 14px;
  min-height: 180px;
  padding: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #f8faff;
  cursor: pointer;
  margin-bottom: 14px;
}
.drop-zone:hover,
.drop-zone.drag-active {
  border-color: var(--vd-primary);
  background: #eef2ff;
}
.drop-zone input {
  display: none;
}
.drop-zone strong {
  font-size: 20px;
}
.drop-zone span {
  color: #68738a;
}
.category-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.category-progress-card {
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 14px;
}
.category-progress-card .progress {
  margin: 6px 0 10px;
}
.version-groups {
  display: grid;
  gap: 20px;
}
.version-group {
  border: 1px solid #e0e5ef;
  border-radius: 13px;
  padding: 15px;
}
.version-group h3 {
  margin: 0;
}
@media (max-width: 1000px) {
  .category-progress-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .category-progress-grid {
    grid-template-columns: 1fr;
  }
}

.mini-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
/* .mini-stats > div's old dark-navy box styling was superseded by the
   .mini-stat-card rules further down (higher specificity than this
   selector would otherwise lose to, since `.mini-stats > div` used to
   out-specificity a plain `.mini-stat-card` class - removed here rather
   than left to fight the cascade). Layout-only properties stay here;
   color/surface now comes from .mini-stat-card. */
.mini-stats > div {
  min-width: 150px;
}
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.alert-card {
  display: grid;
  gap: 5px;
  border-radius: 11px;
  padding: 14px;
  color: var(--vd-text);
  border: 1px solid #dfe5ee;
}
.alert-card span {
  font-size: 13px;
}
.alert-info { background: #eef4ff; border-color: #cddcff; }
.alert-warning { background: #fff8e7; border-color: #efdca6; }
.alert-danger { background: #fff0f0; border-color: #efc7c7; }

.payment-alerts-panel {
  border: 2px solid #d92d20;
  background: #fff5f4;
  margin-bottom: 16px;
}
.payment-alerts-panel .panel-heading h2 { color: #a22727; }
.payment-alerts-count {
  background: #d92d20; color: #fff; font-weight: 800; font-size: 11px;
  padding: 3px 9px; border-radius: 999px;
}
.payment-alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.payment-alert-card {
  display: grid;
  gap: 5px;
  border-radius: 11px;
  padding: 14px;
  color: var(--vd-text);
  background: #fff;
  border: 1px solid #f3c6c2;
}
.payment-alert-card strong { color: #a22727; }
.payment-alert-card span { font-size: 13px; color: var(--vd-text-soft); }
.payment-alert-card:hover { border-color: #d92d20; box-shadow: 0 4px 14px rgba(217,45,32,0.15); }
@media (max-width: 720px) {
  .payment-alerts-grid { grid-template-columns: 1fr; }
}
.danger-badge {
  background: #ffeded;
  color: #a22727;
}
.compact-timeline {
  max-height: 520px;
  overflow-y: auto;
}
.calendar-panel {
  overflow-x: auto;
}
.calendar-weekdays,
.calendar-grid {
  min-width: 1050px;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #dde3ed;
}
.calendar-weekdays strong {
  background: var(--vd-bg);
  padding: 10px;
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #dde3ed;
}
.calendar-day {
  min-height: 150px;
  background: white;
  padding: 9px;
}
.calendar-day.outside-month {
  background: #f7f8fa;
  color: #9aa3b4;
}
.calendar-day.today {
  box-shadow: inset 0 0 0 2px var(--vd-primary);
}
.calendar-date {
  font-weight: 800;
  margin-bottom: 7px;
}
.calendar-events {
  display: grid;
  gap: 6px;
}
.calendar-event {
  display: grid;
  gap: 2px;
  border-left: 3px solid var(--vd-primary);
  background: #eef2ff;
  padding: 7px;
  border-radius: 6px;
  color: var(--vd-text);
  font-size: 11px;
}
.calendar-event.completed {
  opacity: .55;
  text-decoration: line-through;
}
@media (max-width: 1000px) {
  .alerts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .alerts-grid { grid-template-columns: 1fr; }
  .mini-stats { display: grid; grid-template-columns: 1fr 1fr; }
}

.stats-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.compact-progress {
  min-width: 120px;
  height: 7px;
}
.payment-paid {
  background: #e8f8ee;
  color: #16703a;
}
.payment-part-paid {
  background: #fff6dd;
  color: #8b6500;
}
.payment-unpaid {
  background: #ffeded;
  color: #a22727;
}
.payment-unconfigured {
  background: #eef1f5;
  color: #667085;
}
.three-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 1000px) {
  .three-column { grid-template-columns: 1fr; }
  .stats-4 { grid-template-columns: 1fr 1fr; }
}

.application-actions {
  display: block;
  margin-top: 4px;
  color: var(--vd-primary);
  font-size: 12px;
  font-weight: 700;
}

.institution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}
.institution-card {
  display: grid;
  gap: 8px;
  background: white;
  border: 1px solid #e0e5ef;
  border-radius: 13px;
  padding: 17px;
  color: var(--vd-text);
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px;
}
.course-card {
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.compact-details {
  grid-template-columns: 110px 1fr;
}
@media (max-width: 1000px) {
  .institution-grid,
  .course-grid {
    grid-template-columns: 1fr;
  }
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.rule-item {
  padding: 11px 12px;
  border: 1px solid #e0e5ef;
  border-radius: 9px;
  background: #f8faff;
}
.country-rule {
  background: #eef2ff;
  border-color: #ccd7ff;
  font-weight: 650;
}
.country-rule-chip {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 9px;
  background: #e8f8ee;
  color: #176b39;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.admission-locked-chip {
  display: inline-flex;
  margin-top: 8px;
  margin-left: 8px;
  padding: 5px 9px;
  background: #eef1fb;
  color: var(--vd-primary-dark, #24449F);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.admission-confirm-panel, .danger-zone-panel {
  margin-top: 16px;
}
.danger-zone-panel {
  border: 1px solid var(--vd-danger, #d9364a);
}
.danger-zone-panel .panel-heading h2 {
  color: var(--vd-danger, #d9364a);
}
.danger-zone-panel .button.danger {
  background: var(--vd-danger, #d9364a);
  border-color: var(--vd-danger, #d9364a);
  color: #fff;
}
@media (max-width: 1000px) {
  .rules-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .rules-grid { grid-template-columns: 1fr; }
}

.admin-checklist-card {
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 15px;
  margin-bottom: 14px;
  background: #fafbfe;
}
.admin-checklist-card > form:last-child {
  margin-top: 10px;
}
.admin-checklist-card form.stack {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e3e8ef;
}

/* Checklist Admin kanban board (drag-and-drop "Required at stage").
   Columns are STANDARD_APPLICATION_STAGES (the curated ~13-stage list
   used by the real pipelines), not the full ApplicationStatus enum - see
   the comment on kanban_stages in app/routes/checklist_admin.py. */
.checklist-kanban-panel {
  overflow: hidden;
}
.checklist-kanban-board {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding-bottom: 10px;
  overflow-x: auto;
}
.checklist-kanban-column {
  flex: 0 0 290px;
  width: 290px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e8ef;
  border-radius: var(--vd-radius);
  background: #f6f8fb;
  max-height: calc(100vh - 260px);
  min-height: 220px;
}
.checklist-kanban-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid #e3e8ef;
  background: #eef1f7;
  border-radius: var(--vd-radius) var(--vd-radius) 0 0;
}
.checklist-kanban-column-head h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--vd-text, #1f2937);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.checklist-kanban-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dde3ee;
  color: #4a5567;
  font-size: 10px;
  font-weight: 800;
}
.checklist-kanban-dropzone {
  flex: 1 1 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  transition: background-color .12s ease;
}
.checklist-kanban-dropzone.drag-over {
  background: #e7edfc;
  box-shadow: inset 0 0 0 2px var(--consultancy-accent, var(--vd-primary));
  border-radius: 0 0 var(--vd-radius) var(--vd-radius);
}
.checklist-kanban-placeholder {
  padding: 16px 8px;
  border: 1px dashed #d3dae6;
  border-radius: var(--vd-radius-sm);
  color: #9aa4b6;
  font-size: 11px;
  text-align: center;
}
/* Checklist Admin compact tick-list cards (replaces the old expandable
   <details>/<summary> card design) - each document is a single dense row
   with a tick/checkbox (is_active - ticked = included for students), a
   priority colour stripe, and an Edit toggle that reveals the full form
   below it without navigating away. Built so a whole country's checklist
   can be scanned "at a glance" per stage column, same as the original
   Ireland columns layout. */
.checklist-kanban-card {
  /* flex-shrink: 0 is load-bearing, not cosmetic - .checklist-kanban-
     dropzone is a column flex container with a capped max-height and its
     own overflow-y: auto scrollbar. Flex items default to shrinking to
     fit their container, and because this card has overflow: hidden
     (below), its flex "automatic minimum size" is 0 instead of "at least
     its content's height" (see CSS Flexbox spec ยง4.5) - so with enough
     cards in one column (e.g. 15 in "Registered"), the flex algorithm
     was squashing every card down to a few px tall instead of letting
     the dropzone scroll, clipping almost all of each card's content and
     making the text look "distorted"/cut off. flex-shrink: 0 makes cards
     keep their natural content height no matter how many are in a
     column - the dropzone's scrollbar takes over instead, exactly as
     intended. */
  flex-shrink: 0;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e7ebf2;
  border-left: 4px solid var(--vd-muted, #94a1b5);
  border-radius: var(--vd-radius-sm);
  box-shadow: 0 1px 2px rgba(20,31,53,.05);
  overflow: hidden;
}
.checklist-kanban-card.dragging {
  opacity: .4;
}
.checklist-kanban-card.priority-important { border-left-color: #d99a1f; }
.checklist-kanban-card.priority-urgent { border-left-color: #e0722a; }
.checklist-kanban-card.priority-critical { border-left-color: var(--vd-danger, #d9364a); }
.checklist-kanban-card.is-inactive {
  background: #f7f8fa;
  border-left-color: #cfd4dd;
}
.checklist-kanban-card.is-inactive .checklist-tick-name {
  text-decoration: line-through;
  text-decoration-color: #b7bec9;
  color: var(--vd-muted, #748095);
}

.checklist-tick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  padding: 7px 9px;
  cursor: grab;
}
.checklist-tick-row:active {
  cursor: grabbing;
}
.checklist-kanban-drag-handle {
  flex-shrink: 0;
  color: #b6bece;
  font-size: 13px;
  line-height: 1;
}
.checklist-tick {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--consultancy-accent, var(--vd-primary));
}
/* Was overflow-wrap: anywhere on a single-line (no flex-wrap) row - with
   fixed-size badges and the Edit button taking priority for space, the
   name was squeezed down to almost nothing and broke mid-word/mid-
   character instead of at natural word boundaries, which read as
   "distorted" text. flex-wrap above lets badges/the Edit button drop to
   their own line when needed instead of crushing the name, and
   word-break here only breaks a genuinely-too-long single word, never a
   normal one. */
.checklist-tick-name {
  flex: 1 1 140px;
  min-width: 110px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vd-text, #1f2937);
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}
.checklist-tick-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.checklist-tick-badges .badge {
  font-size: 9.5px;
  padding: 1px 6px;
}
.badge-category {
  background: #eef1f5;
  color: #5b6577;
  font-weight: 700;
}
.badge-category[data-category="Identity"] { background: #e7f0fd; color: #2158b0; }
.badge-category[data-category="Education"] { background: #eaf6ee; color: #1f7a43; }
.badge-category[data-category="English"] { background: #f2ecfb; color: #6a3fb5; }
.badge-category[data-category="Employment"] { background: #fef3e3; color: #a66a11; }
.badge-category[data-category="Sponsor"] { background: #fdeaf3; color: #b5397a; }
.badge-category[data-category="Finance"] { background: #e3f6f4; color: #127a6e; }
.badge-category[data-category="Property"] { background: #f4f1e8; color: #8a6d1f; }
.badge-category[data-category="College & Fee"] { background: #eef0fd; color: #40469b; }
.badge-category[data-category="Visa"] { background: #fdeaea; color: #b5352f; }
.badge-required {
  background: var(--vd-danger-soft, #fbe7ea);
  color: var(--vd-danger, #d9364a);
  font-weight: 800;
}
.badge-count {
  background: #eef1f7;
  color: #5b6577;
  font-weight: 700;
}
.checklist-tick-edit-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: var(--vd-radius-sm);
}
.checklist-tick-edit-toggle:hover {
  background: #eef1f7;
}
.checklist-tick-details {
  padding: 0 11px 12px;
  border-top: 1px solid #eef0f4;
  margin-top: 2px;
}
.checklist-tick-details form.stack {
  margin-top: 10px;
}

.checklist-copy-core-form {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checklist-copy-core-form select {
  max-width: 240px;
}

@media (max-width: 650px) {
  .checklist-kanban-column {
    flex-basis: 82vw;
    width: 82vw;
    max-height: none;
  }
}

.filter-bar-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--consultancy-accent, var(--vd-primary));
}
.filter-bar-details .filter-bar {
  margin-top: 10px;
}

/* Checklist Admin - per-country override picker + effective-list preview */
.admin-checklist-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.admin-checklist-core-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #e3e8ef;
  border-radius: var(--vd-radius-sm);
  background: #f7f9fc;
  font-size: 12.5px;
}
.admin-checklist-core-item span {
  font-weight: 650;
  color: var(--vd-text, #1f2937);
}
.admin-checklist-core-item small {
  color: var(--vd-muted, #748095);
  font-size: 10.5px;
  white-space: nowrap;
}
.admin-checklist-core-item.overridden {
  background: var(--vd-info-soft, #eaf1fb);
  border-color: rgba(33,115,200,.18);
}

/* BUG FIX (2026-08-17) - direct user report: "duplicate jan 2027" on the
   Intake settings page. The Effective Intake List panel used to render
   plain label+scope chips using the shared .admin-checklist-core-item
   flex-row layout, which had no room for the "Manage under X ->" link or
   the Delete/confirm-to-delete form now added so staff can actually
   remove a duplicate straight from this view. Scoped to its own modifier
   class (not a change to .admin-checklist-core-item itself) so the
   simpler chip usages elsewhere (Universal Intakes list, Role
   Permissions checkboxes) are completely unaffected. */
.admin-checklist-core-grid.intake-effective-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.admin-checklist-core-item.intake-effective-item {
  flex-direction: column;
  align-items: flex-start;
  min-width: 240px;
  gap: 6px;
}
.admin-checklist-core-item.intake-effective-item form {
  margin-top: 2px;
}
.admin-checklist-core-item.intake-effective-item details {
  width: 100%;
}
.admin-checklist-core-item.intake-effective-item details form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  margin-top: 6px;
}

/* Milestone U4 - Role Permissions admin page: one checkbox per
   permission key, styled like the existing admin-checklist-core-item
   cards so it visually matches the rest of the settings area. */
.permission-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #e3e8ef;
  border-radius: var(--vd-radius-sm);
  background: #f7f9fc;
  font-size: 12.5px;
  cursor: pointer;
}
.permission-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.permission-toggle input:disabled + span {
  color: var(--vd-muted, #748095);
}
.button-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.stats-3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 18px;
}
.backup-panel {
  background: #f8faff;
}
.full-button {
  width: 100%;
}
@media (max-width: 1000px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
}

.report-bars {
  display: grid;
  gap: 14px;
}
.report-bar-row {
  display: grid;
  gap: 6px;
}
.report-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.report-bar-track {
  height: 11px;
  background: #edf1f7;
  border-radius: 999px;
  overflow: hidden;
}
.report-bar-track i {
  display: block;
  height: 100%;
  background: var(--vd-primary);
}
.country-track i {
  background: #17884b;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #eef2f8;
  padding: 24px;
}
.login-card {
  width: min(430px, 100%);
  background: white;
  border: 1px solid #dfe5ee;
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 20px 55px rgba(20, 32, 60, .12);
}
.login-card h1 {
  margin-bottom: 4px;
}
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--vd-primary);
  color: white;
  font-weight: 900;
  margin-bottom: 16px;
}
.login-note {
  display: block;
  margin-top: 18px;
  color: #7a8497;
  text-align: center;
}
.narrow-form {
  max-width: 560px;
}
.sidebar-user {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 5px;
}
.sidebar-user strong,
.sidebar-user small {
  color: white;
}
.sidebar-user small {
  opacity: .65;
}
.sidebar-user a,
.sidebar-user button {
  color: #dbe3ff;
  background: transparent;
  border: 0;
  padding: 4px 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.permission-card {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f5;
}
.user-account-card {
  border: 1px solid #e0e5ef;
  border-radius: var(--vd-radius);
  padding: 14px;
  margin-bottom: 13px;
}
.user-account-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.user-account-card > form:last-child {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.access-denied {
  max-width: 650px;
  margin: 70px auto;
  text-align: center;
}
@media (max-width: 1100px) {
  .user-account-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pipeline-progress {
  height: 7px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
  margin-top: 8px;
}
.pipeline-progress i {
  display: block;
  height: 100%;
  background: var(--vd-primary);
}
.pipeline-progress.large {
  height: 12px;
  margin: 14px 0 8px;
}
.pipeline-status-panel {
  margin-bottom: 16px;
}
.pipeline-move-form {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.pipeline-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
.pipeline-summary-grid > div {
  border: 1px solid #e0e5ef;
  border-radius: 11px;
  padding: 13px;
  background: #fafbfe;
  display: grid;
  gap: 4px;
}
.pipeline-summary-grid strong {
  font-size: 22px;
}
.pipeline-summary-grid span {
  font-size: 12px;
  color: #687386;
}
.stage-inquiry { background: #eef1f5; color: #4d596a; }
.stage-documents-pending { background: #fff3da; color: #8a6500; }
.stage-documents-complete { background: #e7f6ee; color: #176b39; }
.stage-university-applied { background: #e8efff; color: #2d52af; }
.stage-offer-received { background: #e9f8ff; color: #126987; }
.stage-tuition-pending { background: #fff0e4; color: #9b4e00; }
.stage-tuition-paid { background: #e7f7e9; color: #236f2f; }
.stage-visa-preparation { background: #f0eaff; color: #6744a3; }
.stage-ready { background: #ececff; color: #4f49a6; }
.stage-visa-applied { background: #e5f2ff; color: #1d5f9b; }
.stage-biometrics { background: #e9f7f4; color: #207161; }
.stage-processing { background: #f2f2ff; color: #5757a8; }
.stage-additional { background: #fff4dc; color: #8c6200; }
.stage-approved { background: #ddf6e6; color: #146932; }
.stage-refused { background: #ffe5e5; color: #a02222; }
.stage-withdrawn { background: #ececec; color: #666; }

@media (max-width: 1100px) {
  .pipeline-summary-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .pipeline-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.migration-log {
  max-height: 420px;
  overflow: auto;
  padding: 15px;
  border-radius: 10px;
  background: var(--vd-text);
  color: #e8edf7;
  white-space: pre-wrap;
  line-height: 1.55;
}
.rule-item small {
  display: block;
  margin-top: 4px;
  opacity: .72;
}

.milestone-grid {
  display: grid;
  gap: 16px;
}
.milestone-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
}
.milestone-number {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--vd-primary);
  color: white;
  font-size: 22px;
  font-weight: 900;
}


/* VisaDesk Professional v3.0 — Milestone 2 */
.stats-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.professional-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.professional-filter-grid label {
  display: grid;
  gap: 5px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  overflow: hidden;
}
.view-toggle a {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-primary-dark, #24449F);
  text-decoration: none;
  background: #fff;
}
.view-toggle a.active {
  background: var(--vd-primary, #3157C8);
  color: #fff;
}
.view-toggle a + a {
  border-left: 1px solid #dfe5ee;
}

.student-list-table table th {
  white-space: nowrap;
}
.student-list-table .student-title {
  font-weight: 600;
}

.student-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 15px;
}

.student-workspace-card {
  border: 1px solid #dfe5ee;
  border-radius: 15px;
  padding: 16px;
  background: #fff;
  display: grid;
  gap: 13px;
}

.student-card-top,
.student-stage-heading,
.student-card-actions,
.pipeline-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.student-title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
}

.student-contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: #657185;
}

.student-case-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.student-case-meta > div {
  background: #f7f9fc;
  border-radius: 9px;
  padding: 9px;
  display: grid;
  gap: 3px;
}

.student-case-meta small {
  color: #788397;
}

.mini-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-metrics span {
  background: var(--vd-primary-soft);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
}

.student-alert-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.student-alert-list span {
  background: #fff1db;
  color: #815900;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 11px;
}

.quick-action {
  position: relative;
}

.quick-action summary {
  list-style: none;
  cursor: pointer;
}

.quick-action summary::-webkit-details-marker {
  display: none;
}

.quick-action form {
  position: absolute;
  z-index: 30;
  right: 0;
  top: 38px;
  width: 260px;
  padding: 13px;
  display: grid;
  gap: 10px;
  background: white;
  border: 1px solid #dce3ee;
  border-radius: 11px;
  box-shadow: 0 15px 40px rgba(24, 38, 70, .16);
}

.professional-board {
  min-height: 560px;
}

.drop-column {
  transition: border-color .15s ease, background .15s ease;
}

.drop-column.drag-over {
  border-color: var(--vd-primary);
  background: var(--vd-primary-soft);
}

.draggable-card {
  cursor: grab;
}

.draggable-card.dragging {
  opacity: .45;
  cursor: grabbing;
}

.pipeline-card a {
  display: grid;
  gap: 3px;
}

.pipeline-card a span {
  margin-top: 6px;
  font-weight: 700;
}

.pipeline-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0;
}

.pipeline-card-metrics span {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f0f3f8;
}

.pipeline-card-footer {
  font-size: 11px;
  color: #687386;
}

.pipeline-card-footer select {
  max-width: 150px;
  font-size: 11px;
  padding: 5px;
}

.pipeline-help {
  margin-top: 10px;
  color: #718096;
  font-size: 12px;
  text-align: center;
}

/* Student Pipeline (FrontForce-style board) */
.intake-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.intake-switcher label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #687386;
}
.intake-switcher select {
  min-width: 220px;
  padding: 8px 10px;
  font-weight: 700;
}
.pipeline-column {
  border-top: 3px solid var(--stage-color, #dde4ef);
}
.student-pipeline-card {
  border-left: 3px solid var(--stage-color, transparent);
}
.student-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pipeline-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vd-accent, #3157C8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.pipeline-assign {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.quick-assign-select {
  max-width: 92px;
  padding: 2px 4px;
  border: 1px solid #dde3ee;
  border-radius: 6px;
  background: #fff;
  color: #354259;
  font-size: 10px;
  font-weight: 600;
}
.pipeline-card-source {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #4b5568;
}
.pipeline-card-value {
  display: block;
  margin-top: 2px;
  color: #687386;
  font-weight: 600;
}
.pipeline-quick-actions {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.quick-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f0f3f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-icon svg {
  width: 14px;
  height: 14px;
  fill: #4b5568;
}
.quick-icon:hover {
  background: #e3e8f2;
}

.danger-text {
  color: #a52424 !important;
  background: #ffe8e8 !important;
}

@media (max-width: 1200px) {
  .professional-filter-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .stats-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .professional-filter-grid,
  .stats-5,
  .student-case-meta {
    grid-template-columns: 1fr;
  }

  .student-workspace-grid {
    grid-template-columns: 1fr;
  }

  .student-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


/* VisaDesk Professional v3.0 — Milestone 3 */
.stats-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .stats-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .stats-7 {
    grid-template-columns: 1fr 1fr;
  }
}


/* VisaDesk Professional v3.0 — Milestone 4 */
.communication-row {
  border-bottom: 1px solid #e8edf4;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.communication-row div {
  display: grid;
  gap: 4px;
}

.communication-row p {
  white-space: pre-wrap;
  margin: 6px 0 0;
  color: #596579;
}

.template-card {
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

.template-card summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* VisaDesk Professional v3.0 — Milestone 5 */
.document-editor {
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.55;
  min-height: 620px;
}

.consistency-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0;
}

.consistency-counts span {
  background: var(--vd-primary-soft);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}

.consistency-issue {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid #e8edf4;
  padding: 12px 0;
}

.consistency-issue p {
  margin: 3px 0 0;
  white-space: pre-wrap;
}


/* VisaDesk Professional v3.0 — Milestone 6 */
.portal-body {
  background: var(--vd-bg);
  margin: 0;
  color: #1f2937;
}

.portal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: #16213e;
  color: white;
}

.portal-header div {
  display: grid;
  gap: 3px;
}

.portal-header span {
  opacity: .8;
  font-size: 13px;
}

.portal-shell {
  max-width: 1180px;
  margin: 25px auto;
  padding: 0 18px 40px;
}

.portal-application {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border-bottom: 1px solid #e6ebf2;
  padding: 14px 0;
}

.portal-application > div {
  display: grid;
  gap: 4px;
}

.portal-application .pipeline-progress {
  grid-column: 1 / -1;
}

.stats-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .stats-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .stats-6 {
    grid-template-columns: 1fr 1fr;
  }
}


/* VisaDesk Professional v3.0 RC1 */
.error-panel {
  max-width: 720px;
  margin: 60px auto;
  text-align: center;
}

.error-log-viewer {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 70vh;
  overflow: auto;
  background: #101827;
  color: #d8e4f2;
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.45;
}


/* VisaDesk Professional v3.1 Operations Edition */
.search-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.search-hero input {
  font-size: 18px;
  padding: 14px;
}

.notification-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  border-bottom: 1px solid #e7ecf3;
  padding: 14px 0;
}

.notification-row.unread {
  background: #f3f7ff;
  margin: 0 -15px;
  padding: 14px 15px;
}

.notification-row div {
  display: grid;
  gap: 4px;
}

.notification-row p {
  margin: 4px 0 0;
}

.operations-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.operation-item {
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-item span {
  font-size: 22px;
  font-weight: 900;
}

.operation-item.danger {
  background: #fff0f0;
  color: #8a1f1f;
}

.operation-item.warning {
  background: var(--vd-warning-soft);
  color: #7a5600;
}

.operation-item.success {
  background: #edf9f1;
  color: #24623a;
}

.stats-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 15px;
}

@media (max-width: 1200px) {
  .operations-checklist,
  .stats-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .operations-checklist,
  .stats-8,
  .export-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 550px) {
  .search-hero,
  .operations-checklist,
  .stats-8,
  .export-grid {
    grid-template-columns: 1fr;
  }
}


/* Strong sidebar height constraints */
.sidebar-brand,
.sidebar-user,
.sidebar-footer {
  min-height: max-content;
}

.sidebar-nav a {
  flex-shrink: 0;
}

/* On desktop, wheel scrolling over the sidebar stays inside the menu. */
@media (min-width: 901px) {
  .sidebar-nav {
    max-height: 100%;
  }
}


/* VisaDesk Professional v3.6 — Modern Student Portal */
.portal-modern {
  background:
    radial-gradient(circle at top right, rgba(80, 111, 255, .12), transparent 32%),
    #f4f7fc;
  color: #182338;
}

.portal-header-modern {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 70px;
  padding: 12px max(20px, calc((100vw - 1320px) / 2));
  background: rgba(18, 29, 52, .97);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(15, 27, 50, .16);
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.portal-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius);
  background: linear-gradient(135deg, #5c7cff, var(--vd-primary));
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(58, 91, 210, .35);
}

.portal-brand > span:last-child,
.portal-profile-chip > span:last-child {
  display: grid;
  gap: 1px;
}

.portal-brand small,
.portal-profile-chip small {
  opacity: .68;
  font-size: 11px;
}

.portal-notification-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius);
  background: rgba(255,255,255,.10);
  color: white;
  font-size: 18px;
}

.portal-notification-button.has-alert {
  animation: portalPulse 1.8s infinite;
  background: rgba(255, 190, 55, .18);
}

.portal-notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff4d5f;
  color: white;
  font-size: 10px;
  font-weight: 900;
  border: 2px solid #121d34;
}

@keyframes portalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.portal-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.portal-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7ecff;
  color: #2447a8;
  font-weight: 900;
}

.portal-header-link,
.portal-logout {
  background: rgba(255,255,255,.10) !important;
  color: white !important;
  border-color: rgba(255,255,255,.15) !important;
}

.portal-shell-modern {
  max-width: 1320px;
  padding-top: 26px;
}

.portal-toast {
  position: relative;
  border-radius: var(--vd-radius);
  padding: 13px 16px;
  margin-bottom: 14px;
  font-weight: 700;
}

.portal-toast.success {
  background: #eaf8ee;
  color: #23613a;
  border: 1px solid #bfe2c8;
}

.portal-toast.info {
  background: #edf3ff;
  color: #244990;
  border: 1px solid #c8d7ff;
}

.portal-message-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff1d6, #fff9eb);
  color: #6e4b00;
  border: 1px solid #efd298;
  box-shadow: 0 8px 24px rgba(134, 91, 0, .08);
}

.portal-message-alert-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius);
  background: white;
  font-size: 21px;
}

.portal-message-alert > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.portal-alert-arrow {
  font-size: 22px;
}

.portal-announcement-modern {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  background: linear-gradient(135deg, #f0f4ff, #e9efff);
  border-color: #cdd9ff;
  color: #253f82;
}

.portal-announcement-icon {
  font-size: 22px;
}

.portal-hero {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 24px;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 22px;
  color: white;
  background:
    linear-gradient(135deg, rgba(31, 60, 136, .97), rgba(70, 102, 219, .95)),
    var(--vd-primary);
  box-shadow: 0 18px 42px rgba(42, 71, 166, .24);
  overflow: hidden;
  position: relative;
}

.portal-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  right: -120px;
  top: -150px;
  background: rgba(255,255,255,.08);
}

.portal-eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
}

.portal-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 44px);
}

.portal-hero p {
  max-width: 670px;
  margin: 0;
  opacity: .86;
  font-size: 15px;
}

.portal-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.portal-primary-action {
  background: linear-gradient(135deg, #4269e8, #2850c5) !important;
  color: white !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(44, 80, 194, .22);
}

.portal-hero .portal-primary-action {
  background: white !important;
  color: #23469e !important;
}

.portal-secondary-action {
  background: rgba(255,255,255,.12) !important;
  color: white !important;
  border-color: rgba(255,255,255,.24) !important;
}

.portal-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 150px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}

.portal-hero-visual > span {
  font-size: 42px;
}

.portal-hero-visual strong {
  font-size: 34px;
}

.portal-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.portal-metric-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 84px;
  padding: 15px;
  background: white;
  border: 1px solid #e3e9f3;
  border-radius: var(--vd-radius-lg);
  box-shadow: 0 8px 25px rgba(30, 50, 85, .06);
}

.portal-metric-card > div {
  display: grid;
  gap: 2px;
}

.portal-metric-card strong {
  font-size: 23px;
}

.portal-metric-card small {
  color: #778297;
}

.portal-metric-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius);
  background: var(--vd-primary-soft);
  color: var(--vd-primary);
  font-size: 18px;
  font-weight: 900;
}

.portal-metric-card.positive .portal-metric-icon {
  background: #e8f8ed;
  color: #2f7c48;
}

.portal-metric-card.warning .portal-metric-icon {
  background: #fff4df;
  color: #a46b00;
}

.portal-metric-card.danger .portal-metric-icon {
  background: #ffeaea;
  color: #a82f38;
}

.portal-metric-card.notification {
  border-color: #f0cd79;
  background: #fffaf0;
}

.portal-section-card {
  padding: 21px;
  margin-bottom: 18px;
  background: white;
  border: 1px solid #e2e8f1;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(34, 52, 82, .06);
}

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

.portal-section-heading > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.portal-section-heading h2 {
  margin: 0;
  font-size: 20px;
}

.portal-section-heading p {
  margin: 2px 0 0;
  color: #7a8598;
  font-size: 12px;
}

.portal-section-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius);
  background: var(--vd-primary-soft);
  font-size: 18px;
}

.portal-count-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f4f8;
  color: #667287;
  font-size: 11px;
  font-weight: 800;
}

.portal-application-modern {
  padding: 18px;
  border: 1px solid #e3e9f3;
  border-radius: var(--vd-radius-lg);
  background: linear-gradient(180deg, #fff, #fbfcff);
}

.portal-application-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.portal-application-title h3 {
  margin: 7px 0 3px;
  font-size: 20px;
}

.portal-application-title p {
  margin: 0;
  color: #778196;
}

.portal-country-pill,
.portal-status-pill {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.portal-country-pill {
  background: #edf2ff;
  color: var(--vd-primary);
}

.portal-status-pill {
  background: #eaf8ee;
  color: #2b7041;
}

.portal-progress-header {
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  font-size: 12px;
  color: #68748a;
}

.portal-large-progress {
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #e8edf5;
}

.portal-large-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vd-primary), #6282f6);
}

.portal-journey {
  display: grid;
  grid-template-columns: repeat(10, minmax(70px, 1fr));
  gap: 5px;
  margin-top: 20px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.portal-journey-step {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 75px;
  color: #a1a9b7;
  text-align: center;
}

.portal-journey-step > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f6;
  font-size: 11px;
}

.portal-journey-step.complete {
  color: #39764a;
}

.portal-journey-step.complete > span {
  background: #dff3e5;
}

.portal-journey-step.current {
  color: var(--vd-primary);
  font-weight: 800;
}

.portal-journey-step.current > span {
  background: var(--vd-primary);
  color: white;
  box-shadow: 0 0 0 5px #e8edff;
}

.portal-journey-step small {
  font-size: 10px;
}

/* Automation tab - Student Portal Journey panel. Reuses .portal-journey /
   .portal-journey-step above (originally built for the student's live
   progress display, never wired to a template) as the "FrontForce-style"
   visual overview strip; adds only the plain-HTML <details> card list
   styling below it, no JS framework required. */
a.portal-journey-step {
  text-decoration: none;
}

.journey-panel > p {
  color: #6b7280;
  max-width: 900px;
}

.journey-step-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.journey-step-card {
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  padding: 4px 16px;
  background: #fff;
}

.journey-step-card.is-muted {
  background: #f7f8fb;
}

.journey-step-card summary {
  cursor: pointer;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}

.journey-step-card summary::-webkit-details-marker {
  display: none;
}

.journey-step-body {
  padding: 4px 0 16px;
  display: grid;
  gap: 12px;
}

.journey-overrides {
  border-top: 1px dashed #e6e9f0;
  padding-top: 12px;
}

.journey-overrides h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.portal-application-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.portal-application-meta span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--vd-bg);
  font-size: 11px;
}

.portal-application-meta b {
  color: #7a8496;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.portal-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.portal-upload-form {
  display: grid;
  gap: 12px;
}

.portal-upload-form label {
  display: grid;
  gap: 5px;
}

.portal-dropzone {
  place-items: center;
  padding: 24px !important;
  text-align: center;
  border: 2px dashed #c9d4eb !important;
  border-radius: 14px;
  background: #f8faff;
  cursor: pointer;
}

.portal-dropzone > span {
  font-size: 28px;
}

.portal-dropzone input {
  width: 100%;
  margin-top: 8px;
}

.portal-task-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f5;
}

.portal-task-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2ff;
  color: var(--vd-primary);
}

.portal-task-card > div {
  display: grid;
  gap: 2px;
}

.portal-task-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f3f5f8;
  color: #6e798b;
  font-size: 10px;
}

.portal-empty-success {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #4a7658;
}

.portal-empty-success > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5f6ea;
  font-size: 24px;
}

.portal-checklist-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.portal-checklist-status {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
  font-weight: 900;
}

.portal-checklist-item.complete .portal-checklist-status {
  background: #dff3e5;
  color: #2c7542;
}

.portal-checklist-item.missing .portal-checklist-status {
  background: #ffe6c0;
  color: #9c6200;
}

.portal-checklist-label {
  font-size: 10px;
  font-weight: 800;
  color: #707b8e;
}

.portal-document-grid {
  display: grid;
  gap: 10px;
}

.portal-document-card {
  display: grid;
  grid-template-columns: auto 1fr minmax(130px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e5eaf2;
  border-radius: 13px;
}

.portal-document-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf2ff;
}

.portal-document-info,
.portal-document-status {
  display: grid;
  gap: 2px;
}

.portal-document-info small,
.portal-document-info span,
.portal-document-status small {
  color: #788397;
  font-size: 10px;
}

.portal-document-status > span {
  font-size: 11px;
  font-weight: 800;
}

.portal-document-card.status-approved {
  border-left: 4px solid #49a365;
}

.portal-document-card.status-rejected {
  border-left: 4px solid #d6535c;
}

.portal-document-card.status-under-review,
.portal-document-card.status-received {
  border-left: 4px solid #e6aa35;
}

.portal-timeline-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  padding-bottom: 15px;
}

.portal-timeline-row > span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #4269e8;
  box-shadow: 0 0 0 4px #eaf0ff;
}

.portal-timeline-row p {
  margin: 3px 0;
  color: #5e6b80;
}

.portal-message-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 16px;
}

.portal-message-compose textarea {
  resize: vertical;
}

.portal-chat {
  display: grid;
  gap: 11px;
  max-height: 550px;
  overflow-y: auto;
  padding-right: 5px;
}

.portal-chat-message {
  display: flex;
  gap: 9px;
  align-items: end;
}

.portal-chat-message.student-message {
  flex-direction: row-reverse;
}

.portal-chat-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e6ecff;
  color: var(--vd-primary);
  font-weight: 900;
}

.portal-chat-bubble {
  position: relative;
  max-width: 82%;
  padding: 11px 13px;
  border-radius: 14px 14px 14px 4px;
  background: #f1f4f8;
}

.student-message .portal-chat-bubble {
  border-radius: 14px 14px 4px 14px;
  background: var(--vd-primary);
  color: white;
}

.portal-chat-bubble > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.portal-chat-bubble small {
  opacity: .62;
  font-size: 9px;
}

.portal-chat-bubble p {
  margin: 5px 0 0;
  white-space: pre-wrap;
}

.unread-message .portal-chat-bubble {
  background: #fff5df;
  border: 1px solid #efcf8c;
  box-shadow: 0 8px 20px rgba(143, 96, 0, .08);
}

.portal-new-label {
  position: absolute;
  top: -8px;
  right: -5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ff4d5f;
  color: white;
  font-size: 8px;
  font-weight: 900;
}

.portal-mark-read {
  background: var(--vd-primary-soft) !important;
  color: var(--vd-primary) !important;
}

@media (max-width: 1050px) {
  .portal-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-header-link {
    display: none;
  }
}

@media (max-width: 820px) {
  .portal-header-modern {
    padding: 10px 14px;
  }

  .portal-profile-chip > span:last-child {
    display: none;
  }

  .portal-hero {
    grid-template-columns: 1fr;
  }

  .portal-hero-visual {
    display: none;
  }

  .portal-two-column {
    grid-template-columns: 1fr;
  }

  .portal-document-card {
    grid-template-columns: auto 1fr;
  }

  .portal-document-status,
  .portal-document-card > .button {
    grid-column: 2;
  }
}

@media (max-width: 570px) {
  .portal-brand > span:last-child,
  .portal-logout {
    display: none;
  }

  .portal-shell-modern {
    padding: 16px 11px 30px;
  }

  .portal-hero {
    padding: 22px;
  }

  .portal-hero-actions,
  .portal-message-compose {
    grid-template-columns: 1fr;
    display: grid;
  }

  .portal-metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portal-section-card {
    padding: 15px;
  }

  .portal-application-title {
    display: grid;
  }

  .portal-checklist-item {
    grid-template-columns: auto 1fr;
  }

  .portal-checklist-label {
    grid-column: 2;
  }
}


/* VisaDesk Professional v3.7 — Student Action Center */
.portal-task-action-card {
  align-items: start;
}

.portal-task-submit-form {
  width: 310px;
  display: grid;
  gap: 8px;
  padding: 10px;
  margin-top: 8px;
  background: #f8faff;
  border: 1px solid #dce5f7;
  border-radius: var(--vd-radius);
}

.portal-task-submit-form textarea,
.portal-task-submit-form input {
  width: 100%;
}

.portal-appointment-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.portal-appointment-card,
.portal-admin-action-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e3e9f3;
  border-radius: 14px;
  background: #fbfcff;
}

.portal-appointment-card div,
.portal-admin-action-card > div {
  display: grid;
  gap: 4px;
}

.portal-appointment-card p,
.portal-admin-action-card p {
  margin: 4px 0;
}

.portal-inline-read {
  margin-top: 7px;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #8a5c00;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 760px) {
  .portal-appointment-card,
  .portal-admin-action-card {
    grid-template-columns: 1fr;
  }

  .portal-task-submit-form {
    width: min(100%, 310px);
  }
}


/* VisaDesk v3.7.1 — Clean Student Portal */
.portal-clean-body {
  margin: 0;
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.clean-portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vd-sidebar);
  box-shadow: 0 5px 20px rgba(20, 31, 53, .16);
}

.clean-portal-header-inner {
  max-width: 1320px;
  min-height: 68px;
  margin: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

.clean-portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.clean-portal-brand > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--vd-primary);
  font-weight: 900;
}

.clean-portal-brand > div,
.clean-portal-user > div:nth-child(2) {
  display: grid;
  gap: 1px;
}

.clean-portal-brand small,
.clean-portal-user small {
  opacity: .65;
  font-size: 10px;
}

.clean-portal-nav {
  display: flex;
  align-items: stretch;
  gap: 3px;
  overflow-x: auto;
}

.clean-portal-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 68px;
  padding: 0 13px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.clean-portal-nav a.active {
  color: white;
  background: rgba(255,255,255,.08);
}

.clean-portal-nav a.active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 3px;
  background: #6f8cff;
  border-radius: 3px 3px 0 0;
}

.clean-portal-nav b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: white;
  font-size: 9px;
}

.clean-portal-nav b.alert {
  background: #ef4d5b;
}

.clean-portal-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.clean-portal-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dfe7ff;
  color: #294fae;
  font-weight: 900;
}

.clean-portal-user a,
.clean-portal-user button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  cursor: pointer;
}

.clean-portal-shell {
  max-width: 1240px;
  margin: auto;
  padding: 28px 20px 50px;
}

.clean-toast,
.clean-announcement {
  padding: 13px 15px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid;
}

.clean-toast.success {
  background: #ecf8ef;
  border-color: #c6e5cd;
  color: #25603a;
}

.clean-toast.info {
  background: #edf3ff;
  border-color: #ccd9fb;
  color: #294e9d;
}

.clean-announcement {
  background: #fff9e8;
  border-color: #ead9a0;
  color: #684f0b;
}

.clean-announcement p {
  margin: 4px 0 0;
}

.clean-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 20px;
}

.clean-page-heading > div > span {
  color: var(--vd-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.clean-page-heading h1 {
  margin: 4px 0 5px;
  font-size: 30px;
}

.clean-page-heading p {
  margin: 0;
  color: #6e788b;
}

.clean-progress-summary {
  min-width: 140px;
  padding: 13px 16px;
  display: grid;
  gap: 2px;
  text-align: right;
  border-radius: var(--vd-radius);
  background: var(--vd-sidebar);
  color: white;
}

.clean-progress-summary strong {
  font-size: 26px;
}

.clean-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.clean-summary-grid article {
  padding: 15px;
  display: grid;
  gap: 3px;
  background: white;
  border: 1px solid #e1e7f0;
  border-radius: var(--vd-radius);
}

.clean-summary-grid article.attention {
  border-color: #e9c885;
  background: #fffaf0;
}

.clean-summary-grid strong {
  font-size: 22px;
}

.clean-summary-grid span {
  color: #738095;
  font-size: 11px;
}

.clean-overview-grid,
.clean-two-column,
.clean-message-layout {
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 16px;
  margin-bottom: 16px;
}

.clean-two-column,
.clean-message-layout {
  grid-template-columns: 1fr 1fr;
}

/* Portal Ireland Help page reflow (2026-08-16): "Still have questions?"
   and "Ready to continue?" moved out of the bottom of the page into a
   right-side rail that runs in parallel with the FAQ list, so a student
   sees their next action immediately instead of scrolling past every
   FAQ entry first. */
.clean-help-shell {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: start;
}

.clean-help-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .clean-help-shell {
    grid-template-columns: 1fr;
  }
  .clean-help-rail {
    position: static;
  }
}

.clean-card {
  padding: 19px;
  margin-bottom: 16px;
  background: white;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  box-shadow: 0 7px 24px rgba(30, 49, 81, .05);
}

.clean-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 15px;
}

.clean-card-heading h2 {
  margin: 0;
  font-size: 18px;
}

.clean-card-heading p {
  margin: 3px 0 0;
  color: #7b8597;
  font-size: 11px;
}

.clean-application-card {
  padding: 17px;
  border: 1px solid #e4e9f1;
  border-radius: var(--vd-radius);
  background: #fcfdff;
}

.clean-application-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.clean-application-top h3 {
  margin: 7px 0 3px;
  font-size: 19px;
}

.clean-application-top p {
  margin: 0;
  color: #778196;
}

.clean-country,
.clean-status {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.clean-country {
  background: #ebf0ff;
  color: var(--vd-primary);
}

.clean-status {
  height: fit-content;
  background: #e8f6ec;
  color: #2c7041;
}

.clean-progress-row {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  color: #6b7689;
  font-size: 11px;
}

.clean-progress-bar {
  height: 9px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf3;
}

.clean-progress-bar i {
  display: block;
  height: 100%;
  background: var(--vd-primary);
  border-radius: inherit;
}

.clean-current-stage {
  margin-top: 14px;
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 9px;
  background: #f3f6fc;
}

.clean-current-stage small,
.clean-application-details small {
  color: #7d8799;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.clean-application-details {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.clean-application-details span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e7ebf1;
  border-radius: var(--vd-radius-sm);
}

.clean-action-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 13px;
  margin-bottom: 9px;
  color: #23304a;
  border: 1px solid #e2e7ee;
  border-radius: 10px;
}

/* UI POLISH FIX (2026-08-19) - owner report: "priority actions - all task
   and documents are mixed - improve UI." A type icon (same icon set/style
   as the pending-actions cards above) plus a small uppercase type chip so
   the kind of action reads at a glance instead of blending into one flat
   text feed. */
.clean-action-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf2ff;
  color: var(--vd-primary);
  margin-top: 1px;
}

.clean-action-icon svg {
  width: 16px;
  height: 16px;
}

.clean-action-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.clean-action-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clean-action-type-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1f6;
  color: #5b6577;
  white-space: nowrap;
}

.clean-action-open {
  margin-top: 6px;
}

.clean-action-item.high,
.clean-action-item.tier-overdue,
.clean-action-item.tier-correction-required {
  background: #fff5f3;
  border-color: #efc9c2;
}

.clean-action-item.tier-critical,
.clean-action-item.tier-urgent {
  background: #fffaf0;
  border-color: #e9c885;
}

.clean-action-item > div {
  display: grid;
  gap: 2px;
}

.clean-action-item small {
  color: #7b8596;
}

.clean-action-item > span {
  color: var(--vd-primary);
  font-size: 11px;
  font-weight: 800;
}

.clean-action-group-heading {
  margin: 17px 0 8px;
  padding-bottom: 6px;
  color: #35445f;
  border-bottom: 1px solid #e7ebf1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.clean-card-heading + .clean-action-group-heading { margin-top: 5px; }

.clean-action-item.action-type-document,
.clean-action-item.action-type-document-summary {
  background: #f7faff;
  border-color: #cddcf3;
}

.clean-action-item.action-type-document-summary {
  border-style: dashed;
  background: #fff9ec;
  border-color: #e4bd68;
}

.clean-action-item.action-type-task {
  background: #f4fbf7;
  border-color: #c7e3d2;
}

.clean-action-item.action-type-payment,
.clean-action-item.action-type-visa-file {
  background: #faf6ff;
  border-color: #d9c8ed;
}

.clean-action-item.action-type-task .clean-action-icon {
  background: #e3f4e9;
  color: #277348;
}

.clean-action-item.action-type-payment .clean-action-icon,
.clean-action-item.action-type-visa-file .clean-action-icon {
  background: #eee3fa;
  color: #7040a0;
}

.clean-action-amount {
  color: #7040a0;
  font-size: 16px;
  line-height: 1.25;
}

.clean-complete-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #3e704b;
  text-align: center;
}

.clean-complete-state > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5f5e9;
  font-size: 23px;
}

.clean-pending-actions-heading {
  margin-bottom: 12px;
}

.clean-pending-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.clean-pending-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: white;
  border: 1px solid #e4e9f1;
  border-radius: var(--vd-radius);
  color: #23304a;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.clean-pending-card:hover {
  border-color: var(--vd-primary);
  box-shadow: var(--vd-shadow-sm);
}

.clean-pending-card.has-pending {
  border-color: #e9c885;
  background: #fffaf0;
}

.clean-pending-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf2ff;
  color: var(--vd-primary);
}

.clean-pending-card.has-pending .clean-pending-icon {
  background: #fff1d9;
  color: #9a6a1f;
}

.clean-pending-icon svg {
  width: 18px;
  height: 18px;
}

.clean-pending-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.clean-pending-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.clean-pending-card-top h3 {
  margin: 0;
  font-size: 13px;
}

.clean-pending-count {
  font-size: 16px;
  font-weight: 800;
  color: #9a6a1f;
}

.clean-pending-card-body p {
  margin: 0;
  font-size: 11px;
  color: #7b8597;
}

.clean-pending-card-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--vd-primary);
}

@media (max-width: 900px) {
  .clean-pending-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .clean-pending-actions-grid {
    grid-template-columns: 1fr;
  }
}

.clean-quick-links {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}

.clean-quick-links a {
  color: var(--vd-primary);
  font-size: 11px;
  font-weight: 700;
}

.clean-stage-list {
  display: grid;
  grid-template-columns: repeat(10, minmax(72px, 1fr));
  gap: 6px;
  overflow-x: auto;
}

.clean-stage-list > div {
  min-width: 74px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #9aa3b2;
  text-align: center;
}

.clean-stage-list > div > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
}

.clean-stage-list > div.complete {
  color: #337148;
}

.clean-stage-list > div.complete > span {
  background: #dff2e4;
}

.clean-stage-list > div.current {
  color: var(--vd-primary);
  font-weight: 800;
}

.clean-stage-list > div.current > span {
  background: var(--vd-primary);
  color: white;
}

.clean-stage-list small {
  font-size: 9px;
}

.clean-danger-card {
  background: #fffafa;
  border-color: #efcccc;
}

.clean-correction {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #f0dddd;
}

.clean-correction:first-of-type {
  border-top: 0;
}

.clean-correction h3,
.clean-correction p {
  margin: 4px 0;
}

.clean-correction form,
.clean-form {
  display: grid;
  gap: 10px;
}

.clean-form label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
}

.clean-form input,
.clean-form select,
.clean-form textarea,
.clean-correction input,
.clean-correction textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d8dee8;
  border-radius: var(--vd-radius-sm);
  background: white;
}

.clean-form button,
.clean-correction button {
  padding: 10px 13px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.clean-form.compact {
  width: 320px;
  margin-top: 9px;
}

.clean-checklist,
.clean-document-list,
.clean-task-list,
.clean-appointment-list {
  display: grid;
  gap: 8px;
}

.clean-checklist article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e5e9ef;
  border-radius: 9px;
}

.clean-checklist article.complete {
  background: #f1f9f3;
}

.clean-checklist article.missing {
  background: #fff8ec;
}

.clean-checklist article > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
  font-weight: 900;
}

.clean-checklist article > div {
  display: grid;
  gap: 2px;
}

.clean-checklist small,
.clean-checklist b {
  font-size: 9px;
  color: #7d8798;
}

.clean-document-list article {
  display: grid;
  grid-template-columns: 1fr 170px auto;
  gap: 15px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e4e9f0;
  border-left: 4px solid #d0d6df;
  border-radius: 9px;
}

.clean-document-list article.status-approved {
  border-left-color: #4aa366;
}

.clean-document-list article.status-rejected {
  border-left-color: #cf4e57;
}

.clean-document-list article.status-received,
.clean-document-list article.status-under-review {
  border-left-color: #dda433;
}

.clean-document-list article > div {
  display: grid;
  gap: 2px;
}

.clean-document-list small,
.clean-document-list span {
  color: #7a8597;
  font-size: 10px;
}

.clean-document-list a {
  color: var(--vd-primary);
  font-size: 11px;
  font-weight: 800;
}

.clean-task-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 15px;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
}

.clean-task-list h3 {
  margin: 0 0 4px;
}

.clean-task-list p {
  margin: 7px 0 0;
  color: #647087;
}

.clean-task-list summary {
  padding: 8px 11px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: white;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.clean-submitted {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eaf6ed;
  color: #317044;
  font-size: 10px;
  font-weight: 800;
}

.clean-task-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.clean-task-actions form {
  margin: 0;
}

.clean-ack-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf3ff;
  color: #294e9d;
  font-size: 10px;
  font-weight: 800;
}

.clean-secondary-button {
  padding: 9px 12px;
  border: 1px solid #ccd5e5;
  border-radius: var(--vd-radius-sm);
  background: white;
  color: var(--vd-primary);
  font-weight: 800;
  cursor: pointer;
}

.clean-chat {
  max-height: 620px;
  overflow-y: auto;
  display: grid;
  gap: 9px;
}

.clean-chat article {
  max-width: 82%;
  padding: 11px 13px;
  border-radius: var(--vd-radius);
  background: #f1f4f8;
}

.clean-chat article.student {
  margin-left: auto;
  background: var(--vd-primary);
  color: white;
}

.clean-chat article.unread {
  background: var(--vd-warning-soft);
  border: 1px solid #ecd18f;
}

.clean-chat article > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.clean-chat p {
  margin: 6px 0;
  white-space: pre-wrap;
}

.clean-chat small {
  opacity: .62;
  font-size: 9px;
}

.clean-chat button {
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: white;
  color: #7b5708;
  font-size: 9px;
  cursor: pointer;
}

.clean-appointment-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
}

.clean-appointment-list article > div {
  display: grid;
  gap: 3px;
}

.clean-appointment-list p {
  margin: 4px 0;
}

.clean-appointment-list > article > span {
  height: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-timeline article {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding-bottom: 17px;
}

.clean-timeline article > span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--vd-primary);
  box-shadow: 0 0 0 4px #eaf0ff;
}

.clean-timeline p {
  margin: 4px 0;
  color: #627087;
}

.clean-empty {
  padding: 28px 15px;
  color: #7b8596;
  text-align: center;
}

/* VisaDesk Basic Version milestone 2 - collapsible "add a record" forms
   used throughout My Information / Application details / Tuition. */
.portal-add-record {
  margin-top: 14px;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fafbfd;
}
.portal-add-record summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--consultancy-accent, #3157C8);
  padding: 6px 0;
}
.portal-add-record .panel.form-grid {
  margin-top: 10px;
  border: none;
  padding: 0;
}
.portal-add-record-note {
  grid-column: 1 / -1;
  color: #7b8596;
  font-size: 12px;
  margin: 6px 0 0;
}

/* VisaDesk Basic Version milestone 3 - "My Information" rework: progress
   summary card, per-section status chips, and inline per-row edit forms. */
.information-progress-card .clean-card-heading { margin-bottom: 4px; }
.information-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef1f5;
  overflow: hidden;
  margin: 6px 0 14px;
}
.information-progress-bar i {
  display: block;
  height: 100%;
  background: var(--consultancy-accent, #3157C8);
  border-radius: 999px;
}
.information-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #eef1f5;
  color: #667085;
  white-space: nowrap;
}
.status-chip.status-completed { background: #e8f8ee; color: #16703a; }
.status-chip.status-incomplete { background: #fff6dd; color: #8b6500; }
.status-chip.status-not-started { background: #eef1f5; color: #667085; }
.clean-card-heading .status-chip { margin-left: auto; }

/* Mandatory yes/no declaration question (Family Abroad / Property / Visa
   History sections) - makes "student has nothing to declare" an explicit,
   recorded answer instead of an empty section nobody can tell apart from
   "not filled in yet". */
.portal-declare-question {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--vd-border-soft, #e0e5ef);
  border-radius: var(--vd-radius, 10px);
  background: #f7f9fc;
}
.portal-declare-question p {
  margin: 0 0 10px;
  font-size: 14px;
}
.portal-declare-question small {
  display: block;
  margin-top: 4px;
  color: var(--vd-muted, #68738a);
  font-weight: 500;
}
.portal-declare-question.important {
  border-color: var(--vd-warning);
  background: var(--vd-warning-soft);
}
.portal-declare-form {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.portal-declare-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  cursor: pointer;
}
.portal-declare-option input {
  width: auto;
  margin: 0;
}
.portal-declare-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vd-warning);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}
.information-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.portal-inline-edit {
  display: inline-block;
}
.portal-inline-edit summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--consultancy-accent, #3157C8);
  list-style: none;
}
.portal-inline-edit summary::-webkit-details-marker { display: none; }
.portal-inline-edit .panel.form-grid {
  position: absolute;
  z-index: 5;
  margin-top: 8px;
  min-width: 280px;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(20, 26, 41, 0.12);
}
.compact-form { grid-template-columns: 1fr; }

@media (max-width: 1050px) {
  /* Previously this just set .clean-portal-user to display:none with no
     replacement, meaning a student on any tablet/phone (anything <=1050px)
     had NO visible way to log out or change their password - the avatar,
     name, "Password" link and "Log out" button all vanished together.
     Now the user block moves to its own header row (via grid-template-
     areas) and stays visible, just without the name/ID text, so it stays
     compact. */
  .clean-portal-header-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand user"
      "nav nav";
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .clean-portal-brand {
    grid-area: brand;
  }

  .clean-portal-nav {
    grid-area: nav;
  }

  .clean-portal-user {
    grid-area: user;
    justify-content: flex-end;
  }

  .clean-portal-user > div:nth-child(2) {
    display: none;
  }

  .clean-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .clean-portal-header-inner {
    display: block;
    padding-top: 10px;
  }

  .clean-portal-brand {
    margin-bottom: 8px;
  }

  .clean-portal-nav a {
    min-height: 46px;
  }

  .clean-overview-grid,
  .clean-two-column,
  .clean-message-layout,
  .clean-correction {
    grid-template-columns: 1fr;
  }

  .clean-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .clean-page-heading {
    align-items: start;
  }

  .clean-progress-summary {
    display: none;
  }

  .clean-document-list article,
  .clean-task-list article {
    grid-template-columns: 1fr;
  }

  .clean-form.compact {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .clean-portal-shell {
    padding: 18px 10px 35px;
  }

  .clean-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .clean-page-heading h1 {
    font-size: 25px;
  }

  .clean-card {
    padding: 14px;
  }

  .clean-application-top {
    display: grid;
  }
}


/* VisaDesk v3.8 — Document Request Center */
.clean-request-list {
  display: grid;
  gap: 10px;
}

.clean-request-list article {
  padding: 14px;
  border: 1px solid #e2e7ef;
  border-left: 4px solid #8da0c6;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-request-list article.priority-high {
  border-left-color: #df9f2d;
}

.clean-request-list article.priority-urgent {
  border-left-color: #d94e58;
  background: #fffafa;
}

.clean-request-main {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.clean-request-main h3 {
  margin: 6px 0 3px;
}

.clean-request-main p {
  margin: 8px 0 0;
  color: #58667c;
}

/* Visa File instructions and per-document student/consultant conversation. */
.visa-file-instruction-box {
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid #bfd3f7;
  border-left: 4px solid var(--consultancy-accent, #3157c8);
  border-radius: 9px;
  background: #f3f7ff;
  color: #263a5b;
}

.visa-file-instruction-box.staff {
  margin-top: 9px;
  padding: 9px 11px;
}

.visa-file-instruction-box strong {
  display: block;
  margin-bottom: 4px;
  color: #173b78;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.visa-file-instruction-box p,
.visa-file-comment p {
  margin: 0;
  white-space: pre-wrap;
}

.visa-file-conversation {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #e2e7ef;
}

.visa-file-conversation.staff {
  margin: 0;
  padding: 10px 0 5px;
  border-top: 0;
}

.visa-file-conversation-heading,
.visa-file-comment > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.visa-file-conversation-heading span,
.visa-file-comment time,
.visa-file-no-comments {
  color: #738097;
  font-size: 11px;
}

.visa-file-comment-thread {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.visa-file-comment {
  max-width: 88%;
  padding: 9px 11px;
  border: 1px solid #dde5f0;
  border-radius: 9px;
  background: #f7f9fc;
}

.visa-file-comment.from-student {
  margin-left: auto;
  background: #eef4ff;
  border-color: #cadbf8;
}

.visa-file-comment p {
  margin-top: 4px;
  color: #34435c;
}

.visa-file-comment-form {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.visa-file-comment-form label {
  font-size: 12px;
  font-weight: 700;
}

.visa-file-comment-form textarea {
  width: 100%;
  min-height: 66px;
  resize: vertical;
}

.visa-file-comment-form .button {
  justify-self: start;
}

.visa-file-document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.visa-file-edit-panel {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  background: #fff;
}

.visa-file-edit-panel summary {
  cursor: pointer;
  color: var(--vd-primary, #3157c8);
  font-size: 12px;
  font-weight: 750;
}

.visa-file-edit-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(110px, .5fr);
  gap: 10px;
  margin-top: 11px;
}

.visa-file-edit-form .full-width,
.visa-file-edit-form .button {
  grid-column: 1 / -1;
}

.visa-file-edit-form .button {
  justify-self: start;
}

.visa-file-discussion-row > td {
  padding-top: 0;
  background: #fbfcfe;
}

@media (max-width: 700px) {
  .visa-file-edit-form { grid-template-columns: 1fr; }
  .visa-file-comment { max-width: 100%; }
}

/* Compact, differentiated staff Visa File cards. The former wide table is
   retained in the template for rolling-worker safety but not displayed. */
.visa-file-legacy-table { display: none !important; }

.visa-staff-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.visa-staff-card {
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-left: 4px solid #9aa9be;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 39, 70, .035);
}

.visa-staff-card.status-pending-upload { border-left-color: #98a5b8; }
.visa-staff-card.status-uploaded { border-left-color: #e1a126; }
.visa-staff-card.status-ready { border-left-color: #28a16b; }

.visa-staff-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #edf0f4;
}

.visa-staff-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.visa-staff-order {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 7px;
  background: #eef2f7;
  color: #596b83;
  font-size: 10px;
  font-weight: 800;
}

.visa-staff-title h3 {
  margin: 0 0 3px;
  color: #17263d;
  font-size: 13px;
  line-height: 1.25;
}

.visa-staff-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.visa-staff-state.pending { background: #edf1f5; color: #68788d; }
.visa-staff-state.review { background: #fff3d9; color: #986700; }
.visa-staff-state.published { background: #e4f7ed; color: #137048; }

.visa-staff-card-body {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) minmax(155px, .8fr) minmax(230px, 1.15fr);
  gap: 14px;
  align-items: center;
  padding: 9px 12px;
}

.visa-staff-instruction,
.visa-staff-file,
.visa-staff-actions {
  min-width: 0;
}

.visa-staff-instruction > strong,
.visa-staff-file > strong {
  display: block;
  margin-bottom: 3px;
  color: #77859a;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.visa-staff-instruction p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #425169;
  font-size: 10px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.visa-staff-file > span {
  display: block;
  overflow: hidden;
  color: #526178;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visa-staff-file-links,
.visa-staff-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 4px;
}

.visa-staff-file-links a {
  font-size: 10px;
  font-weight: 750;
}

.visa-staff-muted { color: #8995a7 !important; }

.visa-staff-upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.visa-staff-file-picker {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 6px 8px;
  border: 1px dashed #c8d1df;
  border-radius: 7px;
  background: #f8fafc;
  color: #607087;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.visa-staff-file-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.visa-staff-action-row { margin-top: 6px; }
.visa-staff-action-row form { margin: 0; }
.visa-staff-action-row form:has(.visa-staff-notify) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.visa-staff-notify {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: #68778d;
  font-size: 8px;
  font-weight: 700;
}
.visa-staff-notify input { margin: 0; }
.button.danger.ghost { background: transparent; color: #b84242; border-color: #e8c8c8; }

.visa-staff-card-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #edf0f4;
  background: #fafbfd;
}

.visa-staff-detail + .visa-staff-detail { border-left: 1px solid #e5eaf1; }

.visa-staff-detail > summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  color: #44546c;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.visa-staff-detail > summary::-webkit-details-marker { display: none; }
.visa-staff-detail > summary:hover { background: #f0f4f9; }
.visa-staff-detail > summary small { color: #929dae; font-size: 8px; font-weight: 600; }
.visa-staff-detail > summary b {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--vd-primary, #3157c8);
  color: #fff;
  font-size: 8px;
}

.visa-staff-detail[open] > summary { background: #eef3fa; color: var(--vd-primary, #3157c8); }
.visa-staff-detail .visa-file-edit-form,
.visa-staff-detail .visa-file-conversation { margin: 0; padding: 11px 12px; border-top: 1px solid #e4eaf1; }

@media (max-width: 980px) {
  .visa-staff-card-body { grid-template-columns: 1fr 1fr; }
  .visa-staff-actions { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .visa-staff-card-header { align-items: flex-start; }
  .visa-staff-card-body,
  .visa-staff-card-footer { grid-template-columns: 1fr; }
  .visa-staff-actions { grid-column: auto; }
  .visa-staff-detail + .visa-staff-detail { border-left: 0; border-top: 1px solid #e5eaf1; }
  .visa-staff-state { white-space: normal; text-align: center; }
}

/* Student Portal secondary surfaces polish (2026-08-20): Offer Letter,
   My Information profile, document history, instructions, notifications,
   and the Application navigation menu. */
.portal-clean-body .clean-portal-nav-group > button {
  display: flex;
  align-items: center;
  gap: 7px;
}
.portal-clean-body .portal-nav-chevron {
  margin-left: -3px;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1;
  transition: transform .16s ease;
}
.portal-clean-body .clean-portal-nav-group.open .portal-nav-chevron,
.portal-clean-body .clean-portal-nav-group:focus-within .portal-nav-chevron { transform: rotate(180deg); }
.portal-clean-body .clean-portal-nav-menu {
  min-width: 248px;
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15, 28, 53, .22);
}
.portal-clean-body .clean-portal-nav-menu a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  justify-content: initial;
  min-height: 43px;
  padding: 8px 10px;
  border-radius: 9px;
}
.portal-clean-body .clean-portal-nav-menu a + a { margin-top: 2px; }
.portal-clean-body .clean-portal-nav-menu a.active {
  box-shadow: inset 3px 0 0 var(--consultancy-accent, var(--vd-primary));
}

.portal-clean-body .portal-offer-file-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e7f0;
}
.portal-clean-body .portal-offer-file-header > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.portal-clean-body .portal-offer-file-header strong { overflow: hidden; color: #20324b; text-overflow: ellipsis; white-space: nowrap; }
.portal-clean-body .portal-offer-file-header small { color: #738198; }
.portal-clean-body .portal-offer-file-icon {
  flex: 0 0 auto;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: #eaf0ff;
  color: var(--consultancy-accent, #3157c8);
  font-size: 9px;
  font-weight: 900;
}
.portal-clean-body .portal-offer-card .workspace-document-buttons { margin: 0; }
.portal-clean-body .portal-offer-card .workspace-document-buttons a { min-height: 38px; display: inline-flex; align-items: center; }
.portal-clean-body .portal-offer-card form { display: inline-block; margin: 8px 0 0; }
.portal-clean-body .portal-offer-selected-note { margin: 8px 0 0; }

.portal-clean-body .portal-profile-card { padding: 20px; }
.portal-clean-body .portal-profile-details {
  grid-template-columns: minmax(120px, .7fr) minmax(150px, 1fr) minmax(120px, .7fr) minmax(150px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 12px;
  background: #e2e8f1;
}
.portal-clean-body .portal-profile-details dt,
.portal-clean-body .portal-profile-details dd { margin: 0; padding: 9px 11px; background: #fff; }
.portal-clean-body .portal-profile-details dt { color: #687991; font-size: 9px; }
.portal-clean-body .portal-profile-details dd { font-size: 12px; overflow-wrap: anywhere; }
.portal-clean-body .portal-profile-card .portal-add-record { margin-top: 13px; }

.portal-clean-body .portal-previous-documents {
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35, 57, 91, .06);
}
.portal-clean-body .portal-previous-documents .clean-card-heading b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3fa;
  color: #51647e;
}
.portal-clean-body .portal-previous-documents .portal-document-card { padding: 14px 15px; }
.portal-clean-body .portal-previous-documents .clean-document-list article {
  padding: 10px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  background: #f9fbfd;
}
.portal-clean-body .portal-previous-documents .clean-request-approved,
.portal-clean-body .portal-previous-documents .clean-request-submitted { border-radius: 8px; line-height: 1.4; }

.portal-clean-body .portal-instruction-list { display: grid; gap: 12px; }
.portal-clean-body .portal-instruction-card {
  position: relative;
  min-height: 108px;
  padding: 20px 22px 20px 74px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 7px 22px rgba(35, 57, 91, .055);
}
.portal-clean-body .portal-instruction-card h2 { margin: 0 0 7px; color: #223650; font-size: 17px; }
.portal-clean-body .portal-instruction-card > p { margin: 0; color: #5f6f86; line-height: 1.65; }
.portal-clean-body .portal-instruction-number {
  position: absolute;
  top: 19px;
  left: 20px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #edf2ff;
  color: var(--consultancy-accent, #3157c8);
  font-size: 11px;
  font-weight: 900;
}
.portal-clean-body .portal-instruction-card.is-highlighted { border-color: #efd79e; background: linear-gradient(135deg, #fffdf6, #fff8e8); }
.portal-clean-body .portal-instruction-card.is-highlighted .portal-instruction-number { background: #ffe9b8; color: #8c5b08; }

.portal-clean-body .portal-notifications-card { padding: 14px; border-radius: 18px; }
.portal-clean-body .portal-notification-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f3f6fb;
  color: #53657f;
}
.portal-clean-body .portal-notification-summary strong { color: var(--consultancy-accent, #3157c8); font-size: 22px; }
.portal-clean-body .portal-notification-summary span { font-weight: 750; }
.portal-clean-body .portal-notification-summary small { margin-left: auto; color: #7b889b; }
.portal-clean-body .portal-notification-list { gap: 9px; }
.portal-clean-body .portal-notification-item {
  padding: 14px 15px;
  border: 1px solid #e0e6ef;
  border-left: 3px solid #9aabc2;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.portal-clean-body .portal-notification-item:hover { border-color: #cbd7e7; box-shadow: 0 7px 18px rgba(36,57,87,.07); transform: translateY(-1px); }
.portal-clean-body .portal-notification-item.unread { border-left-color: var(--consultancy-accent, #3157c8); background: linear-gradient(135deg, #fff, #f7f9ff); opacity: 1; }
.portal-clean-body .portal-notification-item .clean-request-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.portal-clean-body .portal-notification-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #eaf0ff;
  color: var(--consultancy-accent, #3157c8);
  font-weight: 900;
}
.portal-clean-body .portal-notification-item h3 { margin: 6px 0 2px; font-size: 14px; }
.portal-clean-body .portal-notification-item p { margin: 5px 0 0; color: #66778f; }
.portal-clean-body .portal-notification-item .clean-request-main > a { align-self: center; padding: 7px 9px; border-radius: 8px; font-weight: 750; }
.portal-clean-body .portal-notification-item .clean-request-main > a:hover { background: #edf2ff; }

@media (max-width: 900px) {
  .portal-clean-body .portal-profile-details { grid-template-columns: minmax(120px, .7fr) minmax(150px, 1fr); }
}
@media (max-width: 620px) {
  .portal-clean-body .portal-profile-details { grid-template-columns: 1fr; background: #fff; }
  .portal-clean-body .portal-profile-details dt { padding-bottom: 2px; background: #f7f9fc; }
  .portal-clean-body .portal-profile-details dd { padding-top: 4px; margin-bottom: 2px; }
  .portal-clean-body .portal-instruction-card { padding: 66px 17px 17px; }
  .portal-clean-body .portal-instruction-number { top: 16px; left: 17px; }
  .portal-clean-body .portal-notification-item .clean-request-main { grid-template-columns: 36px minmax(0, 1fr); }
  .portal-clean-body .portal-notification-item .clean-request-main > a { grid-column: 2; justify-self: start; }
}

/* Student Workspace Overview — professional case dashboard (2026-08-20).
   Scoped to the staff-side student workspace overview and layered after
   earlier compactness rules so hierarchy wins without changing workflows. */
.student-workspace-page .workspace-identity-header {
  position: relative;
  min-height: 104px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #f4f7fd 72%, #edf3ff 100%);
  box-shadow: 0 10px 28px rgba(27, 49, 82, .08);
}
.student-workspace-page .workspace-identity-header::after {
  position: absolute;
  top: -78px;
  right: 12%;
  width: 210px;
  height: 210px;
  border: 28px solid rgba(49, 87, 200, .045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.student-workspace-page .workspace-identity-header > * { position: relative; z-index: 1; }
.student-workspace-page .workspace-identity-header h1 { margin: 3px 0 5px; color: #182a44; }
.student-workspace-page .workspace-heading-actions { align-self: flex-start; gap: 7px; }
.student-workspace-page .workspace-heading-actions .button { min-height: 38px; padding: 8px 13px; border-radius: 10px; }

.student-workspace-page .workspace-next-action-banner {
  position: relative;
  margin: 12px 0;
  padding: 15px 17px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(28, 54, 89, .07);
}
.student-workspace-page .workspace-next-action-banner strong { font-size: 14px; }
.student-workspace-page .workspace-next-action-banner .button { min-height: 36px; border-radius: 9px; }

.student-workspace-page .workspace-summary-strip {
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #e1e7f0;
  border-radius: 15px;
  background: #f8fafc;
}
.student-workspace-page .workspace-summary-strip div {
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #fff;
}
.student-workspace-page .workspace-summary-strip small { color: #76859a; font-size: 9px; font-weight: 800; letter-spacing: .055em; }
.student-workspace-page .workspace-summary-strip strong { margin-top: 4px; color: #243852; font-size: 13px; }

.student-workspace-page .workspace-tags-panel {
  padding: 10px 13px;
  border-radius: 12px;
  background: #fff;
}
.student-workspace-page .unified-workspace-tabs {
  padding: 7px;
  overflow-x: auto;
  border: 1px solid #dce4ef;
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 16px rgba(30, 52, 84, .06);
}
.student-workspace-page .unified-workspace-tabs a { min-height: 38px; border-radius: 8px; }

.student-workspace-page .case-health-panel {
  position: relative;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-top: 4px solid #223b61;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(29, 51, 82, .08);
}
.student-workspace-page .case-health-header { margin-bottom: 15px; }
.student-workspace-page .case-health-header h2 { font-size: 21px; }
.student-workspace-page .case-health-stage { background: #eaf0ff; border-color: #d3def7; }
.student-workspace-page .case-health-grid { gap: 9px; }
.student-workspace-page .case-health-grid article {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 82px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-top: 3px solid var(--metric-tone, #607995);
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, var(--metric-soft, #f6f8fb));
}
.student-workspace-page .case-health-grid article.health-documents { --metric-tone:#3157c8; --metric-soft:#f1f5ff; }
.student-workspace-page .case-health-grid article.health-information { --metric-tone:#7a4fd6; --metric-soft:#f6f2ff; }
.student-workspace-page .case-health-grid article.health-tuition { --metric-tone:#198754; --metric-soft:#effaf4; }
.student-workspace-page .case-health-grid article.health-visa { --metric-tone:#c27a17; --metric-soft:#fff8eb; }
.student-workspace-page .case-health-grid article.health-consultant { --metric-tone:#16848f; --metric-soft:#effafb; }
.student-workspace-page .case-health-grid article.health-work { --metric-tone:#b24755; --metric-soft:#fff3f4; }
.student-workspace-page .case-health-grid article.danger { border-color: #edc7cb; border-top-color: #c33d4d; background: linear-gradient(145deg, #fff, #fff0f1); }
.student-workspace-page .health-metric-icon {
  grid-row: 1 / span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--metric-tone) 14%, #fff);
  color: var(--metric-tone);
  font-size: 11px;
  font-weight: 900;
}
.student-workspace-page .case-health-grid small { align-self: end; }
.student-workspace-page .case-health-grid strong { align-self: start; font-size: 12px; line-height: 1.3; }
.student-workspace-page .case-next-action {
  margin-top: 13px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 20px rgba(15, 30, 54, .14);
}

.student-workspace-page .student-status-snapshot {
  padding: 21px 22px;
  border: 1px solid #dce4ef;
  border-top: 4px solid #3157c8;
  border-radius: 17px;
  box-shadow: 0 8px 24px rgba(29, 51, 82, .065);
}
.student-workspace-page .snapshot-heading { margin-bottom: 13px; }
.student-workspace-page .snapshot-heading h2 { font-size: 20px; }
.student-workspace-page .snapshot-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.student-workspace-page .snapshot-grid article {
  position: relative;
  min-height: 72px;
  padding: 11px;
  border: 1px solid #e0e6ef;
  border-bottom: 3px solid var(--snapshot-tone, #8090a5);
  border-radius: 10px;
  background: var(--snapshot-soft, #f8fafc);
}
.student-workspace-page .snapshot-grid .snapshot-approved { --snapshot-tone:#198754; --snapshot-soft:#effaf4; }
.student-workspace-page .snapshot-grid .snapshot-review,
.student-workspace-page .snapshot-grid .snapshot-pending { --snapshot-tone:#d28a1d; --snapshot-soft:#fff8ea; }
.student-workspace-page .snapshot-grid .snapshot-missing,
.student-workspace-page .snapshot-grid .snapshot-rejected { --snapshot-tone:#c33d4d; --snapshot-soft:#fff1f2; }
.student-workspace-page .snapshot-grid .snapshot-completion { --snapshot-tone:#3157c8; --snapshot-soft:#f1f5ff; }
.student-workspace-page .snapshot-grid strong { font-size: 20px; }
.student-workspace-page .snapshot-progress { height: 9px; overflow: hidden; border-radius: 999px; }
.student-workspace-page .snapshot-alert { padding: 10px 12px; border-left: 4px solid #d28a1d; background: #fff8e8; }

.student-workspace-page .workspace-overview-grid { gap: 14px; }
.student-workspace-page .workspace-overview-grid > .workspace-card {
  position: relative;
  min-height: 184px;
  padding: 18px 19px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-top: 4px solid var(--card-tone, #71839a);
  border-radius: 15px;
  background: linear-gradient(155deg, #fff 72%, var(--card-soft, #f6f8fb));
  box-shadow: 0 7px 20px rgba(31, 53, 83, .055);
}
.student-workspace-page .overview-profile-card { --card-tone:#2f6fd1; --card-soft:#f0f5ff; }
.student-workspace-page .overview-admission-card { --card-tone:#6546c7; --card-soft:#f6f2ff; }
.student-workspace-page .overview-finance-card { --card-tone:#198754; --card-soft:#effaf4; }
.student-workspace-page .overview-application-card { --card-tone:#c47b18; --card-soft:#fff8eb; }
.student-workspace-page .overview-documents-card { --card-tone:#7a4fd6; --card-soft:#f7f3ff; min-height: 0 !important; }
.student-workspace-page .overview-checklist-card { --card-tone:#3157c8; --card-soft:#f4f7ff; min-height: 0 !important; }
.student-workspace-page .workspace-card-title { padding-bottom: 11px; margin-bottom: 13px; border-bottom: 1px solid #e3e8f0; }
.student-workspace-page .workspace-card-title h2 { color: #223650; font-size: 16px; }
.student-workspace-page .workspace-card-title a { min-height: 31px; display: inline-flex; align-items: center; }

.student-workspace-page .overview-checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.student-workspace-page .overview-check-item {
  position: relative;
  min-height: 54px;
  padding: 10px 11px 10px 14px;
  border: 1px solid #dfe6ef;
  border-left: 4px solid #8292a7;
  border-radius: 10px;
  background: #fff;
}
.student-workspace-page .overview-check-item > span { color: #31445f; font-size: 11px; font-weight: 720; line-height: 1.35; }
.student-workspace-page .overview-check-actions { gap: 6px; }
.student-workspace-page .overview-check-actions strong {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #566880;
  font-size: 9px;
  white-space: nowrap;
}
.student-workspace-page .overview-check-item.status-approved { background:#f4fbf7; border-color:#d8eee2; border-left-color:#198754; }
.student-workspace-page .overview-check-item.status-approved .overview-check-actions strong { background:#dff3e8; color:#146e49; }
.student-workspace-page .overview-check-item.status-missing,
.student-workspace-page .overview-check-item.status-rejected { background:#fff6f6; border-color:#f0d9dc; border-left-color:#c33d4d; }
.student-workspace-page .overview-check-item.status-missing .overview-check-actions strong,
.student-workspace-page .overview-check-item.status-rejected .overview-check-actions strong { background:#f8dfe2; color:#9f2e3b; }
.student-workspace-page .overview-check-item.status-received,
.student-workspace-page .overview-check-item.status-submitted,
.student-workspace-page .overview-check-item.status-under-review { background:#f4f7ff; border-color:#dce4f6; border-left-color:#3157c8; }
.student-workspace-page .overview-check-item.status-received .overview-check-actions strong,
.student-workspace-page .overview-check-item.status-submitted .overview-check-actions strong,
.student-workspace-page .overview-check-item.status-under-review .overview-check-actions strong { background:#e0e8fb; color:#294da8; }

@media (max-width: 1200px) {
  .student-workspace-page .case-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-workspace-page .snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .student-workspace-page .overview-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-workspace-page .workspace-identity-header { align-items: flex-start; }
}
@media (max-width: 680px) {
  .student-workspace-page .workspace-identity-header { padding: 18px; }
  .student-workspace-page .case-health-grid,
  .student-workspace-page .snapshot-grid,
  .student-workspace-page .overview-checklist { grid-template-columns: 1fr; }
  .student-workspace-page .case-health-grid article { min-height: 72px; }
  .student-workspace-page .case-next-action,
  .student-workspace-page .workspace-next-action-banner { align-items: flex-start; flex-direction: column; }
  .student-workspace-page .case-next-action strong { text-align: left; }
}

/* Student Workspace + Student Portal information visual hierarchy.
   Color is used as a quiet category cue, never as the only status signal. */
.workspace-information-view,
.workspace-portal-view,
.portal-information-view {
  --section-blue: #3568c8;
  --section-violet: #7259bd;
  --section-amber: #b87919;
  --section-teal: #188979;
  --section-rose: #b45268;
  --section-slate: #65748a;
}

.workspace-information-view .workspace-section-heading,
.workspace-portal-view .workspace-section-heading {
  padding: 12px 14px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: linear-gradient(110deg, #f5f8ff, #fff);
}

.workspace-information-view .case-health-mini-grid article {
  position: relative;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #fff;
}

.workspace-information-view .case-health-mini-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--section-blue);
}

.workspace-information-view .case-health-mini-grid article:nth-child(2)::before { background: var(--section-violet); }
.workspace-information-view .case-health-mini-grid article:nth-child(3)::before { background: var(--section-amber); }
.workspace-information-view .case-health-mini-grid article:nth-child(4)::before { background: var(--section-teal); }

.workspace-information-view .workspace-card,
.workspace-portal-view .portal-control-card {
  --tone: var(--section-slate);
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--tone);
}

.workspace-information-view .workspace-card::before,
.workspace-portal-view .portal-control-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 8%, white), transparent);
  pointer-events: none;
}

.workspace-information-view .workspace-card > *,
.workspace-portal-view .portal-control-card > * { position: relative; }
.workspace-tone-profile { --tone: var(--section-blue) !important; }
.workspace-tone-preferences { --tone: #4382a8 !important; }
.workspace-tone-education { --tone: var(--section-violet) !important; }
.workspace-tone-employment { --tone: var(--section-amber) !important; }
.workspace-tone-family { --tone: var(--section-teal) !important; }
.workspace-tone-immigration { --tone: var(--section-rose) !important; }
.workspace-tone-property { --tone: #4d8c62 !important; }
.workspace-tone-financial { --tone: #b8860b !important; }
.workspace-tone-gap { --tone: #7d669b !important; }

.workspace-information-view .workspace-card-title,
.workspace-portal-view .workspace-card-title {
  margin-bottom: 9px;
  padding-bottom: 8px;
}

.workspace-information-view .workspace-card-title h2,
.workspace-portal-view .workspace-card-title h2 {
  color: var(--tone, #273750);
}

.workspace-information-view .workspace-details {
  grid-template-columns: 125px 1fr;
  gap: 5px 12px;
}

.workspace-information-view .workspace-details dt { font-size: 9px; }
.workspace-information-view .workspace-details dd { font-size: 12px; }

.workspace-information-view .workspace-empty,
.workspace-portal-view .workspace-empty {
  min-height: 0;
  padding: 11px 13px;
  border-style: dashed;
  background: color-mix(in srgb, var(--tone, #77859a) 4%, white);
  text-align: left;
}

.workspace-information-view .workspace-empty::before {
  content: "No records · ";
  color: var(--tone, #65748a);
  font-weight: 800;
}

.portal-control-progress { --tone: #26885e; }
.portal-control-payment { --tone: #2875c7; }
.portal-control-invoices { --tone: #7a61bd; }
.portal-control-login { --tone: #188a83; }

/* UI POLISH FIX (2026-08-19) - separates "Email Login Details" from
   "Reset Password" (two distinct actions on the Portal Login card) with a
   visible divider and consistent spacing, instead of the two forms
   running directly into each other. */
.portal-login-actions { display: flex; flex-direction: column; gap: 14px; }
.portal-login-actions form + form { padding-top: 14px; border-top: 1px solid #e9eef5; }
.portal-login-actions small { display: block; margin-top: 4px; color: #6b7688; }
.portal-control-agreement { --tone: #b57b20; }
.portal-control-visa { --tone: #29945f; }

.workspace-portal-view .portal-control-card:not(.portal-control-visa) {
  padding: 12px 14px;
  margin-bottom: 9px;
}

.workspace-portal-view .portal-control-card .workspace-details {
  gap: 5px 13px;
}

/* My Information: a numbered, color-coded working checklist rather than a
   stack of identical white panels. */
.portal-information-view > .clean-page-heading {
  padding: 15px 17px;
  border: 1px solid #dce6f3;
  border-radius: 14px;
  background: linear-gradient(110deg, #f2f7ff, #fff);
}

.portal-information-view .information-progress-card {
  padding: 13px 15px;
  border-left: 4px solid var(--consultancy-accent, var(--vd-primary));
}

.portal-information-view .information-progress-bar { margin: 5px 0 9px; }
.portal-information-view .information-status-chips { gap: 5px; }

.portal-information-view > .clean-card:not(.information-progress-card) {
  --info-tone: var(--section-slate);
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border-left: 5px solid var(--info-tone);
  box-shadow: 0 3px 12px rgba(24, 44, 74, .045);
}

.portal-information-view > .clean-card:not(.information-progress-card)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--info-tone) 8%, white), transparent 55%);
  pointer-events: none;
}

.portal-information-view > .clean-card > * { position: relative; }
.portal-information-view #profile { --info-tone: var(--section-blue); }
.portal-information-view #education,
.portal-information-view #language { --info-tone: var(--section-violet); }
.portal-information-view #employment,
.portal-information-view #study-gap { --info-tone: var(--section-amber); }
.portal-information-view #emergency-contact,
.portal-information-view #sponsor,
.portal-information-view #family { --info-tone: var(--section-teal); }
.portal-information-view #financial,
.portal-information-view #property { --info-tone: #4c8d61; }
.portal-information-view #visa-history { --info-tone: var(--section-rose); }

.portal-information-view .clean-card-heading {
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e7ebf1;
}

.portal-information-view .clean-card-heading h2 {
  color: var(--info-tone, #273750);
  font-size: 15px;
}

.portal-information-view .clean-card-heading p { font-size: 10px; }
.portal-information-view .workspace-details { grid-template-columns: 155px 1fr; gap: 5px 13px; }
.portal-information-view .workspace-details dt { font-size: 8px; }
.portal-information-view .workspace-details dd { font-size: 11px; }

.portal-information-view .clean-empty {
  min-height: 0;
  padding: 11px 13px;
  border: 1px dashed color-mix(in srgb, var(--info-tone, #7b8799) 35%, #dce3ec);
  border-radius: 8px;
  background: color-mix(in srgb, var(--info-tone, #7b8799) 4%, white);
  color: #65748a;
  text-align: left;
}

.portal-information-view .portal-add-record {
  margin-top: 8px;
  border-color: color-mix(in srgb, var(--info-tone, #7b8799) 28%, #dce3ec);
  background: #fbfcfe;
}

.portal-information-view .portal-add-record > summary {
  color: var(--info-tone, var(--vd-primary));
  font-weight: 750;
}

@media (max-width: 720px) {
  .workspace-information-view .workspace-details,
  .portal-information-view .workspace-details { grid-template-columns: 1fr; gap: 2px; }
  .workspace-information-view .workspace-details dd,
  .portal-information-view .workspace-details dd { margin-bottom: 7px; }
}

.clean-request-priority,
.clean-request-status {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.clean-request-priority {
  background: #eef2f8;
  color: #59677d;
}

.priority-high .clean-request-priority,
.priority-important .clean-request-priority {
  background: #fff1d7;
  color: #946000;
}

.priority-urgent .clean-request-priority,
.priority-critical .clean-request-priority {
  background: #ffe7e9;
  color: #a3313a;
}

.clean-request-status {
  height: fit-content;
  background: #edf2ff;
  color: var(--vd-primary);
}

.status-approved .clean-request-status {
  background: #e7f5eb;
  color: #2d7042;
}

.status-revision-required .clean-request-status {
  background: #fff0dd;
  color: #996000;
}

.compact-request {
  max-width: 520px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8ecf2;
}

.clean-request-submitted,
.clean-request-approved {
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: var(--vd-radius-sm);
  font-size: 11px;
  font-weight: 700;
}

.clean-request-submitted {
  background: #fff6e4;
  color: #7f5909;
}

.clean-request-approved {
  background: #eaf7ed;
  color: #2d6840;
}

@media (max-width: 650px) {
  .clean-request-main {
    display: grid;
  }
}


/* VisaDesk v3.9 — Deadline & Reminder Center */
.clean-summary-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.clean-deadline-list {
  display: grid;
  gap: 9px;
}

.clean-deadline-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e2e7ef;
  border-left: 4px solid #7e95bf;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-deadline-list article.priority-high {
  border-left-color: #df9c28;
}

.clean-deadline-list article.priority-urgent,
.clean-deadline-list article.overdue {
  border-left-color: #d94e58;
  background: #fff9f9;
}

.clean-deadline-list article.completed {
  border-left-color: #4aa366;
  background: #f7fcf8;
}

.clean-deadline-list article > div {
  display: grid;
  gap: 3px;
}

.clean-deadline-list article > div > span {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--vd-primary);
  font-size: 9px;
  font-weight: 800;
}

.clean-deadline-list h3 {
  margin: 4px 0 0;
}

.clean-deadline-list p {
  margin: 6px 0 0;
  color: #5f6d82;
}

.clean-deadline-list form button {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: white;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .clean-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .clean-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .clean-deadline-list article {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.0 — Visa Readiness Center */
.clean-summary-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.clean-readiness-score {
  min-width: 150px;
  padding: 13px 17px;
  display: grid;
  gap: 2px;
  text-align: right;
  border-radius: var(--vd-radius);
  color: white;
  background: #c34a55;
}

.clean-readiness-score.medium {
  background: #b87b20;
}

.clean-readiness-score.good {
  background: #34734a;
}

.clean-readiness-score strong {
  font-size: 28px;
}

.clean-readiness-mini {
  display: grid;
  gap: 2px;
  text-align: right;
}

.clean-readiness-mini strong {
  font-size: 22px;
  color: var(--vd-primary);
}

.clean-readiness-progress {
  margin-bottom: 15px;
}

.clean-readiness-list {
  display: grid;
  gap: 8px;
}

.clean-readiness-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-readiness-list article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  background: #fff1dd;
  color: #996000;
}

.clean-readiness-list article.complete > span {
  background: #e4f4e8;
  color: #2e7042;
}

.clean-readiness-list article > div {
  display: grid;
  gap: 2px;
}

.clean-readiness-list article > div > small {
  color: var(--vd-primary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.clean-readiness-list article p {
  margin: 4px 0 0;
  color: #657187;
}

.clean-readiness-list article > b {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #6d788a;
  font-size: 9px;
}

.clean-readiness-list article.complete {
  background: #f7fcf8;
  border-color: #d7e9dc;
}

.clean-readiness-list article.complete > b {
  background: #e5f4e9;
  color: #2d6f41;
}

@media (max-width: 1180px) {
  .clean-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .clean-readiness-score {
    display: none;
  }

  .clean-readiness-list article {
    grid-template-columns: auto 1fr;
  }

  .clean-readiness-list article > b {
    grid-column: 2;
    width: fit-content;
  }
}


/* VisaDesk v4.0.1 — Submitted Document Preview */
.document-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.document-request-review-form {
  margin-top: 7px;
}

.document-request-summary-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
}

@media (max-width: 700px) {
  .document-request-summary-actions {
    justify-items: start;
  }
}


/* VisaDesk v4.0.2 — Student Document Preview */
.clean-document-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.clean-document-actions a {
  padding: 7px 9px;
  border: 1px solid #cfd7e6;
  border-radius: 7px;
  background: white;
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-document-actions a:first-child {
  background: var(--vd-primary);
  color: white;
  border-color: var(--vd-primary);
}

@media (max-width: 780px) {
  .clean-document-actions {
    justify-content: flex-start;
  }
}


/* VisaDesk v4.1 — Visa Submission Center */
.clean-summary-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.clean-submission-status {
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-submission-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.clean-submission-steps > div {
  min-width: 120px;
  padding: 12px;
  display: grid;
  justify-items: center;
  gap: 6px;
  border-radius: 10px;
  background: #f2f4f8;
  color: #8a94a5;
  text-align: center;
}

.clean-submission-steps > div > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e2e6ed;
  font-weight: 900;
}

.clean-submission-steps > div.complete {
  background: #edf7f0;
  color: #347147;
}

.clean-submission-steps > div.complete > span {
  background: #d8efdf;
}

.clean-submission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.clean-submission-grid article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border: 1px solid #e3e8f0;
  border-radius: 9px;
  background: #fcfdff;
}

.clean-submission-grid small {
  color: #7a8598;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.clean-submission-grid strong {
  word-break: break-word;
}

.clean-submission-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clean-submission-panels article {
  padding: 13px;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  background: #f8faff;
}

.clean-submission-panels h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.clean-submission-panels p {
  margin: 4px 0;
  color: #59667b;
}

.clean-submission-note {
  margin-top: 14px;
  padding: 13px;
  border-radius: 9px;
  background: #fff8e8;
  border: 1px solid #ead7a1;
}

.clean-submission-note p {
  margin: 5px 0 0;
}

@media (max-width: 1200px) {
  .clean-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .clean-submission-grid,
  .clean-submission-panels {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .clean-submission-grid,
  .clean-submission-panels {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.1.1 — Clean Admin Portal */
.clean-admin-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 16px;
}

.clean-admin-header > div > span {
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.clean-admin-header h1 {
  margin: 4px 0;
}

.clean-admin-header p {
  margin: 0;
  color: #6f798c;
}

.clean-admin-nav {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #dfe5ee;
  border-radius: 11px;
  background: white;
}

.clean-admin-nav a {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 9px 11px;
  border-radius: var(--vd-radius-sm);
  color: #657086;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.clean-admin-nav a.active {
  background: var(--vd-primary);
  color: white;
}

.clean-admin-nav b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #e7ecf7;
  color: #4d5e7e;
  font-size: 9px;
}

.clean-admin-nav a.active b {
  background: rgba(255,255,255,.2);
  color: white;
}

.clean-admin-nav b.danger {
  background: #d94e58;
  color: white;
}

.clean-admin-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.clean-admin-summary a {
  padding: 13px;
  display: grid;
  gap: 3px;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  background: white;
  color: #202c43;
}

.clean-admin-summary a.attention {
  border-color: #e7c37e;
  background: #fff9ed;
}

.clean-admin-summary strong {
  font-size: 21px;
}

.clean-admin-summary span {
  color: #748094;
  font-size: 9px;
}

.clean-admin-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.clean-admin-section-heading,
.clean-admin-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.clean-admin-section-heading h2,
.clean-admin-section-title h2 {
  margin: 0;
}

.clean-admin-section-heading p,
.clean-admin-section-title p {
  margin: 3px 0 0;
  color: #768195;
}

.clean-admin-section-title {
  margin-top: 4px;
}

.clean-admin-action {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e3e8ef;
  border-radius: 9px;
  color: #27334b;
}

.clean-admin-action.urgent {
  background: #fff4f4;
  border-color: #edc5c8;
}

.clean-admin-action > div {
  display: grid;
  gap: 2px;
}

.clean-admin-action small {
  color: #7b8596;
}

.clean-admin-action > span {
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-admin-complete {
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #3b7049;
  text-align: center;
}

.clean-admin-complete > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e4f4e8;
  font-size: 22px;
}

.clean-admin-quick-links {
  display: grid;
  gap: 8px;
}

.clean-admin-quick-links a {
  padding: 11px;
  border: 1px solid #e2e7ef;
  border-radius: var(--vd-radius-sm);
  color: var(--vd-primary);
  font-weight: 800;
}

.clean-admin-row,
.clean-admin-review-card,
.clean-admin-message {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}

.clean-admin-row:last-child,
.clean-admin-review-card:last-child,
.clean-admin-message:last-child {
  border-bottom: 0;
}

.clean-admin-row > div,
.clean-admin-review-card > div,
.clean-admin-message > div {
  display: grid;
  gap: 3px;
}

.clean-admin-row p,
.clean-admin-review-card p,
.clean-admin-message p {
  margin: 4px 0 0;
}

.clean-admin-row.urgent {
  color: #9d3038;
}

.clean-admin-message.unread {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e7cb8d;
  border-radius: 9px;
  background: #fff8e8;
}

.clean-admin-reply {
  width: 340px;
  margin-top: 8px;
}

.clean-admin-review-card {
  padding: 13px;
  margin-bottom: 9px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #fcfdff;
}

@media (max-width: 1200px) {
  .clean-admin-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .clean-admin-two-column {
    grid-template-columns: 1fr;
  }

  .clean-admin-header {
    align-items: start;
  }
}

@media (max-width: 650px) {
  .clean-admin-summary {
    grid-template-columns: 1fr 1fr;
  }

  .clean-admin-header {
    display: grid;
  }

  .clean-admin-row,
  .clean-admin-review-card,
  .clean-admin-message {
    display: grid;
  }

  .clean-admin-reply {
    width: 100%;
  }
}


/* VisaDesk v4.2 — Progress Report Center */
.clean-report-student-list {
  display: grid;
  gap: 9px;
}

.clean-report-student-list > article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-report-student-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7edff;
  color: var(--vd-primary);
  font-weight: 900;
}

.clean-report-student-list article > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.clean-report-student-list p {
  margin: 3px 0 0;
  color: #657187;
}

.clean-report-actions {
  display: flex;
  gap: 7px;
}

.portal-report-body {
  margin: 0;
  background: #edf1f7;
  color: #182338;
  font-family: var(--vd-font);
}

.portal-report-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: #14213b;
  color: white;
}

.portal-report-topbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.portal-report-topbar > div:first-child {
  display: grid;
  gap: 1px;
}

/* UI request (2026-08-18): give the report topbar the same branded logo
   treatment as the portal's own header (.clean-portal-brand-logo in
   portal_dashboard.html) so the report reads as the same app, not a
   separate bare export page. */
.portal-report-topbar > div.portal-report-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-report-brand > div {
  display: grid;
  gap: 1px;
}

.portal-report-brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  background: white;
  padding: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.25);
}

.portal-report-topbar small {
  opacity: .65;
}

.portal-report-topbar a,
.portal-report-topbar button {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 11px;
  cursor: pointer;
}

.portal-report-shell {
  max-width: 1120px;
  margin: 24px auto 50px;
  padding: 0 18px;
}

.portal-report-cover {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: end;
  padding: 28px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--vd-sidebar), var(--vd-primary));
  color: white;
}

.portal-report-cover > div:first-child > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .7;
}

.portal-report-cover h1 {
  margin: 7px 0 3px;
  font-size: 34px;
}

.portal-report-cover p {
  margin: 0;
  opacity: .75;
}

.portal-report-generated {
  display: grid;
  gap: 3px;
  text-align: right;
}

.portal-report-generated small,
.portal-report-generated span {
  opacity: .68;
}

.portal-report-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.portal-report-metrics article {
  padding: 13px;
  display: grid;
  gap: 3px;
  border-radius: 10px;
  background: white;
  border: 1px solid #dde4ee;
}

.portal-report-metrics article.attention {
  background: #fff5f4;
  border-color: #ecc7c4;
}

.portal-report-metrics strong {
  font-size: 21px;
}

.portal-report-metrics span {
  color: #758095;
  font-size: 9px;
}

.portal-report-section {
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid #dde4ee;
  border-radius: var(--vd-radius);
  background: white;
}

.portal-report-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 13px;
}

.portal-report-heading h2 {
  margin: 0;
  font-size: 17px;
}

.portal-report-heading span {
  color: #7b8597;
  font-size: 10px;
}

.portal-report-application,
.portal-report-submission {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #fcfdff;
}

.portal-report-app-title {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.portal-report-app-title small {
  color: var(--vd-primary);
  font-weight: 800;
}

.portal-report-app-title h3,
.portal-report-submission h3 {
  margin: 5px 0 3px;
}

.portal-report-app-title p {
  margin: 0;
  color: #6f7a8f;
}

.portal-report-app-title > span {
  height: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #337046;
  font-size: 9px;
  font-weight: 800;
}

.portal-report-progress-row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: #69758a;
  font-size: 10px;
}

.portal-report-progress {
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf4;
}

.portal-report-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--vd-primary);
}

.portal-report-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.portal-report-detail-grid article {
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.portal-report-detail-grid small {
  color: #788396;
  font-size: 8px;
  text-transform: uppercase;
}

.portal-report-detail-grid strong {
  font-size: 11px;
  word-break: break-word;
}

.portal-report-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.portal-report-list {
  display: grid;
  gap: 7px;
}

.portal-report-list > article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f4;
}

.portal-report-list > article:last-child {
  border-bottom: 0;
}

.portal-report-list > article > div {
  display: grid;
  gap: 2px;
}

.portal-report-list small {
  color: #7a8597;
  font-size: 9px;
}

.portal-report-list p {
  margin: 4px 0 0;
}

.portal-report-list > article > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f0f3f7;
  color: #69758a;
  font-size: 8px;
  font-weight: 800;
}

.portal-report-list > article.attention > span {
  background: #ffe6e8;
  color: #a4313a;
}

.portal-report-list .status-approved {
  background: #e6f5ea;
  color: #2f7042;
}

.portal-report-list .status-rejected {
  background: #ffe5e7;
  color: #9e3139;
}

.portal-report-complete {
  padding: 25px;
  color: #347047;
  text-align: center;
}

.portal-report-readiness {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 10px 0;
}

.portal-report-readiness > div:first-child {
  display: grid;
  gap: 2px;
}

.portal-report-readiness-score {
  font-size: 23px;
  font-weight: 900;
  color: var(--vd-primary);
}

.portal-report-readiness-items {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.portal-report-readiness-items article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e5e9f0;
  border-radius: var(--vd-radius-sm);
}

.portal-report-readiness-items article > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0dc;
  color: #946000;
  font-weight: 900;
}

.portal-report-readiness-items article.complete > span {
  background: #e4f4e8;
  color: #2d7041;
}

.portal-report-readiness-items article > div {
  display: grid;
  gap: 1px;
}

.portal-report-readiness-items small {
  color: var(--vd-primary);
  font-size: 8px;
}

.portal-report-readiness-items b {
  font-size: 8px;
  color: #6f7a8d;
}

.portal-report-note {
  padding: 10px;
  border-radius: var(--vd-radius-sm);
  background: #fff8e8;
  border: 1px solid #ead7a1;
}

.portal-report-timeline article {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  padding-bottom: 13px;
}

.portal-report-timeline article > span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--vd-primary);
}

.portal-report-timeline p {
  margin: 3px 0;
}

.portal-report-timeline small {
  color: #7c8798;
}

.portal-report-empty {
  padding: 22px;
  color: #7b8596;
  text-align: center;
}

.portal-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 2px;
  color: #7a8596;
  font-size: 9px;
}

@media (max-width: 900px) {
  .portal-report-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .portal-report-two-column {
    grid-template-columns: 1fr;
  }

  .portal-report-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .clean-report-student-list > article {
    grid-template-columns: auto 1fr;
  }

  .clean-report-actions {
    grid-column: 2;
  }

  .portal-report-cover {
    display: grid;
  }

  .portal-report-generated {
    text-align: left;
  }

  .portal-report-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .portal-report-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  body {
    background: white !important;
  }

  .no-print {
    display: none !important;
  }

  .portal-report-shell {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .portal-report-cover,
  .portal-report-section,
  .portal-report-metrics article {
    break-inside: avoid;
    box-shadow: none;
  }

  .portal-report-section {
    page-break-inside: avoid;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}


/* VisaDesk v4.3 — Final Review & Student Approval */
.clean-summary-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.clean-approval-status {
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-approval-status.status-approved {
  background: #e7f5eb;
  color: #2f7042;
}

.clean-approval-status.status-correction-requested {
  background: #fff0dd;
  color: #996000;
}

.clean-approval-summary,
.clean-approval-declaration,
.clean-approval-result {
  padding: 14px;
  margin-bottom: 13px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #f8faff;
}

.clean-approval-summary p,
.clean-approval-declaration p,
.clean-approval-result p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.clean-approval-declaration {
  background: #fff9e9;
  border-color: #ead7a1;
}

.clean-approval-response-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.clean-correction-form button {
  background: #b64952;
}

.clean-checkbox-row {
  display: flex !important;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}

.clean-checkbox-row input {
  width: auto !important;
  margin-top: 2px;
}

@media (max-width: 1250px) {
  .clean-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .clean-approval-response-grid {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.4 — Approval Certificate & Change Control */
.clean-approval-certificate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.clean-approval-certificate-actions a {
  padding: 8px 10px;
  border: 1px solid #cfd7e5;
  border-radius: var(--vd-radius-sm);
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
}

.clean-approval-certificate-actions a:first-child {
  background: var(--vd-primary);
  color: white;
  border-color: var(--vd-primary);
}

.approval-certificate-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.approval-certificate-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: #14213b;
  color: white;
}

.approval-certificate-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.approval-certificate-toolbar > div:first-child {
  display: grid;
  gap: 1px;
}

.approval-certificate-toolbar small {
  opacity: .65;
}

.approval-certificate-toolbar a,
.approval-certificate-toolbar button {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 11px;
  cursor: pointer;
}

.approval-certificate-page {
  width: min(900px, calc(100% - 32px));
  margin: 26px auto;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.approval-certificate-border {
  margin: 14px;
  padding: 34px;
  border: 3px double var(--vd-primary);
}

.approval-certificate-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #e2e7ef;
}

.approval-certificate-logo {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--vd-primary);
  color: white;
  font-size: 26px;
  font-weight: 900;
}

.approval-certificate-header span {
  color: var(--vd-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.approval-certificate-header h1 {
  margin: 5px 0 3px;
  font-size: 26px;
}

.approval-certificate-header p {
  margin: 0;
  color: #6e798d;
}

.approval-certificate-student,
.approval-certificate-record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 0;
}

.approval-certificate-student > div,
.approval-certificate-record > div {
  display: grid;
  gap: 3px;
  padding: 11px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.approval-certificate-student small,
.approval-certificate-record small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.approval-certificate-section {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e1e6ee;
  border-radius: 9px;
}

.approval-certificate-section.declaration {
  background: #fff9e9;
  border-color: #ead8a5;
}

.approval-certificate-section h2,
.approval-certificate-confirmation h2 {
  margin: 0 0 7px;
  font-size: 15px;
}

.approval-certificate-section p,
.approval-certificate-confirmation p {
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

.approval-certificate-confirmation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  padding: 18px;
  margin: 15px 0;
  border-radius: 10px;
  background: #eaf7ed;
  border: 1px solid #cde6d3;
  color: #285d39;
}

.approval-certificate-check {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3d8654;
  color: white;
  font-size: 24px;
  font-weight: 900;
}

.approval-certificate-note {
  padding: 13px;
  margin-top: 4px;
  border-left: 4px solid #d5a036;
  background: #fff8e9;
}

.approval-certificate-note p {
  margin: 4px 0 0;
  color: #665526;
  font-size: 10px;
  line-height: 1.5;
}

.approval-certificate-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 650px) {
  .approval-certificate-border {
    padding: 20px;
  }

  .approval-certificate-student,
  .approval-certificate-record {
    grid-template-columns: 1fr;
  }

  .approval-certificate-toolbar {
    display: grid;
    padding: 10px 14px;
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  .approval-certificate-body {
    background: white;
  }

  .approval-certificate-page {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }

  .approval-certificate-border {
    margin: 0;
  }
}


/* VisaDesk v4.5 — Visa Decision & Pre-Departure Center */
.clean-summary-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.clean-decision-badge {
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef2f8;
  color: #58667e;
  font-size: 10px;
  font-weight: 900;
}

.clean-decision-badge.outcome-approved {
  background: #e6f5ea;
  color: #2d7041;
}

.clean-decision-badge.outcome-refused {
  background: #ffe5e7;
  color: #a1313a;
}

.clean-decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.clean-decision-grid article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border: 1px solid #e2e7ef;
  border-radius: 9px;
  background: #f8faff;
}

.clean-decision-grid small {
  color: #788397;
  font-size: 8px;
  text-transform: uppercase;
}

.clean-predeparture-list {
  display: grid;
  gap: 10px;
}

.clean-predeparture-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e2e7ef;
  border-left: 4px solid #7690c3;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-predeparture-list article.priority-high {
  border-left-color: #dc9b2f;
}

.clean-predeparture-list article.priority-urgent {
  border-left-color: #d84e58;
}

.clean-predeparture-list article.complete {
  border-left-color: #4aa366;
  background: #f7fcf8;
}

.clean-predeparture-list article > div {
  display: grid;
  gap: 3px;
}

.clean-predeparture-list article > div > span {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--vd-primary);
  font-size: 9px;
  font-weight: 800;
}

.clean-predeparture-list h3 {
  margin: 4px 0;
}

.clean-predeparture-list p {
  margin: 3px 0;
  color: #5e6b80;
}

@media (max-width: 1280px) {
  .clean-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .clean-decision-grid {
    grid-template-columns: 1fr 1fr;
  }

  .clean-predeparture-list article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .clean-decision-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact Manage Pipeline workspace. */
.workflow-manager {
  --workflow-blue: #3157c8;
  --workflow-violet: #7357bd;
  --workflow-teal: #168879;
  --workflow-amber: #b97818;
  display: grid;
  gap: 12px;
}

.workflow-manager > .page-heading,
.workflow-manager > .panel,
.workflow-manager > .configuration-guide,
.workflow-manager > .two-column,
.workflow-manager > .alert {
  margin-bottom: 0;
}

.workflow-scope-panel {
  padding: 13px 15px;
  background: linear-gradient(135deg, #fff, #f3f6fd);
}

.workflow-scope-panel h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.workflow-scope-panel .form-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  align-items: end;
}

.workflow-section-nav {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: grid;
  /* Settings & Navigation Simplification, Phase 3 (2026-08-14): was
     repeat(5, ...) - stale since Milestone 3 added Portal Stages as a
     6th item, which just wrapped onto its own row instead of fitting the
     grid. Also now doubles as this page's tab switcher (see .active
     below), not just a scroll-to nav. Bumped to repeat(7, ...) on
     2026-08-16 for the Document Checklist item added by
     _pipeline_automation_nav.html (Merge Phase 3) - also now shared with
     checklist_admin.html, which doesn't have a page header quite as tall
     as this page's, so the `top: 76px` sticky offset below is a shared
     compromise rather than tuned per-page. */
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 6px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 20px rgba(28, 47, 76, .08);
  backdrop-filter: blur(10px);
}

.workflow-section-nav a {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 135px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #40516a;
  font-size: 11px;
  font-weight: 750;
}

.workflow-section-nav a:hover {
  background: #eef3ff;
  color: var(--workflow-blue);
}

.workflow-section-nav a.active {
  background: var(--workflow-blue);
  color: #fff;
}

.workflow-section-nav a.active strong {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

.workflow-section-nav strong {
  min-width: 25px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #edf2fb;
  color: var(--workflow-blue);
  text-align: center;
  font-size: 10px;
}

.workflow-config-section {
  scroll-margin-top: 150px;
  padding: 15px;
}

.workflow-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5ebf3;
}

.workflow-section-heading > div > span {
  display: block;
  margin-bottom: 2px;
  color: var(--workflow-blue);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.workflow-section-heading h2,
.workflow-section-heading p {
  margin: 0;
}

.workflow-section-heading h2 {
  font-size: 17px;
}

.workflow-section-heading p {
  margin-top: 2px;
  color: #718097;
  font-size: 10px;
}

.workflow-scope-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #d4def2;
  border-radius: 999px;
  background: #f2f6ff;
  color: var(--workflow-blue);
  font-size: 9px;
  font-weight: 800;
}

.workflow-stage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.workflow-stage-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dde5ef;
  border-left: 4px solid var(--stage-color, var(--workflow-blue));
  border-radius: 10px;
  background: #fff;
  scroll-margin-top: 150px;
}

.workflow-stage-card[open] {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--stage-color, var(--workflow-blue)) 35%, #dce4ef);
  box-shadow: 0 7px 20px rgba(35, 57, 86, .08);
}

.workflow-stage-card.is-muted {
  opacity: .62;
}

.workflow-stage-card > summary {
  display: grid;
  grid-template-columns: 30px 10px minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.workflow-stage-card > summary::-webkit-details-marker {
  display: none;
}

.workflow-stage-order {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--stage-color) 11%, white);
  color: var(--stage-color);
  font-size: 9px;
  font-weight: 850;
}

/* Pipeline Stages drag-and-drop (2026-08-16), owner request: "drag and
   drop as like checklist" - same native HTML5 drag-and-drop pattern as
   .checklist-kanban-card (see checklist_admin.html's own script and
   these class names' siblings above), scoped via .is-draggable so it
   only changes the summary grid for cards that opt in - Portal Stages
   below reuses the exact same .workflow-stage-card/.workflow-stage-list
   classes for its own (still button-based) list and must not shift. */
.workflow-stage-card.is-draggable > summary {
  grid-template-columns: 16px 30px 10px minmax(0, 1fr) auto auto auto;
}
.workflow-stage-drag-handle {
  cursor: grab;
  color: #b6bece;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
.workflow-stage-drag-handle:active {
  cursor: grabbing;
}
.workflow-stage-card.is-draggable.dragging {
  opacity: .4;
}
.workflow-stage-list.drag-over {
  background: #eef2fb;
  box-shadow: inset 0 0 0 2px var(--consultancy-accent, var(--vd-primary));
  border-radius: var(--vd-radius);
}

/* Automation Rules drag-and-drop builder (2026-08-16), Phase 5 - a
   palette of trigger/action cards you drag onto a slot to compose a
   rule, sitting above the real <select> it actually sets (see that
   select's own template comment for why it's kept visible/functional
   underneath rather than replaced). */
.rule-palette-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.rule-palette-card {
  cursor: grab;
  padding: 6px 10px;
  border: 1px solid #dde5ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #40516a;
  font-size: 11px;
  font-weight: 700;
  user-select: none;
}
.rule-palette-card:active {
  cursor: grabbing;
}
.rule-palette-card:hover {
  border-color: var(--workflow-blue);
  color: var(--workflow-blue);
  background: #eef3ff;
}
.rule-palette-card.is-selected {
  border-color: var(--workflow-blue);
  background: var(--workflow-blue);
  color: #fff;
}
.rule-drop-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 2px dashed #cdd7e6;
  border-radius: 10px;
  background: #fbfcfe;
  transition: background-color .12s ease, border-color .12s ease;
}
.rule-drop-slot.drag-over {
  border-color: var(--workflow-blue);
  background: #eef3ff;
}
.rule-drop-slot-label {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #edf2fb;
  color: var(--workflow-blue);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.rule-drop-slot-value {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}
.rule-drop-slot.has-value .rule-drop-slot-value {
  color: #1f3048;
}

.workflow-stage-card > summary > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage-color);
}

.workflow-stage-identity {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.workflow-stage-identity strong {
  overflow: hidden;
  color: #1f3048;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-stage-identity small {
  overflow: hidden;
  color: #738198;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-stage-open {
  color: var(--workflow-blue);
  font-size: 9px;
  font-weight: 800;
}

.workflow-stage-open::after {
  content: " +";
}

.workflow-stage-card[open] .workflow-stage-open::after {
  content: " −";
}

.workflow-stage-body {
  padding: 11px 12px 12px;
  border-top: 1px solid #e5eaf1;
  background: #f8fafc;
}

.workflow-stage-edit-form {
  grid-template-columns: minmax(180px, 1.4fr) 80px 64px minmax(165px, 1fr) minmax(130px, .8fr) minmax(130px, .8fr);
}

.workflow-stage-edit-form > label:nth-last-of-type(1),
.workflow-stage-edit-form > .button {
  align-self: end;
}

.workflow-stage-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #e1e7ef;
}

.workflow-stage-action-label {
  color: #738198;
  font-size: 9px;
  font-weight: 750;
}

.workflow-stage-actions-spacer {
  flex: 1;
}

.workflow-add-stage {
  margin-top: 10px;
  border: 1px dashed #c9d5e7;
  border-radius: 9px;
  background: #f8faff;
}

.workflow-add-stage > summary {
  padding: 10px 12px;
  color: var(--workflow-blue);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.workflow-add-stage > form {
  padding: 0 12px 12px;
}

.workflow-manager .configuration-guide {
  gap: 8px;
}

.workflow-manager .configuration-guide > div {
  padding: 11px;
}

.workflow-manager .journey-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.workflow-manager .journey-step-card[open] {
  grid-column: 1 / -1;
}

.workflow-rules-layout {
  scroll-margin-top: 150px;
  align-items: start;
}

@media (max-width: 1150px) {
  .workflow-stage-edit-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .workflow-section-nav {
    position: relative;
    top: auto;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
  }

  .workflow-stage-list,
  .workflow-manager .journey-step-list {
    grid-template-columns: 1fr;
  }

  .workflow-stage-card[open],
  .workflow-manager .journey-step-card[open] {
    grid-column: auto;
  }

  .workflow-scope-panel .form-grid,
  .workflow-stage-edit-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .workflow-scope-panel .form-grid,
  .workflow-stage-edit-form {
    grid-template-columns: 1fr;
  }

  .workflow-stage-card > summary {
    grid-template-columns: 30px 9px minmax(0, 1fr) auto;
  }

  .workflow-stage-card > summary .badge {
    display: none;
  }

  .workflow-section-heading {
    display: grid;
  }

  .workflow-stage-actions {
    flex-wrap: wrap;
  }

  .workflow-stage-actions-spacer {
    display: none;
  }
}


/* VisaDesk v4.5.1 — Portal navigation and application-stage layout */
.clean-portal-header-inner {
  grid-template-columns: auto minmax(390px, 1fr) auto;
}

/* Fix: this used to be overflow:visible (needed so the "Application ▾"
   dropdown, a position:absolute child, could escape the nav bar's own
   box) with justify-content:center. But 8 nav items don't reliably fit
   in the available middle grid column at ordinary desktop widths - and
   because the overflow was visible rather than clipped/scrolled, content
   too wide for that column doesn't get contained, it just bleeds out
   equally on both sides: into the "JM Consultants" logo on the left and
   into the account menu on the right (two different-looking symptoms of
   the same cause, seen separately during testing). overflow-x:auto makes
   the nav properly scroll instead of bleeding once it doesn't fit -
   removing "visible" here does mean the dropdown menu would normally get
   clipped by this same scroll box, so its positioning is switched to
   JS-computed position:fixed on open instead (see the nav-group toggle
   script in portal_dashboard.html) - position:fixed escapes ALL ancestor
   overflow clipping, not just this one, so it stays correct regardless
   of how nav is scrolled at the moment it's opened. */
.clean-portal-nav-v451 {
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  scrollbar-width: thin;
}

.clean-portal-nav-v451 > a,
.clean-portal-nav-group > button {
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: transparent;
  color: rgba(255,255,255,.76);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.clean-portal-nav-v451 > a {
  display: flex;
  align-items: center;
}

.clean-portal-nav-v451 > a.active,
.clean-portal-nav-group > button:hover,
.clean-portal-nav-group:focus-within > button {
  background: rgba(255,255,255,.10);
  color: white;
}

.clean-portal-nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.clean-portal-nav-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 500;
  min-width: 210px;
  padding: 7px;
  display: none;
  border: 1px solid #dfe5ee;
  border-radius: 11px;
  background: white;
  box-shadow: 0 14px 34px rgba(15, 28, 53, .20);
}

.clean-portal-nav-group:hover .clean-portal-nav-menu,
.clean-portal-nav-group:focus-within .clean-portal-nav-menu,
.clean-portal-nav-group.open .clean-portal-nav-menu {
  display: grid;
}

.clean-portal-nav-menu a {
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 7px;
  color: #354259;
  font-size: 11px;
  font-weight: 700;
}

.clean-portal-nav-menu a:hover,
.clean-portal-nav-menu a.active {
  background: #edf2ff;
  color: var(--vd-primary);
}

.clean-portal-nav-menu b {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e7ecf7;
  color: #4f5f7c;
  font-size: 9px;
}

.clean-portal-nav-menu b.alert {
  background: #e64f5b;
  color: white;
}

/* Keep the complete stage journey inside the card. */
.clean-stage-list {
  position: relative;
  grid-template-columns: repeat(10, minmax(82px, 1fr));
  gap: 0;
  padding: 8px 16px 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.clean-stage-list::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 56px;
  right: 56px;
  height: 2px;
  background: #e3e8ef;
  z-index: 0;
}

.clean-stage-list > div {
  position: relative;
  z-index: 1;
  min-width: 82px;
  padding: 0 5px;
}

.clean-stage-list > div > span {
  background: #f2f4f7;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #e1e6ee;
}

.clean-stage-list > div.complete > span {
  background: #dff2e4;
  box-shadow: 0 0 0 1px #b8ddc2;
}

.clean-stage-list > div.current > span {
  background: var(--vd-primary);
  box-shadow: 0 0 0 4px #e8edff;
}

.clean-stage-list > div:last-child {
  padding-right: 10px;
}

.clean-stage-list small {
  max-width: 82px;
  min-height: 24px;
  line-height: 1.25;
}

@media (max-width: 1120px) {
  .clean-portal-header-inner {
    grid-template-columns: auto 1fr;
  }

  .clean-portal-user {
    display: none;
  }

  .clean-portal-nav-v451 {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .clean-portal-header-inner {
    display: block;
  }

  .clean-portal-nav-v451 {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
  }

  .clean-portal-nav-menu {
    position: fixed;
    top: 105px;
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}


/* VisaDesk v4.6 — Consultancy Branding Center */
.brand-mark,
.clean-portal-brand > span,
.clean-progress-bar i,
.clean-form button,
.clean-correction button,
.clean-task-list summary,
.clean-deadline-list form button,
.clean-portal-nav-v451 > a.active,
.clean-portal-nav-group > button:hover,
.clean-portal-nav-group:focus-within > button {
  background: var(--consultancy-accent, var(--vd-primary));
}

.clean-country,
.clean-action-item > span,
.clean-quick-links a,
.clean-portal-nav-menu a:hover,
.clean-portal-nav-menu a.active,
.clean-readiness-mini strong,
.clean-submission-status,
.clean-request-status,
.clean-decision-grid strong {
  color: var(--consultancy-accent, var(--vd-primary));
}

.brand-logo-image {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 9px;
  background: white;
  padding: 3px;
}

.clean-portal-brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: white;
  padding: 3px;
}

.clean-support-card {
  border-top: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.clean-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.clean-support-grid span {
  padding: 11px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.clean-support-grid small {
  color: #7a8597;
  font-size: 8px;
  text-transform: uppercase;
}

.consultancy-brand-preview {
  padding: 24px;
  margin-bottom: 14px;
  text-align: center;
  border: 1px solid #dfe5ee;
  border-top: 5px solid var(--preview-accent);
  border-radius: var(--vd-radius);
  background: #f8faff;
}

.consultancy-brand-preview img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 10px;
}

.consultancy-brand-preview-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius-lg);
  background: var(--preview-accent);
  color: white;
  font-size: 24px;
  font-weight: 900;
}

.consultancy-brand-preview h3 {
  margin: 5px 0;
}

.consultancy-brand-preview p {
  margin: 4px 0;
  font-weight: 800;
}

.consultancy-brand-preview small {
  display: block;
  color: #6f7a8d;
}

.consultancy-brand-preview button {
  margin-top: 14px;
  padding: 9px 13px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--preview-accent);
  color: white;
  font-weight: 800;
}

.consultancy-brand-contact-preview {
  margin-top: 14px;
  padding: 12px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.consultancy-brand-contact-preview p {
  margin: 5px 0;
}

.approval-certificate-logo-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.approval-certificate-logo,
.portal-report-progress i {
  background: var(--consultancy-accent, var(--vd-primary));
}

@media (max-width: 800px) {
  .clean-support-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .clean-support-grid {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.7 — Consultant Assignment Center */
.clean-consultant-card {
  border-top: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.clean-consultant-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: start;
}

.clean-consultant-profile img,
.clean-consultant-initial {
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.clean-consultant-profile img {
  object-fit: cover;
  border: 3px solid #e7ecf7;
}

.clean-consultant-initial {
  display: grid;
  place-items: center;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-size: 28px;
  font-weight: 900;
}

.clean-consultant-profile h3 {
  margin: 2px 0 3px;
}

.clean-consultant-profile > div > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 11px;
  font-weight: 800;
}

.clean-consultant-profile p {
  margin: 8px 0;
  color: #5f6d82;
}

.clean-consultant-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #6f7a8d;
}

.clean-consultant-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clean-consultant-admin-grid article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fcfdff;
}

.clean-consultant-admin-grid img,
.clean-consultant-admin-initial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.clean-consultant-admin-grid img {
  object-fit: cover;
}

.clean-consultant-admin-initial {
  display: grid;
  place-items: center;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-size: 20px;
  font-weight: 900;
}

.clean-consultant-admin-grid article > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.clean-consultant-admin-grid p {
  margin: 2px 0;
  color: #6f7a8d;
}

@media (max-width: 800px) {
  .clean-consultant-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .clean-consultant-profile,
  .clean-consultant-admin-grid article {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.8 — Consultant Workload & Handover Center */
.consultant-workload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.consultant-workload-grid > article {
  padding: 14px;
  border: 1px solid #e1e7ef;
  border-top: 4px solid #5b7dc8;
  border-radius: 11px;
  background: #fcfdff;
}

.consultant-workload-grid > article.level-moderate {
  border-top-color: #d69a32;
}

.consultant-workload-grid > article.level-high {
  border-top-color: #d64f59;
  background: #fffafa;
}

.consultant-workload-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.consultant-workload-heading img,
.consultant-workload-initial {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.consultant-workload-heading img {
  object-fit: cover;
}

.consultant-workload-initial {
  display: grid;
  place-items: center;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-size: 18px;
  font-weight: 900;
}

.consultant-workload-heading > div {
  display: grid;
  gap: 2px;
}

.consultant-workload-heading > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #307044;
  font-size: 9px;
  font-weight: 900;
}

.level-moderate .consultant-workload-heading > span {
  background: #fff1da;
  color: #956100;
}

.level-high .consultant-workload-heading > span {
  background: #ffe5e7;
  color: #a1313a;
}

.consultant-workload-score {
  margin: 13px 0 10px;
  display: grid;
  gap: 2px;
}

.consultant-workload-score strong {
  font-size: 27px;
}

.consultant-workload-score small {
  color: #758095;
}

.consultant-workload-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.consultant-workload-metrics span {
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.consultant-workload-metrics span.attention {
  background: #fff0f1;
  color: #9f3038;
}

.consultant-workload-metrics strong {
  font-size: 16px;
}

.consultant-workload-metrics small {
  color: #7a8597;
  font-size: 8px;
}

@media (max-width: 1100px) {
  .consultant-workload-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .consultant-workload-grid {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v4.9 — Case Closure & Alumni Center */
.case-closure-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.case-closure-checks label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.case-closure-checks input {
  width: auto;
}

.alumni-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.alumni-card-grid > article {
  padding: 15px;
  border: 1px solid #e1e7ef;
  border-top: 4px solid var(--consultancy-accent, var(--vd-primary));
  border-radius: 11px;
  background: #fcfdff;
}

.alumni-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 13px;
}

.alumni-card-heading > div {
  display: grid;
  gap: 3px;
}

.alumni-card-heading > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #307044;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 850px) {
  .alumni-card-grid,
  .case-closure-checks {
    grid-template-columns: 1fr;
  }
}


/* VisaDesk v5.0 — Executive Dashboard & Business Analytics */
.executive-kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.executive-kpi-grid article {
  padding: 13px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.executive-kpi-grid article.attention {
  border-color: #e9bb73;
  background: #fff9ee;
}

.executive-kpi-grid strong {
  font-size: 22px;
}

.executive-kpi-grid span {
  color: #758095;
  font-size: 9px;
}

.executive-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.executive-breakdown-list {
  display: grid;
  gap: 7px;
}

.executive-breakdown-list > div {
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.executive-consultant-table {
  display: grid;
  gap: 8px;
}

.executive-consultant-table article {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(5, minmax(70px, .6fr)) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e3e8ef;
  border-radius: 9px;
}

.executive-consultant-table article > div,
.executive-consultant-table article > span {
  display: grid;
  gap: 2px;
}

.executive-consultant-table small {
  color: #758095;
  font-size: 8px;
}

.executive-consultant-table em {
  padding: 6px 8px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #307044;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.executive-consultant-table em.level-moderate {
  background: #fff1da;
  color: #956100;
}

.executive-consultant-table em.level-high {
  background: #ffe5e7;
  color: #a1313a;
}

.executive-attention-list,
.executive-shortcuts {
  display: grid;
  gap: 8px;
}

.executive-attention-list a,
.executive-shortcuts a {
  padding: 10px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
  color: #354259;
}

.executive-attention-list strong {
  min-width: 30px;
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 18px;
}

.executive-shortcuts a {
  color: var(--consultancy-accent, var(--vd-primary));
  font-weight: 800;
}

.executive-report-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.executive-report-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.executive-report-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.executive-report-toolbar a,
.executive-report-toolbar button {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.executive-report-page {
  width: min(980px, calc(100% - 32px));
  margin: 26px auto;
  padding: 32px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.executive-report-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.executive-report-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.executive-report-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.executive-report-header h1 {
  margin: 4px 0;
}

.executive-report-header p {
  margin: 0;
  color: #6e798d;
}

.executive-report-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.executive-report-kpis article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.executive-report-kpis strong {
  font-size: 22px;
}

.executive-report-kpis span {
  color: #758095;
  font-size: 9px;
}

.executive-report-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}

.executive-report-two-column section,
.executive-report-page > section {
  padding: 15px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
}

.executive-report-row {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f4;
}

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

.executive-report-table th,
.executive-report-table td {
  padding: 9px;
  text-align: left;
  border-bottom: 1px solid #e6eaf0;
}

.executive-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 1250px) {
  .executive-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .executive-dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .executive-kpi-grid,
  .executive-dashboard-grid,
  .executive-report-kpis,
  .executive-report-two-column {
    grid-template-columns: 1fr 1fr;
  }

  .executive-consultant-table article {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .executive-kpi-grid,
  .executive-dashboard-grid,
  .executive-report-kpis,
  .executive-report-two-column {
    grid-template-columns: 1fr;
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  .executive-report-body {
    background: white;
  }

  .executive-report-page {
    width: 100%;
    margin: 0;
    padding: 18px;
    box-shadow: none;
  }
}


/* VisaDesk v5.1 — Consultancy Fee & Payment Center */
.payment-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.payment-kpi-grid article {
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.payment-kpi-grid article.attention {
  border-color: #e8b66e;
  background: #fff8eb;
}

.payment-kpi-grid strong {
  font-size: 21px;
}

.payment-kpi-grid span {
  color: #758095;
  font-size: 9px;
}

.portal-payment-balance {
  min-width: 180px;
  padding: 12px;
  display: grid;
  gap: 3px;
  border-radius: 10px;
  background: #14213b;
  color: white;
  text-align: right;
}

.portal-payment-balance small {
  opacity: .7;
}

.portal-payment-balance strong {
  font-size: 18px;
}

.portal-payment-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.portal-payment-summary article {
  padding: 11px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.portal-payment-summary article.attention {
  background: #fff3df;
  color: #8d5a00;
}

.portal-payment-summary small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
}

.portal-payment-history {
  display: grid;
  gap: 8px;
}

.portal-payment-history article {
  padding: 11px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid #e2e7ef;
  border-radius: 9px;
}

.portal-payment-history article > div {
  display: grid;
  gap: 3px;
}

.portal-payment-history article > div:last-child {
  text-align: right;
}

.portal-payment-history a {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 800;
}

.consultancy-receipt-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.consultancy-receipt-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.consultancy-receipt-toolbar > div {
  display: grid;
  gap: 2px;
}

.consultancy-receipt-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.consultancy-receipt-page {
  width: min(800px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.consultancy-receipt-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.consultancy-receipt-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.consultancy-receipt-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.consultancy-receipt-header h1 {
  margin: 4px 0;
}

.consultancy-receipt-header p {
  margin: 0;
  color: #6e798d;
}

.consultancy-receipt-number {
  margin: 18px 0;
  padding: 13px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.consultancy-receipt-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.consultancy-receipt-details > div {
  padding: 11px;
  display: grid;
  gap: 3px;
  border: 1px solid #e2e7ef;
  border-radius: var(--vd-radius-sm);
}

.consultancy-receipt-details small,
.consultancy-receipt-number small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
}

.consultancy-receipt-amount {
  margin: 18px 0;
  padding: 22px;
  display: grid;
  gap: 4px;
  border-radius: 11px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  text-align: center;
}

.consultancy-receipt-amount strong {
  font-size: 29px;
}

.consultancy-receipt-note,
.consultancy-receipt-declaration {
  padding: 13px;
  margin-top: 12px;
  border-radius: 9px;
  background: #fff8e9;
}

.consultancy-receipt-note p {
  margin: 5px 0 0;
}

.consultancy-receipt-declaration {
  color: #5f6b7d;
  line-height: 1.55;
}

.consultancy-receipt-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 900px) {
  .payment-kpi-grid,
  .portal-payment-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 550px) {
  .payment-kpi-grid,
  .portal-payment-summary,
  .consultancy-receipt-details {
    grid-template-columns: 1fr;
  }

  .portal-payment-history article {
    display: grid;
  }
}

@media print {
  .consultancy-receipt-toolbar {
    display: none !important;
  }

  .consultancy-receipt-body {
    background: white;
  }

  .consultancy-receipt-page {
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none;
  }
}


/* VisaDesk v5.2 — Invoice & Payment Reminder Center */
.payment-reminder-history {
  padding: 11px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 9px;
  background: #fcfdff;
}

.payment-reminder-history > div {
  display: grid;
  gap: 3px;
}

.payment-reminder-history p {
  margin: 3px 0;
}

.portal-payment-reminders {
  display: grid;
  gap: 9px;
}

.portal-payment-reminders article {
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  border: 1px solid #e2e7ef;
  border-left: 4px solid #95a3b9;
  border-radius: 9px;
  background: #fcfdff;
}

.portal-payment-reminders article.unread {
  border-left-color: #dc8d2b;
  background: #fffaf1;
}

.portal-payment-reminders article > div {
  display: grid;
  gap: 3px;
}

.portal-payment-reminders article span:first-child {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff0d8;
  color: #936000;
  font-size: 9px;
  font-weight: 800;
}

.portal-payment-reminders h3,
.portal-payment-reminders p {
  margin: 3px 0;
}

.portal-payment-reminders form button {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-weight: 800;
}

.consultancy-invoice-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.consultancy-invoice-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.consultancy-invoice-toolbar > div {
  display: grid;
  gap: 2px;
}

.consultancy-invoice-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.consultancy-invoice-page {
  width: min(840px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.consultancy-invoice-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.consultancy-invoice-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.consultancy-invoice-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.consultancy-invoice-header h1 {
  margin: 4px 0;
}

.consultancy-invoice-header p {
  margin: 0;
  color: #6e798d;
}

.consultancy-invoice-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 18px 0;
}

.consultancy-invoice-meta > div {
  padding: 11px;
  display: grid;
  gap: 3px;
  border: 1px solid #e2e7ef;
  border-radius: var(--vd-radius-sm);
}

.consultancy-invoice-meta small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
}

.consultancy-invoice-summary {
  display: grid;
  gap: 7px;
}

.consultancy-invoice-summary > div {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.consultancy-invoice-summary > div.outstanding {
  padding: 16px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-size: 17px;
}

.consultancy-invoice-payments,
.consultancy-invoice-note,
.consultancy-invoice-terms {
  margin-top: 17px;
  padding: 14px;
  border: 1px solid #e2e7ef;
  border-radius: 9px;
}

.consultancy-invoice-payments table {
  width: 100%;
  border-collapse: collapse;
}

.consultancy-invoice-payments th,
.consultancy-invoice-payments td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #e7ebf1;
}

.consultancy-invoice-note {
  background: #fff8e9;
}

.consultancy-invoice-note p {
  margin: 5px 0 0;
}

.consultancy-invoice-terms {
  color: #5f6b7d;
  line-height: 1.55;
}

.consultancy-invoice-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 600px) {
  .portal-payment-reminders article,
  .consultancy-invoice-meta {
    grid-template-columns: 1fr;
  }
}

@media print {
  .consultancy-invoice-toolbar {
    display: none !important;
  }

  .consultancy-invoice-body {
    background: white;
  }

  .consultancy-invoice-page {
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none;
  }
}


/* VisaDesk v5.3 — Refund & Financial Reconciliation Center */
.refund-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.refund-kpi-grid article {
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.refund-kpi-grid article.attention {
  border-color: #e6af66;
  background: #fff8ea;
}

.refund-kpi-grid strong {
  font-size: 21px;
}

.refund-kpi-grid span {
  color: #758095;
  font-size: 9px;
}

.portal-refund-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.portal-refund-summary article {
  padding: 11px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.portal-refund-summary article.attention {
  background: #fff2de;
  color: #8d5a00;
}

.portal-refund-summary small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
}

.refund-receipt-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.refund-receipt-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.refund-receipt-toolbar > div {
  display: grid;
  gap: 2px;
}

.refund-receipt-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.refund-receipt-page {
  width: min(820px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.refund-receipt-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.refund-receipt-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.refund-receipt-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.refund-receipt-header h1 {
  margin: 4px 0;
}

.refund-receipt-header p {
  margin: 0;
  color: #6e798d;
}

.refund-receipt-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 18px 0;
}

.refund-receipt-details > div {
  padding: 11px;
  display: grid;
  gap: 3px;
  border: 1px solid #e2e7ef;
  border-radius: var(--vd-radius-sm);
}

.refund-receipt-details small {
  color: #758095;
  font-size: 8px;
  text-transform: uppercase;
}

.refund-receipt-amount {
  margin: 18px 0;
  padding: 22px;
  display: grid;
  gap: 4px;
  border-radius: 11px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  text-align: center;
}

.refund-receipt-amount strong {
  font-size: 29px;
}

.refund-receipt-reason,
.refund-receipt-note,
.refund-receipt-declaration {
  padding: 13px;
  margin-top: 12px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.refund-receipt-note {
  background: #fff8e9;
}

.refund-receipt-reason p,
.refund-receipt-note p {
  margin: 5px 0 0;
}

.refund-receipt-declaration {
  color: #5f6b7d;
  line-height: 1.55;
}

.refund-receipt-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 800px) {
  .refund-kpi-grid,
  .portal-refund-summary,
  .refund-receipt-details {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .refund-kpi-grid,
  .portal-refund-summary,
  .refund-receipt-details {
    grid-template-columns: 1fr;
  }
}

@media print {
  .refund-receipt-toolbar {
    display: none !important;
  }

  .refund-receipt-body {
    background: white;
  }

  .refund-receipt-page {
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none;
  }
}


/* VisaDesk v5.4 — Revenue, Expense & Profitability Center */
.profitability-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.profitability-kpi-grid article {
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.profitability-kpi-grid article.positive {
  border-color: #a9d8b6;
  background: #f2fbf4;
}

.profitability-kpi-grid article.negative {
  border-color: #e5a4aa;
  background: #fff4f5;
}

.profitability-kpi-grid strong {
  font-size: 20px;
}

.profitability-kpi-grid span {
  color: #758095;
  font-size: 9px;
}

.profitability-breakdown-list {
  display: grid;
  gap: 8px;
}

.profitability-breakdown-list > div {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.profitability-subheading {
  margin-top: 20px;
}

.negative-text {
  color: #b6323b !important;
}

.profitability-report-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.profitability-report-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.profitability-report-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profitability-report-toolbar a,
.profitability-report-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.profitability-report-page {
  width: min(980px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.profitability-report-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.profitability-report-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.profitability-report-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.profitability-report-header h1 {
  margin: 4px 0;
}

.profitability-report-header p {
  margin: 0;
  color: #6e798d;
}

.profitability-report-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.profitability-report-kpis article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: var(--vd-bg);
}

.profitability-report-kpis article.positive {
  background: #edf8f0;
}

.profitability-report-kpis article.negative {
  background: #fff0f1;
}

.profitability-report-kpis strong {
  font-size: 17px;
}

.profitability-report-kpis span {
  color: #758095;
  font-size: 9px;
}

.profitability-report-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}

.profitability-report-currency-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--vd-warning-soft, #fdf1e4);
  color: var(--vd-text, #22293b);
  font-size: 13px;
}

.profitability-report-currency-block {
  margin-bottom: 14px;
}

.profitability-report-currency-block:last-of-type {
  margin-bottom: 0;
}

.profitability-report-currency-heading {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--vd-muted, #6b7280);
}

.profitability-report-currency-block h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.profitability-report-two-column section,
.profitability-report-page > section {
  padding: 15px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
}

.profitability-report-row {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf0f4;
}

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

.profitability-report-table th,
.profitability-report-table td {
  padding: 9px;
  text-align: left;
  border-bottom: 1px solid #e6eaf0;
}

.profitability-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 1000px) {
  .profitability-kpi-grid,
  .profitability-report-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .profitability-kpi-grid,
  .profitability-report-kpis,
  .profitability-report-two-column {
    grid-template-columns: 1fr;
  }
}

@media print {
  .profitability-report-toolbar {
    display: none !important;
  }

  .profitability-report-body {
    background: white;
  }

  .profitability-report-page {
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none;
  }
}


/* VisaDesk v5.5 — College Partner & Commission Center */
.commission-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.commission-kpi-grid article {
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.commission-kpi-grid article.attention {
  border-color: #e6af66;
  background: #fff8ea;
}

.commission-kpi-grid strong {
  font-size: 21px;
}

.commission-kpi-grid span {
  color: #758095;
  font-size: 9px;
}

@media (max-width: 850px) {
  .commission-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .commission-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* VisaDesk v5.6 */
.commission-aging-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.commission-aging-grid article{padding:12px;display:grid;gap:4px;border-radius:9px;background:var(--vd-bg)}.commission-aging-grid article.warning{background:#fff4df}.commission-aging-grid article.critical{background:#ffe8ea;color:#9e3038}.commission-followup-card{padding:11px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto;gap:12px;border:1px solid #e2e7ef;border-radius:9px}.commission-invoice-body,.commission-aging-report-body{margin:0;background:#e9edf4;color:var(--vd-text);font-family:var(--vd-font)}.commission-invoice-toolbar,.commission-aging-report-toolbar{min-height:60px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;background:#14213b;color:#fff}.commission-invoice-toolbar button,.commission-aging-report-toolbar button,.commission-aging-report-toolbar a{padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(255,255,255,.08);color:#fff}.commission-invoice-page,.commission-aging-report-page{width:min(980px,calc(100% - 32px));margin:28px auto;padding:34px;background:#fff;box-shadow:0 16px 45px rgba(24,38,66,.16)}.commission-invoice-header,.commission-aging-report-header{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:3px solid var(--consultancy-accent,var(--vd-primary))}.commission-invoice-header img,.commission-aging-report-header img{width:72px;height:72px;object-fit:contain}.commission-invoice-parties,.commission-invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.commission-invoice-meta{grid-template-columns:repeat(3,minmax(0,1fr))}.commission-invoice-parties>div,.commission-invoice-meta>div{padding:12px;display:grid;gap:3px;border:1px solid #e2e7ef;border-radius:var(--vd-radius-sm)}.commission-invoice-calculation{display:grid;gap:7px}.commission-invoice-calculation>div{padding:10px 12px;display:flex;justify-content:space-between;border-radius:var(--vd-radius-sm);background:var(--vd-bg)}.commission-invoice-calculation>div.outstanding{padding:16px;background:var(--consultancy-accent,var(--vd-primary));color:#fff;font-size:17px}.commission-invoice-aging{margin-top:16px;padding:14px;display:flex;justify-content:space-between;border-radius:9px;background:#fff8e9}.commission-invoice-footer,.commission-aging-report-footer{display:flex;justify-content:space-between;padding-top:18px;margin-top:20px;border-top:1px solid #e1e6ee;color:#798497;font-size:9px}.commission-aging-report-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0}.commission-aging-report-kpis article{padding:11px;display:grid;gap:3px;border-radius:var(--vd-radius-sm);background:var(--vd-bg)}.commission-aging-report-kpis article.total{background:var(--consultancy-accent,var(--vd-primary));color:#fff}.commission-aging-report-table{width:100%;border-collapse:collapse}.commission-aging-report-table th,.commission-aging-report-table td{padding:9px;text-align:left;border-bottom:1px solid #e6eaf0}@media(max-width:900px){.commission-aging-grid,.commission-aging-report-kpis{grid-template-columns:repeat(3,1fr)}.commission-invoice-meta{grid-template-columns:1fr 1fr}}@media(max-width:600px){.commission-aging-grid,.commission-aging-report-kpis,.commission-invoice-parties,.commission-invoice-meta,.commission-followup-card{grid-template-columns:1fr}}@media print{.commission-invoice-toolbar,.commission-aging-report-toolbar{display:none!important}.commission-invoice-page,.commission-aging-report-page{width:100%;margin:0;padding:20px;box-shadow:none}}


/* VisaDesk v5.7 — Institution Agreement & Renewal Center */
.agreement-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.agreement-kpi-grid article{padding:14px;display:grid;gap:4px;border:1px solid #e1e7ef;border-radius:10px;background:white}.agreement-kpi-grid article.warning{background:#fff8e9;border-color:#e6b267}.agreement-kpi-grid article.critical{background:#fff0f1;border-color:#e3a0a6}.agreement-kpi-grid strong{font-size:22px}.agreement-kpi-grid span{font-size:9px;color:#758095}.agreement-warning-card{padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;border:1px solid #e6b267;border-left:4px solid #d7942c;border-radius:9px;background:#fffaf1}.agreement-warning-card.expired{border-color:#e3a0a6;border-left-color:#cc3944;background:#fff5f6}.agreement-warning-card>div{display:grid;gap:3px}.agreement-warning-card p{margin:2px 0}.agreement-warning-card>span{font-size:9px;font-weight:900;color:#9a6400}.agreement-report-body{margin:0;background:#e9edf4;color:var(--vd-text);font-family:var(--vd-font)}.agreement-report-toolbar{min-height:60px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;background:#14213b;color:white}.agreement-report-toolbar>div{display:flex;gap:10px;align-items:center}.agreement-report-toolbar a,.agreement-report-toolbar button{padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(255,255,255,.08);color:white}.agreement-report-page{width:min(1000px,calc(100% - 32px));margin:28px auto;padding:34px;background:white;box-shadow:0 16px 45px rgba(24,38,66,.16)}.agreement-report-header{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:3px solid var(--consultancy-accent,var(--vd-primary))}.agreement-report-header img{width:72px;height:72px;object-fit:contain}.agreement-report-header span{color:var(--consultancy-accent,var(--vd-primary));font-size:10px;font-weight:900;text-transform:uppercase}.agreement-report-header h1{margin:4px 0}.agreement-report-header p{margin:0;color:#6e798d}.agreement-report-page>section{margin-top:18px;padding:15px;border:1px solid #e1e7ef;border-radius:10px}.agreement-report-table{width:100%;border-collapse:collapse}.agreement-report-table th,.agreement-report-table td{padding:9px;text-align:left;border-bottom:1px solid #e6eaf0}.agreement-report-footer{display:flex;justify-content:space-between;gap:15px;padding-top:18px;margin-top:20px;border-top:1px solid #e1e6ee;color:#798497;font-size:9px}@media(max-width:750px){.agreement-kpi-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.agreement-kpi-grid{grid-template-columns:1fr}}@media print{.agreement-report-toolbar{display:none!important}.agreement-report-body{background:white}.agreement-report-page{width:100%;margin:0;padding:20px;box-shadow:none}}

/* VisaDesk v5.8 — Partner Relationship Center */
.relationship-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.relationship-kpi-grid article{padding:14px;display:grid;gap:4px;border:1px solid #e1e7ef;border-radius:10px;background:#fff}.relationship-kpi-grid article.attention{background:#fff5e6;border-color:#e8b66e}.relationship-kpi-grid strong{font-size:21px}.relationship-kpi-grid span{color:#758095;font-size:9px}.relationship-contact-card{padding:11px;margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;border:1px solid #e2e7ef;border-radius:9px;background:#fcfdff}.relationship-contact-card>div{display:grid;gap:3px}.relationship-contact-card p{margin:2px 0}.relationship-timeline{display:grid;gap:10px}.relationship-timeline article{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px;border-left:4px solid var(--consultancy-accent,var(--vd-primary));background:#f8faff;border-radius:var(--vd-radius-sm)}.relationship-timeline article>span{height:fit-content;padding:5px 8px;border-radius:999px;background:#e8edff;color:var(--consultancy-accent,var(--vd-primary));font-size:9px;font-weight:900}.relationship-timeline article>div{display:grid;gap:3px}.relationship-timeline p{margin:3px 0}.partner-report-body{margin:0;background:#e9edf4;color:var(--vd-text);font-family:var(--vd-font)}.partner-report-toolbar{min-height:60px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;background:#14213b;color:#fff}.partner-report-toolbar>div{display:flex;gap:10px;align-items:center}.partner-report-toolbar a,.partner-report-toolbar button{padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(255,255,255,.08);color:#fff}.partner-report-page{width:min(1050px,calc(100% - 32px));margin:28px auto;padding:34px;background:#fff;box-shadow:0 16px 45px rgba(24,38,66,.16)}.partner-report-header{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:3px solid var(--consultancy-accent,var(--vd-primary))}.partner-report-header img{width:72px;height:72px;object-fit:contain}.partner-report-header span{color:var(--consultancy-accent,var(--vd-primary));font-size:10px;font-weight:900;text-transform:uppercase}.partner-report-header h1{margin:4px 0}.partner-report-header p{margin:0;color:#6e798d}.partner-report-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0}.partner-report-kpis article{padding:12px;display:grid;gap:3px;border-radius:9px;background:var(--vd-bg)}.partner-report-kpis strong{font-size:21px}.partner-report-kpis span{font-size:9px;color:#758095}.partner-report-page>section{margin-top:14px;padding:15px;border:1px solid #e1e7ef;border-radius:10px}.partner-report-table{width:100%;border-collapse:collapse}.partner-report-table th,.partner-report-table td{padding:9px;text-align:left;border-bottom:1px solid #e6eaf0}.partner-report-footer{display:flex;justify-content:space-between;gap:15px;padding-top:18px;margin-top:20px;border-top:1px solid #e1e6ee;color:#798497;font-size:9px}@media(max-width:850px){.relationship-kpi-grid,.partner-report-kpis{grid-template-columns:1fr 1fr}}@media(max-width:500px){.relationship-kpi-grid,.partner-report-kpis{grid-template-columns:1fr}.relationship-timeline article{grid-template-columns:1fr}}@media print{.partner-report-toolbar{display:none!important}.partner-report-body{background:#fff}.partner-report-page{width:100%;margin:0;padding:20px;box-shadow:none}}


/* VisaDesk v5.9 — Partner Performance & Institutional Pipeline Center */
.partner-performance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.partner-performance-kpi-grid article {
  padding: 13px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.partner-performance-kpi-grid article.attention {
  border-color: #e4ad63;
  background: #fff8e9;
}

.partner-performance-kpi-grid strong {
  font-size: 18px;
}

.partner-performance-kpi-grid span {
  color: #758095;
  font-size: 8px;
}

.partner-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.partner-scorecard {
  padding: 15px;
  border: 1px solid #e0e6ee;
  border-radius: var(--vd-radius);
  background: #fcfdff;
}

.partner-scorecard-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8ecf2;
}

.partner-scorecard-heading span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.partner-scorecard-heading h3 {
  margin: 4px 0;
}

.partner-scorecard-heading p {
  margin: 0;
  color: #758095;
  font-size: 10px;
}

.partner-score {
  min-width: 90px;
  padding: 10px;
  display: grid;
  gap: 3px;
  align-content: center;
  border-radius: 10px;
  background: #14213b;
  color: white;
  text-align: center;
}

.partner-score strong {
  font-size: 24px;
}

.partner-score small {
  font-size: 8px;
}

.partner-scorecard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.partner-scorecard-metrics div {
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.partner-scorecard-metrics small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.partner-scorecard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.partner-scorecard-actions a {
  padding: 6px 8px;
  border-radius: 7px;
  background: #edf2f9;
  color: #34445e;
  font-size: 9px;
  font-weight: 800;
}

.partner-performance-report-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.partner-performance-report-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.partner-performance-report-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.partner-performance-report-toolbar a,
.partner-performance-report-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.partner-performance-report-page {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.partner-performance-report-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.partner-performance-report-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.partner-performance-report-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.partner-performance-report-header h1 {
  margin: 4px 0;
}

.partner-performance-report-header p {
  margin: 0;
  color: #6e798d;
}

.partner-performance-report-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.partner-performance-report-kpis article {
  padding: 11px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.partner-performance-report-kpis strong {
  font-size: 15px;
}

.partner-performance-report-kpis span {
  color: #758095;
  font-size: 8px;
}

.partner-performance-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.partner-performance-report-table th,
.partner-performance-report-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #e6eaf0;
}

.partner-performance-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 1100px) {
  .partner-performance-kpi-grid,
  .partner-performance-report-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .partner-scorecard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .partner-performance-kpi-grid,
  .partner-performance-report-kpis,
  .partner-scorecard-metrics {
    grid-template-columns: 1fr;
  }
}

@media print {
  .partner-performance-report-toolbar {
    display: none !important;
  }

  .partner-performance-report-body {
    background: white;
  }

  .partner-performance-report-page {
    width: 100%;
    margin: 0;
    padding: 15px;
    box-shadow: none;
  }
}


/* VisaDesk v6.0 — Institution Course & Intake Management Center */
.course-intake-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.course-intake-kpi-grid article {
  padding: 13px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.course-intake-kpi-grid article.attention {
  border-color: #e4ad63;
  background: #fff8e9;
}

.course-intake-kpi-grid strong {
  font-size: 20px;
}

.course-intake-kpi-grid span {
  color: #758095;
  font-size: 8px;
}

.course-match-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.course-match-form button {
  align-self: end;
}

.course-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.course-catalog-card {
  padding: 15px;
  border: 1px solid #e0e6ee;
  border-radius: var(--vd-radius);
  background: #fcfdff;
}

.course-catalog-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.course-catalog-heading span:first-child {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.course-catalog-heading h3 {
  margin: 4px 0;
}

.course-catalog-heading p {
  margin: 0;
  color: #758095;
  font-size: 10px;
}

.course-catalog-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.course-catalog-metrics div {
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.course-catalog-metrics small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.student-course-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-course-option-card {
  padding: 16px;
  border: 1px solid #dfe5ed;
  border-radius: var(--vd-radius);
  background: white;
}

.student-course-option-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.student-course-option-heading span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.student-course-option-heading h2 {
  margin: 4px 0;
}

.student-course-option-heading p {
  margin: 0;
  color: #758095;
}

.student-course-score {
  min-width: 90px;
  padding: 10px;
  display: grid;
  gap: 3px;
  align-content: center;
  border-radius: 10px;
  background: #14213b;
  color: white;
  text-align: center;
}

.student-course-score strong {
  font-size: 23px;
}

.student-course-option-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
}

.student-course-option-metrics div {
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.student-course-option-metrics small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.student-course-intake {
  padding: 11px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  border-radius: var(--vd-radius-sm);
  background: #fff8e9;
}

.course-intake-report-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.course-intake-report-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.course-intake-report-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.course-intake-report-toolbar a,
.course-intake-report-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.course-intake-report-page {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.course-intake-report-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.course-intake-report-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.course-intake-report-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.course-intake-report-header h1 {
  margin: 4px 0;
}

.course-intake-report-header p {
  margin: 0;
  color: #6e798d;
}

.course-intake-report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.course-intake-report-kpis article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.course-intake-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.course-intake-report-table th,
.course-intake-report-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #e6eaf0;
}

.course-intake-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 1000px) {
  .course-intake-kpi-grid,
  .course-match-form,
  .course-catalog-metrics,
  .student-course-option-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {
  .course-catalog-grid,
  .student-course-option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 550px) {
  .course-intake-kpi-grid,
  .course-match-form,
  .course-catalog-metrics,
  .student-course-option-metrics,
  .student-course-intake {
    grid-template-columns: 1fr;
  }
}

@media print {
  .course-intake-report-toolbar {
    display: none !important;
  }

  .course-intake-report-body {
    background: white;
  }

  .course-intake-report-page {
    width: 100%;
    margin: 0;
    padding: 15px;
    box-shadow: none;
  }
}


/* VisaDesk v6.1 — Admissions Pipeline & Offer Management Center */
.admissions-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.admissions-kpi-grid article {
  padding: 13px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.admissions-kpi-grid article.attention {
  border-color: #e4ad63;
  background: #fff8e9;
}

.admissions-kpi-grid strong {
  font-size: 20px;
}

.admissions-kpi-grid span {
  color: #758095;
  font-size: 8px;
}

.admission-document-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admission-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admission-case-card {
  padding: 15px;
  border: 1px solid #e0e6ee;
  border-radius: var(--vd-radius);
  background: #fcfdff;
}

.admission-case-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admission-case-heading > div > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.admission-case-heading h3 {
  margin: 4px 0;
}

.admission-case-heading p {
  margin: 0;
  color: #758095;
  font-size: 10px;
}

.admission-case-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.admission-case-metrics div {
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.admission-case-metrics small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.admission-offer-form {
  padding: 12px;
  border-radius: 10px;
  background: var(--vd-surface-alt);
}

.admission-condition-list,
.admission-document-list {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6ebf2;
}

.admission-condition-list > div {
  padding: 8px 0;
  display: grid;
  gap: 7px;
  border-bottom: 1px solid #edf0f4;
}

.admission-condition-list form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
}

.admission-document-list {
  display: grid;
  gap: 6px;
}

.admission-document-list a {
  padding: 8px;
  border-radius: 7px;
  background: #edf2f9;
  color: #34445e;
  font-size: 9px;
  font-weight: 800;
}

.student-admission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-admission-card {
  padding: 16px;
  border: 1px solid #dfe5ed;
  border-radius: var(--vd-radius);
  background: white;
}

.student-admission-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.student-admission-heading span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.student-admission-heading h2 {
  margin: 4px 0;
}

.student-admission-heading p {
  margin: 0;
  color: #758095;
}

.student-admission-decision {
  min-width: 105px;
  padding: 10px;
  display: grid;
  gap: 3px;
  align-content: center;
  border-radius: 10px;
  background: #14213b;
  color: white;
  text-align: center;
}

.student-admission-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
}

.student-admission-metrics div {
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.student-admission-metrics small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.student-admission-conditions,
.student-admission-documents {
  margin-top: 12px;
  padding: 12px;
  border-radius: 9px;
  background: var(--vd-surface-alt);
}

.student-admission-conditions > div {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 9px;
  border-bottom: 1px solid #e8ecf2;
}

.student-admission-documents {
  display: grid;
  gap: 7px;
}

.student-admission-documents a {
  padding: 8px;
  border-radius: 7px;
  background: white;
  color: var(--consultancy-accent, var(--vd-primary));
  font-weight: 800;
}

.student-admission-response {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-admission-response button {
  padding: 9px 11px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-weight: 800;
}

.student-admission-response button.secondary {
  background: #edf2f7;
  color: #34445e;
}

.admissions-report-body {
  margin: 0;
  background: #e9edf4;
  color: var(--vd-text);
  font-family: var(--vd-font);
}

.admissions-report-toolbar {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14213b;
  color: white;
}

.admissions-report-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admissions-report-toolbar a,
.admissions-report-toolbar button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
}

.admissions-report-page {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto;
  padding: 34px;
  background: white;
  box-shadow: 0 16px 45px rgba(24, 38, 66, .16);
}

.admissions-report-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--consultancy-accent, var(--vd-primary));
}

.admissions-report-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.admissions-report-header span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.admissions-report-header h1 {
  margin: 4px 0;
}

.admissions-report-header p {
  margin: 0;
  color: #6e798d;
}

.admissions-report-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.admissions-report-kpis article {
  padding: 12px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
}

.admissions-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.admissions-report-table th,
.admissions-report-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #e6eaf0;
}

.admissions-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e1e6ee;
  color: #798497;
  font-size: 9px;
}

@media (max-width: 950px) {
  .admissions-kpi-grid,
  .admission-case-metrics,
  .admission-document-form,
  .student-admission-metrics,
  .admissions-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {
  .admission-card-grid,
  .student-admission-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 550px) {
  .admissions-kpi-grid,
  .admission-case-metrics,
  .admission-document-form,
  .student-admission-metrics,
  .admissions-report-kpis,
  .student-admission-conditions > div,
  .admission-condition-list form {
    grid-template-columns: 1fr;
  }
}

@media print {
  .admissions-report-toolbar {
    display: none !important;
  }

  .admissions-report-body {
    background: white;
  }

  .admissions-report-page {
    width: 100%;
    margin: 0;
    padding: 15px;
    box-shadow: none;
  }
}


/* VisaDesk v6.2 — Admission Condition Evidence & Deferral Center */
.admissions-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.student-condition-row {
  grid-template-columns: 1fr auto auto;
}

.student-condition-row p,
.student-condition-row form {
  grid-column: 1 / -1;
}

.student-condition-row form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  align-items: center;
}

.student-condition-row form button {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-weight: 800;
}

.deferral-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.deferral-kpi-grid article {
  padding: 13px;
  display: grid;
  gap: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: white;
}

.deferral-kpi-grid article.attention {
  border-color: #e4ad63;
  background: #fff8e9;
}

.deferral-kpi-grid strong {
  font-size: 20px;
}

.deferral-kpi-grid span {
  color: #758095;
  font-size: 8px;
}

.deferral-create-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.deferral-card-grid,
.student-deferral-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.deferral-card,
.student-deferral-card {
  padding: 15px;
  border: 1px solid #e0e6ee;
  border-radius: var(--vd-radius);
  background: #fcfdff;
}

.deferral-card-heading,
.student-deferral-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.deferral-card-heading > div > span,
.student-deferral-heading > div > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.deferral-card-heading h3,
.student-deferral-heading h2 {
  margin: 4px 0;
}

.deferral-card-heading p,
.student-deferral-heading p {
  margin: 0;
  color: #758095;
}

.deferral-card-details,
.student-deferral-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.student-deferral-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deferral-card-details div,
.student-deferral-details div {
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f3f6fa;
}

.deferral-card-details small,
.student-deferral-details small {
  color: #758095;
  font-size: 7px;
  text-transform: uppercase;
}

.student-deferral-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.student-deferral-form label:last-of-type {
  grid-column: 1 / -1;
}

.student-deferral-form button {
  width: fit-content;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-weight: 800;
}

@media (max-width: 950px) {
  .admissions-kpi-grid,
  .deferral-create-form,
  .deferral-card-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {
  .deferral-card-grid,
  .student-deferral-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 550px) {
  .admissions-kpi-grid,
  .deferral-kpi-grid,
  .deferral-create-form,
  .deferral-card-details,
  .student-deferral-details,
  .student-deferral-form,
  .student-condition-row form {
    grid-template-columns: 1fr;
  }

  .student-deferral-form label:last-of-type {
    grid-column: auto;
  }
}

/* VisaDesk v6.3 — Tuition Fee & Enrolment Center */
.institution-fee-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:14px}
.institution-fee-kpi-grid article{padding:13px;display:grid;gap:4px;border:1px solid #e1e7ef;border-radius:10px;background:#fff}
.institution-fee-kpi-grid article.attention{border-color:#e4ad63;background:#fff8e9}
.institution-fee-kpi-grid strong{font-size:19px}.institution-fee-kpi-grid span{color:#758095;font-size:8px}
.institution-payment-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.institution-fee-card-grid,.student-fee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.institution-fee-card,.student-fee-card{padding:15px;border:1px solid #e0e6ee;border-radius:var(--vd-radius);background:#fcfdff}
.institution-fee-heading,.student-fee-heading{display:flex;justify-content:space-between;gap:12px}
.institution-fee-heading span:first-child,.student-fee-heading span:first-child{color:var(--consultancy-accent,var(--vd-primary));font-size:8px;font-weight:900;text-transform:uppercase}
.institution-fee-heading h3,.student-fee-heading h2{margin:4px 0}.institution-fee-heading p,.student-fee-heading p{margin:0;color:#758095}
.institution-fee-metrics,.student-fee-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.institution-fee-metrics div,.student-fee-metrics div{padding:9px;display:grid;gap:3px;border-radius:var(--vd-radius-sm);background:#f3f6fa}
.institution-fee-metrics small,.student-fee-metrics small{color:#758095;font-size:7px;text-transform:uppercase}
.institution-installment-list,.institution-payment-list,.student-fee-list{display:grid;gap:6px;margin-top:12px}
.institution-installment-list>div,.institution-payment-list>div,.student-fee-list>div{padding:9px;display:flex;justify-content:space-between;gap:10px;border-radius:var(--vd-radius-sm);background:#f6f8fb}
.institution-fee-report-body{margin:0;background:#e9edf4;color:var(--vd-text);font-family:var(--vd-font)}
.institution-fee-report-toolbar{min-height:60px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;background:#14213b;color:#fff}
.institution-fee-report-toolbar>div{display:flex;gap:10px;align-items:center}.institution-fee-report-toolbar a,.institution-fee-report-toolbar button{padding:8px 11px;border:1px solid #ffffff33;border-radius:7px;background:#ffffff14;color:#fff}
.institution-fee-report-page{width:min(1100px,calc(100% - 32px));margin:28px auto;padding:34px;background:#fff;box-shadow:0 16px 45px #18264229}
.institution-fee-report-header{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:3px solid var(--consultancy-accent,var(--vd-primary))}
.institution-fee-report-header img{width:72px;height:72px;object-fit:contain}.institution-fee-report-header span{color:var(--consultancy-accent,var(--vd-primary));font-size:10px;font-weight:900;text-transform:uppercase}.institution-fee-report-header h1{margin:4px 0}.institution-fee-report-header p{margin:0;color:#6e798d}
.institution-fee-report-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0}.institution-fee-report-kpis article{padding:12px;display:grid;gap:3px;border-radius:var(--vd-radius-sm);background:var(--vd-bg)}
.institution-fee-report-table{width:100%;border-collapse:collapse;font-size:10px}.institution-fee-report-table th,.institution-fee-report-table td{padding:8px;text-align:left;border-bottom:1px solid #e6eaf0}
.institution-fee-report-footer{display:flex;justify-content:space-between;padding-top:18px;margin-top:20px;border-top:1px solid #e1e6ee;color:#798497;font-size:9px}
@media(max-width:900px){.institution-fee-kpi-grid,.institution-payment-form,.institution-fee-metrics,.student-fee-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.institution-fee-card-grid,.student-fee-grid{grid-template-columns:1fr}}
@media(max-width:520px){.institution-fee-kpi-grid,.institution-payment-form,.institution-fee-metrics,.student-fee-metrics{grid-template-columns:1fr}}
@media print{.institution-fee-report-toolbar{display:none!important}.institution-fee-report-body{background:#fff}.institution-fee-report-page{width:100%;margin:0;padding:15px;box-shadow:none}}


/* VisaDesk v6.3.2 — Simple Admission Institute Center */
.simple-admission-institute-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.simple-admission-institute-form .full-width{grid-column:1/-1}
.simple-admission-upload-form{display:grid;grid-template-columns:2fr 1fr 2fr auto;gap:10px;align-items:end}
.simple-admission-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.simple-admission-card,.student-simple-admission-card{padding:16px;border:1px solid #dfe5ed;border-radius:var(--vd-radius);background:#fff}
.simple-admission-heading,.student-simple-admission-heading{display:flex;justify-content:space-between;gap:12px}
.simple-admission-heading span:first-child,.student-simple-admission-heading span{color:var(--consultancy-accent,var(--vd-primary));font-size:8px;font-weight:900;text-transform:uppercase}
.simple-admission-heading h3,.student-simple-admission-heading h2{margin:4px 0}
.simple-admission-heading p,.student-simple-admission-heading p{margin:0;color:#758095}
.simple-admission-details,.student-simple-admission-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0}
.simple-admission-details div,.student-simple-admission-details div{padding:9px;display:grid;gap:3px;border-radius:var(--vd-radius-sm);background:#f3f6fa}
.simple-admission-details small,.student-simple-admission-details small{color:#758095;font-size:7px;text-transform:uppercase}
.simple-admission-files,.student-simple-admission-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.student-simple-admission-files{padding-top:12px;border-top:1px solid #e5e9ef}
.student-simple-admission-files h3{width:100%;margin:0}
.student-simple-admission-files a{padding:8px 10px;border-radius:var(--vd-radius-sm);background:var(--consultancy-accent,var(--vd-primary));color:#fff;font-weight:800}
@media(max-width:950px){.simple-admission-institute-form,.simple-admission-details,.student-simple-admission-details{grid-template-columns:repeat(2,minmax(0,1fr))}.simple-admission-upload-form{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.simple-admission-card-grid{grid-template-columns:1fr}}
@media(max-width:550px){.simple-admission-institute-form,.simple-admission-upload-form,.simple-admission-details,.student-simple-admission-details{grid-template-columns:1fr}.simple-admission-institute-form .full-width{grid-column:auto}}

/* VisaDesk v6.4 — Unified Student Workspace */
.workspace-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:14px}.workspace-heading span{font-size:9px;font-weight:900;text-transform:uppercase;color:var(--consultancy-accent,var(--vd-primary))}.workspace-heading h1{margin:4px 0;font-size:28px}.workspace-heading p{margin:0;color:#6f7b8f}.workspace-heading-actions{display:flex;gap:8px;flex-wrap:wrap}
.workspace-summary-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}.workspace-summary-strip div{padding:11px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;display:grid;gap:3px}.workspace-summary-strip small{color:#758095;font-size:7px;text-transform:uppercase}.workspace-summary-strip strong{font-size:13px}
.workspace-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px;margin-bottom:14px;border:1px solid #e0e6ee;border-radius:11px;background:#f5f7fa}.workspace-tabs a{min-width:max-content;padding:9px 14px;border-radius:var(--vd-radius-sm);color:#526078;font-weight:800;font-size:10px}.workspace-tabs a.active{background:#14213b;color:#fff}
.workspace-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.workspace-card{padding:15px;border:1px solid #dfe5ed;border-radius:var(--vd-radius);background:#fff;margin-bottom:12px}.workspace-card.workspace-wide{grid-column:1/-1}
.workspace-card-title,.workspace-section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.workspace-card-title h2,.workspace-section-heading h2,.workspace-card h2{margin:0 0 10px}.workspace-card-title a{font-size:9px;font-weight:900;color:var(--consultancy-accent,var(--vd-primary))}.workspace-section-heading{margin-bottom:12px}.workspace-section-heading p{margin:3px 0;color:#758095}
.workspace-details{display:grid;grid-template-columns:140px 1fr;gap:8px 12px;margin:0}.workspace-details dt{color:#788397;font-size:8px;text-transform:uppercase}.workspace-details dd{margin:0;font-weight:700;overflow-wrap:anywhere}.workspace-empty{padding:14px;border-radius:var(--vd-radius-sm);background:#f5f7fa;color:#758095}
.workspace-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.workspace-record-list{display:grid;gap:7px}.workspace-record-list>div{padding:9px 10px;border-radius:var(--vd-radius-sm);background:#f5f7fa;display:grid;gap:3px}.workspace-record-list span{color:#6f7b8f;font-size:9px}.workspace-record-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.workspace-information-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.workspace-information-grid div{padding:10px;border-radius:var(--vd-radius-sm);background:#f4f7fa;display:grid;gap:3px}.workspace-information-grid div.wide{grid-column:span 2}.workspace-information-grid small{color:#758095;font-size:7px;text-transform:uppercase}
.workspace-document-buttons{display:flex;gap:8px;flex-wrap:wrap}.workspace-document-buttons a{padding:9px 11px;border-radius:var(--vd-radius-sm);background:var(--consultancy-accent,var(--vd-primary));color:#fff;font-weight:800;font-size:9px}.workspace-document-buttons span{color:#758095}.workspace-table-wrap{overflow-x:auto}.workspace-table{width:100%;border-collapse:collapse}.workspace-table th,.workspace-table td{padding:9px;text-align:left;border-bottom:1px solid #e5e9ef;font-size:9px}.workspace-table th{color:#68758a;text-transform:uppercase}
@media(max-width:950px){.workspace-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-information-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:750px){.workspace-heading,.workspace-card-title,.workspace-section-heading{align-items:flex-start;flex-direction:column}.workspace-overview-grid,.workspace-two-column{grid-template-columns:1fr}.workspace-record-columns{grid-template-columns:1fr}}@media(max-width:520px){.workspace-summary-strip,.workspace-information-grid{grid-template-columns:1fr}.workspace-details{grid-template-columns:1fr}.workspace-information-grid div.wide{grid-column:auto}}

/* Milestone E — Student Workspace readability pass. The v6.4 block above
   sets most workspace text at 7-9px, which reads as unprofessional and
   is genuinely hard to read against the 14px body font used everywhere
   else in the app. These overrides target the same selectors with the
   same specificity, so - appearing later in the file - they win the
   cascade without needing to touch the fragile minified block above. */
.workspace-heading span { font-size: 11px; }
.workspace-summary-strip small,
.workspace-information-grid small { font-size: 9.5px; }
.workspace-summary-strip strong { font-size: 15px; }
.workspace-card-title a { font-size: 12px; font-weight: 700; }
.workspace-record-list span { font-size: 11px; }
.workspace-document-buttons a { font-size: 11px; }
.workspace-table th, .workspace-table td { font-size: 11.5px; }

/* Milestone F — Central Review Queue: highlight rows staff have marked
   urgent so they stand out in a long feed without needing their own
   column. */
/* Superseded by the card-based Review Queue redesign below - the table
   row this targeted no longer exists (review_queue.html now renders
   .review-item-card articles instead of <tr> rows), kept only so nothing
   breaks if any older markup still references it. */
.review-queue-urgent { background: var(--vd-info-soft, #fff4e5); }

/* ================================================================
   Review Queue — card-based redesign
   Replaces the old dense multi-form table (Type/Student/Item/Submitted/
   Note/Decision/Flag all crammed into table cells) with one scannable
   card per item: a colored kind badge + left border (matched by kind:
   documents=primary, tasks=warning, forms=info, payments=success,
   agreements=muted), a student avatar, and the decision action as the
   visually primary element. The secondary "flag/internal note" control
   is tucked into a <details> disclosure so it doesn't compete for
   attention with the actual approve/reject decision. All reuses
   existing --vd-* design tokens - no new colors introduced.
   ================================================================ */
.review-queue-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.review-queue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.review-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-density-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 999px;
  background: var(--vd-surface);
  flex: 0 0 auto;
}
.density-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--vd-text-soft);
  cursor: pointer;
}
.density-btn.active {
  background: var(--vd-primary);
  color: #fff;
}
.review-kind-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--vd-border-soft);
  background: var(--vd-surface);
  color: var(--vd-text-soft);
  font-weight: 650;
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.review-kind-tab:hover {
  border-color: var(--kind-color, var(--vd-primary));
  color: var(--kind-color, var(--vd-primary));
}
.review-kind-tab strong {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vd-surface-alt);
  color: var(--vd-text-soft);
}
.review-kind-tab.active {
  background: var(--kind-color, var(--vd-primary));
  border-color: var(--kind-color, var(--vd-primary));
  color: #fff;
  box-shadow: var(--vd-shadow-sm);
}
.review-kind-tab.active strong {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

.review-queue-list {
  display: grid;
  gap: 12px;
}

.review-item-card {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border-soft);
  border-left: 4px solid var(--kind-color, var(--vd-primary));
  border-radius: var(--vd-radius);
  padding: 16px 18px;
  box-shadow: var(--vd-shadow-sm);
  transition: box-shadow .15s ease;
}
.review-item-card:hover { box-shadow: var(--vd-shadow); }
.review-item-card.urgent {
  background: var(--vd-danger-soft, #fdecec);
  border-left-color: var(--vd-danger);
}

.review-item-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}
.review-item-kind-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--kind-soft, var(--vd-primary-soft));
  color: var(--kind-color, var(--vd-primary));
}
.review-item-urgent-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--vd-danger);
  color: #fff;
}
.review-item-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--vd-muted);
}

.review-item-body {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}
.review-item-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kind-soft, var(--vd-primary-soft));
  color: var(--kind-color, var(--vd-primary));
  font-weight: 800;
  font-size: 15px;
}
.review-item-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.review-item-student a,
.review-item-student span {
  font-weight: 750;
  font-size: 15px;
  color: var(--vd-text);
}
.review-item-student a:hover { color: var(--vd-primary); }
.review-item-title { font-size: 13.5px; color: var(--vd-text-soft); }
.review-item-note { font-size: 12.5px; color: var(--vd-muted); }
.review-item-preview { font-size: 12.5px; font-weight: 650; }

.review-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--vd-border-soft);
}
.review-decision-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.review-decision-form input {
  padding: 8px 10px;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  font-size: 12.5px;
  min-width: 200px;
}
.review-item-informational {
  font-size: 12.5px;
  color: var(--vd-muted);
  font-style: italic;
}

.review-item-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-item-open-case {
  font-size: 12.5px;
  font-weight: 650;
}
.review-flag-toggle summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--vd-muted);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--vd-border-soft);
}
.review-flag-toggle summary::-webkit-details-marker { display: none; }
.review-flag-toggle[open] summary {
  color: var(--vd-primary);
  border-color: var(--vd-primary);
}
.review-flag-toggle form {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.review-flag-toggle label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--vd-text-soft);
}
.review-flag-toggle input:not([type="checkbox"]) {
  padding: 7px 9px;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  font-size: 12.5px;
}

.review-queue-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--vd-muted);
  background: var(--vd-surface);
  border: 1px dashed var(--vd-border);
  border-radius: var(--vd-radius);
}
.review-queue-empty strong { display: block; margin-bottom: 6px; color: var(--vd-text); font-size: 15px; }
.review-queue-empty p { margin: 0; font-size: 13px; }

/* Compact density - toggled client-side via the Comfortable/Compact
   control, remembered per-browser in localStorage. Collapses each card
   to a single tight row: smaller avatar, kind badge + student + title
   on one line (title truncates instead of wrapping), note/preview text
   hidden, decision inputs narrower. Nothing here changes what data is
   shown by the server - purely a denser CSS presentation of the same
   items, so more of the queue fits on screen at once. */
.review-queue-list.compact { gap: 6px; }
.review-queue-list.compact .review-item-card { padding: 9px 14px; }
.review-queue-list.compact .review-item-top { margin-bottom: 6px; }
.review-queue-list.compact .review-item-kind-badge,
.review-queue-list.compact .review-item-urgent-badge { padding: 3px 8px; font-size: 9.5px; }
.review-queue-list.compact .review-item-body {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.review-queue-list.compact .review-item-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.review-queue-list.compact .review-item-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.review-queue-list.compact .review-item-student { flex: 0 0 auto; }
.review-queue-list.compact .review-item-student a,
.review-queue-list.compact .review-item-student span { font-size: 13px; }
.review-queue-list.compact .review-item-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.review-queue-list.compact .review-item-note,
.review-queue-list.compact .review-item-preview { display: none; }
.review-queue-list.compact .review-item-actions { padding-top: 6px; }
.review-queue-list.compact .review-decision-form input { min-width: 130px; padding: 6px 8px; font-size: 12px; }
.review-queue-list.compact .review-flag-toggle summary { padding: 5px 9px; }

@media (max-width: 650px) {
  .review-item-body { flex-direction: column; }
  .review-item-actions { flex-direction: column; align-items: stretch; }
  .review-decision-form { flex-direction: column; align-items: stretch; }
  .review-decision-form input { min-width: 0; width: 100%; }
  .review-item-secondary { justify-content: space-between; }
  /* Compact mode's single-row layout is too tight below 650px - let it
     wrap onto two lines instead of squeezing/overflowing. */
  .review-queue-list.compact .review-item-body { flex-wrap: wrap; }
  .review-queue-list.compact .review-item-main { flex-wrap: wrap; }
  .review-queue-list.compact .review-item-title { white-space: normal; }
}

/* Milestone H — Staff Work Assignment: the assigned-countries/visa-
   categories checkbox groups on the Staff Profile edit form. */
.checkbox-group {
  border: 1px solid var(--vd-border-soft, #e9eef5);
  border-radius: var(--vd-radius-sm);
  padding: 10px 14px 14px;
  margin: 4px 0;
}
.checkbox-group legend { font-weight: 650; font-size: 12.5px; padding: 0 4px; }
.checkbox-group .field-hint { font-size: 11.5px; color: var(--vd-text-soft, #53627a); margin: 2px 0 10px; }
.checkbox-group .checkbox-option {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500;
  margin: 0 14px 8px 0;
}

/* Milestone E — "review, don't retype" pattern for Admission & Application.
   .workspace-review-notice is the banner explaining that data comes from
   the student's Portal; .workspace-correction wraps a staff-entry form
   behind a native <details> disclosure so the default view is read-only
   and forms only appear when staff deliberately open "Correct ...". */
.workspace-review-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--vd-info-soft, #eaf4ff);
  border-left: 3px solid var(--vd-info, #2173c8);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-info-soft, #eaf4ff);
  font-size: 12.5px;
  color: var(--vd-text);
}

.workspace-review-notice strong {
  color: var(--vd-info, #2173c8);
}

.workspace-correction {
  margin-top: 10px;
  border: 1px solid var(--vd-border-soft, #e9eef5);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-alt, #f8fafc);
}

/* Admission & Tuition Automation Phase E (2026-08-16) - one card per
   offer letter when an application has more than one (see
   AdmissionOfferLetter). Same border/radius language as
   .workspace-correction above, just always-open (no <details>) since
   every offer letter's summary is meant to be visible at a glance. */
.workspace-subcard {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--vd-border-soft, #e9eef5);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-alt, #f8fafc);
}

.workspace-subcard + .workspace-subcard {
  margin-top: 8px;
}

.workspace-correction summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--vd-text-soft, #53627a);
  list-style: none;
}

.workspace-correction summary::-webkit-details-marker { display: none; }

.workspace-correction summary::before {
  content: "✎ ";
}

.workspace-correction[open] summary {
  color: var(--vd-primary);
  border-bottom: 1px solid var(--vd-border-soft, #e9eef5);
}

.workspace-correction form {
  margin: 12px;
}

/* VisaDesk v6.4.1 — Simplified Left Menu */
.simplified-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.simplified-sidebar .sidebar-brand {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.simplified-sidebar .sidebar-brand-link {
  display: flex;
  gap: 10px;
  align-items: center;
  color: inherit;
}

.simplified-sidebar .sidebar-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  font-weight: 900;
}

.simplified-sidebar .sidebar-brand-link > span:last-child {
  display: grid;
  gap: 2px;
}

.simplified-sidebar .sidebar-brand-link small {
  opacity: .65;
  font-size: 8px;
}

.simplified-sidebar .sidebar-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.simplified-sidebar .sidebar-group {
  margin-bottom: 8px;
}

.simplified-sidebar .sidebar-group-title {
  display: block;
  padding: 6px 9px;
  opacity: .55;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.simplified-sidebar .sidebar-group > a,
.simplified-sidebar .sidebar-collapsible > a {
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  gap: 9px;
  align-items: center;
  border-radius: var(--vd-radius-sm);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
}

.simplified-sidebar .sidebar-group > a:hover,
.simplified-sidebar .sidebar-collapsible > a:hover {
  background: rgba(255,255,255,.08);
}

.simplified-sidebar .sidebar-group > a.active,
.simplified-sidebar .sidebar-collapsible > a.active {
  background: rgba(255,255,255,.15);
}

.simplified-sidebar .sidebar-icon {
  width: 20px;
  text-align: center;
  opacity: .8;
}

.simplified-sidebar .sidebar-collapsible {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 7px;
}

.simplified-sidebar .sidebar-collapsible summary {
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: var(--vd-radius-sm);
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  font-weight: 800;
}

.simplified-sidebar .sidebar-collapsible summary::-webkit-details-marker {
  display: none;
}

.simplified-sidebar .sidebar-collapsible summary:hover {
  background: rgba(255,255,255,.08);
}

.simplified-sidebar .sidebar-chevron {
  transition: transform .2s ease;
  opacity: .7;
}

.simplified-sidebar details[open] .sidebar-chevron {
  transform: rotate(90deg);
}

.simplified-sidebar .sidebar-collapsible > a {
  margin-left: 9px;
  padding-left: 13px;
  font-weight: 600;
  opacity: .88;
}

.simplified-sidebar .sidebar-footer {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.simplified-sidebar .sidebar-footer a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--vd-radius-sm);
  text-align: center;
  background: rgba(255,255,255,.08);
  color: inherit;
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 800px) {
  .simplified-sidebar .sidebar-menu {
    max-height: calc(100vh - 120px);
  }
}


/* VisaDesk v6.4.2 — Navigation Fix & Menu Audit */
.simplified-sidebar .sidebar-collapsible[open] > summary {
  background: rgba(255,255,255,.08);
}

.simplified-sidebar .sidebar-collapsible > a[href*="section="] {
  white-space: nowrap;
}

.simplified-sidebar .sidebar-brand-link:hover,
.simplified-sidebar .sidebar-footer a:hover {
  background: rgba(255,255,255,.12);
}


/* VisaDesk v6.5 — Global Student Search & Quick Access */
.global-search-topbar {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(320px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.global-student-search {
  min-width: 0;
  min-height: 39px;
  padding: 4px 5px 4px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  border: 1px solid #dce3ed;
  border-radius: 10px;
  background: white;
}

.global-search-icon {
  color: #748196;
  font-size: 17px;
}

.global-student-search input {
  min-width: 0;
  padding: 7px 2px;
  border: 0;
  outline: 0;
  background: transparent;
}

.global-student-search kbd {
  padding: 4px 6px;
  border: 1px solid #d9e0e9;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f6f8fb;
  color: #68758a;
  font: inherit;
  font-size: 8px;
  white-space: nowrap;
}

.global-student-search button,
.search-page-form button {
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  cursor: pointer;
  font-weight: 800;
}

.search-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 13px;
}

.search-page-heading span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.search-page-heading h1 {
  margin: 4px 0;
}

.search-page-heading p {
  margin: 0;
  color: #6f7b8f;
}

.search-page-form {
  padding: 10px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid #dfe5ed;
  border-radius: 11px;
  background: white;
}

.search-page-form input {
  padding: 10px 11px;
  border: 1px solid #dce3ec;
  border-radius: var(--vd-radius-sm);
  outline: 0;
}

.global-search-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.global-search-result-card {
  padding: 15px;
  border: 1px solid #dfe5ed;
  border-radius: var(--vd-radius);
  background: white;
}

.global-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.global-result-heading > div > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.global-result-heading h2 {
  margin: 4px 0;
}

.global-result-heading p {
  margin: 0;
  color: #748095;
}

.global-result-status {
  height: fit-content;
  padding: 6px 8px;
  border-radius: 999px;
  background: #edf3fa;
  color: #4b5c75;
  font-size: 8px;
  font-weight: 900;
}

.global-result-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.global-result-details div {
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f4f7fa;
}

.global-result-details small,
.global-result-application small {
  color: #748095;
  font-size: 7px;
  text-transform: uppercase;
}

.global-result-details strong {
  overflow-wrap: anywhere;
}

.global-result-application {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-radius: 9px;
  background: #fff8e9;
}

.global-result-application > div {
  display: grid;
  gap: 3px;
}

.global-result-application > div > span {
  color: #748095;
  font-size: 9px;
}

.global-result-application.empty {
  color: #748095;
}

.global-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.global-result-actions a {
  padding: 7px 9px;
  border-radius: 7px;
  background: #edf2f8;
  color: #42516a;
  font-size: 8px;
  font-weight: 900;
}

.global-result-actions a.primary {
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
}

.global-search-empty {
  grid-column: 1 / -1;
  padding: 34px;
  border: 1px dashed #ccd5e1;
  border-radius: var(--vd-radius);
  background: white;
  text-align: center;
}

.global-search-empty h2 {
  margin-top: 0;
}

.global-search-empty p {
  color: #748095;
}

@media (max-width: 1100px) {
  .global-search-topbar {
    grid-template-columns: auto minmax(280px, 1fr);
  }

  .global-search-topbar .topbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .global-result-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .global-search-topbar {
    grid-template-columns: 1fr;
  }

  .global-search-topbar .topbar-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .global-search-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .global-student-search {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .global-student-search kbd {
    display: none;
  }

  .search-page-heading {
    flex-direction: column;
  }

  .search-page-form {
    grid-template-columns: 1fr;
  }

  .global-result-details {
    grid-template-columns: 1fr;
  }
}

/* VisaDesk v6.6 — Master Application Form */
.simple-profile-form{max-width:880px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.simple-profile-note,.simple-profile-form .form-actions{grid-column:1/-1}.simple-profile-note{padding:13px;border-radius:9px;background:#f1f6ff;color:var(--vd-text-soft)}
.master-profile-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.master-profile-four div{padding:12px;display:grid;gap:4px;border-radius:9px;background:#f4f7fa}.master-profile-four small{color:#758095;font-size:8px;text-transform:uppercase}
.master-form-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:13px}.master-form-heading>div>span{color:var(--consultancy-accent,var(--vd-primary));font-size:9px;font-weight:900;text-transform:uppercase}.master-form-heading h2{margin:4px 0;font-size:25px}.master-form-heading p{margin:0;color:#748095}.master-form-status{padding:7px 10px;border-radius:999px;background:#fff4df;color:#866229;font-size:9px;font-weight:900}.master-form-status.status-complete{background:#e6f6ed;color:#247044}
.master-application-form{display:grid;gap:10px}.master-form-sticky-bar{position:sticky;top:8px;z-index:8;padding:10px 12px;display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #dce3ec;border-radius:10px;background:#fffffff5;box-shadow:0 8px 22px #1c2a441a}.master-form-sticky-bar>div:first-child{display:grid;gap:2px}.master-form-sticky-bar small{color:#748095;font-size:8px}.master-form-sticky-bar>div:last-child{display:flex;gap:7px}
.master-form-section{overflow:hidden;border:1px solid #dfe5ed;border-radius:11px;background:#fff}.master-form-section summary{padding:13px 15px;display:flex;gap:10px;align-items:center;cursor:pointer;list-style:none;font-weight:900;color:#273650}.master-form-section summary::-webkit-details-marker{display:none}.master-form-section summary span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--consultancy-accent,var(--vd-primary));color:#fff;font-size:9px}.master-form-section[open] summary{border-bottom:1px solid #e4e9f0;background:var(--vd-surface-alt)}
.master-form-grid{padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.master-form-grid label{display:grid;gap:5px;color:#47556c;font-size:9px;font-weight:800}.master-form-grid label.wide{grid-column:span 2}.master-form-grid label.full{grid-column:1/-1}.master-form-grid input,.master-form-grid select,.master-form-grid textarea{width:100%;padding:9px 10px;border:1px solid #d7dfe9;border-radius:var(--vd-radius-sm);background:#fff;color:#192338;font:inherit;font-weight:500}.master-form-grid input:disabled{background:#f1f4f8;color:#657188}.master-checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;padding:10px;border-radius:var(--vd-radius-sm);background:#fff8e9}
.master-form-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.master-form-review div{padding:11px;display:grid;gap:4px;border-radius:var(--vd-radius-sm);background:#f4f7fa}.master-form-review small{color:#748095;font-size:7px;text-transform:uppercase}.master-form-bottom-actions{padding:12px;display:flex;justify-content:flex-end;gap:8px;border:1px solid #dfe5ed;border-radius:10px;background:#fff}.workspace-inline-action{display:inline-block;margin-top:10px;color:var(--consultancy-accent,var(--vd-primary));font-size:9px;font-weight:900}
@media(max-width:950px){.master-profile-four,.master-form-grid,.master-form-review{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.simple-profile-form,.master-profile-four,.master-form-grid,.master-form-review{grid-template-columns:1fr}.simple-profile-note,.simple-profile-form .form-actions,.master-form-grid label.wide,.master-form-grid label.full{grid-column:auto}.master-form-heading,.master-form-sticky-bar{align-items:flex-start;flex-direction:column}.master-form-sticky-bar{position:static}}


/* VisaDesk v6.7 — Student Case Hub */
.workspace-tabs a b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #d84545;
  color: white;
  font-size: 8px;
}

.case-hub-upload-form {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.4fr auto;
  gap: 10px;
  align-items: end;
}

.case-hub-upload-form label,
.case-document-forms label,
.case-reply-form label {
  display: grid;
  gap: 5px;
  color: #4b5870;
  font-size: 9px;
  font-weight: 800;
}

.case-hub-upload-form input,
.case-hub-upload-form select,
.case-document-forms input,
.case-document-forms select,
.case-reply-form textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d8e0e9;
  border-radius: var(--vd-radius-sm);
  background: white;
  font: inherit;
}

.case-document-list {
  display: grid;
  gap: 11px;
}

.case-document-card {
  padding: 13px;
  border: 1px solid #e0e6ee;
  border-radius: 10px;
  background: #fbfcfe;
}

.case-document-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.case-document-heading > div > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.case-document-heading h3 {
  margin: 4px 0;
}

.case-document-heading p {
  margin: 0;
  color: #748095;
  font-size: 9px;
}

.case-status {
  height: fit-content;
  padding: 6px 8px;
  border-radius: 999px;
  background: #edf2f8;
  color: #46556d;
  font-size: 8px;
  font-weight: 900;
}

.case-status.status-approved {
  background: #e5f5eb;
  color: #287045;
}

.case-status.status-rejected {
  background: #fdeaea;
  color: #a33d3d;
}

.case-status.status-under-review {
  background: #fff2d8;
  color: #866126;
}

/* Document checklist status colors - "Submitted" and "Correction Required"
   used to fall back to the same flat grey badge as "Pending", so a staff
   member scanning the list couldn't tell an item awaiting their decision
   apart from one that simply hadn't been touched yet. */
.case-status.status-submitted {
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}
.case-status.status-correction-required {
  background: var(--vd-danger-soft);
  color: var(--vd-danger);
}
.case-status.status-pending,
.case-status.status-not-started {
  background: #edf2f8;
  color: #6b7690;
}
.case-status.status-not-applicable {
  background: #f1eef7;
  color: #6b5b95;
}

.case-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.doc-action-flag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vd-warning);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Checklist card left-accent by status - lets staff tell what needs them
   apart from what's just waiting, without reading every badge. Same
   success/warning/danger tokens as the Dashboard stat cards so "needs
   action" reads the same color everywhere in the app. */
.case-document-card.checklist-requirement-card.status-submitted {
  border-color: var(--vd-warning);
  background: var(--vd-warning-soft);
  border-left: 3px solid var(--vd-warning);
}
.case-document-card.checklist-requirement-card.status-correction-required {
  border-color: var(--vd-danger);
  background: var(--vd-danger-soft);
  border-left: 3px solid var(--vd-danger);
}
.case-document-card.checklist-requirement-card.status-approved {
  border-left: 3px solid var(--vd-success);
}
.case-document-card.checklist-requirement-card.status-pending {
  opacity: .85;
}
.case-document-card.checklist-requirement-card.status-not-applicable {
  border-left: 3px solid #a99bcf;
  opacity: .7;
}

/* Documents tab "what I have to do" summary strip */
.doc-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.doc-action-summary-item {
  padding: 12px 14px;
  border: 1px solid var(--vd-border-soft, #e0e5ef);
  border-radius: var(--vd-radius, 10px);
  background: #fff;
}
.doc-action-summary-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--vd-text);
}
.doc-action-summary-item span {
  color: var(--vd-muted, #68738a);
  font-size: 12px;
  font-weight: 650;
}
.doc-action-summary-item.is-active {
  border-color: var(--vd-warning);
  background: var(--vd-warning-soft);
}
.doc-action-summary-item.is-active strong {
  color: var(--vd-warning);
}
.doc-action-summary-item.warn.is-active {
  border-color: var(--vd-danger);
  background: var(--vd-danger-soft);
}
.doc-action-summary-item.warn.is-active strong {
  color: var(--vd-danger);
}
.doc-action-summary-item.done strong {
  color: var(--vd-success);
}

.case-review-summary {
  margin-top: 10px;
  padding: 9px;
  display: grid;
  gap: 3px;
  border-radius: var(--vd-radius-sm);
  background: #f2f5f9;
}

.case-review-summary span,
.case-review-summary small {
  color: #6f7b8e;
  font-size: 9px;
}

.case-document-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.case-document-forms {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.case-document-forms form {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  border-radius: var(--vd-radius-sm);
  background: white;
}

/* Milestone E - the "Replace with a corrected file" form sits inside a
   <details class="workspace-correction"> instead of being a direct grid
   child now (see student_detail.html). Style the wrapper to fill the
   same grid cell the plain form used to occupy; the descendant selector
   above still lays out the form inside it once opened. */
.case-document-forms > details.workspace-correction {
  background: white;
  border-radius: var(--vd-radius-sm);
  align-self: start;
}

.case-document-forms > details.workspace-correction form {
  background: transparent;
  padding: 4px 10px 10px;
}

.case-message-thread {
  max-height: 520px;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #f6f8fb;
}

.case-message {
  width: min(78%, 720px);
  padding: 10px 12px;
  border-radius: 11px;
  background: white;
  box-shadow: 0 2px 8px rgba(33,48,76,.06);
}

.case-message.consultant-message {
  margin-left: auto;
  background: #eaf1ff;
}

.case-message.student-message {
  margin-right: auto;
}

.case-message > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.case-message small {
  color: #748095;
  font-size: 8px;
}

.case-message p {
  margin: 7px 0 0;
  white-space: pre-wrap;
}

.case-reply-form {
  margin-top: 11px;
  display: grid;
  gap: 8px;
}

.case-reply-form button {
  width: fit-content;
  justify-self: end;
}

@media (max-width: 1000px) {
  .case-hub-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-document-forms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .case-hub-upload-form,
  .case-document-forms form {
    grid-template-columns: 1fr;
  }

  .case-message {
    width: 92%;
  }
}

/* VisaDesk v6.8 — Smart Overview & Flexible Master Form */
.student-status-snapshot{padding:15px;margin-bottom:14px;border:1px solid #dce3ec;border-radius:var(--vd-radius);background:#fff}.snapshot-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.snapshot-heading span{color:var(--consultancy-accent,var(--vd-primary));font-size:8px;font-weight:900;text-transform:uppercase}.snapshot-heading h2{margin:3px 0 0}.snapshot-heading a{padding:8px 10px;border-radius:var(--vd-radius-sm);background:var(--consultancy-accent,var(--vd-primary));color:#fff;font-size:9px;font-weight:900}
.snapshot-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin-top:12px}.snapshot-grid article{padding:9px;display:grid;gap:4px;border:1px solid #e3e8ef;border-radius:var(--vd-radius-sm);background:#f7f9fc}.snapshot-grid article.success{background:#eaf7ef;border-color:#cfead8}.snapshot-grid article.warning{background:#fff6e5;border-color:#f0dfb9}.snapshot-grid article.danger{background:var(--vd-danger-soft);border-color:#f1cccc}.snapshot-grid small{color:#748095;font-size:7px;text-transform:uppercase}.snapshot-grid strong{font-size:18px}
.snapshot-progress{height:7px;margin-top:11px;overflow:hidden;border-radius:999px;background:#e9edf3}.snapshot-progress div{height:100%;border-radius:inherit;background:var(--consultancy-accent,var(--vd-primary))}.snapshot-alert,.snapshot-ready{margin-top:10px;padding:9px 11px;display:flex;gap:8px;flex-wrap:wrap;border-radius:var(--vd-radius-sm);background:#fff6e5;color:#735924;font-size:9px}.snapshot-ready{background:#eaf7ef;color:#287045}
.overview-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.overview-check-item{padding:9px;display:flex;justify-content:space-between;gap:10px;border-radius:var(--vd-radius-sm);background:#f4f7fa}.overview-check-item.status-approved{background:#eaf7ef}.overview-check-item.status-missing{background:var(--vd-danger-soft)}.overview-check-item.status-received{background:#edf3fa}
.documents-tab-checklist .overview-checklist{grid-template-columns:1fr;max-height:420px;overflow-y:auto}
.institute-file-pair{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:var(--vd-radius-sm);background:#f4f7fa}
.institute-file-pair a{font-size:12px}
@media(max-width:900px){.documents-tab-upload,.documents-tab-checklist{grid-column:1}}
.master-flex-control{padding:14px;margin-bottom:12px;border:1px solid #dce3ec;border-radius:11px;background:#fff}.master-flex-heading h3,.master-custom-field-builder h3{margin:0 0 4px}.master-flex-heading p{margin:0;color:#748095}.master-applicability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.master-applicability-grid form{padding:9px;display:flex;justify-content:space-between;gap:9px;align-items:center;border-radius:var(--vd-radius-sm);background:#f4f7fa}.master-applicability-grid form>div{display:grid;gap:3px}.master-applicability-grid small{color:#748095;font-size:8px}
.master-custom-field-builder{padding-top:13px;margin-top:13px;border-top:1px solid #e4e9f0}.master-custom-field-builder>form{display:grid;grid-template-columns:1.2fr 1.4fr 1fr auto auto;gap:8px;align-items:end}.master-custom-field-builder label{display:grid;gap:5px;font-size:9px;font-weight:800}.master-custom-field-builder input,.master-custom-field-builder select{padding:9px 10px;border:1px solid #d8e0e9;border-radius:var(--vd-radius-sm)}.master-custom-field-builder .custom-required{display:flex;align-items:center;padding-bottom:9px}
.master-form-section.not-applicable{opacity:.72;border-style:dashed}.master-form-section.not-applicable summary{background:#f4f5f7}.section-not-applicable-note{margin:12px 14px;padding:10px;border-radius:var(--vd-radius-sm);background:#f1f3f6;color:#68758a;font-weight:800}.master-section-custom-fields{padding:0 14px 14px}.custom-field-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end}.custom-field-row.full{grid-column:1/-1}.custom-field-row>label{display:grid;gap:5px}.custom-field-row input,.custom-field-row select,.custom-field-row textarea{width:100%;padding:9px 10px;border:1px solid #d7dfe9;border-radius:var(--vd-radius-sm)}.custom-field-delete{padding:8px;border:0;border-radius:7px;background:var(--vd-danger-soft);color:#a33d3d;cursor:pointer;font-size:8px;font-weight:900}
@media(max-width:1100px){.snapshot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.master-applicability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.master-custom-field-builder>form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.snapshot-heading{align-items:flex-start;flex-direction:column}.snapshot-grid,.overview-checklist,.master-applicability-grid,.master-custom-field-builder>form{grid-template-columns:1fr}}


/* VisaDesk v6.9 — Private Word Master Information Center */
.private-document-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: #202d45;
  color: white;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.master-word-summary {
  border-left: 4px solid var(--consultancy-accent, var(--vd-primary));
}

.master-word-current {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}

.master-word-current > div:first-child > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.master-word-current h3 {
  margin: 4px 0;
}

.master-word-current p {
  margin: 0;
  color: #748095;
}

.master-word-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.master-word-form {
  display: grid;
  gap: 9px;
}

.master-word-form label {
  display: grid;
  gap: 5px;
  color: #4d5a71;
  font-size: 9px;
  font-weight: 800;
}

.master-word-form input,
.master-word-form select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d8e0e9;
  border-radius: var(--vd-radius-sm);
}

.master-word-form button {
  width: fit-content;
}

.master-word-secondary-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 9px;
  font-weight: 900;
}

.master-word-version-list {
  display: grid;
  gap: 9px;
}

.master-word-version {
  padding: 11px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid #e0e6ed;
  border-radius: 9px;
  background: var(--vd-surface-alt);
}

.master-word-version > div:first-child > span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.master-word-version h3 {
  margin: 3px 0;
}

.master-word-version p {
  margin: 0;
  color: #748095;
  font-size: 9px;
}

.master-word-version small {
  display: block;
  margin-top: 4px;
  color: #56647b;
}

.master-word-version-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.master-word-version-actions form {
  display: flex;
  gap: 6px;
}

.master-word-version-actions select {
  padding: 7px 8px;
  border: 1px solid #d8e0e9;
  border-radius: 7px;
}

.overview-check-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.overview-check-actions a {
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
  font-size: 8px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .master-word-current,
  .master-word-version {
    align-items: flex-start;
    flex-direction: column;
  }

  .master-word-version-actions {
    justify-content: flex-start;
  }

  .master-word-version-actions form {
    width: 100%;
    flex-direction: column;
  }
}


/* VisaDesk v7.0 — Student Portal Information Form */
.portal-form-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf3fa;
  color: #44546d;
  font-size: 9px;
  font-weight: 900;
}

.portal-information-form {
  display: grid;
  gap: 12px;
}

.portal-info-section {
  padding: 15px;
  border: 1px solid #dfe5ed;
  border-radius: var(--vd-radius);
  background: white;
}

.portal-info-section h2 {
  margin: 0 0 12px;
}

.portal-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-info-grid label,
.portal-repeat-row label {
  display: grid;
  gap: 5px;
  color: #4b5870;
  font-size: 9px;
  font-weight: 800;
}

.portal-info-grid label.wide {
  grid-column: span 2;
}

.portal-info-grid input,
.portal-info-grid select,
.portal-info-grid textarea,
.portal-repeat-row input,
.portal-repeat-row select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d6dee8;
  border-radius: var(--vd-radius-sm);
  background: white;
  font: inherit;
}

.portal-info-subtitle {
  padding: 8px 0;
  margin: 10px 0;
  border-bottom: 1px solid #e7ebf1;
  color: #34435d;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-repeat-heading {
  margin-top: 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.portal-repeat-heading > div {
  display: grid;
  gap: 3px;
}

.portal-repeat-heading small {
  color: #748095;
}

.portal-repeat-list {
  display: grid;
  gap: 8px;
}

.portal-repeat-row {
  padding: 10px;
  display: grid;
  gap: 8px;
  align-items: end;
  border: 1px solid #e2e7ee;
  border-radius: 9px;
  background: #f7f9fc;
}

.portal-repeat-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.portal-repeat-row.four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.portal-repeat-row.five {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

.remove-repeat {
  padding: 9px;
  border: 0;
  border-radius: 7px;
  background: var(--vd-danger-soft);
  color: #a33d3d;
  cursor: pointer;
  font-size: 8px;
  font-weight: 900;
}

.conditional-fields[hidden] {
  display: none !important;
}

.portal-information-actions {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  padding: 11px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 22px rgba(30,45,73,.12);
}

.student-portal-form-summary {
  border-left: 4px solid var(--consultancy-accent, var(--vd-primary));
}

.student-portal-form-summary span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.student-portal-form-summary h3 {
  margin: 4px 0;
}

.student-portal-form-summary p {
  margin: 0;
  color: #748095;
}

@media (max-width: 1000px) {
  .portal-info-grid,
  .portal-repeat-row.three,
  .portal-repeat-row.four,
  .portal-repeat-row.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remove-repeat {
    width: fit-content;
  }
}

@media (max-width: 620px) {
  .portal-info-grid,
  .portal-repeat-row.three,
  .portal-repeat-row.four,
  .portal-repeat-row.five {
    grid-template-columns: 1fr;
  }

  .portal-info-grid label.wide {
    grid-column: auto;
  }

  .portal-repeat-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-information-actions {
    position: static;
  }
}


/* VisaDesk v7.1 — Privacy, MOFA & Workspace Task Center */
.mofa-instruction-card {
  border-left: 4px solid var(--consultancy-accent, var(--vd-primary));
}

.mofa-notice {
  padding: 11px;
  margin-bottom: 12px;
  border-radius: var(--vd-radius-sm);
  background: #fff5dd;
  color: #6f5623;
}

.mofa-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mofa-document-list article {
  padding: 11px;
  border: 1px solid #e1e6ed;
  border-radius: 9px;
  background: #f7f9fc;
}

.mofa-document-list h3 {
  margin: 0 0 5px;
}

.mofa-document-list p {
  margin: 0;
  color: #68758a;
}

.faq-country-tabs, .faq-list {
  display: grid;
  gap: 8px;
}

.faq-country-guide, .faq-item {
  padding: 12px 14px;
  border: 1px solid #e1e6ed;
  border-radius: 9px;
  background: #f7f9fc;
}

.faq-country-guide summary, .faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: #1c2434;
}

.faq-guide-content, .faq-item p {
  margin: 8px 0 0;
  color: #4b5568;
  white-space: pre-wrap;
}

.faq-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-resource-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e1e6ed;
  border-radius: 9px;
  background: #f7f9fc;
  color: #294fae;
  font-weight: 700;
  font-size: 13px;
}

.faq-resource-link:hover {
  background: #edf2ff;
}

.faq-resource-link .nav-ic {
  width: 18px;
  height: 18px;
}

.workspace-task-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 12px;
}

.workspace-task-form label {
  display: grid;
  gap: 5px;
  color: #4b5870;
  font-size: 9px;
  font-weight: 800;
}

.workspace-task-form input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d7dfe9;
  border-radius: var(--vd-radius-sm);
}

.workspace-task-list {
  display: grid;
  gap: 8px;
}

.workspace-task-item {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid #e1e6ed;
  border-radius: 9px;
  background: #f7f9fc;
}

.workspace-task-item > div {
  display: grid;
  gap: 4px;
}

.workspace-task-item span {
  color: #748095;
  font-size: 9px;
}

.workspace-task-item form {
  display: flex;
  gap: 7px;
  align-items: center;
}

.workspace-task-item select {
  padding: 7px 8px;
  border: 1px solid #d7dfe9;
  border-radius: 7px;
}

@media (max-width: 900px) {
  .workspace-task-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .mofa-document-list,
  .workspace-task-form {
    grid-template-columns: 1fr;
  }

  .workspace-task-item {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* VisaDesk v7.2 — Simple Readable Sidebar */
.simple-readable-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 245px;
  width: 245px;
  overflow: hidden;
  background: #111d32;
  color: white;
}

.simple-sidebar-brand {
  padding: 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.simple-sidebar-brand a {
  display: flex;
  gap: 11px;
  align-items: center;
  color: white;
}

.simple-brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  font-size: 16px;
  font-weight: 900;
}

.simple-sidebar-brand a > span:last-child {
  display: grid;
  gap: 2px;
}

.simple-sidebar-brand strong {
  font-size: 17px;
}

.simple-sidebar-brand small {
  color: rgba(255,255,255,.6);
  font-size: 11px;
}

.simple-sidebar-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px 18px;
}

.simple-menu-primary {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.simple-menu-primary a,
.simple-menu-group > div > a {
  min-height: 43px;
  padding: 10px 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-radius: 9px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.simple-menu-primary a:hover,
.simple-menu-group > div > a:hover {
  background: rgba(255,255,255,.09);
}

.simple-menu-primary a.active,
.simple-menu-group > div > a.active {
  background: var(--vd-primary);
  color: white;
}

.simple-menu-icon {
  width: 23px;
  text-align: center;
  font-size: 14px;
  opacity: .9;
}

.simple-menu-group {
  padding-top: 9px;
  margin-top: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.simple-menu-group summary {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  color: white;
  font-size: 14px;
  font-weight: 800;
}

.simple-menu-group summary::-webkit-details-marker {
  display: none;
}

.simple-menu-group summary:hover,
.simple-menu-group[open] summary {
  background: rgba(255,255,255,.08);
}

.simple-menu-arrow {
  font-size: 20px;
  transition: transform .2s ease;
  opacity: .75;
}

.simple-menu-group[open] .simple-menu-arrow {
  transform: rotate(90deg);
}

.simple-menu-group > div {
  padding-top: 5px;
  display: grid;
  gap: 3px;
}

.simple-menu-group > div > a {
  min-height: 39px;
  padding-left: 18px;
  color: rgba(255,255,255,.87);
  font-size: 13px;
  font-weight: 600;
}

.simple-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.simple-sidebar-footer a {
  display: block;
  padding: 11px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: white;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.simple-sidebar-footer a:hover {
  background: rgba(255,255,255,.14);
}

@media (max-width: 900px) {
  .simple-readable-sidebar {
    min-width: 220px;
    width: 220px;
  }

  .simple-menu-primary a,
  .simple-menu-group summary {
    font-size: 13px;
  }

  .simple-menu-group > div > a {
    font-size: 12px;
  }
}


/* VisaDesk v7.3 — Organized Business Sidebar */
.business-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-width: 260px;
  overflow: hidden;
  background: #111d32;
  color: white;
}

.business-sidebar-brand {
  padding: 18px 15px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.business-sidebar-brand a {
  display: flex;
  gap: 12px;
  align-items: center;
  color: white;
}

.business-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  font-size: 17px;
  font-weight: 900;
}

.business-sidebar-brand a > span:last-child {
  display: grid;
  gap: 2px;
}

.business-sidebar-brand strong {
  font-size: 18px;
}

.business-sidebar-brand small {
  color: rgba(255,255,255,.62);
  font-size: 11px;
}

.business-sidebar-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 13px 10px 18px;
}

.business-primary-menu {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.business-primary-menu a,
.business-menu-group > div > a {
  min-height: 45px;
  padding: 11px 13px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-radius: 9px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.business-primary-menu a:hover,
.business-menu-group > div > a:hover {
  background: rgba(255,255,255,.09);
}

.business-primary-menu a.active {
  background: var(--vd-primary);
}

.business-menu-icon {
  width: 23px;
  text-align: center;
  font-size: 14px;
  opacity: .9;
}

.business-menu-group {
  padding-top: 8px;
  margin-top: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.business-menu-group summary {
  min-height: 47px;
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  color: white;
  font-size: 15px;
  font-weight: 800;
}

.business-menu-group summary::-webkit-details-marker {
  display: none;
}

.business-menu-group summary:hover,
.business-menu-group[open] summary {
  background: rgba(255,255,255,.08);
}

.business-menu-arrow {
  font-size: 21px;
  opacity: .78;
  transition: transform .2s ease;
}

.business-menu-group[open] .business-menu-arrow {
  transform: rotate(90deg);
}

.business-menu-group > div {
  padding: 5px 0 2px;
  display: grid;
  gap: 3px;
}

.business-menu-group > div > a {
  min-height: 40px;
  padding-left: 20px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 600;
}

.business-menu-group > div > a:hover {
  background: rgba(255,255,255,.08);
}

.business-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.business-sidebar-footer a,
.business-sidebar-footer button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: white;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.business-sidebar-footer a:hover,
.business-sidebar-footer button:hover {
  background: rgba(255,255,255,.14);
}

@media (max-width: 900px) {
  .business-sidebar {
    width: 230px;
    min-width: 230px;
  }

  .business-menu-group summary {
    font-size: 14px;
  }

  .business-menu-group > div > a {
    font-size: 12px;
  }
}

/* VisaDesk v7.4 — Portal Administration Separate Pages */
.clean-admin-nav{display:none!important}
.portal-management-heading,.portal-section-title-row{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.portal-management-heading{margin-bottom:14px}.portal-management-heading>div>span,.portal-section-title-row>div>span{color:var(--consultancy-accent,var(--vd-primary));font-size:9px;font-weight:900;text-transform:uppercase}.portal-management-heading h1,.portal-section-title-row h1{margin:4px 0;font-size:29px}.portal-management-heading p,.portal-section-title-row p{margin:0;color:#718096}
.portal-management-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:16px}.portal-management-stats article{padding:13px;display:grid;gap:5px;border:1px solid #dfe5ed;border-radius:10px;background:#fff}.portal-management-stats article.danger{background:var(--vd-danger-soft);border-color:#efcaca}.portal-management-stats small{color:#748095;font-size:8px;text-transform:uppercase}.portal-management-stats strong{font-size:21px}
.portal-management-groups{display:grid;gap:14px}.portal-management-group{padding:16px;border:1px solid #dfe5ed;border-radius:var(--vd-radius);background:#fff}.portal-group-heading{margin-bottom:12px}.portal-group-heading h2{margin:0 0 4px}.portal-group-heading p{margin:0;color:#748095}.portal-page-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.portal-page-card{min-height:108px;padding:13px;display:flex;justify-content:space-between;gap:12px;align-items:flex-end;border:1px solid #dfe5ed;border-radius:10px;background:#f7f9fc;color:#1f2c43}.portal-page-card:hover{border-color:var(--consultancy-accent,var(--vd-primary));background:var(--vd-primary-soft);transform:translateY(-1px)}.portal-page-card h3{margin:0 0 5px;font-size:15px}.portal-page-card p{margin:0;color:#68758a;font-size:10px;line-height:1.45}.portal-page-card>span{color:var(--consultancy-accent,var(--vd-primary));font-size:10px;font-weight:900;white-space:nowrap}
.portal-section-page-header{padding:14px 16px;margin-bottom:14px;border:1px solid #dfe5ed;border-radius:var(--vd-radius);background:#fff}.portal-section-breadcrumb{margin-bottom:10px;display:flex;gap:8px;align-items:center;color:#748095;font-size:10px}.portal-section-breadcrumb a{color:var(--consultancy-accent,var(--vd-primary));font-weight:800}.portal-section-header-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1050px){.portal-management-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-page-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.portal-management-heading,.portal-section-title-row{flex-direction:column}.portal-management-stats,.portal-page-card-grid{grid-template-columns:1fr}}


/* VisaDesk v7.5 — Team Management Center */
.team-page-tabs {
  margin-bottom: 14px;
  padding: 8px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  border: 1px solid #dfe5ed;
  border-radius: 11px;
  background: white;
}

.team-page-tabs a {
  padding: 9px 11px;
  border-radius: var(--vd-radius-sm);
  color: #536178;
  font-size: 11px;
  font-weight: 800;
}

.team-page-tabs a:hover,
.team-page-tabs a.active {
  background: var(--consultancy-accent, var(--vd-primary));
  color: white;
}

.team-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap: 8px;
  align-items: end;
}

.team-filter-bar input,
.team-filter-bar select,
.team-member-form input,
.team-member-form select,
.team-member-form textarea,
.team-login-fields input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d7dfe9;
  border-radius: var(--vd-radius-sm);
}

.team-member-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.team-member-form label {
  display: grid;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
}

.team-member-form .full {
  grid-column: 1 / -1;
}

.team-login-option {
  padding: 11px;
  border-radius: var(--vd-radius-sm);
  background: #f4f7fa;
}

.team-login-option label {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
}

.team-login-option input {
  width: auto;
}

.team-login-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.designation-list {
  display: grid;
  gap: 8px;
}

.designation-list article {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid #e0e6ed;
  border-radius: var(--vd-radius-sm);
  background: #f7f9fc;
}

.designation-list article > div {
  display: grid;
  gap: 4px;
}

.designation-list span {
  color: #748095;
  font-size: 9px;
}

.text-danger {
  color: #b83d3d;
  font-weight: 900;
}

@media (max-width: 800px) {
  .team-filter-bar,
  .team-member-form,
  .team-login-fields {
    grid-template-columns: 1fr;
  }

  .team-member-form .full {
    grid-column: auto;
  }
}


/* VisaDesk v7.6 — AI Workspace */
.ai-gather-card {
  border-left: 4px solid var(--consultancy-accent, var(--vd-primary));
}

.ai-gather-card small {
  display: block;
  margin-top: 9px;
  color: #748095;
}

.ai-draft-list {
  display: grid;
  gap: 12px;
}

.ai-draft-card {
  padding: 13px;
  border: 1px solid #dfe5ed;
  border-radius: 10px;
  background: var(--vd-surface-alt);
}

.ai-draft-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 11px;
}

.ai-draft-heading span {
  color: var(--consultancy-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-draft-heading h3 {
  margin: 4px 0;
}

.ai-draft-heading p {
  margin: 0;
  color: #748095;
  font-size: 9px;
}

.ai-draft-edit-form {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr;
  gap: 9px;
}

.ai-draft-edit-form label {
  display: grid;
  gap: 5px;
  color: #4b5870;
  font-size: 9px;
  font-weight: 800;
}

.ai-draft-edit-form .full {
  grid-column: 1 / -1;
}

.ai-draft-edit-form input,
.ai-draft-edit-form select,
.ai-draft-edit-form textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d7dfe9;
  border-radius: var(--vd-radius-sm);
  background: white;
  font: inherit;
}

.ai-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  align-items: end;
}

@media (max-width: 800px) {
  .ai-draft-heading {
    flex-direction: column;
  }

  .ai-draft-edit-form {
    grid-template-columns: 1fr;
  }

  .ai-draft-edit-form .full {
    grid-column: auto;
  }
}


/* VisaDesk v7.7 — Student List & Outstanding Balances */
.student-list-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-list-filters label,
.outstanding-filter-bar label {
  display: grid;
  gap: 5px;
  color: #4d5a71;
  font-size: 9px;
  font-weight: 800;
}

.student-list-filters input,
.student-list-filters select,
.outstanding-filter-bar input,
.outstanding-filter-bar select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d7dfe9;
  border-radius: var(--vd-radius-sm);
  background: white;
}

.student-list-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.student-list-table td {
  vertical-align: middle;
}

.outstanding-total-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.outstanding-total-grid article {
  padding: 14px;
  display: grid;
  gap: 5px;
  border: 1px solid #dfe5ed;
  border-radius: 10px;
  background: white;
}

.outstanding-total-grid small {
  color: #748095;
  font-size: 8px;
  text-transform: uppercase;
}

.outstanding-total-grid strong {
  font-size: 20px;
}

.outstanding-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap: 9px;
  align-items: end;
}

.badge.danger {
  background: #fde8e8;
  color: #a83838;
}

@media (max-width: 900px) {
  .student-list-filters,
  .outstanding-filter-bar,
  .outstanding-total-grid {
    grid-template-columns: 1fr;
  }

  .student-list-filter-actions {
    grid-column: auto;
    justify-content: flex-start;
  }
}

/* VisaDesk v7.8 — Stability Audit */
.audit-result{padding:9px 12px;border-radius:999px;font-size:10px;font-weight:900}.audit-result.passed{background:#e7f6ec;color:#24713d}.audit-result.failed{background:#fde8e8;color:#a83838}
.audit-metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:14px}.audit-metric-grid article{padding:13px;display:grid;gap:5px;border:1px solid #dfe5ed;border-radius:10px;background:#fff}.audit-metric-grid small{color:#748095;font-size:8px;text-transform:uppercase}.audit-metric-grid strong{font-size:22px}
.audit-failure-list{display:grid;gap:7px}.audit-failure-list>div{padding:9px;border:1px solid #efcaca;border-radius:var(--vd-radius-sm);background:var(--vd-danger-soft);color:#8f3434}.audit-stage-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.audit-stage-list span{padding:9px;border:1px solid #dfe5ed;border-radius:var(--vd-radius-sm);background:#f7f9fc;font-weight:700}
@media(max-width:900px){.audit-metric-grid,.audit-stage-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.audit-metric-grid,.audit-stage-list{grid-template-columns:1fr}}


/* ================================================================
   VisaDesk v7.9 — Professional CRM Visual System
   ================================================================ */

:root {
  --vd-primary: var(--consultancy-accent, #3157c8);
  --vd-primary-dark: #24449f;
  --vd-primary-soft: #eef3ff;
  --vd-sidebar: #10213d;
  --vd-sidebar-deep: #0b182d;
  --vd-sidebar-hover: rgba(255,255,255,.075);
  --vd-bg: #f4f7fb;
  --vd-surface: #ffffff;
  --vd-surface-alt: #f8fafc;
  --vd-text: #18243a;
  --vd-text-soft: #53627a;
  --vd-muted: #7b879b;
  --vd-border: #dfe6ef;
  --vd-border-soft: #e9eef5;
  --vd-success: #1f8a55;
  --vd-success-soft: #e8f7ef;
  --vd-warning: #b7791f;
  --vd-warning-soft: #fff7e7;
  --vd-danger: #c24141;
  --vd-danger-soft: #fdecec;
  --vd-info: #2173c8;
  --vd-info-soft: #eaf4ff;
  --vd-radius-sm: 8px;
  --vd-radius: 12px;
  --vd-radius-lg: 16px;
  --vd-shadow-sm: 0 2px 7px rgba(25, 42, 70, .055);
  --vd-shadow: 0 8px 24px rgba(25, 42, 70, .075);
  --vd-shadow-lg: 0 18px 45px rgba(15, 31, 57, .13);
  --vd-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--vd-bg);
  scroll-behavior: smooth;
}

body.visadesk-app {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 1%, rgba(49,87,200,.055), transparent 25rem),
    var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--vd-primary);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(49,87,200,.18);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(82,98,124,.3);
  background-clip: padding-box;
}

/* Layout */
.business-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 268px;
  min-width: 268px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    linear-gradient(180deg, var(--vd-sidebar) 0%, var(--vd-sidebar-deep) 100%);
  color: white;
  box-shadow: 8px 0 28px rgba(11,24,45,.12);
}

.app-shell {
  min-height: 100vh;
  margin-left: 268px;
  background: transparent;
}

.container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 26px 30px 48px;
}

/* Brand */
.business-sidebar-brand {
  padding: 22px 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.business-sidebar-brand a {
  display: flex;
  gap: 13px;
  align-items: center;
  color: #fff;
}

.business-brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.13);
}

.business-brand-mark svg {
  width: 38px;
  height: 38px;
}

.business-sidebar-brand a > span:last-child {
  display: grid;
  gap: 1px;
}

.business-sidebar-brand strong {
  color: #fff;
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -.02em;
}

.business-sidebar-brand small {
  color: rgba(224,233,247,.62);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Sidebar */
.business-sidebar-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 12px 22px;
}

.business-primary-menu {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.business-primary-menu a {
  position: relative;
  min-height: 47px;
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  color: rgba(234,241,251,.84);
  font-size: 13px;
  font-weight: 680;
}

.business-primary-menu a:hover {
  background: var(--vd-sidebar-hover);
  color: #fff;
  transform: translateX(2px);
}

.business-primary-menu a.active {
  background: linear-gradient(135deg, rgba(76,118,232,.98), rgba(49,87,200,.98));
  color: #fff;
  box-shadow: 0 8px 20px rgba(32,67,164,.28);
}

.business-primary-menu a.active::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: #8eb4ff;
}

.business-menu-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.business-menu-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Sidebar group entry points (Student Portal, Staff, ...) now render in
   the same .business-primary-menu list as the plain destinations
   (Dashboard, Students, ...) - see the unified sidebar_entries loop in
   base.html - so they share these rules already and need no separate
   class of their own. */

.business-sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.business-sidebar-footer a {
  display: block;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: rgba(239,244,252,.86);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.business-sidebar-footer a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Topbar */
.topbar.global-search-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  padding: 12px 28px;
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(320px, 1fr) auto;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(217,225,235,.85);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 5px 18px rgba(25,42,70,.035);
}

.topbar-page-name {
  display: grid;
  gap: 1px;
}

.topbar-context {
  color: var(--vd-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.topbar-page-name strong {
  color: var(--vd-text);
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -.02em;
}

.global-student-search {
  position: relative;
  width: 100%;
  max-width: 790px;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px 6px 14px;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  background: #fff;
  box-shadow: var(--vd-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.global-student-search:focus-within {
  border-color: rgba(49,87,200,.6);
  box-shadow: 0 0 0 4px rgba(49,87,200,.09), var(--vd-shadow-sm);
}

.global-student-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vd-text);
  font-size: 13px;
}

.global-search-icon {
  color: var(--vd-muted);
  font-size: 17px;
}

.global-student-search kbd {
  padding: 3px 6px;
  border: 1px solid var(--vd-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--vd-surface-alt);
  color: var(--vd-muted);
  font: 600 9px var(--vd-font);
}

.global-student-search button {
  min-height: 36px;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.global-student-search button:hover {
  background: var(--vd-primary-dark);
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.topbar-bell-wrap { position: relative; }
.topbar-bell {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--vd-surface-alt); border: 1px solid var(--vd-border);
  position: relative; color: var(--vd-text-soft);
}
.topbar-bell svg { width: 18px; height: 18px; fill: currentColor; }
.topbar-bell.has-unread { color: #b3261e; border-color: #f3c6c2; background: #fdf1f0; }
.topbar-bell b {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 999px; background: #d92d20; color: #fff;
  font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* The workspace switcher ("Ireland -> Study Visa") reuses .topbar-bell for
   its hover-dropdown behavior, but .topbar-bell is a fixed 36x36 circular
   icon button - never meant to hold a text label. With a real label inside
   it, the text overflowed the fixed circle and visually painted over the
   search bar next to it. This variant keeps the same background/border/
   dropdown behavior but sizes to its content like a normal pill/chip. */
.topbar-bell.topbar-workspace-chip {
  width: auto;
  height: auto;
  min-height: 36px;
  padding: 8px 14px;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-workspace-chip .topbar-workspace-label {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.topbar-bell-dropdown {
  display: none; position: absolute; right: 0; top: 44px; width: 320px;
  background: #fff; border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
  box-shadow: 0 12px 32px rgba(20, 33, 59, 0.16); z-index: 40; padding: 6px; gap: 4px;
  flex-direction: column; max-height: 380px; overflow-y: auto;
}
.topbar-bell-wrap:hover .topbar-bell-dropdown, .topbar-bell-wrap:focus-within .topbar-bell-dropdown { display: flex; }
.topbar-bell-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px;
  border-radius: var(--vd-radius-sm); color: inherit;
}
.topbar-bell-item:hover { background: var(--vd-surface-alt); }
.topbar-bell-item strong { font-size: 12px; }
.topbar-bell-item span { font-size: 11px; color: var(--vd-text-soft); }
.topbar-bell-item.priority { background: #fdf1f0; }
.topbar-bell-item.priority strong { color: #b3261e; }
.topbar-bell-viewall {
  text-align: center; padding: 8px; font-size: 11px; font-weight: 700;
  color: var(--consultancy-accent, var(--vd-primary));
}

.user-chip {
  padding: 8px 11px;
  border: 1px solid var(--vd-border);
  border-radius: 999px;
  background: var(--vd-surface-alt);
  color: var(--vd-text-soft);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}
.user-account-chip {
  color: var(--vd-text);
  text-decoration: none;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-account-chip:hover {
  border-color: var(--vd-primary);
  color: var(--vd-primary);
  background: #fff;
}

/* Headings */
.page-heading,
.clean-page-heading,
.workspace-section-heading,
.portal-management-heading,
.portal-section-title-row,
.portal-focused-title-row {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.page-heading h1,
.clean-page-heading h1,
.workspace-section-heading h2,
.portal-management-heading h1,
.portal-section-title-row h1,
.portal-focused-title-row h1 {
  margin: 0 0 5px;
  color: var(--vd-text);
  font-weight: 790;
  letter-spacing: -.035em;
}

.page-heading h1,
.clean-page-heading h1,
.portal-management-heading h1,
.portal-section-title-row h1,
.portal-focused-title-row h1 {
  font-size: clamp(25px, 2.2vw, 33px);
}

.page-heading p,
.clean-page-heading p,
.workspace-section-heading p,
.portal-management-heading p,
.portal-section-title-row p,
.portal-focused-title-row p {
  max-width: 760px;
  margin: 0;
  color: var(--vd-muted);
  font-size: 13px;
}

/* Surfaces */
.panel,
.clean-card,
.workspace-card,
.portal-management-group,
.portal-section-page-header,
.portal-focused-header,
.card {
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius-lg);
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-sm);
}

.panel,
.clean-card,
.workspace-card,
.portal-management-group {
  padding: 19px;
}

.panel:hover,
.workspace-card:hover,
.portal-page-card:hover {
  border-color: #d5dfec;
}

.panel h2,
.clean-card h2,
.workspace-card h2 {
  margin: 0 0 12px;
  color: var(--vd-text);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.02em;
}

/* KPI cards */
.kpi-grid,
.metrics-grid,
.summary-grid,
.portal-management-stats,
.audit-metric-grid,
.outstanding-total-grid {
  gap: 12px;
}

.kpi-grid > *,
.metrics-grid > *,
.summary-grid > *,
.portal-management-stats article,
.audit-metric-grid article,
.outstanding-total-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vd-border-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: var(--vd-shadow-sm);
}

.kpi-grid > *::after,
.metrics-grid > *::after,
.summary-grid > *::after,
.portal-management-stats article::after,
.audit-metric-grid article::after,
.outstanding-total-grid article::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -22px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(49,87,200,.05);
}

/* Dashboard/list-page KPI stat cards (.stat) - upgraded to match the
   panel/card language above instead of the plain flat box the early
   baseline system still defines. Adds a colored top accent + soft
   decorative circle so cards read at a glance (success/warning/danger/
   info), the same "glanceable KPI" pattern most SaaS CRMs use. */
.stat {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm);
  background: linear-gradient(180deg, #fff, #fbfcfe);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vd-primary);
  opacity: .85;
}

.stat::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(49,87,200,.05);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow);
  border-color: #d5dfec;
}

.stat strong {
  position: relative;
  display: block;
  color: var(--vd-text);
  font-weight: 800;
  letter-spacing: -.02em;
}

.stat span {
  position: relative;
  color: var(--vd-muted);
  font-weight: 650;
}

.stat.success::before { background: var(--vd-success); }
.stat.warning::before { background: var(--vd-warning); }
.stat.danger::before { background: var(--vd-danger); }
.stat.info::before { background: var(--vd-info); }
.stat.success::after { background: var(--vd-success-soft); }
.stat.warning::after { background: var(--vd-warning-soft); }
.stat.danger::after { background: var(--vd-danger-soft); }
.stat.info::after { background: var(--vd-info-soft); }
.stat.success strong { color: var(--vd-success); }
.stat.warning strong { color: var(--vd-warning); }
.stat.danger strong { color: var(--vd-danger); }
.stat.info strong { color: var(--vd-info); }

/* Dashboard "Due Today" / "Overdue" mini-stat cards - previously solid
   dark-navy boxes that clashed with the rest of the light theme. Now
   soft, semantically-tinted cards consistent with the badge/stat colors
   used everywhere else. */
.mini-stat-card {
  border-radius: var(--vd-radius);
  padding: 14px 18px;
  min-width: 150px;
  border: 1px solid var(--vd-border-soft);
  box-shadow: var(--vd-shadow-sm);
  background: var(--vd-surface);
}

.mini-stat-card.warning {
  background: var(--vd-warning-soft);
  border-color: rgba(183,121,31,.15);
}

.mini-stat-card.warning strong { color: var(--vd-warning); }

.mini-stat-card.danger {
  background: var(--vd-danger-soft);
  border-color: rgba(194,65,65,.15);
}

.mini-stat-card.danger strong { color: var(--vd-danger); }

.mini-stats strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.mini-stats span {
  font-size: 12px;
  font-weight: 650;
  color: var(--vd-text-soft);
}

/* Buttons */
.button,
button.button,
a.button {
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  justify-content: center;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--vd-border);
  border-radius: 9px;
  background: #fff;
  color: var(--vd-text-soft);
  box-shadow: 0 1px 2px rgba(25,42,70,.035);
  font-size: 11px;
  font-weight: 740;
  line-height: 1;
  cursor: pointer;
}

.button:hover,
button.button:hover,
a.button:hover {
  border-color: #cfd9e6;
  background: var(--vd-surface-alt);
  color: var(--vd-text);
  transform: translateY(-1px);
  box-shadow: var(--vd-shadow-sm);
}

.button.primary,
button.button.primary,
a.button.primary {
  border-color: var(--vd-primary);
  background: linear-gradient(135deg, #446dde, var(--vd-primary));
  color: #fff;
  box-shadow: 0 7px 16px rgba(49,87,200,.19);
}

.button.primary:hover,
button.button.primary:hover,
a.button.primary:hover {
  border-color: var(--vd-primary-dark);
  background: linear-gradient(135deg, #365ecf, var(--vd-primary-dark));
  color: #fff;
  box-shadow: 0 9px 20px rgba(49,87,200,.25);
}

.button.small,
a.button.small,
button.button.small {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--vd-radius-sm);
  font-size: 10px;
}

/* Secondary is the default .button look (white/bordered) — no extra class
   needed. The remaining semantic variants below give every page the same
   Success / Danger / Ghost styling instead of ad-hoc per-template CSS. */
.button.success,
button.button.success,
a.button.success {
  border-color: var(--vd-success);
  background: linear-gradient(135deg, #27a06a, var(--vd-success));
  color: #fff;
  box-shadow: 0 7px 16px rgba(31,138,85,.19);
}

.button.success:hover,
button.button.success:hover,
a.button.success:hover {
  border-color: var(--vd-success);
  background: linear-gradient(135deg, #1f8a55, #186f45);
  color: #fff;
  box-shadow: 0 9px 20px rgba(31,138,85,.25);
}

.button.danger,
button.button.danger,
a.button.danger {
  border-color: var(--vd-danger);
  background: linear-gradient(135deg, #d05a5a, var(--vd-danger));
  color: #fff;
  box-shadow: 0 7px 16px rgba(194,65,65,.19);
}

.button.danger:hover,
button.button.danger:hover,
a.button.danger:hover {
  border-color: var(--vd-danger);
  background: linear-gradient(135deg, #c24141, #a53535);
  color: #fff;
  box-shadow: 0 9px 20px rgba(194,65,65,.25);
}

/* UI POLISH FIX (2026-08-19) - dedicated WhatsApp-branded button variant
   (owner request: "Chat on WhatsApp must be green button of WhatsApp and
   separated from portal message"), so a WhatsApp entry point is never
   visually confused with this app's own blue "button primary" actions
   (like a portal message form's Send button) wherever the two sit near
   each other. #25D366 matches the same WhatsApp green already used for
   the WhatsApp integration card's icon_color in navigation.py. */
.button.whatsapp,
button.button.whatsapp,
a.button.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: #1da851;
  background: linear-gradient(135deg, #25D366, #1da851);
  color: #fff;
  box-shadow: 0 7px 16px rgba(29,168,81,.22);
}

.button.whatsapp:hover,
button.button.whatsapp:hover,
a.button.whatsapp:hover {
  border-color: #128c3e;
  background: linear-gradient(135deg, #1fbd5a, #128c3e);
  color: #fff;
  box-shadow: 0 9px 20px rgba(18,140,62,.28);
}

.button.ghost,
button.button.ghost,
a.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--vd-text-soft);
  box-shadow: none;
}

.button.ghost:hover,
button.button.ghost:hover,
a.button.ghost:hover {
  border-color: transparent;
  background: var(--vd-surface-alt);
  color: var(--vd-text);
  box-shadow: none;
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(49,87,200,.17);
  outline-offset: 2px;
}

/* Forms */
label {
  color: var(--vd-text-soft);
  font-size: 10px;
  font-weight: 720;
}

input,
select,
textarea {
  border: 1px solid var(--vd-border);
  border-radius: 9px;
  background: #fff;
  color: var(--vd-text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #cbd7e5;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(49,87,200,.62);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(49,87,200,.085);
}

input::placeholder,
textarea::placeholder {
  color: #a4adbc;
}

/* Forms Center's row-menu dropdown (⋯) is position:absolute inside this
   table's .table-wrap - overflow:auto on that wrapper clips the dropdown
   the moment it has enough items to extend past the wrapper's own height
   (worse now that Archive/Delete were added to it). The table itself
   never needs horizontal scrolling at normal widths, so it's safe to let
   this one table's wrapper show overflow instead of clipping it. */
.forms-library-panel .table-wrap {
  overflow: visible;
}

/* Tables */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius);
  background: #fff;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--vd-text-soft);
  font-size: 12px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 13px;
  border-bottom: 1px solid var(--vd-border);
  background: #f6f8fb;
  color: #5e6c82;
  text-align: left;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--vd-border-soft);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background-color .15s ease;
}

tbody tr:hover {
  background: #f9fbfe;
}

tbody td strong {
  color: var(--vd-text);
}

/* Status badges */
.badge,
.private-document-badge,
.audit-result {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(49,87,200,.12);
  border-radius: 999px;
  background: var(--vd-primary-soft);
  color: var(--vd-primary-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .015em;
}

.badge {
  padding: 5px 8px;
}

.badge.success {
  border-color: rgba(31,138,85,.12);
  background: var(--vd-success-soft);
  color: var(--vd-success);
}

.badge.warning {
  border-color: rgba(183,121,31,.12);
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}

.badge.danger {
  border-color: rgba(194,65,65,.12);
  background: var(--vd-danger-soft);
  color: var(--vd-danger);
}

/* Neutral/muted — for "Not Connected", "Unassigned", "Draft" and similar
   inactive states that shouldn't read as an error (danger) or a positive
   outcome (success). */
.badge.muted {
  border-color: var(--vd-border);
  background: var(--vd-surface-alt);
  color: var(--vd-muted);
}

/* Alerts */
.alert {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  background: var(--vd-info-soft);
  color: #285d93;
  font-size: 12px;
  font-weight: 620;
}

.alert.success {
  border-color: #cdebd9;
  background: var(--vd-success-soft);
  color: #246c45;
}

.alert.danger,
.alert.error {
  border-color: #f0cccc;
  background: var(--vd-danger-soft);
  color: #993a3a;
}

.alert.warning {
  border-color: #eeddb6;
  background: var(--vd-warning-soft);
  color: #8a611a;
}

.alert a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}

/* Tabs */
.workspace-tabs,
.team-page-tabs {
  padding: 6px;
  gap: 5px;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius);
  background: #fff;
  box-shadow: var(--vd-shadow-sm);
}

.workspace-tabs a,
.team-page-tabs a {
  min-height: 39px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--vd-radius-sm);
  color: var(--vd-text-soft);
  /* Milestone E - was 10px/750 weight, unreadably small next to the
     14px body font used everywhere else in the app. Bumped to something
     legible without changing the tab bar's height/shape. */
  font-size: 13px;
  font-weight: 650;
}

.workspace-tabs a:hover,
.team-page-tabs a:hover {
  background: var(--vd-surface-alt);
  color: var(--vd-text);
}

.workspace-tabs a.active,
.team-page-tabs a.active {
  background: var(--vd-primary);
  color: #fff;
  box-shadow: 0 5px 12px rgba(49,87,200,.18);
}

/* Section quick-tabs (base.html) - themed with the current section's
   own accent color (see NAVIGATION_GROUPS in app/navigation.py) rather
   than the app's default blue, so a page's tab strip visually matches
   the color of the hub page it belongs to. */
.section-quick-tabs {
  margin-bottom: 16px;
}
.section-quick-tabs a.active {
  background: var(--hub-accent, var(--vd-primary));
  box-shadow: 0 5px 12px -2px color-mix(in srgb, var(--hub-accent, var(--vd-primary)) 45%, transparent);
}
/* Separates the section's normal, in-flow pages from tabs that break
   that flow (external new-tab links, or flow_break items like Reports'
   Refusal Analysis which jumps into the AI Workspace) - see the
   two/three-pass loop in base.html that always renders those grouped
   tabs after this divider, regardless of their order in navigation.py. */
.section-quick-tabs-divider {
  align-self: stretch;
  width: 1px;
  margin: 6px 4px;
  background: var(--vd-border-soft);
}
.section-quick-tabs a.flow-break-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quick-tab-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hub-accent, var(--vd-primary)) 16%, #fff);
  color: var(--hub-accent, var(--vd-primary));
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.section-quick-tabs a.flow-break-tab.active .quick-tab-badge {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Checklist admin: "×" delete button riding alongside each country tab
   (Ireland excluded - see delete_checklist_country() guard in
   app/routes/checklist_admin.py). Wrapping span keeps the tab link and
   its delete form sitting together as one flex item inside .workspace-
   tabs, which is itself display:flex so this needs to stay inline. */
.workspace-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.workspace-tab-delete-form {
  display: inline-flex;
}

.workspace-tab-delete {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9aa4b5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.workspace-tab-delete:hover {
  background: #fde8e8;
  color: #d84545;
}

/* Portal management */
.portal-page-card {
  min-height: 118px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: var(--vd-shadow-sm);
}

.portal-page-card:hover {
  border-color: rgba(49,87,200,.28);
  background: linear-gradient(145deg, #fff, #f0f4ff);
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow);
}

/* Student workspace */
.student-workspace-shell,
.workspace-overview {
  color: var(--vd-text);
}

.workspace-card-title {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vd-border-soft);
}

.workspace-details {
  gap: 7px 16px;
}

.workspace-details dt {
  color: var(--vd-muted);
  /* Milestone E - was 8px, effectively unreadable. */
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.workspace-details dd {
  color: var(--vd-text);
  /* Milestone E - was 12px/660. */
  font-size: 13.5px;
  font-weight: 600;
}

/* UI POLISH FIX (2026-08-19) - owner report: "Improve UI of student
   information page especially profile." Identity header (avatar +
   name/id) and grouped-subsection styling for the Basic Profile card,
   so a long flat field list reads as scannable groups instead of one
   undifferentiated column. */
.profile-identity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--vd-border-soft);
}

.profile-identity-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vd-primary-soft, #edf2ff);
  color: var(--vd-primary);
  font-weight: 800;
  font-size: 17px;
}

.profile-identity-header strong {
  display: block;
  font-size: 15px;
}

.profile-identity-header small {
  color: var(--vd-muted);
}

.workspace-details-group {
  margin-bottom: 16px;
}

.workspace-details-group:last-child {
  margin-bottom: 0;
}

.workspace-details-group h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--consultancy-accent, var(--vd-primary));
}

/* AI workspace */
.ai-draft-card {
  border-color: var(--vd-border-soft);
  background: linear-gradient(180deg, #fff, #fafbfe);
  box-shadow: var(--vd-shadow-sm);
}

.ai-gather-card {
  border-left: 4px solid var(--vd-primary);
  background: linear-gradient(135deg, #fff, #f7f9ff);
}

/* Empty states */
.empty,
.workspace-empty {
  padding: 28px 18px;
  border: 1px dashed #d4dde9;
  border-radius: 11px;
  background: #fafbfd;
  color: var(--vd-muted);
  text-align: center;
  font-size: 12px;
}

/* Utilities */
.muted,
small {
  color: var(--vd-muted);
}

.two-column {
  gap: 14px;
}

.sidebar-overlay,
.mobile-menu-toggle {
  display: none;
}

/* Responsive */
@media (max-width: 1180px) {
  .topbar.global-search-topbar {
    grid-template-columns: auto minmax(250px, 1fr);
  }

  .topbar-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  .business-sidebar {
    width: 268px;
    min-width: 268px;
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  body.sidebar-open .business-sidebar {
    transform: translateX(0);
  }

  .app-shell {
    margin-left: 0;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: rgba(9,20,38,.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--vd-border);
    border-radius: 9px;
    background: #fff;
    color: var(--vd-text);
  }

  .mobile-menu-toggle svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  .topbar.global-search-topbar {
    grid-template-columns: minmax(150px, auto) 1fr;
    padding: 11px 16px;
  }

  .topbar-page-name {
    grid-template-columns: auto 1fr;
    column-gap: 9px;
    align-items: center;
  }

  .topbar-context {
    display: none;
  }

  .container {
    padding: 20px 18px 40px;
  }
}

@media (max-width: 680px) {
  .topbar.global-search-topbar {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .global-student-search {
    max-width: none;
  }

  .global-student-search kbd {
    display: none;
  }

  .page-heading,
  .clean-page-heading,
  .workspace-section-heading,
  .portal-management-heading,
  .portal-section-title-row,
  .portal-focused-title-row {
    flex-direction: column;
  }

  .container {
    padding: 16px 12px 34px;
  }

  .panel,
  .clean-card,
  .workspace-card,
  .portal-management-group {
    padding: 15px;
    border-radius: 13px;
  }

  .workspace-tabs,
  .team-page-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* VisaDesk v8.0 — Unified Student Workspace */
.unified-workspace-tabs {
  position: sticky;
  top: 86px;
  z-index: 12;
  margin-bottom: 18px;
  backdrop-filter: blur(14px);
}

.case-health-panel {
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius-lg);
  background:
    linear-gradient(135deg, rgba(49,87,200,.055), transparent 45%),
    #fff;
  box-shadow: var(--vd-shadow-sm);
}

.case-health-header {
  margin-bottom: 13px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}

.case-health-header span:first-child {
  color: var(--vd-primary);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.case-health-header h2 {
  margin: 3px 0 0;
  font-size: 19px;
  letter-spacing: -.025em;
}

.case-health-stage {
  padding: 7px 11px;
  border: 1px solid rgba(49,87,200,.14);
  border-radius: 999px;
  background: var(--vd-primary-soft);
  color: var(--vd-primary-dark);
  font-size: 10px;
  font-weight: 850;
}

.case-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.case-health-grid article,
.case-health-mini-grid article,
.finance-summary-grid article,
.case-health-banner > div {
  padding: 12px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 11px;
  background: rgba(255,255,255,.9);
}

.case-health-grid article.danger,
.finance-summary-grid article.warning {
  border-color: #efd4bf;
  background: var(--vd-warning-soft);
}

.case-health-grid small,
.case-health-mini-grid small,
.finance-summary-grid small,
.case-health-banner small {
  color: var(--vd-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.case-health-grid strong,
.case-health-mini-grid strong,
.finance-summary-grid strong,
.case-health-banner strong {
  color: var(--vd-text);
  font-size: 12px;
}

.case-next-action {
  margin-top: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  background: var(--vd-sidebar);
  color: #fff;
}

.case-next-action span {
  color: rgba(231,238,249,.7);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.case-next-action strong {
  font-size: 12px;
  text-align: right;
}

.badge.info {
  border-color: rgba(33,115,200,.12);
  background: var(--vd-info-soft);
  color: var(--vd-info);
}

.workspace-next-action-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-radius: var(--vd-radius);
  margin-bottom: 16px;
  background: var(--vd-info-soft);
  border: 1px solid rgba(33,115,200,.16);
  box-shadow: var(--vd-shadow-sm);
}
.workspace-next-action-banner::before {
  content: "→";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vd-info);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}
.workspace-next-action-banner span {
  display: block;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vd-muted);
}
.workspace-next-action-banner strong {
  font-size: 15px;
  font-weight: 750;
  color: var(--vd-text);
  flex: 1;
}
.workspace-next-action-banner.success { background: var(--vd-success-soft); border-color: rgba(31,138,85,.16); }
.workspace-next-action-banner.success::before { background: var(--vd-success); content: "✓"; }
.workspace-next-action-banner.warning { background: var(--vd-warning-soft); border-color: rgba(183,121,31,.16); }
.workspace-next-action-banner.warning::before { background: var(--vd-warning); content: "!"; }
.workspace-next-action-banner.danger { background: var(--vd-danger-soft); border-color: rgba(194,65,65,.16); }
.workspace-next-action-banner.danger::before { background: var(--vd-danger); content: "!"; }

/* ===== Student Workspace — readability & color refresh =====
   Scoped to .student-workspace-page (the /students/{id} staff page) only,
   so it doesn't touch the ~14 other templates that reuse the same
   .workspace-card / .badge / .unified-workspace-tabs classes. Most of the
   original type scale on this page ran 7-9px, which is hard to scan
   quickly - bumped to a comfortable 12-15px baseline with clearer weight
   contrast between labels and values, plus a bit more color to make
   status (success/warning/danger) and the primary accent easier to spot
   at a glance. */
.student-workspace-page {
  font-size: 14px;
  line-height: 1.55;
}

.student-workspace-page .workspace-heading h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.student-workspace-page .workspace-heading span {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
}

.student-workspace-page .workspace-heading p {
  font-size: 13.5px;
  color: var(--vd-text-soft);
}

.student-workspace-page h2 {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.015em;
}

.student-workspace-page .workspace-section-heading p {
  font-size: 13px;
  line-height: 1.5;
}

.student-workspace-page .workspace-card,
.student-workspace-page .case-health-panel,
.student-workspace-page .student-status-snapshot,
.student-workspace-page .assigned-forms-summary {
  padding: 13px 14px;
  margin-bottom: 9px;
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.student-workspace-page .workspace-card:hover {
  box-shadow: var(--vd-shadow);
  border-color: #d5dfec;
}

/* Compact the overview grid + heading + summary strip so more of the
   page is visible without scrolling, while keeping the readable type
   scale from the earlier pass. */
.student-workspace-page .workspace-overview-grid {
  gap: 9px;
}

.student-workspace-page .workspace-heading {
  margin-bottom: 10px;
}

.student-workspace-page .workspace-summary-strip {
  gap: 6px;
  margin-bottom: 10px;
}

.student-workspace-page .workspace-summary-strip div {
  padding: 8px 10px;
}

.student-workspace-page .unified-workspace-tabs {
  margin-bottom: 12px;
}

.student-workspace-page .case-health-header {
  margin-bottom: 8px;
}

.student-workspace-page .case-health-stage {
  padding: 5px 9px;
}

.student-workspace-page .case-health-grid {
  /* UI POLISH FIX (2026-08-19): "Case Health Summary" wraps its 6 boxes
     across 2 rows of 3 (the base .case-health-grid rule above), taking
     roughly twice the vertical space of the near-identical 6-box
     "workspace-summary-strip" status row above it on this same page,
     which already fits 6 in one row (see the repeat(6, ...) override for
     it further down this file). Matching that same single-row layout
     here so the two summary strips read as one consistent pattern
     instead of two different densities stacked on top of each other.
     The existing @media rules on .case-health-grid (1050px -> 2 columns,
     680px -> 1 column) still apply unchanged, so this only affects
     wider screens where 6-across comfortably fits. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.student-workspace-page .case-health-grid article,
.student-workspace-page .finance-summary-grid article {
  padding: 9px;
  gap: 3px;
}

.student-workspace-page .snapshot-heading {
  margin-bottom: 2px;
}

.student-workspace-page .snapshot-grid {
  gap: 6px;
  margin-top: 9px;
}

.student-workspace-page .snapshot-grid article {
  padding: 7px;
  gap: 2px;
}

.student-workspace-page .snapshot-progress {
  margin-top: 8px;
}

.student-workspace-page .snapshot-alert,
.student-workspace-page .snapshot-ready {
  margin-top: 7px;
  padding: 7px 9px;
}

.student-workspace-page .workspace-details {
  gap: 8px 16px;
}

.student-workspace-page .workspace-details dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--vd-muted);
}

.student-workspace-page .workspace-details dd {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--vd-text);
}

.student-workspace-page .unified-workspace-tabs {
  padding: 5px;
  gap: 5px;
}

.student-workspace-page .unified-workspace-tabs a {
  min-height: 33px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 750;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}

.student-workspace-page .unified-workspace-tabs a:hover {
  transform: translateY(-1px);
}

.student-workspace-page .unified-workspace-tabs a.active {
  box-shadow: var(--vd-shadow-sm);
}

.student-workspace-page .unified-workspace-tabs a b {
  margin-left: 6px;
  background: var(--vd-danger);
}

.student-workspace-page .snapshot-grid strong,
.student-workspace-page .case-health-grid strong {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.student-workspace-page .snapshot-grid small,
.student-workspace-page .case-health-grid small {
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .04em;
}

.student-workspace-page .snapshot-alert,
.student-workspace-page .snapshot-ready {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.student-workspace-page .case-next-action {
  margin-top: 8px;
  padding: 9px 12px;
}

.student-workspace-page .case-next-action span,
.student-workspace-page .case-health-header span:first-child {
  font-size: 10px;
}

.student-workspace-page .case-next-action strong {
  font-size: 13px;
}

.student-workspace-page .workspace-empty {
  font-size: 13px;
}

.student-workspace-page .alert {
  font-size: 13px;
  line-height: 1.5;
}

.student-workspace-page .case-message p {
  font-size: 13.5px;
  line-height: 1.55;
}

.student-workspace-page .workspace-task-item {
  padding: 9px 6px;
}

.student-workspace-page .workspace-task-item strong {
  font-size: 13.5px;
}

.student-workspace-page .workspace-task-item span {
  font-size: 11.5px;
}

.student-workspace-page .badge {
  font-size: 11px;
  padding: 4px 9px;
}

/* ===== Student Workspace — professional UI pass, Overview tab (2026-08-16) =====
   Direct owner request: "now i want to improve user interface of student
   work space in staff CRM please make it professional all pages" -
   confirmed direction: clean modern SaaS look (soft shadows, rounded
   cards, generous whitespace, muted accent), rolling out one tab at a
   time starting with Overview so the direction can be approved before
   the remaining 7 tabs get the same treatment. Scoped to
   .student-workspace-page for the same reason as every other rule in
   this section - these classes are reused by ~14 other admin templates
   that must not be affected. */

.student-workspace-page .case-health-panel {
  padding: 20px 22px;
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow);
}

.student-workspace-page .case-health-stage {
  font-size: 11px;
  padding: 8px 13px;
}

.student-workspace-page .case-health-grid article,
.student-workspace-page .finance-summary-grid article {
  border-radius: var(--vd-radius);
  transition: transform .12s ease, box-shadow .12s ease;
}

.student-workspace-page .case-health-grid article:hover,
.student-workspace-page .finance-summary-grid article:hover {
  transform: translateY(-1px);
  box-shadow: var(--vd-shadow-sm);
}

.student-workspace-page .case-next-action {
  border-radius: var(--vd-radius);
  background: linear-gradient(135deg, var(--vd-sidebar), var(--vd-sidebar-deep));
}

.student-workspace-page .student-status-snapshot {
  padding: 20px 22px;
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm);
}

.student-workspace-page .snapshot-heading a {
  border-radius: 999px;
  font-size: 11px;
  padding: 8px 13px;
  transition: transform .12s ease;
}

.student-workspace-page .snapshot-heading a:hover {
  transform: translateY(-1px);
}

.student-workspace-page .snapshot-grid {
  gap: 8px;
  margin-top: 14px;
}

.student-workspace-page .snapshot-grid article {
  border-radius: var(--vd-radius-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}

.student-workspace-page .snapshot-grid article:hover {
  transform: translateY(-1px);
  box-shadow: var(--vd-shadow-sm);
}

.student-workspace-page .snapshot-progress {
  height: 8px;
  margin-top: 12px;
  background: var(--vd-border-soft);
}

.student-workspace-page .snapshot-progress div {
  background: linear-gradient(90deg, var(--vd-primary), var(--vd-primary-dark));
}

.student-workspace-page .snapshot-alert,
.student-workspace-page .snapshot-ready {
  border-radius: var(--vd-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
}

.student-workspace-page .workspace-overview-grid {
  gap: 14px;
  margin-top: 4px;
}

.student-workspace-page .workspace-card-title a {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--vd-primary-soft);
  color: var(--vd-primary-dark);
  font-weight: 800;
  letter-spacing: 0;
  transition: background .15s ease, transform .1s ease;
}

.student-workspace-page .workspace-card-title a:hover {
  background: #e2eaff;
  transform: translateY(-1px);
}

.student-workspace-page .workspace-empty {
  padding: 16px;
  border: 1px dashed var(--vd-border);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-alt);
  color: var(--vd-muted);
  text-align: center;
}

.student-workspace-page .workspace-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--vd-primary-soft);
  color: var(--vd-primary-dark);
  font-size: 11px;
  font-weight: 800;
  transition: background .15s ease, transform .1s ease;
}

.student-workspace-page .workspace-inline-action:hover {
  background: #e2eaff;
  transform: translateY(-1px);
}

.student-workspace-page .workspace-document-buttons a {
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  box-shadow: var(--vd-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}

.student-workspace-page .workspace-document-buttons a:hover {
  transform: translateY(-1px);
  box-shadow: var(--vd-shadow);
}

.student-workspace-page .overview-checklist {
  gap: 8px;
}

.student-workspace-page .overview-check-item {
  padding: 11px 12px;
  border-radius: var(--vd-radius-sm);
  border-left: 3px solid var(--vd-border);
  transition: transform .12s ease, box-shadow .12s ease;
}

.student-workspace-page .overview-check-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--vd-shadow-sm);
}

.student-workspace-page .overview-check-item.status-approved { border-left-color: var(--vd-success); }
.student-workspace-page .overview-check-item.status-missing,
.student-workspace-page .overview-check-item.status-rejected { border-left-color: var(--vd-danger); }
.student-workspace-page .overview-check-item.status-received,
.student-workspace-page .overview-check-item.status-under-review { border-left-color: var(--vd-info); }

.student-workspace-page .overview-check-actions a {
  font-weight: 800;
  color: var(--vd-primary);
}

/* Tags rework (2026-08-14): per-student tag pills, shown on every tab of
   student_detail.html directly under the summary strip - see
   .workspace-tags-panel in that template. */
.workspace-tags-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 9px;
  background: #fff;
}

.workspace-tags-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  color: #758095;
  flex-shrink: 0;
}

.workspace-tags-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-pill-form {
  display: inline-flex;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.tag-pill-add {
  background: #eef2ff !important;
  color: var(--vd-primary);
  border: 1px dashed #b9c4e0;
}

.tag-pill-empty {
  font-size: 12px;
  color: #97a1b3;
}

.tag-quick-add-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.tag-quick-add-form input[type="text"] {
  border: 1px solid #d7deea;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  width: 130px;
}

/* Pipeline Board cards - same tags, read-only (see pipeline_board.html). */
.pipeline-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0;
}

.tag-pill-readonly {
  padding: 2px 8px;
  font-size: 10px;
  cursor: default;
}

.student-workspace-page .workspace-section-heading-note {
  margin: -6px 0 10px;
  color: var(--vd-muted);
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .student-workspace-page .workspace-heading h1 {
    font-size: 24px;
  }
}

/* ===== Per-tab color distinction =====
   Each tab's .workspace-section-heading gets a small accent bar + tinted
   icon dot so staff can tell at a glance which section of the workspace
   they're in, without reading the label. Colors are picked to be
   semantically loose but distinct - not tied to status meaning the way
   success/warning/danger are elsewhere on this page. */
.student-workspace-page .workspace-section-heading {
  padding-left: 14px;
  border-left: 4px solid var(--vd-primary);
  border-radius: 3px;
}
.student-workspace-page .heading-student-information { border-left-color: var(--vd-info); }
.student-workspace-page .heading-documents { border-left-color: #7a4fd6; }
.student-workspace-page .heading-admission { border-left-color: var(--vd-primary); }
.student-workspace-page .heading-finance { border-left-color: var(--vd-success); }
.student-workspace-page .heading-master { border-left-color: #526078; }
.student-workspace-page .heading-ai { border-left-color: #0f9b8e; }
.student-workspace-page .heading-case-hub { border-left-color: var(--vd-warning); }
.student-workspace-page .heading-portal { border-left-color: #c2418a; }
.student-workspace-page .heading-case-management { border-left-color: #8a5a2b; }

.student-workspace-page .unified-workspace-tabs a.active[href*="tab=student-information"] { background: var(--vd-info); }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=documents"] { background: #7a4fd6; }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=admission-application"] { background: var(--vd-primary); }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=finance"] { background: var(--vd-success); }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=master-information"] { background: #526078; }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=ai-workspace"] { background: #0f9b8e; }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=case-hub"] { background: var(--vd-warning); }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=portal"] { background: #c2418a; }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=case-management"] { background: #8a5a2b; }
.student-workspace-page .unified-workspace-tabs a.active[href*="tab=overview"] { background: #14213b; }

/* Documents tab - visually separate the upload form from the checklist
   reference so the two-column layout reads as "do this, check against
   this" rather than two unrelated cards. */
.student-workspace-page .documents-tab-upload {
  border-top: 3px solid #7a4fd6;
}
.student-workspace-page .documents-tab-checklist {
  border-top: 3px solid var(--vd-info);
}

/* Onboarding progress — simple 4-step visual tracker replacing a dense
   arrow-chain sentence, so status reads at a glance instead of requiring
   the staff member to parse a paragraph. */
.onboarding-stepper {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  row-gap: 14px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 130px;
}

.onboarding-step:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 2px;
  margin: 0 10px;
  background: var(--vd-border);
}

.onboarding-step-dot {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--vd-border);
  background: var(--vd-surface-alt);
  color: var(--vd-muted);
  font-weight: 800;
  font-size: 12px;
}

.onboarding-step-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vd-muted);
  white-space: nowrap;
}

.onboarding-step.done .onboarding-step-dot {
  border-color: var(--vd-success);
  background: var(--vd-success);
  color: #fff;
}

.onboarding-step.done .onboarding-step-label {
  color: var(--vd-text);
}

.onboarding-step.done:not(:last-child)::after {
  background: var(--vd-success);
}

.onboarding-step.current .onboarding-step-dot {
  border-color: var(--vd-info);
  background: var(--vd-info);
  color: #fff;
  box-shadow: 0 0 0 4px var(--vd-info-soft);
}

.onboarding-step.current .onboarding-step-label {
  color: var(--vd-text);
  font-weight: 800;
}

.case-health-mini-grid,
.finance-summary-grid,
.case-health-banner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.finance-summary-grid,
.case-health-banner {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.unified-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.unified-record-grid article,
.unified-record-list article {
  padding: 12px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 10px;
  background: var(--vd-surface-alt);
}

.unified-record-grid article span {
  color: var(--vd-primary);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.unified-record-grid h3 {
  margin: 4px 0;
  font-size: 13px;
}

.unified-record-grid p {
  margin: 0 0 4px;
  color: var(--vd-text-soft);
  font-size: 10px;
}

.unified-record-list {
  display: grid;
  gap: 7px;
}

/* Trigger Points inline management (2026-08-15) - spacing for the two
   Document/Visa File trigger lists on the Trigger Points tab. */
.trigger-inline-group {
  margin-top: 20px;
}

.trigger-inline-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}

.unified-record-list article {
  display: grid;
  gap: 3px;
}

.unified-record-list article strong {
  color: var(--vd-text);
}

.unified-record-list article.is-muted {
  opacity: .55;
}

.unified-record-list article.is-editing {
  padding: 8px 10px;
  border: 1px solid var(--vd-primary);
  border-radius: var(--vd-radius, 10px);
  background: var(--vd-primary-soft, #eef2ff);
}

.unified-record-list article span {
  color: var(--vd-muted);
  font-size: 10px;
}

@media (max-width: 1050px) {
  .case-health-grid,
  .unified-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-health-mini-grid,
  .finance-summary-grid,
  .case-health-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .case-health-grid,
  .case-health-mini-grid,
  .finance-summary-grid,
  .case-health-banner,
  .unified-record-grid {
    grid-template-columns: 1fr;
  }

  .case-next-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-next-action strong {
    text-align: left;
  }

  .unified-workspace-tabs {
    top: 122px;
  }
}


/* VisaDesk v8.1 — White-Label Customization Center */
.powered-by {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.48);
  text-align: center;
  font-size: 8px;
}

.font-small { font-size: 12px; }
.font-medium { font-size: 14px; }
.font-large { font-size: 16px; }

.density-compact .container { padding-top: 18px; }
.density-compact .panel,
.density-compact .workspace-card,
.density-compact .clean-card { padding: 14px; }
.density-compact tbody td { padding-top: 8px; padding-bottom: 8px; }

.corners-square {
  --vd-radius-sm: 3px;
  --vd-radius: 5px;
  --vd-radius-lg: 7px;
}

.sidebar-width-compact .business-sidebar {
  width: 224px;
  min-width: 224px;
}
.sidebar-width-compact .app-shell {
  margin-left: 224px;
}

.content-width-centered .container { max-width: 1280px; }
.content-width-wide .container { max-width: 1680px; }
.content-width-full .container { max-width: none; }

.topbar-scrolling .topbar.global-search-topbar { position: relative; }

.sidebar-light .business-sidebar {
  background: var(--vd-surface);
  color: var(--vd-text);
  border-right: 1px solid var(--vd-border);
  box-shadow: 7px 0 22px rgba(25,42,70,.06);
}
.sidebar-light .business-sidebar a,
.sidebar-light .business-sidebar summary,
.sidebar-light .business-sidebar strong {
  color: var(--vd-text);
}
.sidebar-light .business-sidebar small,
.sidebar-light .powered-by {
  color: var(--vd-muted);
}
.sidebar-light .business-menu-primary a,
.sidebar-light .business-primary-menu a {
  color: var(--vd-text-soft);
}

.sidebar-position-right .business-sidebar {
  left: auto;
  right: 0;
}
.sidebar-position-right .app-shell {
  margin-left: 0;
  margin-right: 268px;
}
.sidebar-position-right.sidebar-width-compact .app-shell {
  margin-right: 224px;
}

.white-label-heading-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.white-label-presets {
  margin-bottom: 15px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.preset-card {
  width: 100%;
  min-height: 105px;
  padding: 13px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius);
  background: var(--vd-surface-alt);
  text-align: left;
  cursor: pointer;
}
.preset-card:hover {
  border-color: var(--vd-primary);
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow);
}
.preset-colors {
  display: flex;
  gap: 5px;
}
.preset-colors i {
  width: 30px;
  height: 24px;
  border-radius: 6px;
}
.preset-card strong { color: var(--vd-text); }
.preset-card small { color: var(--vd-muted); }

.white-label-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 15px;
  align-items: start;
}
.white-label-main {
  display: grid;
  gap: 15px;
}

.customization-form-grid,
.terminology-grid,
.color-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.customization-form-grid label,
.terminology-grid label,
.color-control-grid label {
  display: grid;
  gap: 5px;
}
.checkbox-field {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.checkbox-field input { width: auto; }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.row-actions form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.row-actions select {
  padding: 5px 6px;
  border: 1px solid #d8dee8;
  border-radius: var(--vd-radius-sm);
  font-size: 11px;
}

.color-input-wrap {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px;
}
.color-input-wrap input[type="color"] {
  width: 52px;
  height: 40px;
  padding: 3px;
}

.form-help {
  margin: 10px 0 0;
  color: var(--vd-muted);
  font-size: 10px;
}

.menu-customization-list,
.workspace-tab-customization {
  display: grid;
  gap: 7px;
}
.menu-customization-list h3 {
  margin: 13px 0 2px;
  color: var(--vd-text);
  font-size: 12px;
}
.menu-customization-list article,
.workspace-tab-customization article {
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(180px, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--vd-border-soft);
  border-radius: 9px;
  background: var(--vd-surface-alt);
}
.workspace-tab-customization article {
  grid-template-columns: minmax(210px, 1fr) minmax(180px, 1fr) 70px;
}
.switch-line {
  display: flex;
  gap: 8px;
  align-items: center;
}
.switch-line input { width: auto; }

.widget-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.widget-toggle-grid label {
  padding: 9px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-alt);
}
.widget-toggle-grid input { width: auto; }

.sticky-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  background: rgba(255,255,255,.94);
  box-shadow: var(--vd-shadow-lg);
  backdrop-filter: blur(12px);
}
.sticky-save-bar span {
  color: var(--vd-muted);
  font-size: 10px;
}

.white-label-preview {
  position: sticky;
  top: 92px;
  overflow: hidden;
  border: 1px solid var(--vd-border-soft);
  border-radius: 14px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow);
}
.preview-header {
  padding: 12px;
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--vd-border-soft);
}
.preview-shell {
  height: 420px;
  display: grid;
  grid-template-columns: 100px 1fr;
  overflow: hidden;
}
.preview-sidebar {
  padding: 14px 9px;
  display: grid;
  align-content: start;
  gap: 8px;
  background: var(--vd-sidebar);
  color: white;
}
.preview-logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: white;
  font-weight: 900;
}
.preview-sidebar strong { font-size: 9px; }
.preview-link {
  padding: 6px;
  border-radius: 5px;
  font-size: 7px;
  opacity: .8;
}
.preview-link.active {
  background: var(--vd-primary);
  opacity: 1;
}
.preview-content {
  padding: 13px;
  background: var(--vd-bg);
}
.preview-topbar {
  height: 25px;
  margin: -13px -13px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: white;
}
.preview-content h3 {
  margin: 0 0 12px;
  font-size: 11px;
}
.preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.preview-cards i {
  height: 55px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  background: white;
}
.preview-table {
  height: 150px;
  margin-top: 8px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      180deg,
      white 0,
      white 24px,
      rgba(0,0,0,.04) 25px
    );
}

@media (max-width: 1150px) {
  .white-label-layout {
    grid-template-columns: 1fr;
  }
  .white-label-preview {
    position: relative;
    top: auto;
  }
  .preview-shell {
    height: 350px;
  }
}

@media (max-width: 850px) {
  .preset-grid,
  .customization-form-grid,
  .terminology-grid,
  .color-control-grid,
  .widget-toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu-customization-list article,
  .workspace-tab-customization article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .preset-grid,
  .customization-form-grid,
  .terminology-grid,
  .color-control-grid,
  .widget-toggle-grid {
    grid-template-columns: 1fr;
  }
  .sticky-save-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .white-label-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


/* VisaDesk v8.2 — Workflow Builder, Forms & Media */
.builder-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:15px;align-items:start}.builder-sidebar{position:sticky;top:90px}.builder-main{display:grid;gap:15px}.builder-list{display:grid;gap:6px;margin-bottom:16px}.builder-list a{padding:10px;display:grid;gap:2px;border:1px solid var(--vd-border-soft);border-radius:9px;background:var(--vd-surface-alt);color:var(--vd-text)}.builder-list a.active{border-color:var(--vd-primary);background:var(--vd-primary-soft)}.builder-list small{color:var(--vd-muted);font-size:9px}.stacked-form{display:grid;gap:9px}.stacked-form label{display:grid;gap:5px}.stage-builder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stage-builder-card{position:relative;padding:13px;display:grid;gap:8px;border:1px solid var(--vd-border-soft);border-radius:11px;background:#fff;overflow:hidden}.stage-color-bar{position:absolute;inset:0 0 auto;height:5px;background:var(--stage-color)}.stage-builder-card label{display:grid;gap:4px}.stage-options{display:flex;gap:9px;flex-wrap:wrap}.stage-options label{display:flex;gap:5px;align-items:center}.stage-options input{width:auto}.inline-builder-form{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.inline-builder-form label{display:grid;gap:4px;min-width:150px}.inline-stage-form{display:flex;gap:6px;align-items:center}.inline-stage-form select{min-width:150px}.stage-pill{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--stage-color) 14%,white);color:var(--stage-color);font-size:9px;font-weight:800}.tag-library{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.tag-library span,.tag-toggle{padding:6px 9px;border:1px solid color-mix(in srgb,var(--tag-color) 30%,white);border-radius:999px;background:color-mix(in srgb,var(--tag-color) 10%,white);color:var(--tag-color);font-size:9px;font-weight:800}.tag-library i{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--tag-color);margin-right:5px}.tag-student-list{display:grid;gap:8px;max-height:650px;overflow:auto}.tag-student-list article{padding:10px;display:grid;grid-template-columns:180px 1fr;gap:10px;border:1px solid var(--vd-border-soft);border-radius:9px}.tag-student-list article>div:first-child{display:grid}.tag-toggle-row{display:flex;gap:5px;flex-wrap:wrap}.tag-toggle{cursor:pointer;opacity:.55}.tag-toggle.active{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--tag-color) 16%,transparent)}.form-field-list{display:grid;gap:7px}.form-field-list article{padding:10px;display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:9px;background:var(--vd-surface-alt)}.field-type{padding:5px 7px;border-radius:6px;background:var(--vd-primary-soft);color:var(--vd-primary);font-size:8px;font-weight:850;text-transform:uppercase}.form-field-list article>div{display:grid}.form-field-list small{color:var(--vd-muted)}.full-span{grid-column:1/-1}.generated-form{max-width:1000px;margin:0 auto}.generated-form-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-bottom:16px}.generated-form-grid label{display:grid;gap:5px}.field-full{grid-column:span 6}.field-half{grid-column:span 3}.field-third{grid-column:span 2}.generated-heading,.generated-paragraph{grid-column:1/-1}.generated-form fieldset{border:1px solid var(--vd-border-soft);border-radius:9px}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:15px}.media-card{padding:14px;display:grid;grid-template-columns:54px 1fr;gap:11px;border:1px solid var(--vd-border-soft);border-radius:var(--vd-radius);background:#fff;box-shadow:var(--vd-shadow-sm)}.media-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:11px;background:var(--vd-primary-soft);color:var(--vd-primary);font-size:11px;font-weight:900}.media-card span{color:var(--vd-primary);font-size:8px;font-weight:850;text-transform:uppercase}.media-card h3{margin:3px 0;font-size:13px}.media-card p,.media-card small{margin:0;color:var(--vd-muted);font-size:9px}.media-actions{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}@media(max-width:1100px){.stage-builder-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:850px){.builder-layout{grid-template-columns:1fr}.builder-sidebar{position:relative;top:auto}.stage-builder-grid,.media-grid{grid-template-columns:1fr}.tag-student-list article{grid-template-columns:1fr}.generated-form-grid{grid-template-columns:1fr}.field-full,.field-half,.field-third{grid-column:1}.inline-stage-form{align-items:stretch;flex-direction:column}}

/* VisaDesk v8.3 — Workflow Integration & Automation */
.pipeline-filter-bar{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr)) auto auto;gap:8px;align-items:end;margin-bottom:14px}.pipeline-filter-bar label{display:grid;gap:4px}.pipeline-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,310px);gap:12px;overflow-x:auto;padding:2px 2px 16px;margin-bottom:15px}.pipeline-column{min-height:560px;border:1px solid var(--vd-border-soft);border-radius:13px;background:#eef2f7}.pipeline-column>header{padding:11px 12px;display:flex;justify-content:space-between;align-items:center;border-top:4px solid var(--stage-color);border-radius:13px 13px 0 0;background:#fff}.pipeline-column>header>div{display:flex;gap:7px;align-items:center}.pipeline-column>header i{width:9px;height:9px;border-radius:50%;background:var(--stage-color)}.pipeline-column>header span{padding:3px 7px;border-radius:999px;background:var(--vd-surface-alt);font-size:9px;font-weight:800}.pipeline-card-list{padding:9px;display:grid;gap:8px}.pipeline-case-card{padding:11px;border:1px solid var(--vd-border-soft);border-radius:10px;background:#fff;box-shadow:var(--vd-shadow-sm)}.pipeline-card-top{display:flex;justify-content:space-between;gap:7px}.pipeline-card-top strong{color:var(--vd-text);font-size:12px}.pipeline-card-top span{color:var(--vd-muted);font-size:8px}.pipeline-case-card p{margin:7px 0 2px;color:var(--vd-text-soft);font-size:10px}.pipeline-case-card small{color:var(--vd-muted);font-size:8px}.pipeline-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.pipeline-card-tags span,.student-header-tags span{padding:4px 6px;border-radius:999px;background:color-mix(in srgb,var(--tag-color) 12%,white);color:var(--tag-color);font-size:7px;font-weight:850}.pipeline-card-actions{margin-top:9px;padding-top:8px;display:flex;justify-content:space-between;gap:6px;align-items:center;border-top:1px solid var(--vd-border-soft)}.pipeline-card-actions a{font-size:9px;font-weight:800}.pipeline-card-actions select{max-width:145px;padding:5px;font-size:8px}.pipeline-empty{padding:25px 8px;color:var(--vd-muted);text-align:center;font-size:9px}.pipeline-unassigned-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pipeline-unassigned-grid article{padding:10px;display:flex;justify-content:space-between;gap:9px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:9px}.pipeline-unassigned-grid article>div{display:grid}.pipeline-unassigned-grid form{display:flex;gap:5px}.automation-selector form,.analytics-filter{display:flex;gap:10px}.automation-selector label,.analytics-filter label{display:grid;gap:4px;min-width:240px}.automation-rule-list{display:grid;gap:8px}.automation-rule-list article{padding:10px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--vd-border-soft);border-radius:9px;background:var(--vd-surface-alt)}.automation-rule-list article.inactive{opacity:.55}.automation-rule-list article>div{display:grid}.automation-rule-list article span{color:var(--vd-muted);font-size:9px}.workflow-stage-analytics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:15px}.workflow-stage-analytics article{padding:14px;border:1px solid var(--vd-border-soft);border-top:4px solid var(--stage-color);border-radius:11px;background:#fff;box-shadow:var(--vd-shadow-sm)}.workflow-stage-analytics article>div:first-child{display:flex;gap:6px;align-items:center}.workflow-stage-analytics i{width:8px;height:8px;border-radius:50%;background:var(--stage-color)}.workflow-stage-analytics strong{display:block;margin:8px 0 2px;font-size:24px}.workflow-stage-analytics small{font-size:8px}.analytics-progress{height:5px;margin-top:9px;border-radius:999px;background:var(--vd-border-soft);overflow:hidden}.analytics-progress b{display:block;height:100%;background:var(--stage-color)}.student-header-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}@media(max-width:1200px){.pipeline-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.workflow-stage-analytics{grid-template-columns:repeat(2,minmax(0,1fr))}.pipeline-unassigned-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.pipeline-filter-bar,.workflow-stage-analytics,.pipeline-unassigned-grid{grid-template-columns:1fr}.automation-selector form{flex-direction:column}.pipeline-unassigned-grid article{align-items:stretch;flex-direction:column}.pipeline-unassigned-grid form{flex-direction:column}}

/* VisaDesk v8.4 — Advanced Forms, Staff Portal & Workflow Administration */
.admin-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-management-card{display:grid;gap:14px}.management-card-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.management-card-header h2{margin:0}.management-card-header span{color:var(--vd-muted);font-size:9px}.management-checks{display:flex;gap:14px;flex-wrap:wrap}.management-checks label{display:flex;gap:6px;align-items:center}.management-checks input{width:auto}.management-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.delete-reassign-form{margin-top:8px;padding:12px;display:grid;gap:8px;border:1px solid var(--vd-danger-border);border-radius:9px;background:var(--vd-danger-soft)}.stage-pipeline-selector{margin-bottom:14px}.stage-pipeline-selector label{display:grid;gap:5px;max-width:420px}.stage-add-form{margin-top:12px}.stage-admin-list{display:grid;gap:10px}.stage-admin-row{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:12px;align-items:center;border-left:5px solid var(--stage-color)}.stage-admin-identity{display:flex;gap:9px;align-items:center}.stage-admin-identity i{width:13px;height:13px;border-radius:50%;background:var(--stage-color)}.stage-admin-identity div{display:grid}.stage-admin-identity span{color:var(--vd-muted);font-size:8px}.stage-admin-edit{display:grid;grid-template-columns:minmax(150px,1fr) 60px 70px repeat(3,auto) auto;gap:7px;align-items:center}.stage-admin-edit label{display:flex;gap:4px;align-items:center;font-size:8px}.stage-admin-edit label input{width:auto}.stage-delete-control form{margin-top:8px;padding:10px;min-width:250px;display:grid;gap:8px;background:var(--vd-danger-soft);border-radius:var(--vd-radius-sm)}.tag-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.tag-admin-card{border-top:4px solid var(--tag-color)}.tag-admin-header{display:flex;gap:8px;align-items:center;margin-bottom:12px}.tag-admin-header i{width:12px;height:12px;border-radius:50%;background:var(--tag-color)}.tag-admin-header div{display:grid}.tag-admin-header span{color:var(--vd-muted);font-size:8px}.tag-danger-actions{margin-top:12px;display:flex;gap:8px;align-items:flex-start}.tag-danger-actions details form{margin-top:7px;padding:9px;display:grid;gap:7px;background:var(--vd-surface-alt);border-radius:var(--vd-radius-sm)}.staff-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.staff-preview-grid article{padding:12px;display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:10px;background:var(--vd-surface-alt)}.staff-preview-grid article>div:nth-child(2){display:grid}.staff-preview-grid span,.staff-preview-grid small{color:var(--vd-muted);font-size:9px}.staff-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--vd-radius);background:var(--vd-primary-soft);color:var(--vd-primary);font-weight:900}.staff-avatar.large{width:62px;height:62px;font-size:22px}.staff-preview-banner{margin-bottom:14px;padding:11px 14px;display:flex;gap:12px;align-items:center;border:1px solid #f3c969;border-radius:10px;background:#fff7dd}.staff-preview-banner span{flex:1}.staff-portal-hero{padding:18px;margin-bottom:14px;display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;border-radius:14px;background:linear-gradient(135deg,var(--vd-sidebar),var(--vd-primary));color:#fff}.staff-portal-hero span,.staff-portal-hero p{opacity:.78}.staff-portal-hero h1{margin:2px 0}.staff-portal-date{font-size:10px}.staff-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:14px}.staff-kpi-grid article{padding:13px;border:1px solid var(--vd-border-soft);border-radius:11px;background:#fff}.staff-kpi-grid span,.staff-kpi-grid small{display:block;color:var(--vd-muted);font-size:8px}.staff-kpi-grid strong{display:block;margin:5px 0;font-size:23px}.staff-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.staff-dashboard-wide{grid-column:1/-1}.staff-action-list{display:grid;gap:7px}.staff-action-list article{padding:9px;display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:var(--vd-radius-sm);background:var(--vd-surface-alt)}.staff-action-list article.overdue{border-color:var(--vd-danger-border);background:var(--vd-danger-soft)}.staff-action-list article>div{display:grid}.staff-action-list span,.staff-action-list small{color:var(--vd-muted);font-size:8px}.staff-stage-dot{width:10px;height:10px;border-radius:50%;background:var(--stage-color)}.review-filter{display:flex;gap:8px;align-items:end;margin-bottom:14px}.review-filter label{display:grid;gap:5px;min-width:220px}.form-review-list{display:grid;gap:11px}.review-card-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.review-card-header span{color:var(--vd-primary);font-size:8px;font-weight:850;text-transform:uppercase}.review-card-header h2{margin:3px 0}.review-card-header p{margin:0;color:var(--vd-muted)}.review-action-form{margin-top:12px;display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:9px;align-items:end}.review-action-form label{display:grid;gap:5px}.generated-link-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.generated-link-fields label{display:grid;gap:5px}.page-heading-actions{display:flex;gap:8px}@media(max-width:1200px){.staff-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-admin-row{grid-template-columns:1fr}.stage-admin-edit{grid-template-columns:repeat(3,minmax(0,1fr))}.tag-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:800px){.admin-card-grid,.staff-preview-grid,.staff-dashboard-grid,.tag-admin-grid{grid-template-columns:1fr}.staff-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-action-form,.generated-link-fields{grid-template-columns:1fr}.staff-portal-hero{grid-template-columns:62px 1fr}.staff-portal-date{grid-column:1/-1}.stage-admin-edit{grid-template-columns:1fr}.staff-preview-grid article{grid-template-columns:46px 1fr}.staff-preview-grid article .button{grid-column:1/-1}}

/* VisaDesk v8.4.2 — Forms Center reskin (FrontForce-style list + categorised builder palette) */
.tab-disabled{padding:9px 12px;white-space:nowrap;color:var(--vd-muted);font-size:9px;font-weight:800;opacity:.55;cursor:default}
.create-form-panel{margin-bottom:14px}
.create-form-panel summary{cursor:pointer;color:var(--vd-primary);font-size:10px;font-weight:850;list-style:none}
.create-form-panel summary::-webkit-details-marker{display:none}
.create-form-panel[open] summary{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--vd-border-soft)}
.create-form-panel .stacked-form{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:9px}
.create-form-panel .stacked-form label.full-span{grid-column:1/-1}
.create-form-panel .stacked-form button{grid-column:1/-1;justify-self:start}
.forms-list-table{width:100%}
.forms-list-table th{text-align:left;color:var(--vd-muted);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;padding-bottom:8px}
.forms-list-table td{vertical-align:middle}
.forms-list-name{display:flex;gap:10px;align-items:center;color:var(--vd-text)}
.forms-list-name .form-icon{width:32px;height:32px;font-size:12px;flex-shrink:0}
.forms-list-name strong{display:block}
.forms-list-name small{display:block;color:var(--vd-muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forms-row-actions{text-align:right;position:relative}
.row-menu{display:inline-block;position:relative}
.row-menu summary{list-style:none;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;color:var(--vd-muted);font-size:15px;font-weight:900}
.row-menu summary::-webkit-details-marker{display:none}
.row-menu[open] summary,.row-menu summary:hover{background:var(--vd-surface-alt);color:var(--vd-text)}
.row-menu-items{position:absolute;right:0;top:30px;z-index:20;min-width:170px;padding:6px;display:grid;gap:2px;border:1px solid var(--vd-border-soft);border-radius:9px;background:#fff;box-shadow:var(--vd-shadow-lg)}
.row-menu-items a{padding:7px 9px;border-radius:6px;color:var(--vd-text-soft);font-size:9px;font-weight:750;text-align:left}
.row-menu-items a:hover{background:var(--vd-primary-soft);color:var(--vd-primary)}
.row-menu-items form{display:contents}
.row-menu-button{width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--vd-text-soft);font-size:9px;font-weight:750;text-align:left;cursor:pointer;font-family:inherit}
.row-menu-button:hover{background:var(--vd-primary-soft);color:var(--vd-primary)}
.row-menu-button.danger{color:var(--vd-danger)}
.row-menu-button.danger:hover{background:var(--vd-danger-soft);color:var(--vd-danger)}
.row-menu-note{padding:7px 9px;font-size:9px;font-weight:650;color:var(--vd-muted);cursor:help}
.form-element-category{margin-bottom:14px}
.form-element-category h3{margin:0 0 7px;color:var(--vd-muted);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.section-heading-card{background:transparent;border:none;padding:0}
.section-bar{padding:10px 12px;border-radius:7px;background:linear-gradient(135deg,var(--vd-sidebar),var(--vd-primary));color:#fff;font-size:11px;font-weight:850}

/* VisaDesk v8.4.1 — Dedicated Forms Center */
/* Section hub pages (/hub/<slug> - see app/routes/section_hubs.py and
   app/templates/section_hub.html). Each of the ten sidebar groups
   (Staff, Student Portal, Reports, ...) carries its own "accent" color
   in NAVIGATION_GROUPS (app/navigation.py), passed into these templates
   as the --hub-accent custom property so every hub page - and every
   card on it - is themed consistently in that group's own color rather
   than every hub page looking identical in the app's default blue. */
.hub-hero{
  padding:26px 28px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:18px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--hub-accent) 60%, #0b132b), var(--hub-accent));
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--hub-accent) 45%, transparent);
}
.hub-hero-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}
.hub-hero-icon svg{width:26px;height:26px;fill:#fff}
.hub-hero span{font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;opacity:.78}
.hub-hero h1{margin:3px 0 5px;font-size:24px}
.hub-hero p{margin:0;opacity:.85}

.hub-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.hub-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:18px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--vd-border-soft);
  border-top:3px solid var(--hub-accent);
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(20,31,53,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hub-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -14px color-mix(in srgb, var(--hub-accent) 55%, transparent);
  border-color:color-mix(in srgb, var(--hub-accent) 45%, var(--vd-border-soft));
}
.hub-card-badge{
  align-self:flex-start;
  padding:3px 7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--hub-accent) 14%, white);
  color:var(--hub-accent);
  font-size:7px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}
/* Distinguishes flow_break items (internal links into a different tool,
   e.g. Reports' Refusal Analysis opening the AI Workspace) from the
   "Opens in new tab" badge above - deliberately not accent-colored so
   it reads as "a different kind of page" rather than "leaves the app". */
.hub-card-badge-alt{
  background:#EEF2FF;
  color:#4F46E5;
}
.hub-card h3{margin:0;font-size:15px}
.hub-card-description{margin:0;color:var(--vd-muted);font-size:12.5px;line-height:1.55;flex-grow:1}
.hub-card-cta{
  margin-top:4px;
  font-size:11px;
  font-weight:800;
  color:var(--hub-accent);
}

@media(max-width:900px){
  .hub-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .hub-card-grid{grid-template-columns:1fr}
  .hub-hero{flex-direction:column;align-items:flex-start}
}

/* Country Database Control Center (Milestone 1, 2026-08-14) - status pill,
   warning and shared-config notes layered onto the existing .hub-card
   system above, not a new card component. */
.country-db-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
}
.country-db-status-pill{
  padding:3px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
.country-db-status-pill.status-complete{background:#DCFCE7;color:#15803D}
.country-db-status-pill.status-needs-setup{background:#FEF3C7;color:#B45309}
.country-db-status-pill.status-inactive{background:#F1F5F9;color:#64748B}
.country-db-card.status-needs-setup{border-color:#FBBF24}
.country-db-warning{
  margin:0;
  font-size:11.5px;
  font-weight:650;
  color:#B45309;
}
.country-db-shared-note{
  margin:0;
  font-size:11px;
  color:var(--vd-muted);
  font-style:italic;
}
@media(max-width:620px){
  .country-db-card-top{flex-wrap:wrap}
}

/* Country and visa-category administration (Milestone 2, 2026-08-14) -
   reorder controls on the admin list page and the per-country "offered
   categories" toggle panel. Scoped narrowly (class selectors, not a
   restyle of .admin-checklist-card itself) since that card class is
   shared by several other admin pages this milestone doesn't touch. */
.admin-checklist-card > form.reorder-form{
  display:inline-block;
  margin:8px 6px 0 0;
  vertical-align:middle;
}
.admin-checklist-card > form:not(.reorder-form){
  /* Preserves the original single-toggle-form spacing now that reorder
     forms sit after it - see .reorder-form above, which sets its own
     margin instead of relying on :last-child like the toggle form did
     when it was the only form in the card. */
  margin-top:10px;
}
.reorder-button{
  min-width:34px;
  padding:6px 9px !important;
  font-weight:800;
}
.reorder-button:disabled{
  opacity:0.35;
  cursor:default;
}
.country-db-offerings{
  margin-bottom:18px;
}
.country-db-offerings-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.country-db-offering-toggle{
  display:inline-block;
}

/* Country Database + Trigger Points usability pass (2026-08-20). */
.country-admin-jumpbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:8px;border:1px solid var(--vd-border-soft);border-radius:12px;background:var(--vd-surface-alt)}
.country-admin-jumpbar a{padding:8px 11px;border-radius:8px;color:var(--vd-text-soft);font-size:12px;font-weight:750}
.country-admin-jumpbar a:hover,.country-admin-jumpbar a:focus-visible{background:#fff;color:var(--vd-primary);outline:2px solid var(--vd-primary-soft)}
.country-admin-section-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:14px}
.country-admin-section-heading h2{margin:2px 0 4px}.country-admin-section-heading p{margin:0;color:var(--vd-muted);max-width:720px}
.country-admin-section-heading>div>span{color:var(--vd-primary);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.country-quick-add{position:relative}.country-quick-add>summary{list-style:none;white-space:nowrap}.country-quick-add>summary::-webkit-details-marker{display:none}
.country-quick-add[open]>form{position:absolute;z-index:10;right:0;top:44px;width:min(720px,85vw);padding:16px;border:1px solid var(--vd-border-soft);border-radius:12px;background:#fff;box-shadow:var(--vd-shadow-lg)}
.country-workspace-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.country-workspace-card{min-height:76px;padding:12px;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:11px;background:#fff;color:var(--vd-text);transition:border-color .15s,transform .15s,box-shadow .15s}
.country-workspace-card:hover,.country-workspace-card:focus-visible{border-color:var(--vd-primary);transform:translateY(-1px);box-shadow:var(--vd-shadow-sm);outline:none}
.country-workspace-card>span:nth-child(2){display:grid;gap:3px}.country-workspace-card small{color:var(--vd-muted);font-size:10px}.country-workspace-card.is-inactive{opacity:.62}
.country-workspace-code{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--vd-primary-soft);color:var(--vd-primary);font-size:12px;font-weight:900}
.country-catalogue-add{margin:10px 0 14px;border:1px dashed var(--vd-border);border-radius:10px}.country-catalogue-add>summary{padding:10px 12px;cursor:pointer;color:var(--vd-primary);font-weight:800}.country-catalogue-add>form{padding:0 12px 12px}
.trigger-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.trigger-summary-grid article{padding:14px;display:grid;gap:2px;border:1px solid var(--vd-border-soft);border-radius:11px;background:var(--vd-surface-alt)}
.trigger-summary-grid strong{font-size:25px;color:var(--vd-primary)}.trigger-summary-grid span{font-weight:800}.trigger-summary-grid small{color:var(--vd-muted)}
.trigger-explainer{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;padding:13px;border-left:4px solid var(--vd-primary);border-radius:10px;background:var(--vd-primary-soft)}
.trigger-explainer>div{display:grid;gap:2px}.trigger-explainer span{color:var(--vd-text-soft);font-size:11px}
.trigger-record{border-left:4px solid var(--vd-border)!important}.trigger-record.is-enabled{border-left-color:var(--vd-success)!important;background:color-mix(in srgb,var(--vd-success) 5%,white)!important}
.trigger-record .row-actions .button{min-height:36px}
@media(max-width:980px){.country-workspace-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trigger-explainer{grid-template-columns:1fr 1fr}.trigger-explainer>a{grid-column:1/-1;justify-self:start}}
@media(max-width:620px){.country-admin-section-heading{flex-direction:column}.country-quick-add{width:100%}.country-quick-add>summary{width:100%;text-align:center}.country-quick-add[open]>form{position:static;width:auto;margin-top:8px}.country-workspace-grid,.trigger-summary-grid,.trigger-explainer{grid-template-columns:1fr}.trigger-explainer>a{grid-column:auto}.country-admin-jumpbar{display:grid;grid-template-columns:1fr 1fr}}

/* "Launchpad" connector list - Integrations hub only (group["style"] ==
   "launchpad" in navigation.py, see section_hub.html's conditional
   block). Modeled on the connect page in a GoHighLevel-based CRM
   (FrontForce CRM), which the owner pointed to directly: one card
   containing a vertical list of connector rows (icon, description,
   live status) rather than a grid of separate link cards - but kept in
   VisaDesk's own light card language (white surface, --vd-border-soft
   dividers, --hub-accent theming) instead of that page's dark backdrop. */
.hub-launchpad{
  background:#fff;
  border:1px solid var(--vd-border-soft);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,31,53,.04);
}
.hub-launchpad-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--vd-border-soft);
  transition:background .14s ease;
}
.hub-launchpad-row:last-child{border-bottom:none}
.hub-launchpad-row:hover{background:var(--vd-surface-alt)}
.hub-launchpad-icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--item-color, var(--hub-accent)) 14%, white);
  color:var(--item-color, var(--hub-accent));
}
.hub-launchpad-icon svg{width:21px;height:21px}
.hub-launchpad-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex-grow:1;
  min-width:0;
}
.hub-launchpad-copy strong{font-size:13px;color:var(--vd-text)}
.hub-launchpad-copy span{font-size:11.5px;color:var(--vd-muted);line-height:1.5}
.hub-launchpad-status{
  flex-shrink:0;
  display:grid;
  place-items:center;
}
.hub-launchpad-status-connect{
  padding:7px 16px;
  border-radius:999px;
  background:var(--hub-accent);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
.hub-launchpad-status-connected{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#16A34A;
  color:#fff;
}
.hub-launchpad-status-connected svg{width:15px;height:15px}

@media(max-width:620px){
  .hub-launchpad-row{padding:13px 14px;gap:10px}
  .hub-launchpad-copy span{display:none}
}

/* Milestone 1 ("Connect Existing Integration Center to Selective
   Notifications") - the "Student Notifications" callout above the
   launchpad list on the Integrations hub. Not a launchpad row itself
   (there's no connect/disconnect state for a settings page), so it gets
   its own simple card + button instead. */
.hub-notifications-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border:1px solid var(--vd-border-soft);
  border-radius:16px;
  padding:16px 20px;
  margin-bottom:14px;
  box-shadow:0 1px 2px rgba(20,31,53,.04);
}
.hub-notifications-callout strong{display:block;font-size:13px;color:var(--vd-text)}
.hub-notifications-callout span{display:block;font-size:11.5px;color:var(--vd-muted);margin-top:2px}
@media(max-width:620px){
  .hub-notifications-callout{flex-direction:column;align-items:flex-start}
}

/* Informational "guide" panel on a hub's Overview page - explains what's
   in the section and how to approach it, instead of leaving visitors to
   guess from card titles alone. Only groups with a "guide" dict in
   NAVIGATION_GROUPS (app/navigation.py) render this; Student Portal is
   the first, added directly from feedback that the Overview page should
   explain what one will find in the section plus some guidelines. */
.hub-guide{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  margin-bottom:22px;
}
.hub-guide-panel{
  padding:22px 24px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--vd-border-soft);
  box-shadow:0 1px 3px rgba(20,31,53,.05);
}
.hub-guide-panel h2,.hub-guide-tips h2{
  margin:0 0 16px;
  font-size:14px;
  color:var(--vd-text);
}
.hub-guide-highlights{display:flex;flex-direction:column;gap:15px}
.hub-guide-highlight{display:flex;gap:12px;align-items:flex-start}
.hub-guide-highlight-index{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--hub-accent) 14%, #fff);
  color:var(--hub-accent);
  font-weight:850;
  font-size:11px;
}
.hub-guide-highlight strong{display:block;font-size:12.5px;color:var(--vd-text);margin-bottom:2px}
.hub-guide-highlight p{margin:0;color:var(--vd-muted);font-size:11.5px;line-height:1.55}
.hub-guide-tips{
  padding:22px 24px;
  border-radius:16px;
  background:color-mix(in srgb, var(--hub-accent) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--hub-accent) 20%, transparent);
}
.hub-guide-tips ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:11px}
.hub-guide-tips li{color:var(--vd-text);font-size:11.5px;line-height:1.55}
.hub-guide-tips li::marker{color:var(--hub-accent)}
.hub-section-heading{margin:0 0 12px;font-size:13px;color:var(--vd-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:800}

@media(max-width:900px){
  .hub-guide{grid-template-columns:1fr}
}

.forms-module-header,.forms-workspace-topbar{padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;gap:16px;align-items:center;border-radius:14px;background:linear-gradient(135deg,var(--vd-sidebar),var(--vd-primary));color:#fff}.forms-module-header span,.forms-workspace-title span{font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;opacity:.72}.forms-module-header h1,.forms-workspace-title h1{margin:3px 0 5px}.forms-module-header p{margin:0;opacity:.78}.forms-module-actions,.forms-workspace-actions{display:flex;gap:8px}.forms-module-header .button,.forms-workspace-topbar .button{border-color:rgba(255,255,255,.25)}.forms-back-link{color:#fff;font-weight:800}.forms-workspace-title{text-align:center}.forms-center-nav,.forms-workspace-tabs{margin-bottom:14px;padding:5px;display:flex;gap:4px;overflow-x:auto;border:1px solid var(--vd-border-soft);border-radius:11px;background:#fff}.forms-center-nav a,.forms-workspace-tabs a{padding:9px 12px;white-space:nowrap;border-radius:var(--vd-radius-sm);color:var(--vd-text-soft);font-size:9px;font-weight:800}.forms-center-nav a.active,.forms-workspace-tabs a.active{background:var(--vd-primary);color:#fff}.forms-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:14px}.forms-kpi-grid article{padding:13px;border:1px solid var(--vd-border-soft);border-radius:11px;background:#fff}.forms-kpi-grid span{display:block;color:var(--vd-muted);font-size:8px}.forms-kpi-grid strong{display:block;margin-top:6px;font-size:23px}.forms-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.form-library-card{padding:14px;display:grid;gap:8px;border:1px solid var(--vd-border-soft);border-radius:var(--vd-radius);background:var(--vd-surface-alt)}.form-card-top{display:flex;justify-content:space-between;align-items:center}.form-status{padding:4px 7px;border-radius:999px;background:var(--vd-primary-soft);color:var(--vd-primary);font-size:7px;font-weight:850;text-transform:uppercase}.form-status.published{background:#e8f7ed;color:#16803b}.form-status.archived{background:#eef0f3;color:#657080}.form-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--vd-primary);color:#fff;font-weight:900}.form-library-card h3{margin:0}.form-library-card p{margin:0;color:var(--vd-muted);min-height:32px}.form-card-stats{display:flex;gap:18px}.form-card-stats span{color:var(--vd-muted);font-size:8px}.form-card-stats strong{color:var(--vd-text)}.form-card-actions{display:flex;gap:6px}.forms-activity-list{display:grid;gap:7px}.forms-activity-list article{padding:9px;display:flex;justify-content:space-between;gap:8px;border:1px solid var(--vd-border-soft);border-radius:var(--vd-radius-sm);background:var(--vd-surface-alt)}.forms-activity-list article>div{display:grid}.forms-activity-list span,.forms-activity-list small{color:var(--vd-muted);font-size:8px}.forms-activity-list article.overdue{border-color:var(--vd-danger-border);background:var(--vd-danger-soft)}.form-builder-shell{display:grid;grid-template-columns:230px minmax(0,1fr) 280px;gap:12px;align-items:start}.form-elements-panel,.form-field-settings{position:sticky;top:86px}.form-element-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.form-element-tile{padding:9px;display:grid;place-items:center;gap:5px;border:1px solid var(--vd-border-soft);border-radius:var(--vd-radius-sm);background:var(--vd-surface-alt);cursor:pointer}.form-element-tile:hover{border-color:var(--vd-primary);background:var(--vd-primary-soft)}.form-element-tile i{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#fff;color:var(--vd-primary);font-style:normal;font-weight:900}.form-element-tile span{font-size:8px}.form-builder-canvas{min-width:0}.form-builder-preview-card{padding:18px;border:1px solid var(--vd-border-soft);border-radius:var(--form-radius);background:var(--form-bg);color:var(--form-text);box-shadow:var(--vd-shadow)}.form-builder-preview-header{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}.form-builder-preview-header span{color:var(--form-primary);font-size:8px;font-weight:850;text-transform:uppercase}.form-builder-preview-header h2{margin:4px 0}.form-builder-preview-header p{margin:0;color:var(--vd-muted)}.form-builder-fields{display:grid;grid-template-columns:1fr;gap:9px}.form-builder-fields.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.builder-field-card{padding:11px;border:1px solid var(--vd-border-soft);border-radius:9px;background:#fff}.builder-field-card.full-width{grid-column:1/-1}.builder-field-heading{display:flex;justify-content:space-between;gap:8px}.builder-field-heading>div{display:grid}.builder-field-heading span{color:var(--form-primary);font-size:7px;font-weight:850;text-transform:uppercase}.builder-field-heading small{color:var(--vd-muted)}.builder-field-sample{margin-top:8px}.builder-field-sample input,.builder-field-sample textarea,.builder-field-sample select{width:100%}.builder-field-editor{margin-top:9px}.builder-field-editor summary{cursor:pointer;color:var(--vd-primary);font-size:8px;font-weight:800}.builder-field-editor form{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.builder-field-editor label{display:grid;gap:4px}.form-preview-submit{width:100%;margin-top:14px;padding:10px;border:0;border-radius:var(--vd-radius-sm);color:#fff;font-weight:850}.forms-design-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px;gap:12px;align-items:start}.form-design-live-preview{position:sticky;top:86px}.design-preview-page{padding:26px;min-height:620px;display:grid;place-items:center;border-radius:13px;background:var(--preview-bg)}.design-preview-card{width:100%;padding:20px;display:grid;gap:9px;border-radius:var(--preview-radius);background:var(--preview-card);color:var(--preview-text);box-shadow:var(--vd-shadow-lg)}.design-preview-card label{display:grid;gap:4px}.design-preview-card button{padding:10px;border:0;border-radius:var(--vd-radius-sm);color:#fff}.design-preview-logo{height:55px;display:grid;place-items:center;color:var(--preview-primary);font-weight:900}.forms-status-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.forms-status-summary article{padding:11px;border:1px solid var(--vd-border-soft);border-radius:9px;background:var(--vd-surface-alt)}.forms-status-summary span{display:block;color:var(--vd-muted);font-size:8px}.forms-status-summary strong{display:block;margin-top:4px;font-size:20px}.forms-inline-review{padding:10px;display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:9px}.forms-inline-review>div{display:grid}.forms-inline-review>div span{color:var(--vd-primary);font-size:7px;font-weight:850;text-transform:uppercase}.forms-inline-review>div small{color:var(--vd-muted)}.forms-inline-review form{display:grid;grid-template-columns:180px 1fr auto;gap:7px}.template-library-list{display:grid;gap:8px}.template-library-list article{padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--vd-border-soft);border-radius:9px}.template-library-list article>div{display:grid}.template-library-list span{color:var(--vd-muted);font-size:8px}.template-library-list form{display:flex;gap:6px}.forms-analytics-bars{display:grid;gap:9px}.forms-analytics-bars article{display:grid;grid-template-columns:170px 1fr 45px;gap:8px;align-items:center}.forms-analytics-bars article>div{height:8px;border-radius:999px;background:var(--vd-border-soft);overflow:hidden}.forms-analytics-bars b{display:block;height:100%;background:var(--vd-primary)}@media(max-width:1250px){.form-builder-shell{grid-template-columns:190px minmax(0,1fr)}.form-field-settings{position:relative;top:auto;grid-column:1/-1}.forms-design-layout{grid-template-columns:1fr 1fr}.form-design-live-preview{position:relative;top:auto;grid-column:1/-1}.forms-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.forms-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.forms-module-header,.forms-workspace-topbar{align-items:stretch;flex-direction:column}.forms-workspace-title{text-align:left}.forms-module-actions,.forms-workspace-actions{flex-wrap:wrap}.form-builder-shell,.forms-design-layout,.forms-library-grid{grid-template-columns:1fr}.form-elements-panel,.form-field-settings{position:relative;top:auto}.form-builder-fields.two-column{grid-template-columns:1fr}.forms-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.forms-inline-review{grid-template-columns:1fr}.forms-inline-review form{grid-template-columns:1fr}.template-library-list article{align-items:stretch;flex-direction:column}.template-library-list form{flex-direction:column}}

/* ============================================================
   VisaDesk — Student Portal redesign (professional theme pass)
   ============================================================
   Scoped entirely under .portal-clean-body (the <body> class on
   portal_dashboard.html only) so none of this touches the staff
   app, login/registration/agreement pages, or any other surface.
   Reuses the existing --vd-* design tokens (already refined in the
   earlier "Theme milestone") rather than inventing a new palette -
   the ask was a neutral base + each consultancy's own accent color,
   which is exactly what --vd-primary already resolves to via
   var(--consultancy-accent, ...). This block adds: a portal-only
   typeface (Inter, loaded in the template head), stronger visual
   differentiation between nav sections/status states, and general
   polish (shadows, hover states, spacing) so the portal reads as a
   dedicated, premium product surface rather than an extension of
   the internal back-office tool. */

.portal-clean-body {
  --vd-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--vd-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Student portal typography refinement (2026-08-21)
   Manrope gives the portal a clear, modern professional voice. These
   scoped tokens restore comfortable reading sizes in the compact header
   without changing the staff CRM or increasing the overall header height. */
.portal-clean-body .clean-portal-brand strong,
.portal-clean-body .clean-portal-account-name strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.portal-clean-body .clean-portal-brand small,
.portal-clean-body .clean-portal-account-name small {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.portal-clean-body .clean-portal-nav-v451 > a,
.portal-clean-body .clean-portal-nav-group > button {
  font-family: var(--vd-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.portal-clean-body .clean-portal-nav-menu a {
  font-family: var(--vd-font);
  font-size: 13px;
  font-weight: 650;
}

.portal-clean-body .clean-page-heading > div > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
}

.portal-clean-body .clean-page-heading h1 {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.portal-clean-body .clean-page-heading p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.portal-clean-body .clean-progress-summary small,
.portal-clean-body .clean-progress-summary span {
  font-size: 11px;
  font-weight: 600;
}

.portal-clean-body .clean-progress-summary strong {
  font-weight: 800;
  letter-spacing: -.025em;
}

.portal-clean-body h1,
.portal-clean-body h2,
.portal-clean-body h3 {
  font-family: var(--vd-font);
  letter-spacing: -.01em;
}

.portal-clean-body .clean-page-heading h1 {
  font-weight: 800;
}

/* Header: subtle depth instead of a flat fill, plus a slim brand-accent
   strip along the top edge so the portal reads as its own product even
   before the accent color shows up anywhere else on the page. */
.portal-clean-body .clean-portal-header {
  background: linear-gradient(180deg, #0d1c34 0%, var(--vd-sidebar, #10213d) 60%, #142848 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 28px rgba(10,18,34,.22);
}

.portal-clean-body .clean-portal-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--consultancy-accent, #3157c8), rgba(255,255,255,.35));
}

.portal-clean-body .clean-portal-brand > span,
.portal-clean-body .clean-portal-brand-logo {
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------------
   Payments/Invoices redesign — the page previously rendered every
   invoice (paid or not) with identical visual weight and a status
   badge that was always the same neutral blue, so a student had to
   read every field on every card to tell what actually needed their
   attention. Fixes: real color-coded status badges, outstanding
   invoices visually separated from already-settled ones (settled
   invoices collapse into a closed details panel), de-emphasized
   Subtotal/Discount vs. emphasized Total/Balance, and payment-evidence
   review notes colored by outcome (awaiting review / approved /
   rejected) instead of one flat beige box for all three. ------------------------------------------------------------------ */

.portal-clean-body .portal-payment-balance {
  border: 1px solid rgba(255,255,255,.08);
}

.portal-clean-body .portal-payment-balance.has-balance {
  background: linear-gradient(135deg, #3a1414, #5c1f1f);
}

.portal-clean-body .portal-payment-balance.is-clear {
  background: linear-gradient(135deg, #103621, #16513a);
}

.portal-clean-body .portal-payment-balance-tag {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #8ee6b6;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.portal-clean-body .portal-invoice-group-heading {
  margin: 22px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--vd-text);
}

.portal-clean-body .portal-invoice-group-heading small {
  margin-left: 2px;
  font-weight: 600;
  color: var(--vd-muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.portal-clean-body .portal-invoice-group-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-block;
}

.portal-clean-body .portal-invoice-group-dot.needs-action {
  background: var(--vd-danger);
  box-shadow: 0 0 0 3px var(--vd-danger-soft);
}

.portal-clean-body .portal-invoice-group-dot.settled {
  background: var(--vd-success);
  box-shadow: 0 0 0 3px var(--vd-success-soft);
}

.portal-clean-body .portal-invoice-card {
  border-left: 4px solid var(--vd-border-soft);
}

.portal-clean-body .portal-invoice-card.invoice-status-unpaid {
  border-left-color: var(--vd-danger);
}

.portal-clean-body .portal-invoice-card.invoice-status-partially-paid {
  border-left-color: var(--vd-warning);
}

.portal-clean-body .portal-invoice-card.invoice-status-paid {
  border-left-color: var(--vd-success);
}

.portal-clean-body .portal-invoice-card.invoice-status-cancelled {
  border-left-color: var(--vd-border);
  opacity: .75;
}

.portal-clean-body .portal-payment-summary article.metric-subtle {
  opacity: .7;
}

.portal-clean-body .portal-payment-summary article.metric-subtle strong {
  font-size: 12px;
  font-weight: 700;
}

.portal-clean-body .portal-payment-summary article.metric-strong strong {
  font-size: 15px;
}

.portal-clean-body .portal-payment-summary article.paid-amount {
  background: var(--vd-success-soft);
}

.portal-clean-body .portal-payment-summary article.paid-amount strong {
  color: var(--vd-success);
}

.portal-clean-body .portal-payment-summary article.settled-amount {
  background: var(--vd-success-soft);
}

.portal-clean-body .portal-payment-summary article.settled-amount strong {
  color: var(--vd-success);
}

.portal-clean-body .portal-payment-summary article.attention strong {
  font-size: 15px;
}

.portal-clean-body .portal-invoice-settled-group {
  margin-top: 22px;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius);
  background: var(--vd-surface-alt);
  overflow: hidden;
}

.portal-clean-body .portal-invoice-settled-group summary {
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--vd-text);
  list-style: none;
}

.portal-clean-body .portal-invoice-settled-group summary::-webkit-details-marker {
  display: none;
}

.portal-clean-body .portal-invoice-settled-group summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--vd-muted);
  border-bottom: 2px solid var(--vd-muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.portal-clean-body .portal-invoice-settled-group[open] summary::after {
  transform: rotate(-135deg);
}

.portal-clean-body .portal-invoice-settled-group summary small {
  font-weight: 600;
  color: var(--vd-muted);
  font-size: 11px;
}

.portal-clean-body .portal-invoice-settled-list {
  padding: 4px 14px 14px;
  display: grid;
  gap: 12px;
}

.portal-clean-body .portal-invoice-settled-list .portal-invoice-card {
  opacity: .9;
}

.portal-clean-body .clean-submission-note.evidence-pending {
  background: var(--vd-warning-soft);
  border-color: rgba(183,121,31,.25);
}

.portal-clean-body .clean-submission-note.evidence-approved {
  background: var(--vd-success-soft);
  border-color: rgba(31,138,85,.25);
}

.portal-clean-body .clean-submission-note.evidence-rejected {
  background: var(--vd-danger-soft);
  border-color: rgba(194,65,65,.3);
}

.portal-clean-body .clean-submission-note.evidence-pending strong {
  color: var(--vd-warning);
}

.portal-clean-body .clean-submission-note.evidence-approved strong {
  color: var(--vd-success);
}

.portal-clean-body .clean-submission-note.evidence-rejected strong {
  color: var(--vd-danger);
}

.portal-clean-body .portal-payment-evidence-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--vd-border);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-alt);
}

.portal-clean-body .portal-payment-evidence-heading {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--consultancy-accent, var(--vd-primary));
  text-transform: uppercase;
  letter-spacing: .05em;
}

.portal-clean-body .clean-portal-avatar {
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}

/* Nav: icon slots + a brand-accent active indicator (previously a fixed
   blue, regardless of the consultancy's own accent color) so the active
   section is unmistakable and always on-brand. */
.portal-clean-body .clean-portal-nav .nav-ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .78;
  transition: opacity .15s ease;
}

.portal-clean-body .clean-portal-nav a:hover .nav-ic,
.portal-clean-body .clean-portal-nav a.active .nav-ic,
.portal-clean-body .clean-portal-nav-group > button:hover .nav-ic,
.portal-clean-body .clean-portal-nav-group:focus-within > button .nav-ic {
  opacity: 1;
}

.portal-clean-body .clean-portal-nav a.active::after {
  background: var(--consultancy-accent, #6f8cff);
  box-shadow: 0 0 10px rgba(255,255,255,.35);
}

.portal-clean-body .clean-portal-nav a:not(.active):hover {
  color: #fff;
}

.portal-clean-body .clean-portal-nav-group > button {
  display: flex;
  align-items: center;
  gap: 6px;
}

.portal-clean-body .clean-portal-nav-menu a .nav-ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .75;
}

.portal-clean-body .clean-portal-nav-menu a:hover .nav-ic,
.portal-clean-body .clean-portal-nav-menu a.active .nav-ic {
  opacity: 1;
}

/* Thin, unobtrusive scrollbar when the nav overflows on narrower
   viewports - matches the staff sidebar's scrollbar treatment instead
   of the browser's default (often very heavy on Windows). */
.portal-clean-body .clean-portal-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.30) transparent;
}

.portal-clean-body .clean-portal-nav::-webkit-scrollbar {
  height: 6px;
}

.portal-clean-body .clean-portal-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
}

/* ------------------------------------------------------------------
   Mobile nav rebuild — "tabs penetrating each other".
   Root cause: below 760px the older v4.5.1 CSS turned the nav into a
   horizontally-scrolling row (overflow-x:auto) so all 8 top-level tabs
   would fit, but a horizontally-scrolling flex row also clips vertical
   overflow, so the "Application" submenu (Admissions/General
   Instructions/Documents/Tasks/Forms) could no longer drop down in
   place. The old fix was `position:fixed; top:105px` on the submenu -
   a guessed pixel offset with no relationship to the header's real
   height, so on any consultancy with a longer name, a wrapped brand
   line, or simply a different font size, the submenu panel would
   land on top of - "penetrate" - the main tab row or the page below
   it instead of appearing under its own button.
   Fix: a real mobile pattern instead of a pixel guess. Below 760px the
   nav is hidden behind a hamburger button and opens as a normal
   in-flow stacked list under the header (not fixed/absolute), so nav
   items can never overlap anything - they just push the page down.
   The Application submenu becomes a plain indented list inside that
   same stack instead of a floating panel. Toggled by the small script
   at the bottom of this template. ------------------------------------------------------------------ */

.portal-clean-body .clean-portal-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--vd-radius-sm);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

.portal-clean-body .clean-portal-nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* Fix: mobile-only notification bell, kept outside the collapsible nav
   (.clean-portal-nav-v451) so the unread badge is visible without
   opening the hamburger menu - see the HTML comment above this element
   in portal_dashboard.html. Hidden by default/on desktop, where the
   nav's own Notifications item already shows the same badge inline. */
.portal-clean-body .clean-portal-mobile-notif {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--vd-radius-sm);
  color: #fff;
}

.portal-clean-body .clean-portal-mobile-notif svg {
  width: 20px;
  height: 20px;
}

.portal-clean-body .clean-portal-mobile-notif b.alert {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4d5b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .portal-clean-body .clean-portal-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .portal-clean-body .clean-portal-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }

  .portal-clean-body .clean-portal-mobile-notif {
    display: inline-flex;
    flex: 0 0 auto;
    order: 1;
  }

  .portal-clean-body .clean-portal-nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    order: 2;
  }

  .portal-clean-body .clean-portal-user {
    flex: 0 0 auto;
    order: 3;
  }

  .portal-clean-body .clean-portal-nav-v451 {
    order: 4;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    gap: 2px;
    margin-top: 4px;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .portal-clean-body .clean-portal-header-inner.nav-open .clean-portal-nav-v451 {
    display: flex;
  }

  .portal-clean-body .clean-portal-nav-v451 > a,
  .portal-clean-body .clean-portal-nav-group > button {
    width: 100%;
    justify-content: flex-start;
    min-height: 46px;
    padding: 0 10px;
  }

  .portal-clean-body .clean-portal-nav-group {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-clean-body .clean-portal-nav-menu {
    position: static;
    top: auto;
    left: auto;
    display: none;
    grid-template-columns: 1fr;
    margin: 2px 0 4px 20px;
    padding: 4px;
    border: 0;
    border-radius: var(--vd-radius-sm);
    background: rgba(255,255,255,.06);
    box-shadow: none;
  }

  .portal-clean-body .clean-portal-nav-group.open .clean-portal-nav-menu,
  .portal-clean-body .clean-portal-nav-group:focus-within .clean-portal-nav-menu {
    display: grid;
  }

  .portal-clean-body .clean-portal-nav-menu a {
    color: rgba(255,255,255,.82);
  }

  .portal-clean-body .clean-portal-nav-menu a:hover,
  .portal-clean-body .clean-portal-nav-menu a.active {
    background: rgba(255,255,255,.12);
    color: #fff;
  }

  .portal-clean-body .clean-portal-nav-menu b {
    background: rgba(255,255,255,.16);
    color: #fff;
  }
}

/* ------------------------------------------------------------------
   Desktop/Phone preview toggle. The rules inside ".force-mobile-preview"
   below are a deliberate duplicate of the "@media (max-width: 760px)"
   nav block above, scoped to a class instead of a media query, so the
   phone layout can be forced on regardless of the browser's actual
   width - most checking of this portal happens from a desktop browser.
   Keep the two blocks in sync if the mobile nav is changed again. ------------------------------------------------------------------ */

.portal-clean-body .clean-portal-preview-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.portal-clean-body .preview-toggle-btn {
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.55);
  cursor: pointer;
}

.portal-clean-body .preview-toggle-btn svg {
  width: 15px;
  height: 15px;
}

.portal-clean-body .preview-toggle-btn.active {
  background: rgba(255,255,255,.16);
  color: #fff;
}

/* Inside the phone-preview iframe itself the toggle has no JS attached
   (see the "vd-embedded-preview" guard in portal_dashboard.html), so
   hide it there rather than show dead buttons. */
.vd-embedded-preview .clean-portal-preview-toggle {
  display: none;
}

/* Fix: the header's right-hand "user" column used to lay out the avatar,
   name, ID, a "Password" link and a "Log out" button all as always-visible
   siblings - at realistic desktop widths (8 nav items + this) that column
   got wide enough to push into the nav's own space, which visibly overlaps
   because .clean-portal-nav-v451 needs overflow:visible for its dropdown
   (see the "v4.5.1" comment above) and so can't clip/scroll like a normal
   overflowing element would. Folding Password + Log out into a menu behind
   the avatar (reusing the exact same .clean-portal-nav-group open/close
   pattern - and its JS - as the "Application" nav dropdown) removes ~140px
   of always-on width from that column without removing either action. */
.portal-clean-body .clean-portal-account-group {
  position: relative;
}

.portal-clean-body .clean-portal-account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.portal-clean-body .clean-portal-account-group:hover .clean-portal-account-trigger,
.portal-clean-body .clean-portal-account-group.open .clean-portal-account-trigger {
  background: rgba(255,255,255,.10);
}

.portal-clean-body .clean-portal-account-name {
  display: grid;
  gap: 1px;
  text-align: left;
}

.portal-clean-body .clean-portal-account-caret {
  opacity: .6;
  transition: transform .15s ease;
}

.portal-clean-body .clean-portal-account-group.open .clean-portal-account-caret {
  transform: rotate(180deg);
}

.portal-clean-body .clean-portal-account-menu {
  left: auto;
  right: 0;
  min-width: 170px;
}

.portal-clean-body .clean-portal-account-menu form {
  margin: 0;
}

.portal-clean-body .clean-portal-account-menu a,
.portal-clean-body .clean-portal-account-menu button[type="submit"] {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #354259;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-clean-body .clean-portal-account-menu a:hover,
.portal-clean-body .clean-portal-account-menu button[type="submit"]:hover {
  background: #edf2ff;
  color: var(--vd-primary);
}

/* Slightly tighter nav-item padding reclaims a bit more room for the
   flexible middle column now that the account menu is collapsed - not
   required for the overlap fix above, but keeps a comfortable margin at
   in-between viewport widths instead of running right up against it. */
@media (min-width: 761px) {
  .portal-clean-body .clean-portal-nav-v451 > a,
  .portal-clean-body .clean-portal-nav-group > button {
    padding: 0 10px;
  }
}

/* NOTE: previewing "phone" mode is NOT done by narrowing this page's own
   <body> with a class. CSS media queries (all the "@media (max-width:
   ...)" rules throughout this file, including the nav block just above)
   respond to the actual browser viewport, not to any element's own
   width - a narrowed <body> would still report a wide viewport, so
   every grid/card elsewhere on the page would stay in its desktop
   layout, just squeezed into a narrow column instead of truly
   reflowing. Real fix: the toggle (see the script in
   portal_dashboard.html) opens the *same page URL* inside an actual
   narrow <iframe>, which has its own genuine ~390px viewport - every
   existing responsive rule in this file, on every portal page, then
   applies exactly as it would on a real phone, with nothing to
   duplicate or keep in sync here. */

.portal-preview-frame-wrap {
  display: flex;
  justify-content: center;
  padding: 26px 12px;
  background: #eef1f6;
  min-height: 100vh;
}

.portal-preview-frame {
  width: 390px;
  height: 780px;
  border: 10px solid #1a1f2b;
  border-radius: 34px;
  box-shadow: 0 30px 60px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.08);
  background: #fff;
}

.portal-preview-frame-note {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border: 0;
  border-radius: 999px;
  background: #1a1f2b;
  color: #fff;
  font-family: var(--vd-font, sans-serif);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.portal-preview-frame-note:hover {
  background: #262d3d;
}

/* This pill is the ONE way back to desktop that's guaranteed to be on
   screen no matter how narrow the real browser window is - unlike the
   header toggle buttons, which real @media rules can hide below ~1120px
   along with the rest of the account menu (see the header-overlap fix
   comment below). Styling the hint as its own little chip makes clear
   the whole pill is clickable, not just decorative. */
.portal-preview-frame-note span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-weight: 800;
}

/* Fix: .clean-summary-grid has been redefined unconditionally (not inside a
   media query) at several points in this file as features were added over
   time (v3.9 Deadline Center repeat(7), v4.0 Readiness Center repeat(8),
   v4.1 Submission Center repeat(9), v4.3 Approval repeat(10), v4.5 Decision
   Center repeat(12)) - each is followed only by a ~1100-1280px breakpoint
   that steps down to 4-6 columns, and none of them collapse further for
   real phone widths. Because these all share the same specificity as the
   original small-viewport rules earlier in the file, whichever one appears
   last in source order wins the cascade - leaving the portal's stat-card
   row stuck at several cramped columns no matter how narrow the screen is.
   These overrides use an extra class for higher specificity and sit at the
   end of the stylesheet so they always win, without touching the shared
   .clean-summary-grid rules used elsewhere (e.g. staff Dashboard). */
@media (max-width: 620px) {
  .portal-clean-body .clean-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .portal-clean-body .clean-summary-grid {
    grid-template-columns: 1fr;
  }

  .portal-clean-body .clean-summary-grid article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
  }

  .portal-clean-body .clean-summary-grid strong {
    font-size: 20px;
  }
}

/* Cards: a touch more depth + a hover-lift on the ones that are actually
   clickable, so the portal signals "this is interactive" the way a
   modern product does, rather than every card looking equally static. */
.portal-clean-body .clean-card {
  box-shadow: var(--vd-shadow-sm, 0 2px 7px rgba(25,42,70,.055));
  transition: box-shadow .18s ease;
}

.portal-clean-body .clean-pending-card,
.portal-clean-body .clean-action-item,
.portal-clean-body .clean-quick-links a {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.portal-clean-body .clean-pending-card:hover,
.portal-clean-body .clean-action-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow, 0 8px 24px rgba(25,42,70,.075));
  border-color: rgba(0,0,0,.02);
}

.portal-clean-body .clean-action-item.tier-urgent:hover,
.portal-clean-body .clean-action-item.tier-overdue:hover {
  box-shadow: 0 8px 22px rgba(194,65,65,.14);
}

.portal-clean-body .clean-summary-grid article {
  transition: box-shadow .18s ease, transform .18s ease;
}

.portal-clean-body .clean-summary-grid article.attention {
  box-shadow: 0 4px 14px rgba(183,121,31,.10);
}

/* Expandable "update / add a record" panels used throughout the portal
   (Admission, Tuition, My Information, etc.) - a rotating chevron and a
   clearer background swap between the closed summary and the open form
   makes it obvious this is an edit affordance, not just more static
   text to read. */
.portal-clean-body .portal-add-record summary {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}

.portal-clean-body .portal-add-record summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

.portal-clean-body .portal-add-record[open] summary::before {
  transform: rotate(45deg);
}

.portal-clean-body .portal-add-record[open] {
  padding-bottom: 2px;
}

.portal-clean-body .portal-add-record .panel.form-grid {
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--vd-radius-sm, 8px);
  background: var(--vd-surface-alt, #f8fafc);
  border: 1px solid var(--vd-border-soft, #e9eef5);
}

/* Empty / all-caught-up states - a soft circular badge around the
   checkmark instead of a bare glyph floating in whitespace. */
.portal-clean-body .clean-complete-state > span,
.portal-clean-body .clean-empty {
  display: inline-grid;
  place-items: center;
}

.portal-clean-body .clean-complete-state > span {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--vd-success-soft, #e8f7ef);
  color: var(--vd-success, #1f8a55);
  font-size: 18px;
}

/* Subtle entrance for the main cards on each page load - skipped
   entirely for anyone who has reduced motion set, and only applies to
   the first handful of cards so it never fights with dynamically
   inserted content lower on a long page. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes vdPortalFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .portal-clean-body .clean-portal-shell > .clean-card:nth-of-type(-n+4) {
    animation: vdPortalFadeUp .35s ease both;
  }
}

/* ============================================================
   VisaDesk — Professional theme pass: Overview / My Information /
   Documents / General Instructions / Notifications / Messages
   ============================================================
   Extends the "Student Portal redesign" pass above (which covered
   Payments/Invoices, the nav, and mobile nav) to the six pages a
   student actually spends most of their time on. Same approach:
   reuse the existing --vd-* tokens rather than a new palette, and
   key every color off state that's already meaningful (application
   status, document status, priority, read/unread) instead of
   decorating for its own sake. Scoped under .portal-clean-body and
   placed at the very end of the file so it reliably wins the
   cascade over the base .clean-* rules defined earlier (same
   reasoning as the .clean-summary-grid breakpoint fix above). */

/* ---- Overview: summary strip - each stat gets its own accent so the
   five numbers aren't visually interchangeable at a glance. ---- */
.portal-clean-body .clean-summary-grid article {
  position: relative;
  padding-left: 17px;
  overflow: hidden;
}

.portal-clean-body .clean-summary-grid article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--vd-border);
}

.portal-clean-body .clean-summary-grid article.stat-applications::before { background: var(--vd-primary); }
.portal-clean-body .clean-summary-grid article.stat-documents::before { background: var(--vd-info, #2f6fd1); }
.portal-clean-body .clean-summary-grid article.stat-approved::before { background: var(--vd-success); }
.portal-clean-body .clean-summary-grid article.stat-messages::before,
.portal-clean-body .clean-summary-grid article.stat-approvals::before { background: var(--vd-warning); }
.portal-clean-body .clean-summary-grid article.attention::before { background: var(--vd-danger); }
.portal-clean-body .clean-summary-grid article.stat-approved strong { color: var(--vd-success); }
.portal-clean-body .clean-summary-grid article.attention strong { color: var(--vd-warning); }

/* Application card + status badge, color-coded by the actual pipeline
   stage rather than one flat green for every status. */
.portal-clean-body .clean-application-card {
  border-left: 4px solid var(--vd-border);
}

.portal-clean-body .clean-application-card.status-visa-approved,
.portal-clean-body .clean-application-card.status-approved {
  border-left-color: var(--vd-success);
}

.portal-clean-body .clean-application-card.status-visa-refused,
.portal-clean-body .clean-application-card.status-refused,
.portal-clean-body .clean-application-card.status-withdrawn {
  border-left-color: var(--vd-danger);
}

.portal-clean-body .clean-application-card.status-visa-applied,
.portal-clean-body .clean-application-card.status-under-processing,
.portal-clean-body .clean-application-card.status-biometrics,
.portal-clean-body .clean-application-card.status-ready-to-submit {
  border-left-color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .clean-application-card.status-additional-documents {
  border-left-color: var(--vd-warning);
}

.portal-clean-body .clean-status {
  background: var(--vd-border-soft, #edf3fa);
  color: var(--vd-primary);
}

.portal-clean-body .clean-status.status-visa-approved,
.portal-clean-body .clean-status.status-approved {
  background: var(--vd-success-soft);
  color: var(--vd-success);
}

.portal-clean-body .clean-status.status-visa-refused,
.portal-clean-body .clean-status.status-refused,
.portal-clean-body .clean-status.status-withdrawn {
  background: var(--vd-danger-soft);
  color: var(--vd-danger);
}

.portal-clean-body .clean-status.status-additional-documents {
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}

/* Priority Actions list - a left-accent bar per tier on top of the
   background tint already defined in the base stylesheet. */
.portal-clean-body .clean-action-item {
  border-left: 4px solid var(--vd-border);
}

.portal-clean-body .clean-action-item.tier-low,
.portal-clean-body .clean-action-item.tier-normal {
  border-left-color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .clean-action-item.tier-medium,
.portal-clean-body .clean-action-item.tier-high,
.portal-clean-body .clean-action-item.tier-important {
  border-left-color: var(--vd-warning);
}

.portal-clean-body .clean-action-item.tier-urgent,
.portal-clean-body .clean-action-item.tier-critical,
.portal-clean-body .clean-action-item.tier-overdue,
.portal-clean-body .clean-action-item.tier-correction-required {
  border-left-color: var(--vd-danger);
}

.portal-clean-body .clean-action-item > span {
  font-weight: 800;
}

/* Stage tracker - the current-stage dot follows the consultancy's own
   accent color (like the header strip) instead of a fixed blue. */
.portal-clean-body .clean-stage-list > div.current > span {
  background: var(--consultancy-accent, var(--vd-primary));
}

/* ---- My Information: a colored rhythm across the (currently
   identical, all-white) sections, plus a status-aware form badge and
   branded input focus states. ---- */
.portal-clean-body .portal-form-status {
  background: var(--vd-border-soft, #edf3fa);
  color: var(--vd-muted);
}

.portal-clean-body .portal-form-status.status-submitted,
.portal-clean-body .portal-form-status.status-under-review {
  background: #e7f0fe;
  color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .portal-form-status.status-approved,
.portal-clean-body .portal-form-status.status-complete,
.portal-clean-body .portal-form-status.status-completed {
  background: var(--vd-success-soft);
  color: var(--vd-success);
}

.portal-clean-body .portal-form-status.status-draft,
.portal-clean-body .portal-form-status.status-incomplete {
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}

.portal-clean-body .portal-info-section {
  border-left: 4px solid var(--vd-border);
  transition: box-shadow .18s ease;
}

.portal-clean-body .portal-info-section:hover {
  box-shadow: var(--vd-shadow-sm);
}

.portal-clean-body .portal-info-section:nth-of-type(4n+1) { border-left-color: var(--vd-primary); }
.portal-clean-body .portal-info-section:nth-of-type(4n+2) { border-left-color: var(--vd-info, #2f6fd1); }
.portal-clean-body .portal-info-section:nth-of-type(4n+3) { border-left-color: var(--vd-success); }
.portal-clean-body .portal-info-section:nth-of-type(4n+4) { border-left-color: var(--vd-warning); }

.portal-clean-body .portal-info-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-clean-body .portal-info-section h2::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}

.portal-clean-body .portal-info-section:nth-of-type(4n+1) h2 { color: var(--vd-primary); }
.portal-clean-body .portal-info-section:nth-of-type(4n+2) h2 { color: var(--vd-info, #2f6fd1); }
.portal-clean-body .portal-info-section:nth-of-type(4n+3) h2 { color: var(--vd-success); }
.portal-clean-body .portal-info-section:nth-of-type(4n+4) h2 { color: var(--vd-warning); }

.portal-clean-body .portal-info-grid input:focus,
.portal-clean-body .portal-info-grid select:focus,
.portal-clean-body .portal-info-grid textarea:focus,
.portal-clean-body .portal-repeat-row input:focus,
.portal-clean-body .portal-repeat-row select:focus {
  outline: none;
  border-color: var(--consultancy-accent, var(--vd-primary));
}

/* ---- Documents: fuller status coverage - the base stylesheet only
   colored "approved" and "revision required"; this fills in rejected,
   correction-required, submitted/requested and not-applicable so every
   checklist state is visually distinct, not just a subset. ---- */
.portal-clean-body .clean-request-list article.status-approved {
  background: var(--vd-success-soft);
}

.portal-clean-body .clean-request-list article.status-rejected {
  border-left-color: var(--vd-danger);
  background: var(--vd-danger-soft);
}

.portal-clean-body .clean-request-list article.status-correction-required,
.portal-clean-body .clean-request-list article.status-revision-required {
  border-left-color: var(--vd-warning);
  background: var(--vd-warning-soft);
}

.portal-clean-body .clean-request-list article.status-submitted,
.portal-clean-body .clean-request-list article.status-requested {
  border-left-color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .clean-request-list article.status-not-applicable {
  opacity: .68;
}

.portal-clean-body .status-rejected .clean-request-status {
  background: var(--vd-danger-soft);
  color: var(--vd-danger);
}

.portal-clean-body .status-correction-required .clean-request-status,
.portal-clean-body .status-revision-required .clean-request-status {
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}

.portal-clean-body .status-submitted .clean-request-status,
.portal-clean-body .status-requested .clean-request-status {
  background: #e7f0fe;
  color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .clean-request-priority {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---- General Instructions: a hover accent + icon-dot heading so the
   guidance cards read as a scannable reference rather than a wall of
   identical gray boxes. ---- */
.portal-clean-body .mofa-document-list article {
  border-left: 3px solid var(--vd-border);
  transition: border-color .15s ease, transform .15s ease;
}

.portal-clean-body .mofa-document-list article:hover {
  border-left-color: var(--consultancy-accent, var(--vd-primary));
  transform: translateX(2px);
}

.portal-clean-body .mofa-document-list h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--vd-text);
}

.portal-clean-body .mofa-document-list h3::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--consultancy-accent, var(--vd-primary));
  opacity: .55;
}

/* ---- Notifications: unread items are visually raised and tinted;
   read ones recede, and each notification type gets its own badge
   color so the list is scannable without reading every line. ---- */
.portal-clean-body .clean-request-list article.unread {
  background: var(--vd-border-soft, #edf3fa);
  border-left-color: var(--consultancy-accent, var(--vd-primary));
  box-shadow: var(--vd-shadow-sm);
}

.portal-clean-body .clean-request-list article[class*="notif-type-"]:not(.unread) {
  opacity: .78;
}

.portal-clean-body .notif-new-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}

.portal-clean-body .notif-type-warning .clean-request-priority {
  background: var(--vd-warning-soft);
  color: var(--vd-warning);
}

.portal-clean-body .notif-type-document .clean-request-priority {
  background: #e7f0fe;
  color: var(--vd-info, #2f6fd1);
}

.portal-clean-body .notif-type-agreement .clean-request-priority,
.portal-clean-body .notif-type-registration .clean-request-priority,
.portal-clean-body .notif-type-portal .clean-request-priority {
  background: var(--vd-success-soft);
  color: var(--vd-success);
}

.portal-clean-body .notif-type-form .clean-request-priority,
.portal-clean-body .notif-type-visa-file .clean-request-priority {
  background: #f1e9ff;
  color: #6b3fbf;
}

/* ---- Messages: clearer sender distinction + unread highlight so a
   long thread is easy to skim for "what's new from my consultant". ---- */
.portal-clean-body .clean-chat article {
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(25,42,70,.05);
}

.portal-clean-body .clean-chat article.student {
  background: var(--consultancy-accent, var(--vd-primary));
}

.portal-clean-body .clean-chat article:not(.student):not(.unread) {
  background: #f4f6fa;
}

.portal-clean-body .clean-chat article.unread {
  border-color: rgba(183,121,31,.25);
}

.portal-clean-body .clean-chat article > div strong {
  font-size: 11px;
  font-weight: 800;
}

.portal-clean-body .clean-chat article.student > div strong {
  color: rgba(255,255,255,.92);
}

.portal-clean-body .clean-message-layout .clean-form textarea:focus {
  outline: none;
  border-color: var(--consultancy-accent, var(--vd-primary));
}

/* ============================================================
   VisaDesk — Student Portal beautification pass: Overview hero +
   stat cards, FAQ section
   ============================================================
   Direct feedback: "make student portal beautiful, specially FAQ
   section and dashboard." Both were already functional (see the
   "Professional theme pass" above) but visually flat - a plain white
   heading strip and thin-left-border stat cards on Overview, and bare
   gray boxes for every FAQ entry with no visual hierarchy. This block
   brings in the same colorful, card-based language already used for
   the CRM's own hub pages (see .hub-hero/.hub-card in this file):
   gradient hero banners, accent-tinted icon badges, and proper cards
   instead of flat boxes. Uses var(--consultancy-accent) throughout
   (already set per-consultancy at the top of portal_dashboard.html)
   so every consultancy's own brand color drives this, not one fixed
   hardcoded color. Kept scoped to .clean-hero (added only to the
   Overview and FAQ page headings in portal_dashboard.html) rather than
   every .clean-page-heading, so other portal pages are unaffected. */

.portal-clean-body .clean-page-heading.clean-hero {
  padding: 26px 28px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 62%, #0b132b), var(--consultancy-accent, var(--vd-primary)));
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 50%, transparent);
}

.portal-clean-body .clean-hero > div > span {
  color: rgba(255,255,255,.82);
}

.portal-clean-body .clean-hero h1 {
  color: #fff;
}

.portal-clean-body .clean-hero p {
  color: rgba(255,255,255,.85);
}

/* Progress badge - was a plain dark rectangle with just a number;
   now a ring gauge (drawn with a conic-gradient mask trick via SVG
   stroke-dasharray) sitting on translucent glass, inside the hero. */
.portal-clean-body .clean-hero .clean-progress-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
}

.portal-clean-body .clean-progress-ring {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  transform: rotate(-90deg);
}

.portal-clean-body .clean-progress-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.22);
  stroke-width: 6;
}

.portal-clean-body .clean-progress-ring-value {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  /* Circumference of r=27 is ~169.6 - dasharray splits that into
     "filled" vs "remaining" using the percent custom property set
     inline per-student in portal_dashboard.html. */
  stroke-dasharray: 169.6;
  stroke-dashoffset: calc(169.6 - (169.6 * var(--progress-percent, 0) / 100));
  transition: stroke-dashoffset .4s ease;
}

.portal-clean-body .clean-progress-summary div {
  display: grid;
  gap: 1px;
}

.portal-clean-body .clean-progress-summary small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
}

.portal-clean-body .clean-progress-summary strong {
  font-size: 22px;
  line-height: 1.1;
}

.portal-clean-body .clean-progress-summary span {
  font-size: 10px;
  color: rgba(255,255,255,.85);
}

/* Stat cards - an accent-tinted icon badge instead of just a thin
   left border, and a lift on hover so the row feels alive. */
.portal-clean-body .clean-summary-grid article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 14px 15px;
}

.portal-clean-body .clean-stat-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--vd-border) 40%, #fff);
  color: var(--vd-text-soft, #5b6b85);
}

.portal-clean-body .clean-stat-icon svg {
  width: 19px;
  height: 19px;
}

.portal-clean-body .clean-summary-grid article.stat-applications .clean-stat-icon { background: color-mix(in srgb, var(--vd-primary) 14%, #fff); color: var(--vd-primary); }
.portal-clean-body .clean-summary-grid article.stat-documents .clean-stat-icon { background: color-mix(in srgb, var(--vd-info, #2f6fd1) 14%, #fff); color: var(--vd-info, #2f6fd1); }
.portal-clean-body .clean-summary-grid article.stat-approved .clean-stat-icon { background: var(--vd-success-soft); color: var(--vd-success); }
.portal-clean-body .clean-summary-grid article.stat-messages .clean-stat-icon,
.portal-clean-body .clean-summary-grid article.stat-approvals .clean-stat-icon { background: var(--vd-warning-soft); color: var(--vd-warning); }
.portal-clean-body .clean-summary-grid article.attention .clean-stat-icon { background: var(--vd-danger-soft); color: var(--vd-danger); }

.portal-clean-body .clean-summary-grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(25,42,70,.18);
}

@media (max-width: 620px) {
  .portal-clean-body .clean-page-heading.clean-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-clean-body .clean-hero .clean-progress-summary {
    justify-content: flex-start;
  }
}

/* ---- FAQ: section headers with an icon badge, and every entry
   (country guide, resource link, question) turned into a real card
   instead of a flat gray box, so the page reads as organized help
   content rather than a wall of identical accordions. ---- */
.portal-clean-body .faq-section-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}

.portal-clean-body .faq-section-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
}

.portal-clean-body .faq-section-icon svg {
  width: 21px;
  height: 21px;
}

.portal-clean-body .faq-section-icon-guide { background: linear-gradient(135deg, #34d1a8, var(--vd-success, #1f8a55)); }
.portal-clean-body .faq-section-icon-links { background: linear-gradient(135deg, #6ea8ff, var(--vd-primary)); }
.portal-clean-body .faq-section-icon-questions { background: linear-gradient(135deg, #ffb15c, var(--vd-warning, #b7791f)); }

.portal-clean-body .faq-section-heading h2 {
  margin: 0;
  font-size: 17px;
}

.portal-clean-body .faq-section-heading p {
  margin: 2px 0 0;
  color: var(--vd-muted, #758095);
  font-size: 12px;
}

.portal-clean-body .faq-country-guide,
.portal-clean-body .faq-item {
  padding: 14px 16px;
  border: 1px solid var(--vd-border-soft, #e9eef5);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,31,53,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.portal-clean-body .faq-country-guide:hover,
.portal-clean-body .faq-item:hover {
  border-color: color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 30%, var(--vd-border-soft));
  box-shadow: 0 6px 16px -8px rgba(25,42,70,.12);
}

.portal-clean-body .faq-country-guide summary,
.portal-clean-body .faq-item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.portal-clean-body .faq-country-guide summary::-webkit-details-marker,
.portal-clean-body .faq-item summary::-webkit-details-marker {
  display: none;
}

.portal-clean-body .faq-country-guide summary::before,
.portal-clean-body .faq-item summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--consultancy-accent, var(--vd-primary));
  border-bottom: 2px solid var(--consultancy-accent, var(--vd-primary));
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

.portal-clean-body .faq-country-guide[open] summary::before,
.portal-clean-body .faq-item[open] summary::before {
  transform: rotate(45deg);
}

.portal-clean-body .faq-guide-content,
.portal-clean-body .faq-item p {
  margin: 10px 0 0 15px;
  line-height: 1.6;
}

.portal-clean-body .faq-resource-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.portal-clean-body .faq-resource-link {
  position: relative;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--vd-border-soft, #e9eef5);
  box-shadow: 0 1px 2px rgba(20,31,53,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.portal-clean-body .faq-resource-link:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 35%, var(--vd-border-soft));
  box-shadow: 0 10px 22px -12px rgba(25,42,70,.16);
}

.portal-clean-body .faq-resource-link-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 12%, #fff);
  color: var(--consultancy-accent, var(--vd-primary));
}

.portal-clean-body .faq-resource-link-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--vd-muted, #9aa6ba);
  font-size: 12px;
}

/* Milestone 8 portal corrections: compact, action-first checklist cards. */
.portal-clean-body .portal-document-list,
.portal-clean-body #default-documents .clean-request-list {
  gap: 8px;
}

.portal-clean-body .clean-request-list article.portal-document-card {
  padding: 11px 12px;
}

.portal-clean-body .portal-document-summary {
  flex: 1;
  min-width: 0;
}

.portal-clean-body .portal-document-name {
  display: inline-block;
  margin: 0 0 6px;
  padding: 5px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--consultancy-accent, var(--vd-primary)) 12%, #fff);
  color: var(--vd-text, #17233b);
  font-size: 14px;
  line-height: 1.25;
}

.portal-clean-body .status-approved .portal-document-name {
  background: #dff3e4;
  color: #245f37;
}

.portal-clean-body .portal-document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  color: var(--vd-muted, #667085);
  font-size: 11px;
}

.portal-clean-body .portal-document-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
}

.portal-clean-body .portal-document-action > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--consultancy-accent, var(--vd-primary));
  border-radius: 7px;
  color: var(--consultancy-accent, var(--vd-primary));
  background: #fff;
  font-size: 11px;
  font-weight: 750;
}

.portal-clean-body .portal-document-action > summary::-webkit-details-marker {
  display: none;
}

.portal-clean-body .portal-na-action > summary {
  border-color: var(--vd-border, #cfd7e4);
  color: var(--vd-muted, #667085);
}

.portal-clean-body .portal-document-action[open] {
  flex: 1 0 100%;
}

.portal-clean-body .portal-document-action[open] > summary {
  display: inline-block;
}

.portal-clean-body .portal-document-action .compact-request {
  max-width: 560px;
  margin-top: 7px;
  padding-top: 8px;
}

/* Milestone 9 — compact Student Workspace cards with visible portal activity. */
.student-workspace-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.student-workspace-card {
  padding: 13px;
  gap: 10px;
}

.student-card-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.student-card-activity-count {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--vd-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.student-stage-ribbon {
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--vd-primary) 18%, var(--vd-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--vd-primary-soft) 62%, #fff);
}

.student-stage-ribbon .student-stage-heading > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.student-stage-ribbon small {
  color: var(--vd-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.student-stage-ribbon .pipeline-progress {
  margin-top: 7px;
}

.student-activity-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--vd-info) 18%, var(--vd-border));
  border-radius: 10px;
  background: var(--vd-info-soft);
}

.student-activity-pill {
  padding: 5px 8px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 999px;
  background: #fff;
  color: var(--vd-text);
  font-size: 10.5px;
  font-weight: 700;
}

.student-activity-pill strong {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--vd-info);
  color: #fff;
  font-size: 9px;
}

.student-activity-pill.document strong,
.student-activity-pill.task strong { background: var(--vd-success); }
.student-activity-pill.payment strong,
.student-activity-pill.agreement strong { background: var(--vd-warning); }

.student-latest-activity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--vd-surface-alt);
  color: var(--vd-text);
}

.student-latest-activity small {
  grid-column: 1 / -1;
  color: var(--vd-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.student-latest-activity strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.student-latest-activity span {
  color: var(--vd-muted);
  font-size: 10px;
  white-space: nowrap;
}

.student-workspace-page .workspace-summary-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.student-workspace-page .overview-profile-card { border-top: 3px solid var(--vd-info); }
.student-workspace-page .overview-admission-card { border-top: 3px solid var(--vd-primary); }
.student-workspace-page .overview-application-card { border-top: 3px solid var(--vd-warning); }
.student-workspace-page .overview-finance-card { border-top: 3px solid var(--vd-success); }
.student-workspace-page .overview-documents-card { border-top: 3px solid #7a4fd6; }

.student-workspace-page .workspace-two-column,
.student-workspace-page .unified-record-grid {
  gap: 9px;
}

.student-workspace-page .workspace-card-title h2,
.student-workspace-page .workspace-card h2 {
  margin-bottom: 7px;
}

.student-workspace-page .unified-record-list article,
.student-workspace-page .unified-record-grid article {
  padding: 9px;
}

.student-workspace-page .workspace-table th,
.student-workspace-page .workspace-table td,
.student-workspace-page .table-wrap th,
.student-workspace-page .table-wrap td {
  padding: 7px 8px;
}

@media (max-width: 1100px) {
  .student-workspace-page .workspace-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .student-workspace-page .workspace-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .student-latest-activity {
    grid-template-columns: 1fr;
  }
}
.crm-page-tools {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 12px;
}

.crm-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #29415f;
  background: #fff;
  border-color: #d9e2ee;
  box-shadow: 0 2px 8px rgba(32, 55, 83, 0.06);
}

.crm-back-button span {
  font-size: 18px;
  line-height: 1;
}

.configuration-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.configuration-guide > div {
  padding: 14px;
  border: 1px solid #e1e8f1;
  border-radius: 12px;
  background: #f8fafc;
}

.configuration-guide strong,
.configuration-guide span {
  display: block;
}

.configuration-guide span {
  margin-top: 5px;
  color: #607087;
  font-size: 13px;
  line-height: 1.45;
}

.share-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.share-link-box label {
  min-width: 0;
}

@media (max-width: 720px) {
  .share-link-box {
    grid-template-columns: 1fr;
  }
}

/* Compact student Visa File: documents stay scannable while conversations
   open only when the student needs them. */
.portal-clean-body .visa-file-student-panel {
  padding: 12px;
}

.portal-clean-body .visa-file-student-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-clean-body .visa-file-student-grid .visa-file-document-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  padding: 11px 12px;
  border-left-color: var(--vd-success, #198754);
  background: linear-gradient(145deg, #fff 60%, #f5fbf8);
}

.portal-clean-body .visa-file-document-card .clean-request-main {
  gap: 10px;
  align-items: center;
}

.portal-clean-body .visa-file-document-card .clean-request-main h3 {
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.25;
}

.portal-clean-body .visa-file-document-card .clean-request-priority {
  padding: 2px 6px;
  font-size: 9px;
}

.portal-clean-body .visa-file-document-actions {
  flex: 0 0 auto;
  gap: 5px;
}

.portal-clean-body .visa-file-document-actions .button {
  min-height: 30px;
  padding: 5px 9px;
}

.portal-clean-body .visa-file-document-card .visa-file-instruction-box {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.35;
}

.portal-clean-body .visa-file-document-card .visa-file-instruction-box strong {
  margin-bottom: 2px;
  font-size: 9px;
}

.visa-file-student-conversation {
  margin-top: 8px;
  border-top: 1px solid #e1e8f1;
}

.visa-file-student-conversation > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 1px 1px;
  color: #29415f;
  cursor: pointer;
  list-style: none;
}

.visa-file-student-conversation > summary::-webkit-details-marker {
  display: none;
}

.visa-file-student-conversation > summary > span:first-child {
  display: grid;
  gap: 1px;
}

.visa-file-student-conversation > summary strong {
  font-size: 12px;
}

.visa-file-student-conversation > summary small {
  color: #758399;
  font-size: 10px;
  font-weight: 500;
}

.visa-file-message-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #52647d;
  font-size: 10px;
  white-space: nowrap;
}

.visa-file-message-count::after {
  content: "+";
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #edf3fb;
  color: var(--consultancy-accent, #3157c8);
  font-size: 14px;
  font-weight: 800;
}

.visa-file-student-conversation[open] .visa-file-message-count::after {
  content: "−";
}

.visa-file-student-conversation .visa-file-conversation {
  margin-top: 7px;
  padding-top: 8px;
}

.visa-file-student-conversation .visa-file-no-comments {
  margin: 0 0 6px;
}

.visa-file-student-conversation .visa-file-comment-form {
  gap: 5px;
  margin-top: 7px;
}

.visa-file-student-conversation .visa-file-comment-form textarea {
  min-height: 52px;
}

@media (max-width: 860px) {
  .portal-clean-body .visa-file-student-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .portal-clean-body .visa-file-document-card .clean-request-main {
    display: grid;
  }

  .portal-clean-body .visa-file-document-actions {
    justify-content: flex-start;
  }
}

/* Automation Builder, Phase 2 (2026-08-14): the vertical drag-chain
   canvas at /settings/automation-builder/<id>, plus the chain list page
   at /settings/automation-builder. Deliberately reuses existing tokens
   (--vd-border-soft, --vd-surface-alt, --vd-primary, .panel, .button,
   .unified-record-list) rather than introducing a new visual language -
   only new layout/drag-specific rules live here. */

.chain-trigger-card {
  padding: 14px 16px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 12px;
  background: var(--vd-surface-alt);
}

.chain-trigger-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--vd-text);
}

.chain-trigger-card span {
  color: var(--vd-muted);
  font-size: 12px;
}

.chain-connector {
  display: flex;
  justify-content: center;
  height: 20px;
}

.chain-connector::before {
  content: "";
  width: 2px;
  height: 100%;
  background: var(--vd-border-soft);
}

.chain-step-list {
  display: grid;
  gap: 0;
}

.chain-step-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--vd-border-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(32, 55, 83, 0.05);
}

.chain-step-card.dragging {
  opacity: 0.4;
}

.chain-step-list.drag-over-list .chain-step-card {
  border-color: var(--vd-primary, #3157c8);
}

.chain-step-handle {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--vd-muted);
  cursor: grab;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

.chain-step-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chain-step-body strong {
  color: var(--vd-text);
  font-size: 13px;
}

.chain-step-body span {
  color: var(--vd-muted);
  font-size: 11px;
}

.chain-step-index {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vd-primary-soft, #eef2ff);
  color: var(--vd-primary, #3157c8);
  font-size: 11px;
  font-weight: 800;
}

.chain-step-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}

.chain-step-add {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--vd-border-soft);
  border-radius: 12px;
  background: var(--vd-surface-alt);
}

.chain-list-page .unified-record-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chain-scope-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--vd-primary, #3157c8);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .chain-step-card {
    flex-wrap: wrap;
  }
}

/* Country Database admin page rebuild (2026-08-14) - "Make Country Page
   professional and ordered". Countries/Visa Categories/Visa Subcategories
   moved from a flat .admin-checklist-card stack into real tables; these
   two classes lay out the per-row action buttons (Open/Toggle/Reorder)
   inline inside a table cell instead of relying on
   .admin-checklist-card's own card-scoped spacing rules, which don't
   apply once the actions live in a <td>. */
.country-table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.country-table-actions form {
  display: inline-block;
  margin: 0;
}

.subcategory-group-heading {
  margin: 18px 0 8px;
  font-size: 14px;
  color: var(--vd-muted, #607087);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subcategory-group-heading:first-of-type {
  margin-top: 4px;
}

.country-add-form {
  margin-bottom: 14px;
}

/* ===== Student Workspace — Case Management tab, Wave 1 (2026-08-16) =====
   Owner request: "i want all options visible in portal management
   sections to be visible in student work space as new tab to operate
   individually also for each student here." Scoped to
   .student-workspace-page for the same reason as every other rule in
   this file's Student Workspace sections - .case-mgmt-item and friends
   are new, exclusive to this tab, but kept consistent with the "clean
   modern SaaS" pass already applied to Overview (soft shadows, rounded
   corners, hover lift). */
.student-workspace-page .case-mgmt-item {
  padding: 13px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--vd-border-soft);
  border-radius: var(--vd-radius);
  background: var(--vd-surface-alt);
  transition: box-shadow .12s ease, border-color .12s ease;
}

.student-workspace-page .case-mgmt-item:hover {
  box-shadow: var(--vd-shadow-sm);
  border-color: #d5dfec;
}

.student-workspace-page .case-mgmt-item:last-of-type {
  margin-bottom: 0;
}

.student-workspace-page .case-mgmt-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.student-workspace-page .case-mgmt-item-header strong {
  font-size: 13.5px;
  font-weight: 750;
}

.student-workspace-page .case-mgmt-item-meta {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--vd-muted);
}

.student-workspace-page .case-mgmt-item-reason,
.student-workspace-page .case-mgmt-item-response {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--vd-text-soft);
  line-height: 1.5;
}

.student-workspace-page .case-mgmt-item-response strong {
  color: var(--vd-text);
}

.student-workspace-page .case-mgmt-item {
  border-left: 3px solid var(--vd-border);
}
.student-workspace-page .case-mgmt-item.status-good { border-left-color: var(--vd-success); }
.student-workspace-page .case-mgmt-item.status-bad { border-left-color: var(--vd-danger); }
.student-workspace-page .case-mgmt-item.status-warn { border-left-color: var(--vd-warning); }
.student-workspace-page .case-mgmt-item.status-neutral { border-left-color: var(--vd-info); }

/* Case Management tab, Wave 2 (2026-08-16) - Approvals & Change Notices
   and Visa Decisions & Pre-Departure each combine two data sources in one
   card; this separates them visually without a second .workspace-card
   wrapper, matching the existing .subcategory-group-heading convention
   used elsewhere in this file. */
.student-workspace-page .case-mgmt-subheading {
  margin: 16px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--vd-border-soft);
  padding-top: 14px;
}

.student-workspace-page .case-mgmt-subheading:first-of-type {
  margin-top: 4px;
  border-top: none;
  padding-top: 0;
}

/* Student Portal — Admission, tuition and document checklist visual refresh
   (2026-08-20). These rules are deliberately scoped to the portal so the
   underlying forms and staff workspace keep their established behaviour. */
.portal-clean-body .portal-feature-heading {
  position: relative;
  overflow: hidden;
  padding: 24px 26px;
  border: 1px solid #dce5f1;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
  box-shadow: 0 10px 28px rgba(35, 57, 91, .07);
}

.portal-clean-body .portal-feature-heading::after {
  position: absolute;
  top: -55px;
  right: -35px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--consultancy-accent, #3157c8) 10%, transparent);
  content: "";
  pointer-events: none;
}

.portal-clean-body .portal-feature-heading h1 {
  max-width: 720px;
  margin-bottom: 6px;
}

.portal-clean-body .portal-feature-heading p {
  max-width: 680px;
  margin: 0;
  color: #607087;
  line-height: 1.55;
}

.portal-clean-body .portal-status-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.portal-clean-body .portal-status-overview article {
  position: relative;
  min-width: 0;
  padding: 15px 17px 14px;
  overflow: hidden;
  border: 1px solid #e0e7f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(38, 58, 88, .05);
}

.portal-clean-body .portal-status-overview article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--consultancy-accent, #3157c8);
  content: "";
}

.portal-clean-body .portal-status-overview article.is-complete::before { background: #18875c; }
.portal-clean-body .portal-status-overview article.is-pending::before,
.portal-clean-body .portal-status-overview article.is-attention::before { background: #d58a18; }
.portal-clean-body .portal-status-overview span,
.portal-clean-body .portal-finance-summary span {
  display: block;
  margin-bottom: 5px;
  color: #718097;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.portal-clean-body .portal-status-overview strong {
  display: block;
  overflow-wrap: anywhere;
  color: #1f3048;
  font-size: 17px;
  line-height: 1.25;
}

.portal-clean-body .portal-status-overview small {
  display: block;
  margin-top: 4px;
  color: #78869a;
  font-size: 11px;
}

.portal-clean-body .portal-feature-card {
  border-color: #dde5ef;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35, 57, 91, .06);
}

.portal-clean-body .portal-section-intro,
.portal-clean-body .portal-subsection-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.portal-clean-body .portal-section-intro h2,
.portal-clean-body .portal-subsection-heading h3 { margin: 2px 0 4px; }
.portal-clean-body .portal-section-intro p,
.portal-clean-body .portal-subsection-heading p { margin: 0; color: #718097; line-height: 1.45; }
.portal-clean-body .portal-subsection-heading > p { max-width: 420px; font-size: 12px; text-align: right; }
.portal-clean-body .portal-section-kicker {
  color: var(--consultancy-accent, #3157c8);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portal-clean-body .portal-state-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf2fb;
  color: #48617f;
  font-size: 10px;
  font-weight: 800;
}
.portal-clean-body .portal-state-pill.success { background: #e7f6ef; color: #14724d; }
.portal-clean-body .portal-state-pill.warning { background: #fff3d8; color: #93600e; }

.portal-clean-body .portal-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 1px;
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 13px;
  background: #e2e8f1;
}
.portal-clean-body .portal-detail-grid dt,
.portal-clean-body .portal-detail-grid dd {
  margin: 0;
  padding: 8px 11px;
  background: #fff;
}
.portal-clean-body .portal-detail-grid dt { padding-bottom: 2px; color: #78869a; }
.portal-clean-body .portal-detail-grid dd { padding-top: 2px; min-height: 34px; }

.portal-clean-body .portal-subsection-heading {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e4e9f1;
}

.portal-clean-body .portal-offer-card {
  padding: 15px;
  border: 1px solid #dfe6f0;
  border-left: 4px solid var(--consultancy-accent, #3157c8);
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f8faff);
}

.portal-clean-body .portal-finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}
.portal-clean-body .portal-finance-summary article {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: #f8faff;
}
.portal-clean-body .portal-finance-summary strong { display: block; color: #263b56; font-size: 15px; overflow-wrap: anywhere; }
.portal-clean-body .portal-finance-summary .is-positive { background: #f0faf5; border-color: #d6eee3; }
.portal-clean-body .portal-finance-summary .is-positive strong { color: #14724d; }
.portal-clean-body .portal-finance-summary .is-outstanding { background: #fff8ea; border-color: #f1dfb9; }
.portal-clean-body .portal-finance-summary .is-outstanding strong { color: #9a6410; }

.portal-clean-body .portal-documents-card .clean-card-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e9f1;
}
.portal-clean-body .portal-documents-card .clean-card-heading b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff3d8;
  color: #93600e;
  font-size: 10px;
}
.portal-clean-body .portal-document-list { gap: 10px; }
.portal-clean-body .portal-document-card {
  position: relative;
  padding: 15px 16px;
  border: 1px solid #dfe6ef;
  border-left: 4px solid #8292a8;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(36, 57, 87, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.portal-clean-body .portal-document-card:hover { border-color: #cbd7e7; box-shadow: 0 8px 20px rgba(36, 57, 87, .08); transform: translateY(-1px); }
.portal-clean-body .portal-document-card.status-pending,
.portal-clean-body .portal-document-card.status-correction-required,
.portal-clean-body .portal-document-card.status-rejected { border-left-color: #d58a18; }
.portal-clean-body .portal-document-card.status-approved { border-left-color: #18875c; background: linear-gradient(145deg, #fff, #f5fbf8); }
.portal-clean-body .portal-document-card.status-submitted,
.portal-clean-body .portal-document-card.status-resubmitted { border-left-color: var(--consultancy-accent, #3157c8); }
.portal-clean-body .portal-document-name { margin-bottom: 5px; font-size: 15px; }
.portal-clean-body .portal-document-meta span { padding: 3px 7px; border-radius: 999px; background: #f0f3f7; }
.portal-clean-body .portal-document-actions-row { margin-top: 12px; padding-top: 11px; border-top: 1px dashed #dbe3ed; }
.portal-clean-body .portal-document-action { border-radius: 9px; background: #f8faff; }
.portal-clean-body .portal-document-action > summary { min-height: 36px; display: flex; align-items: center; }

@media (max-width: 860px) {
  .portal-clean-body .portal-detail-grid,
  .portal-clean-body .portal-finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .portal-clean-body .portal-feature-heading { padding: 19px 18px; }
  .portal-clean-body .portal-status-overview,
  .portal-clean-body .portal-detail-grid,
  .portal-clean-body .portal-finance-summary { grid-template-columns: 1fr; }
  .portal-clean-body .portal-section-intro,
  .portal-clean-body .portal-subsection-heading { flex-direction: column; gap: 8px; }
  .portal-clean-body .portal-subsection-heading > p { max-width: none; text-align: left; }
  .portal-clean-body .portal-document-card { padding: 13px; }
}

/* Final compact refinement for the staff Student Workspace overview.
   Kept at the end of the cascade so it intentionally supersedes earlier
   spacious dashboard passes. */
.student-workspace-page .case-health-panel {
  padding: 15px 16px;
  margin-bottom: 10px;
  border-radius: 14px;
}
.student-workspace-page .case-health-header { margin-bottom: 9px; }
.student-workspace-page .case-health-header h2 { font-size: 18px; }
.student-workspace-page .case-health-stage { padding: 5px 10px; font-size: 10px; }
.student-workspace-page .case-health-grid { gap: 6px; }
.student-workspace-page .case-health-grid article {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  min-height: 58px;
  padding: 8px 10px;
  gap: 2px;
  border-radius: 9px;
}
.student-workspace-page .case-health-grid small { font-size: 8px; }
.student-workspace-page .case-health-grid strong { font-size: 13px; line-height: 1.22; }
.student-workspace-page .health-metric-icon { display: none; }

.student-workspace-page .case-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 48px;
  margin-top: 8px;
  padding: 8px 10px 8px 12px;
  border: 1px solid #e7b94c;
  border-left: 5px solid #e09a16;
  border-radius: 10px;
  background: linear-gradient(100deg, #fff8e6, #fffdf8);
  color: #253851;
  box-shadow: 0 5px 14px rgba(132, 88, 10, .10);
}
.student-workspace-page .case-next-action > span {
  display: grid;
  align-content: center;
  color: #915d08;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: none;
  white-space: nowrap;
}
.student-workspace-page .case-next-action > span small {
  color: #b17612;
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.student-workspace-page .case-next-action strong {
  align-self: center;
  color: #263a55;
  font-size: 13px;
  text-align: left;
}
.student-workspace-page .case-next-action em {
  align-self: center;
  padding: 6px 9px;
  border-radius: 7px;
  background: #e09a16;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.student-workspace-page .student-status-snapshot {
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 14px;
}
.student-workspace-page .snapshot-heading { margin-bottom: 7px; }
.student-workspace-page .snapshot-heading h2 { font-size: 18px; }
.student-workspace-page .snapshot-heading a { padding: 6px 10px; font-size: 9px; }
.student-workspace-page .snapshot-grid { gap: 6px; margin-top: 7px; }
.student-workspace-page .snapshot-grid article {
  min-height: 52px;
  padding: 7px 8px;
  gap: 1px;
  border-radius: 8px;
}
.student-workspace-page .snapshot-grid small { font-size: 7.5px; }
.student-workspace-page .snapshot-grid strong { font-size: 17px; }
.student-workspace-page .snapshot-progress { height: 6px; margin-top: 7px; }
.student-workspace-page .snapshot-alert,
.student-workspace-page .snapshot-ready { margin-top: 6px; padding: 6px 9px; font-size: 10px; }

@media (max-width: 760px) {
  .student-workspace-page .case-next-action { grid-template-columns: 1fr; gap: 4px; }
  .student-workspace-page .case-next-action em { justify-self: start; }
}

/* Compact professional system for every staff Student Workspace tab
   (2026-08-20). The tab-aware root class is rendered by student_detail.html
   and prevents these density rules leaking into other CRM pages. */
.student-workspace-page[class*="workspace-tab-"] .workspace-section-heading {
  min-height: 0;
  margin: 0 0 9px;
  padding: 10px 13px;
  border-radius: 10px;
  background: linear-gradient(90deg, #fff, #f7f9fc);
}
.student-workspace-page[class*="workspace-tab-"] .workspace-section-heading h2 { margin: 0 0 2px; font-size: 17px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-section-heading p { margin: 0; font-size: 11px; line-height: 1.35; }
.student-workspace-page[class*="workspace-tab-"] .workspace-review-notice,
.student-workspace-page[class*="workspace-tab-"] .alert { margin-bottom: 8px; padding: 8px 11px; border-radius: 8px; font-size: 10px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-card {
  min-height: 0;
  padding: 12px 13px;
  margin-bottom: 8px;
  border-radius: 11px;
  box-shadow: 0 3px 11px rgba(30, 51, 81, .045);
}
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title {
  min-height: 28px;
  margin-bottom: 8px;
  padding-bottom: 7px;
}
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title h2 { margin: 0; font-size: 14px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title a,
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title span { font-size: 9px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-details { gap: 4px 11px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-details dt { font-size: 8px; }
.student-workspace-page[class*="workspace-tab-"] .workspace-details dd { font-size: 11px; line-height: 1.3; }
.student-workspace-page[class*="workspace-tab-"] .workspace-empty {
  min-height: 0;
  padding: 9px 11px;
  font-size: 10px;
}
.student-workspace-page[class*="workspace-tab-"] details > summary { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.student-workspace-page[class*="workspace-tab-"] .button.small { min-height: 30px; padding: 5px 9px; }

/* Student Information: remove tall empty-card feeling and use balanced
   two-column facts rather than a narrow list floating in white space. */
.workspace-tab-student-information .workspace-information-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.workspace-tab-student-information .workspace-information-view > .workspace-section-heading,
.workspace-tab-student-information .workspace-information-view > .information-progress-card,
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid,
.workspace-tab-student-information .workspace-information-view > .workspace-two-column { grid-column: 1 / -1; }
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-self: start;
}
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid article {
  align-content: center;
  min-height: 62px;
  padding: 9px 11px;
}
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid small { font-size: 8px; }
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid strong { font-size: 15px; }
.workspace-tab-student-information .workspace-information-view > .workspace-two-column {
  align-items: start;
  gap: 8px;
}
.workspace-tab-student-information .workspace-information-view > .workspace-two-column > .workspace-card {
  min-height: 0;
  align-self: start;
  margin: 0;
}
.workspace-tab-student-information .workspace-information-view > .workspace-card { align-self: start; margin: 0; }
.workspace-tab-student-information .workspace-information-view .workspace-details { grid-template-columns: 125px minmax(0, 1fr); }
.workspace-tab-student-information .workspace-information-view .clean-card-heading,
.workspace-tab-student-information .workspace-information-view .workspace-card-title { margin-bottom: 6px; padding-bottom: 6px; }

/* Documents: compact review cards, keep review controls grouped on one row,
   and distinguish actionable/corrected/approved records by their status rail. */
.workspace-tab-documents .case-document-list { gap: 7px; }
.workspace-tab-documents .case-document-card {
  padding: 10px 11px;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30, 51, 81, .035);
}
.workspace-tab-documents .case-document-heading { margin-bottom: 6px; }
.workspace-tab-documents .case-document-heading h3 { margin: 2px 0; font-size: 12px; }
.workspace-tab-documents .case-document-heading span,
.workspace-tab-documents .case-document-card p { font-size: 9px; line-height: 1.3; }
.workspace-tab-documents .case-document-files { gap: 5px; margin-top: 5px; }
.workspace-tab-documents .case-document-files article { padding: 6px 8px; border-radius: 7px; }
.workspace-tab-documents .document-review-form,
.workspace-tab-documents .checklist-review-form { gap: 5px; margin-top: 6px; }
.workspace-tab-documents .document-review-form input,
.workspace-tab-documents .document-review-form select,
.workspace-tab-documents .checklist-review-form input,
.workspace-tab-documents .checklist-review-form select { min-height: 31px; padding: 5px 7px; font-size: 9px; }
.workspace-tab-documents .document-review-form button,
.workspace-tab-documents .checklist-review-form button { min-height: 30px; padding: 5px 8px; font-size: 9px; }
.workspace-tab-documents .checklist-requirement-card.status-approved { border-left: 4px solid var(--vd-success); background: #f6fcf8; }
.workspace-tab-documents .checklist-requirement-card.status-correction-required,
.workspace-tab-documents .checklist-requirement-card.status-rejected { border-left: 4px solid var(--vd-danger); background: #fff7f7; }
.workspace-tab-documents .checklist-requirement-card.status-submitted,
.workspace-tab-documents .checklist-requirement-card.status-under-review { border-left: 4px solid var(--vd-warning); background: #fffaf0; }

/* Admission: retain four clear business sections while reducing tall gaps. */
.workspace-tab-admission-application .case-health-banner { gap: 6px; margin-bottom: 8px; }
.workspace-tab-admission-application .case-health-banner > div { min-height: 50px; padding: 8px 10px; border-radius: 8px; }
.workspace-tab-admission-application .case-health-banner small { font-size: 7px; }
.workspace-tab-admission-application .case-health-banner strong { font-size: 10px; }
.workspace-tab-admission-application .workspace-card { border-left: 3px solid var(--vd-primary); }
.workspace-tab-admission-application .workspace-card:nth-of-type(2) { border-left-color: var(--vd-success); }
.workspace-tab-admission-application .workspace-card:nth-of-type(3) { border-left-color: var(--vd-warning); }
.workspace-tab-admission-application .workspace-document-buttons { gap: 5px; margin: 5px 0; }
.workspace-tab-admission-application .workspace-document-buttons a { min-height: 30px; padding: 5px 9px; font-size: 9px; box-shadow: none; }
.workspace-tab-admission-application .table-wrap { margin: 5px 0; }
.workspace-tab-admission-application .table-wrap th,
.workspace-tab-admission-application .table-wrap td { padding: 5px 6px; font-size: 8px; }

/* Tasks & Conversation: make creation controls compact and avoid oversized
   empty text areas while preserving comfortable message composition. */
.workspace-tab-case-hub .workspace-task-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .75fr) minmax(170px, .9fr) auto;
  gap: 7px;
  align-items: end;
}
.workspace-tab-case-hub .workspace-task-form label { margin: 0; font-size: 9px; }
.workspace-tab-case-hub .workspace-task-form input,
.workspace-tab-case-hub .workspace-task-form select { min-height: 34px; padding: 6px 8px; }
.workspace-tab-case-hub .workspace-task-form textarea { min-height: 54px; padding: 8px; }
.workspace-tab-case-hub .workspace-task-list { gap: 5px; margin-top: 7px; }
.workspace-tab-case-hub .workspace-task-item { padding: 7px 9px; border-radius: 8px; }
.workspace-tab-case-hub .case-message-thread { max-height: 440px; gap: 7px; padding: 8px; }
.workspace-tab-case-hub .case-message { padding: 8px 10px; border-radius: 9px; }

/* Student Portal: reduce control-card height, make workflow progress and
   account blocks easy to scan, and keep visa-file items dense. */
.workspace-tab-portal .workspace-portal-view { gap: 8px; }
.workspace-tab-portal .portal-control-card { padding: 11px 13px; margin-bottom: 7px; }
.workspace-tab-portal .portal-control-progress { border-left: 4px solid #0f9b8e; }
.workspace-tab-portal .portal-control-payment { border-left: 4px solid var(--vd-primary); }
.workspace-tab-portal .portal-control-login { border-left: 4px solid #6b59b8; }
.workspace-tab-portal .portal-control-agreement { border-left: 4px solid var(--vd-success); }
.workspace-tab-portal .portal-control-visa { border-left: 4px solid var(--vd-warning); }
.workspace-tab-portal .portal-control-card .form-grid { gap: 6px; }
.workspace-tab-portal .portal-control-card input,
.workspace-tab-portal .portal-control-card select { min-height: 32px; padding: 5px 7px; }
.workspace-tab-portal .visa-file-document-card { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; }
.workspace-tab-portal .visa-file-document-card h3 { font-size: 11px; }

/* Case Management: compact the many operational sections and give each a
   visible domain rail so the long page remains scannable. */
.workspace-tab-case-management > .workspace-card { padding: 10px 12px; border-left: 3px solid #8a5a2b; }
.workspace-tab-case-management > .workspace-card:nth-of-type(3n+2) { border-left-color: #3157c8; }
.workspace-tab-case-management > .workspace-card:nth-of-type(3n) { border-left-color: #198754; }
.workspace-tab-case-management .case-mgmt-item { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; }
.workspace-tab-case-management .case-mgmt-item-header { margin-bottom: 2px; }
.workspace-tab-case-management .case-mgmt-item-header strong { font-size: 11px; }
.workspace-tab-case-management .case-mgmt-item-meta,
.workspace-tab-case-management .case-mgmt-item-reason,
.workspace-tab-case-management .case-mgmt-item-response { margin-bottom: 2px; font-size: 9px; line-height: 1.35; }
.workspace-tab-case-management .case-mgmt-subheading { margin: 9px 0 5px; padding-top: 8px; font-size: 9px; }
.workspace-tab-case-management .form-grid { gap: 6px; }
.workspace-tab-case-management .form-grid input,
.workspace-tab-case-management .form-grid select,
.workspace-tab-case-management .form-grid textarea { min-height: 31px; padding: 5px 7px; font-size: 9px; }

@media (max-width: 900px) {
  .workspace-tab-student-information .workspace-information-view { grid-template-columns: 1fr; }
  .workspace-tab-student-information .workspace-information-view > * { grid-column: 1; }
  .workspace-tab-case-hub .workspace-task-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .workspace-tab-student-information .workspace-information-view > .case-health-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-tab-case-hub .workspace-task-form { grid-template-columns: 1fr; }
  .student-workspace-page[class*="workspace-tab-"] .workspace-card { padding: 10px; }
}

/* Overview document checklist refinement (2026-08-20): Pending is a
   mild attention state, while uploaded files expose an unmistakable
   text-labelled Preview action. Placed last to override older link color. */
.student-workspace-page .overview-check-item.status-pending {
  border-color: #f0d9dc;
  border-left-color: #cf6670;
  background: #fff6f7;
}
.student-workspace-page .overview-check-item.status-pending .overview-check-actions strong {
  background: #f8e2e5;
  color: #9a4550;
}
.student-workspace-page .overview-check-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--consultancy-accent, var(--vd-primary));
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}
.student-workspace-page .overview-check-actions a:hover,
.student-workspace-page .overview-check-actions a:focus-visible {
  background: var(--vd-primary-dark, #24439d);
  color: #fff;
}

/* Student Information audit display: full submitted record details and
   explicit yes/no declarations remain compact and readable for staff. */
.workspace-tab-student-information .workspace-record-details {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(110px, 1fr);
  gap: 3px 9px;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid #e4e9f1;
}
.workspace-tab-student-information .workspace-record-details dt {
  color: #77859a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.workspace-tab-student-information .workspace-record-details dd {
  margin: 0;
  color: #2b405c;
  font-size: 10px;
  font-weight: 680;
  overflow-wrap: anywhere;
}
.workspace-tab-student-information .workspace-employment-record > strong {
  color: #253b58;
  font-size: 12px;
}
.workspace-tab-student-information .workspace-declaration-status {
  margin-bottom: 7px;
  padding: 8px 10px;
  border: 1px solid #d8eee3;
  border-left: 4px solid #198754;
  border-radius: 8px;
  background: #f2faf6;
  color: #286548;
  font-size: 10px;
  line-height: 1.4;
}
.workspace-tab-student-information .workspace-declaration-status.warning {
  border-color: #f0dfb8;
  border-left-color: #cf881b;
  background: #fff9ec;
  color: #80540f;
}
@media (max-width: 620px) {
  .workspace-tab-student-information .workspace-record-details { grid-template-columns: 1fr; gap: 1px; }
  .workspace-tab-student-information .workspace-record-details dd { margin-bottom: 5px; }
}

/* Professional compact typography (2026-08-20)
   Keep the denser card layout, but restore a readable application-scale type
   system. No operational text should depend on the former 7-10px sizing. */
.student-workspace-page,
.portal-clean-body {
  font-size: 14px;
}

.student-workspace-page .case-health-grid small,
.student-workspace-page .snapshot-grid small,
.student-workspace-page .case-next-action > span small,
.student-workspace-page[class*="workspace-tab-"] .workspace-details dt,
.workspace-tab-student-information .workspace-information-view > .case-health-mini-grid small,
.workspace-tab-admission-application .case-health-banner small,
.workspace-tab-student-information .workspace-record-details dt {
  font-size: 10.5px;
  line-height: 1.35;
}

.student-workspace-page .case-health-stage,
.student-workspace-page .case-next-action > span,
.student-workspace-page .case-next-action em,
.student-workspace-page .snapshot-heading a,
.student-workspace-page .snapshot-alert,
.student-workspace-page .snapshot-ready,
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title a,
.student-workspace-page[class*="workspace-tab-"] .workspace-card-title span,
.student-workspace-page[class*="workspace-tab-"] .workspace-empty,
.student-workspace-page[class*="workspace-tab-"] details > summary,
.workspace-tab-documents .case-document-heading span,
.workspace-tab-documents .case-document-card p,
.workspace-tab-case-hub .workspace-task-form label,
.workspace-tab-case-management .case-mgmt-item-meta,
.workspace-tab-case-management .case-mgmt-subheading {
  font-size: 11.5px;
  line-height: 1.4;
}

.student-workspace-page[class*="workspace-tab-"] .workspace-section-heading p,
.student-workspace-page[class*="workspace-tab-"] .workspace-details dd,
.workspace-tab-documents .case-document-heading h3,
.workspace-tab-student-information .workspace-record-details dd,
.workspace-tab-student-information .workspace-declaration-status,
.workspace-tab-case-management .case-mgmt-item-reason,
.workspace-tab-case-management .case-mgmt-item-response,
.workspace-tab-case-management .case-mgmt-item-header strong,
.workspace-tab-portal .visa-file-document-card h3 {
  font-size: 13px;
  line-height: 1.45;
}

.student-workspace-page[class*="workspace-tab-"] .workspace-card-title h2,
.workspace-tab-student-information .workspace-employment-record > strong {
  font-size: 15px;
}

.workspace-tab-documents .document-review-form input,
.workspace-tab-documents .document-review-form select,
.workspace-tab-documents .checklist-review-form input,
.workspace-tab-documents .checklist-review-form select,
.workspace-tab-documents .document-review-form button,
.workspace-tab-documents .checklist-review-form button,
.workspace-tab-admission-application .workspace-document-buttons a,
.workspace-tab-admission-application .table-wrap th,
.workspace-tab-admission-application .table-wrap td,
.workspace-tab-case-management .form-grid input,
.workspace-tab-case-management .form-grid select,
.workspace-tab-case-management .form-grid textarea {
  font-size: 12px;
}

.portal-clean-body .portal-status-overview span,
.portal-clean-body .portal-finance-summary span,
.portal-clean-body .portal-section-kicker,
.portal-clean-body .portal-state-pill,
.portal-clean-body .portal-documents-card .clean-card-heading b {
  font-size: 11px;
  line-height: 1.35;
}

.portal-clean-body small,
.portal-clean-body .portal-status-overview small,
.portal-clean-body .portal-subsection-heading > p,
.portal-clean-body .portal-document-meta,
.portal-clean-body label {
  font-size: 12px;
  line-height: 1.45;
}

.portal-clean-body input,
.portal-clean-body select,
.portal-clean-body textarea,
.portal-clean-body button,
.portal-clean-body .button,
.portal-clean-body table th,
.portal-clean-body table td,
.student-workspace-page input,
.student-workspace-page select,
.student-workspace-page textarea,
.student-workspace-page button,
.student-workspace-page .button {
  font-size: 13px;
}

/* Student Information inline responses (2026-08-21) */
.workspace-tab-student-information .student-record-source {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #3157c8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.workspace-tab-student-information .unified-record-grid > article,
.workspace-tab-student-information .unified-record-list > article {
  border: 1px solid #dce4ef;
  border-left: 3px solid #6f8ed8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35, 57, 91, .045);
}

.workspace-tab-student-information .student-record-source {
  margin-bottom: 5px;
  color: #5472b5;
  font-size: 9.5px;
}

.workspace-tab-student-information .student-record-reference {
  display: block;
  margin-top: 5px;
  color: #5d6d83;
}

.workspace-tab-student-information .workspace-declaration-status.response-inline {
  margin: 0 0 8px;
  padding: 7px 9px;
  border-left: 3px solid #3157c8;
  background: #f3f7ff;
  color: #324966;
}

.workspace-tab-student-information .workspace-declaration-status.success::before {
  margin-right: 6px;
  color: #198754;
  font-weight: 900;
  content: "✓";
}

.workspace-tab-student-information .workspace-declaration-status.warning::before {
  margin-right: 6px;
  color: #b76f08;
  font-weight: 900;
  content: "!";
}

/* Student Pipeline compact operational view (2026-08-21) */
.compact-pipeline-view > .page-heading {
  margin-bottom: 10px;
}
.compact-pipeline-view > .page-heading h1 { font-size: 24px; }
.compact-pipeline-view > .page-heading p {
  max-width: 760px;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
}

.compact-pipeline-view .intake-switcher {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 9px;
  padding: 9px 12px;
}
.compact-pipeline-view .intake-switcher select {
  min-width: 190px;
  padding: 6px 8px;
}

.compact-pipeline-view .stats {
  gap: 7px;
  margin-bottom: 9px;
}
.compact-pipeline-view .stat {
  min-height: 58px;
  padding: 8px 10px;
}
.compact-pipeline-view .stat strong { font-size: 20px; }
.compact-pipeline-view .stat span { font-size: 11.5px; }

.compact-pipeline-view .professional-filter-grid {
  grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(130px, 1fr)) auto;
  gap: 7px;
  margin-bottom: 10px;
  padding: 10px 12px;
}
.compact-pipeline-view .professional-filter-grid label {
  gap: 3px;
  margin: 0;
  font-size: 11.5px;
}
.compact-pipeline-view .professional-filter-grid input,
.compact-pipeline-view .professional-filter-grid select,
.compact-pipeline-view .professional-filter-grid .button {
  min-height: 33px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.compact-pipeline-view .pipeline-board {
  grid-auto-columns: 238px;
  gap: 8px;
  padding: 1px 1px 10px;
  margin-bottom: 8px;
}
.compact-pipeline-view .pipeline-column {
  min-height: 360px;
  border-radius: 10px;
}
.compact-pipeline-view .pipeline-heading {
  padding: 8px 9px;
}
.compact-pipeline-view .pipeline-heading strong {
  display: block;
  max-width: 175px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-pipeline-view .pipeline-heading small { font-size: 10.5px; }
.compact-pipeline-view .pipeline-heading span {
  min-width: 21px;
  padding: 2px 6px;
  font-size: 11px;
}
.compact-pipeline-view .pipeline-cards {
  gap: 6px;
  padding: 6px;
}

.compact-pipeline-view .student-pipeline-card {
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(20, 32, 60, .045);
}
.compact-pipeline-view .student-card-top > a {
  gap: 1px;
  margin-bottom: 0;
}
.compact-pipeline-view .student-card-top > a strong {
  display: block;
  max-width: 112px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-pipeline-view .student-card-top > a small { font-size: 10.5px; }
.compact-pipeline-view .pipeline-avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.compact-pipeline-view .quick-assign-select {
  max-width: 76px;
  padding: 2px 3px;
  font-size: 10.5px;
}
.compact-pipeline-view .pipeline-card-source {
  margin-top: 5px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-pipeline-view .pipeline-card-value {
  margin-top: 1px;
  font-size: 10.5px;
}
.compact-pipeline-view .pipeline-card-tags {
  gap: 3px;
  margin-top: 5px;
}
.compact-pipeline-view .pipeline-card-tags span {
  padding: 2px 5px;
  font-size: 9.5px;
}
.compact-pipeline-view .pipeline-progress {
  height: 4px;
  margin: 6px 0;
}
.compact-pipeline-view .pipeline-card-metrics {
  gap: 4px;
  margin: 4px 0;
}
.compact-pipeline-view .pipeline-card-metrics span {
  padding: 2px 5px;
  font-size: 10px;
}
.compact-pipeline-view .pipeline-quick-actions {
  gap: 4px;
  margin: 5px 0;
}
.compact-pipeline-view .quick-icon {
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 5px;
}
.compact-pipeline-view .quick-icon svg {
  width: 12px;
  height: 12px;
}
.compact-pipeline-view .pipeline-card-footer {
  margin-top: 5px;
  padding-top: 5px;
}
.compact-pipeline-view .pipeline-card-footer select {
  width: 100%;
  padding: 4px 5px;
  font-size: 11px;
}
.compact-pipeline-view .pipeline-empty {
  padding: 18px 6px;
  font-size: 11px;
}
.compact-pipeline-view .pipeline-help {
  margin-top: 5px;
  padding: 7px 10px;
  font-size: 11.5px;
}

@media (max-width: 1100px) {
  .compact-pipeline-view .professional-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .compact-pipeline-view .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-pipeline-view .professional-filter-grid { grid-template-columns: 1fr; }
  .compact-pipeline-view .pipeline-board { grid-auto-columns: 220px; }
}