/* ===========================================================================
   VATcube Accounts — application theme.

   Built on Bootstrap 5. The shape follows the Kanakku layout Mario chose: a
   dark fixed sidebar with grouped navigation, a white top bar, a light working
   area, cards with soft borders, and dense data tables. The colour is ours:
   wherever Kanakku uses purple, this uses the portal's cyan over navy, so the
   accounts application and the portal read as one product.

   Nothing here overrides Bootstrap by force. The variables below are Bootstrap's
   own, so components inherit the palette instead of being patched one by one.
   =========================================================================== */

:root {
  /* The portal's identity: navy through to cyan. */
  --vc-navy: #0b1f4d;
  --vc-navy-2: #123b8f;
  --vc-cyan: #1e88c8;
  --vc-cyan-600: #1877b0;
  --vc-cyan-100: #e7f3fb;

  --vc-bg: #f4f7fb;
  --vc-surface: #ffffff;
  --vc-line: #e4eaf3;
  --vc-line-soft: #eef2f8;
  --vc-text: #17233a;
  --vc-muted: #5b6b82;   /* 5.4:1 on white; #6b7c95 was 4.4:1 and failed */

  --vc-sidebar-w: 248px;
  --vc-sidebar-mini: 68px;
  --vc-topbar-h: 58px;
  --vc-radius: 10px;

  /* Bootstrap's own variables, so every component follows without patching. */
  --bs-primary: var(--vc-cyan);
  --bs-primary-rgb: 30, 136, 200;
  --bs-body-bg: var(--vc-bg);
  --bs-body-color: var(--vc-text);
  --bs-body-font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-border-color: var(--vc-line);
  --bs-border-radius: var(--vc-radius);
  --bs-link-color: var(--vc-cyan-600);
  --bs-link-hover-color: var(--vc-navy-2);
}

body {
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--bs-body-font-family);
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
}

/* --- Sidebar ------------------------------------------------------------
   Light, as Kanakku's is: white panel, dark text, one thin line separating it
   from the working area. The colour in it is ours: cyan for the page you are
   on, and the VATcube mark at the top. A dark slab of navy down the side of
   every screen is what made the application feel heavy. */
.vc-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--vc-sidebar-w);
  background: var(--vc-surface);
  border-right: 1px solid var(--vc-line);
  color: #47566e;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .18s ease, transform .18s ease;
}
.vc-sidebar .vc-brand {
  height: var(--vc-topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--vc-line);
  color: var(--vc-navy);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.vc-sidebar .vc-brand img { height: 26px; width: auto; }
.vc-sidebar .vc-mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-cyan) 100%);
  display: grid; place-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.vc-nav { padding: 8px 10px 24px; overflow-y: auto; flex: 1; }
.vc-nav::-webkit-scrollbar { width: 6px; }
.vc-nav::-webkit-scrollbar-thumb { background: #dbe3ef; border-radius: 3px; }
.vc-nav .vc-nav-group {
  padding: 16px 10px 5px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #93a2b8;
  font-weight: 700;
  white-space: nowrap;
}
.vc-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #47566e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.vc-nav a .ti { font-size: 18px; flex: 0 0 18px; color: #8797ad; }
.vc-nav a:hover { background: #f2f7fc; color: var(--vc-navy); }
.vc-nav a:hover .ti { color: var(--vc-cyan); }
/* The page you are on: a cyan bar and cyan text, no filled block. */
.vc-nav a.active {
  background: var(--vc-cyan-100); color: #10608c; font-weight: 650; position: relative;
  /* The marker is the shape of the item: the same rounded box, outlined in cyan
     down its left edge, rather than a straight line floating beside it. */
  box-shadow: inset 3px 0 0 0 var(--vc-cyan);
}
.vc-nav a.active::before { content: none; }
.vc-nav a.active .ti { color: var(--vc-cyan); }

/* --- Top bar ------------------------------------------------------------ */
.vc-topbar {
  position: fixed;
  top: 0; right: 0; left: var(--vc-sidebar-w);
  height: var(--vc-topbar-h);
  background: var(--vc-surface);
  border-bottom: 1px solid var(--vc-line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  z-index: 1030;
  transition: left .18s ease;
}
.vc-topbar .vc-search { position: relative; max-width: 320px; flex: 1; }
.vc-topbar .vc-search .ti { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--vc-muted); font-size: 16px; }
.vc-topbar .vc-search input { padding-left: 33px; background: var(--vc-bg); border-color: transparent; }
.vc-topbar .vc-icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--vc-line);
  background: #fff; color: var(--vc-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.vc-topbar .vc-icon-btn:hover { color: var(--vc-cyan); border-color: var(--vc-cyan); }
.vc-user { display: flex; align-items: center; gap: 9px; }
.vc-avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--vc-navy-2), var(--vc-cyan));
  color: #fff; display: inline-grid; place-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase;
}

/* --- Working area ------------------------------------------------------- */
.vc-main { margin-left: var(--vc-sidebar-w); padding-top: var(--vc-topbar-h); transition: margin .18s ease; min-height: 100vh; }
.vc-page { padding: 18px 20px 40px; }
.vc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vc-page-head h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.vc-page-head .vc-crumbs { font-size: 12px; color: var(--vc-muted); margin-top: 2px; }
.vc-page-head .vc-crumbs a { color: var(--vc-muted); text-decoration: none; }

/* --- Cards -------------------------------------------------------------- */
.card { border: 1px solid var(--vc-line); border-radius: var(--vc-radius); box-shadow: 0 1px 2px rgba(13, 35, 64, .04); }
.card-header {
  background: #fff; border-bottom: 1px solid var(--vc-line-soft);
  padding: 12px 16px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: var(--vc-radius) var(--vc-radius) 0 0;
}
.card-body { padding: 16px; }

