/* ZModern.css - the shared look of the modern pages. One place for the fields, cards, tables, tags, chips, buttons and the pager, so every page looks the same
   and a change here changes them all. Colours are the --ui-* variables of the active theme (Common.css and Content/themes). The pages keep only their own layout.
   A new page needs only <div class="mu"> around its content and these class names: mu-card, mu-fields, mu-tbl, mu-tag, mu-chip, mu-btn. The older pages use their own
   prefixes (cd / bp / vv), which are listed in the selectors below. */

:is(.mu, .cd, .bp, .vv) { font-family: Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text, #1f2933); }
:is(.mu-card, .cd-card, .bp-card, .vv-card) { background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #d3dae3); border-top: 4px solid var(--ui-accent, #ff6a00); border-radius: 12px; padding: 14px 18px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
:is(.mu-card, .cd-card, .bp-card, .vv-card) h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ui-muted, #5f6b7a); }
:is(.mu-fields, .cd-fields, .bp-fields, .vv-fields) { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
:is(.mu-fields, .cd-fields, .bp-fields, .vv-fields) .full { grid-column: 1 / -1; }

/* fields: a filled, rounded box with the label inside at the top and the accent colour on focus */
:is(.mu, .cd, .bp, .vv) .input-container, :is(.mu, .cd, .bp, .vv) .dropdown-container { position: relative; display: block; min-width: 0 !important; width: auto !important; margin: 0; background: var(--ui-field, #f5f7fa); border: 1px solid var(--ui-border, #d3dae3); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
:is(.mu, .cd, .bp, .vv) .input-container:focus-within, :is(.mu, .cd, .bp, .vv) .dropdown-container:focus-within { border-color: var(--ui-accent, #ff6a00); box-shadow: 0 0 0 3px transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { :is(.mu, .cd, .bp, .vv) .input-container:focus-within, :is(.mu, .cd, .bp, .vv) .dropdown-container:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent, #ff6a00) 25%, transparent); } }
:is(.mu, .cd, .bp, .vv) .input-container input, :is(.mu, .cd, .bp, .vv) .dropdown-container select { display: block; width: 100% !important; box-sizing: border-box; height: 56px; padding: 24px 12px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text, #1f2933); font: 600 17px Calibri, "Segoe UI", Arial, sans-serif; text-transform: none; outline: none; }
:is(.mu, .cd, .bp, .vv) .input-container input[type=file] { height: auto; padding: 24px 12px 10px; font-size: 14px; }
:is(.mu, .cd, .bp, .vv) .dropdown-container select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted, #5f6b7a) 50%), linear-gradient(135deg, var(--ui-muted, #5f6b7a) 50%, transparent 50%); background-position: calc(100% - 18px) 26px, calc(100% - 13px) 26px; background-size: 5px 5px; background-repeat: no-repeat; }
:is(.mu, .cd, .bp, .vv) .dropdown-container select option { background: var(--ui-surface, #fff); color: var(--ui-text, #1f2933); }
:is(.mu, .cd, .bp, .vv) .input-container input:disabled, :is(.mu, .cd, .bp, .vv) .input-container input[readonly] { color: var(--ui-muted, #5f6b7a); -webkit-text-fill-color: var(--ui-muted, #5f6b7a); opacity: 1; }
:is(.mu, .cd, .bp, .vv) .underline { display: none; }
:is(.mu, .bp, .vv) .input-container label, :is(.mu, .bp, .vv) .dropdown-container label { position: absolute; left: 12px; top: 6px !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ui-muted, #5f6b7a); pointer-events: none; transform: none !important; }
:is(.mu, .bp, .vv) .input-container input:focus + label, :is(.mu, .bp, .vv) .dropdown-container select:focus + label { color: var(--ui-accent, #ff6a00); }
:where(.mu, .cd, .bp, .vv) .input-container textarea { display: block; width: 100%; box-sizing: border-box; padding: 26px 12px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text, #1f2933); font: 600 15px/1.35 Calibri, "Segoe UI", Arial, sans-serif; outline: none; resize: vertical; }
:where(.mu, .bp, .vv) .input-container textarea:focus + label { color: var(--ui-accent, #ff6a00); }
:is(.mu, .cd, .bp, .vv) .validator-message { pointer-events: none; z-index: 0; left: auto; bottom: auto; width: auto; position: absolute; right: 10px; top: 4px; padding: 0; font-size: 11px; font-weight: 700; color: #e53935; background: transparent; }

/* tables: every row a rounded, bordered line that lifts on hover */
.mu-scroll, .bp-scroll, .vv-scroll { overflow-x: auto; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 14.5px; background: transparent; border: 0; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th { padding: 4px 10px; border: 0; background: transparent; color: var(--ui-muted, #5f6b7a); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-align: left; white-space: nowrap; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) td { padding: 8px 10px; border: 0; border-top: 1px solid var(--ui-border, #d3dae3); border-bottom: 1px solid var(--ui-border, #d3dae3); background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); vertical-align: middle; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) td:first-child { border-left: 1px solid var(--ui-border, #d3dae3); border-radius: 10px 0 0 10px; color: var(--ui-muted, #5f6b7a); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) td:last-child { border-right: 1px solid var(--ui-border, #d3dae3); border-radius: 0 10px 10px 0; text-align: center; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tbody tr { transition: transform .12s, box-shadow .12s; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tbody tr:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); border-radius: 10px; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tbody tr:hover td { background: var(--ui-surface, #fff); border-color: transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { table:is(.mu-tbl, .bp-tbl, .vv-tbl) tbody tr:hover td { background: color-mix(in srgb, var(--ui-accent, #ff6a00) 14%, var(--ui-surface, #fff)); } }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) td.amt, table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.amt { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.amt { font-weight: 700; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) td.dr { color: #c62828; font-weight: 700; } table:is(.mu-tbl, .bp-tbl, .vv-tbl) td.cr { color: #2e7d32; font-weight: 700; } table:is(.mu-tbl, .bp-tbl, .vv-tbl) td.nil { color: var(--ui-muted, #5f6b7a); font-weight: 400; }

/* tags and chips */
.mu-tag, .bp-tag { display: inline-block; padding: 1px 10px; border: 1.5px solid var(--ui-border, #d3dae3); border-radius: 999px; font-size: 12px; font-weight: 700; }
.mu-tag.Dr, .mu-tag.Debit, .bp-tag.Dr, .bp-tag.Debit { border-color: #c62828; color: #c62828; } .mu-tag.Cr, .mu-tag.Credit, .bp-tag.Cr, .bp-tag.Credit { border-color: #2e7d32; color: #2e7d32; }
.mu-chips, .vv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.mu-chip, .vv-chip { padding: 5px 14px; border: 1px solid var(--ui-border, #d3dae3); border-left: 5px solid var(--c, var(--ui-accent, #ff6a00)); border-radius: 10px; background: var(--ui-surface, #fff); }
.mu-chip small, .vv-chip small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ui-muted, #5f6b7a); }
.mu-chip b, .vv-chip b { font-size: 17px; }
.mu-chip.dr, .vv-chip.dr { --c: #c62828; } .mu-chip.cr, .vv-chip.cr { --c: #2e7d32; }
.mu-none, .vv-none { padding: 22px 8px; text-align: center; color: var(--ui-muted, #5f6b7a); font-size: 16px; }

/* buttons: bordered, rounded, the border colour says what it does; they lift on hover */
:is(.mu, .cd, .bp, .vv) input[type=submit].mu-btn, :is(.mu, .cd, .bp, .vv) input[type=submit].bp-btn, .vv-actions input[type=submit] { height: 44px; padding: 0 22px; border: 1.5px solid var(--btn, var(--ui-accent, #ff6a00)); border-radius: 12px; cursor: pointer; font: 700 16px Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text, #1f2933); background: var(--ui-field, #f5f7fa); box-shadow: none; text-shadow: none; transition: transform .12s, box-shadow .12s, background .12s; }
:is(.mu, .cd, .bp, .vv) input[type=submit].mu-btn:hover, :is(.mu, .cd, .bp, .vv) input[type=submit].bp-btn:hover, .vv-actions input[type=submit]:hover { background: var(--ui-surface, #fff); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); }

@supports (color: color-mix(in srgb, red 50%, blue)) { :is(.mu, .cd, .bp, .vv) input[type=submit].mu-btn:hover, :is(.mu, .cd, .bp, .vv) input[type=submit].bp-btn:hover, .vv-actions input[type=submit]:hover { background: color-mix(in srgb, var(--btn, var(--ui-accent, #ff6a00)) 16%, var(--ui-surface, #fff)); } }
:is(.mu, .cd, .bp, .vv) input[type=submit].mu-btn.primary, .vv-actions input[type=submit].primary { background: var(--ui-accent, #ff6a00); color: #fff; }
:is(.mu, .cd, .bp, .vv) input[type=submit].mu-btn.primary:hover, .vv-actions input[type=submit].primary:hover { background: var(--ui-accent, #ff6a00); color: #fff; filter: brightness(1.1); }
.mu-btn.danger, .bp-btn.danger { --btn: #c62828; } .mu-btn.warn, .bp-btn.warn { --btn: #ef8f00; }
/* the action column of a voucher page (side panel): full width buttons, side by side when the panel drops below the form */
:is(.mu-actions, .cd-actions, .bp-actions) .button-container { margin: 8px 0; width: 100%; display: block; }
:is(.mu-actions, .cd-actions, .bp-actions) .CommonDivForVisibelity { display: block; width: 100%; padding: 0; background: transparent; }
:is(.mu-actions, .cd-actions, .bp-actions) input[type=submit], :is(.mu-actions, .cd-actions, .bp-actions) input[type=button] { --btn: var(--ui-accent, #ff6a00); display: block; width: 100%; box-sizing: border-box; height: 44px; padding: 0 16px; border: 1.5px solid var(--btn); border-radius: 12px; cursor: pointer; font: 700 16px Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text, #1f2933); background: var(--ui-field, #f5f7fa); box-shadow: none; text-shadow: none; transition: transform .12s, box-shadow .12s, background .12s; }
:is(.mu-actions, .cd-actions, .bp-actions) input[type=submit]:hover, :is(.mu-actions, .cd-actions, .bp-actions) input[type=button]:hover, :is(.mu-actions, .cd-actions, .bp-actions) input[type=submit]:focus-visible { background: var(--ui-surface, #fff); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); outline: none; }

@supports (color: color-mix(in srgb, red 50%, blue)) { :is(.mu-actions, .cd-actions, .bp-actions) input[type=submit]:hover, :is(.mu-actions, .cd-actions, .bp-actions) input[type=button]:hover, :is(.mu-actions, .cd-actions, .bp-actions) input[type=submit]:focus-visible { background: color-mix(in srgb, var(--btn) 16%, var(--ui-surface, #fff)); } }
:is(.mu-actions, .cd-actions, .bp-actions) input[type=submit]:active, :is(.mu-actions, .cd-actions, .bp-actions) input[type=button]:active { transform: translateY(0); box-shadow: none; }
:is(.mu-actions, .cd-actions, .bp-actions) input.button-danger { --btn: #c62828; } :is(.mu-actions, .cd-actions, .bp-actions) input.button-attention { --btn: #ef8f00; }
@media (max-width: 980px) { :is(.mu-actions, .cd-actions, .bp-actions) .CommonDivForVisibelity { display: flex; flex-wrap: wrap; gap: 10px; } :is(.mu-actions, .cd-actions, .bp-actions) .button-container { flex: 1 1 150px; margin: 0; width: auto; } }

/* pager under a table that has data-mu-page (Common.js muPager) */
.mu-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 10px; font-family: Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text, #1f2933); }
.mu-pager select { height: 34px; padding: 0 8px; border: 1px solid var(--ui-border, #d3dae3); border-radius: 8px; background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); font: 600 14px Calibri, "Segoe UI", Arial, sans-serif; }
.mu-pager .mu-pg-info { color: var(--ui-muted, #5f6b7a); font-size: 14px; }
.mu-pager .mu-pg-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-pager .mu-pg-btns button { min-width: 36px; height: 34px; padding: 0 10px; border: 1.5px solid var(--ui-border, #d3dae3); border-radius: 10px; background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); font: 700 14px Calibri, "Segoe UI", Arial, sans-serif; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.mu-pager .mu-pg-btns button:hover:not(:disabled) { background: var(--ui-surface, #fff); border-color: var(--ui-accent, #ff6a00); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }

@supports (color: color-mix(in srgb, red 50%, blue)) { .mu-pager .mu-pg-btns button:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent, #ff6a00) 16%, var(--ui-surface, #fff)); } }
.mu-pager .mu-pg-btns button.on { background: var(--ui-accent, #ff6a00); border-color: var(--ui-accent, #ff6a00); color: #fff; }
.mu-pager .mu-pg-btns button:disabled { opacity: .45; cursor: default; }

/* ---- the settings button in the page header (and on the sign in page): a round button with a sliders icon in the accent colour ---- */
.hdr-set { display: inline-flex; align-self: center; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0 20px 0 0; border-radius: 50%; background: var(--ui-surface, #fff); color: var(--ui-accent, #ff6a00); border: 2px solid var(--ui-accent, #ff6a00); box-shadow: 0 2px 6px rgba(0,0,0,.30); cursor: pointer; z-index: 8; transition: transform .15s, box-shadow .15s; }
.hdr-set svg { transition: transform .35s ease; }
.hdr-set:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.35); }
.hdr-set:hover svg { transform: rotate(90deg); }
.hdr-set:focus-visible { outline: 3px solid transparent; outline-offset: 2px; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .hdr-set:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent, #ff6a00) 40%, transparent); } }

/* ---- the settings panel: colour theme swatches and menu style tiles (used by the master page and the sign in page) ---- */
  /* User settings panel (the gear): colour theme swatches and menu style tiles. Colours are the --ui-* variables of the active theme. */
  #UserSettingsPanel { width: 400px; max-width: calc(100vw - 20px); box-sizing: border-box; padding: 16px 16px 14px; background: var(--ui-surface, #fff); color: var(--ui-text, #1f2933); border: 1px solid var(--ui-border, #d3dae3); border-top: 4px solid var(--ui-accent, #ff6a00); border-radius: 14px; box-shadow: 0 14px 38px rgba(0,0,0,.35); font-family: Calibri, "Segoe UI", Arial, sans-serif; }
  #UserSettingsPanel::before { border-bottom-color: var(--ui-surface, #fff); top: -15px; }
  #UserSettingsPanel .us-head { margin: 0 0 12px; }
  #UserSettingsPanel .us-head b { display: block; font-size: 19px; }
  #UserSettingsPanel .us-head span { font-size: 13px; color: var(--ui-muted, #5f6b7a); }
  #UserSettingsPanel .us-title { margin: 12px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ui-muted, #5f6b7a); }

  /* colour themes */
  #UserSettingsPanel .us-themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  #UserSettingsPanel .theme-btn { width: auto; height: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 6px; border: 1.5px solid var(--ui-border, #d3dae3); border-radius: 12px; background: var(--ui-field, #f5f7fa); box-shadow: none; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
  #UserSettingsPanel .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.28); }
  #UserSettingsPanel .theme-btn.active { border-color: var(--ui-accent, #ff6a00); box-shadow: 0 0 0 2px transparent; }

  @supports (color: color-mix(in srgb, red 50%, blue)) { #UserSettingsPanel .theme-btn.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent, #ff6a00) 35%, transparent); } }
  #UserSettingsPanel .theme-btn .us-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
  #UserSettingsPanel .theme-btn small { font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center; color: var(--ui-text, #1f2933); }
  #UserSettingsPanel .theme-btn.active small { color: var(--ui-accent, #ff6a00); font-weight: 700; }
  .us-sw { background: linear-gradient(white, #ff6a00); }
  .orange .us-sw { background: linear-gradient(white, #ff6a00); }
  .blue .us-sw { background: linear-gradient(white, #0094ff); }
  .pink .us-sw { background: linear-gradient(white, #ff4fa3); }
  .greenwhite .us-sw { background: linear-gradient(white, #28a745); }
  .redwhite .us-sw { background: linear-gradient(white, #e53935); }
  .dark .us-sw { background: linear-gradient(white, #606060); }
  .orangeblack .us-sw { background: linear-gradient(#ff6a00, black); }
  .blueblack .us-sw { background: linear-gradient(#0094ff, black); }
  .pinkblack .us-sw { background: linear-gradient(#ff4fa3, black); }
  .greenblack .us-sw { background: linear-gradient(#2e9d3f, black); }
  .redblack .us-sw { background: linear-gradient(#e53935, black); }
  .grayblack .us-sw { background: linear-gradient(#9e9e9e, black); }

  /* menu styles */
  #UserSettingsPanel .us-menus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #UserSettingsPanel .menu-btn { position: relative; width: auto; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--ui-border, #d3dae3); border-radius: 12px; background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
  #UserSettingsPanel .menu-btn:hover { background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.28); }
  #UserSettingsPanel .menu-btn.active { background: var(--ui-surface, #fff); color: var(--ui-text, #1f2933); border-color: var(--ui-accent, #ff6a00); }

  @supports (color: color-mix(in srgb, red 50%, blue)) { #UserSettingsPanel .menu-btn.active { background: color-mix(in srgb, var(--ui-accent, #ff6a00) 14%, var(--ui-surface, #fff)); } }
  #UserSettingsPanel .menu-btn.active::after { content: "\2713"; position: absolute; top: 4px; right: 8px; font-size: 13px; font-weight: 800; color: var(--ui-accent, #ff6a00); }
  .us-mi { position: relative; flex: 0 0 44px; height: 32px; border: 1.5px solid var(--ui-muted, #5f6b7a); border-radius: 6px; background: var(--ui-surface, #fff); overflow: hidden; }
  .us-mi::before { content: ""; position: absolute; background: var(--ui-accent, #ff6a00); }
  .us-mi.left::before { left: 0; top: 0; bottom: 0; width: 11px; }
  .us-mi.top::before { left: 0; right: 0; top: 0; height: 8px; }
  .us-mi.mside::before { left: 3px; top: 3px; bottom: 3px; width: 10px; border-radius: 4px; }
  .us-mi.mside::after { content: ""; position: absolute; left: 18px; top: 5px; right: 4px; height: 5px; border-radius: 3px; background: var(--ui-border, #d3dae3); }
  .us-mi.mtop::before { left: 3px; right: 3px; top: 3px; height: 8px; border-radius: 4px; }
  .us-mi.mtop::after { content: ""; position: absolute; left: 3px; top: 15px; width: 18px; height: 5px; border-radius: 3px; background: var(--ui-border, #d3dae3); }
  #UserSettingsPanel .us-hint { margin: 12px 0 0; font-size: 12px; color: var(--ui-muted, #5f6b7a); }

/* ---- account search list (muAccountAutocomplete in Common.js) ---- */
  /* account search list (it is appended to the body, so it uses the --ui-* variables of the theme directly) */
  .ui-autocomplete.mu-ac { max-width: min(640px, 94vw); padding: 10px; border: 1px solid var(--ui-border); border-top: 4px solid var(--ui-accent); border-radius: 14px; background: var(--ui-surface); box-shadow: 0 14px 34px rgba(0,0,0,.32); max-height: 420px; overflow-y: auto; overflow-x: hidden; z-index: 5000 !important; }
  .ui-autocomplete.mu-ac .ui-menu-item { font-size: 16px; font-family: Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text); border: 0; margin: 0 0 6px; }
  .ui-autocomplete.mu-ac .ui-menu-item:last-child { margin-bottom: 0; }
  /* jQuery UI turns the first div of each item into .ui-menu-item-wrapper (and puts .ui-state-active on it), so the row is styled through that class, with enough weight to beat the shared menu styles */
  .ui-autocomplete.mu-ac .ui-menu-item-wrapper.mu-ac-row { box-sizing: border-box; display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 10px 16px !important; border: 1px solid var(--ui-border) !important; border-radius: 12px; background: var(--ui-field) !important; color: var(--ui-text); font-size: 16px; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
  .ui-autocomplete.mu-ac .ui-menu-item-wrapper.mu-ac-row.ui-state-active, .ui-autocomplete.mu-ac .ui-menu-item-wrapper.mu-ac-row:hover { background: var(--ui-surface) !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); }

  @supports (color: color-mix(in srgb, red 50%, blue)) { .ui-autocomplete.mu-ac .ui-menu-item-wrapper.mu-ac-row.ui-state-active, .ui-autocomplete.mu-ac .ui-menu-item-wrapper.mu-ac-row:hover { background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)) !important; } }
  .ui-autocomplete.mu-ac .mu-ac-head { padding: 0 4px 10px; margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ui-muted); border-bottom: 1px solid var(--ui-border); list-style: none; }
  .mu-ac-av { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--ui-accent); background: transparent; border: 2px solid var(--ui-accent); }
  .mu-ac-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mu-ac-name { font-weight: 700; font-size: 17px; line-height: 1.25; white-space: normal; word-break: break-word; }
  .mu-ac-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .mu-ac-tag { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--ui-text); background: transparent; border: 1.5px solid var(--ui-accent); }
  .mu-ac-tag.alt { color: var(--ui-muted); background: transparent; border: 1px solid var(--ui-border); }
  .mu-ac-bal { flex: 0 0 auto; padding-left: 14px; border-left: 1px solid var(--ui-border); text-align: right; display: flex; flex-direction: column; gap: 3px; }
  .mu-ac-bal b { font-size: 18px; font-weight: 700; color: var(--ui-accent); }
  .mu-ac-bal small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ui-muted); }
  .mu-ac-hit { background: #ffeb3b; color: #1f2933; padding: 0 2px; border-radius: 3px; font-weight: 700; }
  .mu-ac-none { padding: 16px 18px; color: var(--ui-muted); }

/* ---- table icons (delete / edit / view / print), set by muIcons() in Common.js ---- */
.mu-ico { box-sizing: border-box; width: 32px; height: 32px; padding: 5px; border: 1px solid transparent; border-radius: 9px; background: transparent; object-fit: contain; cursor: pointer; vertical-align: middle; margin: 0 2px; transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; }
.mu-ico:hover, .mu-ico:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.28); background: var(--ui-field, #f5f7fa); border-color: var(--ui-border, #d3dae3); outline: none; }
.mu-ico:active { transform: translateY(0); box-shadow: none; }
.mu-ico[data-mu-icon="delete"]:hover { background: var(--ui-surface, #fff); border-color: #c62828; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .mu-ico[data-mu-icon="delete"]:hover { background: color-mix(in srgb, #c62828 14%, var(--ui-surface, #fff)); } }

/* sortable column headers (data-mu-sort, see muPager in Common.js) */
th.mu-sortable { cursor: pointer; user-select: none; }
th.mu-sortable::after { content: "\2195"; margin-left: 6px; opacity: .45; font-size: 12px; }
th.mu-sortable:hover { color: var(--ui-accent, #ff6a00); }
th.mu-sortable.asc::after { content: "\25B2"; opacity: 1; color: var(--ui-accent, #ff6a00); }
th.mu-sortable.desc::after { content: "\25BC"; opacity: 1; color: var(--ui-accent, #ff6a00); }

/* search box above a table that has data-mu-page (muPager in Common.js) */
.mu-search { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 10px auto; font-family: Calibri, "Segoe UI", Arial, sans-serif; }
.mu-search input[type=search] { width: 320px; max-width: 100%; height: 38px; box-sizing: border-box; padding: 0 14px 0 38px; border: 1px solid var(--ui-border, #d3dae3); border-radius: 999px; background: var(--ui-field, #f5f7fa) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 18px; color: var(--ui-text, #1f2933); font: 600 15px Calibri, "Segoe UI", Arial, sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; }
.mu-search input[type=search]:focus { border-color: var(--ui-accent, #ff6a00); box-shadow: 0 0 0 3px transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .mu-search input[type=search]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent, #ff6a00) 25%, transparent); } }
.mu-search .mu-search-n { font-size: 13px; font-weight: 600; color: var(--ui-muted, #5f6b7a); }
.mu-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.mu-card-head h3 { margin: 0 !important; }
.mu-card-head .mu-search { margin: 0; }
.mu-card-head .mu-search-n { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--ui-text, #1f2933); }
.mu-card-head .mu-search { margin-left: 0; }
.mu-card-head .mu-search input[type=search] { width: 300px; }
mark.mu-hit { background: #ffeb3b; color: #1f2933; padding: 0 2px; border-radius: 3px; font-weight: 700; }
.mu-card-head { justify-content: flex-start; }

/* CASA transfer / closure pages: shared field + summary look (same rules as the Cash pages) */
.cd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 6px 10px 4px; }
.cd-title { display: flex; align-items: center; gap: 12px; }
.cd-title h2 { margin: 0; font-size: 26px; font-weight: 700; color: var(--ui-text); }
.cd-title img { width: 44px; height: 44px; }
.cd .link-button { font-weight: 600; color: var(--ui-accent); }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin: 10px; }
.cd-main { display: grid; gap: 16px; min-width: 0; }
.cd-fields.wide { grid-template-columns: 1fr; }

/* the field: a filled box, the label sits inside at the top, the accent colour shows on focus */
.cd .input-container.span2 { grid-column: span 2; }
@media (max-width: 560px) { .cd .input-container.span2 { grid-column: 1 / -1; } }
.cd .input-container.full { grid-column: 1 / -1; }
.cd .input-container label, .cd .dropdown-container label { position: absolute; left: 12px; top: 18px; transform: none !important; font-size: 16px; font-weight: 600; color: var(--ui-muted); pointer-events: none; transition: all .15s ease; }
.cd .input-container input:focus + label, .cd .input-container input:not(:placeholder-shown) + label, .cd .dropdown-container label { top: 6px !important; left: 12px !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; transform: none !important; }
.cd .input-container input:focus + label, .cd .dropdown-container select:focus + label { color: var(--ui-accent); }
.cd .input-container input:disabled, .cd .input-container input[readonly] { color: var(--ui-muted); cursor: default; }
.cd .input-container textarea { display: block; width: 100%; box-sizing: border-box; height: 56px; min-height: 56px; padding: 22px 12px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text); font: 600 15px/1.2 Calibri, "Segoe UI", Arial, sans-serif; outline: none; resize: none; overflow: hidden; word-wrap: break-word; }
.cd .input-container textarea:focus + label, .cd .input-container textarea + label { top: 6px !important; left: 12px !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; transform: none !important; }
.cd .input-container textarea:focus + label { color: var(--ui-accent); }
.cd .input-container textarea:disabled, .cd .input-container textarea[readonly] { -webkit-text-fill-color: var(--ui-muted); opacity: 1; }
.cd .input-container input[disabled] { -webkit-text-fill-color: var(--ui-muted); opacity: 1; }

.cd .input-container.full input { font-size: 16px; }
.cd-amount .cd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-amount .input-container input { font-size: 24px; font-weight: 700; text-align: right; }

.cd-aside { position: sticky; top: 10px; display: grid; gap: 16px; }
.cd-sum dl { margin: 0; }
.cd-sum .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); }
.cd-sum .row:last-child { border-bottom: 0; }
.cd-sum dt { color: var(--ui-muted); }
.cd-sum dd { margin: 0; font-weight: 700; text-align: right; word-break: break-word; }
.cd-sum .big dd { font-size: 24px; color: var(--ui-accent); }
.cd-vt { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; } .cd-vt.receipt { background: #2e7d32; } .cd-vt.payment { background: #c62828; }
.cd-acc { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ui-accent); }
.cd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cd-flow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--ui-muted); }
@media (max-width: 1100px) { .cd-two { grid-template-columns: 1fr; } }
.cd-mid .cd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Recent transactions button (Controls/RecentTxnButton.ascx), used on the modern pages */
.rt-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1.5px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s; }
.rt-btn svg { color: var(--ui-accent); }
.rt-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); border-color: var(--ui-accent); }
.rt-btn.rt-dr { border-left: 5px solid #c62828; }
.rt-btn.rt-cr { border-left: 5px solid #2e7d32; }

/* Report pages (statement, enquiry, balance): scheme multi-select styled as a field, report viewer card, tick boxes */
.cd .Selectize-Container { position: relative; display: block; min-width: 0; margin: 0; padding: 22px 8px 4px; background: var(--ui-field); border: 1px solid var(--ui-border); border-radius: 12px; box-sizing: border-box; }
.cd .Selectize-Container:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd .Selectize-Container:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent); } }
.cd .Selectize-Container.full { grid-column: 1 / -1; }
.cd .Selectize-Container label { position: absolute; left: 12px; top: 6px !important; transform: none !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ui-muted); pointer-events: none; }
.cd .Selectize-Container:focus-within label { color: var(--ui-accent); }
.cd .Selectize-Container .selectize-control { border: 0; color: var(--ui-text); font-size: 16px; }
.cd .Selectize-Container .selectize-input { color: var(--ui-text); padding: 4px 4px; }
.cd .Selectize-Container .selectize-input > .item { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 8px; padding: 2px 8px; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd .Selectize-Container .selectize-input > .item { background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); } }
.cd .Selectize-Container .selectize-dropdown { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 10px; }
.cd .Selectize-Container .underline { display: none; }
.cd-report { margin: 0 10px 16px; padding: 10px; overflow-x: auto; }
.cd .CheckBox-Container { display: block; margin: 4px 0 10px; padding: 0; font-weight: 600; color: var(--ui-text); }
.cd .CheckBox-Container label { cursor: pointer; }
.cd-actions .button-container { margin: 8px 0; }

/* Add / Delete links in the add-row tables (customers, guarantors ...) of the modern pages */
.cd a.AddNewLink, .cd a.DeleteLink { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 84px; height: 38px; padding: 0 16px; border: 1.5px solid var(--ui-accent); border-radius: 10px; background: var(--ui-surface); color: var(--ui-accent); font: 700 14px Calibri, "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }


@supports (color: color-mix(in srgb, red 50%, blue)) { /* Add / Delete links in the add-row tables (customers, guarantors ...) of the modern pages */
.cd a.AddNewLink, .cd a.DeleteLink { background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)); } }
.cd a.AddNewLink::before { content: "+"; font-size: 20px; line-height: 1; font-weight: 700; margin-top: -2px; }
.cd a.AddNewLink:hover { background: var(--ui-accent); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.cd a.DeleteLink { min-width: 0; height: 32px; padding: 0 12px; border-color: #c62828; background: var(--ui-surface); color: #c62828; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd a.DeleteLink { background: color-mix(in srgb, #c62828 10%, var(--ui-surface)); } }
.cd a.DeleteLink:hover { background: #c62828; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.cd a.AddNewLink:focus-visible, .cd a.DeleteLink:focus-visible { outline: 3px solid transparent; outline-offset: 2px; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd a.AddNewLink:focus-visible, .cd a.DeleteLink:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent) 40%, transparent); } }
.cd .mu-tbl td:has(> a.AddNewLink), .cd .mu-tbl td:has(> a.DeleteLink) { text-align: center; }

/* Totals bar and the small Excel button (Javascripts/Common.js muTableTools, Services TableExport.ashx) */
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tfoot.mu-total td { padding: 9px 10px; border-top: 2px solid var(--ui-accent, #ff6a00); border-bottom: 1px solid var(--ui-border, #d3dae3); background: var(--ui-field, #f5f7fa); font-weight: 700; color: var(--ui-text, #1f2933); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tfoot.mu-total td:first-child { border-left: 1px solid var(--ui-border, #d3dae3); border-radius: 10px 0 0 10px; color: var(--ui-muted, #5f6b7a); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) tfoot.mu-total td:last-child { border-right: 1px solid var(--ui-border, #d3dae3); border-radius: 0 10px 10px 0; }
.mu-has-tools { display: flex; align-items: center; gap: 10px; }
.mu-xl { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 11px; border: 1.5px solid var(--ui-accent, #ff6a00); border-radius: 999px; background: var(--ui-surface, #fff); color: var(--ui-accent, #ff6a00); font: 700 12px Calibri, "Segoe UI", Arial, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; user-select: none; transition: background .12s, color .12s, box-shadow .12s; }
.mu-xl:hover, .mu-xl:focus-visible { background: var(--ui-accent, #ff6a00); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); outline: none; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.mu-num, table:is(.mu-tbl, .bp-tbl, .vv-tbl) td.mu-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* a table that is only as wide as its content and centred in its card (add mu-fit next to mu-tbl); a wider one scrolls inside the card */
table.mu-tbl.mu-fit { width: max-content; max-width: none; margin-left: auto; margin-right: auto; }
.cd-card:has(> table.mu-fit), .cd-card:has(> div > table.mu-fit), .cd-card:has(> span > table.mu-fit) { overflow-x: auto; }

/* header row of a mu-fit table: a bordered bar like the rows and the totals bar */
table.mu-tbl.mu-fit th { padding: 9px 12px; border-top: 1px solid var(--ui-border, #d3dae3); border-bottom: 1px solid var(--ui-border, #d3dae3); background: var(--ui-field, #f5f7fa); color: var(--ui-text, #1f2933); white-space: nowrap; }
table.mu-tbl.mu-fit th:first-child { border-left: 1px solid var(--ui-border, #d3dae3); border-radius: 10px 0 0 10px; }
table.mu-tbl.mu-fit th:last-child { border-right: 1px solid var(--ui-border, #d3dae3); border-radius: 0 10px 10px 0; }

/* coloured header bar of a mu-fit table: the theme's accent colour with white text (sort arrows and hover stay readable on it) */
table.mu-tbl.mu-fit th { background: var(--ui-accent, #ff6a00); color: #fff; border-color: var(--ui-accent, #ff6a00); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
table.mu-tbl.mu-fit th.mu-sortable:hover { color: #fff; background: var(--ui-accent, #ff6a00); }

@supports (color: color-mix(in srgb, red 50%, blue)) { table.mu-tbl.mu-fit th.mu-sortable:hover { background: color-mix(in srgb, var(--ui-accent, #ff6a00) 82%, #000); } }
table.mu-tbl.mu-fit th.mu-sortable::after { opacity: .7; }
table.mu-tbl.mu-fit th.mu-sortable.asc::after, table.mu-tbl.mu-fit th.mu-sortable.desc::after { color: #fff; opacity: 1; }

/* the header bar of a mu-fit table is a plain rectangle (no rounded ends) */
table.mu-tbl.mu-fit th, table.mu-tbl.mu-fit th:first-child, table.mu-tbl.mu-fit th:last-child { border-radius: 0; }

/* gradient header bar of a mu-fit table: a vertical blend of the accent colour (lighter on top, deeper below), the same in every cell so the bar looks like one piece */
table.mu-tbl.mu-fit th { background: linear-gradient(180deg, var(--ui-g1) 0%, var(--ui-g2) 45%, var(--ui-g3) 100%); border-color: var(--ui-accent, #ff6a00); }


@supports (color: color-mix(in srgb, red 50%, blue)) { /* gradient header bar of a mu-fit table: a vertical blend of the accent colour (lighter on top, deeper below), the same in every cell so the bar looks like one piece */
table.mu-tbl.mu-fit th { border-color: color-mix(in srgb, var(--ui-accent, #ff6a00) 80%, #000); } }
table.mu-tbl.mu-fit th.mu-sortable:hover { background: linear-gradient(180deg, var(--ui-g2) 0%, var(--ui-g3) 100%); }

/* photo and signature tiles (Customer Update Photo Sign, the photo step of Customer Create New): a framed picture with its button under it */
.cd .input-container-forImage { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; min-width: 240px; margin: 0 14px 14px 0; padding: 16px; box-sizing: border-box; border: 1px solid var(--ui-border); border-top: 4px solid var(--ui-accent); border-radius: 12px; background: var(--ui-field); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cd .input-container-forImage img.UserImage { width: 200px; height: 200px; object-fit: cover; border-radius: 12px; border: 2px dashed var(--ui-border); background: var(--ui-surface); }
.cd .input-container-forImage input[type=submit], .cd .input-container-forImage input[type=button] { width: 100% !important; height: 42px; padding: 0 16px; border: 1.5px solid var(--ui-accent); border-radius: 12px; background: var(--ui-surface); color: var(--ui-accent); font: 700 15px Calibri, "Segoe UI", Arial, sans-serif; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }
.cd .input-container-forImage input[type=submit]:hover, .cd .input-container-forImage input[type=button]:hover { background: var(--ui-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30); }
.cd .input-container-forImage input[type=file] { width: 100%; max-width: 230px; font-size: 13px; color: var(--ui-text); }

/* Main header bar: a horizontal gradient of the theme's accent colour (left lighter, right deeper) with white text */
.Container { background: linear-gradient(90deg, var(--ui-g1) 0%, var(--ui-g2) 45%, var(--ui-g3) 100%) !important; }
.Container .Container-span { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Gradient colours used by the header bar, the menus, the table headers and the form steps: lighter, middle, deeper. Derived from the accent colour; a theme file may set its own. */
:root { --ui-g1: var(--ui-accent, #ff6a00); --ui-g2: var(--ui-accent, #ff6a00); --ui-g3: var(--ui-accent, #ff6a00); }
/* older browsers (Chrome before 111, e.g. on Windows 7) cannot mix colours: they keep the flat accent above */
@supports (color: color-mix(in srgb, red 50%, blue)) { :root { --ui-g1: color-mix(in srgb, var(--ui-accent, #ff6a00) 82%, #fff); --ui-g3: color-mix(in srgb, var(--ui-accent, #ff6a00) 78%, #000); } }

/* gradient header bar on every table: the modern tables (mu / bp / vv) and the older searchable / input tables (dtable, InputTable, DataTables) */
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th { padding: 9px 12px; border-top: 1px solid var(--ui-g3); border-bottom: 1px solid var(--ui-g3); background: linear-gradient(180deg, var(--ui-g1) 0%, var(--ui-g2) 45%, var(--ui-g3) 100%); color: #fff; border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0,.25); white-space: nowrap; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th:first-child { border-left: 1px solid var(--ui-g3); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th:last-child { border-right: 1px solid var(--ui-g3); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.mu-sortable:hover { color: #fff; background: linear-gradient(180deg, var(--ui-g2) 0%, var(--ui-g3) 100%); }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.mu-sortable::after { opacity: .7; }
table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.mu-sortable.asc::after, table:is(.mu-tbl, .bp-tbl, .vv-tbl) th.mu-sortable.desc::after { color: #fff; opacity: 1; }

.dtable thead, .InputTable thead, table.dataTable thead { background: linear-gradient(180deg, var(--ui-g1) 0%, var(--ui-g2) 45%, var(--ui-g3) 100%) !important; }
.dtable thead th, .InputTable thead th, table.dataTable thead th { color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,.25) !important; }

/* Session timer in the header bar (click = start the session time again) and in the user info panel */
.hdr-sess { display: inline-flex; align-self: center; align-items: center; gap: 7px; flex: 0 0 auto; margin: 0 14px 0 0; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.55); color: #fff; font: 700 14px Calibri, "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; text-shadow: none; transition: background .15s, transform .15s, box-shadow .15s; }
.hdr-sess:hover, .hdr-sess:focus-visible { background: rgba(0,0,0,.4); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.3); outline: none; }
.hdr-sess .hdr-sess-r { opacity: .8; transition: transform .35s; }
.hdr-sess:hover .hdr-sess-r { transform: rotate(180deg); opacity: 1; }
.hdr-sess.warn { background: #f57c00; border-color: #fff; animation: hdrSessPulse 1.2s ease-in-out infinite; }
@keyframes hdrSessPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,124,0,.7); } 50% { box-shadow: 0 0 0 7px rgba(245,124,0,0); } }
.ui-reset { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1.5px solid var(--ui-accent, #ff6a00); border-radius: 999px; color: var(--ui-accent, #ff6a00); font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; }
.ui-reset:hover, .ui-reset:focus-visible { background: var(--ui-accent, #ff6a00); color: #fff; outline: none; }
/* the session timer changes colour as the time runs out: normal, yellow under 5 minutes, orange and pulsing under the warning time */
.hdr-sess.low { background: #f2c200; border-color: #fff; color: #3b2f00; }
.hdr-sess.low:hover, .hdr-sess.low:focus-visible { background: #e0b200; }
.ui-v b.low { color: #b58900; }
.ui-v b.warn { color: #f57c00; }

/* ---- Main header bar (the layout; the gradient is above) ---- */
.Container.hdr { position: relative; z-index: auto; box-sizing: border-box; height: 62px; padding: 0 16px 0 14px; gap: 14px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.hdr-fill { flex: 1 1 auto; }
.Container.hdr .hdr-date { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.55); font: 700 14px Calibri, "Segoe UI", Arial, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.Container.hdr .hdr-date::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.Container.hdr .hdr-set { margin: 0; }
.Container.hdr .hdr-sess { margin: 0; }
.hdr-user { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; }
.hdr-user b { font: 700 14px Calibri, "Segoe UI", Arial, sans-serif; }
.hdr-user small { font: 600 11.5px Calibri, "Segoe UI", Arial, sans-serif; opacity: .9; }
.hdr-user:empty { display: none; }
.Container.hdr .ImageButton { flex: 0 0 auto; box-sizing: border-box; width: 44px; height: 44px; margin: 0; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); background: #fff; }
@media (max-width: 1100px) { .hdr-user { display: none; } }
@media (max-width: 760px) { .Container.hdr { gap: 8px; padding: 0 8px; } .Container.hdr .hdr-date { padding: 5px 9px; font-size: 12.5px; } }

/* the panels under the bar: the bar centres its items, so give them a fixed place below it */
.Container.hdr > :is(#UserSettingsPanel, #UserInfoPanel1) { top: 62px; margin-top: 10px; }

/* the title is white on every theme (the old italic Cambria and its shadow stay) */
.Container.hdr h1 { color: #fff !important; }

/* the bar grows with its content instead of clipping it */
.Container.hdr { height: auto; min-height: 62px; padding-top: 6px; padding-bottom: 6px; overflow: visible; }
.Container.hdr h1 { line-height: 1.25; margin: 0 5px; }
.Container.hdr .RightImage { height: 46px; width: auto; max-width: 56px; }
.Container.hdr > :is(#UserSettingsPanel, #UserInfoPanel1) { top: 68px; }

/* ---- transaction pages (pay-in, repayment, closure): fields in one grid, sections as headings, summary and actions at the side ---- */
.cd-contents, .cd-pair { display: contents; }
.cd-flat .cd-sec { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-border); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ui-muted); }
.cd-flat > .cd-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cd-flat .cd-wide, .cd-flat .cd-linkrow, .cd-flat .CheckBox-Container, .cd-flat hr { grid-column: 1 / -1; }
.cd-wide { box-shadow: none !important; overflow-x: auto; }
.cd-wide table { width: 100% !important; }
.cd-linkrow { display: flex; justify-content: flex-end; margin: 0 !important; }
.cd-tools { display: flex; align-items: center; gap: 10px; }
.cd-flat .input-container.span2 { grid-column: span 2; }
.cd-flat .CheckBox-Container { margin: 0; }
.cd-flat .dropdown-container, .cd-flat .input-container { margin: 0; width: auto; min-width: 0; }
/* denominations: the box is a card; the table is open, with a quantity box per row and a totals bar at the bottom */
.cd details { box-sizing: border-box; width: 100%; margin: 0 !important; background: var(--ui-surface); border: 1px solid var(--ui-border); border-top: 4px solid var(--ui-accent); border-radius: 12px; padding: 0 18px; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cd details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .6px; color: var(--ui-muted); cursor: pointer; }
.cd details > summary::-webkit-details-marker { display: none; }
.cd details > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted); transform: rotate(-45deg); transition: transform .15s; }
.cd details[open] > summary::before { transform: rotate(45deg); }
.cd details > summary span { margin-left: auto !important; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ui-text); }
.cd details table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 16px; font-family: Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text); background: transparent; border: 0; }
.cd details table th, .cd details table td { border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: var(--ui-text); padding: 8px 12px; font-size: 16px; text-align: right; }
.cd details table thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ui-muted); background: var(--ui-field); border-bottom: 1px solid var(--ui-border); }
.cd details table thead th:first-child { border-radius: 8px 0 0 0; } .cd details table thead th:last-child { border-radius: 0 8px 0 0; }
.cd details table th:first-child, .cd details table td:first-child { text-align: left; }
.cd details table tbody tr:hover td { background: var(--ui-field); }
.cd details table.dtable tbody td:first-child { font-weight: 700; }
.cd details table.dtable tbody td:first-child::before { content: "\20B9\00a0"; font-weight: 400; color: var(--ui-muted); }
.cd details table.dtable tbody td:nth-child(2) { color: var(--ui-muted); }
.cd details table .dAmt { font-weight: 700; }
.cd details input.dqA { width: 110px !important; box-sizing: border-box; height: 38px; padding: 4px 10px; text-align: right; font: 600 16px Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text); background: var(--ui-field); border: 1px solid var(--ui-border); border-radius: 8px; outline: none; transition: border-color .12s, box-shadow .12s; }
.cd details input.dqA:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd details input.dqA:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent); } }
.cd details table tfoot th { background: var(--ui-field); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ui-text); }
.cd details table tfoot tr:first-child th { border-top: 2px solid var(--ui-border); }
.cd details table tfoot tr:last-child th { font-size: 18px; border-bottom: 0; }
.cd details table tfoot tr:last-child th:first-child { border-radius: 0 0 0 8px; } .cd details table tfoot tr:last-child th:last-child { border-radius: 0 0 8px 0; }
/* denomination rows in the same style as the search results: a bordered rounded row, lifted with a shadow (no border) on hover or while a quantity is being typed */
.cd details table { border-spacing: 0 8px; margin-bottom: 4px; }
.cd details table thead th { background: transparent; border: 0; padding: 0 16px 2px; }
.cd details table tbody tr { transition: transform .12s, box-shadow .12s; }
.cd details table tbody td { padding: 10px 16px; border: 0; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); background: var(--ui-field); transition: background .12s; }
.cd details table.dtable tbody td:first-child { border-left: 1px solid var(--ui-border); border-radius: 12px 0 0 12px; }
.cd details table tbody td:last-child { border-right: 1px solid var(--ui-border); border-radius: 0 12px 12px 0; }
.cd details table tbody tr:hover, .cd details table tbody tr:focus-within { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); border-radius: 12px; }
.cd details table tbody tr:hover td, .cd details table tbody tr:focus-within td { background: var(--ui-surface); border-color: transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd details table tbody tr:hover td, .cd details table tbody tr:focus-within td { background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); } }
.cd details input.dqA { background: var(--ui-surface); border: 1.5px solid var(--ui-border); border-radius: 10px; }
.cd details table tfoot th { padding: 10px 16px; border: 0; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.cd details table tfoot th:first-child { border-left: 1px solid var(--ui-border); border-radius: 12px 0 0 12px; }
.cd details table tfoot th:last-child { border-right: 1px solid var(--ui-border); border-radius: 0 12px 12px 0; }
/* received / change given back, side by side; the totals table spans both */
.cd details .dn-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
.cd details.dn-two .dn-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd details .dn-h { margin: 2px 0 0; padding: 0 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ui-accent); }
.cd details.dn-two table th, .cd details.dn-two table td { padding-left: 10px; padding-right: 10px; }
.cd details.dn-two input.dqA, .cd details.dn-two input.dqB { width: 84px !important; }
.cd details input.dqB { width: 110px !important; box-sizing: border-box; height: 38px; padding: 4px 10px; text-align: right; font: 600 16px Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text); background: var(--ui-surface); border: 1.5px solid var(--ui-border); border-radius: 10px; outline: none; transition: border-color .12s, box-shadow .12s; }
.cd details input.dqB:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd details input.dqB:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent); } }
.cd details table.dn-sum { border-spacing: 0 6px; margin-top: 4px; }
.cd details table.dn-sum th { padding: 10px 16px; border: 0; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); background: var(--ui-field); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ui-text); text-align: right; }
.cd details table.dn-sum th:first-child { text-align: left; border-left: 1px solid var(--ui-border); border-radius: 12px 0 0 12px; font-weight: 600; color: var(--ui-muted); }
.cd details table.dn-sum th:last-child { border-right: 1px solid var(--ui-border); border-radius: 0 12px 12px 0; }
.cd details table.dn-sum tr:last-child th { font-size: 18px; }
@media (max-width: 1100px) { .cd details.dn-two .dn-wrap { grid-template-columns: minmax(0, 1fr); } }
.cd-vt { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; }
.cd-vt.receipt { background: #2e7d32; }
.cd-vt.payment { background: #c62828; }
/* denominations, compact: a slim row, a big readable denomination, a small quantity box; a row with a quantity entered lifts off the page */
.cd details table { border-spacing: 0 4px; margin-bottom: 0; }
.cd details .dn-h { margin: 0; padding: 0 4px 2px; font-size: 12px; }
.cd details table thead th { padding: 0 10px 1px; font-size: 11px; }
.cd details table tbody td { padding: 4px 10px; font-size: 14px; line-height: 1.2; }
.cd details table.dtable tbody td:first-child { width: 1%; white-space: nowrap; font-size: 19px; font-weight: 800; letter-spacing: .2px; color: var(--ui-text); }
.cd details table.dtable tbody td:first-child::before { font-size: 13px; font-weight: 600; color: var(--ui-muted); margin-right: 1px; }
.cd details table.dtable tbody td:nth-child(2) { font-size: 13px; text-align: right; color: var(--ui-muted); }
.cd details table.dtable tbody td:nth-child(3) { width: 1%; text-align: right; }
.cd details table .dAmt { font-size: 15px; font-weight: 700; }
.cd details input.dqA, .cd details input.dqB, .cd details.dn-two input.dqA, .cd details.dn-two input.dqB { width: 72px !important; height: 30px; padding: 2px 8px; font-size: 16px; font-weight: 700; border-radius: 8px; }
.cd details table tbody tr.dn-on { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); border-radius: 12px; }
.cd details table tbody tr.dn-on td { background: var(--ui-surface); border-color: transparent; }

@supports (color: color-mix(in srgb, red 50%, blue)) { .cd details table tbody tr.dn-on td { background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); } }
.cd details table tbody tr.dn-on td:first-child { box-shadow: inset 4px 0 0 var(--ui-accent); }
.cd details table tbody tr.dn-on .dAmt { color: var(--ui-accent); }
.cd details table.dn-sum { border-spacing: 0 4px; margin-top: 2px; }
.cd details table.dn-sum th { padding: 6px 14px; font-size: 15px; }
.cd details table.dn-sum tr:last-child th { font-size: 17px; }
.cd details > summary { padding: 10px 0; }

.cd-inline { margin: 0; }

.cd-btnrow { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0; }
.cd-btnrow .button-container { min-width: 200px; }

.cd-flat details { grid-column: 1 / -1; }

.cd-flat table { grid-column: 1 / -1; }

.dash-alerts { display: flex; flex-wrap: wrap; gap: 14px; }
.dash-alerts:empty { display: none; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.dash-upd { color: var(--ui-muted, #5f6b7a); font-weight: 600; }

/* e-Sign pages: standard size buttons aligned right, and modern link-style actions in the table */
.es-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 12px 0 4px; }
.es-actions .es-spacer { margin-right: auto; }
.es-btn, input[type=submit].es-btn, input[type=button].es-btn, a.es-btn { --btn: var(--ui-accent, #ff6a00); display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; box-sizing: border-box; height: 40px; padding: 0 22px; border: 1.5px solid var(--btn); border-radius: 12px; cursor: pointer; font: 700 15px Calibri, "Segoe UI", Arial, sans-serif; color: var(--ui-text, #1f2933); background: var(--ui-field, #f5f7fa); box-shadow: none; text-shadow: none; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; }
.es-btn:hover, .es-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.25); background: var(--ui-surface, #fff); outline: none; text-decoration: none; }
.es-btn:active { transform: translateY(0); box-shadow: none; }
.es-btn.primary, input[type=submit].es-btn.primary { background: var(--ui-accent, #ff6a00); color: #fff; }
.es-btn.primary:hover, .es-btn.primary:focus-visible { background: var(--ui-accent, #ff6a00); filter: brightness(1.1); }
.es-btn[disabled], .es-btn.aspNetDisabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.es-links { display: flex; flex-wrap: wrap; gap: 6px; }
a.es-link { --lk: var(--ui-accent, #ff6a00); display: inline-block; padding: 4px 12px; border: 1px solid var(--lk); border-radius: 999px; font: 600 13px Calibri, "Segoe UI", Arial, sans-serif; color: var(--lk); background: transparent; text-decoration: none; white-space: nowrap; transition: background .12s, color .12s, transform .12s; }
a.es-link:hover, a.es-link:focus-visible { background: var(--lk); color: #fff; text-decoration: none; transform: translateY(-1px); outline: none; }
a.es-link.danger { --lk: #c62828; } a.es-link.muted { --lk: var(--ui-muted, #5f6b7a); }
.es-field { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }