/* VSMS building blocks on top of the Carbon theme (vsms-theme.css) and components (vsms-components.css). */

/* Top bar, menus and search box: see vsms-theme.css */

/* --- Tiles (Carbon tiles: white layer, square, no border) ---------------- */
.vsms-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  margin: 0 0 var(--sp-06);
}
.vsms-tile {
  padding: var(--sp-05);
  background: var(--surface);
  animation: vsms-rise var(--duration-moderate-02) var(--ease-entrance-expressive) both;
}
.vsms-tile:nth-child(2) { animation-delay: 40ms; }
.vsms-tile:nth-child(3) { animation-delay: 80ms; }
.vsms-tile:nth-child(4) { animation-delay: 120ms; }
.vsms-tile:nth-child(n+5) { animation-delay: 160ms; }
.vsms-tile .num { font-size: 2rem; font-weight: 300; line-height: 2.5rem; color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.vsms-tile .label { color: var(--text-2); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.32px; margin-top: 4px; }
a.vsms-tile { display: block; text-decoration: none; transition: background-color var(--duration-fast-02) var(--ease-standard-productive); }
a.vsms-tile:hover { background: var(--surface-3); }
.vsms-tiles.money { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vsms-tiles.money .num { white-space: nowrap; }

/* --- Cards: a titled tile holding a data table --------------------------- */
.vsms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-05); }
.vsms-card { border: none; border-radius: 0; padding: 0; overflow-x: auto; background: var(--surface); }
.vsms-card h2 {
  margin: 0;
  padding: var(--sp-05);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--surface);
  border-bottom: none;
  color: var(--text);
}
.vsms-card table { width: 100%; }
#container .vsms-card td, #container .vsms-card th { padding: 11px 16px; }
.vsms-card td.num, .vsms-card th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vsms-card .vsms-chart { padding: 0 var(--sp-05) var(--sp-05); }
.vsms-chart-card { padding-top: var(--sp-05); margin-bottom: var(--sp-05); }
.vsms-card .vsms-chart-card { margin-bottom: 0; }
.vsms-ok { color: var(--success); }
.vsms-warn { color: var(--danger); font-weight: 600; }
.vsms-muted { color: var(--text-3); }
.vsms-chips { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 767px) {
  .vsms-grid { grid-template-columns: 1fr; }
}

/* --- Charts (Carbon Charts, see vsms-charts.js) --------------------------- */
.vsms-chart { position: relative; min-width: 0; margin: 0; }
.vsms-chart-holder { width: 100%; }
.vsms-chart-holder.skeleton { min-height: var(--chart-height, 300px); }
.vsms-chart noscript, .vsms-chart .vsms-chart-fallback { color: var(--text-3); font-size: 0.75rem; }
/* Use our Plex Sans for chart text (Carbon Charts asks for Plex Sans Condensed, which we don't ship). */
.vsms-chart .cds--chart-holder[data-carbon-theme] {
  --cds-charts-font-family: var(--font-sans);
  --cds-charts-font-family-condensed: var(--font-sans);
  --cds-background: transparent;
  --cds-grid-bg: transparent;
  background: transparent;
}
.vsms-chart .cds--cc--chart-wrapper { background: transparent; }

/* --- Live learner search ------------------------------------------------- */
.vsms-suggest { position: relative; display: inline-block; }
.vsms-suggest-list {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-pop);
  text-align: left;
}
.vsms-suggest-list li { padding: 0; margin: 0; list-style: none; }
.vsms-suggest-list [role="option"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding: 6px 16px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: normal;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--duration-fast-01) var(--ease-standard-productive);
}
.vsms-suggest-list [role="option"].active,
.vsms-suggest-list [role="option"]:hover { background: var(--surface-3); }
.vsms-suggest-list [role="option"].active { box-shadow: inset 3px 0 0 var(--brand); }
.vsms-suggest-name { color: var(--text); font-size: 0.875rem; }
.vsms-suggest-name, .vsms-suggest-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsms-suggest-name mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; }
.vsms-suggest-meta { color: var(--text-3); font-size: 0.75rem; letter-spacing: 0.32px; font-family: var(--font-mono); }
.vsms-suggest-heading {
  padding: 8px 16px 4px !important;
  color: var(--text-3);
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  border-top: 1px solid var(--border);
}
.vsms-suggest-empty { padding: 12px 16px !important; color: var(--text-3); font-size: 0.875rem; }

/* --- Calendar month/year dropdowns --------------------------------------- */
.calendar .vsms-cal-picker {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 0 22px;
}
.calendar .vsms-cal-picker select {
  padding: 2px 4px;
  font-size: 0.8rem;
  font-weight: 600;
  height: auto;
}

@media (max-width: 767px) {
  .vsms-nav-search .vsms-suggest { width: 100%; }
}

/* Keep the learner-list search box full width on tablets/phones once it is
   wrapped for suggestions (Django's responsive CSS sizes #searchbar as a flex item). */