/* Figure tiles, as on the Kanakku dashboard but in our colours. */
.vc-stat { display: flex; align-items: center; gap: 12px; }
.vc-stat .vc-stat-icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-content: center;
  font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--vc-navy-2), var(--vc-cyan));
}
.vc-stat .vc-stat-icon.alt { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.vc-stat .vc-stat-icon.warn { background: linear-gradient(135deg, #b45309, #f59e0b); }
.vc-stat .vc-stat-icon.bad { background: linear-gradient(135deg, #9f1239, #e11d48); }
.vc-stat .vc-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vc-muted); }
.vc-stat .vc-stat-value { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }

/* --- Tables ------------------------------------------------------------- */
.table { --bs-table-color: var(--vc-text); font-size: 12px; margin: 0; }
.table > thead > tr > th {
  background: #fafcff; border-bottom: 1px solid var(--vc-line);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vc-muted); padding: 10px 12px; white-space: nowrap;
}
.table > tbody > tr > td { padding: 9px 12px; border-bottom: 1px solid var(--vc-line-soft); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: #f7fafe; }
.table tfoot td { background: #f5f9ff; border-top: 1px solid var(--vc-line); font-weight: 700; }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* DataTables, wearing the same clothes as everything else. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--vc-line); border-radius: 8px; padding: 5px 9px; font-size: 12px; }
.dataTables_wrapper .dataTables_info { color: var(--vc-muted); font-size: 12px; }
.page-link { border-radius: 8px !important; margin: 0 2px; border-color: var(--vc-line); color: var(--vc-cyan-600); font-size: 12px; }
.page-item.active .page-link { background: var(--vc-cyan); border-color: var(--vc-cyan); }

/* --- Controls ----------------------------------------------------------- */
/* Buttons are defined once, under BUTTONS. */
/* Buttons are defined once, further down, under BUTTONS. */
.form-control, .form-select { border-radius: 9px; border-color: #d8e0ec; font-size: 12px; padding: .45rem .7rem; }
.form-control:focus, .form-select:focus { border-color: var(--vc-cyan); box-shadow: 0 0 0 3px rgba(30, 136, 200, .14); }
.form-label { font-size: 12px; font-weight: 600; color: #38496a; margin-bottom: 4px; }
.form-check-input { width: 1.15em; height: 1.15em; border-color: #c2cddd; }
.form-check-input:checked { background-color: var(--vc-cyan); border-color: var(--vc-cyan); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(30, 136, 200, .16); border-color: var(--vc-cyan); }

/* --- Status pills ------------------------------------------------------- */
.vc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.vc-pill.draft { background: #eef2f8; color: #52637f; }
.vc-pill.posted { background: var(--vc-cyan-100); color: #14618f; }
.vc-pill.paid { background: #e7f7ef; color: #0f7a4a; }
.vc-pill.void { background: #fdecec; color: #b42318; }
.vc-pill.overdue { background: #fdecec; color: #b42318; }

/* --- Smaller screens ---------------------------------------------------- */
@media (max-width: 991.98px) {
  .vc-sidebar { transform: translateX(-100%); }
  body.vc-nav-open .vc-sidebar { transform: none; }
  .vc-topbar { left: 0; }
  .vc-main { margin-left: 0; }
  .vc-page { padding: 14px 13px 30px; }
  .vc-topbar .vc-search { display: none; }
}

/* Sidebar groups that open to reveal their pages.
   No bullets, no filled block: a group is a heading, and the page you are on is
   marked by weight, colour and one thin bar at the left edge of the panel. */
.vc-nav a.vc-has-sub .vc-caret { font-size: 14px; opacity: .55; transition: transform .15s ease; margin-left: auto; }
.vc-nav a.vc-has-sub[aria-expanded="true"] { color: var(--vc-navy); font-weight: 650; }
.vc-nav a.vc-has-sub[aria-expanded="true"] .ti { color: var(--vc-cyan); }
.vc-nav a.vc-has-sub[aria-expanded="true"] .vc-caret { transform: rotate(90deg); opacity: .8; }

.vc-subnav { padding: 1px 0 6px; margin: 0 0 2px 16px; border-left: 1px solid var(--vc-line); }
.vc-subnav a {
  position: relative; display: block; padding: 6px 10px 6px 16px; margin: 1px 0 1px 8px;
  font-size: 12.5px; font-weight: 500; color: #62748f; border-radius: 7px; line-height: 1.35;
}
.vc-subnav a::before { content: none; }
.vc-subnav a:hover { background: #f2f7fc; color: var(--vc-navy); }
.vc-subnav a.active {
  background: var(--vc-cyan-100); color: #10608c; font-weight: 650;
  box-shadow: inset 3px 0 0 0 var(--vc-cyan);
}
.vc-subnav a.active::after { content: none; }

/* The settings sub-navigation. */
.vc-settings-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: #47566e; text-decoration: none; font-size: 12px; font-weight: 500;
}
.vc-settings-link .ti { font-size: 17px; color: #8797ad; }
.vc-settings-link:hover { background: #f2f7fc; color: var(--vc-navy); }
.vc-settings-link.active { background: var(--vc-cyan-100); color: #12628f; font-weight: 650; }
.vc-settings-link.active .ti { color: var(--vc-cyan); }

/* ===========================================================================
   Component styles, chosen from the Kanakku UI kit and recoloured to ours.
   Accordion: the default. Alerts: link coloured, dismissible. Avatars: with a
   status badge. Badges: soft. Breadcrumb: default. Buttons: gradient. Links:
   coloured. Pagination: soft. Spinners: coloured.
   =========================================================================== */

/* --- Buttons: see BUTTONS further down, the only place they are defined. -- */

/* --- Links, coloured ----------------------------------------------------- */
a, .vc-page a { color: var(--vc-cyan-600); text-decoration: none; }
a:hover, .vc-page a:hover { color: var(--vc-navy-2); text-decoration: underline; }
.link-muted { color: var(--vc-muted) !important; }
.link-danger { color: #b42318 !important; }
.link-success { color: #0f7a4a !important; }
a.btn, a.btn:hover, .vc-nav a, .vc-subnav a, .vc-settings-link, .list-group-item, .vc-quick, .import-choice { text-decoration: none; }
/* An icon inside a link is never underlined: as an inline block it does not take the link's underline. */
a .ti { display: inline-block; text-decoration: none; }
.vc-page .vc-settings-link:hover { text-decoration: none; }
.vc-page .vc-settings-link:hover span { text-decoration: underline; }

/* --- Alerts, link coloured and dismissible ------------------------------- */
.alert {
  border: 1px solid transparent; border-radius: var(--vc-radius); padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 10px; font-size: 12px;
}
.alert .vc-alert-body { flex: 1 1 auto; min-width: 0; }
.alert .btn-close { margin-left: auto; flex: 0 0 auto; padding: 0; width: 20px; height: 20px; opacity: .5; }
.alert .btn-close:hover { opacity: 1; }
/* The plain .alert on a page is the blue informational one, but a named
   colour has to win over it wherever it sits, or a warning reads as a notice.
   The page selector is repeated on each so they all carry the same weight. */
/* The plain notice is the blue one, so it is written first and the named
   colours after it: they carry the same weight, and the last one wins. Before
   this, a red warning inside a page came out blue. */
.alert-info, .vc-page .alert { background: #eaf4fb; border-color: #cfe6f5; color: #14618f; }
.alert-success, .vc-page .alert-success, .vc-page .alert.success { background: #e9f8f0; border-color: #c7ecd9; color: #0f5c3a; }
.alert-warning, .vc-page .alert-warning { background: #fff7e8; border-color: #fbe2b8; color: #8a5a10; }
.alert-danger, .vc-page .alert-danger, .vc-page .alert.error { background: #fdecec; border-color: #f6cdcd; color: #8a1c1c; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* --- Avatars with a status badge ----------------------------------------- */
.vc-avatar { position: relative; }
.vc-avatar[data-status]::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: #9aa8bd;
}
.vc-avatar[data-status="online"]::after { background: #16a34a; }
.vc-avatar[data-status="away"]::after { background: #f59e0b; }
.vc-avatar[data-status="offline"]::after { background: #9aa8bd; }

/* --- Badges, soft -------------------------------------------------------- */
.badge, .vc-pill {
  font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 0;
}
.badge.bg-primary, .vc-pill.posted { background: var(--vc-cyan-100) !important; color: #12628f !important; }
.badge.bg-success, .vc-pill.paid { background: #e7f7ef !important; color: #0f7a4a !important; }
.badge.bg-danger, .vc-pill.void, .vc-pill.overdue { background: #fdecec !important; color: #b42318 !important; }
.badge.bg-warning { background: #fff3e0 !important; color: #8a5a10 !important; }
.badge.bg-secondary, .vc-pill.draft { background: #eef2f8 !important; color: #52637f !important; }

/* --- Breadcrumb, default ------------------------------------------------- */
.breadcrumb { margin: 2px 0 0; font-size: 12px; --bs-breadcrumb-divider: '/'; }
.breadcrumb-item + .breadcrumb-item::before { color: #b9c4d4; }
.breadcrumb-item a { color: var(--vc-muted); }
.breadcrumb-item a:hover { color: var(--vc-cyan-600); text-decoration: none; }
.breadcrumb-item.active { color: #47566e; }

/* --- Pagination, soft ---------------------------------------------------- */
.pagination { gap: 4px; }
.pagination .page-link, .dataTables_wrapper .page-link {
  border: 0 !important; background-color: #eef3f9; color: #40526e; border-radius: 8px !important;
  min-width: 32px; text-align: center; font-size: 12px; padding: .35rem .6rem;
}
.pagination .page-link:hover, .dataTables_wrapper .page-link:hover { background-color: var(--vc-cyan-100); color: #12628f; }
.pagination .page-item.active .page-link { background-color: var(--vc-cyan-100) !important; color: #12628f !important; font-weight: 700; }
.pagination .page-item.disabled .page-link { background-color: #f5f7fb; color: #b6c2d3; }
/* DataTables marks its arrows as first, previous, next and last; they are
   page links as well and take the same soft treatment. */
.page-link.first, .page-link.previous, .page-link.next, .page-link.last {
  background-color: #eef3f9; color: #40526e; border: 0 !important; border-radius: 8px !important;
}
.page-link.first:hover, .page-link.previous:hover, .page-link.next:hover, .page-link.last:hover {
  background-color: var(--vc-cyan-100); color: #12628f;
}
.page-item.disabled .page-link.first, .page-item.disabled .page-link.previous,
.page-item.disabled .page-link.next, .page-item.disabled .page-link.last {
  background-color: #f5f7fb; color: #b6c2d3;
}

/* --- Accordion, the default look ----------------------------------------- */
.accordion { --bs-accordion-border-color: var(--vc-line); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-item { border-radius: var(--vc-radius); overflow: hidden; margin-bottom: 8px; border: 1px solid var(--vc-line); }
.accordion-button { font-size: 12px; font-weight: 600; padding: 12px 14px; background: #fff; color: var(--vc-text); }
.accordion-button:not(.collapsed) { background: var(--vc-cyan-100); color: #12628f; box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--vc-line); }
.accordion-body { font-size: 12px; padding: 14px; }

/* --- Spinners, coloured -------------------------------------------------- */
.spinner-border, .spinner-grow { width: 1.4rem; height: 1.4rem; }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--vc-cyan) !important; }
.spinner-border.text-success { color: #16a34a !important; }
.spinner-border.text-danger { color: #e11d48 !important; }
.spinner-border.text-warning { color: #f59e0b !important; }
.vc-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vc-muted); }

/* DataTables 2 wraps each control in .dt-paging-button and paints it itself, so
   the soft treatment is stated once more against that class. */
.dt-paging-button .page-link { background-color: #eef3f9; color: #40526e; border: 0 !important; border-radius: 8px !important; }
.dt-paging-button .page-link:hover { background-color: var(--vc-cyan-100); color: #12628f; }
.dt-paging-button.active .page-link { background-color: var(--vc-cyan-100); color: #12628f; font-weight: 700; }
.dt-paging-button.disabled .page-link { background-color: #f5f7fb; color: #b6c2d3; }

/* --- Dropdowns, Choices in place of Select2 ------------------------------- */
.choices { margin-bottom: 0; }
.choices__inner {
  min-height: 34px; padding: 4px 8px; border-radius: 9px; border: 1px solid #d8e0ec;
  background: #fff; font-size: 12px;
}
.choices.is-focused .choices__inner, .choices.is-open .choices__inner {
  border-color: var(--vc-cyan); box-shadow: 0 0 0 3px rgba(30, 136, 200, .14);
}
.choices__list--dropdown, .choices__list[aria-expanded] {
  border: 1px solid var(--vc-line); border-radius: 10px; box-shadow: 0 12px 28px rgba(13, 35, 64, .14);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--vc-cyan-100); color: #12628f; }
.choices__input { background: transparent; font-size: 12px; }
.choices[data-type*="select-one"]::after { border-color: #7b8ca6 transparent transparent; }
.choices__list--multiple .choices__item { background: var(--vc-cyan); border-color: var(--vc-cyan); border-radius: 7px; font-size: 12px; }

/* --- Columns you can drag and resize -------------------------------------- */
table[data-table] thead th { position: relative; }
.vc-col-grip {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%; z-index: 2;
  cursor: col-resize; user-select: none;
}
.vc-col-grip::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: var(--vc-line);
}
.vc-col-grip:hover::after, .vc-col-resizing .vc-col-grip::after { top: 0; bottom: 0; width: 2px; left: 3px; background: var(--vc-cyan); }
table thead th { position: relative; }
table[style*="table-layout: fixed"] td, table[style*="table-layout: fixed"] th { overflow: hidden; text-overflow: ellipsis; }
body.vc-resizing { cursor: col-resize; user-select: none; }
body.vc-resizing * { cursor: col-resize !important; }
/* A table too wide for the screen folds its last columns away; the first cell
   then carries a plus to show them and a minus to hide them again. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { position: relative; padding-left: 38px !important; cursor: pointer; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
  content: "+"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; margin: 0; border: 0; border-radius: 50%;
  background: var(--vc-cyan-100); color: var(--vc-cyan-600); box-shadow: none;
  font: 700 14px/18px Inter, sans-serif; text-align: center; display: block;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before { content: "\2212"; border: 0; background: var(--vc-cyan); color: #fff; }
table.dataTable > tbody > tr.child > td.child { padding: 8px 14px 12px 38px; background: #fafcff; }
table.dataTable > tbody > tr.child ul.dtr-details { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 16px; padding: 0; }
table.dataTable > tbody > tr.child span.dtr-title { font-weight: 600; color: var(--vc-muted); }
.dtcr-moving { background: var(--vc-cyan-100) !important; }
.dt-colreorder-hover { cursor: grab; }

/* --- Basic tables, responsive -------------------------------------------- */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .table-responsive > .table { min-width: 560px; }
}

/* ===========================================================================
   Uniformity pass.

   Two faults showed up on nearly every screen when the pages were measured:
   a card whose content was wider than the card, and a second monospace family
   creeping in through <code> and .mono. Both are settled here rather than on
   each screen.
   =========================================================================== */

/* One monospace stack, including the one Bootstrap uses for .font-monospace,
   so a code or an IBAN never renders in a second face. */
:root {
  --vc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --bs-font-monospace: var(--vc-mono);
}
code, .mono, .font-monospace, pre { font-family: var(--vc-mono); font-size: .92em; }

/* A card that holds a table lets the table scroll rather than spilling out of
   its own edge. DataTables draws its own layout rows inside the card, which is
   what was overflowing. */
.card-body > .dataTables_wrapper,
.card-body > .table-responsive,
.card > .table-responsive { max-width: 100%; overflow-x: auto; }
.dataTables_wrapper { max-width: 100%; }
.dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
.dataTables_wrapper > .row > [class^="col-"] { padding-left: 0; padding-right: 0; }
.card-body:has(> .dataTables_wrapper) { overflow-x: hidden; }

/* Bootstrap rows keep their own negative margins inside a card. Cancelling
   them pushed every field 8px in from the text above it, so a label and the
   paragraph over it never started on the same line. A padded card body has
   room for the pull; nothing overflows. */

/* Nothing in the working area may push the page sideways. */
.vc-page { max-width: 100%; overflow-x: clip; }
.vc-page img, .vc-page canvas, .vc-page svg { max-width: 100%; }
.vc-page .row { --bs-gutter-x: 1rem; }

/* Type: one scale, everywhere. */
.vc-page, .card, .table, .form-control, .form-select, .btn { font-family: var(--bs-body-font-family); }
.vc-page h1 { font-size: 19px; }
.vc-page h2, .card-header { font-size: 14px; }
.vc-page h3 { font-size: 12px; }
.small, .vc-page .small, .text-muted.small { font-size: 12px; }
.vc-stat-label { font-size: 11px; letter-spacing: .06em; }
.table { font-size: 12px; }

/* Figures line up: one tabular numeral style for every money column. */
.num, .vc-stat-value, .table td.num, .table th.num, .money {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* Names and descriptions that are too long shorten with an ellipsis rather
   than stretching the table until it scrolls. */
.table td.truncate, .table td .truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 991.98px) {
  .vc-page-head { align-items: flex-start; }
  .vc-page-head .d-flex { width: 100%; }
  .vc-page-head .btn { flex: 1 1 auto; }
  .card-header { flex-wrap: wrap; row-gap: 4px; }
  .card-header .small { width: 100%; }
  .vc-stat .vc-stat-value { font-size: 17px; }
  .dataTables_wrapper .dataTables_filter { width: 100%; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; }
}

/* Chart libraries draw their own labels; they follow the platform's face and
   never go below the readable size. */
.c3 text, .c3-legend-item text, .flot-text, .flot-tick-label, .apexcharts-text, .apexcharts-legend-text {
  font-family: var(--bs-body-font-family) !important; font-size: 11px !important; fill: #6b7c95;
}
.c3-axis path, .c3-axis line { stroke: #dde5f0; }

/* A table that is wider than the screen scrolls inside its own card on every
   screen, including the ones still using the old markup. */
.table-wrap, .table-responsive { max-width: 100%; }
.table-wrap > table, .table-responsive > table { margin-bottom: 0; }

/* The control DataTables adds on a narrow screen to open a row: a small circle
   with a plus, not the blue square its stylesheet draws by default. */
table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  content: "+"; display: inline-grid; place-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--vc-cyan-100); color: #12628f; border: 0;
  font-size: 12px; font-weight: 700; line-height: 1; box-shadow: none; top: auto; margin-right: 6px;
}
table.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { content: "\2212"; background: var(--vc-cyan); color: #fff; }
table.dtr-inline.collapsed > tbody > tr > td.dtr-control { position: relative; padding-left: 10px; }
.dtr-details { width: 100%; font-size: 12.5px; }
.dtr-details td { padding: 4px 0 !important; border: 0 !important; }
.dtr-title { font-weight: 600; color: var(--vc-muted); padding-right: 10px; }

/* The length and search controls stack cleanly on a phone instead of drifting
   into the middle of the card. */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--vc-muted); }
.dataTables_wrapper .dataTables_length select { width: auto; min-width: 72px; }
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { text-align: left !important; margin-bottom: 8px; }
  .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { width: 100%; }
  .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; margin-top: 10px; }
  .vc-page-head h1 { font-size: 18px; }
}

/* --- What this screen is for ---------------------------------------------
   One line under the page title, written for somebody who runs a business
   rather than somebody who keeps books. Quiet enough to ignore once learnt. */
.vc-help {
  display: flex; align-items: flex-start; gap: 10px;
  background: #f4f9fd; border: 1px solid #dcebf7; border-radius: var(--vc-radius);
  padding: 10px 14px; margin: -4px 0 16px; font-size: 12.5px; color: #3c5873; line-height: 1.5;
}
.vc-help .ti { font-size: 17px; color: var(--vc-cyan); flex: 0 0 auto; margin-top: 1px; }
.vc-help strong { font-weight: 600; color: #26405f; }
.vc-help .vc-help-when { color: #5c728d; }
.vc-help .vc-help-when::before { content: " "; }

/* An accounting word with its everyday meaning behind a dotted underline. */
.vc-word { border-bottom: 1px dotted #9db2cb; cursor: help; }

/* The jobs on the dashboard: one line each, the action on the right. */
.vc-todo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vc-line-soft); }
.vc-todo:last-child { border-bottom: 0; }
.vc-todo .vc-todo-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-content: center;
  background: var(--vc-cyan-100); color: #12628f; font-size: 17px;
}
.vc-todo.urgent .vc-todo-icon { background: #fdecec; color: #b42318; }
.vc-todo.good .vc-todo-icon { background: #e7f7ef; color: #0f7a4a; }
.vc-todo .vc-todo-text { flex: 1; font-size: 12px; }
.vc-todo .vc-todo-text .vc-todo-why { display: block; font-size: 12px; color: var(--vc-muted); }

/* ---------------------------------------------------------------------------
 * Statutory deadlines: the date block on the left, what it is in the middle,
 * the tick on the right. Colour carries the urgency, the pill repeats it in
 * words so colour alone never has to be read.
 * ------------------------------------------------------------------------- */
.vc-deadline { display: flex; align-items: flex-start; gap: 14px; }
.vc-deadline-date {
  flex: 0 0 64px; text-align: center; border-radius: 10px; padding: 8px 4px;
  background: var(--vc-cyan-100); color: #12628f;
}
.vc-deadline-day { font-size: 20px; font-weight: 700; line-height: 1; }
.vc-deadline-month { font-size: 10.5px; letter-spacing: .4px; font-weight: 600; margin-top: 3px; }
.vc-deadline-body { flex: 1; min-width: 0; }
.vc-deadline-act { flex: 0 0 auto; }
.vc-deadline.urgent .vc-deadline-date { background: #fdecec; color: #b42318; }
.vc-deadline.warn .vc-deadline-date { background: #fff6e6; color: #92400e; }
.vc-deadline.good .vc-deadline-date { background: #e7f7ef; color: #0f7a4a; }
.vc-deadline.good .vc-deadline-body .fw-semibold { color: var(--vc-muted); }

@media (max-width: 575.98px) {
  .vc-deadline { flex-wrap: wrap; }
  .vc-deadline-act { flex-basis: 100%; }
  .vc-deadline-act .form-control { width: auto !important; flex: 1; }
}

/* ===========================================================================
   Form controls, finished
   ---------------------------------------------------------------------------
   A dropdown has to look like one before it is clicked. Bootstrap's own arrow
   is drawn in its brand blue and disappears against this theme, so every
   select carries the same chevron, the same height and the same padding as a
   Choices field next to it, and a field that cannot be changed says so by
   being grey rather than by failing silently.
   ========================================================================= */
.form-select {
  --vc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237b8ca6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-image: var(--vc-chevron);
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 15px 15px;
  padding-right: 2rem;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
}
.form-select:hover { border-color: #c3d0e2; }
.form-select:disabled, .form-control:disabled, .form-control[readonly] {
  background-color: #f3f6fa; color: var(--vc-muted); cursor: not-allowed; border-style: dashed;
}
.form-select-sm { background-position: right .5rem center; background-size: 13px 13px; padding-right: 1.7rem; }

/* One height for every kind of field, so a row of them lines up whether it is
   a plain select, a Choices one or a text box. */
.form-control, .form-select { min-height: 38px; }
.form-control-sm, .form-select-sm { min-height: 32px; }
.choices__inner { min-height: 38px; display: flex; align-items: center; }
.choices[data-type*="select-one"] .choices__inner { padding: 4px 10px; }
.choices__list--single { padding: 0; }

/* A field that is being searched shows it, rather than looking like a label. */
.choices[data-type*="select-one"]::after {
  border-width: 5px 4px 0 4px; right: 12px;
}

/* --- The appearance chooser -----------------------------------------------
   Written with the page selector in front, because legacy.css makes every
   label inside a page a block, and a block cannot lay its own parts out. */
.vc-page .vc-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vc-page label.vc-choice {
  display: flex; align-items: center; gap: 10px; margin: 0;
  border: 1px solid var(--vc-line); border-radius: var(--vc-radius);
  padding: 11px 13px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 400;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.vc-page label.vc-choice:hover { border-color: #c3d0e2; background: #fbfdff; }
.vc-page .vc-choice input { margin: 0; flex: 0 0 auto; }
.vc-page .vc-choice .vc-choice-text { flex: 1 1 auto; min-width: 0; }
.vc-page .vc-choice .vc-choice-name { display: block; font-size: 12px; font-weight: 600; color: var(--vc-text); line-height: 1.25; }
.vc-page .vc-choice .vc-choice-note { display: block; font-size: 11.5px; font-weight: 400; color: var(--vc-muted); margin-top: 1px; }
.vc-page .vc-choice .vc-swatch {
  display: block; width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.vc-page label.vc-choice:has(input:checked) {
  border-color: var(--vc-cyan); background: var(--vc-cyan-100); box-shadow: 0 0 0 3px rgba(30, 136, 200, .12);
}

/* The live sample on the appearance screen. */
.vc-preview { border: 1px solid var(--vc-line); border-radius: var(--vc-radius); overflow: hidden; }
.vc-preview-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--vc-line); background: #fff; }
.vc-preview-side { width: 86px; border-right: 1px solid var(--vc-line); padding: 10px 8px; background: #fff; }
.vc-preview-body { display: flex; min-height: 150px; background: var(--vc-bg); }
.vc-preview-main { flex: 1; padding: 12px; }
.vc-preview-row { height: 9px; border-radius: 4px; background: #e9eef6; margin-bottom: 7px; }
.vc-preview-row.short { width: 55%; }
.vc-preview-side .vc-preview-row { background: #eef2f8; }
.vc-preview-side .vc-preview-row.on { background: var(--vc-cyan-100); }

/* The bar that appears when something on a form has been changed. */
.vc-unsaved {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1080;
  display: flex; align-items: center; gap: 12px;
  background: var(--vc-navy); color: #fff; border-radius: 999px;
  padding: 9px 10px 9px 18px; box-shadow: 0 14px 34px rgba(8, 24, 52, .32);
  font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.vc-unsaved.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.vc-unsaved .btn { padding: 4px 14px; font-size: 12.5px; }
@media (max-width: 575.98px) { .vc-unsaved { left: 12px; right: 12px; transform: none; border-radius: var(--vc-radius); justify-content: space-between; } }

/* --- Appearance, applied live ---------------------------------------------
   The saved appearance is written into the page by the shell. These rules say
   the same thing against an attribute on the body, so the Appearance screen
   can show a change the moment it is chosen, before anything is saved. */
/* Sidebar styles: see SIDEBAR TOKENS. */

body.vc-compact .table > tbody > tr > td { padding: 6px 10px; }
body.vc-compact .table > thead > tr > th { padding: 7px 10px; }
body.vc-compact .vc-page { padding: 14px 16px 30px; }
body.vc-compact .card-body { padding: 13px; }

/* ===========================================================================
   One type scale, one alignment rule
   ---------------------------------------------------------------------------
   Screens were built at different times and drifted: a heading inside a card
   was sometimes 16px and sometimes 18px, a caption sometimes grey and
   sometimes black, and numbers in a list did not line up with numbers in a
   table. These rules settle it in one place rather than screen by screen.
   ========================================================================= */
.vc-page h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.vc-page h2 { font-size: 16px; font-weight: 700; }
.vc-page h3 { font-size: 14px; font-weight: 700; }
.card-header > span:first-child { font-size: 14px; font-weight: 700; color: var(--vc-text); }
.card-header .small, .card-header .text-muted { font-size: 12px; }
.vc-stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--vc-muted); }
.vc-stat-value { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.form-text { font-size: 11.5px; color: var(--vc-muted); margin-top: 4px; }

/* Figures line up under each other wherever they are, and never wrap. */
.num, td.num, th.num, .vc-stat-value, .vc-money {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
td.num, th.num { text-align: right; white-space: nowrap; }

/* A card header with a button in it keeps one height whether the button is
   there or not, so a row of cards does not step up and down. */
.card-header { min-height: 46px; display: flex; align-items: center; gap: 10px; }
.card-header .btn-sm { padding: 3px 10px; font-size: 12.5px; }

/* The job list on the dashboard: the text column takes the space, the action
   stays the same width on every row, so the buttons form a column. */
.vc-todo .vc-todo-text { padding-right: 10px; }
.vc-todo > .btn { flex: 0 0 auto; min-width: 128px; justify-content: center; }
.vc-todo .vc-todo-why { margin-top: 2px; line-height: 1.45; }

/* The deadline rows: the date block is one width, so every title starts on the
   same line down the page, and the pills sit on the baseline of the title. */
.vc-deadline-date { flex-basis: 64px; }
.vc-deadline-body .fw-semibold { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.vc-deadline-body .small { line-height: 1.45; }
.vc-deadline-act { padding-left: 4px; }
.vc-deadline + .vc-deadline { border-top: 1px solid var(--vc-line-soft); }

/* Pills keep one size wherever they are used. */
.vc-pill { font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* A stat tile on a narrow screen keeps its icon beside the figure rather than
   dropping it underneath. */
@media (max-width: 575.98px) {
  .vc-stat { gap: 10px; }
  .vc-stat-value { font-size: 19px; }
  .card-header { flex-wrap: wrap; row-gap: 4px; }
}

/* The big figure on an overview card: one size everywhere, and the digits
   line up because the cards sit side by side. */
.vc-figure { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* The deadline list on the dashboard sits in two columns; each row needs the
   same separation as a list anywhere else, and a gutter between the columns. */
.card-body > .row.g-0 > [class*="col-"] .vc-deadline { padding: 11px 14px; }
.card-body > .row.g-0 > [class*="col-"]:first-child .vc-deadline { border-right: 1px solid var(--vc-line-soft); }
@media (max-width: 1199.98px) {
  .card-body > .row.g-0 > [class*="col-"]:first-child .vc-deadline { border-right: 0; }
}

/* ===========================================================================
   BUTTONS — one definition for the whole platform
   ---------------------------------------------------------------------------
   Every button reads five tokens, and a variant does nothing but set them:

       --b-bg   --b-bg-hover   --b-fg   --b-border   --b-ring

   The base rule is ".vc-page :where(...)": it weighs exactly one class, the
   same as Bootstrap's own .btn which it has to beat (and does, loading later),
   and less than any variant, so a variant class always decides the colour. The previous version said
   "button:not(.btn-close):not(...)", which outweighed .btn-light and
   .btn-danger, and that is why a <button class="btn btn-light"> came out
   blue while an <a class="btn btn-light"> came out grey.

   Variants, and when to use them:
     .btn-primary        the one action a screen is for; gradient, as asked
     .btn-light          everything else, including Cancel and Filter
     .btn-danger         a destructive action with a label
     .btn-danger-light   a destructive icon in a table row
     .btn-ghost          a button inside running text
   Sizes: default 38px (the height of a field), .btn-sm 32px. .icon-only
   makes it square. Adjacent buttons are 8px apart wherever they sit.
   ========================================================================= */
.vc-page :where(.btn, button:not(.btn-close):not(.choices__button):not(.dt-paging-button):not(.dropdown-item):not(.list-group-item):not(.accordion-button):not(.nav-link):not(.vc-icon-btn):not(.navbar-toggler):not(.page-link):not(.choices__item), input[type=submit], input[type=button]) {
  --b-bg: linear-gradient(135deg, var(--vc-cyan-600) 0%, var(--vc-navy-2) 100%);
  --b-bg-hover: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-navy) 100%);
  --b-fg: #fff;
  --b-border: transparent;
  --b-ring: rgba(30, 136, 200, .30);

  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--b-border); background: var(--b-bg); color: var(--b-fg);
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap; vertical-align: middle;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vc-page :where(.btn, button:not(.btn-close):not(.choices__button):not(.dt-paging-button):not(.dropdown-item):not(.list-group-item):not(.accordion-button):not(.nav-link):not(.vc-icon-btn):not(.navbar-toggler):not(.page-link):not(.choices__item), input[type=submit], input[type=button]):hover {
  background: var(--b-bg-hover); color: var(--b-fg); border-color: var(--b-border);
}
.vc-page :where(.btn, button, input[type=submit], input[type=button]):focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--b-ring);
}
.vc-page :where(.btn, button, input[type=submit]):active { transform: translateY(1px); }
/* Bootstrap paints its own colour on a pressed .btn at a higher weight; the
   pressed state keeps ours. */
.vc-page .btn.btn:active, .vc-page .btn.btn.active, .vc-page .btn.btn:first-child:active {
  background: var(--b-bg-hover); color: var(--b-fg); border-color: var(--b-border);
}

/* The variants set tokens and nothing else. */
.vc-page .btn-primary, .vc-page .btn.primary {
  --b-bg: linear-gradient(135deg, var(--vc-cyan-600) 0%, var(--vc-navy-2) 100%);
  --b-bg-hover: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-navy) 100%);
  --b-fg: #fff; --b-border: transparent;
}
.vc-page .btn-light, .vc-page .btn-secondary, .vc-page .btn-outline-secondary,
.vc-page .btn.secondary, .vc-page button.secondary {
  --b-bg: #eef3f9; --b-bg-hover: #e2eaf4; --b-fg: #1f3554; --b-border: #dce5f0;
  --b-ring: rgba(31, 53, 84, .18);
}
.vc-page .btn-danger, .vc-page .btn.danger, .vc-page button.danger {
  --b-bg: #c8313d; --b-bg-hover: #a92631; --b-fg: #fff; --b-border: #b42a35;
  --b-ring: rgba(200, 49, 61, .30);
}
.vc-page .btn-danger-light {
  --b-bg: #fdeeee; --b-bg-hover: #f9dcdd; --b-fg: #b42318; --b-border: #f4cfd1;
  --b-ring: rgba(200, 49, 61, .25);
}
/* Something the company cannot work without (the essential accounts, company
   details, a bank account): the amber of the platform's attention colour, so
   it stands apart from everyday primary buttons. */
.vc-page .btn-essential {
  --b-bg: linear-gradient(135deg, #c2410c 0%, #b45309 100%);
  --b-bg-hover: linear-gradient(135deg, #9a3412 0%, #92400e 100%);
  --b-fg: #fff; --b-border: transparent; --b-ring: rgba(194, 65, 12, .30);
}
.vc-page .btn-ghost {
  --b-bg: transparent; --b-bg-hover: var(--vc-cyan-100); --b-fg: var(--vc-cyan-600); --b-border: transparent;
}

/* Sizes. A default button is exactly the height of a field, so a button at
   the end of a row of fields lines up with them. */
.vc-page .btn-sm, .vc-page .btn.small, .vc-page button.small {
  min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; gap: 5px;
}
.vc-page .btn-lg { min-height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.vc-page .w-100.btn { width: 100%; }

/* Square icon buttons, with the hit area of a normal button. */
.vc-page .btn.icon-only { padding: 0; width: 38px; min-width: 38px; }
.vc-page .btn-sm.icon-only { width: 32px; min-width: 32px; }
.vc-page .btn .ti { font-size: 16px; line-height: 1; }
.vc-page .btn-sm .ti { font-size: 15px; }

/* Off. */
.vc-page .btn:disabled, .vc-page button:disabled, .vc-page .btn.disabled {
  opacity: .45; cursor: not-allowed; transform: none; pointer-events: none;
}

/* Spacing. Buttons next to each other, or forms holding one button next to
   each other, are always 8px apart. Inside a flex row with its own gap the
   margin is cancelled so the gap is not doubled. */
.vc-page :where(.btn + .btn, .btn + form, form + .btn, form.d-inline + form.d-inline,
  form.inline + form.inline, td form + form, td .btn + form, td form + .btn) { margin-left: 8px; }
.vc-page :where([class*="gap-"], .vc-btn-row, .vc-page-actions, .d-grid, .vc-page-head) > :where(*) { margin-left: 0; }
.vc-page td form { display: inline-flex; vertical-align: middle; }
.vc-page td.text-end, .vc-page td.text-nowrap.text-end { white-space: nowrap; }

.vc-page .vc-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Screens written before the card layout -------------------------------
   A filter bar and a table on an older screen now carry the same white
   surface, border and radius as a card, and the button at the end of a filter
   row stands exactly as tall as the fields beside it. Two pixels out is what
   made a converted screen and an unconverted one look like two products. */
.vc-page .filters, .vc-page .table-wrap { box-shadow: 0 1px 2px rgba(16, 36, 68, .04); }
.vc-page .filters .btn, .vc-page .filters button, .vc-page .field-row .btn, .vc-page .field-row button { min-height: 38px; }
.vc-page .filters > div, .vc-page .field-row > div { min-width: 150px; }
.vc-page .filters > div:last-child, .vc-page .field-row > div:last-child { min-width: 0; }

/* An old screen's heading inside a card reads as a card title. */
.vc-page .card > h2:first-child, .vc-page .card-body > h2:first-child { margin-top: 0; }


/* ===========================================================================
   SIDEBAR TOKENS
   ---------------------------------------------------------------------------
   Every colour in the menu comes from these tokens, and each sidebar style
   sets all of them, so no state is left with a colour meant for another
   background. The open group heading was navy text on the navy sidebar,
   which is why "Settings" could not be read. Contrast checked for each
   style: text 4.5:1 or better, muted headings 3:1 or better.
   ========================================================================= */
body .vc-sidebar {
  --s-bg: #ffffff; --s-border: var(--vc-line);
  --s-fg: #3e4d63;           /* 9.0:1 on white */
  --s-fg-strong: #0f2347;    /* 15:1 */
  --s-icon: #6f809a;         /* 4.1:1, icon only */
  --s-muted: #5f6f86;        /* 5.1:1, group headings */
  --s-hover-bg: #f1f6fb;
  --s-active-bg: var(--vc-cyan-100); --s-active-fg: #0d4f75; --s-active-bar: var(--vc-cyan);
  --s-rail: var(--vc-line);
  background: var(--s-bg); border-right-color: var(--s-border); color: var(--s-fg);
}
body[data-vc-sidebar="tint"] .vc-sidebar { --s-bg: #f6f8fb; --s-hover-bg: #eaf0f7; }
body[data-vc-sidebar="dark"] .vc-sidebar {
  --s-bg: linear-gradient(180deg, #0b1f4d 0%, #0d2a63 100%); --s-border: transparent;
  --s-fg: #d3deef;           /* 11:1 on #0b1f4d */
  --s-fg-strong: #ffffff;
  --s-icon: #9fb3d3;         /* 6.9:1 */
  --s-muted: #8ea3c4;        /* 5.6:1 */
  --s-hover-bg: rgba(255, 255, 255, .07);
  --s-active-bg: rgba(255, 255, 255, .12); --s-active-fg: #ffffff; --s-active-bar: #5cc0f2;
  --s-rail: rgba(255, 255, 255, .14);
}

body .vc-sidebar .vc-brand { color: var(--s-fg-strong); border-bottom-color: var(--s-rail); }
body .vc-sidebar .vc-nav .vc-nav-group { color: var(--s-muted); }
body .vc-sidebar .vc-nav a, body .vc-sidebar .vc-subnav a { color: var(--s-fg); }
body .vc-sidebar .vc-nav a .ti { color: var(--s-icon); }
body .vc-sidebar .vc-nav a:hover, body .vc-sidebar .vc-subnav a:hover { background: var(--s-hover-bg); color: var(--s-fg-strong); }
body .vc-sidebar .vc-nav a:hover .ti { color: var(--s-active-bar); }
body .vc-sidebar .vc-nav a.vc-has-sub[aria-expanded="true"] { color: var(--s-fg-strong); }
body .vc-sidebar .vc-nav a.vc-has-sub[aria-expanded="true"] .ti { color: var(--s-active-bar); }
body .vc-sidebar .vc-nav a.active, body .vc-sidebar .vc-subnav a.active {
  background: var(--s-active-bg); color: var(--s-active-fg); box-shadow: inset 3px 0 0 0 var(--s-active-bar);
}
body .vc-sidebar .vc-nav a.active .ti { color: var(--s-active-bar); }
body .vc-sidebar .vc-subnav { border-left-color: var(--s-rail); }
body .vc-sidebar .vc-nav::-webkit-scrollbar-thumb { background: var(--s-rail); }

/* ===========================================================================
   DASHBOARD LISTS
   ========================================================================= */
/* Deadlines: one grid, every row the same padding, the date block the same
   width, so every title starts on the same line in both columns. The whole
   row is the link. */
.vc-deadline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.vc-deadline-grid > .vc-deadline {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--vc-line-soft);
}
.vc-deadline-grid > .vc-deadline:hover { background: #f7fafd; text-decoration: none; }
.vc-deadline-grid .vc-deadline-date { flex: 0 0 68px; width: 68px; padding: 8px 0; }
/* The overview's deadlines: one under the other, the soonest first. */
.vc-deadline-list { display: flex; flex-direction: column; }
.vc-deadline-list > .vc-deadline {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--vc-line-soft);
}
.vc-deadline-list > .vc-deadline:last-child { border-bottom: 0; }
.vc-deadline-list > .vc-deadline + .vc-deadline { border-top: 0; }
.vc-deadline-list > .vc-deadline:hover { background: #f7fafd; text-decoration: none; }
.vc-deadline-list .vc-deadline-date { flex: 0 0 64px; width: 64px; padding: 7px 0; }
.vc-deadline-title { font-size: 12px; font-weight: 650; color: var(--vc-text); line-height: 1.3; }
.vc-deadline-meta { font-size: 12px; color: #5d6d84; margin-top: 2px; }
.vc-deadline-when { font-size: 12px; color: #5d6d84; margin-top: 1px; }
.vc-deadline-when.late { color: #b42318; font-weight: 650; }

/* The jobs list: every action button the same width so they form a column,
   with the text taking whatever is left. */
.vc-todo > .btn { flex: 0 0 168px; width: 168px; min-width: 168px; justify-content: space-between; }
.vc-todo .vc-todo-text { color: var(--vc-text); font-weight: 600; }
.vc-todo .vc-todo-why { font-weight: 400; color: #5d6d84; }

/* Grey text everywhere passes 4.5:1 on white and on the page background. */
:root { --bs-secondary-color: #5b6b82; --bs-tertiary-color: #66768c; }
.text-muted, .text-body-secondary { color: #5b6b82 !important; }
.form-text { color: #5b6b82; }
::placeholder { color: #8291a6; opacity: 1; }   /* placeholder only, 3.2:1, not used for content */

/* A link that is a button takes the button's colours, not a link's. The
   link rule (a, .vc-page a) outweighed the button base, which is why "New
   client" and the other header buttons drew blue text on a blue button. */
.vc-page a.btn, .vc-page a.btn:hover, .vc-page a.btn:focus, .vc-page a.btn:visited {
  color: var(--b-fg); text-decoration: none;
}

/* Status colours on white, darkened to pass 4.5:1. Bootstrap's own reds,
   greens and the pink it uses for code all fell just short. */
:root {
  --bs-danger: #b42318; --bs-danger-rgb: 180, 35, 24;
  --bs-success: #0f7a4a; --bs-success-rgb: 15, 122, 74;
  --bs-warning-text-emphasis: #8a5a10;
  --bs-code-color: #1f3c6b;
}
.text-danger { color: #b42318 !important; }
.text-success { color: #0f7a4a !important; }
.text-warning, .text-warning-emphasis { color: #8a5a10 !important; }
code, .vc-page code { color: #1f3c6b; background: #eef3f9; padding: 1px 5px; border-radius: 5px; font-size: .9em; }

/* Initials on an avatar: white on a colour dark enough to read. */
.vc-avatar, .vc-mark {
  background: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-cyan-600) 100%) !important;
  color: #fff;
}

/* One hover colour for every table row, including DataTables' own. */
.table { --bs-table-bg: #fff; --bs-table-hover-bg: #f4f8fc; --bs-table-striped-bg: #f8fafd; }
/* Bootstrap paints cells with the page background by default, which made every
   table look grey inside its white card. Cells are white. */
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f4f8fc; background-color: #f4f8fc; }
table.dataTable.table-hover > tbody > tr:hover > *, table.dataTable > tbody > tr.selected > * { box-shadow: none; background-color: #f4f8fc; }

/* Two cards stacked with no margin class between them still get one gap. */
.vc-page :where(.card:not([class*="mb-"]):not(.h-100)) + :where(.card) { margin-top: 16px; }
.vc-page :where(.card:not([class*="mb-"]):not(.h-100)) + :where(form, .row, .table-wrap, .filters) { margin-top: 16px; }


/* ===========================================================================
   TABLE CONTROLS (DataTables)
   The page size and the search box sit on one line each, their label beside
   them, and inset by the card's padding when the table is flush in a card.
   ========================================================================= */
.vc-page .dt-length, .vc-page .dt-search, .vc-page .dataTables_length label, .vc-page .dataTables_filter label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--vc-muted); font-weight: 500;
}
.vc-page .dt-length label, .vc-page .dt-search label { display: inline; margin: 0; font-weight: 500; color: var(--vc-muted); }
.vc-page .dt-length select { width: auto; min-width: 76px; }
.vc-page .dt-search input { width: 240px; max-width: 100%; }
.vc-page .vc-dt-flush > .row:first-child { padding: 14px 16px 4px; margin: 0; }
.vc-page .vc-dt-flush > .row:last-child { padding: 6px 16px 14px; margin: 0; }
.vc-page .vc-dt-flush > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.vc-page .dt-info { font-size: 12.5px; color: var(--vc-muted); }
@media (max-width: 575.98px) {
  .vc-page .dt-search input { width: 100%; }
  .vc-page .vc-dt-flush > .row > [class*="col-"] + [class*="col-"] { margin-top: 8px; }
}

/* ===========================================================================
   COMPONENTS THAT ONLY EXISTED IN THE OLD STYLESHEET
   ---------------------------------------------------------------------------
   The confirmation panel, the file chooser, the invoice line table and its
   totals, the bank match panel and the sign-in card were styled in the old
   accounts.css (since removed), which the application shell never loaded. They rendered as
   bare browser controls: the native "Choose Files" button, the totals run
   together as "Net 0.00VAT 0.00", an unstyled confirmation box. Each is
   defined here in the same design language as everything else.
   ========================================================================= */

/* Confirmation panel. */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(11, 31, 77, .38); backdrop-filter: blur(2px); animation: vcFade .12s ease-out;
}
.confirm-box {
  width: 100%; max-width: 460px; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 31, 77, .24); overflow: hidden; font-family: var(--bs-body-font-family); animation: vcPop .14s ease-out;
}
.confirm-box.vc-page { padding: 0; max-width: 460px; }
.confirm-box .confirm-head { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px 16px; }
.confirm-box .confirm-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-content: center; font-size: 20px;
  background: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-cyan-600) 100%); color: #fff;
}
.confirm-box.is-danger .confirm-icon { background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%); }
.confirm-box .confirm-text { min-width: 0; }
.confirm-box h3 { margin: 2px 0 6px; font-size: 15px; font-weight: 700; color: var(--vc-text); }
.confirm-box p { margin: 0; font-size: 12px; color: #3e4d63; line-height: 1.55; }
.confirm-box .confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 22px; background: #f8fafd; border-top: 1px solid var(--vc-line-soft);
}
.confirm-box .btn { min-height: 38px; min-width: 96px; justify-content: center; }
@keyframes vcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .confirm-backdrop, .confirm-box { animation: none; } }
body.no-scroll { overflow: hidden; }

/* File chooser: a drop area the size of a target, not the browser's button. */
.vc-page label.file-drop, label.file-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 116px; padding: 22px 18px; margin: 0;
  border: 1.5px dashed #c3d0e2; border-radius: 12px; background: #fafcff;
  text-align: center; cursor: pointer; font-weight: 400;
  transition: border-color .15s ease, background .15s ease;
}
.file-drop::before {
  content: ""; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 10px;
  background: var(--vc-cyan-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231877b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3Cpolyline points='7 9 12 4 17 9'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.file-drop:hover, .file-drop.is-over { border-color: var(--vc-cyan); background: var(--vc-cyan-100); }
.file-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop .file-drop-main { font-size: 14px; font-weight: 650; color: var(--vc-text); }
.file-drop .file-drop-sub { font-size: 12px; color: var(--vc-muted); }
.file-drop.has-file { border-style: solid; border-color: var(--vc-cyan); background: var(--vc-cyan-100); }
.file-drop.has-file::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-color: #e7f7ef;
}
.file-drop + .form-text, .file-drop + .btn, .file-drop + div, .file-drop + p { margin-top: 12px; }

/* Invoice and journal lines. */
.vc-page table.lines { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.vc-page table.lines th {
  background: #f7f9fc; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vc-muted); padding: 10px 8px; border-bottom: 1px solid var(--vc-line); text-align: left; white-space: nowrap;
}
.vc-page table.lines td { padding: 8px 6px; border-bottom: 1px solid var(--vc-line-soft); vertical-align: middle; }
.vc-page table.lines input, .vc-page table.lines select, .vc-page table.lines .choices__inner { width: 100%; min-height: 38px; font-size: 12px; }
.vc-page table.lines .col-account { width: 24%; }
.vc-page table.lines .col-description { width: 27%; }
.vc-page table.lines .col-qty { width: 7%; }
.vc-page table.lines .col-price, .vc-page table.lines .col-net, .vc-page table.lines .col-vat { width: 10%; }
.vc-page table.lines .col-vatcode { width: 14%; }
.vc-page table.lines .col-remove { width: 52px; text-align: center; }
.vc-page table.lines + .btn, .vc-page table.lines + div, .vc-page .table-responsive + .btn { margin-top: 12px; }

/* The totals under a document: label and figure kept together, each total
   separated from the next, the grand total the strongest. */
.vc-page .totals {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 10px 28px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vc-line);
  font-size: 12px; font-weight: 600; color: var(--vc-muted);
}
.vc-page .totals > * { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.vc-page .totals strong { font-size: 16px; font-weight: 700; color: var(--vc-text); font-variant-numeric: tabular-nums; margin-left: 6px; }
.vc-page .totals > :last-child strong { font-size: 19px; }

/* Bank match panel. */
.vc-page .match-panel { background: #fafcff; border: 1px dashed #c3d0e2; border-radius: 12px; padding: 14px 16px; margin-top: 12px; }

/* Sign-in card on the auth shell. */
.login-card { width: 100%; }
.vc-auth-card form > label, .vc-auth-card .login-card label { display: block; margin: 12px 0 4px; }
.vc-auth-card .login-card p { margin: 16px 0 0; }
.vc-auth-card .login-card .btn { width: 100%; }

/* Page actions on older screens. */
.vc-page .page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Bootstrap 5 renamed this; screens still use the old name. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* An icon at the start of a notice sits beside the text, on its first line. */
.alert .vc-alert-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.3; margin-top: 0; }
.alert .vc-alert-body > p:last-child { margin-bottom: 0; }

/* ===========================================================================
   SPACE AROUND BUTTONS
   A row of buttons that follows a form, a table or a field always has 16px
   above it, and buttons inside a paragraph lay out as a row with 8px between
   them. Older screens wrote <p><button>…</p> straight after a grid of fields,
   which left the button touching the field above.
   ========================================================================= */
.vc-page :where(.form-grid, .field-row, textarea, .table-responsive, .table-wrap, table, .file-drop, .form-text,
  .choices, label.choice, .box-grid, .row, .lines, .match-panel)
  + :where(p, div:not([class*="col-"]), form):has(> :is(.btn, button):first-child) { margin-top: 16px; }
.vc-page p:has(> :is(.btn, button):first-child) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 0; }
.vc-page p:has(> :is(.btn, button):first-child) > * { margin-left: 0; }

/* A field-row whose last item is the button: the button lines up with the
   fields' bottom edge, never with their labels. */
.vc-page .field-row > div:has(> .btn:only-child, > button:only-child) { align-self: flex-end; }

/* Month under the day on a deadline: 11px is the floor for any text. */
.vc-deadline-month { font-size: 11px !important; }

/* --- Import screens --------------------------------------------------------
 * One head card per importer (icon, name, switcher, the three steps), a hub
 * of tiles, figure tiles for the trial run and chips for the columns.
 */
.vc-import-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vc-import-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: grid; place-content: center;
  font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--vc-navy-2), var(--vc-cyan));
}
.vc-import-name { flex: 1 1 260px; min-width: 0; }
.vc-import-h { font-size: 16px; font-weight: 700; color: var(--vc-text); line-height: 1.25; }
.vc-import-why { font-size: 12px; color: var(--vc-muted); margin-top: 2px; }
.vc-import-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-import-tools .form-select { width: auto; min-width: 210px; }
.vc-page .vc-import-tools .btn { margin: 0; }

.vc-steps { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--vc-line-soft);
  display: flex; gap: 8px; counter-reset: none; }
.vc-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; }
.vc-steps li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--vc-line); border-radius: 2px; margin-right: 4px; min-width: 12px; }
.vc-steps li.is-done:not(:last-child)::after { background: var(--vc-cyan); }
.vc-step-n {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--vc-muted); background: #fff; border: 2px solid var(--vc-line);
}
.vc-steps li.is-current .vc-step-n { color: #fff; border-color: var(--vc-cyan-600); background: var(--vc-cyan-600); box-shadow: 0 0 0 4px var(--vc-cyan-100); }
.vc-steps li.is-done .vc-step-n { color: #fff; border-color: var(--vc-cyan-600); background: var(--vc-cyan-600); }
.vc-step-l { font-size: 12px; font-weight: 600; color: var(--vc-muted); white-space: nowrap; }
.vc-steps li.is-current .vc-step-l { color: var(--vc-text); }
@media (max-width: 640px) {
  .vc-steps li:not(.is-current) .vc-step-l { display: none; }
  .vc-import-tools, .vc-import-tools .form-select { width: 100%; }
}

.vc-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vc-page a.vc-hub-tile {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--vc-line);
  border-radius: var(--vc-radius); background: #fff; color: var(--vc-text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vc-page a.vc-hub-tile:hover { border-color: var(--vc-cyan); box-shadow: 0 6px 18px rgba(13, 35, 64, .08); transform: translateY(-1px); }
.vc-hub-tile .vc-hub-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: grid; place-content: center;
  font-size: 19px; color: var(--vc-cyan-600); background: var(--vc-cyan-100);
}
.vc-hub-tile .vc-hub-name { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; }
.vc-hub-tile .vc-hub-why { display: block; font-size: 12.5px; color: var(--vc-muted); line-height: 1.45; margin-top: 3px; }
.vc-hub-tile .vc-hub-go { margin-left: auto; color: var(--vc-muted); font-size: 16px; align-self: center; }
.vc-page a.vc-hub-tile:hover .vc-hub-go { color: var(--vc-cyan-600); }

.vc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vc-tile { border: 1px solid var(--vc-line); border-radius: var(--vc-radius); padding: 12px 14px; background: #fafcff; }
.vc-tile-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vc-muted); }
.vc-tile-value { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--vc-text); }
.vc-tile.is-good { border-color: #b7e4cf; background: #f2fbf6; } .vc-tile.is-good .vc-tile-value { color: #0f6b46; }
.vc-tile.is-warn { border-color: #f5d9a8; background: #fffaf0; } .vc-tile.is-warn .vc-tile-value { color: #92560a; }
.vc-tile.is-bad { border-color: #f3c2cc; background: #fff5f7; } .vc-tile.is-bad .vc-tile-value { color: #a3122f; }

.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--vc-line); background: #fff; color: var(--vc-muted); }
.vc-chip.is-required { border-color: #b9dbf1; background: var(--vc-cyan-100); color: var(--vc-navy-2); }
.vc-chip i { font-size: 12px; }

.vc-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--vc-line-soft);
  background: #fafcff; border-radius: 0 0 var(--vc-radius) var(--vc-radius); }
.vc-actionbar .vc-actionbar-note { font-size: 12.5px; color: var(--vc-muted); margin-right: auto; flex: 1 1 220px; min-width: 0; }
.vc-page .vc-actionbar .btn { margin: 0; }
.vc-page .vc-actionbar form { margin: 0; display: contents; }

.vc-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 16px; }
.vc-map-grid .form-label .vc-req { color: #c2410c; margin-left: 2px; }
.vc-option-list { display: grid; gap: 10px; }
.vc-page .vc-option-list label.form-check { display: flex; gap: 10px; align-items: flex-start; padding: 0; margin: 0; font-weight: 400; }
.vc-page .vc-option-list label.form-check input { margin: 2px 0 0; flex: 0 0 auto; float: none; }
.vc-page .vc-option-list label.form-check > span { font-size: 12px; font-weight: 500; color: var(--vc-text); line-height: 1.4; }
.vc-option-list .vc-opt-note { display: block; font-size: 12px; color: var(--vc-muted); margin-top: 1px; }
.vc-numbered { margin: 0; padding-left: 0; list-style: none; counter-reset: n; display: grid; gap: 10px; }
.vc-numbered li { counter-increment: n; position: relative; padding-left: 32px; font-size: 12px; line-height: 1.5; }
.vc-numbered li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--vc-cyan-600); background: var(--vc-cyan-100); }
.card.h-100 > form { display: flex; flex-direction: column; flex: 1 1 auto; }
.card.h-100 > form > .vc-actionbar { margin-top: auto; }
.vc-preview-table td, .vc-preview-table th { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.vc-dup-group + .vc-dup-group { margin-top: 12px; }
.vc-edit-table > tbody > tr > td { padding-top: 6px; padding-bottom: 6px; }
.vc-edit-table > tfoot > tr > th { background: #fafcff; font-size: 12px; font-weight: 700; padding: 10px 12px; border-top: 1px solid var(--vc-line); }
.alert > .ti + span { flex: 1 1 auto; }

/* --- Invoice form -----------------------------------------------------------
 * Laid out like the invoice itself: who, number and dates at the top, lines
 * in the middle, totals at the foot. Accounts and VAT amounts stay hidden
 * until asked for.
 */
.vc-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--vc-line-soft); gap: 2px; }
.vc-page .vc-seg label { display: inline-flex; align-items: center; margin: 0; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--vc-muted); cursor: pointer; }
.vc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vc-page .vc-seg label.is-on { background: #fff; color: var(--vc-text); box-shadow: 0 1px 2px rgba(13, 35, 64, .12); }
.vc-contact-info:empty { display: none; }
.vc-lines { margin: 0; }
.vc-lines > thead > tr > th { background: #fafcff; }
.vc-lines > tbody > tr > td { padding: 6px 6px; border-bottom: 1px solid var(--vc-line-soft); }
.vc-lines > tbody > tr > td:first-child, .vc-lines > thead > tr > th:first-child { padding-left: 16px; }
.vc-lines > tbody > tr > td:last-child, .vc-lines > thead > tr > th:last-child { padding-right: 12px; }
.vc-lines .vc-adv { display: none; }
.vc-lines.vc-show-adv .vc-adv { display: table-cell; }
.vc-lines .vc-l-desc { min-width: 240px; }
.vc-lines .vc-l-acc { width: 220px; min-width: 200px; }
.vc-lines .vc-l-qty { width: 80px; }
.vc-lines .vc-l-price, .vc-lines .vc-l-vat, .vc-lines .vc-l-net { width: 130px; }
.vc-lines .vc-l-code { width: 140px; }
.vc-lines .vc-l-x { width: 44px; text-align: right; }
.vc-lines input[readonly] { background: #f7f9fc; }
.vc-inv-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.vc-inv-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vc-page .vc-inv-tools .btn { margin: 0; }
.vc-page .vc-inv-tools .form-check-label { display: inline; font-weight: 500; color: var(--vc-muted); margin: 0; }
.vc-inv-totals { display: grid; grid-template-columns: auto auto; gap: 6px 0; margin: 0; min-width: 260px; font-variant-numeric: tabular-nums; }
.vc-inv-totals dt { font-weight: 500; color: var(--vc-muted); font-size: 12px; }
.vc-inv-totals dd { margin: 0; padding-left: 32px; text-align: right; font-weight: 600; font-size: 12px; }
.vc-inv-totals .vc-inv-grand { border-top: 1px solid var(--vc-line); padding-top: 8px; margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--vc-text); }
@media (max-width: 767px) {
  .vc-inv-totals { width: 100%; }
  .vc-lines .vc-l-desc { min-width: 200px; }
}
.vc-invoice.is-locked .form-control, .vc-invoice.is-locked .form-select { background-color: #f7f9fc; border-color: var(--vc-line-soft); color: var(--vc-text); opacity: 1; }
.vc-invoice.is-locked .vc-seg label { cursor: default; }
.vc-page .choices.is-disabled .choices__inner { background-color: #f7f9fc; opacity: 1; }
.vc-page .choices.is-disabled .choices__item { color: var(--vc-text); opacity: 1; }

/* --- Report tables ------------------------------------------------------------
 * Every financial report reads the same way: a quiet header, section headings
 * with an accent, account lines indented under them, subtotals ruled off and
 * the bottom line in a band of its own. Figures line up on the decimal point.
 */
.vc-page table.vc-report { font-size: 12px; font-variant-numeric: tabular-nums; }
.vc-report > thead > tr > th { background: #f6f9fd; padding: 11px 16px; border-bottom: 1px solid var(--vc-line); }
.vc-report > tbody > tr > td { padding: 9px 16px; border-bottom: 1px solid var(--vc-line-soft); }
.vc-report > tbody > tr:hover > td { background: #f8fbff; }
.vc-report td.num, .vc-report th.num { white-space: nowrap; }

/* Section heading: a full-width row naming the group. */
.vc-report > tbody > tr.table-light > td[colspan]:only-child {
  background: #fff !important; padding: 18px 16px 8px; border-bottom: 1px solid var(--vc-line);
  font-size: 11.5px; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--vc-navy-2);
}
.vc-report > tbody > tr.table-light:first-child > td[colspan]:only-child { padding-top: 12px; }
.vc-report > tbody > tr.table-light:has(> td[colspan]:only-child):hover > td { background: #fff !important; }

/* Account lines under a section are indented, with the code set apart. */
table.vc-report:has(tr.table-light) > tbody > tr:not(.table-light):not(:has(> td.fw-semibold:first-child)):not(:has(> td.fw-bold:first-child)) > td:first-child { padding-left: 32px; }
.vc-report td > .text-muted.small:first-child, .vc-report .vc-code {
  display: inline-block; min-width: 40px; margin-right: 6px; font-size: 11.5px; font-weight: 600; color: var(--vc-muted);
  font-variant-numeric: tabular-nums;
}

/* Subtotal: ruled off above, figures in weight. */
.vc-report > tbody > tr:not(.table-light):has(> td.fw-semibold:first-child) > td {
  border-top: 1px solid var(--vc-line); font-weight: 600; background: #fcfdff;
}
/* Key line within the report, such as gross profit or total assets. */
.vc-report > tbody > tr.table-light:not(:has(> td[colspan]:only-child)) > td {
  background: var(--vc-cyan-100) !important; border-top: 1px solid #cfe3f3; border-bottom: 1px solid #cfe3f3;
  font-weight: 700; color: var(--vc-navy);
}
/* The bottom line. */
.vc-report > tfoot > tr > td, .vc-report > tfoot > tr > th {
  background: #f3f7fc; border-top: 2px solid var(--vc-navy-2); border-bottom: 0;
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--vc-navy);
}
.vc-report > tfoot > tr + tr > td, .vc-report > tfoot > tr + tr > th { border-top: 1px solid #d6e2f0; }
.vc-report .text-danger { color: #c0262d !important; }
/* Sort arrows sit after the heading on every column, figures included. */
.vc-page table.dataTable th.dt-type-numeric div.dt-column-header,
.vc-page table.dataTable th.dt-type-date div.dt-column-header { flex-direction: row; justify-content: flex-end; }
.vc-page table.dataTable th:not(.dt-type-numeric):not(.dt-type-date) div.dt-column-header { justify-content: flex-start; }
@media print {
  .vc-report > tbody > tr.table-light:not(:has(> td[colspan]:only-child)) > td, .vc-report > tfoot > tr > td { background: #fff !important; }
}
/* DataTables right-aligns anything that looks like a number, codes included.
   Only columns the page marks as figures (.num) are right-aligned. */
.vc-page table.dataTable th.dt-type-numeric:not(.num), .vc-page table.dataTable td.dt-type-numeric:not(.num),
.vc-page table.dataTable th.dt-type-date:not(.num), .vc-page table.dataTable td.dt-type-date:not(.num) { text-align: left; }
.vc-page table.dataTable th.dt-type-numeric:not(.num) div.dt-column-header,
.vc-page table.dataTable th.dt-type-date:not(.num) div.dt-column-header { justify-content: flex-start; }
.vc-page table.dataTable thead > tr > th.dt-orderable-asc:hover, .vc-page table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: none; color: var(--vc-text); }
.vc-step-n.is-done { color: #fff; border-color: var(--vc-cyan-600); background: var(--vc-cyan-600); }
.list-group { --bs-list-group-bg: #fff; }
.vc-page label.vc-choice:has(.vc-choice-note) { align-items: flex-start; }
.vc-page label.vc-choice:has(.vc-choice-note) > input { margin-top: 3px; }
.vc-page .vc-lines .remove-line { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
/* On a phone each invoice line becomes a small card: description across the
   top, the figures two by two underneath, each with its label. */
@media (max-width: 767px) {
  .vc-lines-wrap { overflow: visible; }
  .vc-lines thead { display: none; }
  .table-responsive > .vc-lines, .vc-lines, .vc-lines tbody { display: block; width: 100%; min-width: 0; }
  .vc-lines tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--vc-line-soft); }
  .vc-lines tbody td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; background: none !important; }
  .vc-lines td.vc-l-desc, .vc-lines td.vc-l-acc { grid-column: 1 / -1; }
  .vc-lines td.vc-l-desc { padding-right: 46px !important; }
  .vc-lines td.vc-adv { display: none; }
  .vc-lines.vc-show-adv td.vc-adv { display: block; }
  .vc-lines td.vc-l-x { position: absolute; top: 34px; right: 12px; }
  .vc-lines td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vc-muted); margin-bottom: 4px; }
}
/* An empty chart or list says why it is empty and what to do next. */
.vc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 220px; padding: 24px 12px; }
.vc-empty > .ti { width: 46px; height: 46px; border-radius: 12px; display: grid; place-content: center; font-size: 22px; color: var(--vc-cyan-600); background: var(--vc-cyan-100); margin-bottom: 6px; }
/* Pill tabs take the app's colour, not Bootstrap's blue. */
.vc-page .nav-pills .nav-link { color: var(--vc-muted); font-weight: 600; font-size: 12px; border-radius: 8px; }
.vc-page .nav-pills .nav-link:hover { color: var(--vc-text); background: var(--vc-line-soft); }
.vc-page .nav-pills .nav-link.active, .vc-page .nav-pills .show > .nav-link { color: #fff; background: var(--vc-cyan-600); }
.vc-page .nav-pills .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }
/* On a phone the match panel stays within the screen while the table scrolls. */
@media (max-width: 767px) {
  .vc-page tr.collapse > td > .match-panel { position: sticky; left: 0; width: calc(100vw - 72px); max-width: calc(100vw - 72px); }
}

/* Done is green, needed is amber, everywhere a list of steps is shown. */
.vc-page .vc-step-n.is-done, .vc-steps li.is-done .vc-step-n {
  color: #0f7a4a; background: #e7f7ef; border-color: #9fd9bd;
}
.vc-steps li.is-done:not(:last-child)::after { background: #9fd9bd; }
.vc-step-n.is-essential { color: #b45309; background: #fff7ed; border-color: #fbbf77; }
.vc-chip.is-essential { border-color: #fbd3a6; background: #fff7ed; color: #b45309; }
.vc-setup-progress .progress-bar { background: linear-gradient(90deg, #0f7a4a, #16a34a) !important; }
.vc-firstrun { border-color: #fbd3a6; background: linear-gradient(90deg, #fff7ed 0%, #ffffff 55%); }
.vc-firstrun .vc-import-icon { background: linear-gradient(135deg, #c2410c, #f59e0b); }
.vc-page .vc-steps-list .btn-ghost { --b-fg: #0f7a4a; --b-bg-hover: #e7f7ef; }

/* --- Invoice template designer --------------------------------------------
 * Settings on the left, an A4 preview on the right that stays in view while
 * the settings scroll.
 */
.itd-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.itd-grid > div { min-width: 0; }
.itd-preview-wrap { position: sticky; top: calc(var(--vc-topbar-h) + 12px); }
.itd-preview-frame { width: 100%; height: calc(100vh - var(--vc-topbar-h) - 120px); min-height: 560px; border: 0; border-radius: 8px; background: #e9edf3; display: block; }
@media (max-width: 1199px) {
  .itd-grid { grid-template-columns: 1fr; }
  .itd-preview-wrap { position: static; }
  .itd-preview-frame { height: 80vh; }
}
.itd-sample-wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; background: var(--vc-cyan-100); }
.itd-sample { font-size: 18px; font-weight: 800; color: var(--vc-navy-2); letter-spacing: .02em; word-break: break-all; }
.vc-page button.vc-chip.itd-token { cursor: pointer; font-size: 12px; min-height: 30px; padding: 4px 10px; margin: 0; }
.vc-page button.vc-chip.itd-token:hover { border-color: var(--vc-cyan); color: var(--vc-navy-2); }
.itd-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.itd-color { display: flex; align-items: center; gap: 8px; }
.itd-color input[type=color] { flex: 0 0 42px; width: 42px; height: 38px; padding: 3px; border: 1px solid #d8e0ec; border-radius: 9px; background: #fff; cursor: pointer; }
.itd-color .form-control { min-width: 0; }
.itd-logo { max-height: 44px; max-width: 160px; border: 1px solid var(--vc-line); border-radius: 8px; padding: 4px; background: #fff; }

.itd-blocks { display: flex; flex-direction: column; gap: 8px; }
.itd-block { border: 1px solid var(--vc-line); border-radius: 10px; background: #fff; }
.itd-block.sel { border-color: var(--vc-cyan); box-shadow: 0 0 0 3px var(--vc-cyan-100); }
.itd-block .bhead { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.itd-block .grip { color: #9fb2cc; cursor: grab; font-size: 16px; }
.itd-block .btitle { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itd-block .btype { color: var(--vc-muted); font-size: 14px; }
.itd-block .bchev { color: var(--vc-muted); transition: transform .15s; }
.itd-block.open .bchev { transform: rotate(180deg); }
.vc-page .itd-block .bdel { border: 0; background: none; color: #b42318; padding: 2px 4px; min-height: 0; margin: 0; font-size: 15px; }
.itd-block .bbody { display: none; flex-wrap: wrap; gap: 10px 12px; padding: 4px 12px 14px; border-top: 1px solid var(--vc-line-soft); }
.itd-block.open .bbody { display: flex; padding-top: 12px; }
.itd-block .bfield { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 0; margin: 0; }
.vc-page .itd-block .bfield > span { font-size: 11.5px; font-weight: 600; color: #38496a; }
.itd-block .wide { flex: 1 1 100%; }
.itd-block .color-f { flex: 0 0 auto; }
.itd-block .color-f input[type=color] { width: 46px; height: 34px; padding: 2px; border: 1px solid #d8e0ec; border-radius: 8px; background: #fff; }
.fs-editor { padding: 10px 12px; border-left: 3px solid var(--vc-cyan-100); background: #fafcff; border-radius: 0 8px 8px 0; }
.fs-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.fs-arrows { display: flex; flex-direction: column; gap: 2px; }
.vc-page .fs-arrows button, .vc-page .fs-del { width: 24px; height: 18px; min-height: 0; padding: 0; margin: 0; border: 1px solid #d0deef; border-radius: 5px; background: #fff; color: #1f3554; font-size: 11px; display: grid; place-content: center; }
.vc-page .fs-del { height: 26px; width: 26px; color: #b42318; border-color: #f0cfcf; }
.fs-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-key { font-size: 10.5px; color: var(--vc-muted); }
.fs-add { display: flex; gap: 8px; margin-top: 8px; }

.itd-cols { border: 1px solid var(--vc-line); border-radius: 10px; overflow: hidden; }
.itd-cols .col-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--vc-line-soft); background: #fff; }
.itd-cols .col-row:last-child { border-bottom: 0; }
.itd-cols .col-row.dragging { opacity: .4; }
.itd-cols .grip { color: #9fb2cc; cursor: grab; }
.itd-cols .col-row .form-control { flex: 1 1 110px; min-width: 0; }
.itd-cols .col-row .form-select { flex: 0 0 92px; width: 92px; }
.itd-cols .col-hint { flex: 1 1 100%; font-size: 11px; color: var(--vc-muted); padding-left: 26px; }
.itd-savebar .vc-actionbar { border-top: 0; border-radius: var(--vc-radius); }
.vc-doc-frame { width: 100%; height: 80vh; min-height: 600px; border: 0; border-radius: 8px; background: #e9edf3; display: block; }
.vc-opt-note { display: block; font-size: 12px; font-weight: 400; color: var(--vc-muted); margin-top: 1px; }
.vc-page .itd-block .bdel { width: 30px; height: 30px; min-height: 30px; display: grid; place-content: center; border-radius: 8px; }
.vc-page .itd-block .bdel:hover { background: #fdeeee; }
/* A searchable dropdown opened inside a table is not cut off by the table's scroll box. */
.table-responsive:has(.choices.is-open), .vc-lines-wrap:has(.choices.is-open) { overflow: visible; }
.vc-page .choices.is-open { z-index: 30; }
.vc-page .choices__list--dropdown, .vc-page .choices__list[aria-expanded] { z-index: 40; min-width: 220px; }
.vc-page td .choices { margin-bottom: 0; min-width: 120px; }
.vc-lines .vc-incl-on { display: none; }
.vc-lines.is-incl .vc-incl-on { display: inline; }
.vc-lines.is-incl .vc-incl-off { display: none; }

/* Payroll */
.vc-report tr.vc-total > td { font-weight: 700; border-top: 2px solid var(--vc-line); background: #f6f9fd; }
.vc-payrun input.vc-pay { min-width: 96px; max-width: 120px; margin-left: auto; font-variant-numeric: tabular-nums; }
.vc-payrun tr.vc-removed > td { opacity: .45; text-decoration: line-through; }
.vc-payrun tr.vc-removed .btn-danger-light { opacity: 1; background: var(--vc-red-600, #dc2626); color: #fff; }
.vc-tpl-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vc-text); }
.vc-tpl-name .ti { width: 30px; height: 30px; border-radius: 8px; display: grid; place-content: center; font-size: 16px; color: var(--vc-cyan-600); background: var(--vc-cyan-100); }
.vc-tpl-list .vc-chip { font-weight: 500; }
@media (min-width: 768px) { .vc-option-list.vc-option-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.vc-page .card.vc-savebar.vc-savebar { padding: 0; } .vc-savebar > .vc-actionbar { border-top: 0; border-radius: var(--vc-radius); }

/* Forms and returns */
.vc-formtable td.vc-box { width: 64px; white-space: nowrap; }
.vc-formtable td.num { width: 190px; }
.vc-formtable td.vc-wide { width: 48%; }
.vc-formtable input.is-changed { border-color: #f0b46a; background: #fffaf2; }
.vc-forms-list td { padding-top: 12px; padding-bottom: 12px; }
.vc-forms-list td.vc-form-code { width: 120px; }
.vc-forms-list td.vc-form-code span { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--vc-cyan-600); background: var(--vc-cyan-100); white-space: nowrap; }
.vc-forms-list td.vc-form-open { width: 340px; }
.vc-forms-list td.vc-form-open .choices { min-width: 200px; margin-bottom: 0; }
@media (max-width: 767.98px) {
  .vc-forms-list tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--vc-line-soft); }
  .vc-forms-list td { display: block; width: auto !important; border: 0; padding: 4px 16px; }
  .vc-forms-list td.vc-form-open form { justify-content: flex-start !important; }
  .vc-formtable td.num, .vc-formtable td.vc-wide { width: auto; }
}

/* Sidebar: logo and who is signed in, as on the portal */
.vc-sidebar .vc-brand .vc-brand-logo { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; border-radius: 6px; }
.vc-lastlogon { display: flex; flex-direction: column; gap: 1px; padding: 12px 20px 12px; border-bottom: 1px dashed var(--vc-line); font-size: 12px; line-height: 1.45; }
.vc-lastlogon .lg-name { font-size: 12px; font-weight: 700; color: var(--vc-text); }
.vc-lastlogon .lg-meta { color: #5f6f86; }
.vc-lastlogon .lg-stamp { color: #5f6f86; font-size: 11.5px; }
.vc-lastlogon .vc-lastlogon-out { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #5f6f86; font-size: 12px; text-decoration: none; align-self: flex-start; }
.vc-lastlogon .vc-lastlogon-out .ti { font-size: 14px; }
/* Sign out is a small form (it posts the session's token); the form takes no room of its own. */
.vc-logout-form { display: contents; }
button.vc-lastlogon-out { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.vc-lastlogon .vc-lastlogon-out:hover { color: var(--vc-navy-2); }
.vc-lastlogon .vc-lastlogon-out:hover span { text-decoration: underline; }
body .vc-sidebar .vc-lastlogon { border-bottom-color: var(--s-rail); }
body .vc-sidebar .vc-lastlogon .lg-name { color: var(--s-fg-strong); }
body .vc-sidebar .vc-lastlogon .lg-meta, body .vc-sidebar .vc-lastlogon .lg-stamp, body .vc-sidebar .vc-lastlogon .vc-lastlogon-out { color: var(--s-muted); }
body .vc-sidebar .vc-lastlogon .vc-lastlogon-out:hover { color: var(--s-fg-strong); }
.vc-logo-preview { width: 72px; height: 72px; border: 1px solid var(--vc-line); border-radius: 12px; display: grid; place-content: center; background: #fff; }
.vc-logo-preview img { max-width: 56px; max-height: 56px; object-fit: contain; }
.vc-logo-preview.is-unsaved { border: 2px dashed var(--vc-cyan); }
.vc-logo-unsaved { margin-top: 6px; font-size: .72rem; font-weight: 600; color: var(--vc-muted); }
.vc-brand-preview { display: contents; }
.vc-logo-preview .vc-mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-cyan) 100%); }

/* Back-office features */
.vc-budget-grid input.form-control { min-width: 84px; font-variant-numeric: tabular-nums; }
.vc-budget-grid td { padding: 4px 4px; }
.vc-budget-grid td:first-child { padding-left: 16px; min-width: 220px; }
.vc-claim-table input.form-control, .vc-claim-table select.form-select { min-width: 90px; }
.vc-claim-table td { padding: 6px 4px; }
.vc-claim-table td:first-child { padding-left: 16px; }
.vc-pr-table td:first-child, .vc-pr-table th:first-child { padding-left: 16px; }
.vc-ye-list .list-group-item { padding: 14px 16px; }
details > summary { cursor: pointer; color: var(--vc-navy-2); font-weight: 600; }

/* Users: what each action does, said in words beside its icon. */
.vc-user-menu { min-width: 270px; }
.vc-user-menu .dropdown-item { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; padding: 8px 14px; white-space: normal; font-weight: 600; }
.vc-user-menu .dropdown-item .ti { grid-row: span 2; font-size: 17px; color: var(--vc-cyan-600); margin-top: 1px; }
.vc-user-menu .dropdown-item span { grid-column: 2; font-size: 12px; font-weight: 400; color: var(--vc-muted); }
.vc-users-table .table { min-width: 760px; }
.vc-vat-docs .table { min-width: 980px; }
.vc-vat-docs td .vc-pill { white-space: nowrap; }
.vc-vat-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; }

/* Subscriptions */
.vc-plan-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #12628f; background: var(--vc-cyan-100); border-radius: 999px; padding: 2px 7px; line-height: 1.4; }
.vc-subnav a .vc-plan-tag { float: right; margin-top: 1px; }
.vc-billbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600; border: 1px solid; }
.vc-billbar > span { flex: 1; }
.vc-billbar .ti { font-size: 18px; }
.vc-billbar.info { background: var(--vc-cyan-100); border-color: #cfe6f6; color: #12507a; }
.vc-billbar.warn { background: #fff6e6; border-color: #f4dcae; color: #8a5a10; }
.vc-billbar.bad { background: #fdecec; border-color: #f4cfd1; color: #8f1c13; }
.vc-interval { display: inline-flex; background: #eef3f9; border-radius: 999px; padding: 3px; gap: 2px; }
.vc-interval button { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 650; color: var(--vc-muted); cursor: pointer; min-height: 0; }
.vc-interval button.on { background: var(--vc-navy); color: #fff; }
.vc-interval button span { font-size: 11px; color: #0f7a4a; margin-left: 3px; }
.vc-interval button.on span { color: #9fe3c1; }
.vc-plan { border: 1px solid var(--vc-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; position: relative; background: #fff; }
.vc-plan.is-popular { border: 2px solid var(--vc-cyan); }
.vc-plan.is-current { background: #f7fbfe; }
.vc-plan-flag { position: absolute; top: -11px; left: 18px; background: linear-gradient(135deg, var(--vc-cyan-600), var(--vc-navy-2)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.vc-plan-name { font-size: 17px; font-weight: 750; color: var(--vc-navy); }
.vc-plan-blurb { font-size: 12px; color: var(--vc-muted); min-height: 34px; }
.vc-plan-price { font-size: 32px; font-weight: 800; color: var(--vc-navy); letter-spacing: -.02em; margin-top: 8px; line-height: 1.1; }
.vc-plan-per { font-size: 12px; color: var(--vc-muted); margin-bottom: 12px; min-height: 18px; }
.vc-plan-list { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12px; flex: 1; }
.vc-plan-list li { padding: 5px 0; border-top: 1px solid var(--vc-line-soft); display: flex; gap: 8px; align-items: center; }
.vc-plan-list li:first-child { border-top: 0; }
.vc-plan-list .ti { color: #0f7a4a; font-size: 15px; }
.vc-plan-edit .form-control { min-width: 70px; }
.vc-plan-list li .ti { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; }
form.mt-auto > .vc-actionbar { justify-content: flex-end; }
.vc-nav a > span:not(.vc-plan-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-plan-tag { flex: 0 0 auto; font-size: 9px; padding: 2px 6px; }
.vc-lock-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-content: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--vc-navy-2) 0%, var(--vc-cyan-600) 100%); }

/* --- Subscription: yearly saving, the card call to action, Stripe facts --- */
.vc-save-tag { display: inline-block; background: #e3f5ea; color: #0f7a4a; font-size: 11px; font-weight: 750; padding: 1px 8px; border-radius: 999px; line-height: 1.6; }
.btn-primary .vc-save-tag { background: #9fe3c1; color: #053a20; }
.vc-plan-price .vc-was { font-size: 16px; font-weight: 600; color: #8a98ad; margin-left: 6px; letter-spacing: 0; }
.vc-start-card { border: 1px solid #b9dcf2; background: linear-gradient(135deg, #f2f9fe, #fff 70%); }
.vc-start-card.is-bad { border-color: #f3c4c4; background: linear-gradient(135deg, #fff5f5, #fff 70%); }
.vc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; background: var(--vc-bg, #f4f7fb); border-radius: 10px; padding: 10px 12px; }
.vc-kv span { display: block; color: var(--vc-muted); font-size: 11px; }
.vc-kv b { font-weight: 650; color: var(--vc-navy, #0b1f4d); overflow-wrap: anywhere; }
.vc-legal-preview { max-height: 640px; overflow: auto; font-size: 13px; line-height: 1.6; }
.vc-legal-preview h2 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: var(--vc-navy, #0b1f4d); }
.vc-legal-preview h2:first-child { margin-top: 0; }
.vc-legal-preview ul { padding-left: 18px; margin-bottom: 10px; }
.vc-legal-preview p { margin-bottom: 8px; }
.vc-doc-btns .btn { padding-left: 8px; padding-right: 8px; }
#invoices .table > :not(caption) > * > * { padding-left: 10px; padding-right: 10px; }
.vc-start-card .card-body { flex-wrap: wrap; }
.vc-start-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--vc-cyan-600, #1877b0), var(--vc-navy-2, #123b8f)); }
.vc-start-icon.bad { background: linear-gradient(135deg, #e0565b, #b4232a); }
.vc-start-text { flex: 1 1 320px; min-width: 0; }

/* =====================================================================
   SIDEBAR DESIGN, LIGHT TAB (20/10/2026), as on the staff portal.
   The default sidebar style ("Light blue" on Settings, Appearance; the
   setting value is still 'light'). A soft blue-grey sidebar. The page you are
   on is a tab in the page's own background colour that runs to the sidebar's
   right edge and joins the page, with curved corners above and below it. No
   marker line on the left: the tab shape alone shows the page. The
   signed-in block is a white card with the logout button on the right. The
   menu's own scrollbar is not drawn (it would sit between the tab and the
   page); the wheel, the trackpad and touch still scroll it. The other
   sidebar styles (White, Very light grey, Navy) are unchanged.
   ===================================================================== */
.vc-lastlogon .lg-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vc-sidebar .vc-brand-sub { font-weight: 500; opacity: .72; }

body[data-vc-sidebar="light"] #vc-sidebar {
  --s-tab: var(--vc-bg);
  background:
    radial-gradient(circle at 100% 0, rgba(59, 163, 232, .18), rgba(59, 163, 232, 0) 240px),
    linear-gradient(180deg, #dfe8f5 0%, #d8e3f2 60%, #d3dfef 100%);
  border-right: 0;
  box-shadow: inset -1px 0 0 #c9d7ea;
  color: #26365a;
}
/* Brand: VATcube in navy, ACCOUNTS underneath in blue capitals. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-brand { border-bottom: 0; color: #0b1f4d; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-brand-name { color: #0b1f4d; font-weight: 800; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-brand-sub { color: #3b78c4; opacity: 1; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; }

/* Signed-in card. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon {
  position: relative; flex-direction: row; align-items: center; gap: 10px;
  margin: 2px 12px 10px; padding: 10px 12px;
  background: #fff; border: 1px solid #d3deee; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 35, 70, .06);
}
/* The logout button sits at the top right, beside the name, so the lines
   under the name have the card's full width. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .lg-name { font-size: 13px; font-weight: 800; color: #0b1f4d; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .lg-meta { font-size: 11px; color: #64748b; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .lg-stamp { font-size: 10.5px; color: #64748b; white-space: nowrap; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-logout-form { position: absolute; top: 6px; right: 6px; margin: 0; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .vc-lastlogon-out {
  margin: 0; width: 28px; height: 28px; border-radius: 8px; justify-content: center; gap: 0; color: #174a93;
}
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .vc-lastlogon-out:hover { background: #eaf2ff; color: #0b1f4d; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .vc-lastlogon-out .ti { font-size: 17px; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-lastlogon .vc-lastlogon-out span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The menu: no scrollbar, and pulled out to the sidebar's right edge so the
   tab can reach it. Every other row keeps a 12px gap on the right. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav { padding-right: 0; scrollbar-width: none; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a:not(.active) { margin-right: 12px; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-subnav { margin-right: 0; border-left: 1px dashed #a9c0e0; }

/* Group headings with a hairline running to the edge. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav .vc-nav-group {
  display: flex; align-items: center; gap: 8px; color: #6b7fa3; letter-spacing: .16em; font-size: 10.5px; padding-right: 0;
}
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav .vc-nav-group::after { content: ""; flex: 1 1 auto; height: 1px; background: #c2d2e8; margin-right: 18px; }

/* Rows: navy label, blue icon, a soft white wash on hover. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a { color: #26365a; font-weight: 600; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a .ti { color: #174a93; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a .vc-caret { color: #8a9bb8; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-subnav a { color: #4a5b7a; font-weight: 500; }
@media (hover: hover) {
  body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a:hover:not(.active) { background: rgba(255, 255, 255, .55); color: #0b1f4d; }
  body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a:hover:not(.active) .ti { color: #0b1f4d; }
}
@media (hover: none) {
  body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a:hover:not(.active) { background: transparent; }
}
/* An open group, and the group holding the page you are on. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.vc-has-sub[aria-expanded="true"],
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.vc-has-sub.open { color: #0b1f4d; font-weight: 700; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.vc-has-sub[aria-expanded="true"] .ti:not(.vc-caret),
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.vc-has-sub.open .ti:not(.vc-caret) { color: #0b1f4d; }

/* The page you are on: a tab in the page colour, joined to the page. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active,
body[data-vc-sidebar="light"] #vc-sidebar .vc-subnav a.active {
  position: relative; margin-right: 0; border-radius: 12px 0 0 12px;
  background: var(--s-tab); color: #0b1f4d; font-weight: 700; box-shadow: none;
}
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active .ti { color: #0b1f4d; }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active::before,
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active::after {
  content: ""; position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none;
}
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active::before { top: -14px; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--s-tab) 14px); }
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active::after { bottom: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--s-tab) 14px); }
/* The plan tag inside a tab keeps clear of the joined edge. */
body[data-vc-sidebar="light"] #vc-sidebar .vc-nav a.active .vc-plan-tag { margin-right: 12px; }

/* The discount shows in red (20/10/2026). */
.vc-save-tag { background: #fdecec; color: #b42318; }

/* =====================================================================
   STEP-BY-STEP GUIDES AND THE ACADEMY (20/10/2026)
   ===================================================================== */
.vc-help .vc-help-howto { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-weight: 600; white-space: nowrap; }
.vc-help .vc-help-howto .ti { font-size: 15px; margin: 0; }
.vc-learn-area { margin-bottom: 26px; }
.vc-learn-area h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--vc-navy); margin: 0 0 12px; }
.vc-learn-area h2 .ti { color: var(--vc-cyan); font-size: 20px; }
.vc-learn-area h2 span { font-size: 12px; font-weight: 600; color: var(--vc-muted); background: #eef3fa; border-radius: 999px; padding: 1px 8px; }
.vc-learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vc-learn-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border: 1px solid var(--vc-line); border-radius: 12px; color: var(--vc-text); text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.vc-learn-card:hover { border-color: #9fcde9; box-shadow: 0 8px 22px rgba(13, 35, 64, .08); transform: translateY(-1px); color: var(--vc-text); }
.vc-learn-card b { color: var(--vc-navy); font-size: 14px; }
.vc-learn-card .d { color: var(--vc-muted); font-size: 12.5px; line-height: 1.45; flex: 1; }
.vc-learn-card .m { color: #6b7f9c; font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.vc-learn-before { background: #f3f8fd; border: 1px solid #d9e8f6; border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.vc-learn-before b { display: flex; align-items: center; gap: 6px; color: var(--vc-navy); margin-bottom: 4px; }
.vc-learn-before ul { padding-left: 20px; }
.vc-steps-list { list-style: none; padding: 0; margin: 0 0 12px; }
.vc-step-n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--vc-cyan), var(--vc-navy-2)); font-size: 13px; }
.vc-step-n.done { background: #0f7a4a; }
.vc-step-t { font-size: 15px; font-weight: 700; color: var(--vc-navy); margin: 4px 0 4px; }
.vc-step-tip, .vc-step-warn { display: flex; gap: 8px; align-items: flex-start; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; }
.vc-step-tip { background: #f2f8fd; color: #26405f; }
.vc-step-tip .ti { color: var(--vc-cyan); margin-top: 1px; }
.vc-step-warn { background: #fff6e6; color: #7a4b00; }
.vc-step-warn .ti { color: #b26a00; margin-top: 1px; }
.vc-lesson p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.vc-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vc-course-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border: 1px solid var(--vc-line); border-radius: 14px; color: var(--vc-text); text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.vc-course-card:hover { border-color: #9fcde9; box-shadow: 0 10px 26px rgba(13, 35, 64, .09); transform: translateY(-2px); color: var(--vc-text); }
.vc-course-card b { color: var(--vc-navy); font-size: 15px; }
.vc-course-card .d { color: var(--vc-muted); font-size: 12.5px; line-height: 1.5; flex: 1; }
.vc-course-card .m, .vc-course-card .s { color: #6b7f9c; font-size: 11.5px; }
.vc-course-card .s .ti { color: #0f7a4a; }
.vc-course-card .progress { display: block; }
.vc-course-card .progress-bar { display: block; height: 100%; }
.vc-course-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--vc-cyan), var(--vc-navy-2)); flex: 0 0 auto; }
.vc-academy-stats { text-align: center; padding: 4px 12px; border-left: 1px solid var(--vc-line); }
.vc-academy-stats b { display: block; font-size: 20px; color: var(--vc-navy); }
.vc-academy-stats span { font-size: 11.5px; color: var(--vc-muted); }
.vc-quiz-q { border: 1px solid var(--vc-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.vc-quiz-q legend { float: none; width: auto; font-size: 14px; font-weight: 650; color: var(--vc-navy); margin-bottom: 8px; padding: 0; }
.vc-quiz-q .form-check { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; margin: 0; }
.vc-quiz-q .form-check-input { margin: 3px 0 0; flex: 0 0 auto; }
.vc-quiz-q.ok { border-color: #9fd9b8; background: #f3fbf6; }
.vc-quiz-q.bad { border-color: #f1b7b0; background: #fff7f6; }
@media (max-width: 600px) { .vc-academy-stats { border-left: 0; } }
.vc-page .list-group-item-action, .vc-page .list-group-item-action:hover, .vc-page a.vc-learn-card, .vc-page a.vc-course-card { text-decoration: none; }
.vc-page .list-group-item-action:hover b { text-decoration: underline; }
.vc-academy-head .card-body > .flex-grow-1 { flex: 1 1 360px; }

/* =====================================================================
   SIDEBAR SCROLLING (20/10/2026)
   The menu scrolls on its own and never hands the scroll on to the page.
   Its scroller is drawn by the page itself (.vc-nav-rail) on the left edge
   of the menu, so it shows the same on Windows, a Mac and a phone, whatever
   the computer's own scroll bar setting. The browser's scroll bar is hidden.
   The tab of the page you are on still joins the page on the right.
   ===================================================================== */
.vc-sidebar { overflow: hidden; overscroll-behavior: contain; }
.vc-sidebar .vc-nav { min-height: 0; overscroll-behavior: contain; scrollbar-width: none; }
.vc-sidebar .vc-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.vc-nav-rail {
  position: absolute; left: 2px; width: 8px; z-index: 2;
  border-radius: 4px; background: var(--s-rail-bg, rgba(23, 74, 147, .10));
  cursor: pointer; touch-action: none;
}
.vc-nav-rail[hidden] { display: none; }
.vc-nav-thumb {
  position: absolute; left: 0; right: 0; top: 0; min-height: 28px;
  border-radius: 4px; background: var(--s-sb, #8fa8cc);
  cursor: grab; transition: background .15s ease;
}
.vc-nav-rail:hover .vc-nav-thumb, .vc-nav-rail.dragging .vc-nav-thumb { background: var(--s-sb-hover, #174a93); }
.vc-nav-rail.dragging .vc-nav-thumb { cursor: grabbing; }
body.vc-nav-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body[data-vc-sidebar="light"] #vc-sidebar { --s-rail-bg: rgba(23, 74, 147, .14); --s-sb: #5f86c2; --s-sb-hover: #174a93; }
body[data-vc-sidebar="dark"] .vc-sidebar { --s-rail-bg: rgba(255, 255, 255, .08); --s-sb: rgba(255, 255, 255, .35); --s-sb-hover: rgba(255, 255, 255, .6); }