/* ═══════════════════════════════════════════════════════
   PSDM Student Manager — Components
═══════════════════════════════════════════════════════ */

/* ─── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: .1px;
  position: relative;
  overflow: hidden;
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(37,99,235,.3);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-h);
  border-color: var(--primary-h);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 1px 2px rgba(5,150,105,.3);
}
.btn-success:hover:not(:disabled) {
  background: var(--green-d);
  box-shadow: 0 4px 12px rgba(5,150,105,.3);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(.9);
  box-shadow: 0 4px 12px rgba(220,38,38,.3);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg3);
  color: var(--text2);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg4);
  border-color: var(--border2);
  color: var(--text);
}

.btn-ghost {
  background: transparent;
  color: var(--text3);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg3);
  color: var(--text2);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover:not(:disabled) {
  background: var(--primary-l);
  box-shadow: 0 2px 8px rgba(37,99,235,.15);
}

.btn-sm  { padding: 6px 13px; font-size: 12.5px; }
.btn-xs  { padding: 4px 9px;  font-size: 12px; border-radius: var(--radius-xs); }
.btn-lg  { padding: 12px 24px; font-size: 15px; border-radius: var(--radius); }
.w-full  { width: 100%; }

/* ─── Forms ────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text2);
  letter-spacing: .1px;
}
.form-group .req { color: var(--red); margin-left: 1px; }

.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--text);
  font-size: 14px;
  transition: all var(--transition);
  line-height: 1.5;
}
.form-control:hover { border-color: var(--border2); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: var(--bg2);
}
.form-control::placeholder { color: var(--text4); }
.form-control.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

textarea.form-control { min-height: 90px; resize: vertical; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}

.form-hint { font-size: 12px; color: var(--text3); margin-top: 5px; line-height: 1.4; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  margin-bottom: 14px;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.form-section-title:hover { color: var(--text2); }
.form-section-body.collapsed { display: none; }

.form-control-sm {
  padding: 5px 9px;
  font-size: 12.5px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg2);
  color: var(--text);
  font-family: inherit;
  transition: all var(--transition);
}
.form-control-sm:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,.1);
}

/* ─── Tables ────────────────────────────────────────────── */
.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tbl thead { background: var(--bg3); }
.tbl th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text2);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr {
  transition: background var(--transition);
}
.tbl tbody tr:hover td {
  background: var(--bg3);
  color: var(--text);
}
.tbl .actions { white-space: nowrap; text-align: right; }

/* ─── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .2px;
}
.badge-blue   { background: var(--primary-l); color: var(--primary); }
.badge-green  { background: var(--green-l);   color: var(--green-d); }
.badge-red    { background: var(--red-l);     color: var(--red); }
.badge-yellow { background: var(--yellow-l);  color: var(--yellow); }
.badge-orange { background: var(--orange-l);  color: var(--orange); }
.badge-purple { background: var(--purple-l);  color: var(--purple); }
.badge-gray   { background: var(--bg4);       color: var(--text3); }

/* ─── Modals ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--bg2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(-16px) scale(.98);
  transition: transform .2s var(--ease);
}
.modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}
.modal-lg  { max-width: 720px; }
.modal-xl  { max-width: 960px; }

.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
  color: var(--text);
}
.modal-close {
  background: var(--bg3);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text3);
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: var(--red-l);
  color: var(--red);
}
.modal-body   { padding: 22px; }
.modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg3);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ─── Toasts ────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  padding: 13px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  animation: toastIn .25s var(--ease);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  line-height: 1.4;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red);   }
.toast.warning { border-left-color: var(--yellow); }
@keyframes toastIn {
  from { transform: translateX(calc(100% + 24px)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateX(calc(100% + 24px)); opacity: 0; }
}
.toast.removing { animation: toastOut .3s var(--ease) forwards; }

/* ─── Dropdowns ─────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  min-width: 190px;
  z-index: 300;
  display: none;
  overflow: hidden;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  padding: 10px 15px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  transition: background var(--transition);
  font-weight: 500;
}
.dropdown-item:hover { background: var(--bg3); }
.dropdown-item.danger { color: var(--red); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Filter / Search Bar ───────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
  background: var(--bg2);
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.search-input {
  flex: 1;
  min-width: 220px;
  padding: 9px 13px 9px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  color: var(--text);
  font-size: 13.5px;
  transition: all var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.search-input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--bg2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.search-input::placeholder { color: var(--text4); }

.filter-select {
  padding: 9px 30px 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  color: var(--text);
  font-size: 13.5px;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  max-width: 100%;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--bg2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ─── Tabs ──────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text3);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.tab-btn:hover { color: var(--text2); background: var(--bg3); }
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-l);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Empty States ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--text3);
}
.empty-icon {
  font-size: 52px;
  margin-bottom: 14px;
  opacity: .7;
  display: block;
}
.empty-state h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text2);
}
.empty-state p { font-size: 14px; line-height: 1.6; }

/* ─── Loading ────────────────────────────────────────────── */
.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  gap: 12px;
  color: var(--text3);
  font-size: 13.5px;
}

/* ─── Reminders ─────────────────────────────────────────── */
.reminder-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: all var(--transition);
}
.reminder-card:hover { box-shadow: var(--shadow-md); }
.reminder-card.overdue {
  border-left: 4px solid var(--red);
  background: linear-gradient(to right, rgba(220,38,38,.03), var(--bg2));
}
.reminder-card.today {
  border-left: 4px solid var(--yellow);
  background: linear-gradient(to right, rgba(217,119,6,.03), var(--bg2));
}
.reminder-card.upcoming {
  border-left: 4px solid var(--green);
}
.reminder-info h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--text);
}
.reminder-info p { font-size: 12.5px; color: var(--text3); }
.reminder-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.reminder-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text4);
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reminder-badge {
  background: var(--red);
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}

/* ─── Separator ─────────────────────────────────────────── */
.separator { height: 1px; background: var(--border); margin: 16px 0; }

/* ─── Data callouts ─────────────────────────────────────── */
.overdue-text  { color: var(--red);    font-weight: 600; }
.balance-text  { color: var(--orange); font-weight: 600; }
.success-text  { color: var(--green);  font-weight: 600; }

/* ─── Info boxes ────────────────────────────────────────── */
.alert {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  font-weight: 500;
}
.alert-warning {
  background: var(--yellow-l);
  border: 1px solid rgba(217,119,6,.2);
  color: #92400e;
}
.alert-error {
  background: var(--red-l);
  border: 1px solid rgba(220,38,38,.2);
  color: #991b1b;
}
.alert-success {
  background: var(--green-l);
  border: 1px solid rgba(5,150,105,.2);
  color: #065f46;
}
.alert-info {
  background: var(--primary-l);
  border: 1px solid rgba(37,99,235,.2);
  color: #1e40af;
}

/* ─── Utility ────────────────────────────────────────────── */
.text-muted    { color: var(--text3); }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.fw-bold       { font-weight: 700; }
.fw-semibold   { font-weight: 600; }
.d-block       { display: block; }
.d-flex        { display: flex; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }

.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 28px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 28px; }