@media (max-width: 1024px) {
  #toolbar form .vsms-suggest { flex: 1 0 auto; display: flex; margin: 0 10px 0 6px; }
  #toolbar form .vsms-suggest #searchbar { flex: 1 1 auto; width: 100%; margin: 0; }
}

/* Django pins the left sidebar to the screen with its own scroll area, one
   screen tall. Because it starts below our header, its last links sat off-screen
   until the main page was scrolled. Let it scroll with the page instead: one scroll for everything. */
#nav-sidebar.sticky {
  position: static;
  max-height: none;
  overflow: visible;
}

/* --- Finance screens ------------------------------------------------------ */
.vsms-actions { display: flex; flex-wrap: wrap; gap: var(--sp-03); margin-bottom: var(--sp-05); align-items: center; }
.vsms-actions form { margin: 0; }
/* Carbon inline notification (low contrast) for in-page callouts */
.vsms-callout {
  padding: 14px 16px;
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  color: var(--text);
  border-radius: 0;
  animation: vsms-slide-in var(--duration-moderate-02) var(--ease-entrance-productive) both;
}
.vsms-callout-warn { border-left-color: var(--warning-icon); background: var(--warning-soft); }
.vsms-inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-03) var(--sp-05); align-items: center; margin-bottom: var(--sp-05); }
.vsms-inline-form label { display: inline-flex; gap: var(--sp-03); align-items: center; color: var(--text-2); font-size: 0.75rem; letter-spacing: 0.32px; }
.vsms-form-row { display: flex; flex-wrap: wrap; gap: var(--sp-03); align-items: center; margin: 6px 0; }
.vsms-narrow { max-width: 640px; }
.vsms-narrow .form-row { padding: 12px 0; }
.vsms-narrow .form-row label { display: block; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-2); margin-bottom: 8px; }
.vsms-narrow .form-row input:not([type=checkbox]), .vsms-narrow .form-row select, .vsms-narrow .form-row textarea { width: 100%; max-width: 420px; box-sizing: border-box; }
.vsms-narrow .vsms-suggest { display: block; max-width: 420px; }
.vsms-steps { padding-left: 20px; }
.vsms-steps li { margin: 4px 0; list-style: decimal; }
.vsms-table td { vertical-align: top; }
.vsms-preview { max-height: 360px; overflow: auto; }
.vsms-preview td, .vsms-preview th { white-space: nowrap; font-size: 0.75rem; }

