— so uncollapsed text used to spill out over the page content. These rules extend the base's treatment to
. */
@media (min-width: 992px) {
.sidebar-icon-only .sidebar #companyname,
.sidebar-dark.sidebar-icon-only .sidebar #companyname {
display: none;
}
.sidebar-icon-only .sidebar .nav { padding: .75rem .5rem 60px; }
.sidebar-icon-only .sidebar .nav .nav-item .nav-link,
.sidebar-dark.sidebar-icon-only .sidebar .nav .nav-item .nav-link {
display: flex;
align-items: center;
justify-content: center;
padding: .65rem 0;
border-radius: 12px;
}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link p {
display: none;
}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon,
.sidebar-dark.sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
margin-right: 0;
font-size: 1.0625rem;
}
/* On hover the label returns as a flyout, matching what the base theme
already does for .menu-title items so both kinds behave alike. */
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link p {
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 70px;
width: 190px;
z-index: 2;
margin: 0;
padding: .5rem 1.25rem;
background: var(--cp-sidebar);
color: #fff;
border-radius: 0 12px 12px 0;
box-shadow: var(--cp-shadow-md);
white-space: nowrap;
}
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
background: var(--cp-sidebar);
border-radius: 0 0 12px 0;
box-shadow: var(--cp-shadow-md);
}
.sidebar-icon-only .sidebar .nav.sub-menu { padding-left: .75rem; }
}
/* Submenus sit inside the rail rather than floating on a light card. */
.sidebar .nav.sub-menu {
padding: .25rem 0 .25rem 1.6rem;
margin-bottom: .25rem;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
color: rgba(255, 255, 255, .5);
font-size: .78125rem;
padding: .4rem .75rem;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
background: rgba(255, 255, 255, .08);
color: #fff;
}
/* -------------------------------------------------------------- content - */
.content-wrapper {
background: var(--cp-mist);
padding: 1.75rem 1.75rem 2.5rem;
}
@media (max-width: 767px) {
.content-wrapper { padding: 1rem .75rem 1.75rem; }
}
/* On a phone the page is narrow enough already, so the nested gutters are
trimmed back rather than spending 30px a side on padding twice over. */
@media (max-width: 767px) {
.content-wrapper > .content > .container-fluid,
.content-wrapper > .content-header > .container-fluid,
.content-wrapper .container-fluid {
padding-left: 0;
padding-right: 0;
}
.content-wrapper .card { padding-left: 0; padding-right: 0; }
.content-wrapper .card > .card-body { padding: 1rem .875rem; }
/* Bootstrap rows add their own negative margin against gutters that are
no longer there. */
.content-wrapper .container-fluid > .row { margin-left: 0; margin-right: 0; }
.content-wrapper .container-fluid > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}
/* ----------------------------------------------------------------- card - */
.card {
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
background: var(--cp-paper);
box-shadow: var(--cp-shadow-sm);
transition: box-shadow .2s ease, border-color .2s ease;
}
.card .card-body {
padding: 1.5rem;
}
@media (max-width: 767px) {
.card .card-body { padding: 1.125rem; }
}
.card .card-title,
.card .card-body .card-title {
font-family: var(--cp-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.015em;
color: var(--cp-ink);
margin-bottom: 1.25rem;
text-transform: none;
}
.card .card-subtitle,
.card .card-description {
color: var(--cp-ink-45);
font-size: .8125rem;
margin-bottom: 1.25rem;
}
.card-header {
background: transparent;
border-bottom: 1px solid var(--cp-line);
padding: 1.25rem 1.5rem;
font-family: var(--cp-display);
font-weight: 700;
letter-spacing: -0.015em;
}
.card-footer {
background: transparent;
border-top: 1px solid var(--cp-line);
padding: 1rem 1.5rem;
}
.grid-margin { margin-bottom: 1.5rem; }
/* The base theme's tinted dashboard cards become quiet white cards with a
coloured accent, so numbers carry the page instead of blocks of colour. */
.card-light-success,
.card-light-danger,
.card-light-info,
.card-light-blue,
.card-dark-blue,
.card-tale,
.card-light-yellow {
background: var(--cp-paper) !important;
color: var(--cp-ink) !important;
border: 1px solid var(--cp-line);
position: relative;
overflow: hidden;
}
.card-light-success .card-body,
.card-light-danger .card-body,
.card-light-info .card-body,
.card-light-blue .card-body,
.card-dark-blue .card-body,
.card-tale .card-body,
.card-light-yellow .card-body {
color: var(--cp-ink);
}
.card-light-success::before,
.card-light-danger::before,
.card-light-info::before,
.card-light-blue::before,
.card-dark-blue::before,
.card-tale::before,
.card-light-yellow::before {
content: "";
position: absolute;
left: 0;
top: 1.25rem;
bottom: 1.25rem;
width: 3px;
border-radius: 0 3px 3px 0;
}
.card-light-success::before { background: var(--cp-green); }
.card-dark-blue::before,
.card-light-blue::before,
.card-tale::before { background: var(--cp-ink); }
.card-light-info::before { background: var(--cp-blue); }
.card-light-danger::before { background: var(--cp-yellow); }
/* The big number on those cards. */
.fs-30 {
font-family: var(--cp-display);
font-size: 2rem !important;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.1;
color: var(--cp-ink);
}
/* First line of a stat card is an eyebrow label, not body copy. */
.card-light-success .card-body > p:first-child,
.card-light-danger .card-body > p:first-child,
.card-light-info .card-body > p:first-child,
.card-light-blue .card-body > p:first-child,
.card-dark-blue .card-body > p:first-child,
.card-tale .card-body > p:first-child,
.card-light-yellow .card-body > p:first-child {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin-bottom: .75rem !important;
}
/* Trailing "as at ..." timestamp. */
.card-light-success .card-body > p:last-child,
.card-light-danger .card-body > p:last-child,
.card-light-info .card-body > p:last-child,
.card-light-blue .card-body > p:last-child,
.card-dark-blue .card-body > p:last-child,
.card-tale .card-body > p:last-child,
.card-light-yellow .card-body > p:last-child {
font-size: .6875rem;
color: var(--cp-ink-45);
margin-bottom: 0;
}
/* Small caps kicker above a page title. */
.cp-eyebrow {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .3125rem;
}
/* Purpose-built stat tile for new markup. */
.cp-stat .card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cp-stat__label {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .75rem;
}
.cp-stat__value {
font-family: var(--cp-display);
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--cp-ink);
margin: 0;
/* The card body is a flex column with align-items: flex-start, so this is
a flex item that would otherwise size to its text and hang outside the
card — a long currency figure did exactly that on a phone. */
max-width: 100%;
overflow-wrap: break-word;
}
/* Phones: a figure like $1,304,100.50 needs ~197px at the desktop size but
only has ~138px in a half-width tile, so the type steps down here. */
@media (max-width: 575.98px) {
.cp-stat__value { font-size: 1.625rem; letter-spacing: -0.03em; }
.cp-stat__label { margin-bottom: .5rem; }
}
.cp-stat__meta {
font-size: .6875rem;
color: var(--cp-ink-45);
margin: .625rem 0 0;
}
/* Soft delta / status pill. */
.cp-pill {
display: inline-flex;
align-items: center;
gap: .3em;
padding: .25rem .6rem;
border-radius: var(--cp-r-pill);
font-size: .6875rem;
font-weight: 700;
line-height: 1.4;
background: var(--cp-mist);
color: var(--cp-ink-60);
}
.cp-pill--up { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-pill--info { background: var(--cp-sky); color: var(--cp-blue); }
.cp-pill--warn { background: var(--cp-yellow-soft); color: var(--cp-yellow-ink); }
.cp-pill--down { background: var(--cp-red-soft); color: var(--cp-red); }
/* Page masthead: title block on the left, status chips on the right. */
.cp-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.cp-page-head__title { margin: 0; }
.cp-page-head__sub { margin: .25rem 0 0; font-size: .8125rem; color: var(--cp-ink-45); }
.cp-page-head__aside { display: flex; align-items: center; gap: .5rem; }
/* The default pill is mist-on-mist out here on the page background, so chips
in the masthead sit on paper with a hairline instead. */
.cp-page-head__aside .cp-pill {
background: var(--cp-paper);
border: 1px solid var(--cp-line);
color: var(--cp-ink-45);
font-weight: 600;
padding: .3125rem .75rem;
}
/* Card header that carries a title and one line of context. */
.cp-cardhead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
/* The base theme's .card .card-body .card-title carries three classes, so the
title/subtitle pairing has to match that weight to close the gap. */
.cp-cardhead .card-title,
.card .card-body .cp-cardhead .card-title { margin-bottom: .1875rem; }
.cp-cardhead__sub { margin: 0; font-size: .75rem; color: var(--cp-ink-45); }
/* ---------------------------------------------------------------- switch - */
/* A labelled on/off control for filtering a list in place. Reads as a switch
rather than a checkbox because it changes what the page shows, not what a
form will submit. */
.cp-toggle {
display: inline-flex;
align-items: center;
gap: .625rem;
cursor: pointer;
margin: 0;
font-size: .8125rem;
font-weight: 600;
color: var(--cp-ink-60);
user-select: none;
}
.cp-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cp-toggle__track {
flex: 0 0 auto;
position: relative;
width: 38px;
height: 22px;
border-radius: var(--cp-r-pill);
background: var(--cp-line-strong);
transition: background .18s ease;
}
.cp-toggle__track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(18, 25, 58, .3);
transition: transform .18s ease;
}
.cp-toggle input:checked + .cp-toggle__track { background: var(--cp-brand); }
.cp-toggle input:checked + .cp-toggle__track::after { transform: translateX(16px); }
.cp-toggle input:focus-visible + .cp-toggle__track {
outline: 3px solid rgba(18, 25, 58, .35);
outline-offset: 2px;
}
.cp-toggle__count {
font-weight: 500;
color: var(--cp-ink-45);
}
/* Secondary "View all"-style action: a link that behaves like a quiet chip. */
.cp-link-quiet {
font-size: .75rem;
font-weight: 700;
color: var(--cp-ink-60);
padding: .25rem .75rem;
border-radius: var(--cp-r-pill);
white-space: nowrap;
}
.cp-link-quiet:hover { background: var(--cp-mist); color: var(--cp-ink); text-decoration: none; }
/* Icon-only row action. Bootstrap's dropdown-toggle draws a caret next to the
glyph, which reads as a second, meaningless icon in a table cell. */
.cp-icon-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
color: var(--cp-ink-45);
}
.cp-icon-toggle::after { display: none !important; }
.cp-icon-toggle:hover { background: var(--cp-mist); color: var(--cp-ink); }
/* A row of small figures under a chart title — replaces stacked headings so
the chart, not the preamble, is the first thing read. */
.cp-metricrow {
display: flex;
flex-wrap: wrap;
gap: 0;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
background: var(--cp-rail);
padding: .75rem 0;
margin-bottom: 1.5rem;
}
.cp-metricrow__item {
flex: 1 1 25%;
min-width: 84px;
padding: 0 1rem;
border-left: 1px solid var(--cp-line);
}
.cp-metricrow__item:first-child { border-left: 0; }
.cp-metricrow__label {
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .25rem;
}
.cp-metricrow__value {
font-family: var(--cp-display);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--cp-ink);
margin: 0;
}
/* ---------------------------------------------------------- notice strip - */
/* One slim line that cycles through the change log, in place of a full card.
Sized so it reads as chrome above the page, not as content within it. */
.cp-ticker {
display: flex;
align-items: center;
gap: .75rem;
padding: .4375rem .5rem .4375rem .5rem;
margin-bottom: 1.25rem;
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-pill);
box-shadow: var(--cp-shadow-sm);
}
.cp-ticker__tag {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .375rem;
height: 26px;
padding: 0 .6875rem;
border-radius: var(--cp-r-pill);
background: var(--cp-yellow-soft);
color: var(--cp-yellow-ink);
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.cp-ticker__tag i { font-size: .75rem; }
/* Fixed-height stage so notices of different lengths cross-fade in place
without the strip changing height between them. */
.cp-ticker__viewport {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 22px;
}
.cp-ticker__item {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: .5rem;
height: 22px;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .3s ease, transform .3s ease;
}
.cp-ticker__item.is-active {
opacity: 1;
visibility: visible;
transform: none;
}
.cp-ticker__text {
font-size: .8125rem;
font-weight: 500;
color: var(--cp-ink-90);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a.cp-ticker__text { color: var(--cp-ink-90); }
a.cp-ticker__text:hover { color: var(--cp-ink); text-decoration: underline; }
.cp-ticker__item .badge { flex: 0 0 auto; }
.cp-ticker__dots {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .3125rem;
}
.cp-ticker__dot {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cp-line-strong);
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.cp-ticker__dot:hover { background: var(--cp-ink-45); }
.cp-ticker__dot.is-active {
background: var(--cp-ink);
transform: scale(1.35);
}
.cp-ticker__all { flex: 0 0 auto; }
@media (max-width: 767px) {
.cp-ticker { border-radius: var(--cp-r-card); }
.cp-ticker__tag span { display: none; }
.cp-ticker__tag { padding: 0 .5rem; }
.cp-ticker__all { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cp-ticker__item { transition: none; transform: none; }
.cp-ticker__dot { transition: none; }
}
/* ------------------------------------------------------- record header - */
/* The masthead for a single record (a customer, a package): who it is, the
handful of facts you always want, and the actions you can take — so the
page opens with an answer instead of a wall of labels. */
.cp-profile .card-body { padding: 1.5rem; }
.cp-profile__top {
display: flex;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.cp-avatar {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--cp-sky);
color: var(--cp-blue);
font-family: var(--cp-display);
font-weight: 800;
font-size: 1.125rem;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.cp-profile__name {
font-family: var(--cp-display);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--cp-ink);
margin: 0;
}
.cp-profile__sub {
margin: .25rem 0 0;
font-size: .8125rem;
color: var(--cp-ink-45);
}
.cp-profile__sub a { color: var(--cp-ink-60); }
.cp-profile__sub a:hover { color: var(--cp-ink); }
.cp-profile__mailbox {
font-family: var(--cp-mono);
font-weight: 600;
color: var(--cp-ink-60);
}
.cp-profile__tags {
display: flex;
flex-wrap: wrap;
gap: .375rem;
margin: .5rem 0 0;
}
/* Facts that belong to the person rather than to any one tab. */
.cp-profile__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem 1.5rem;
margin: 1.25rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--cp-line);
}
/* ------------------------------------------------------ definition grid - */
/* Replaces the / / / the value, and the
triplets the record pages were built from:
same information, half the vertical space, and it lines up in columns. */
.cp-def {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.25rem 1.5rem;
}
/* Sized so the four mailbox/home/delivery addresses sit on one row on a
desktop and pair up on a tablet, rather than leaving one orphaned. */
.cp-def--wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cp-def__label,
.cp-fact__label {
display: block;
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .25rem;
}
.cp-def__value,
.cp-fact__value {
margin: 0;
font-size: .875rem;
font-weight: 500;
color: var(--cp-ink);
word-break: break-word;
}
.cp-def__value--muted,
.cp-fact__value--muted { color: var(--cp-ink-45); font-weight: 400; font-style: italic; }
.cp-def__value a { font-weight: 600; }
/* A postal address reads as an address, not as six differently-coloured
chips — the base template's .tag colours carried no meaning. */
.cp-addr {
margin: 0;
font-size: .875rem;
line-height: 1.65;
color: var(--cp-ink);
}
.cp-addr__name { display: block; font-weight: 600; }
.cp-addr__line { display: block; color: var(--cp-ink-60); }
/* ----------------------------------------------------------- action bar - */
.cp-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-left: auto;
}
@media (max-width: 767px) {
.cp-actions { margin-left: 0; width: 100%; }
.cp-actions .btn { flex: 1 1 auto; }
}
/* An outstanding balance is the one figure on these pages that wants to be
read as a problem, so it carries colour the other tiles don't. */
.cp-stat__value--owing { color: var(--cp-red); }
/* Inline "Adjust"-style affordance next to a fact's value. */
.cp-fact__link {
margin-left: .5rem;
font-size: .75rem;
font-weight: 700;
}
/* ================================================================ POS ==== */
/* The checkout screen: a scrollable list of chargeable line items on the
left, a summary rail that stays put on the right. Built for a counter —
large hit areas, keyboard/scanner first, money set big enough to read at
arm's length. */
.cp-pos {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 1199px) {
.cp-pos { grid-template-columns: minmax(0, 1fr); }
}
/* Summary rail. Sticks below the 60px top bar so the total and the charge
button stay reachable however long the package list runs. */
.cp-pos__rail { position: sticky; top: 76px; }
@media (max-width: 1199px) {
.cp-pos__rail { position: static; }
}
/* ------------------------------------------------------------- scanner - */
.cp-scan {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
background: var(--cp-rail);
margin-bottom: 1rem;
}
.cp-scan__icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--cp-ink);
color: var(--cp-yellow);
font-size: 1rem;
}
.cp-scan input.form-control {
border: 0;
background: transparent;
font-family: var(--cp-mono);
font-size: 1rem;
font-weight: 600;
letter-spacing: .02em;
padding: 0;
box-shadow: none;
}
.cp-scan input.form-control:focus { box-shadow: none; }
/* The field's value is monospace so scanned codes line up; the prompt is not
a code, so it reads in the body face. */
.cp-scan input.form-control::placeholder {
font-family: var(--cp-body);
font-size: .875rem;
font-weight: 400;
letter-spacing: 0;
}
/* ----------------------------------------------------------- line items - */
.cp-lines { display: flex; flex-direction: column; gap: .5rem; }
/* Each package is a big click target: the whole row toggles selection, so a
clerk never has to hit a 13px checkbox. */
.cp-line {
display: flex;
align-items: center;
gap: .875rem;
padding: .875rem 1rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
background: var(--cp-paper);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cp-line:hover { border-color: var(--cp-line-strong); background: var(--cp-rail); }
.cp-line.is-selected {
border-color: var(--cp-ink);
background: var(--cp-paper);
box-shadow: inset 3px 0 0 var(--cp-yellow), var(--cp-shadow-sm);
}
/* A scan lands on a row that may be off-screen; it flashes so the clerk can
see what the scanner just did. */
.cp-line.is-flash { animation: cp-flash .9s ease; }
@keyframes cp-flash {
0%, 100% { background: var(--cp-paper); }
25% { background: var(--cp-yellow-soft); }
}
@media (prefers-reduced-motion: reduce) {
.cp-line.is-flash { animation: none; }
}
.cp-line__check {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid var(--cp-line-strong);
display: flex;
align-items: center;
justify-content: center;
color: transparent;
font-size: .75rem;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cp-line.is-selected .cp-line__check {
background: var(--cp-ink);
border-color: var(--cp-ink);
color: var(--cp-yellow);
}
.cp-line__body { flex: 1 1 auto; min-width: 0; }
.cp-line__tracking {
font-family: var(--cp-mono);
font-size: .875rem;
font-weight: 700;
color: var(--cp-ink);
display: block;
}
.cp-line__meta {
font-size: .75rem;
color: var(--cp-ink-45);
margin: .125rem 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp-line__amount {
flex: 0 0 auto;
text-align: right;
font-family: var(--cp-display);
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--cp-ink);
}
.cp-line__amount small {
display: block;
font-family: var(--cp-body);
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-green);
}
/* Already-invoiced packages are collected, not charged for again. */
.cp-line--paid .cp-line__amount { color: var(--cp-ink-45); }
.cp-lines__empty {
padding: 3rem 1rem;
text-align: center;
color: var(--cp-ink-45);
font-size: .875rem;
border: 1px dashed var(--cp-line-strong);
border-radius: var(--cp-r-card);
}
/* -------------------------------------------------------------- summary - */
.cp-sum__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: .5rem 0;
font-size: .875rem;
color: var(--cp-ink-60);
}
.cp-sum__row--total {
border-top: 1px solid var(--cp-line);
margin-top: .5rem;
padding-top: 1rem;
}
.cp-sum__row--total dt {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0;
}
.cp-sum__total {
font-family: var(--cp-display);
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1;
color: var(--cp-ink);
max-width: 100%;
overflow-wrap: break-word;
}
.cp-sum__change { font-weight: 800; color: var(--cp-green); }
.cp-sum__change--short { color: var(--cp-red); }
/* Cash shortcuts — the denominations a counter actually takes. */
.cp-cash {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .375rem;
margin-top: .5rem;
}
.cp-cash button {
padding: .5rem .25rem;
border: 1px solid var(--cp-line-strong);
border-radius: var(--cp-r-field);
background: var(--cp-paper);
font-family: var(--cp-display);
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink-60);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cp-cash button:hover { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }
.cp-pos__charge {
width: 100%;
padding: .875rem 1rem;
font-size: 1rem;
margin-top: 1rem;
}
.cp-pos__charge:disabled { opacity: .45; }
/* Tender field: the one number the clerk types, so it is the biggest input
on the page. */
.cp-tender.form-control {
font-family: var(--cp-display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
padding: .625rem .875rem;
text-align: right;
}
/* Advanced/reference fields stay folded away; a counter sale rarely needs
them and they crowded the old screen. */
.cp-pos__more summary {
cursor: pointer;
font-size: .75rem;
font-weight: 700;
color: var(--cp-ink-45);
padding: .5rem 0;
list-style: none;
}
.cp-pos__more summary::-webkit-details-marker { display: none; }
.cp-pos__more summary::before { content: "+ "; }
.cp-pos__more[open] summary::before { content: "– "; }
.cp-pos__more summary:hover { color: var(--cp-ink); }
/* --------------------------------------------------------- customer bar - */
.cp-pos__customer {
display: flex;
align-items: center;
gap: .875rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
background: var(--cp-paper);
box-shadow: var(--cp-shadow-sm);
margin-bottom: 1.5rem;
}
.cp-pos__customer .cp-avatar { width: 42px; height: 42px; font-size: .9375rem; }
/* ====================================================== manifest upload === */
/* Format picker: each option carries its own sample download, so the two
decisions that used to be separated (which format, which sample) sit
together. */
.cp-formats { display: grid; gap: .5rem; }
.cp-format {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .875rem 1rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
cursor: pointer;
margin: 0;
transition: border-color .15s ease, background .15s ease;
}
.cp-format:hover { border-color: var(--cp-line-strong); background: var(--cp-rail); }
.cp-format.is-active { border-color: var(--cp-ink); box-shadow: inset 3px 0 0 var(--cp-yellow); }
.cp-format input { margin: .1875rem 0 0; accent-color: var(--cp-brand); }
/* These sit inside a .form-group, whose label rule uppercases and letterspaces
everything; that treatment is for field labels, not for sentences. */
.form-group label.cp-format,
.form-group .cp-format__name,
.form-group .cp-format__hint {
text-transform: none;
letter-spacing: 0;
margin-bottom: 0;
}
.cp-format__name { display: block; font-size: .875rem; font-weight: 700; color: var(--cp-ink); }
.cp-format__hint { display: block; font-size: .75rem; font-weight: 400; color: var(--cp-ink-45); margin-top: .125rem; line-height: 1.5; }
.cp-format__hint a { font-weight: 600; }
/* Same reason: the drop zone is a label too. */
.form-group label.cp-drop,
.form-group .cp-drop__title,
.form-group .cp-drop__hint {
text-transform: none;
letter-spacing: 0;
}
.cp-drop__title, .cp-drop__hint { display: block; }
.cp-drop__hint { font-weight: 400; }
/* Column mapping: one row per package field, naming what the spreadsheet
calls it. A datalist so the common spellings are one click away but any
heading can still be typed. */
.cp-colmap { display: grid; gap: .4375rem; }
.cp-colmap__row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr);
align-items: center;
gap: .75rem;
}
.cp-colmap__field { font-size: .8125rem; font-weight: 600; color: var(--cp-ink-60); }
.cp-colmap__req {
font-size: .5625rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cp-red);
margin-left: .25rem;
}
.form-group .cp-field__note {
font-size: .75rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--cp-ink-45);
margin: 0 0 .75rem;
line-height: 1.5;
}
@media (max-width: 575.98px) {
.cp-colmap__row { grid-template-columns: 1fr; gap: .25rem; }
}
/* Drop zone. */
.cp-drop {
display: block;
padding: 2rem 1.25rem;
border: 2px dashed var(--cp-line-strong);
border-radius: var(--cp-r-card);
background: var(--cp-rail);
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.cp-drop:hover, .cp-drop.is-over { border-color: var(--cp-ink); background: var(--cp-sky); }
.cp-drop input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; }
.cp-drop__icon { font-size: 1.5rem; color: var(--cp-ink-45); }
.cp-drop__title { font-family: var(--cp-display); font-weight: 700; font-size: .9375rem; margin: .5rem 0 .1875rem; }
.cp-drop__hint { font-size: .75rem; color: var(--cp-ink-45); margin: 0; }
.cp-drop.has-file { border-style: solid; border-color: var(--cp-green); background: var(--cp-green-soft); }
.cp-drop.has-file .cp-drop__title { color: var(--cp-green); }
/* ------------------------------------------------------- upload report - */
.cp-report { border-radius: var(--cp-r-card); border: 1px solid var(--cp-line); overflow: hidden; }
.cp-report__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; }
.cp-report--ok .cp-report__head { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-report--bad .cp-report__head { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-report--warn .cp-report__head { background: var(--cp-yellow-soft); color: var(--cp-yellow-ink); }
.cp-report__title { font-family: var(--cp-display); font-weight: 800; font-size: .9375rem; margin: 0; }
.cp-report__body { padding: 1.25rem; background: var(--cp-paper); }
.cp-report__section + .cp-report__section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--cp-line); }
.cp-report__label {
font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--cp-ink-45); margin: 0 0 .5rem;
}
/* Column mapping: what the file called it, what it was read as, how sure. */
.cp-map { width: 100%; font-size: .8125rem; }
.cp-map th {
font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--cp-ink-45); padding: 0 .5rem .375rem 0; text-align: left;
}
.cp-map td { padding: .3125rem .5rem .3125rem 0; border-top: 1px solid var(--cp-line); vertical-align: middle; }
.cp-map__from { font-family: var(--cp-mono); font-weight: 600; }
.cp-map__arrow { color: var(--cp-ink-45); }
.cp-chip {
display: inline-block; padding: .0625rem .4375rem; border-radius: var(--cp-r-pill);
font-size: .625rem; font-weight: 700; white-space: nowrap;
}
.cp-chip--exact { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-chip--normalised { background: var(--cp-sky); color: var(--cp-blue); }
.cp-chip--fuzzy { background: var(--cp-yellow-soft); color: var(--cp-yellow-ink); }
.cp-chip--missing { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-chip--ignored { background: var(--cp-mist); color: var(--cp-ink-45); }
.cp-report__issues { max-height: 260px; overflow-y: auto; }
.cp-issue { display: flex; gap: .625rem; padding: .375rem 0; border-top: 1px solid var(--cp-line); font-size: .8125rem; }
.cp-issue:first-child { border-top: 0; }
.cp-issue__row { flex: 0 0 auto; font-family: var(--cp-mono); font-weight: 700; color: var(--cp-ink-45); min-width: 62px; }
/* ====================================================== package fields === */
/* The package detail grid is ~19 /
triplets carrying their own
conditionals, so rather than rewrite each one they are restyled in place:
the becomes the eyebrow label, the
separators are replaced by a single hairline per cell. */
.cp-pkgfields strong {
display: block;
font-family: var(--cp-body);
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .25rem;
}
/* Spacing only — no rule. The dividers were removed because, sitting inside a
column, they drew part-width lines that stopped at each column edge and
didn't align across the grid. The breathing room they provided still
matters, so the padding stays. */
.cp-pkgfields > .row > [class*="col-"] {
padding-top: .875rem;
padding-bottom: .875rem;
}
.cp-pkgfields p {
margin: 0;
font-size: .875rem;
font-weight: 500;
color: var(--cp-ink);
word-break: break-word;
}
.cp-pkgfields p.text-muted { color: var(--cp-ink) !important; }
/* The template wraps most values in .tag chips that were all painted the same
red regardless of meaning; they read as plain values here. */
.cp-pkgfields .tag {
display: inline;
padding: 0;
background: none !important;
color: inherit !important;
font-size: inherit;
font-weight: inherit;
}
/* Several columns stack two fields with an
between them. Drawing those
rules gave ragged part-width lines that stopped at each column edge and
didn't line up across the grid, so the separation is space instead: the
rule is hidden and the label after it carries the gap. The cell's own
bottom border still provides the horizontal rhythm, and that one does span
the full row. */
.cp-pkgfields hr { display: none; }
.cp-pkgfields hr + strong { margin-top: 1.125rem; }
.cp-pkgfields p:empty::after,
.cp-pkgfields .tag:empty::after {
content: "Not specified";
color: var(--cp-ink-45);
font-style: italic;
font-weight: 400;
}
/* ================================================================= help === */
/* Staff guides. Built to be skimmed while someone is waiting at the counter:
search first, one guide open at a time, screenshots of the real screens. */
.cp-help__search {
position: relative;
max-width: 640px;
margin: 0 auto 1.5rem;
}
.cp-help__search input.form-control {
padding: .875rem 1rem .875rem 2.75rem;
font-size: 1rem;
border-radius: var(--cp-r-pill);
box-shadow: var(--cp-shadow-sm);
}
.cp-help__search .cp-help__icon {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: var(--cp-ink-45);
pointer-events: none;
}
.cp-help__count { text-align: center; font-size: .8125rem; color: var(--cp-ink-45); margin: -.75rem 0 1.25rem; }
/* One guide. Collapsed to its title until opened. */
.cp-guide {
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
background: var(--cp-paper);
box-shadow: var(--cp-shadow-sm);
margin-bottom: .75rem;
overflow: hidden;
}
.cp-guide[hidden] { display: none; }
.cp-guide__head {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.125rem 1.375rem;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
transition: background .14s ease;
}
.cp-guide__head:hover { background: var(--cp-mist); }
.cp-guide__num {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cp-sky);
color: var(--cp-blue);
font-family: var(--cp-display);
font-weight: 800;
font-size: .875rem;
}
.cp-guide.is-open .cp-guide__num { background: var(--cp-ink); color: var(--cp-yellow); }
.cp-guide__titles { flex: 1 1 auto; min-width: 0; }
.cp-guide__title {
margin: 0;
font-family: var(--cp-display);
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--cp-ink);
}
.cp-guide__sub { margin: .125rem 0 0; font-size: .8125rem; color: var(--cp-ink-45); }
.cp-guide__caret {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--cp-ink-45);
border-bottom: 2px solid var(--cp-ink-45);
transform: rotate(45deg);
transition: transform .18s ease;
}
.cp-guide.is-open .cp-guide__caret { transform: rotate(-135deg); }
.cp-guide__body { display: none; padding: 0 1.375rem 1.5rem; }
.cp-guide.is-open .cp-guide__body { display: block; }
/* Numbered steps down the left, with a connecting rule. */
.cp-steps { list-style: none; margin: 0; padding: 0; counter-reset: cpstep; }
.cp-step {
position: relative;
counter-increment: cpstep;
padding: 0 0 1.5rem 2.5rem;
border-left: 2px solid var(--cp-line);
margin-left: .875rem;
}
.cp-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.cp-step::before {
content: counter(cpstep);
position: absolute;
left: -0.9375rem;
top: -0.125rem;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cp-ink);
color: #fff;
font-family: var(--cp-display);
font-size: .75rem;
font-weight: 800;
}
.cp-step__text { margin: .25rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--cp-ink-60); }
.cp-step__text strong { color: var(--cp-ink); }
.cp-step__note {
margin: .625rem 0 0;
padding: .625rem .875rem;
border-radius: var(--cp-r-field);
background: var(--cp-yellow-soft);
color: var(--cp-yellow-ink);
font-size: .8125rem;
line-height: 1.55;
}
/* Screenshots of the real screens. */
.cp-shot {
display: block;
margin: .875rem 0 0;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
max-width: 100%;
height: auto;
box-shadow: var(--cp-shadow-sm);
}
.cp-shot--narrow { max-width: 340px; }
.cp-help__empty {
padding: 3rem 1rem;
text-align: center;
color: var(--cp-ink-45);
border: 1px dashed var(--cp-line-strong);
border-radius: var(--cp-r-card);
}
.cp-help__go {
display: inline-block;
margin-top: 1rem;
font-size: .8125rem;
font-weight: 700;
}
/* Matches on a search term, so the eye lands on why a guide was returned. */
.cp-help mark { background: var(--cp-yellow); color: var(--cp-ink); padding: 0 .125rem; border-radius: 3px; }
/* =============================================================== admins === */
/* One row per admin user. Replaces a run of tag-coloured chips — green email,
blue contact, orange roles, purple TRN — where the colour carried no
meaning and the five actions were five identical outline buttons. */
.cp-admin {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
background: var(--cp-paper);
margin-bottom: .625rem;
transition: border-color .15s ease;
}
.cp-admin:hover { border-color: var(--cp-line-strong); }
/* Deactivated users stay legible but visibly stand down from the active ones. */
.cp-admin.is-inactive { background: var(--cp-rail); }
.cp-admin.is-inactive .cp-admin__avatar { background: var(--cp-mist); color: var(--cp-ink-45); }
.cp-admin.is-inactive .cp-admin__name { color: var(--cp-ink-60); }
.cp-admin__avatar { flex: 0 0 auto; width: 42px; height: 42px; font-size: .9375rem; }
.cp-admin__body { flex: 1 1 auto; min-width: 0; }
.cp-admin__name {
margin: 0;
font-family: var(--cp-display);
font-size: .9375rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--cp-ink);
}
.cp-admin__contact {
margin: .125rem 0 0;
font-size: .8125rem;
color: var(--cp-ink-45);
word-break: break-word;
}
.cp-admin__contact a { color: var(--cp-ink-60); }
.cp-admin__contact a:hover { color: var(--cp-ink); }
.cp-admin__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.cp-admin__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .5rem;
}
@media (max-width: 767px) {
.cp-admin { flex-wrap: wrap; }
.cp-admin__actions { width: 100%; }
.cp-admin__actions .btn { flex: 1 1 auto; }
}
/* ========================================================== collapsible === */
/* A card section that can be folded away. The caret is the affordance; the
section's own header stays visible so it is obvious what has been hidden. */
.cp-collapse { display: none; }
.cp-collapse.is-open { display: block; }
.cp-collapse__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--cp-line-strong);
border-radius: 50%;
background: var(--cp-paper);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.cp-collapse__toggle:hover { background: var(--cp-mist); border-color: var(--cp-ink-45); }
.cp-collapse__caret {
width: 7px;
height: 7px;
border-right: 1.5px solid var(--cp-ink-45);
border-bottom: 1.5px solid var(--cp-ink-45);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .18s ease;
}
/* Points up when the section is open, down when it is folded. */
.cp-collapse__toggle[aria-expanded="true"] .cp-collapse__caret {
transform: rotate(-135deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
.cp-collapse__caret { transition: none; }
}
/* ========================================================= attachments === */
.cp-attach {
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem .75rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
background: var(--cp-paper);
margin-bottom: .5rem;
}
.cp-attach__icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--cp-mist);
color: var(--cp-ink-45);
}
.cp-attach__body { flex: 1 1 auto; min-width: 0; }
.cp-attach__name { display: block; font-size: .8125rem; font-weight: 600; color: var(--cp-ink); word-break: break-word; }
.cp-attach__meta { margin: 0; font-size: .6875rem; color: var(--cp-ink-45); }
/* Shown in place of an absent section: "nothing attached" is information,
hiding the section entirely is not. */
.cp-attach__empty {
padding: 1rem;
margin-bottom: .75rem;
border: 1px dashed var(--cp-line-strong);
border-radius: var(--cp-r-field);
text-align: center;
font-size: .8125rem;
color: var(--cp-ink-45);
}
/* ============================================================= charges === */
/* The invoice breakdown on a package. Selection lives on the rows so several
charges can be cleared at once; the totals rows are excluded from it. */
.cp-charges__bar {
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem .875rem;
margin-bottom: .5rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
background: var(--cp-rail);
}
.cp-charges td { vertical-align: middle; }
.cp-charges input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--cp-brand); cursor: pointer; }
.cp-charge.is-selected { background: var(--cp-sky); }
.cp-charge__title { font-weight: 600; color: var(--cp-ink); }
.cp-charge__id { font-family: var(--cp-mono); font-size: .6875rem; color: var(--cp-ink-45); margin-left: .375rem; }
.cp-charge__amount { font-family: var(--cp-display); font-weight: 700; white-space: nowrap; }
.cp-charge__amount.is-discount { color: var(--cp-green); }
.cp-charges__subtotal td,
.cp-charges__total td {
border-top: 1px solid var(--cp-line-strong);
font-weight: 700;
color: var(--cp-ink);
}
.cp-charges__total td {
border-top: 2px solid var(--cp-ink);
font-family: var(--cp-display);
font-size: .9375rem;
font-weight: 800;
}
/* ============================================================ checkoff === */
/* Manifest check-off. Two panels of work — still to check, already checked —
each grouped into collapsible customers so a manifest of hundreds reads as
a short list of people rather than one long run of tracking numbers. */
.cp-checkoff {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 991px) {
.cp-checkoff { grid-template-columns: 1fr; }
}
.cp-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .75rem 1rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card) var(--cp-r-card) 0 0;
background: var(--cp-rail);
}
.cp-panel__title {
margin: 0;
font-family: var(--cp-display);
font-size: .875rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.cp-panel__body {
border: 1px solid var(--cp-line);
border-top: 0;
border-radius: 0 0 var(--cp-r-card) var(--cp-r-card);
background: var(--cp-paper);
max-height: 62vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cp-panel__empty { padding: 2.5rem 1rem; text-align: center; color: var(--cp-ink-45); font-size: .8125rem; }
/* ------------------------------------------------------ customer group - */
.cp-group { border-bottom: 1px solid var(--cp-line); }
.cp-group:last-child { border-bottom: 0; }
.cp-group__head {
display: flex;
align-items: center;
gap: .625rem;
width: 100%;
padding: .75rem 1rem;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
transition: background .14s ease;
}
.cp-group__head:hover { background: var(--cp-mist); }
/* The disclosure arrow turns when the group is open. */
.cp-group__caret {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--cp-ink-45);
border-bottom: 1.5px solid var(--cp-ink-45);
transform: rotate(-45deg);
transition: transform .18s ease;
}
.cp-group.is-open .cp-group__caret { transform: rotate(45deg); }
.cp-group__name {
flex: 1 1 auto;
min-width: 0;
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp-group__mailbox { font-family: var(--cp-mono); font-weight: 600; color: var(--cp-ink-45); }
.cp-group__body { display: none; padding: 0 1rem .625rem 2.25rem; }
.cp-group.is-open .cp-group__body { display: block; }
/* --------------------------------------------------------- package row - */
.cp-pkg {
display: flex;
align-items: center;
gap: .625rem;
padding: .4375rem .5rem;
border-radius: var(--cp-r-field);
cursor: pointer;
transition: background .14s ease;
}
.cp-pkg:hover { background: var(--cp-mist); }
.cp-pkg.is-selected { background: var(--cp-sky); }
.cp-pkg input[type="checkbox"] {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--cp-brand);
cursor: pointer;
}
.cp-pkg__tracking {
font-family: var(--cp-mono);
font-size: .8125rem;
font-weight: 600;
color: var(--cp-ink);
}
a.cp-pkg__tracking:hover { color: var(--cp-brand); text-decoration: underline; }
.cp-pkg__meta { font-size: .75rem; color: var(--cp-ink-45); margin-left: auto; white-space: nowrap; }
.cp-pkg.is-flash { animation: cp-flash .9s ease; }
/* --------------------------------------------------------- select bar - */
/* Appears only when something is selected, so it never takes space it has
not earned. */
/* Fixed to the viewport, not sticky at the end of the content — the panels
above it are tall, so a sticky bar sat below the fold and the actions were
effectively invisible. */
.cp-selbar {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 1030;
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
max-width: calc(100vw - 2rem);
padding: .75rem .875rem .75rem 1.25rem;
border-radius: var(--cp-r-pill);
background: var(--cp-ink);
color: #fff;
box-shadow: var(--cp-shadow-lg);
animation: cp-selbar-in .18s ease;
}
@keyframes cp-selbar-in {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cp-selbar { animation: none; }
}
.cp-selbar[hidden] { display: none; }
.cp-selbar__count { font-family: var(--cp-display); font-weight: 800; font-size: .9375rem; }
.cp-selbar__spacer { margin-left: auto; }
.cp-selbar .btn-link { color: rgba(255, 255, 255, .7); }
.cp-selbar .btn-link:hover { color: #fff; }
/* --------------------------------------------------------- progress -- */
.cp-progress {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.cp-progress__bar {
flex: 1 1 220px;
height: 8px;
border-radius: var(--cp-r-pill);
background: var(--cp-line);
overflow: hidden;
min-width: 160px;
}
.cp-progress__fill {
height: 100%;
border-radius: var(--cp-r-pill);
background: var(--cp-green);
transition: width .3s ease;
}
.cp-progress__label { font-size: .8125rem; font-weight: 700; color: var(--cp-ink-60); white-space: nowrap; }
/* ------------------------------------------------------- sale complete - */
/* Replaces the redirect that used to follow a payment. The change due is the
biggest thing on it, because that is the number the clerk acts on next. */
.cp-done { padding: 2.25rem 2rem 1.75rem; }
.cp-done__tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--cp-green-soft);
color: var(--cp-green);
font-size: 1.625rem;
margin-bottom: 1rem;
}
.cp-done__title {
font-family: var(--cp-display);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.03em;
margin: 0;
}
.cp-done__sub {
font-family: var(--cp-mono);
font-size: .75rem;
color: var(--cp-ink-45);
margin: .375rem 0 0;
word-break: break-all;
}
.cp-done__figures {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin: 1.5rem 0;
padding: 1rem 0;
border-top: 1px solid var(--cp-line);
border-bottom: 1px solid var(--cp-line);
}
.cp-done__figures dt {
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin: 0 0 .25rem;
}
.cp-done__figures dd {
font-family: var(--cp-display);
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--cp-ink);
margin: 0;
}
.cp-done__change dd { color: var(--cp-green); font-size: 1.375rem; }
.cp-done__actions {
display: grid;
gap: .5rem;
}
.cp-done__actions .btn { width: 100%; }
.cp-done__foot { margin: 1rem 0 0; font-size: .8125rem; }
.cp-done__foot a { color: var(--cp-ink-45); font-weight: 600; }
.cp-done__foot a:hover { color: var(--cp-ink); }
@media (min-width: 576px) {
.cp-done__actions { grid-template-columns: 1fr 1fr; }
.cp-done__actions .btn:first-child { grid-column: 1 / -1; }
}
/* ---------------------------------------------------------------- points - */
.cp-points {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem .875rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
background: var(--cp-yellow-soft);
margin-bottom: 1rem;
}
.cp-points__balance { flex: 1 1 auto; min-width: 0; }
.cp-points__label {
display: block;
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-yellow-ink);
margin: 0;
}
.cp-points__value {
font-family: var(--cp-display);
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--cp-ink);
margin: 0;
}
/* Per-line points chip: the original price struck through, the discount, and
what the line now costs. */
.cp-line__amount del {
display: block;
font-family: var(--cp-body);
font-size: .6875rem;
font-weight: 500;
color: var(--cp-ink-45);
text-decoration: line-through;
}
.cp-line__pts {
display: inline-block;
margin-top: .1875rem;
padding: .0625rem .375rem;
border-radius: var(--cp-r-pill);
background: var(--cp-yellow-soft);
color: var(--cp-yellow-ink);
font-family: var(--cp-body);
font-size: .625rem;
font-weight: 700;
white-space: nowrap;
}
.cp-sum__row--points dd { color: var(--cp-yellow-ink); font-weight: 700; }
/* Allocation table inside the points modal. */
.cp-alloc { width: 100%; font-size: .8125rem; }
.cp-alloc th {
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
padding: .5rem .5rem .5rem 0;
border-bottom: 1px solid var(--cp-line);
}
.cp-alloc td { padding: .625rem .5rem .625rem 0; border-bottom: 1px solid var(--cp-line); vertical-align: middle; }
.cp-alloc td:last-child, .cp-alloc th:last-child { text-align: right; padding-right: 0; }
.cp-alloc input[type="number"] { max-width: 110px; text-align: right; }
.cp-alloc__tracking { font-family: var(--cp-mono); font-weight: 700; }
.cp-alloc__after { font-family: var(--cp-display); font-weight: 800; }
.cp-alloc__foot {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-top: .875rem;
font-size: .8125rem;
font-weight: 700;
}
.cp-alloc__foot .is-over { color: var(--cp-red); }
/* Mode switch between whole-sale and per-package entry. */
.cp-segment {
display: inline-flex;
padding: 3px;
border-radius: var(--cp-r-pill);
background: var(--cp-mist);
margin-bottom: 1rem;
}
.cp-segment button {
border: 0;
background: transparent;
border-radius: var(--cp-r-pill);
padding: .375rem 1rem;
font-family: var(--cp-display);
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink-45);
}
.cp-segment button.is-active { background: var(--cp-paper); color: var(--cp-ink); box-shadow: var(--cp-shadow-sm); }
/* The empty state: nothing to check out until someone is chosen, so the
picker is the whole page rather than a field tucked in a corner. */
.cp-pos__pick {
max-width: 520px;
margin: 2rem auto;
text-align: center;
}
.cp-pos__pick .selectize-input { text-align: left; }
/* --------------------------------------------------------------- buttons - */
.btn {
font-family: var(--cp-display);
font-weight: 700;
font-size: .8125rem;
letter-spacing: -0.005em;
border-radius: var(--cp-r-pill);
padding: .5625rem 1.25rem;
border-width: 1px;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm, .btn-group-sm > .btn {
padding: .375rem .875rem;
font-size: .75rem;
}
.btn-lg, .btn-group-lg > .btn {
padding: .75rem 1.75rem;
font-size: .9375rem;
}
.btn-primary,
.wizard > .actions a {
background-color: var(--cp-brand) !important;
border-color: var(--cp-brand) !important;
color: var(--cp-brand-ink) !important;
box-shadow: var(--cp-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.wizard > .actions a:hover {
background-color: var(--cp-brand) !important;
border-color: var(--cp-brand) !important;
color: var(--cp-brand-ink) !important;
filter: brightness(1.12);
box-shadow: var(--cp-shadow-md);
}
.btn-outline-primary {
background-color: transparent !important;
color: var(--cp-brand) !important;
border-color: var(--cp-line-strong) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
background-color: var(--cp-brand) !important;
border-color: var(--cp-brand) !important;
color: var(--cp-brand-ink) !important;
}
/* The marketing CTA: yellow on navy ink. */
.btn-accent {
background-color: var(--cp-yellow);
border-color: var(--cp-yellow);
color: var(--cp-ink);
}
.btn-accent:hover,
.btn-accent:focus {
background-color: var(--cp-yellow-deep);
border-color: var(--cp-yellow-deep);
color: var(--cp-ink);
box-shadow: var(--cp-shadow-md);
}
/* Neutral secondary: a quiet outlined chip rather than a grey slab. */
.btn-secondary,
.btn-light,
.btn-default {
background-color: var(--cp-paper);
border-color: var(--cp-line-strong);
color: var(--cp-ink-60);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
background-color: var(--cp-mist);
border-color: var(--cp-line-strong);
color: var(--cp-ink);
}
.btn-success { background-color: var(--cp-green); border-color: var(--cp-green); }
.btn-success:hover { background-color: #0e6b4d; border-color: #0e6b4d; }
.btn-info { background-color: var(--cp-blue); border-color: var(--cp-blue); }
.btn-info:hover { background-color: #3143b8; border-color: #3143b8; }
.btn-danger { background-color: var(--cp-red); border-color: var(--cp-red); }
.btn-danger:hover { background-color: #a52f23; border-color: #a52f23; }
.btn-warning { background-color: var(--cp-yellow); border-color: var(--cp-yellow); color: var(--cp-ink); }
.btn-warning:hover { background-color: var(--cp-yellow-deep); border-color: var(--cp-yellow-deep); color: var(--cp-ink); }
.btn-dark { background-color: var(--cp-ink); border-color: var(--cp-ink); }
.btn-dark:hover { background-color: var(--cp-ink-90); border-color: var(--cp-ink-90); }
.btn-link { color: var(--cp-brand); font-weight: 600; }
/* ----------------------------------------------------------------- forms - */
.form-group > label,
.form-group label,
label.col-form-label {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
color: var(--cp-ink-45);
margin-bottom: .4375rem;
}
.form-control,
.custom-select,
.selectize-input,
select.form-control {
border: 1px solid var(--cp-line-strong);
border-radius: var(--cp-r-field);
background: var(--cp-paper);
color: var(--cp-ink);
font-family: var(--cp-body);
font-size: .875rem;
padding: .5625rem .875rem;
height: auto;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus,
.custom-select:focus,
.selectize-input.focus,
select.form-control:focus {
border-color: var(--cp-ink);
box-shadow: 0 0 0 3px rgba(18, 25, 58, .1);
background: var(--cp-paper);
color: var(--cp-ink);
}
.form-control::placeholder { color: var(--cp-ink-45); opacity: 1; }
.form-control:disabled,
.form-control[readonly] { background: var(--cp-mist); color: var(--cp-ink-45); }
textarea.form-control { min-height: 96px; }
.form-control-sm { padding: .375rem .625rem; font-size: .8125rem; }
.input-group-text {
background: var(--cp-mist);
border: 1px solid var(--cp-line-strong);
color: var(--cp-ink-45);
border-radius: var(--cp-r-field);
font-size: .8125rem;
}
.input-group > .input-group-prepend > .input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .input-group-text {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.custom-file-label {
border-radius: var(--cp-r-field);
border-color: var(--cp-line-strong);
font-size: .875rem;
padding: .5625rem .875rem;
height: auto;
color: var(--cp-ink-45);
}
.custom-file-label::after {
background: var(--cp-mist);
color: var(--cp-ink);
border-left: 1px solid var(--cp-line-strong);
height: auto;
padding: .5625rem .875rem;
border-radius: 0 var(--cp-r-field) var(--cp-r-field) 0;
}
.form-check-label, .form-check { color: var(--cp-ink-60); font-size: .875rem; }
/* The base theme hides the real checkbox (opacity: 0) and paints a fake one
through an `` that template.js appends at runtime —
but no page except company/createcompany loads template.js, so every other
.form-check in the app rendered as an invisible control. The native input
comes back here and is styled directly; any .input-helper that does get
appended is suppressed so both cases look the same. */
.form-check .form-check-label input[type="checkbox"],
.form-check .form-check-label input[type="radio"],
.form-check .form-check-input[type="checkbox"],
.form-check .form-check-input[type="radio"] {
position: static;
opacity: 1;
filter: none;
width: 16px;
height: 16px;
margin: 0 .5rem 0 0;
vertical-align: -2px;
accent-color: var(--cp-brand);
cursor: pointer;
}
.form-check .form-check-label .input-helper { display: none; }
/* Bootstrap indents .form-check by 1.25rem to clear the absolutely
positioned input; the input is in flow now, so that gap is dead space. */
.form-check { padding-left: 0; }
.form-check .form-check-label { padding-left: 0; margin-bottom: 0; }
.form-text, small.text-muted { font-size: .75rem; color: var(--cp-ink-45); }
/* Selectize, used for the searchable pickers. */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
box-shadow: none;
background-image: none;
}
.selectize-dropdown {
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
box-shadow: var(--cp-shadow-md);
font-size: .875rem;
}
.selectize-dropdown .active { background: var(--cp-sky); color: var(--cp-blue); }
/* ---------------------------------------------------------------- tables - */
.table {
color: var(--cp-ink-90);
font-size: .8125rem;
}
.table thead th,
.table th {
font-family: var(--cp-body);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
color: var(--cp-ink-45);
border-top: 0;
border-bottom: 1px solid var(--cp-line);
padding: .875rem 1rem;
white-space: nowrap;
vertical-align: middle;
}
.table td {
border-top: 1px solid var(--cp-line);
padding: .875rem 1rem;
vertical-align: middle;
}
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: var(--cp-mist); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-striped tbody tr:nth-of-type(odd):hover { background: var(--cp-mist); }
.table-borderless td, .table-borderless th { border: 0; }
.table-hover tbody tr:hover { background: var(--cp-mist); color: var(--cp-ink); }
/* Several pages set `table-layout: fixed` with wrapping cells, which on a
phone collapses columns until text breaks one character per line. Inside a
.table-responsive the table keeps a workable width and scrolls sideways
instead. */
.table-responsive {
-webkit-overflow-scrolling: touch;
}
@media (max-width: 991px) {
.table-responsive > .table {
table-layout: auto !important;
min-width: 720px;
}
.table-responsive > .table td,
.table-responsive > .table th {
white-space: nowrap !important;
word-wrap: normal !important;
}
}
/* DataTables chrome. The search now owns the full width of the row the length
menu used to share, so it reads as the table's own search bar. Selectors
carry the integration's `div.dataTables_wrapper div.x` weight to win. */
div.dataTables_wrapper div.dataTables_filter {
width: 100%;
text-align: left;
margin-bottom: 1rem;
}
div.dataTables_wrapper div.dataTables_filter label {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
margin: 0;
font-size: .8125rem;
color: var(--cp-ink-45);
}
div.dataTables_wrapper div.dataTables_filter input {
display: block;
flex: 1 1 auto;
width: 100%;
min-width: 0;
margin-left: 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--cp-line-strong);
border-radius: var(--cp-r-field);
padding: .5rem .875rem;
font-size: .8125rem;
background: var(--cp-paper);
color: var(--cp-ink);
}
.dataTables_wrapper .dataTables_filter input::placeholder {
color: var(--cp-ink-45);
opacity: 1;
}
/* Sort indicators. Three stylesheets each draw their own and all three load:
the CDN build paints a background sprite on the th, the Bootstrap 4
integration adds "↑"/"↓" pseudo-elements, and the base theme overlays
themify glyphs pinned to the cell's top and bottom edges. Stacked, they
rendered as clipped brackets beside every header. All three are silenced
and replaced with one drawn chevron.
The base theme's selectors carry three classes, so these have to match that
weight — hence the .dataTables_wrapper prefix rather than a bare
table.dataTable. */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-image: none !important;
}
.dataTables_wrapper table.dataTable thead .sorting:before,
.dataTables_wrapper table.dataTable thead .sorting_asc:before,
.dataTables_wrapper table.dataTable thead .sorting_desc:before,
.dataTables_wrapper table.dataTable thead .sorting_asc_disabled:before,
.dataTables_wrapper table.dataTable thead .sorting_desc_disabled:before {
display: none !important;
content: none !important;
}
.dataTables_wrapper table.dataTable thead > tr > th:not(.sorting_disabled) {
padding-right: 1.75rem;
}
.dataTables_wrapper table.dataTable thead .sorting:after,
.dataTables_wrapper table.dataTable thead .sorting_asc:after,
.dataTables_wrapper table.dataTable thead .sorting_desc:after,
.dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
.dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
content: "";
position: absolute;
right: .875rem;
top: 50%;
bottom: auto;
left: auto;
width: 5px;
height: 5px;
margin-top: -5px;
padding: 0;
line-height: 0;
font-family: inherit;
border: 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: .35;
}
.dataTables_wrapper table.dataTable thead .sorting_asc:after {
margin-top: -1px;
transform: rotate(-135deg);
opacity: 1;
color: var(--cp-ink);
}
.dataTables_wrapper table.dataTable thead .sorting_desc:after {
opacity: 1;
color: var(--cp-ink);
}
.dataTables_wrapper table.dataTable thead .sorting:hover:after { opacity: .7; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
outline: 0;
border-color: var(--cp-ink);
box-shadow: 0 0 0 3px rgba(18, 25, 58, .1);
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
font-size: .8125rem;
color: var(--cp-ink-45);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 0 !important;
background: transparent !important;
border-radius: var(--cp-r-field) !important;
color: var(--cp-ink-60) !important;
font-size: .8125rem;
font-weight: 600;
padding: .375rem .75rem !important;
margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--cp-mist) !important;
color: var(--cp-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--cp-ink) !important;
color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
opacity: .4;
}
/* Bootstrap pagination. */
.pagination .page-link {
border: 0;
color: var(--cp-ink-60);
border-radius: var(--cp-r-field);
margin: 0 2px;
font-size: .8125rem;
font-weight: 600;
}
.pagination .page-link:hover { background: var(--cp-mist); color: var(--cp-ink); }
.pagination .page-item.active .page-link {
background: var(--cp-ink);
border-color: var(--cp-ink);
color: #fff;
}
/* ---------------------------------------------------------------- badges - */
.badge {
font-family: var(--cp-body);
font-size: .6875rem;
font-weight: 700;
letter-spacing: 0;
padding: .3125rem .625rem;
border-radius: var(--cp-r-pill);
line-height: 1.4;
}
.badge-pill { border-radius: var(--cp-r-pill); }
/* Solid Bootstrap badges become soft tinted pills, as in the mock's
status column — legible without shouting. */
.badge-success, .badge-primary, .badge-info, .badge-warning, .badge-danger,
.badge-secondary, .badge-dark, .badge-light {
border: 0;
}
.badge-success { background: var(--cp-green-soft) !important; color: var(--cp-green) !important; }
.badge-info, .badge-primary { background: var(--cp-sky) !important; color: var(--cp-blue) !important; }
.badge-warning { background: var(--cp-yellow-soft) !important; color: var(--cp-yellow-ink) !important; }
.badge-danger { background: var(--cp-red-soft) !important; color: var(--cp-red) !important; }
.badge-secondary, .badge-light { background: var(--cp-mist) !important; color: var(--cp-ink-60) !important; }
.badge-dark { background: var(--cp-ink) !important; color: #fff !important; }
/* ------------------------------------------------------- menus & overlays - */
.dropdown-menu {
border: 1px solid var(--cp-line);
border-radius: 14px;
box-shadow: var(--cp-shadow-md);
padding: .5rem;
font-size: .8125rem;
color: var(--cp-ink);
}
.dropdown-menu .dropdown-header {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
color: var(--cp-ink-45);
padding: .5rem .75rem;
}
.dropdown-item {
border-radius: 9px;
padding: .5rem .75rem;
color: var(--cp-ink-60);
font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--cp-mist);
color: var(--cp-ink);
}
.dropdown-item i { margin-right: .5rem; }
.dropdown-divider { border-color: var(--cp-line); }
.modal-content {
border: 0;
border-radius: 20px;
box-shadow: var(--cp-shadow-lg);
overflow: hidden;
}
.modal-header {
border-bottom: 1px solid var(--cp-line);
padding: 1.25rem 1.5rem;
}
.modal-title {
font-family: var(--cp-display);
font-weight: 800;
font-size: 1.0625rem;
letter-spacing: -0.02em;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
border-top: 1px solid var(--cp-line);
padding: 1rem 1.5rem;
}
.popover, .tooltip-inner {
border-radius: 10px;
font-family: var(--cp-body);
font-size: .75rem;
}
.tooltip-inner { background: var(--cp-ink); padding: .4rem .625rem; }
/* ----------------------------------------------------------------- misc - */
.nav-tabs {
border-bottom: 1px solid var(--cp-line);
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--cp-ink-45);
font-weight: 600;
font-size: .8125rem;
padding: .625rem 1rem;
border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--cp-ink); border-bottom-color: var(--cp-line-strong); }
.nav-tabs .nav-link.active {
color: var(--cp-ink);
background: transparent;
border-bottom-color: var(--cp-yellow);
}
.alert {
border: 1px solid transparent;
border-radius: var(--cp-r-field);
font-size: .8125rem;
padding: .875rem 1rem;
}
.alert-success { background: var(--cp-green-soft); color: var(--cp-green); }
.alert-info, .alert-primary { background: var(--cp-sky); color: var(--cp-blue); }
.alert-warning { background: var(--cp-yellow-soft); color: var(--cp-yellow-ink); }
.alert-danger { background: var(--cp-red-soft); color: var(--cp-red); }
.progress {
background: var(--cp-line);
border-radius: var(--cp-r-pill);
height: 8px;
}
.progress-bar { background: var(--cp-ink); border-radius: var(--cp-r-pill); }
.list-group-item {
border-color: var(--cp-line);
font-size: .875rem;
color: var(--cp-ink-60);
}
hr { border-color: var(--cp-line); }
/* ------------------------------------------------- page header & trail - */
/* Every inner page ships the same .content-header block: a title in one
half-width column and a right-floated breadcrumb in the other. Retuning it
here restyles all ~100 pages without editing each template. */
.content-header {
padding: 0;
}
.content-header > .container-fluid {
padding-left: 0;
padding-right: 0;
}
/* The trail rides beside the title rather than above it, so the two are
centred against each other instead of top-aligned. */
.content-header .row {
align-items: center;
margin-left: 0;
margin-right: 0;
}
.content-header .row.mb-2 { margin-bottom: 1.5rem !important; }
.content-header .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* Page titles are written as h1, h2 or h3 depending on the page; they all
read as the same rank, so they are drawn as one. */
.content-header h1,
.content-header h2,
.content-header h3 {
font-family: var(--cp-display);
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--cp-ink);
margin: 0;
}
/* A quiet trail set against the page title — small caps, so it locates the
page without competing with the heading it sits beside. */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
background: transparent;
/* The base theme boxes the trail in a 1px #CED4DA rectangle. */
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
font-size: .5625rem;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
line-height: 1.5;
}
/* Floating it right would take it out of flow and lose the vertical centring
against the title, so the row's flex box does the alignment instead. */
.content-header .breadcrumb.float-sm-right,
.breadcrumb.float-sm-right,
.breadcrumb.float-right { float: none !important; }
@media (min-width: 576px) {
.breadcrumb.float-sm-right,
.breadcrumb.float-right { justify-content: flex-end; }
}
/* Each crumb is its own flex row so the drawn chevron centres against the
text rather than sitting up at the cap line. */
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item,
.breadcrumb-item a {
color: var(--cp-ink-45);
text-decoration: none;
transition: color .18s ease;
font-size: 12px;
}
.breadcrumb .breadcrumb-item {
font-size: 12px;
}
.breadcrumb-item a:hover { color: var(--cp-ink); text-decoration: none; }
.breadcrumb-item.active { color: var(--cp-ink-60); }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
/* A drawn chevron rather than Bootstrap's "/", which sits on the baseline and
competes with the letterforms at this size. */
.breadcrumb-item + .breadcrumb-item::before {
content: "";
flex: 0 0 auto;
width: 3.5px;
height: 3.5px;
padding: 0;
margin-right: .4375rem;
float: none;
border-top: 1.25px solid var(--cp-line-strong);
border-right: 1.25px solid var(--cp-line-strong);
transform: rotate(45deg);
color: transparent;
}
/* Toastr / SweetAlert, both used app-wide. */
#toast-container > div {
border-radius: 14px;
box-shadow: var(--cp-shadow-md);
font-family: var(--cp-body);
font-size: .8125rem;
opacity: 1;
}
.swal2-popup {
border-radius: 20px !important;
font-family: var(--cp-body) !important;
}
.swal2-title {
font-family: var(--cp-display) !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
border-radius: var(--cp-r-pill) !important;
font-family: var(--cp-display);
font-weight: 700;
font-size: .8125rem !important;
}
/* Footer. */
.footer {
background: var(--cp-paper);
border-top: 1px solid var(--cp-line);
color: var(--cp-ink-45);
font-size: .75rem;
padding: 1rem 1.75rem;
}
.footer a { color: var(--cp-ink-60); }
/* The base template's decorative settings panel has no place in the new
design and is already hidden inline on most pages. */
.theme-setting-wrapper, #settings-trigger { display: none !important; }
/* Sample-file list inside a help guide step ------------------------------- */
.cp-formatlist {
margin-top: .75rem;
border: 1px solid var(--cp-line);
border-radius: 10px;
overflow: hidden;
}
.cp-formatrow {
display: flex;
align-items: center;
gap: 1rem;
padding: .75rem .9375rem;
background: #fff;
}
.cp-formatrow + .cp-formatrow {
border-top: 1px solid var(--cp-line);
}
.cp-formatrow__body {
min-width: 0;
flex: 1 1 auto;
}
.cp-formatrow__name {
display: block;
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink);
}
/* The headings are the point of the row, so they wrap rather than truncate. */
.cp-formatrow__cols {
margin: .1875rem 0 0;
font-size: .75rem;
line-height: 1.5;
color: var(--cp-ink-60);
word-break: break-word;
}
.cp-formatrow .btn {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.cp-formatrow {
flex-direction: column;
align-items: stretch;
}
}
/* Section headings between groups of help guides ------------------------- */
.cp-help__section {
margin: 1.75rem 0 .625rem;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-60);
}
.cp-help__section:first-of-type {
margin-top: .5rem;
}
.cp-step__sample {
margin: .625rem 0 0;
}
/* Checkbox options described inside a help step -------------------------- */
.cp-opts {
margin: .75rem 0 0;
padding: 0;
list-style: none;
}
.cp-opt {
display: flex;
gap: .625rem;
padding: .625rem .8125rem;
border: 1px solid var(--cp-line);
border-radius: 8px;
background: var(--cp-mist);
}
.cp-opt + .cp-opt {
margin-top: .5rem;
}
/* A drawn tick box, not a real input — this is documentation, so it must not
look like something you can click. */
.cp-opt__box {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-top: .1875rem;
border: 1.5px solid var(--cp-line-strong);
border-radius: 3px;
}
.cp-opt__body {
min-width: 0;
}
.cp-opt__name {
display: block;
font-size: .8125rem;
font-weight: 600;
color: var(--cp-ink);
}
.cp-opt__note {
display: block;
margin-top: .125rem;
font-size: .78125rem;
line-height: 1.55;
color: var(--cp-ink-60);
}
/* A ticked box in a help guide's option list, for options the system
preselects on the real page. */
.cp-opt__box.is-checked {
background: var(--cp-ink);
border-color: var(--cp-ink);
position: relative;
}
.cp-opt__box.is-checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 3px;
height: 7px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Where a package is sitting in the store. This is a fetching instruction, so
it reads louder than the rest of the line's meta text. */
.cp-line__head {
display: flex;
align-items: center;
gap: .4375rem;
flex-wrap: wrap;
}
.cp-line__tracking {
/* was display:block; the head row lays it out now */
display: inline-block;
}
.cp-line__loc {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .0625rem .4375rem .125rem;
border-radius: var(--cp-r-pill);
background: var(--cp-yellow-soft);
border: 1px solid var(--cp-yellow-deep);
font-size: .6875rem;
font-weight: 700;
line-height: 1.5;
color: var(--cp-yellow-ink);
white-space: nowrap;
}
.cp-line__loc i {
font-size: .6875rem;
opacity: .75;
}
.cp-line--paid .cp-line__loc {
opacity: .6;
}
/* Column headings that sort server-side. They are links, so they get the
affordance of one without looking like body copy. */
.cp-sortlink {
display: inline-flex;
align-items: center;
gap: .25rem;
color: var(--cp-ink-60);
text-decoration: none;
white-space: nowrap;
}
.cp-sortlink:hover,
.cp-sortlink:focus {
color: var(--cp-ink);
text-decoration: none;
}
.cp-sortlink.is-active {
color: var(--cp-ink);
font-weight: 700;
}
/* Reports picker ========================================================== */
.cp-reports__search {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.cp-reports__search .form-control {
padding-left: 2.5rem;
height: 46px;
border-radius: var(--cp-r-pill);
border-color: var(--cp-line-strong);
}
.cp-reports__icon {
position: absolute;
left: .9375rem;
top: 50%;
transform: translateY(-50%);
color: var(--cp-ink-45);
font-size: .875rem;
pointer-events: none;
}
.cp-reports__count {
margin: .5rem 0 1.5rem;
text-align: center;
font-size: .75rem;
color: var(--cp-ink-45);
}
.cp-reports__empty {
margin: 2rem 0;
text-align: center;
color: var(--cp-ink-45);
font-size: .875rem;
}
.cp-repgroup {
margin-bottom: 1.75rem;
}
.cp-repgroup__head {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: .75rem;
}
.cp-repgroup__icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--cp-sky);
color: var(--cp-blue);
font-size: .9375rem;
}
.cp-repgroup__name {
margin: 0;
font-family: var(--cp-display);
font-size: 1rem;
font-weight: 700;
color: var(--cp-ink);
line-height: 1.3;
}
.cp-repgroup__sub {
margin: 0;
font-size: .75rem;
color: var(--cp-ink-45);
}
/* Auto-fitting so a group of one does not leave three empty columns. */
.cp-repgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: .75rem;
}
.cp-rep {
display: flex;
align-items: center;
gap: .75rem;
padding: .9375rem 1rem;
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
box-shadow: var(--cp-shadow-sm);
text-decoration: none;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cp-rep:hover,
.cp-rep:focus {
text-decoration: none;
border-color: var(--cp-ink);
transform: translateY(-1px);
box-shadow: var(--cp-shadow-md);
}
.cp-rep__body {
min-width: 0;
flex: 1 1 auto;
}
.cp-rep__name {
display: block;
font-size: .875rem;
font-weight: 700;
color: var(--cp-ink);
}
.cp-rep__desc {
display: block;
margin-top: .125rem;
font-size: .75rem;
line-height: 1.5;
color: var(--cp-ink-45);
}
.cp-rep__go {
flex: 0 0 auto;
color: var(--cp-line-strong);
font-size: 1rem;
transition: color .15s ease, transform .15s ease;
}
.cp-rep:hover .cp-rep__go {
color: var(--cp-ink);
transform: translateX(2px);
}
/* Charts read as a companion to the three tables above them, not a fourth
report of equal weight. */
.cp-rep--chart {
background: var(--cp-rail);
box-shadow: none;
}
@media (max-width: 575.98px) {
.cp-repgrid {
grid-template-columns: 1fr;
}
}
/* Read-only link with a copy button beside it. */
.cp-walink {
display: flex;
gap: .5rem;
align-items: stretch;
}
.cp-walink .form-control {
font-family: var(--cp-mono);
font-size: .8125rem;
}
.cp-walink .btn {
flex: 0 0 auto;
}
/* Branch management ======================================================= */
.cp-branches__search {
position: relative;
max-width: 420px;
margin: 0 0 1.25rem;
}
.cp-branches__search .form-control {
padding-left: 2.375rem;
height: 42px;
border-radius: var(--cp-r-pill);
border-color: var(--cp-line-strong);
}
.cp-branches__icon {
position: absolute;
left: .875rem;
top: 50%;
transform: translateY(-50%);
color: var(--cp-ink-45);
font-size: .8125rem;
pointer-events: none;
}
.cp-branches__empty {
margin: 2rem 0;
text-align: center;
color: var(--cp-ink-45);
font-size: .875rem;
}
.cp-branchgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1rem;
}
/* A column so the actions sit on the floor of the card whatever the address
length, keeping the row of buttons aligned across the grid. */
.cp-branch {
display: flex;
flex-direction: column;
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
box-shadow: var(--cp-shadow-sm);
overflow: hidden;
}
.cp-branch__head {
display: flex;
align-items: center;
gap: .75rem;
padding: 1rem 1.125rem .75rem;
}
.cp-branch__avatar {
flex: 0 0 auto;
}
.cp-branch__id {
min-width: 0;
}
.cp-branch__name {
margin: 0;
font-family: var(--cp-display);
font-size: 1rem;
font-weight: 700;
color: var(--cp-ink);
line-height: 1.3;
}
.cp-branch__phone {
margin: .125rem 0 0;
font-size: .75rem;
color: var(--cp-ink-45);
}
.cp-branch__body {
flex: 1 1 auto;
padding: 0 1.125rem 1rem;
}
.cp-branch__address {
margin: 0;
font-size: .8125rem;
line-height: 1.6;
color: var(--cp-ink-60);
}
.cp-branch__address--none {
font-style: italic;
color: var(--cp-ink-45);
}
.cp-branch__notes {
margin: .625rem 0 0;
padding-top: .625rem;
border-top: 1px solid var(--cp-line);
font-size: .75rem;
color: var(--cp-ink-45);
}
.cp-branch__actions {
display: flex;
border-top: 1px solid var(--cp-line);
}
.cp-branch__action {
flex: 1 1 0;
padding: .75rem .25rem;
text-align: center;
font-size: .75rem;
font-weight: 600;
color: var(--cp-ink-60);
background: var(--cp-rail);
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.cp-branch__action + .cp-branch__action {
border-left: 1px solid var(--cp-line);
}
.cp-branch__action:hover,
.cp-branch__action:focus {
background: var(--cp-sky);
color: var(--cp-ink);
text-decoration: none;
}
.cp-branch__action i {
display: block;
margin-bottom: .1875rem;
font-size: .9375rem;
}
@media (max-width: 575.98px) {
.cp-branchgrid {
grid-template-columns: 1fr;
}
}
/* Assistant chat dock ===================================================== */
.cp-ai {
position: fixed;
/* Docks under the fixed navbar so the launcher stays clickable while the
panel is open — otherwise the panel covers the very button that closes it. */
inset: 61px 0 0 auto;
width: min(420px, 100vw);
z-index: 1080; /* above the fixed navbar, below modals */
display: flex;
pointer-events: none;
}
.cp-ai__panel {
pointer-events: auto;
border-top: 1px solid var(--cp-line);
display: flex;
flex-direction: column;
width: 100%;
background: var(--cp-paper);
border-left: 1px solid var(--cp-line);
box-shadow: var(--cp-shadow-lg);
animation: cp-ai-in .18s ease-out;
}
@keyframes cp-ai-in {
from { transform: translateX(16px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.cp-ai__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .875rem 1rem;
border-bottom: 1px solid var(--cp-line);
}
.cp-ai__title {
display: flex;
align-items: center;
gap: .625rem;
min-width: 0;
}
.cp-ai__dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--cp-green);
}
.cp-ai__name {
margin: 0;
font-family: var(--cp-display);
font-size: .9375rem;
font-weight: 700;
color: var(--cp-ink);
line-height: 1.2;
}
.cp-ai__sub {
margin: 0;
font-size: .6875rem;
color: var(--cp-ink-45);
}
.cp-ai__headactions { display: flex; gap: .25rem; flex: 0 0 auto; }
.cp-ai__iconbtn {
border: 0;
background: transparent;
color: var(--cp-ink-45);
width: 30px;
height: 30px;
border-radius: 8px;
font-size: .875rem;
line-height: 1;
cursor: pointer;
}
.cp-ai__iconbtn:hover { background: var(--cp-mist); color: var(--cp-ink); }
.cp-ai__log {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem;
background: var(--cp-rail);
}
/* Empty state ------------------------------------------------------------ */
.cp-ai__empty { padding: 1.5rem .25rem; }
.cp-ai__emptytitle {
margin: 0 0 .75rem;
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink-60);
}
.cp-ai__suggestions { display: flex; flex-direction: column; gap: .5rem; }
.cp-ai__suggestion {
text-align: left;
padding: .625rem .75rem;
border: 1px solid var(--cp-line);
border-radius: 10px;
background: var(--cp-paper);
font-size: .8125rem;
color: var(--cp-ink-60);
cursor: pointer;
}
.cp-ai__suggestion:hover { border-color: var(--cp-ink); color: var(--cp-ink); }
/* Messages --------------------------------------------------------------- */
.cp-ai__msg { margin-bottom: .875rem; display: flex; flex-direction: column; }
.cp-ai__bubble {
max-width: 88%;
padding: .625rem .8125rem;
border-radius: 14px;
font-size: .8125rem;
line-height: 1.55;
white-space: pre-wrap; /* keep the model's own line breaks */
word-break: break-word;
}
.cp-ai__msg--user { align-items: flex-end; }
.cp-ai__msg--user .cp-ai__bubble {
background: var(--cp-ink);
color: #fff;
border-bottom-right-radius: 4px;
}
.cp-ai__msg--assistant .cp-ai__bubble {
background: var(--cp-paper);
border: 1px solid var(--cp-line);
color: var(--cp-ink);
border-bottom-left-radius: 4px;
}
.cp-ai__msg--error .cp-ai__bubble {
background: var(--cp-red-soft);
border-color: var(--cp-red);
color: var(--cp-red);
}
/* Typing ----------------------------------------------------------------- */
.cp-ai__typing { margin-bottom: .875rem; }
.cp-ai__dots {
display: inline-flex;
gap: 4px;
padding: .75rem .8125rem;
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: 14px;
border-bottom-left-radius: 4px;
}
.cp-ai__dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cp-ink-45);
animation: cp-ai-blink 1.2s infinite ease-in-out;
}
.cp-ai__dots span:nth-child(2) { animation-delay: .18s; }
.cp-ai__dots span:nth-child(3) { animation-delay: .36s; }
@keyframes cp-ai-blink {
0%, 60%, 100% { opacity: .25; }
30% { opacity: 1; }
}
/* Composer --------------------------------------------------------------- */
.cp-ai__composer {
display: flex;
align-items: flex-end;
gap: .5rem;
padding: .75rem;
border-top: 1px solid var(--cp-line);
background: var(--cp-paper);
}
.cp-ai__composer textarea {
flex: 1 1 auto;
resize: none;
max-height: 140px;
font-size: .8125rem;
border-radius: 12px;
}
.cp-ai__send {
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: var(--cp-ink);
color: #fff;
cursor: pointer;
}
.cp-ai__send:disabled { opacity: .4; cursor: default; }
@media (max-width: 575.98px) {
.cp-ai { width: 100vw; }
}
/* Transaction list filter bar -------------------------------------------- */
.cp-txfilter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: .875rem;
}
.cp-txfilter__chips {
display: inline-flex;
flex-wrap: wrap;
gap: .375rem;
}
.cp-txfilter__chip {
display: inline-flex;
align-items: center;
padding: .1875rem .5rem;
border-radius: var(--cp-r-pill);
background: var(--cp-sky);
border: 1px solid var(--cp-line);
font-size: .6875rem;
font-weight: 600;
color: var(--cp-ink);
white-space: nowrap;
}
.cp-txfilter__clear {
border: 0;
background: transparent;
padding: 0;
font-size: .75rem;
font-weight: 600;
color: var(--cp-blue);
cursor: pointer;
}
.cp-txfilter__clear:hover { text-decoration: underline; }
/* Assign loose packages to a manifest ------------------------------------ */
.cp-assign__search {
position: relative;
margin: 1rem 0 .75rem;
}
.cp-assign__search .form-control {
padding-left: 2.375rem;
height: 42px;
border-radius: var(--cp-r-pill);
border-color: var(--cp-line-strong);
}
.cp-assign__icon {
position: absolute;
left: .875rem;
top: 50%;
transform: translateY(-50%);
color: var(--cp-ink-45);
font-size: .8125rem;
pointer-events: none;
}
/* Scrolls on its own so the scan box and the action bar stay put. */
.cp-assign__list {
max-height: 60vh;
overflow-y: auto;
border: 1px solid var(--cp-line);
border-radius: 12px;
}
.cp-assign__more {
margin-top: .75rem;
text-align: center;
}
.cp-assignrow {
display: flex;
align-items: center;
gap: .75rem;
margin: 0;
padding: .75rem .9375rem;
cursor: pointer;
transition: background .12s ease;
}
.cp-assignrow + .cp-assignrow {
border-top: 1px solid var(--cp-line);
}
.cp-assignrow:hover { background: var(--cp-mist); }
.cp-assignrow.is-selected {
background: var(--cp-sky);
box-shadow: inset 3px 0 0 var(--cp-yellow);
}
.cp-assignrow input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
accent-color: var(--cp-brand);
}
.cp-assignrow__body { min-width: 0; }
.cp-assignrow__tracking {
display: block;
font-family: var(--cp-mono);
font-size: .8125rem;
font-weight: 700;
color: var(--cp-ink);
}
.cp-assignrow__meta {
display: block;
margin-top: .125rem;
font-size: .75rem;
color: var(--cp-ink-45);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Customer type picker on the group assignment filters -------------------- */
.cp-typebox {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.cp-typeopt {
display: inline-flex;
align-items: center;
gap: .375rem;
margin: 0;
padding: .375rem .625rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-pill);
font-size: .8125rem;
color: var(--cp-ink-60);
cursor: pointer;
}
.cp-typeopt:hover { border-color: var(--cp-ink); color: var(--cp-ink); }
.cp-typeopt input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--cp-brand);
}
/* Someone already in the group is shown but cannot be picked again. */
.cp-assignrow.is-member {
opacity: .55;
cursor: default;
}
.cp-assignrow.is-member:hover { background: transparent; }
/* A person's name, not a tracking number — so it drops the mono face. */
.cp-assignrow__name {
font-family: var(--cp-body);
font-size: .875rem;
}
/* Page-size control and pager on the group assignment list ---------------- */
.cp-pagebar {
display: flex;
align-items: center;
gap: .5rem;
}
.cp-pagebar__label {
margin: 0;
font-size: .75rem;
color: var(--cp-ink-45);
}
.cp-pagebar select {
width: auto;
min-width: 72px;
}
.cp-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: .875rem;
}
.cp-pager__where {
font-size: .8125rem;
color: var(--cp-ink-45);
}
/* Scan box with its button, and a read-only assigned row -------------------- */
.cp-scanrow {
display: flex;
gap: .5rem;
}
.cp-scanrow .form-control { flex: 1 1 auto; }
.cp-scanrow .btn { flex: 0 0 auto; }
/* A row that is a record of what happened, not something to pick. */
.cp-assignrow.is-static {
cursor: default;
}
.cp-assignrow.is-static:hover { background: transparent; }
/* The row just scanned, so the eye catches it landing. */
.cp-assignrow.is-new {
animation: cp-assign-in .9s ease-out;
}
@keyframes cp-assign-in {
0% { background: var(--cp-green-soft); }
100% { background: transparent; }
}
/* A radio with an explanation under it, for choices that need one. */
.cp-radioopt {
display: flex;
align-items: flex-start;
gap: .625rem;
margin: 0 0 .5rem;
padding: .75rem .875rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
cursor: pointer;
}
.cp-radioopt:hover { border-color: var(--cp-ink); }
.cp-radioopt input[type="radio"] {
flex: 0 0 auto;
margin-top: .1875rem;
width: 16px;
height: 16px;
accent-color: var(--cp-brand);
}
.cp-radioopt__name {
display: block;
font-size: .875rem;
font-weight: 700;
color: var(--cp-ink);
}
.cp-radioopt__sub {
display: block;
margin-top: .125rem;
font-size: .75rem;
line-height: 1.5;
color: var(--cp-ink-45);
}
/* Report filter panel ===================================================== */
.cp-filtercard {
padding: 1.25rem 1.375rem 1.125rem;
margin-bottom: 1.25rem;
}
/* A quiet heading above the controls, so the panel reads as a filter rather
than as the first block of the report. */
.cp-filtercard .filter-reportform::before {
content: "Filters";
display: block;
margin-bottom: .875rem;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cp-ink-45);
}
.cp-filtercard .filter-reportform p b {
display: block;
margin-bottom: .5rem;
font-family: var(--cp-display);
font-size: .875rem;
font-weight: 700;
color: var(--cp-ink);
}
.cp-filtercard .filter-reportform label {
font-size: .8125rem;
font-weight: 600;
color: var(--cp-ink-60);
margin-bottom: .25rem;
}
.cp-filtercard .filter-reportform small {
display: block;
margin-top: .125rem;
font-size: .75rem;
line-height: 1.5;
color: var(--cp-ink-45);
}
.cp-filtercard .filter-reportform .form-control {
max-width: 260px;
}
/* The ready-state choices, given the same box treatment as other radio
options in the app rather than sitting loose on the card. */
.cp-filtercard .filter-reportform .form-group:has(> input[type="radio"]) {
padding: .625rem .75rem;
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-field);
margin-bottom: .5rem;
}
.cp-filtercard .filter-reportform input[type="radio"] {
width: 16px;
height: 16px;
margin-right: .375rem;
accent-color: var(--cp-brand);
vertical-align: -2px;
}
.cp-filtercard .filter-reportform input[type="radio"] + label {
display: inline;
font-size: .875rem;
font-weight: 700;
color: var(--cp-ink);
}
.cp-filteractions {
display: flex;
gap: .5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--cp-line);
}
@media (max-width: 575.98px) {
.cp-filtercard .filter-reportform .form-control { max-width: 100%; }
.cp-filteractions { flex-direction: column; }
}
/* Sign-in page =========================================================== */
body.cp-login {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: var(--cp-mist);
font-family: var(--cp-body);
color: var(--cp-ink);
}
.cp-login__wrap {
width: 100%;
max-width: 400px;
}
.cp-login__card {
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-card);
box-shadow: var(--cp-shadow-md);
padding: 2rem 1.875rem 1.875rem;
}
.cp-login__brand {
text-align: center;
margin-bottom: 1.5rem;
}
.cp-login__logo {
display: block;
width: 128px;
height: 128px;
margin: 0 auto .875rem;
border-radius: 50%;
/* contain, not cover: a wide wordmark logo was being cropped to fit the
circle, cutting off the company name. */
object-fit: contain;
padding: .5rem;
background: var(--cp-mist);
}
/* Stands in when the company has no logo, or is not known at all. */
.cp-login__logo--none {
display: flex;
align-items: center;
justify-content: center;
color: var(--cp-ink-45);
font-size: 2.25rem;
}
.cp-login__company {
margin: 0;
font-family: var(--cp-display);
font-size: 1.375rem;
font-weight: 800;
line-height: 1.25;
color: var(--cp-ink);
}
.cp-login__title {
margin: 0;
font-family: var(--cp-display);
font-size: 1.5rem;
font-weight: 800;
color: var(--cp-ink);
}
.cp-login__sub {
margin: .25rem 0 1.25rem;
font-size: .8125rem;
color: var(--cp-ink-45);
}
.cp-login__error {
margin: 0 0 1rem;
padding: .625rem .75rem;
border: 1px solid var(--cp-red);
border-radius: var(--cp-r-field);
background: var(--cp-red-soft);
color: var(--cp-red);
font-size: .8125rem;
}
.cp-login__field {
margin-bottom: 1rem;
}
.cp-login__field label {
display: block;
margin-bottom: .3125rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cp-ink-45);
}
.cp-login__field .form-control {
height: 46px;
border-radius: var(--cp-r-field);
border-color: var(--cp-line-strong);
font-size: .875rem;
}
.cp-login__submit {
height: 46px;
margin-top: .25rem;
border-radius: var(--cp-r-pill);
font-weight: 700;
}
.cp-login__note {
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--cp-line);
font-size: .75rem;
line-height: 1.6;
color: var(--cp-ink-45);
}
/* Deactivated company notice --------------------------------------------- */
.cp-deactivated {
text-align: center;
}
.cp-deactivated__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 1.125rem;
border-radius: 50%;
background: var(--cp-red-soft);
color: var(--cp-red);
font-size: 1.75rem;
}
.cp-deactivated__body {
margin: 0 0 .75rem;
font-size: .875rem;
line-height: 1.65;
color: var(--cp-ink-60);
}
.cp-deactivated__contact {
margin: 1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--cp-line);
font-size: .8125rem;
color: var(--cp-ink-45);
}
.cp-deactivated__out {
margin-top: 1.25rem;
height: 44px;
line-height: 30px;
border-radius: var(--cp-r-pill);
font-weight: 700;
}
/* Navbar: collapsing the secondary controls on a phone ==================== */
/* The base theme sets `display: flex !important` on every navbar-nav-right
item, which defeats Bootstrap's d-none / d-md-block utilities entirely.
These rules are written to the same specificity so they actually win. */
/* Below md: the four secondary controls fold into the More menu. */
@media (max-width: 767.98px) {
.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item.cp-nav-collapse {
display: none !important;
}
.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item.cp-navmore {
display: flex !important;
}
}
/* From md up: the controls sit in the bar and More disappears. */
@media (min-width: 768px) {
.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item.cp-navmore {
display: none !important;
}
}
/* Long enough to need a scroll on a short phone screen. */
.cp-navmore__menu {
max-height: 75vh;
overflow-y: auto;
}
.cp-navmore__menu .dropdown-item i {
width: 18px;
text-align: center;
opacity: .7;
}
/* With Settings back on its own, five controls have to fit a 360px phone.
The generous desktop spacing is what pushes them off, so it is tightened
below md rather than hiding anything. */
@media (max-width: 767.98px) {
.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item {
margin-left: 0 !important;
margin-right: 0 !important;
}
.navbar .navbar-menu-wrapper .navbar-nav-right > .nav-item > .nav-link {
padding-left: .25rem !important;
padding-right: .25rem !important;
}
.navbar .navbar-menu-wrapper .navbar-nav-right > .nav-item > .nav-link.count-indicator {
width: 34px;
height: 34px;
}
.navbar .navbar-menu-wrapper .navbar-nav-right .nav-profile img {
width: 34px;
height: 34px;
}
}