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. */
/* 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; }

/* A ribbon on a panel's edge, for the numbered steps of a form (Tasks): it sticks out past the left border, with its
   tail folded under the panel, and carries the step's number in a white circle and its name. */
.panel.has-ribbon { position: relative; padding-top: 3.75rem; }
.panel-ribbon {
    position: absolute; top: 1rem; left: -.55rem; display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem 1rem .4rem .6rem; background: #3b6fd8; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.2;
    border-radius: .4rem .4rem .4rem 0; box-shadow: 0 2px 6px rgba(59, 111, 216, .3); margin: 0;
}
.panel-ribbon::after { content: ""; position: absolute; left: 0; bottom: -.45rem; border-top: .45rem solid #26489a; border-left: .55rem solid transparent; }
.panel-ribbon .ribbon-step {
    display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
    background: #fff; color: #3b6fd8; font-size: .8rem; font-weight: 700;
}
.panel-ribbon.is-done { background: #2f9e6b; box-shadow: 0 2px 6px rgba(47, 158, 107, .3); }
.panel-ribbon.is-done::after { border-top-color: #1f6e4a; }
.panel-ribbon.is-done .ribbon-step { color: #2f9e6b; }
.panel-ribbon.is-plain { background: #5b6672; box-shadow: 0 2px 6px rgba(91, 102, 114, .25); }
.panel-ribbon.is-plain::after { border-top-color: #3a424b; }
.panel-ribbon-note { position: absolute; top: 1.25rem; right: 1.1rem; color: #6c757d; font-size: .875rem; }

/* Fields most forms never need, behind a quiet link; open by itself when one of them is filled in. */
.more-options > summary { display: inline-flex; align-items: center; gap: .35rem; color: #3b6fd8; cursor: pointer; list-style: none; font-size: .9rem; }
.more-options > summary::-webkit-details-marker { display: none; }
.more-options > summary::before { content: "›"; display: inline-block; transition: transform .15s; font-size: 1.1rem; line-height: 1; }
.more-options[open] > summary::before { transform: rotate(90deg); }
.more-options[open] > summary { margin-bottom: .75rem; }

/* The task form: a width that reads as a form on a wide screen, quiet sub-headings, and field chips that insert {source} and the like. */
.form-subhead { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; padding-bottom: .4rem; border-bottom: 1px solid #eef0f3; }
.token-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.token-chip {
    border: 1px solid #dfe3e8; background: #f6f8fa; color: #4a525b; border-radius: 999px; padding: .1rem .6rem;
    font-family: var(--bs-font-monospace); font-size: .75rem; line-height: 1.5; cursor: pointer;
}
.token-chip:hover, .token-chip:focus-visible { background: #eef3fd; border-color: #b9cdf5; color: #2b5bc4; outline: none; }
.format-pick .btn { min-width: 9rem; }

/* The task page's summary card, beside the form on a wide screen. */
.glance { position: sticky; top: 5rem; background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; padding: 1.1rem 1.2rem; }
.glance-title { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; margin-bottom: .75rem; }
.glance-list { display: grid; grid-template-columns: 5.5rem 1fr; gap: .45rem .75rem; margin: 0; font-size: .9rem; }
.glance-list dt { font-weight: 500; color: #6c757d; }
.glance-list dd { margin: 0; color: #212529; overflow-wrap: anywhere; }
.glance-note { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #eef0f3; color: #6c757d; font-size: .85rem; }

/* The task's times: one tidy time picker each, a quiet remove button, and an add link at the end of the row. */
.time-list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.time-list.is-invalid .form-control { border-color: #dc3545; }
.time-pick { display: inline-flex; align-items: center; gap: .1rem; }
.time-pick .form-control { width: 9rem; }
.time-remove { border: 0; background: transparent; color: #8a929b; font-size: 1.15rem; line-height: 1; padding: .25rem .35rem; cursor: pointer; border-radius: .3rem; }
.time-remove:hover { color: #dc3545; }
.time-add { padding: .25rem .25rem; text-decoration: none; font-size: .9rem; }

/* Task step 1: the schema line, parameter boxes, the column list and the filter rules. */
.schema-state { font-size: .85rem; color: #6c757d; padding-bottom: .5rem; }
.param-box { border: 1px solid #eef0f3; border-radius: .5rem; padding: .85rem 1rem; background: #fbfcfd; }
.param-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 6rem 1fr; align-items: center; gap: .75rem; padding: .3rem 0; }
.param-row code { color: #3d434a; background: none; font-size: .9rem; }
.param-type { color: #8a929b; font-size: .78rem; font-family: var(--bs-font-monospace); }
.column-list { border: 1px solid #dee2e6; border-radius: .5rem; max-height: 18rem; overflow-y: auto; padding: .35rem; background: #fff; }
.column-item { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border-radius: .35rem; cursor: pointer; margin: 0; }
.column-item:hover { background: #f3f6fa; }
.column-item .param-type { margin-left: auto; }
.filter-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.row-remove { border: 0; background: transparent; color: #8a929b; font-size: 1.15rem; line-height: 1; padding: .25rem .4rem; border-radius: .3rem; cursor: pointer; }
.row-remove:hover { color: #dc3545; }
.query-box { font-size: .9rem; line-height: 1.5; }

/* A task's data sources: a tick box each. */
.source-pick { display: flex; align-items: center; gap: .55rem; border: 1px solid #dee2e6; border-radius: .5rem; padding: .5rem .75rem; margin: 0; cursor: pointer; background: #fff; }
.source-pick:hover { border-color: #b9cdf5; background: #f7f9fd; }
.source-pick:has(input:checked) { border-color: #86a8ea; background: #eef3fd; }

/* Edit From | Add Cc | Add Bcc under a task's To. */
.email-toggles { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .875rem; }
.email-toggles .sep { color: #c3c8ce; }
.link-toggle { border: 0; background: none; padding: 0; color: #2b5bc4; font-weight: 500; cursor: pointer; }
.link-toggle:hover, .link-toggle:focus-visible { text-decoration: underline; outline: none; }

/* The query editor on a task (CodeMirror), made to sit like the form's other boxes, and the line under it. */
.CodeMirror { height: 18rem; border: 1px solid #dee2e6; border-radius: .375rem; font-family: var(--bs-font-monospace); font-size: .875rem; line-height: 1.5; }
.CodeMirror-focused { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15); }
.CodeMirror-gutters { background: #f8f9fa; border-right: 1px solid #eef0f3; }
.CodeMirror-linenumber { color: #9aa1a9; }
.CodeMirror pre.CodeMirror-placeholder { color: #9aa1a9; }
.CodeMirror-activeline-background { background: #f5f8fd; }
.is-invalid + .CodeMirror { border-color: #dc3545; }
.query-status { min-height: 1.4rem; margin-top: .4rem; font-size: .85rem; color: #6c757d; }
.query-status.is-ok { color: #198754; }
.query-status.is-ok::before { content: "✓ "; }
.query-status.is-error { color: #dc3545; }
.query-status.is-error::before { content: "✗ "; }
.query-status.is-busy { color: #6c757d; font-style: italic; }
.CodeMirror-hints { font-family: var(--bs-font-monospace); font-size: .85rem; z-index: 1080; }

/* A task that repeats: how often, then the hours it repeats between. */
.every-pick .form-select { max-width: 12rem; }
.every-hours { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.every-hours input { max-width: 9rem; }
.every-hours span { color: #5f6670; }

/* Import from Arc: the notes on a route open under its name. */
.import-grid details summary { cursor: pointer; }
.import-grid { table-layout: fixed; width: 100%; }
.import-grid td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.import-grid th:nth-child(1) { width: 34%; }
.import-grid th:nth-child(2) { width: 13%; }
.import-grid th:nth-child(3) { width: 14%; }
.import-grid th:nth-child(4) { width: 22%; }
.import-grid th:nth-child(5) { width: 7%; }
.import-grid th:nth-child(6) { width: 10%; }
.import-grid td:last-child { white-space: nowrap; }
.import-file { max-width: 24rem; }
.arc-checks summary { cursor: pointer; }

/* Stat tiles: a tinted icon square, a quiet label and a big number in the tile's colour. */
.stat-tile { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; background: #fff; border: 1px solid #eceef3; border-radius: .75rem; height: 100%; }
.stat-icon { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: .65rem; display: grid; place-items: center; background: var(--tint); }
.stat-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat-tile .stat-label { font-size: .9rem; text-transform: none; letter-spacing: 0; color: #5f6670; }
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.stat-indigo { --tint: #ecebfd; --ink: #5b50e6; }
.stat-green { --tint: #dcf7ec; --ink: #11a36b; }
.stat-amber { --tint: #fff0dc; --ink: #ee8a1a; }
.stat-red { --tint: #fde4e4; --ink: #dc3545; }
.stat-grey { --tint: #eef0f3; --ink: #7a828c; }

/* Send panel: Email, SFTP or AS2, as a pill switch; the chosen one tinted like the stat tiles. */
.send-tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: #f3f4f7; border-radius: .7rem; }
.send-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: .5rem; color: #5f6670; cursor: pointer; font-weight: 500; transition: background-color .15s, color .15s; user-select: none; }
.send-tab svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send-tab:hover { color: #3d35c8; }
.send-tabs .btn-check:checked + .send-tab { color: #4f46e5; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px #e4e2fb; }
.send-tabs .btn-check:focus-visible + .send-tab { outline: 2px solid #a5a1f3; outline-offset: 1px; }
.send-pane { margin-top: 1rem; }

/* SFTP: a login for each data source, one small card each. */
.sftp-login { padding: .6rem .75rem; border: 1px solid #eceef3; border-radius: .6rem; background: #fafbfc; margin-bottom: .5rem; }
.sftp-login-name { font-size: .8rem; font-weight: 600; color: #4f46e5; margin-bottom: .35rem; }