.gap-1 { gap: 6px; }
.gap-2 { gap: 12px; }
.gap-3 { gap: 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

.fs-sm { font-size: 12.5px; }
.fs-xs { font-size: 11.5px; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pagination .text-muted {
  font-size: 12.5px;
  margin-left: 8px;
}

/* ─── Template Designer ─────────────────────────────────────────────────────── */
.tpl-field {
  position: absolute;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  line-height: 1.3;
}
.tpl-field:hover {
  outline: 2px solid var(--primary) !important;
}
.tpl-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 2px;
  cursor: se-resize;
  z-index: 10;
}
.tpl-var-item:active {
  transform: scale(.97);
}

/* ─── Enquiry Hot/Cold temperature ──────────────────────────────────────── */
.temp-pill {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.temp-pill:hover { border-color: var(--text4); }
.temp-pill-hot.active {
  background: #fef2f2; border-color: #fca5a5; color: #b91c1c;
}
.temp-pill-cold.active {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.temp-pill.active:not(.temp-pill-hot):not(.temp-pill-cold) {
  background: var(--bg4); border-color: var(--border2); color: var(--text2);
}
.temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.temp-badge-hot { background: #fef2f2; color: #b91c1c; }
.temp-badge-cold { background: #eff6ff; color: #1d4ed8; }

/* ─── Kiosk student panel ───────────────────────────────────────────────── */
.kiosk-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.kiosk-header-title { display: flex; align-items: center; gap: 12px; }
.kiosk-header-badge {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(37,99,235,.3);
}
.kiosk-header-title h2,
#kiosk-panel .kiosk-header-title h2 {
  font-size: 15px; font-weight: 800; margin: 0; line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
}
.kiosk-header-amp { color: var(--primary); font-weight: 700; }
.kiosk-header-sub {
  font-size: 11.5px; font-weight: 600; color: var(--text4);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 1px;
}

.kiosk-student-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.kiosk-student-header-info { min-width: 0; }
.kiosk-student-meta {
  font-size: 12px; color: var(--text3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kiosk-present-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  background: var(--primary); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-bottom: 16px; transition: all .15s;
}
.kiosk-present-btn:hover { background: var(--primary-h); }
.kiosk-present-btn.marked, .kiosk-present-btn:disabled {
  background: var(--green-l); color: var(--green-d); cursor: default;
}
.kiosk-section { margin-bottom: 16px; }
.kiosk-section-title {
  font-size: 12.5px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px;
}
.kiosk-complete-tag { color: var(--green); text-transform: none; }
.kiosk-item {
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px;
  cursor: pointer; transition: background .15s; margin-bottom: 4px;
}
.kiosk-item:hover { background: var(--bg3); }
.kiosk-item.done {
  opacity: .55; cursor: default; text-decoration: line-through;
}
.kiosk-dropdown {
  font-size: 13.5px;
  padding: 10px 12px;
  cursor: pointer;
}
.kiosk-dropdown:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--bg3);
}
.kiosk-dropdown option:disabled {
  color: var(--text4);
}
.kiosk-final-btn {
  width: 100%; padding: 16px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #f5c542, #d99f1f); color: #402d00;
  font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 14px rgba(217,159,31,.35);
}
.kiosk-final-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,159,31,.45); }
.kiosk-final-btn.disabled {
  background: var(--bg4); color: var(--text4); cursor: not-allowed;
  box-shadow: none; pointer-events: none;
}

.kiosk-upload-progress {
  position: relative;
  width: 100%;
  height: 20px;
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kiosk-upload-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,.35);
  transition: width .15s ease;
}
.kiosk-upload-progress span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* ─── Final Certificate — cinematic celebration ─────────────────────────── */
.kiosk-celebration-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 3vh 3vw;
  overflow: hidden;
  perspective: 1400px;
  /* Opaque base: the vignette above is partly translucent, which let the kiosk
     screen behind (white cards, keypad) show through and read as a stray white
     panel beside the certificate. */
  background: #070b1a;
}
.kc-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,15,35,.75) 0%, rgba(5,8,20,.97) 100%);
  opacity: 0; transition: opacity .9s ease;
}
.kiosk-celebration-overlay.kc-act1 .kc-vignette,
.kiosk-celebration-overlay.kc-act2 .kc-vignette,
.kiosk-celebration-overlay.kc-act3 .kc-vignette,
.kiosk-celebration-overlay.kc-act4 .kc-vignette,
.kiosk-celebration-overlay.kc-act5 .kc-vignette { opacity: 1; }

/* Light rays radiating outward — adds depth behind the glow/certificate */
.kc-rays {
  position: absolute; width: 140vmax; height: 140vmax; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(245,197,66,.10) 0deg 4deg, transparent 4deg 16deg);
  opacity: 0; transition: opacity 1.4s ease;
  animation: kc-rays-spin 18s linear infinite;
}
.kiosk-celebration-overlay.kc-act2 .kc-rays,
.kiosk-celebration-overlay.kc-act3 .kc-rays,
.kiosk-celebration-overlay.kc-act4 .kc-rays,
.kiosk-celebration-overlay.kc-act5 .kc-rays { opacity: 1; }
@keyframes kc-rays-spin { to { transform: rotate(360deg); } }

.kc-glow {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d9 0%, #f5c542 40%, transparent 70%);
  opacity: 0; transform: scale(0.3);
  transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.kiosk-celebration-overlay.kc-act2 .kc-glow {
  opacity: .9; transform: scale(7);
  animation: kc-pulse 2.2s ease-in-out infinite;
}
.kiosk-celebration-overlay.kc-act3 .kc-glow,
.kiosk-celebration-overlay.kc-act4 .kc-glow,
.kiosk-celebration-overlay.kc-act5 .kc-glow { opacity: 0; transform: scale(16); animation: none; transition: opacity .5s ease, transform .7s ease; }

@keyframes kc-pulse {
  0%, 100% { transform: scale(7); }
  50%      { transform: scale(7.8); }
}

/* Bright flash at the turn — the instant before the burst */
.kc-flash {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(circle, rgba(255,251,235,.95) 0%, rgba(255,230,150,.4) 40%, transparent 75%);
  opacity: 0; pointer-events: none;
}
.kiosk-celebration-overlay.kc-flashing .kc-flash {
  animation: kc-flash-burst .5s ease-out forwards;
}
@keyframes kc-flash-burst {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Certificate stage — provides the 3D perspective context for the reveal */
.kc-cert-stage {
  position: relative; z-index: 4;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; width: 100%;
  transform-style: preserve-3d;
}
.kc-certificate {
  position: relative;
  max-width: min(1250px, 96vw);
  max-height: 100%;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 8px rgba(245,197,66,.22), 0 30px 90px rgba(0,0,0,.55);
  opacity: 0;
  transform: perspective(1400px) rotateY(-78deg) rotateX(8deg) scale(.5);
  transition: opacity 1s ease, transform 1.7s cubic-bezier(.22,.9,.24,1.1);
  transform-style: preserve-3d;
}
/* Bound the certificate to the viewport height minus the bottom bar (~140px),
   the gap and the vertical padding (6vh). This guarantees the WHOLE certificate
   is visible and never overflows the window or hides behind the bar, while
   staying as large as the space allows. */
.kc-certificate img { display: block; width: auto; height: auto;
  max-width: min(1250px, 96vw);
  max-height: calc(94vh - 165px);
  object-fit: contain; }
@media (max-width: 760px) {
  /* On narrow screens the bottom bar stacks (taller), so reserve more. */
  .kc-certificate img { max-height: calc(88vh - 240px); }
}

/* Slow-motion 3D reveal — the certificate turns into view like a page opening */
.kiosk-celebration-overlay.kc-act3 .kc-certificate {
  opacity: 1; transform: perspective(1400px) rotateY(0deg) rotateX(0deg) scale(1);
}
/* Gentle continuous 3D "breathing" tilt once settled, giving it life */
.kiosk-celebration-overlay.kc-act4 .kc-certificate,
.kiosk-celebration-overlay.kc-act5 .kc-certificate {
  animation: kc-cert-breathe 5s ease-in-out infinite;
}
@keyframes kc-cert-breathe {
  0%, 100% { transform: perspective(1400px) rotateY(-2.2deg) rotateX(1.2deg) scale(1); }
  50%      { transform: perspective(1400px) rotateY(2.2deg) rotateX(-1.2deg) scale(1.015); }
}
/* Shimmer sweep across the certificate surface — a soft light passing over it.
   It lives on .kc-certificate (which hugs the image and clips overflow), NOT on
   the stage: the stage spans the full overlay width, so a shimmer there showed
   as a big translucent white panel sticking out to the right of the cert. */
.kc-certificate::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  background-size: 250% 250%; background-position: 200% 0;
  opacity: 0; border-radius: 14px; pointer-events: none;
}
.kiosk-celebration-overlay.kc-act4 .kc-certificate::after {
  opacity: 1;
  animation: kc-cert-shimmer 2.6s ease-in-out .2s 1;
}
@keyframes kc-cert-shimmer {
  0%   { background-position: 200% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; opacity: 0; }
}

.kc-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.kc-piece {
  position: absolute; width: 8px; height: 14px;
  transform: translate(-50%,-50%) rotate(0deg);
  animation: kc-burst var(--dur, 1.2s) cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.kc-piece-round { border-radius: 50%; width: 9px; height: 9px; }
@keyframes kc-burst {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(540deg); }
}

.kc-text {
  position: relative; z-index: 4; text-align: center;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: clamp(20px,4vw,52px); flex-wrap: wrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.kc-congrats { text-align: center; }
@media (min-width: 760px) { .kc-congrats { text-align: left; } }
.kiosk-celebration-overlay.kc-act5 .kc-text { opacity: 1; transform: translateY(0); }
.kc-title {
  font-size: 24px; font-weight: 800;
  color: #ffe9a8;
  text-shadow: 0 0 20px rgba(245,197,66,.5); margin-bottom: 6px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kc-title {
    background: linear-gradient(90deg, #ffe9a8 0%, #ffe9a8 40%, #fffbea 50%, #ffe9a8 60%, #ffe9a8 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kc-shimmer 2.4s ease-in-out .3s 2;
  }
}
@keyframes kc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.kc-subtitle { font-size: 14px; color: rgba(255,255,255,.75); }
.kc-close-btn {
  position: absolute; top: 22px; right: 26px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .5s ease, transform .5s ease, background .15s ease;
}
.kc-close-btn:hover { background: rgba(255,255,255,.22); }
.kiosk-celebration-overlay.kc-act5 .kc-close-btn { opacity: 1; transform: translateY(0); }

/* ─── Health & Performance — redesigned ─────────────────────────────────── */
/* ─── Health & Performance — snapshot summary header ────────────────────── */
.health-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.health-snap-stat {
  flex: 1;
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.health-snap-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--bg5) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.health-snap-ring::before {
  content: ''; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--bg2);
}
.health-snap-ring span {
  position: relative; z-index: 1;
  font-size: 12.5px; font-weight: 800; color: var(--text);
}
.health-snap-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.health-snap-value {
  font-size: 17px; font-weight: 800; color: var(--text);
}
.health-snap-value span {
  font-size: 12px; font-weight: 600; color: var(--text4);
}
.health-snap-label {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .3px;
}

.health-course-card {
  background: var(--bg2);
  border-radius: 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.health-course-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.health-course-batch {
  font-size: 12.5px;
  color: var(--text3);
  margin-bottom: 14px;
}
.health-attendance-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--bg3);
  border-radius: 12px;
}
.health-attendance-pct {
  font-size: 26px;
  font-weight: 800;
  min-width: 62px;
  text-align: center;
}
.health-attendance-bar-wrap { flex: 1; }
.health-attendance-bar-bg {
  background: var(--bg5);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
}
.health-attendance-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width .4s ease;
}
.health-attendance-label {
  font-size: 12px;
  color: var(--text3);
  margin-top: 4px;
}
.health-section {
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.health-section:first-of-type { border-top: none; padding-top: 0; }
.health-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.health-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.health-section-count {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--bg4);
  color: var(--text2);
}
.health-section-count.done { background: var(--green-l); color: var(--green-d); }
.health-mini-bar-bg {
  background: var(--bg5);
  border-radius: 6px;
  height: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.health-mini-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--green);
  transition: width .4s ease;
}
.health-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.health-check-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
  background: var(--bg4); color: var(--text4);
}
.health-check-icon.done { background: var(--green); color: #fff; }
.health-check-body { flex: 1; min-width: 0; }
.health-check-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.health-check-desc {
  font-size: 12px;
  color: var(--text3);
  margin-top: 3px;
  line-height: 1.45;
}
.health-check-item:not(.done) .health-check-title { color: var(--text3); font-weight: 500; }
.health-check-time {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 1px;
}
.health-empty-row {
  font-size: 13px;
  color: var(--text4);
  font-style: italic;
  padding: 6px 0;
}
.health-gcert-slots {
  display: flex;
  gap: 10px;
}
.health-gcert-slot {
  flex: 1;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  border: 1.5px dashed var(--border2);
  background: var(--bg3);
}
.health-gcert-slot.filled {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-l);
  display: block;
  text-decoration: none;
  color: inherit;
}
.health-gcert-thumb {
  width: 100%;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  margin-bottom: 6px;
}
.health-gcert-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.health-gcert-thumb .health-doc-pdf { height: 100%; }
.health-gcert-slot-icon { font-size: 18px; margin-bottom: 4px; }
.health-gcert-slot-time { font-size: 10px; color: var(--text3); line-height: 1.3; }
.health-final-card {
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.health-final-card.earned {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border: 1.5px solid #e6c260;
}
.health-final-card.locked {
  background: var(--bg3);
  border: 1.5px dashed var(--border2);
}
.health-final-icon { font-size: 28px; margin-bottom: 4px; }
.health-final-title { font-weight: 700; font-size: 14px; }
.health-final-card.earned .health-final-title { color: #7a5b00; }
.health-final-card.locked .health-final-title { color: var(--text4); }
.health-final-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

.health-doc-gallery {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.health-doc-thumb {
  width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); display: block; flex-shrink: 0;
  transition: transform .15s;
}
.health-doc-thumb:hover { transform: scale(1.05); }
.health-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.health-doc-pdf {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--bg3);
  font-size: 20px; gap: 2px;
}
.health-doc-pdf span {
  font-size: 8px; color: var(--text3); text-align: center; padding: 0 2px;
  line-height: 1.1; word-break: break-word;
}


/* ─── Notes hover-preview ("snap") ──────────────────────────────────────── */
.note-preview-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}
.note-preview-icon {
  font-size: 13px;
  opacity: 0.55;
  cursor: help;
  transition: opacity .15s;
}
.note-preview-wrap:hover .note-preview-icon { opacity: 0.9; }

