/**
 * Brand surfaces, and the dashboard's ledger.
 *
 * `contrast.css` owns the palette: which colour each role is, and its measured
 * ratio. This file owns what the palette is painted ON — the page, the cards,
 * the sidebar — and the dashboard components that need more than a Bootstrap
 * class. Loaded after both the theme and `contrast.css`.
 *
 * ---------------------------------------------------------------------------
 * FLAT, AND FINANCIAL.
 * ---------------------------------------------------------------------------
 * This is a lender's back office, so the screen borrows from the documents
 * the business already trusts — a ledger, a bank statement — rather than from
 * a marketing page:
 *
 *   - Surfaces are flat. A 1px hairline separates things; nothing floats on a
 *     shadow, nothing has a coloured strip, nothing lifts on hover.
 *   - Figures are the loudest thing on the screen, in navy, set in the
 *     system grotesque with tabular numerals so a column of amounts lines up
 *     digit for digit. The theme's Nunito is rounded and friendly, which is
 *     right for prose and wrong for money. The currency and the cents are
 *     set smaller and lighter, as a statement sets them.
 *   - Colour carries meaning and nothing else: red is arrears, green is money
 *     that came back, deep blue is something you can act on. A screen where
 *     every tile has its own colour says nothing with colour at all.
 *   - A total takes the accountant's rules: a single line above, a double
 *     line below.
 *
 * Contrast is measured, as in `contrast.css`: body #334155 is 10.35:1 on
 * white, muted #5b6b80 5.44:1, figure navy #0c2a4d 14.44:1.
 */

:root {
  --vv-navy: #0c2a4d;
  --vv-green: #39a455;

  --vv-ink: #0f172a; /* 17.85 on white */
  --vv-figure: #0c2a4d; /* 14.44 — the brand navy */
  --vv-body: #334155; /* 10.35 */
  --vv-muted: #5b6b80; /* 5.44 */
  --vv-page: #f5f7fa;
  --vv-surface: #ffffff;
  --vv-line: #e3e8ef;
  --vv-hover: #f8fafc;
  --vv-track: #e8edf3;

  /* Bar fills. A bar is a graphic, held to 3:1 (WCAG 1.4.11). */
  --vv-fill-primary: #1f4e8c; /* 8.31 */
  --vv-fill-success: #2f8f48; /* 4.08 */
  --vv-fill-info: #0e7490; /* 5.36 */
  --vv-fill-warning: #d97706; /* 3.19 */
  --vv-fill-danger: #dc2626; /* 4.83 */
  --vv-fill-secondary: #64748b; /* 4.76 */

  /* Figures only. Every platform's UI face has tabular lining numerals;
     Nunito's are proportional, so a column of amounts would not align. */
  --vv-num-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ct-body-bg: var(--vv-page);
  --ct-body-color: var(--vv-body);
}

html[data-theme="dark"] {
  --vv-ink: #f1f5f9; /* 9.61 on the dark card */
  --vv-figure: #f1f5f9;
  --vv-body: #cbd5e1; /* 7.09 */
  --vv-muted: #aab8c5; /* 5.20 */
  --vv-page: #2b3139;
  --vv-surface: #37404a;
  --vv-line: #464f5b;
  --vv-hover: #3d4752;
  --vv-track: #4a535e;

  --vv-fill-primary: #8ab4ff;
  --vv-fill-success: #4ade80;
  --vv-fill-info: #67e8f9;
  --vv-fill-warning: #fbbf24;
  --vv-fill-danger: #fda4af;
  --vv-fill-secondary: #aab8c5;

  --ct-body-bg: var(--vv-page);
  --ct-body-color: var(--vv-body);
}

/* ------------------------------------------------------------ surfaces */

body {
  background-color: var(--vv-page);
}

.card {
  --ct-card-border-width: 1px;
  --ct-card-border-color: var(--vv-line);
  --ct-card-border-radius: 0.375rem;
  --ct-card-inner-border-radius: calc(0.375rem - 1px);
  box-shadow: none;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--vv-ink);
}

.table > thead th,
table.dataTable thead th {
  color: var(--vv-body);
}

/* The topbar's hairline, instead of a shadow that blurred into the page. */
.navbar-custom {
  box-shadow: none;
  border-bottom: 1px solid var(--vv-line);
}

/* ------------------------------------------------------------- sidebar
   The theme's "dark" sidenav, recoloured to the logo's navy. The logo art
   in the sidebar is the white variant, so it sits on navy exactly as it
   does on the printed material. */

html[data-sidenav-color="dark"] {
  --ct-bg-leftbar: var(--vv-navy);
  --ct-dark-menu-item: #c3d1e6; /* 9.34 on navy */
  --ct-dark-menu-item-hover: #ffffff;
  --ct-dark-menu-item-active: #ffffff;
}

