html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.tile { display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid #dee2e6; border-left: 4px solid #6c757d; border-radius: .375rem; text-decoration: none; color: inherit; background: #fff; }
.tile:hover, .tile.active { background: #f1f3f5; }
.tile-n { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.tile-l { font-size: .85rem; color: #6c757d; }
.tile-ready { border-left-color: #198754; }
.tile-watch { border-left-color: #adb5bd; }
.tile-work { border-left-color: #dc3545; }

.table th, .table td small { white-space: nowrap; }

.raw-edi { font-size: .78rem; line-height: 1.35; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; padding: .75rem; max-height: 70vh; overflow: auto; white-space: pre; }

.parsed-lines { max-height: 60vh; overflow: auto; }
.parsed-lines thead th { position: sticky; top: 0; background: #fff; }

.seg-table code { color: inherit; white-space: pre-wrap; word-break: break-all; font-size: .8rem; }

/* ---- Customers pages ---- */
.doc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dee2e6; border-top: 4px solid #adb5bd; border-radius: .5rem; padding: .9rem 1rem; }
.doc-card.doc-on { border-top-color: #198754; }
.doc-card.doc-problem { border-top-color: #dc3545; }
.doc-card.doc-off { background: #f8f9fa; }
.doc-direction { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.doc-title { font-size: 1.05rem; font-weight: 600; }
.doc-blurb { font-size: .85rem; color: #6c757d; margin: .35rem 0 .5rem; min-height: 2.5em; }
.doc-facts { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.doc-facts li { padding: .1rem 0; }
.doc-problem { margin-top: .5rem; padding: .4rem .6rem; font-size: .8rem; color: #842029; background: #f8d7da; border-radius: .375rem; }

.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; background: #adb5bd; }
.status-dot.dot-on { background: #198754; }
.status-dot.dot-problem { background: #dc3545; }

/* An on/off switch that is a real button, so it works with the keyboard and without script. */
.switch { position: relative; width: 2.75rem; height: 1.5rem; flex: none; padding: 0; border: 0; border-radius: 1rem; background: #adb5bd; cursor: pointer; transition: background-color .15s; }
.switch.is-on { background: #198754; }
.switch:focus-visible { outline: 2px solid #258cfb; outline-offset: 2px; }
.switch-knob { position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.switch.is-on .switch-knob { left: 1.4rem; }

/* Small pop-over panels built on <details>. */
details.schedule, details.partner-details { position: relative; }
details.schedule > summary, details.partner-details > summary { list-style: none; }
details.schedule > summary::-webkit-details-marker, details.partner-details > summary::-webkit-details-marker { display: none; }
details.schedule > form { position: absolute; z-index: 20; top: 2.2rem; left: 0; min-width: 17rem; }
details.partner-details > .card { position: absolute; z-index: 20; top: 2.2rem; right: 0; min-width: 24rem; }

.grid-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.grid-toolbar input[type=search] { min-width: 17rem; }
.grid thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; border-bottom-width: 2px; }
.grid td { padding-top: .45rem; padding-bottom: .45rem; white-space: nowrap; }
/* A tighter grid, for a short list in a half-width panel (the dashboard's latest transactions). */
.grid-tight td { padding-top: .25rem; padding-bottom: .25rem; line-height: 1.25; }
.grid-tight .badge { font-size: .7rem; }
.grid .cell-note { max-width: 28rem; white-space: normal; }
/* The back-to-top button floats in the bottom right corner; the row under a grid stops short of it. */
.grid-footer { padding: .25rem 4rem 1rem 0; }
.shown-doc { border: 1px solid #dee2e6; border-radius: .5rem; background: #fff; padding: .6rem .9rem; }
.shown-doc > summary { cursor: pointer; }
.shown-doc[open] > summary { margin-bottom: .6rem; }
.page-size .form-select { padding-top: .1rem; padding-bottom: .1rem; }
.empty-state { padding: 2rem 1rem; text-align: center; color: #6c757d; background: #f8f9fa; border: 1px dashed #ced4da; border-radius: .5rem; margin-bottom: 1rem; }

/* ---- Top navigation ---- */
.app-nav { background: #1f2d3d; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); padding-top: .35rem; padding-bottom: .35rem; }
.app-nav .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .02em; margin-right: 1.5rem; }
.app-nav .navbar-brand:hover { color: #9fd3ff; }
.app-nav .nav-link { color: #c9d3de; padding: .45rem .85rem; margin: 0 .1rem; border-radius: .375rem; border-bottom: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus-visible, .app-nav .nav-item.dropdown:hover > .nav-link, .app-nav .nav-link.show {
    color: #fff; background: rgba(255, 255, 255, .12); }
.app-nav .nav-link.active { color: #fff; border-bottom-color: #4dabf7; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.app-nav .nav-user { color: #c9d3de; font-size: .875rem; }
.app-nav .navbar-toggler { border-color: rgba(255, 255, 255, .35); }
.app-nav .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

.app-nav .dropdown-menu { border: 0; border-radius: .5rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); padding: .4rem; min-width: 15rem; }
.app-nav .dropdown-item { border-radius: .375rem; padding: .45rem .6rem; transition: background-color .12s ease, padding-left .12s ease; }
.app-nav .dropdown-item:hover, .app-nav .dropdown-item:focus { background: #e7f1ff; color: #0b5ed7; padding-left: .8rem; }
.app-nav .dropdown-item.active, .app-nav .dropdown-item:active { background: #0d6efd; color: #fff; }
.app-nav .doc-code { display: inline-block; min-width: 2.4rem; margin-right: .35rem; padding: .05rem .35rem; font-size: .75rem; font-weight: 600; text-align: center;
    color: #495057; background: #f1f3f5; border: 1px solid #dee2e6; border-radius: .25rem; }
.app-nav .dropdown-item.active .doc-code { color: #0d6efd; background: #fff; border-color: #fff; }

/* On a wide screen the menu opens when the pointer is over it; clicking still works, and is the only way on touch. */
@media (min-width: 768px) and (hover: hover) {
    .app-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

/* Rows and buttons respond to the pointer everywhere. */
.table-hover > tbody > tr { transition: background-color .1s ease; }
.btn { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease; }
.btn:active { transform: translateY(1px); }
.doc-card { transition: box-shadow .15s ease; }
.doc-card:hover { box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .08); }
.nav-tabs .nav-link { transition: background-color .12s ease, color .12s ease; }
.nav-tabs .nav-link:not(.active):hover { background: #f1f3f5; }

/* ---- Dashboard ---- */
body { background: #f4f6f8; }
.panel { background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; padding: 1rem 1.1rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.panel-title { font-size: 1rem; font-weight: 600; margin: 0; }

.stat { display: block; height: 100%; padding: .85rem 1rem; background: #fff; border: 1px solid #e3e7eb; border-left: 4px solid #adb5bd; border-radius: .6rem;
    color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.stat:hover { box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .09); transform: translateY(-2px); color: inherit; }
.stat-good { border-left-color: #198754; }
.stat-bad { border-left-color: #dc3545; }
.stat-warn { border-left-color: #f59f00; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.stat-value.stat-text { font-size: 1.25rem; padding: .35rem 0; }
.stat-bad .stat-value { color: #b02a37; }
.stat-sub { font-size: .78rem; color: #6c757d; }

.chart { display: flex; align-items: stretch; gap: .4rem; height: 230px; }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; text-align: center; border-radius: .375rem; padding: 0 .1rem; transition: background-color .12s ease; }
.chart-col:hover { background: #f1f3f5; }
.chart-total { font-size: .72rem; color: #495057; height: 1.1rem; }
.chart-track { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #dee2e6; }
.chart-bar { width: 70%; max-width: 3.2rem; display: flex; flex-direction: column; border-radius: .25rem .25rem 0 0; overflow: hidden; }
.chart-seg { min-height: 2px; }
.chart-day { font-size: .72rem; color: #6c757d; line-height: 1.2; padding-top: .25rem; }
.chart-day span { color: #adb5bd; }
.chart-col.is-today .chart-day { color: #212529; font-weight: 600; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .75rem; font-size: .8rem; color: #495057; }
.chart-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }

.all-clear { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 10rem; color: #198754; text-align: center; }
.all-clear-mark { width: 3rem; height: 3rem; line-height: 3rem; border-radius: 50%; background: #d1e7dd; font-size: 1.5rem; font-weight: 700; }
.attention-list { display: flex; flex-direction: column; gap: .4rem; }
.attention { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: .45rem; border-left: 4px solid;
    font-size: .875rem; text-decoration: none; transition: filter .12s ease, padding-left .12s ease; }
.attention:hover { filter: brightness(.96); padding-left: .95rem; }
.attention-danger { color: #842029; background: #f8d7da; border-left-color: #dc3545; }
.attention-warning { color: #664d03; background: #fff3cd; border-left-color: #f59f00; }
.attention-go { font-size: 1.2rem; line-height: 1; }

.shadow-row { display: block; padding: .6rem .5rem; border-radius: .45rem; color: inherit; text-decoration: none; transition: background-color .12s ease; }
.shadow-row + .shadow-row { border-top: 1px solid #f1f3f5; }
.shadow-row:hover { background: #f8f9fa; color: inherit; }
.shadow-name { font-weight: 600; margin-bottom: .35rem; }
.shadow-name .doc-code { display: inline-block; min-width: 2.4rem; margin-right: .35rem; padding: .05rem .35rem; font-size: .75rem; text-align: center; color: #495057;
    background: #f1f3f5; border: 1px solid #dee2e6; border-radius: .25rem; }
.shadow-meter { height: .5rem; background: #e9ecef; border-radius: 1rem; overflow: hidden; }
.shadow-meter-fill { height: 100%; background: #198754; border-radius: 1rem; }
.shadow-meter-fill.has-mismatch { background: #f59f00; }
.shadow-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .35rem; font-size: .82rem; color: #495057; }

/* ---- Partner setup ---- */
.setup-heading { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6c757d; margin: 0 0 .5rem .15rem; }
.form-label { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.form-label .el { font-weight: 400; font-size: .72rem; color: #868e96; background: #f1f3f5; border-radius: .25rem; padding: .05rem .3rem; margin-left: .25rem; }
.id-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: start; margin-bottom: 1rem; }
.id-arrow { font-size: 1.4rem; color: #868e96; padding-top: 1.75rem; }
.delimiter { font-family: var(--bs-font-monospace); font-size: 1.1rem; text-align: center; color: #d6336c; }
.sample { margin-top: .9rem; }
.sample code { display: block; padding: .55rem .7rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .375rem; color: #212529; font-size: .78rem; white-space: pre; overflow-x: auto; }
.choice { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: .5rem;
    transition: border-color .12s ease, background-color .12s ease; }
.choice:hover { border-color: #86b7fe; }
.choice.is-chosen { border-color: #0d6efd; background: #f3f8ff; }
.choice label { cursor: pointer; flex: 1; }
.choice label strong { display: block; }
.choice label span { font-size: .82rem; color: #6c757d; }
.choice .form-check-input { margin-top: .25rem; flex: none; }
/* Click-to-show panels: the heading fills the panel, so the whole collapsed panel is the target. */
details.advanced { transition: background-color .12s ease; }
details.advanced > summary { cursor: pointer; list-style: none; margin: -1rem -1.1rem; padding: 1rem 1.1rem; border-radius: .6rem; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced[open] > summary { margin-bottom: 0; padding-bottom: .5rem; }
details.advanced:not([open]):hover { background: #f1f6fd; }
details.advanced[open] .collapsed-only, .collapsed-only:empty { display: none; }
.save-bar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem;
    margin: .5rem -.25rem 0; padding: .75rem 1rem; background: rgba(255, 255, 255, .96); border: 1px solid #e3e7eb; border-radius: .6rem; box-shadow: 0 -.25rem .9rem rgba(0, 0, 0, .06); }

/* ---- Partner page: how files move ---- */
.transfer-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.25rem; padding: .65rem 1rem; margin-bottom: 1rem;
    background: #fff; border: 1px solid #e3e7eb; border-left: 4px solid #198754; border-radius: .6rem; font-size: .9rem; }
.transfer-strip.has-problem { border-left-color: #dc3545; }
.transfer-main { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.transfer-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: #6c757d; font-size: .82rem; }
.transfer-facts strong { color: #212529; font-weight: 600; }

/* ---- Confirm dialog ---- */
.confirm-dialog { border: 0; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.confirm-dialog .modal-header { border-bottom: 0; padding-bottom: 0; }
.confirm-dialog .modal-title { font-weight: 600; }
.confirm-dialog .modal-body { color: #495057; padding-top: .5rem; }
.confirm-dialog .modal-footer { border-top: 0; padding-top: 0; }

/* ---- Refresh button in the top bar ---- */
.nav-refresh { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; color: #c9d3de; background: transparent;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: .375rem; font-size: .8rem; transition: background-color .15s ease, color .15s ease; }
.nav-refresh:hover, .nav-refresh:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-refresh svg { transition: transform .3s ease; }
.nav-refresh:hover svg { transform: rotate(60deg); }
.nav-refresh.is-spinning svg { animation: nav-spin .7s linear infinite; }
@keyframes nav-spin { to { transform: rotate(360deg); } }

/* ---- File-name masks ---- */
.mask-preview { display: block; font-family: var(--bs-font-monospace); color: #0b5ed7; }
.mask-values { color: #868e96; }

/* ---- Tables: alternating rows, and which way a document went ---- */
/* Rows that carry a meaning of their own (a differing line shown in red) keep their colour. */
.table > tbody > tr:nth-of-type(even):not([class*="table-"]) > * { background-color: #f3f6f9; }
.table > tbody > tr:nth-of-type(odd):not([class*="table-"]) > * { background-color: #fff; }
.dir-badge { min-width: 3.4rem; font-weight: 600; letter-spacing: .01em; }
.dir-badge.dir-out { color: #fff; background-color: #0d6efd; }
.dir-badge.dir-in { color: #fff; background-color: #198754; }

/* ---- Config and deleting ---- */
.danger-zone { border-color: #f1c0c5; background: #fffafa; }
details.schedule > form { min-width: 19rem; }

/* ---- Document cards: the settings cog ---- */
.doc-cog { border: 0; background: transparent; color: #868e96; padding: .2rem .3rem; border-radius: .375rem; line-height: 1; }
.doc-cog:hover, .doc-cog[aria-expanded="true"] { background: #eef2f6; color: #1f2d3d; }
.doc-card .dropdown-menu { min-width: 17rem; }

/* ---- Document setup: the mapping page ---- */
.map-source { position: sticky; top: calc(var(--nav-h) + .75rem); max-height: calc(100vh - var(--nav-h) - 1.5rem); overflow: auto; }
.map-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #868e96; margin-bottom: .35rem; }
.map-field { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .55rem; margin-bottom: .3rem;
    background: #f1f6fd; border: 1px solid #cfe2ff; border-radius: .4rem; cursor: grab; user-select: none; font-size: .875rem; }
.map-field:hover { background: #e2eeff; border-color: #9ec5fe; }
.map-field:active { cursor: grabbing; }
.map-field-name { font-family: var(--bs-font-monospace); color: #0b5ed7; }
.map-field-kind { font-size: .72rem; color: #868e96; }
.map-field.shake { animation: map-shake .35s; }
.map-field.mapped { background: #e8f5ec; border-color: #a3cfbb; }
.map-field.mapped:hover { background: #d1e7dd; border-color: #75b798; }
.map-field.mapped .map-field-name { color: #146c43; }
.map-field.mapped .map-field-name::before { content: "\2713\00a0"; }
@keyframes map-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.map-section { padding: .6rem 0 .9rem; border-top: 1px solid #e9ecef; }
.map-section:first-child { border-top: 0; padding-top: 0; }
.map-section-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.map-section-title { font-weight: 600; }
.map-segment { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .4rem; border-radius: .4rem; }
.map-segment:nth-child(even) { background: #f8f9fb; }
.map-segment:hover { background: #f1f6fd; }
.map-tag { width: 3.6rem; flex: none; font-weight: 700; text-transform: uppercase; margin-top: 1.05rem; text-align: center; }
.map-elements { display: flex; flex-wrap: wrap; gap: .35rem .4rem; flex: 1; min-width: 0; align-items: flex-end; }
.map-el { display: flex; flex-direction: column; margin: 0; }
.map-el-name { font-size: .68rem; color: #868e96; font-family: var(--bs-font-monospace); line-height: 1.05rem; }
.map-element { width: 9.5rem; }
.map-element.has-value { background: #e8f5ec; border-color: #a3cfbb; color: #146c43; }
.map-element.map-picked { background: #d1e7dd; border-color: #198754; box-shadow: 0 0 0 .15rem rgba(25, 135, 84, .3); }
.map-element.drop-target { outline: 2px dashed #0d6efd; outline-offset: 1px; background: #e2eeff; }
.map-add-el { padding: .1rem .3rem; font-size: .8rem; text-decoration: none; }

/* ---- Sandbox ---- */
.sandbox-log { max-height: 30rem; overflow: auto; font-size: .85rem; padding: .6rem .75rem; background: #f8f9fb; border: 1px solid #e9ecef; border-radius: .4rem; }
.sandbox-check { padding-left: 1.1rem; }

/* ---- 850 reading: what fills each procedure parameter, and its lookups ---- */
.reading-value { padding: .45rem .4rem; border-top: 1px solid #e9ecef; }
.reading-value:first-child { border-top: 0; }
.reading-rules { margin: .35rem 0 .1rem 1.5rem; padding: .35rem .5rem; border-left: 3px solid #a3cfbb; background: #f6fbf8; border-radius: 0 .4rem .4rem 0; }
.reading-rule + .reading-rule { margin-top: .3rem; }
.reading-rule .form-control, .reading-rule .form-select { flex: 0 0 auto; }
.map-tools { display: flex; gap: .15rem; flex: none; margin-top: 1.05rem; opacity: .35; }
.map-segment:hover .map-tools, .map-tools:focus-within { opacity: 1; }
.map-tools .btn { padding: .05rem .4rem; line-height: 1.3; }

/* ---- Documentation ---- */
.nav-help { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); color: #c9d3de; text-decoration: none; font-weight: 600; font-size: .9rem; }
.nav-help:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* A menu entry still being tried out: a small "beta" tag over its top right corner. */
.nav-link-beta { position: relative; }
.nav-beta { position: absolute; top: -.1rem; right: -.85rem; padding: .05rem .3rem; border-radius: .5rem; background: #f59f00; color: #212529; font-size: .55rem; font-weight: 700; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
@media (max-width: 1199.98px) { .nav-beta { position: static; margin-left: .35rem; vertical-align: middle; } }
/* The bell: what needs a look, from any page. The count is red when something is urgent, amber otherwise. */
.nav-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.85rem; padding: 0;
    color: #c9d3de; background: transparent; border: 1px solid rgba(255, 255, 255, .25); border-radius: .375rem; transition: background-color .15s ease, color .15s ease; }
.nav-bell-btn:hover, .nav-bell-btn:focus-visible, .nav-bell.show .nav-bell-btn { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-bell-count { position: absolute; top: -.45rem; right: -.5rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 1rem;
    font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; color: #fff; box-shadow: 0 0 0 2px #1f2d3d; }
.nav-bell-count.is-danger { background: #dc3545; }
.nav-bell-count.is-warning { background: #f59f00; color: #212529; }
.nav-bell-menu { width: 24rem; max-width: calc(100vw - 1.5rem); padding: .6rem; }
.nav-bell-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 .15rem .5rem; font-weight: 600; }
.nav-bell-list { max-height: 60vh; overflow-y: auto; font-size: .88rem; }
.nav-bell-list .attention { padding: .45rem .6rem; text-decoration: none; }
.nav-bell-clear { padding: .75rem .25rem; color: #198754; }
.docs-nav { position: sticky; top: calc(var(--nav-h) + .75rem); background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; padding: .9rem .6rem; }
.docs-nav-title { font-weight: 700; padding: 0 .55rem .4rem; }
.docs-nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #868e96; padding: .7rem .55rem .2rem; }
.docs-nav-link { display: block; padding: .3rem .55rem; border-radius: .375rem; color: #343a40; text-decoration: none; font-size: .925rem; }
.docs-nav-link:hover { background: #f1f6fd; color: #0b5ed7; }
.docs-nav-link.active { background: #e2eeff; color: #0b5ed7; font-weight: 600; }
.docs-version { padding: 0 .55rem; }
.docs-version-number { display: block; font-size: .925rem; font-weight: 600; color: #212529; text-decoration: none; }
.docs-version-number:hover { color: #0b5ed7; }
.docs-body { background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; padding: 1.6rem 2rem 1.2rem; max-width: 62rem; }
.docs-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #0b5ed7; font-weight: 600; }
.docs-body h2 { font-size: 1.25rem; margin: 1.9rem 0 .6rem; padding-top: 1.1rem; border-top: 1px solid #e9ecef; }
.docs-body h3 { font-size: 1.02rem; margin: 1.2rem 0 .4rem; }
.docs-body p, .docs-body li, .docs-body dd { line-height: 1.6; }
.docs-body li { margin-bottom: .25rem; }
.docs-body code { background: #f1f3f5; color: #c2255c; padding: .08rem .3rem; border-radius: .25rem; font-size: .86em; }
.docs-open { margin: .2rem 0 1rem; }
.docs-table { font-size: .92rem; }
.docs-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; white-space: nowrap; }
.docs-table td:first-child { white-space: nowrap; font-weight: 600; }
.docs-table td { vertical-align: top; }
.docs-terms dt { margin-top: .7rem; }
.docs-terms dd { margin-bottom: 0; color: #495057; }
.docs-note { background: #f1f6fd; border-left: 4px solid #4dabf7; border-radius: .25rem; padding: .7rem .9rem; margin: 1rem 0; }
.docs-pager { display: flex; justify-content: space-between; border-top: 1px solid #e9ecef; margin-top: 2.2rem; padding-top: 1rem; font-weight: 600; }
.docs-pager a { text-decoration: none; }
@media (max-width: 991.98px) { .docs-nav { position: static; } .docs-body { padding: 1.2rem 1.1rem; } }

/* ---- Config: the gear at the far right of the top bar ---- */
.nav-gear { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .375rem;
    border: 0; background: transparent; color: #c9d3de; }
.nav-gear:hover, .nav-gear:focus-visible, .nav-gear[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-gear svg { transition: transform .3s ease; }
.nav-gear:hover svg, .nav-gear[aria-expanded="true"] svg { transform: rotate(45deg); }
.nav-gear.active { color: #fff; box-shadow: inset 0 -2px 0 #4dabf7; }

/* ---- The mark at the top left, in place of the name ---- */
.app-nav .navbar-brand { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.brand-mark { display: block; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); transition: transform .15s ease, box-shadow .15s ease; }
.navbar-brand:hover .brand-mark { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }

/* ---- Top bar: the tools at the right, and the collapsed menu on a narrow screen ---- */
.nav-tools { display: flex; align-items: center; gap: .5rem; }
.nav-signout { display: flex; align-items: center; gap: .5rem; margin: 0; }
@media (max-width: 1199.98px) {
    /* The menu opens as a list: each entry a full-width row, the current one marked at the left. */
    .app-nav .navbar-collapse { padding: .4rem 0 .2rem; }
    .app-nav .navbar-nav { gap: .1rem; }
    .app-nav .nav-link { margin: 0; padding: .55rem .75rem; border-bottom: 0; border-left: 3px solid transparent; border-radius: .25rem; }
    .app-nav .nav-link.active { border-left-color: #4dabf7; background: rgba(255, 255, 255, .08); border-radius: .25rem; }
    .app-nav .navbar-nav .dropdown-menu { margin: .15rem 0 .35rem .75rem; box-shadow: none; }
    /* Then one row of tools: help and refresh at the left, who is signed in and Config at the right. */
    .nav-tools { margin-top: .5rem; padding: .65rem .25rem .3rem; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
    .nav-signout { margin-left: auto; }
}

.map-distinct { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: #6c757d; margin: 0 .3rem 0 0; white-space: nowrap; }

.docs-where { font-size: .82rem; color: #6c757d; background: #f8f9fb; border-radius: .25rem; padding: .3rem .6rem; margin: -.2rem 0 .7rem; }
.docs-diagram { background: #f8f9fb; border: 1px solid #e3e7eb; border-radius: .4rem; padding: .9rem 1rem; font-size: .8rem; line-height: 1.35; overflow-x: auto; }

/* ---- Config, Divisions: database connections ---- */
.conn-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .6rem 0; border-top: 1px solid #eef1f4; }
.conn-row:first-of-type { border-top: 0; }
.conn-main { min-width: 0; }
.conn-main code { word-break: break-all; }
.conn-tools { display: flex; gap: .3rem; flex: none; }
details.schedule > form.conn-form { left: auto; right: 0; min-width: 21rem; }
.ship-from > summary { cursor: pointer; }

/* Back to top: a round button in the bottom right corner, faint until hovered. */
.to-top { position: fixed; right: 1.25rem; bottom: 4.5rem; z-index: 1030; width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid #ced4da; border-radius: 50%; background: #fff; color: #495057; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
    opacity: .6; cursor: pointer; transition: opacity .15s, background-color .15s, color .15s, transform .15s; }
.to-top[hidden] { display: none; }
.to-top:hover, .to-top:focus-visible { opacity: 1; background: #0d6efd; border-color: #0d6efd; color: #fff; transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid #258cfb; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } .to-top:hover { transform: none; } }
@media print { .to-top { display: none; } }

/* The footer: a note on the left, the Shadow diff links on the right. */
.footer-note { overflow: hidden; text-overflow: ellipsis; }
.footer-links { flex: none; display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.footer-links a { color: #6c757d; text-decoration: none; padding: .1rem .45rem; border: 1px solid #dee2e6; border-radius: 1rem; line-height: 1.4; }
.footer-links a:hover { color: #0d6efd; border-color: #86b7fe; }
.footer-links a.active { color: #fff; background: #6c757d; border-color: #6c757d; }
.conn-tools { align-items: center; }
.conn-pick { width: 15rem; max-width: 45vw; }

/* Vendor setup: one block per division, its fields shown once the division is ticked. */
.division-block { border: 1px solid #dee2e6; border-radius: .5rem; padding: .7rem .85rem; margin-bottom: .6rem; background: #f8f9fa; }
.division-block.is-on { background: #fff; border-color: #86b7fe; }
.division-block .division-fields { display: none; }
.division-block.is-on .division-fields { display: block; }

/* A vendor's page: one band per division, its documents under it. */
.vendor-division-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0 .6rem; font-size: .9rem; }

/* A hint in a field that upper-cases what is typed reads as a hint, not as a value. */
.form-control.text-uppercase::placeholder { text-transform: none; }

/* A document card's Schedule panel opens across the card, under its row of buttons, so it never runs past
   the card's edge whichever button it hangs from and however the buttons wrap. */
.doc-actions { position: relative; }
details.schedule.doc-schedule { position: static; }
details.schedule.doc-schedule > form { top: 100%; left: 0; right: 0; min-width: 0; margin-top: .35rem; }

/* The version in the footer: a quiet link to the change log. */
.footer-version { color: inherit; text-decoration: none; border-bottom: 1px dotted #adb5bd; }
.footer-version:hover { color: #0d6efd; border-bottom-color: #0d6efd; }

/* Search in the top bar: one box, searched with Enter. */
.nav-search input { width: 15rem; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.nav-search input::placeholder { color: rgba(255, 255, 255, .6); }
.nav-search input:focus { background: #fff; color: #212529; }
.nav-search input:focus::placeholder { color: #6c757d; }
@media (max-width: 1199.98px) { .nav-search { flex: 1 1 100%; } .nav-search input { width: 100%; } }

/* Tooltips (site.js turns every title into one). Dark, crisp, and readable at a sentence's length. */
.rx-tip { --bs-tooltip-bg: #1f2d3d; --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; --bs-tooltip-font-size: .8125rem;
    --bs-tooltip-padding-x: .6rem; --bs-tooltip-padding-y: .4rem; --bs-tooltip-border-radius: .375rem; --bs-tooltip-max-width: 16rem;
    pointer-events: none; z-index: 1090; }
.rx-tip .tooltip-inner { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2); line-height: 1.35; }
.rx-tip-long { --bs-tooltip-max-width: 24rem; }
.rx-tip-long .tooltip-inner { text-align: left; }
@media (prefers-reduced-motion: reduce) { .rx-tip.fade { transition: none; } }

/* ---- The top bar stays in view ---- */
/* --nav-h is the bar's height, measured by site.js; what sticks below it, and a link to a heading, allow for it. */
:root { --nav-h: 3.25rem; }
html { scroll-padding-top: calc(var(--nav-h) + .75rem); }
.app-header { position: sticky; top: 0; z-index: 1030; margin-bottom: 1rem; }
@media (max-width: 1199.98px) {
    /* Opened on a phone, the menu scrolls inside the bar and never runs off the bottom of the screen. */
    .app-nav .navbar-collapse { max-height: calc(100vh - 4rem); overflow-y: auto; }
}
@media print { .app-header { position: static; } }

/* ---- The assistant ---- */
.nav-ask svg { transition: none; }
.nav-ask:hover svg, .nav-ask[aria-expanded="true"] svg { transform: none; }
.offcanvas.ask-panel { --bs-offcanvas-width: 27rem; top: var(--nav-h); border-top: 1px solid #e3e7eb; box-shadow: -4px 0 14px rgba(0, 0, 0, .08); }
.ask-panel .offcanvas-header { padding: .6rem .9rem; border-bottom: 1px solid #e9ecef; }
.ask-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ask-log { flex: 1 1 auto; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; }
.ask-entry { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem .9rem; border-top: 1px solid #e9ecef; background: #f8f9fa; }
.ask-entry textarea { resize: none; font-size: .92rem; }
.ask-user { align-self: flex-end; max-width: 88%; background: #1f2d3d; color: #fff; border-radius: .8rem .8rem .2rem .8rem; padding: .45rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-bot { align-self: flex-start; max-width: 96%; background: #f1f3f5; border-radius: .8rem .8rem .8rem .2rem; padding: .55rem .75rem; overflow-wrap: anywhere; }
.ask-bot p { margin: 0 0 .5rem; }
.ask-bot ul, .ask-bot ol { margin: 0 0 .5rem; padding-left: 1.2rem; }
.ask-bot > :last-child { margin-bottom: 0; }
.ask-bot code { font-size: .85em; }
.ask-step, .ask-wait { align-self: flex-start; font-size: .8rem; color: #6c757d; overflow-wrap: anywhere; }
.ask-step a { color: inherit; }
.ask-wait::after { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-left: .4rem; border: 2px solid #adb5bd; border-top-color: transparent; border-radius: 50%; animation: ask-spin .8s linear infinite; vertical-align: -1px; }
@keyframes ask-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ask-wait::after { animation: none; } }
/* A fix the assistant prepared, waiting for Confirm or Cancel, then what came of it. */
.ask-action { align-self: stretch; border: 1px solid #b6d4fe; background: #f5f9ff; border-radius: .6rem; padding: .6rem .75rem; }
.ask-action-title { font-weight: 600; margin-bottom: .25rem; }
.ask-action ul { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .88rem; color: #495057; }
.ask-action-outcome { font-size: .88rem; font-weight: 600; }
.ask-action-outcome.is-done { color: #0f7a4d; }
.ask-action-outcome.is-not { color: #6c757d; }
.ask-error { align-self: stretch; background: #fff5f5; border: 1px solid #f1c0c0; color: #842029; border-radius: .5rem; padding: .45rem .7rem; font-size: .88rem; }
.ask-empty { color: #6c757d; }
.ask-empty ul { padding-left: 1.1rem; }
.ask-empty li { cursor: pointer; color: #0d6efd; margin-bottom: .2rem; }
.ask-empty li:hover { text-decoration: underline; }

/* ---- Documents per day ---- */
.vchart-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-top: .15rem; font-size: .85rem; }
.vchart-sum strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #1f2d3d; }
.vchart-delta { font-size: .75rem; font-weight: 600; padding: .1rem .45rem; border-radius: 1rem; background: #eef1f4; color: #495057; }
.vchart-delta.is-up { background: #e6f7ef; color: #0f7a4d; }
.vchart-delta.is-down { background: #fdecec; color: #b42318; }
.vchart { --axis: 2.6rem; --labels: 2.5rem; --head: 1.4rem; position: relative; height: 260px; margin-top: .25rem; }
.vchart-grid { position: absolute; left: var(--axis); right: 0; top: var(--head); bottom: var(--labels); pointer-events: none; }
.vchart-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #e6e9ed; }
.vchart-line:first-child { border-top: 1px solid #ced4da; }
.vchart-line span { position: absolute; right: 100%; top: -.55rem; padding-right: .5rem; font-size: .68rem; color: #adb5bd; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vchart-cols { position: absolute; inset: 0 0 0 var(--axis); display: flex; gap: .35rem; }
.vchart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: .6rem; transition: background-color .15s ease; }
.vchart-col.is-today { background: rgba(79, 70, 229, .05); }
.vchart-track { flex: 1 1 auto; min-height: 0; padding-top: var(--head); display: flex; align-items: flex-end; justify-content: center; }
.vchart-stack { position: relative; width: 84%; max-width: 6rem; min-height: 4px; transform-origin: bottom; animation: vchart-grow .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); transition: opacity .15s ease, filter .15s ease, transform .15s ease; }
.vchart-bar { height: 100%; display: flex; flex-direction: column; gap: 2px; border-radius: .35rem .35rem 0 0; overflow: hidden; }
.vchart-seg { min-height: 3px; background: var(--c); }
.vchart-total { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding-bottom: .2rem; font-size: .72rem; font-weight: 600; color: #495057; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vchart-none { width: .4rem; height: .4rem; margin-bottom: -.2rem; border-radius: 50%; background: #ced4da; }
.vchart-day { height: var(--labels); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; line-height: 1.25; color: #6c757d; }
.vchart-day strong { font-weight: 600; }
.vchart-day span { color: #adb5bd; font-variant-numeric: tabular-nums; }
.vchart-col.is-today .vchart-day strong { color: #4f46e5; }
.vchart-col.is-today .vchart-total { color: #1f2d3d; }
.vchart-cols:hover .vchart-col:not(:hover) .vchart-stack { opacity: .4; filter: saturate(.6); }
.vchart-col:hover { background: #f4f6f8; }
.vchart-col:hover .vchart-stack { transform: translateY(-2px); }
@keyframes vchart-grow { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vchart-stack { animation: none; transition: none; } }
.vchart-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.vchart-key { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border: 1px solid #e9ecef; border-radius: 1rem; font-size: .78rem; color: #495057; background: #fff; }
.vchart-key i { width: .6rem; height: .6rem; border-radius: 2px; background: var(--c); }
.vchart-key strong { font-variant-numeric: tabular-nums; color: #1f2d3d; }
.vchart-key.is-none { opacity: .55; }
@media (max-width: 575.98px) { .vchart { --axis: 2rem; height: 220px; } .vchart-stack { width: 88%; } .vchart-total { font-size: .65rem; } }

/* A file name in a grid (no spaces: 2026-10-15-09-11-10-865077.x12) wraps anywhere, so its column can be narrow. */
.file-name { min-width: 8rem; max-width: 13rem; overflow-wrap: anywhere; white-space: normal; }
.table td .file-name small { white-space: normal; }
/* Long names with no spaces (Arc connector paths) break anywhere rather than widen the grid. */
.wrap-anywhere { overflow-wrap: anywhere; }

/* Breadcrumbs in Bootstrap 6's style (getbootstrap.com/docs/6.0/components/breadcrumb): each step a rounded link that
   shades on hover, a chevron between steps, the page you are on darkest. Bootstrap 5's "/" separator is turned off.
   Pulled left by the link's padding so the first step's text lines up with the page. */
.breadcrumb {
    --rx-crumb-pad-x: .75rem;
    --rx-crumb-pad-y: .25rem;
    display: flex; flex-wrap: wrap; align-items: center; padding: 0; list-style: none; background: transparent;
    margin-left: calc(-1 * var(--rx-crumb-pad-x));
}
.breadcrumb-item { display: flex; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: none; }
.breadcrumb-divider { margin-inline: calc(var(--rx-crumb-pad-x) / 4); color: #8a929b; }
.breadcrumb-divider:empty::before {
    content: ""; display: block; width: .375rem; height: .75rem; background-color: currentcolor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 2l4 6-4 6'/%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 8 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 2l4 6-4 6'/%3e%3c/svg%3e") center / contain no-repeat;
}
.breadcrumb-link {
    display: flex; align-items: center; justify-content: center; position: relative; min-height: 2.25rem;
    padding: var(--rx-crumb-pad-y) var(--rx-crumb-pad-x); border-radius: .75rem; color: #5f6670; text-decoration: none;
}
a.breadcrumb-link:hover { z-index: 2; color: #3d434a; background-color: #eef1f4; }
.breadcrumb-link.active { color: #212529; }

/* MFT: an AS2 partner's form, laid out like Arc's connection info: padded, with each group's choices side by side. */
.as2-partner-form { border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem 1.1rem 1.1rem; background: #fcfcfd; }
.as2-partner-form .form-label { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.as2-group-title { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.as2-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; }
.as2-checks .form-check { margin-bottom: 0; font-size: .9rem; }
@media (max-width: 575.98px) { .as2-checks { grid-template-columns: 1fr; } }

/* Reports: the designer's column chooser and filter rows, and the chart. */
.report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 767.98px) { .report-columns { grid-template-columns: 1fr; } }
.report-filter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.report-filter [name=FilterValue][hidden] { display: block !important; visibility: hidden; }
.report-chart svg { display: block; max-height: 260px; }
.report-chart-grid { stroke: #e9ecef; stroke-width: 1; }
.report-chart-axis { font-size: 11px; fill: #6c757d; }
.report-chart-bar { fill: #4f46e5; }
.report-chart-bar:hover { fill: #3730a3; }
.report-chart-line { fill: none; stroke: #4f46e5; stroke-width: 2; }
.report-chart-dot { fill: #4f46e5; }