/* Shared tooltip "portal" — a single element living at document.body level,
   positioned via fixed coordinates calculated in JS (Utils._showNoteTooltip).
   Being a body-level element (not nested inside any table row) means it can
   never be clipped by a scrollable ancestor like .tbl-wrap. */
.note-preview-tooltip-portal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: linear-gradient(165deg, #1e293b, #0d1524);
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  width: max-content;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 48px));
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 20px 48px rgba(0,0,0,.4);
  z-index: 3000;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.2,.9,.3,1.1), visibility .18s;
}
.note-preview-tooltip-portal::-webkit-scrollbar { width: 7px; }
.note-preview-tooltip-portal::-webkit-scrollbar-track { background: transparent; }
.note-preview-tooltip-portal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.note-preview-tooltip-portal::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.note-preview-header {
  display: flex; align-items: center; gap: 6px;
  position: sticky; top: 0;
  padding: 10px 14px 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: #7dabf8;
  background: linear-gradient(180deg, #1e293b 65%, rgba(30,41,59,0));
}
.note-preview-header-icon { font-size: 12px; opacity: .9; }
.note-preview-body {
  display: block;
  padding: 3px 14px 13px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-wrap;
  text-align: left;
  word-break: break-word;
  color: rgba(255,255,255,.9);
}

/* ─── Kiosk search-result course short-code badges ───────────────────────── */
.kiosk-course-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #e0edff; color: #1d4ed8; border-radius: 5px;
  padding: 1px 6px; margin-left: 5px; vertical-align: middle;
  letter-spacing: .2px;
}
.kiosk-course-badge-empty { background: var(--bg4); color: var(--text4); font-weight: 500; }

/* ─── Kiosk idle illustration — genuine 3D achievement-orbit scene ───────── */
.kiosk-idle-anim {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0 4px;
  animation: kia-fadein .6s ease;
}
@keyframes kia-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.kia-stage {
  position: relative;
  width: 100%; max-width: 240px; height: 190px;
  perspective: 900px;
}
.kia-ambient-glow {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px; margin: -85px 0 0 -85px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.28) 0%, rgba(59,130,246,0) 70%);
  animation: kia-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes kia-glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Floating particles — each at a different translateZ, so perspective alone
   makes the "closer" ones read bigger/brighter and "farther" ones smaller —
   genuine depth, not simulated. */