.vsms-deposit {
  border: none;
  border-radius: 0;
  padding: var(--sp-05);
  margin-bottom: 1px;
  max-width: 900px;
  background: var(--surface);
}
.vsms-deposit.suggested { box-shadow: inset 3px 0 0 var(--brand); }
.vsms-deposit header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.vsms-deposit-text { font-weight: 600; word-break: break-word; }
.vsms-deposit-amount { font-size: 1.25rem; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vsms-deposit-amount.out { color: var(--text-3); }
.vsms-suggestion {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  background: var(--surface-2); border-radius: 0; padding: 8px 16px; margin-bottom: 8px;
}
.vsms-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.vsms-assign input[type=search], .vsms-split input[type=search] { width: 260px; max-width: 100%; }
.vsms-deposit details { margin-top: 6px; }
.vsms-deposit summary { cursor: pointer; color: var(--brand-ink); font-size: 0.875rem; }
.vsms-payments { margin: 0 0 4px; padding-left: 18px; }
.vsms-payments li { list-style: disc; }

@media (max-width: 767px) {
  .vsms-suggestion { flex-direction: column; align-items: stretch; }
  .vsms-assign input[type=search], .vsms-split input[type=search] { width: 100%; }
}
input.vsms-picked { box-shadow: inset 0 -2px 0 var(--brand) !important; font-weight: 600; }

/* --- WhatsApp ------------------------------------------------------------- */
.vsms-bubble {
  margin: 8px 16px;
  padding: 12px 16px;
  border-radius: 0;
  background: var(--surface-2);
  border: none;
  white-space: pre-wrap;
  max-width: 560px;
}
.vsms-deposit .vsms-bubble { margin: 8px 0; }
.vsms-bubble.incoming { box-shadow: inset 3px 0 0 var(--brand); }

/* --- Registers ------------------------------------------------------------ */
.vsms-register-page { max-width: 760px; }
.vsms-register-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.vsms-register-head form { margin: 0; }
.vsms-register-count { font-weight: 600; }
.vsms-mark {
  border: none;
  border-radius: 0;
  margin: 0 0 1px;
  padding: 12px 16px;
  background: var(--surface);
}
.vsms-mark legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; }
.vsms-mark-options { clear: both; display: flex; flex-wrap: wrap; gap: 1px; }
.vsms-mark-options label { cursor: pointer; }
.vsms-mark-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vsms-mark-options span {
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  min-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-weight: 600;
  color: var(--text-2);
  user-select: none;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive), color var(--duration-fast-02) var(--ease-standard-productive);
}
.vsms-mark-options span:hover { background: var(--surface-3); color: var(--text); }
.vsms-mark-options input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Each mark keeps its letter, so colour is never the only signal. */
.vsms-mark-options .mark-P input:checked + span { background: #198038; border-color: #198038; color: #fff; }
.vsms-mark-options .mark-A input:checked + span { background: #da1e28; border-color: #da1e28; color: #fff; }
.vsms-mark-options .mark-L input:checked + span { background: #8a3800; border-color: #8a3800; color: #fff; }
.vsms-mark-options .mark-S input:checked + span,
.vsms-mark-options .mark-V input:checked + span { background: #6929c4; border-color: #6929c4; color: #fff; }
.vsms-mark-options .mark-E input:checked + span,
.vsms-mark-options .mark-T input:checked + span { background: #0f62fe; border-color: #0f62fe; color: #fff; }
.vsms-mark-note { margin-top: 8px; width: 100%; max-width: 420px; box-sizing: border-box; }
.vsms-mark:has(.mark-P input:checked) .vsms-mark-note { display: none; }
.vsms-register-save {
  position: sticky; bottom: 0; padding: 12px 0; background: var(--bg);
  border-top: 1px solid var(--border);
}
#container .vsms-register-save .button { width: 100%; max-width: 420px; min-height: 48px; font-size: 1rem; }
.vsms-cell { text-align: center; font-weight: 600; font-family: var(--font-mono); }
.vsms-cell.mark-A, .vsms-cell.mark-S { color: var(--danger); }
.vsms-cell.mark-L { color: var(--warning); }

/* --- Calendar ------------------------------------------------------------- */
.vsms-calendar { border: none; border-radius: 0; overflow: hidden; background: var(--surface); }
.vsms-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vsms-cal-head div { padding: 11px 8px; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.32px; text-transform: none; background: var(--layer-accent); color: var(--text); }
.vsms-cal-day { min-height: 96px; padding: 4px 6px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.vsms-cal-day:first-child { border-left: none; }
.vsms-cal-day.other { opacity: 0.45; }
.vsms-cal-day.weekend { background: var(--surface-2); }
.vsms-cal-day.today .vsms-cal-date { background: var(--brand); color: #fff; border-radius: 0; padding: 0 6px; display: inline-block; }
.vsms-cal-date { font-weight: 600; font-size: 0.75rem; margin-bottom: 2px; }
.vsms-cal-event {
  display: block; margin: 2px 0; padding: 2px 6px; border-radius: 0; font-size: 0.75rem; line-height: 1rem;
  border-left: 3px solid var(--data-1); background: var(--surface-2); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--duration-fast-01) var(--ease-standard-productive);
}
a.vsms-cal-event:hover { background: var(--surface-3); text-decoration: none; }
.vsms-cal-event.aud-staff { border-left-color: var(--data-2); }
.vsms-cal-event.cancelled { text-decoration: line-through; opacity: 0.6; }
.vsms-cal-time { font-variant-numeric: tabular-nums; opacity: 0.8; }
@media (max-width: 767px) {
  .vsms-cal-day { min-height: 56px; padding: 2px; }
  .vsms-cal-event { white-space: normal; font-size: 0.65rem; }
  .vsms-cal-time { display: none; }
}

/* --- Cash-flow forecast & retention (Phase 5) ------------------------------ */
.fc-intro { max-width: 72ch; margin: 0 0 var(--sp-05); }
.fc .vsms-callout { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--sp-05); }
.fc .vsms-callout .vi { margin-top: 1px; }
.fc-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-05); align-items: start; margin-bottom: var(--sp-05); }
.fc-results { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; }
.fc-results .vsms-chart-card { margin: 0; }
.fc-form { padding: 0 var(--sp-05) var(--sp-05); }
.fc-field { margin-bottom: var(--sp-05); }
.fc-field label { display: block; margin-bottom: 8px; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.32px; color: var(--text-2); }
#container .fc-field input, #container .fc-field select { width: 100%; }
.fc-field .help { margin: 4px 0 0; }
.fc-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-table, .fc-basis { margin-bottom: var(--sp-05); }
.fc-table table { width: 100%; }
.fc-table td.num, .fc-table th.num, .vsms-card td.num { white-space: nowrap; }
#container .fc-basis th { width: 9rem; background: transparent; font-weight: 600; }
.fc-note { padding: 0 var(--sp-05) var(--sp-05); margin: var(--sp-03) 0 0; font-size: 0.75rem; letter-spacing: 0.32px; }
.fc-charts { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); margin-bottom: var(--sp-05); }
@media (max-width: 1056px) { .fc-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .fc-charts { grid-template-columns: 1fr; } }


/* Learner import: a checkbox with its sentence as the label */
.vsms-narrow .form-row label.vsms-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; color: var(--text); letter-spacing: 0.16px; }
.vsms-narrow .form-row label.vsms-check input { margin-top: 2px; }
#container .vsms-import select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (min-width: 768px) { #container .vsms-import select { max-width: 420px; } }