html[data-sidenav-color="dark"] .leftside-menu {
  box-shadow: none;
}

html[data-sidenav-color="dark"] .side-nav .side-nav-title {
  color: #8fa6c4; /* 5.79 — section labels sit a step below the items */
  letter-spacing: 0.08em;
}

html[data-sidenav-color="dark"] .side-nav .side-nav-link {
  transition: color 0.15s ease, background-color 0.15s ease;
}

html[data-sidenav-color="dark"] .side-nav .side-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* The current page: a flat lighter row and the logo's green as the marker
   (4.55:1 against the navy). */
html[data-sidenav-color="dark"] .side-nav .menuitem-active > a.side-nav-link {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--vv-green);
}

/* ------------------------------------------------------------- type */

.vv-greeting {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--vv-ink);
  letter-spacing: -0.01em;
}

/* Section and cell labels: small capitals, the way a statement heads its
   columns. */
.vv-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--vv-muted);
}

.vv-kicker i {
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.vv-kicker .vv-caption {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.vv-caption {
  font-size: 0.8125rem;
  color: var(--vv-muted);
}

.vv-num {
  font-family: var(--vv-num-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vv-figure);
}

.vv-num-lg {
  font-size: 2rem;
  line-height: 1.1;
}

.vv-num-md {
  font-size: 1.625rem;
  line-height: 1.15;
}

/* `K` and `.76`: present, legible, and not competing with the kwacha. */
.vv-ccy,
.vv-cents {
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vv-muted);
}

.vv-ccy {
  margin-right: 0.3em;
}

/* ------------------------------------------------------------ the ledger
   A panel of cells separated by hairlines, like the ruled columns of a
   statement. Each cell draws its own right and bottom rule as an outset
   shadow and the panel clips the outer ones, so the rules are always one
   pixel whatever the column count — and a short last row leaves blank
   paper, not a grey block. */

.vv-panel {
  background: var(--vv-surface);
  border: 1px solid var(--vv-line);
  border-radius: 0.375rem;
  overflow: hidden;
}

.vv-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .vv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .vv-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

.vv-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
  box-shadow: 1px 0 0 var(--vv-line), 0 1px 0 var(--vv-line);
}

/* A queue cell is one link (its "Open" is a stretched link). Hover is a
   flat tint, not a lift. */
.vv-cell-link {
  transition: background-color 0.15s ease;
}

.vv-cell-link:hover,
.vv-cell-link:focus-within {
  background-color: var(--vv-hover);
}

.vv-open {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ct-primary);
  text-decoration: none;
}

.vv-open:hover {
  color: var(--ct-link-hover-color);
  text-decoration: underline;
}

/* Colour means something or it is absent. Arrears are the one queue that is
   a risk rather than a to-do, so an overdue count is red and its label
   carries a marker; everything else is navy. */
.vv-flag .vv-num {
  color: var(--ct-danger);
}

.vv-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ct-danger);
  flex-shrink: 0;
}

/* An empty queue is good news and should not shout. */
.vv-empty .vv-num {
  color: var(--vv-muted);
}

/* ------------------------------------------------------- statement tables */

.vv-statement {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.vv-statement th,
.vv-statement td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--vv-line);
}

.vv-statement th {
  font-weight: 500;
  color: var(--vv-body);
}

.vv-statement td {
  text-align: right;
  font-family: var(--vv-num-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--vv-figure);
}

/* The table ends on its last figure, not on a rule leading nowhere. */
.vv-statement tr:last-child:not(.vv-total) th,
.vv-statement tr:last-child:not(.vv-total) td {
  border-bottom: 0;
}

/* A breakdown of the row above it. */
.vv-statement .vv-sub th {
  padding-left: 1rem;
  font-weight: 400;
  color: var(--vv-muted);
}

.vv-statement .vv-sub td {
  font-weight: 500;
  color: var(--vv-body);
}

.vv-statement .vv-risk td {
  color: var(--ct-danger);
}

/* The accountant's total: a single rule above, a double rule below. */
.vv-statement .vv-total th,
.vv-statement .vv-total td {
  border-top: 1px solid var(--vv-figure);
  border-bottom: 3px double var(--vv-figure);
  font-weight: 700;
  color: var(--vv-figure);
}

@media (prefers-reduced-motion: reduce) {
  .vv-cell-link,
  html[data-sidenav-color="dark"] .side-nav .side-nav-link {
    transition: none;
  }
}

/* A form on its way to the server: its buttons are disabled; say so. */
form[aria-busy="true"] button[type="submit"] {
  cursor: progress;
}