.kia-particle {
  position: absolute; border-radius: 50%;
  transform-style: preserve-3d;
  animation: kia-float 4.5s ease-in-out infinite;
}
.kia-p1 { left: 18%; top: 70%; width: 7px; height: 7px; background: #f5c542; transform: translateZ(30px); animation-delay: 0s; }
.kia-p2 { left: 82%; top: 62%; width: 6px; height: 6px; background: #60a5fa; transform: translateZ(-20px); animation-delay: .6s; }
.kia-p3 { left: 26%; top: 18%; width: 5px; height: 5px; background: #a78bfa; transform: translateZ(10px); animation-delay: 1.2s; }
.kia-p4 { left: 78%; top: 14%; width: 7px; height: 7px; background: #34d399; transform: translateZ(-15px); animation-delay: 1.8s; }
.kia-p5 { left: 6%;  top: 40%; width: 4px; height: 4px; background: #f5c542; transform: translateZ(20px); animation-delay: 2.3s; }
.kia-p6 { left: 92%; top: 38%; width: 4px; height: 4px; background: #60a5fa; transform: translateZ(-10px); animation-delay: 2.9s; }
@keyframes kia-float {
  0%, 100% { transform: translateY(0)    translateZ(var(--z,0)); opacity: .85; }
  50%      { transform: translateY(-16px) translateZ(var(--z,0)); opacity: .35; }
}

.kia-orbit-wrap {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}

/* The ring of badges genuinely orbits in 3D: this parent spins continuously,
   each badge sits at its own rotateY + translateZ "clock position" on the
   ring, so as the ring turns, badges naturally swing to the front (bigger,
   via perspective) and around the back (smaller) — real 3D motion. */
.kia-orbit-ring {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  transform-style: preserve-3d;
  animation: kia-ring-spin 14s linear infinite;
}
@keyframes kia-ring-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.kia-badge {
  position: absolute; left: -19px; top: -19px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 17px;
  transform-style: preserve-3d;
}
.kia-badge span { display: inline-block; animation: kia-badge-counter 14s linear infinite; }
.kia-badge-1 { transform: rotateY(0deg)   translateZ(78px); border: 2px solid #22c55e; }
.kia-badge-2 { transform: rotateY(90deg)  translateZ(78px); border: 2px solid #f5c542; }
.kia-badge-3 { transform: rotateY(180deg) translateZ(78px); border: 2px solid #3b82f6; }
.kia-badge-4 { transform: rotateY(270deg) translateZ(78px); border: 2px solid #a78bfa; }
/* Counter-spin the glyph inside so it stays upright/facing forward the whole
   orbit, like a billboard, instead of turning edge-on with the ring. */
@keyframes kia-badge-counter { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }

/* Central medallion — spins on its own axis independently, like a coin,
   using two faces with backface-visibility so only one shows at a time. */
.kia-medallion {
  position: absolute; left: -36px; top: -36px;
  width: 72px; height: 72px;
  transform-style: preserve-3d;
  animation: kia-medallion-spin 6s ease-in-out infinite;
}
@keyframes kia-medallion-spin {
  0%, 15%  { transform: rotateY(0deg); }
  50%, 65% { transform: rotateY(180deg); }
  100%     { transform: rotateY(360deg); }
}
.kia-medallion-face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  box-shadow: 0 8px 24px rgba(37,99,235,.45), inset 0 2px 6px rgba(255,255,255,.25);
  backface-visibility: hidden;
}
.kia-medallion-back { transform: rotateY(180deg); background: linear-gradient(135deg, #f5c542, #b8860b); }
.kia-medallion-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(147,197,253,.7);
  animation: kia-ring-pulse 3.2s ease-in-out infinite;
}
@keyframes kia-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.08); opacity: .3; }
}

.kia-ground-shadow {
  position: absolute; left: 50%; bottom: 6px;
  width: 90px; height: 14px; margin-left: -45px;
  background: radial-gradient(ellipse, rgba(15,23,42,.22) 0%, transparent 75%);
  animation: kia-shadow-pulse 6s ease-in-out infinite;
}
@keyframes kia-shadow-pulse {
  0%, 15%  { transform: scaleX(1); }
  50%, 65% { transform: scaleX(.82); }
  100%     { transform: scaleX(1); }
}

/* Dynamic performance chart — taller, more pronounced growth with a wave stagger */
.kia-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 34px; margin-top: 4px;
}
.kia-chart-bar {
  width: 12px; border-radius: 4px 4px 0 0;
  transform-box: fill-box; transform-origin: bottom;
  animation: kia-bar-grow 2.2s ease-in-out infinite;
}
.kia-bar1 { height: 14px; background: #93c5fd; animation-delay: 0s;   }
.kia-bar2 { height: 22px; background: #60a5fa; animation-delay: .15s; }
.kia-bar3 { height: 30px; background: #3b82f6; animation-delay: .3s;  }
.kia-bar4 { height: 20px; background: #2563eb; animation-delay: .45s; }
.kia-bar5 { height: 26px; background: #1e40af; animation-delay: .6s;  }
@keyframes kia-bar-grow {
  0%, 100% { transform: scaleY(.6); }
  50%      { transform: scaleY(1); }
}

.kia-caption {
  font-size: 12.5px; font-weight: 600; color: var(--text4);
  margin-top: 6px; text-align: center; font-style: italic;
}

/* ─── Permission Mode ──────────────────────────────────────────────────── */
.pm-faded { opacity: .35; filter: grayscale(60%); }

.pm-x {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; font-weight: 700;
  cursor: pointer; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pm-x:hover { transform: scale(1.15); }

.pm-banner {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  background: #1e293b; color: #f1f5f9;
  padding: 10px 16px; font-size: 13px;
}
.pm-banner-text b { color: #fff; }
.pm-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pm-count {
  background: var(--primary); color: #fff; border-radius: 10px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 700; margin-left: 4px;
}

/* ─── Attendance calendar — compact, professional widget ─────────────────── */
.att-cal-wrap {
  background: var(--bg2); border-radius: 14px; padding: 14px;
  margin-bottom: 16px; max-width: 300px;
  border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.att-cal-toprow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border);
}
.att-cal-toprow label { flex: 1; line-height: 1.3; }
.att-cal-dur-input { width: 64px; padding: 4px 6px; font-size: 12.5px; text-align: center; }
.att-cal-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.att-cal-dow { margin-bottom: 4px; }
.att-cal-dow-cell { font-size: 10px; font-weight: 700; color: var(--text4); text-align: center; }
.att-cal-cell {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 30px; max-height: 30px;
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 11px; background: var(--bg3); cursor: pointer;
  border: 1px solid transparent; transition: transform .1s ease;
}
.att-cal-cell:hover:not(.att-cal-empty):not(.att-cal-future) { transform: scale(1.12); border-color: var(--primary); z-index: 2; }
.att-cal-empty { background: transparent; cursor: default; }
.att-cal-future { opacity: .3; cursor: not-allowed; }
.att-cal-present { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.att-cal-adding {
  background: var(--primary-l, #eff6ff); border: 1.5px dashed var(--primary);
  color: var(--primary); font-weight: 700;
}
.att-cal-removing {
  background: var(--red); border-color: var(--red); color: #fff; font-weight: 700;
  text-decoration: line-through; opacity: .75;
}
.att-cal-legend {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  font-size: 10.5px; color: var(--text3);
}
.att-cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.att-cal-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.att-cal-swatch-present { background: var(--green); }
.att-cal-swatch-adding { background: var(--primary-l, #eff6ff); border: 1.5px dashed var(--primary); }
.att-cal-swatch-removing { background: var(--red); }
.att-cal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.att-cal-footer .btn-primary:disabled { opacity: .5; cursor: default; }

/* ─── Template field picker — grouped categories ──────────────────────── */
.tpl-var-group { margin-bottom: 4px; }
.tpl-var-group-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text3); padding: 10px 2px 5px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.tpl-var-group:first-child .tpl-var-group-title { padding-top: 2px; }

/* ─── Module chooser (Students / Business, post-PIN) ──────────────────── */
/* Deliberately its own background (not .fullscreen-overlay's gradient,
   shared with the PIN screen) — a calm, deep surface with a soft glow
   rather than a loud diagonal gradient, since staff land here multiple
   times a day and a quieter backdrop wears better than a hero banner would. */
#module-chooser-screen.fullscreen-overlay {
  background:
    radial-gradient(ellipse 1100px 700px at 50% -8%, rgba(37,99,235,.28), transparent 62%),
    linear-gradient(180deg, #0a0f1e 0%, #0e1424 55%, #10162a 100%);
}

.chooser-shell { animation: chooserRise .35s cubic-bezier(.4,0,.2,1) both; }
@keyframes chooserRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chooser-shell { animation: none; }
}

.chooser-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: 2px;
}
.chooser-heading {
  font-size: 27px; font-weight: 800; color: #fff; margin: 2px 0 6px;
  letter-spacing: -0.02em; line-height: 1.25;
}
.chooser-heading .chooser-name { color: #93c5fd; }
.chooser-subheading { color: rgba(255,255,255,.52); font-size: 14.5px; }

.chooser-portal-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }

.chooser-portal {
  position: relative;
  width: 264px;
  padding: 28px 24px 24px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.4,0,.2,1), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.chooser-portal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--portal-accent);
}
.chooser-portal::after {
  content: attr(data-glyph);
  position: absolute; right: -14px; bottom: -30px;
  font-size: 108px; opacity: .05; line-height: 1;
  transform: rotate(-6deg); pointer-events: none;
}
.chooser-portal:hover {
  transform: translateY(-5px);
  border-color: var(--portal-accent);
  background: rgba(255,255,255,.065);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.chooser-portal-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--portal-accent-l);
  margin-bottom: 20px;
}
.chooser-portal-label { font-size: 18.5px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.chooser-portal-desc { font-size: 12.8px; color: rgba(255,255,255,.48); line-height: 1.55; margin-bottom: 22px; min-height: 38px; }
.chooser-portal-cta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--portal-accent); }
.chooser-portal-cta .arrow { display: inline-block; transition: transform .18s cubic-bezier(.4,0,.2,1); }
.chooser-portal:hover .chooser-portal-cta .arrow { transform: translateX(4px); }

.chooser-portal-student  { --portal-accent: #d97706; --portal-accent-l: rgba(217,119,6,.16); }
.chooser-portal-business { --portal-accent: #3b82f6; --portal-accent-l: rgba(59,130,246,.16); }

.chooser-footer-hint {
  color: rgba(255,255,255,.32); font-size: 12px; margin-top: 6px;
}

@media (max-width: 560px) {
  .chooser-portal { width: 100%; max-width: 320px; }
}

/* ─── Invoice type selector (GST / Non-GST) ───────────────────────────── */
.inv-type-opt {
  flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  text-align: center; cursor: pointer; transition: all .15s ease;
}
.inv-type-opt.selected { border: 2px solid var(--primary); background: var(--primary-l, #eff6ff); }

/* Compose-page 2-column layout (WhatsApp/Email, both Student and Business
   modules) - all 4 previously used an identical inline style with no
   matching mobile breakpoint, unlike .form-row-2's established pattern.
   Confirmed via direct measurement: content forced the grid to ~475px
   wide on a 375px viewport, since 1fr alone doesn't shrink below a
   column's intrinsic content width. */
.compose-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ─── Celebration → journey link block (appears with the congrats text) ────── */
.kc-journey{display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap}
.kc-journey-qr{background:#fff;padding:10px;border-radius:12px;line-height:0;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.kc-journey-qr img{width:120px;height:120px;display:block;image-rendering:pixelated}
.kc-journey-info{text-align:left}
.kc-journey-label{color:#ffe9a8;font-weight:700;font-size:15px;margin-bottom:8px}
.kc-journey-btn{display:inline-block;background:linear-gradient(135deg,#f5c451,#c9962e);color:#2a1e00;
  font-weight:700;text-decoration:none;padding:10px 18px;border-radius:999px;font-size:14px;
  box-shadow:0 8px 24px rgba(245,196,81,.35);transition:transform .2s ease}
.kc-journey-btn:hover{transform:translateY(-2px)}
.kc-journey-scan{color:rgba(255,255,255,.65);font-size:11.5px;margin-top:8px}
@media (max-width:520px){.kc-journey-info{text-align:center}}

/* ── PDF thumbnails in the app (documents tab, health tab, google-cert slots) ── */
canvas.pdf-thumb { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.doc-thumb, .health-doc-thumb, .health-gcert-thumb { position: relative; overflow: hidden; }
.pdf-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.doc-thumb .pdf-fallback.doc-thumb-badge { position: absolute; }

/* Kiosk celebration — email status line */
.kc-email-note{margin-top:12px;font:600 13px Arial,sans-serif;padding:8px 16px;border-radius:999px;display:inline-block}
.kc-email-note.ok{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.35)}
.kc-email-note.warn{background:rgba(251,191,36,.14);color:#fcd34d;border:1px solid rgba(251,191,36,.35)}

/* ── Health & Performance — assignment / internship cards ──────────────────── */
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px}
.hc-card{position:relative;display:flex;flex-direction:column;min-height:150px;padding:16px;border-radius:16px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--border);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.hc-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(2,8,40,.10);border-color:var(--primary)}
.hc-card.done{border-color:rgba(34,197,94,.4);background:linear-gradient(180deg,rgba(34,197,94,.06),transparent)}
.hc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hc-status{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;
  background:var(--bg4);color:transparent;border:2px solid var(--border)}
.hc-status.done{background:linear-gradient(135deg,#34d399,#059669);border-color:transparent;color:#fff}
.hc-edit{border:none;background:transparent;cursor:pointer;font-size:14px;opacity:.55;padding:4px;border-radius:8px;line-height:1}
.hc-edit:hover{opacity:1;background:var(--bg4)}
.hc-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.35;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-desc{font-size:12.5px;color:var(--text3);line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hc-desc-empty{font-style:italic;opacity:.7}
.hc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11.5px}
.hc-done-time{color:#059669;font-weight:600}
.hc-pending{color:var(--text4);font-weight:600}
.hc-more{color:var(--primary);font-weight:600;opacity:0;transition:opacity .16s ease}
.hc-card:hover .hc-more{opacity:1}
/* milestone detail modal */
.ms-detail-status{font-size:13px;font-weight:600;padding:8px 12px;border-radius:10px;margin-bottom:14px;display:inline-block;
  background:var(--bg4);color:var(--text3)}
.ms-detail-status.done{background:rgba(34,197,94,.12);color:#059669}
.ms-detail-desc{font-size:14px;line-height:1.7;color:var(--text);white-space:pre-wrap;margin-bottom:18px}
.ms-detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.kc-email-note.pending{background:rgba(148,163,184,.16);color:#cbd5e1;border:1px solid rgba(148,163,184,.35)}

/* ── Follow-up trail (Enquiries / Leads) ──────────────────────────────────────
   A compact vertical timeline: a rail with one coloured dot per action, the
   action on one line with its time, and the person underneath. Notes hang off
   the entry as a small chip and reveal on hover. */
.fu-wrap{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.fu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fu-title{font-weight:700;font-size:13px;color:var(--text)}
.fu-timeline{position:relative;max-height:230px;overflow-y:auto;padding-left:4px}
.fu-timeline::before{content:'';position:absolute;left:17px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--border),transparent)}
.fu-item{position:relative;display:flex;gap:12px;padding:7px 0}
.fu-dot{position:relative;z-index:1;flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;background:var(--bg2);
  border:2px solid var(--border)}
.fu-item:first-child .fu-dot{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.fu-dot.fu-call_not_received{border-color:#f59e0b}
.fu-dot.fu-whatsapp_sent{border-color:#25D366}
.fu-dot.fu-email_sent{border-color:#3b82f6}
.fu-dot.fu-added{border-color:#94a3b8}
.fu-body{flex:1;min-width:0}
.fu-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fu-act{font-weight:600;font-size:13.5px;color:var(--text)}
.fu-meta{font-size:11.5px;color:var(--text3);margin-top:1px}
.fu-status-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:rgba(99,102,241,.12);color:var(--primary)}
.fu-empty{font-size:12.5px;color:var(--text3);padding:10px 2px}
.fu-add{display:grid;grid-template-columns:1.1fr 1.6fr 1fr auto;gap:8px;margin-top:12px;align-items:center}
.fu-add .form-control{font-size:13px;padding:7px 10px}
@media (max-width:700px){.fu-add{grid-template-columns:1fr 1fr;}.fu-add .fu-note{grid-column:1/-1}}
/* last-action chip shown in the list */
.fu-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:999px;
  background:var(--bg4);color:var(--text3);cursor:pointer;white-space:nowrap}
.fu-chip:hover{background:var(--bg3);color:var(--text)}
.fu-row-cell{padding:0 14px 14px !important;background:var(--bg3)}
.fu-next{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.fu-next-lbl{font-size:12px;font-weight:600;color:var(--text3)}
.fu-next .fu-date{width:auto;font-size:13px;padding:6px 10px}
.fu-next-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:rgba(245,158,11,.14);color:#b45309}

/* ─── v65: Follow-up trail popup ──────────────────────────────────────────────
   The trail moved out of a cramped inline strip and into its own wide modal.
   Everything about one action reads across a single row — what was done, when
   (date AND clock time), its note, and the status that action left the record
   in — so nothing has to be pieced together from two places. */

/* Sits above the Edit Enquiry / Edit Lead modal it is usually opened from. */
.fu-modal-overlay { z-index: 560; }
.fu-modal { max-width: 1040px; }
.fu-modal .modal-body { padding-top: 14px; }
.fu-modal .modal-footer { gap: 10px; align-items: center; }

.fu-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
}
.fu-modal-bar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fu-modal-bar-lbl { font-size: 12px; font-weight: 700; color: var(--text3); margin: 0; }
.fu-people-select { width: auto; min-width: 180px; font-size: 13px; padding: 6px 10px; }
.fu-count-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--bg4); color: var(--text3); white-space: nowrap;
}

.fu-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fu-table { width: 100%; margin: 0; }
.fu-table th {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text3); background: var(--bg3); white-space: nowrap;
}
.fu-table td { vertical-align: middle; font-size: 13px; }
.fu-tr:hover { background: var(--bg3); }
.fu-empty-cell { text-align: center; color: var(--text3); padding: 26px 12px !important; font-size: 13px; }

.fu-act-dot {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg2); border: 2px solid var(--border);
  font-size: 12px; margin-right: 8px; vertical-align: middle;
}
.fu-act-dot.fu-call_dialed       { border-color: var(--primary); }
.fu-act-dot.fu-call_not_received { border-color: #f59e0b; }
.fu-act-dot.fu-whatsapp_sent     { border-color: #25D366; }
.fu-act-dot.fu-email_sent        { border-color: #3b82f6; }
.fu-act-dot.fu-meeting           { border-color: #10b981; }
.fu-act-dot.fu-added             { border-color: #94a3b8; }

.fu-at-date { font-weight: 600; color: var(--text); white-space: nowrap; }
.fu-at-time { font-size: 11.5px; color: var(--text3); white-space: nowrap; }
.fu-by { font-size: 12px; color: var(--text3); }

.fu-note-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fu-note-empty { color: var(--text3); opacity: .65; font-size: 12px; }
.fu-note-edit-btn { padding: 2px 6px; line-height: 1; }
.fu-note-pending, .fu-note-edited {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px;
}
.fu-note-pending { background: rgba(245,158,11,.16); color: #b45309; }
.fu-note-edited  { background: var(--bg4);  color: var(--text3); }
.fu-note-edit { display: flex; align-items: center; gap: 5px; }
.fu-note-edit .fu-note-input { font-size: 12.5px; padding: 5px 8px; min-width: 130px; }

.fu-compose {
  margin-top: 16px; padding: 14px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
}
.fu-compose-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.fu-compose-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; }
.fu-compose-grid .form-group { margin-bottom: 0; }
.fu-compose-grid label { font-size: 11.5px; }
.fu-lbl-hint { font-weight: 400; color: var(--text3); }
.fu-compose .form-control { font-size: 13px; padding: 7px 10px; }
.fu-compose-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fu-compose-next .fu-date { width: auto; }
.fu-compose-next .fu-time { width: auto; min-width: 118px; }
.fu-next-hint { font-size: 11px; color: var(--text3); }
.fu-readonly-note { margin-top: 14px; font-size: 12.5px; color: var(--text3); }

.fu-dirty-hint { font-size: 12px; color: var(--text3); margin-right: auto; }
.fu-dirty-hint.active { color: #b45309; font-weight: 600; }

/* Compact summary left behind inside the Edit Enquiry / Edit Lead form. */
.fu-inline-summary { display: flex; flex-direction: column; gap: 6px; }
.fu-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.fu-mini-act { font-weight: 600; color: var(--text); }
.fu-mini-at, .fu-mini-by { font-size: 11.5px; color: var(--text3); }
.fu-mini-more { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* Banner above the Enquiries list when the Activity-by filter is on. */
.fu-filter-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.22);
  color: var(--text);
}

/* A date input paired with an optional time input. */
.fu-datetime-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.rem-time-chip {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: rgba(245,158,11,.14); color: #b45309; white-space: nowrap;
}

@media (max-width: 820px) {
  .fu-compose-grid { grid-template-columns: 1fr; }
  .fu-table th:nth-child(5), .fu-table td:nth-child(5) { display: none; }  /* "By" folds away first */
}
@media (max-width: 620px) {
  .fu-table th:nth-child(4), .fu-table td:nth-child(4) { display: none; }  /* then "Status" */
  .fu-datetime-row { grid-template-columns: 1fr; }
  .fu-modal-bar { flex-direction: column; align-items: stretch; }
  .fu-people-select { width: 100%; }
}

/* ─── v65: Permission editor ──────────────────────────────────────────────────
   113 permissions across 22 groups. Rendered flat, re-opening a user told you
   nothing about what they already had — the ticks were lost in the scroll.
   The toolbar, per-group counts and change tags exist to answer one question
   at a glance: what does this person have right now, and what am I about to
   change about it. */

.perm-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
}
.perm-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perm-count { font-size: 12.5px; color: var(--text3); }
.perm-count b { color: var(--text); font-size: 14px; }
.perm-changed { font-size: 12px; color: var(--text3); margin-left: auto; }
.perm-changed.active { color: #b45309; font-weight: 600; }
.perm-search { flex: 1; min-width: 160px; font-size: 13px; padding: 6px 10px; }

.perm-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.perm-tab {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text3); cursor: pointer; white-space: nowrap;
}
.perm-tab:hover { color: var(--text); }
.perm-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.perm-group { margin-bottom: 14px; }
.perm-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.perm-group-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text3);
}
.perm-group-count {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--bg4); color: var(--text3);
}
.perm-group-count.has { background: rgba(99,102,241,.14); color: var(--primary); }
.perm-group-actions { margin-left: auto; display: flex; gap: 2px; }
.perm-group-actions .btn { padding: 2px 8px; font-size: 11px; }

.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.perm-item {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  padding: 6px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; border-left: 3px solid transparent;
}
.perm-item:hover { background: var(--bg3); }
/* A granted permission has to be readable as granted without hunting for a
   3px tick — the tint and the left bar carry it. */
.perm-item.on {
  background: rgba(99,102,241,.07);
  border-color: rgba(99,102,241,.18);
  border-left-color: var(--primary);
}
.perm-item.on .perm-label { font-weight: 600; color: var(--text); }
.perm-item.changed { border-left-color: #f59e0b; background: rgba(245,158,11,.09); }
.perm-label { flex: 1; min-width: 0; }
.perm-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.perm-tag.added   { background: rgba(16,185,129,.16); color: #047857; }
.perm-tag.removed { background: rgba(239,68,68,.14);  color: #b91c1c; }
.perm-empty { font-size: 12.5px; color: var(--text3); padding: 18px 4px; text-align: center; }

@media (max-width: 620px) {
  .perm-grid { grid-template-columns: 1fr; }
  .perm-changed { margin-left: 0; width: 100%; }
}

/* ─── v66: My Day ────────────────────────────────────────────────────────────
   A counsellor's working surface, sitting as a tab inside Enquiries and Leads.
   Summary on top so the day's score is visible on arrival, pending work below
   so the list can be worked down to nothing. */

.md-tabs { margin-bottom: 14px; }

.md-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.md-scope { display: inline-flex; gap: 6px; margin-left: auto; }
.md-chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text3); cursor: pointer; white-space: nowrap;
}
.md-chip:hover { color: var(--text); border-color: var(--border-strong, #cbd5e1); }
.md-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.md-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.md-stat { background: var(--bg3); border-radius: 10px; padding: 10px 12px; }
.md-stat-label { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-stat-num { font-size: 22px; font-weight: 700; color: var(--text); }
.md-stat-total { background: rgba(99,102,241,.10); }
.md-stat-total .md-stat-label, .md-stat-total .md-stat-num { color: var(--primary); }
.md-empty-stat { font-size: 12.5px; color: var(--text3); padding: 10px 0; }

.md-team-wrap { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.md-team { width: 100%; margin: 0; font-size: 13px; }
.md-team th { font-size: 11.5px; color: var(--text3); background: var(--bg3); white-space: nowrap; }
.md-team .md-num { text-align: center; }
.md-team .md-total { font-weight: 700; }
.md-unattributed { font-size: 11.5px; color: var(--text3); padding: 8px 12px; border-top: 1px solid var(--border); }

.md-outcomes { margin-bottom: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.md-outcomes-label { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.md-outcome-row { display: flex; gap: 8px; flex-wrap: wrap; }
.md-outcome {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: var(--bg4); color: var(--text3);
}
.md-outcome-following-up { background: rgba(99,102,241,.12); color: var(--primary); }
.md-outcome-converted    { background: rgba(16,185,129,.14); color: #047857; }
.md-outcome-not-interested { background: rgba(245,158,11,.14); color: #b45309; }

.md-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.md-section-title { font-size: 16px; font-weight: 700; color: var(--text); }
.md-section-count { font-size: 12.5px; color: var(--text3); }
.md-overdue-count { color: #b91c1c; font-weight: 600; }
.md-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.md-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
/* Yesterday's missed call matters more than today's scheduled one — the red
   edge is meant to be noticed before anything else on the row. */
.md-card-late { border-color: rgba(239,68,68,.45); }
.md-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.md-card-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.md-name { font-weight: 700; font-size: 15px; color: var(--text); }
.md-phone { font-size: 13px; }
.md-company { font-size: 12.5px; color: var(--text3); }
.md-due { font-size: 12px; color: var(--text3); white-space: nowrap; }
.md-due-late { color: #b91c1c; font-weight: 600; }
.md-card-last { font-size: 12.5px; color: var(--text3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-card-last b { color: var(--text); font-weight: 600; }
.md-never { color: #b45309; font-weight: 600; }
.md-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.md-done { text-align: center; padding: 34px 16px; }
.md-done-icon { font-size: 30px; margin-bottom: 8px; }
.md-done-title { font-size: 15px; font-weight: 700; color: var(--text); }
.md-done-sub { font-size: 12.5px; color: var(--text3); margin-top: 4px; }

/* Trail popup — the composer note is a real textarea now, since a useful note
   is routinely longer than one line. */
.fu-note-area { min-height: 68px; resize: vertical; font-family: inherit; line-height: 1.45; }
.fu-del-btn { padding: 2px 6px; line-height: 1; margin-left: 6px; }


@media (max-width: 720px) {
  .md-scope { margin-left: 0; width: 100%; }
  .md-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  /* Thumb-sized on a phone — this page is worked standing up with one hand. */
  .md-card-actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 13px; }
  .md-phone { font-size: 14px; }
  .md-chip { min-height: 34px; }
}

/* Any number on My Day that stands for a set of records is openable. */
.md-clickable { cursor: pointer; }
.md-stat.md-clickable:hover { background: var(--bg4); }
.md-outcome.md-clickable:hover { filter: brightness(0.96); }
.md-cell { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.md-cell:hover { color: var(--primary); }
.md-unattributed.md-clickable:hover { color: var(--text); }
.md-drill-sub { font-size: 12px; font-weight: 400; color: var(--text3); margin-left: 6px; }


/* ─── v66: My Day polish ────────────────────────────────────────────────── */

.md-stat {
  border: 1px solid var(--border); background: var(--bg2);
  padding: 12px 14px; transition: border-color .12s ease, background .12s ease;
}
.md-stat.md-clickable:hover { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.04); }
.md-stat-label { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.md-stat-num { line-height: 1.15; letter-spacing: -.02em; }
.md-stat-total { border-color: rgba(99,102,241,.28); background: rgba(99,102,241,.07); }

/* A card is a job to do, so it reads top-down: who, then what happened, then
   what you can do about it. The left edge carries urgency without shouting. */
.md-card { border-left: 3px solid transparent; transition: border-color .12s ease, box-shadow .12s ease; }
.md-card:hover { box-shadow: 0 1px 3px rgba(15,23,42,.07); }
.md-card-late { border-color: var(--border); border-left-color: #ef4444; }
.md-card-top { margin-bottom: 4px; }
.md-name { font-size: 14.5px; }
.md-phone { color: var(--primary); text-decoration: none; }
.md-phone:hover { text-decoration: underline; }
.md-due { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bg4); }
.md-due-late { background: rgba(239,68,68,.12); color: #b91c1c; }
.md-card-last {
  padding: 7px 10px; border-radius: 8px; background: var(--bg3);
  margin-bottom: 10px; font-size: 12px;
}
.md-section-title { letter-spacing: -.01em; }
.md-team th, .md-team td { padding-top: 10px; padding-bottom: 10px; }
.md-team tbody tr:hover { background: var(--bg3); }
.md-range { display: inline-flex; align-items: center; gap: 6px; }
.md-range .form-control { width: auto; font-size: 12.5px; padding: 4px 8px; height: auto; }
.md-range-sep { color: var(--text3); font-size: 12px; }

/* Quick-record buttons — visit and demo are one-click because they are the two
   things people record with nothing else to say about them. */
.fu-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fu-quick-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }
.fu-quick-hint { font-size: 11px; color: var(--text3); }

/* Message buttons sit with the name, on the card and in the drill list alike. */
.md-comms { display: inline-flex; gap: 2px; }
.md-comms .btn { padding: 2px 7px; }
.md-drill-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* "Handled today" — the queue is shared, so it shrinks through other people's
   work as well as your own. Without this line the list just gets shorter with
   no explanation. */
.md-handled {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2);
  color: var(--text3);
}
.md-handled b { color: #047857; font-size: 13.5px; }
.md-handled-more { margin-left: auto; color: #047857; font-weight: 600; }
.md-handled:hover { background: rgba(16,185,129,.13); }
.md-shared { font-size: 12px; font-weight: 400; color: var(--text3); }

/* ─── v67: list density and rhythm ───────────────────────────────────────────
   Rows had grown tall enough that only three records fitted on a screen — a
   name, a stray note icon, an "Added" date and a follow-up block each claiming
   their own line. A list is for scanning; height is the thing that decides
   whether you can. These rules apply to every table in the app, so Students,
   Leads, Payments and the rest tighten up with it. */

.tbl { font-size: 13px; }
.tbl th { padding: 10px 14px; font-size: 11px; letter-spacing: .5px; }
.tbl td { padding: 10px 14px; line-height: 1.35; }
.tbl tbody tr:hover td { background: var(--bg3); }
/* Zebra striping does more for scannability than extra padding does, and costs
   no height at all. */
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg3) 45%, transparent); }
.tbl tbody tr:nth-child(even):hover td { background: var(--bg3); }
.tbl td .badge, .tbl td .status-badge { vertical-align: middle; }

/* Enquiry / lead person cell */
.enq-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.enq-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(99,102,241,.11); color: var(--primary);
  font-size: 11.5px; font-weight: 700;
}
.enq-person-body { min-width: 0; }
.enq-person-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.2; }
.enq-person-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
a.enq-person-name { color: var(--primary); text-decoration: none; }
a.enq-person-name:hover { text-decoration: underline; }
.enq-person-meta { font-size: 11px; color: var(--text3); margin-top: 1px; white-space: nowrap; }
.enq-conv { color: #047857; font-weight: 600; }

/* Follow-up cell — two tight lines, and a name that truncates instead of
   wrapping the row taller. */
.enq-fu-cell { min-width: 250px; }
.enq-fu-stack { display: flex; flex-direction: column; gap: 3px; }
.enq-fu-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.enq-fu-tag {
  flex: 0 0 30px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text3);
}
.enq-fu-tag.is-due { color: #b91c1c; }
.enq-fu-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.enq-fu-act { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.enq-fu-sub {
  font-size: 10.5px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
.enq-fu-none { font-size: 12px; color: var(--text3); opacity: .8; }
.enq-fu-log { margin-top: 5px; padding: 2px 9px; font-size: 11px; }

/* Actions column: icon buttons shouldn't each claim a full button's width. */
.tbl .actions .btn-xs { padding: 3px 8px; }
/* Echoes a native time input's value in 12-hour form — the control itself
   renders in whatever format the OS chose, often 24-hour. */
.time-echo { font-size: 11.5px; font-weight: 600; color: var(--primary); white-space: nowrap; margin-left: 2px; }
.md-search { margin: 4px 0 12px; font-size: 13px; padding: 8px 12px; }
.md-tomorrow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text3);
}
.md-tomorrow b { color: var(--text); font-size: 13.5px; }

/* ─── Overdue nudge ──────────────────────────────────────────────────────────
   Bottom-right, small, and out of the way of the toasts. Deliberately quiet:
   this appears while someone is mid-task, so it has to be noticeable without
   taking the screen. */
.md-nudge { position: fixed; right: 18px; bottom: 18px; z-index: 900; max-width: 330px; }
.md-nudge-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.14);
  animation: mdNudgeIn .22s ease-out;
}
@keyframes mdNudgeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.md-nudge-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.md-nudge-title { font-size: 12px; font-weight: 700; color: #b45309; flex: 1; }
.md-nudge-x {
  border: none; background: transparent; font-size: 17px; line-height: 1;
  color: var(--text3); cursor: pointer; padding: 0 2px;
}
.md-nudge-x:hover { color: var(--text); }
.md-nudge-name { font-size: 14px; font-weight: 700; color: var(--text); }
.md-nudge-name a { font-size: 12.5px; font-weight: 500; }
.md-nudge-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.md-nudge-body { margin-bottom: 10px; }
.md-nudge-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-nudge-more { font-size: 11.5px; color: var(--primary); cursor: pointer; margin-left: auto; }
.md-nudge-more:hover { text-decoration: underline; }

@media (max-width: 620px) {
  /* Above the thumb, not under it, and clear of anything docked at the bottom. */
  .md-nudge { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .md-nudge-actions .btn { flex: 1; min-height: 38px; }
}
/* Flags the field a quick action is waiting on. */
.fu-needs { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

/* Stage markers on a card. Quiet by design — they inform the choice of who to
   call next without overriding the time order the list is built on. */
.md-flag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.md-flag-close { background: rgba(239,68,68,.12); color: #b91c1c; }
.md-flag-cold  { background: rgba(100,116,139,.14); color: var(--text3); }
.md-stage { font-size: 11px; color: var(--text3); margin: -4px 0 9px; }
.md-stat-sub { font-size: 10.5px; color: var(--text3); margin-top: 2px; white-space: nowrap; }
.md-stat-total .md-stat-sub { color: var(--primary); opacity: .8; }
.md-times { font-size: 10.5px; font-weight: 700; color: var(--primary); }
.md-drill-actions { white-space: nowrap; }
.md-drill-name-link:hover { color: var(--primary); text-decoration: underline; }

/* ─── Bulk selection ─────────────────────────────────────────────────────────
   A superadmin's way out of a bad Excel import. Kept visually heavy — this is
   the one action in the app with no way back. */
.enq-cb-col { width: 34px; text-align: center; }
.enq-cb-col input { cursor: pointer; width: 15px; height: 15px; }
.tbl tbody tr.row-selected td { background: rgba(99,102,241,.08) !important; }
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 14px; border-radius: 10px;
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.25);
}
.bulk-count { font-size: 13px; font-weight: 700; color: var(--text); }
.bulk-note { font-size: 11.5px; color: var(--text3); margin-left: auto; }
.btn.bulk-del { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.bulk-del:hover { background: #b91c1c; border-color: #b91c1c; }
@media (max-width: 620px) { .bulk-note { margin-left: 0; width: 100%; } }
/* Delete stays visually quiet until reached for — it sits beside everyday
   buttons and must not invite a stray click. */
.btn-del { color: var(--text3); }
.btn-del:hover { color: #dc2626; background: rgba(239,68,68,.08); }

/* Row action buttons. Adding delete pushed this column past the table's width
   and the last button was clipped off the right edge. Letting them wrap costs
   a little height on narrow screens and keeps every button reachable, which
   matters more — a Convert button you cannot see is a Convert button that does
   not exist. */
.tbl .actions { white-space: normal; }
.row-actions {
  display: flex; gap: 3px; flex-wrap: nowrap;
  justify-content: flex-end; align-items: center;
  margin-left: auto;
}
.row-actions .btn { flex: 0 0 auto; padding: 3px 7px; }

/* Below a comfortable width the Convert label is dropped and the tick carries
   the meaning on its own. Five buttons plus a word do not fit once the sidebar
   and the follow-up column have taken their share, and a button pushed off the
   edge is worse than one without its label. */
@media (max-width: 1550px) {
  .row-actions .btn-word { display: none; }
}
/* An email button with no address behind it. Shown rather than hidden — a row
   that silently loses a button looks broken — but faded, so the state is
   visible before it is clicked. */
.btn-noemail { opacity: .45; }
.btn-noemail:hover { opacity: .75; }

/* ─── Narrow screens: drop the least useful columns rather than scroll ───────
   The enquiry table needs about 1280px for nine columns, so a 1366px laptop
   with a sidebar scrolls sideways — and a horizontally scrolling list is one
   people simply stop using the right-hand half of.
   Course Interest and Source are the first to go: both are usually empty or
   one word, and neither changes what you do next. Branch follows, since it is
   only meaningful when viewing all branches at once. */
@media (max-width: 1550px) {
  #enq-list .tbl th:nth-child(5), #enq-list .tbl td:nth-child(5),   /* Course Interest */
  #enq-list .tbl th:nth-child(6), #enq-list .tbl td:nth-child(6) {  /* Source */
    display: none;
  }
}
@media (max-width: 1300px) {
  #enq-list .tbl th:nth-child(3), #enq-list .tbl td:nth-child(3) { display: none; } /* Branch */
}
/* What archiving has removed from the figures above it. Quiet, but present —
   a balance that disappears from a dashboard with no explanation is the kind
   of thing nobody notices until it matters. */
.dash-archived {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer;
  margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text3);
}
.dash-archived:hover { background: var(--bg4); }
.dash-archived b { color: var(--text); }
.dash-archived-more { margin-left: auto; color: var(--primary); font-weight: 600; }
/* Template card footer: whether it shows on the send page, and delete. Hiding
   and deleting sit together because the difference between them matters — one
   is cosmetic, the other removes a message for good. */
.tpl-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; padding-top:9px; border-top:1px solid var(--border); }
.tpl-show { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3); cursor:pointer; }
.tpl-show input { cursor:pointer; width:14px; height:14px; }
.tpl-builtin { font-size:11px; color:var(--text3); margin-left:auto; }
.tpl-actions .btn { margin-left:auto; }
/* Shown when every template has been hidden. Without it the section is simply
   blank, which reads as broken rather than as a choice someone made. */
.tpl-none { font-size:12.5px; color:var(--text3); padding:14px; background:var(--bg3); border:1px dashed var(--border); border-radius:10px; }
/* Shown only when a stored balance has stopped agreeing with the payments
   behind it. Deliberately louder than the archived note — that one reports a
   choice someone made, this one reports something that should not happen. */
.dash-recon {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer;
  margin: 14px 0 4px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.3);
  color: var(--text3);
}
.dash-recon:hover { background: rgba(239,68,68,.11); }
.dash-recon b { color: #b91c1c; }
.dash-recon-more { margin-left: auto; color: #b91c1c; font-weight: 600; }
/* Which of a client's addresses this email is going to. Shown before sending
   rather than reported afterwards. */
.bem-rcpt { margin-top: 8px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; }
.bem-rcpt-row { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; cursor: pointer; color: var(--text2); }
.bem-rcpt-row input { cursor: pointer; width: 14px; height: 14px; }
/* Extra engagements that can share one invoice. */
.inv-lines { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--bg3); }
.inv-line-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
.inv-line-row + .inv-line-row { border-top: 1px solid var(--border); }
.inv-line-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }
.inv-line-name { flex: 1; font-weight: 600; }
.inv-line-bal { color: var(--text3); font-size: 11.5px; }
.inv-extra-amt { width: 120px; padding: 4px 8px; font-size: 12.5px; }
/* What a pasted template will actually look like once its asterisks are read
   as formatting. The editor is a plain textarea, so without this the effect of
   a star is invisible until the message has already gone out. */
.tpl-preview-label { font-size: 11px; color: var(--text3); margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .04em; }
.tpl-preview {
  font-size: 13px; line-height: 1.6; color: var(--text);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; min-height: 34px;
  max-height: 260px; overflow-y: auto; word-break: break-word;
}
.tpl-preview:empty::before { content: 'Nothing to preview yet'; color: var(--text3); }

/* ─── Marketing campaigns ─────────────────────────────────────────────────── */
.toast-action {
  margin-left: 10px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.16); color: inherit;
}
.toast-action:hover { background: rgba(255,255,255,.28); }

.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.camp-card { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.camp-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.camp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.camp-card-name { font-weight: 700; font-size: 15px; color: var(--text); }
.camp-card-stats { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.camp-stat-n { font-size: 20px; font-weight: 700; color: var(--text); margin-right: 5px; }
.camp-stat-l { font-size: 11.5px; color: var(--text3); }

.camp-setup { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.camp-docs { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); min-height: 40px; }
.camp-doc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; color: var(--text2); }
.camp-preview { margin-top: 14px; }

.camp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.camp-progress { font-size: 12.5px; color: var(--text3); }
.camp-done { font-weight: 700; color: var(--green); }

.camp-tbl .camp-tick { width: 34px; text-align: center; }
.camp-tbl .camp-act  { width: 150px; text-align: right; }
/* Greyed rather than hidden: seeing who has already had it is the point. */
.camp-row-done td { color: var(--text4); background: var(--bg3); }
.camp-row-done td:nth-child(2) { font-weight: 500; }

.camp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.camp-src { display: flex; flex-direction: column; gap: 10px; }
.camp-src-btn { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg2); cursor: pointer; transition: border-color .12s, background .12s; }
.camp-src-btn:hover { border-color: var(--primary); background: var(--primary-l); }
.camp-src-ico { font-size: 24px; }
.camp-src-t { font-weight: 700; font-size: 14px; color: var(--text); }
.camp-src-s { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* A whole number of rows, so the list ends on a row rather than slicing one in
   half and looking broken. */
.camp-picklist { max-height: 348px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.camp-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.camp-pick-row + .camp-pick-row { border-top: 1px solid var(--border); }
.camp-pick-row:hover { background: var(--bg3); }
.camp-pick-n { flex: 1; font-weight: 600; color: var(--text2); }

.camp-lib { border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 260px; overflow-y: auto; }
.camp-lib-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.camp-lib-row + .camp-lib-row { border-top: 1px solid var(--border); }
.camp-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.camp-bulk { display: flex; align-items: center; gap: 10px; min-height: 0; }
.camp-bulk:not(:empty) { padding: 8px 12px; margin-bottom: 10px; border-radius: var(--radius-sm);
  background: var(--primary-l); border: 1px solid var(--primary); }
.camp-tbl .camp-sel { width: 34px; text-align: center; }
.camp-preview-rows { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.camp-prow { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; font-size: 13px; }
.camp-prow + .camp-prow { border-top: 1px solid var(--border); }
.camp-note { margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--yellow-l); border: 1px solid var(--yellow); color: var(--text2); font-size: 12px; line-height: 1.5; }

/* Both actions on a sent row sit on one line — stacked, they made those rows
   twice the height of every other and the table looked like it had faults in
   it. */
.camp-actpair { display: inline-flex; gap: 4px; white-space: nowrap; }
.camp-refresh { text-decoration: none; white-space: nowrap; }
.camp-refresh:hover { color: var(--primary); }
.camp-toolbar { align-items: center; }
.camp-filters { flex: 1; }
.camp-warn { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--red-l); border: 1px solid var(--red); color: var(--text2);
  font-size: 12.5px; line-height: 1.6; }
.camp-warn code { background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 11.5px; color: var(--red); }
.tpl-attach { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg3); }
.tpl-attach-head { display: flex; align-items: center; gap: 8px; font-size: 12px;
  font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.tpl-attach-list { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.tpl-attach-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text2); cursor: pointer; }

/* ─── Enquiry groups ──────────────────────────────────────────────────────── */
.eg-list { border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; }
.eg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.eg-row + .eg-row { border-top: 1px solid var(--border); }
/* Clickable, because seeing a group on a row and wanting only that group is
   the same thought. */
.eg-chip { cursor: pointer; }
.eg-chip:hover { background: var(--primary-l); border-color: var(--primary); color: var(--primary); }
/* Group chips sit on their own line above the action chips, so it reads as a
   second question rather than more of the same one. */
.md-groupbar { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.md-groupbar-label { display: inline-flex; align-items: center; font-size: 12px; color: var(--text3); margin-right: 2px; }