:root {
  --alx-navy: #14213d;
  --alx-accent: #f5a524;
}

html { font-size: 15px; position: relative; min-height: 100%; }
body { background: #f5f6f8; }

.bg-alx { background: var(--alx-navy); }
.text-alx-accent { color: var(--alx-accent); }

.card { border: 0; box-shadow: 0 1px 2px rgba(20, 33, 61, .08); }
.card-header { background: #fff; font-weight: 600; }

.stat { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
/* A figure on the dashboard that opens its list. */
.dash-link { transition: box-shadow .15s ease; }
.dash-link:hover { box-shadow: 0 0 0 2px var(--bs-primary-border-subtle, #9ec5fe); }
.stat-label { color: #6c757d; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; font-weight: 600; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr[data-href] { cursor: pointer; }

.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.6rem; margin: 0; }

dl.props dt { color: #6c757d; font-weight: 500; font-size: .85rem; }
dl.props dd { margin-bottom: .6rem; }

.tag { display: inline-block; background: #e9ecef; border-radius: 1rem; padding: 0 .55rem; font-size: .8rem; margin: 0 .2rem .2rem 0; }
/* A tag you can press: to filter a list by it, or to add it to the record being edited. */
.tag-pick { border: 1px solid transparent; color: inherit; text-decoration: none; cursor: pointer; }
.tag-pick:hover { border-color: #adb5bd; color: inherit; text-decoration: none; }
.tag-pick.on { background: #14213d; color: #fff; }
.tag-pick .n { opacity: .6; margin-left: .2rem; }

.mapping-select { min-width: 13rem; }
.preview-table { font-size: .85rem; }
.preview-table td { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-label { font-weight: 500; font-size: .9rem; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .15rem rgba(20, 33, 61, .25); }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }

.min-w-0 { min-width: 0; }
.action-check { width: 2rem; height: 2rem; padding: 0; line-height: 1; border-radius: 50%; }
.action-item details summary { cursor: pointer; }
.timeline-icon { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: #eef1f6; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--alx-navy); font-weight: 600; }
.nav-badge { font-size: .65rem; vertical-align: top; }
.bucket-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; font-weight: 600; padding: .5rem 1rem; background: #f8f9fa; }
.list-group a, .card-header a { text-decoration: none; }
.list-group a:hover, .card-header a:hover { text-decoration: underline; }

/* Context lists */
.list-badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--c, #14213d); color: #fff; border-radius: 1rem; padding: .1rem .6rem; font-size: .78rem; font-weight: 500; margin: 0 .25rem .25rem 0; text-decoration: none; white-space: nowrap; }
a.list-badge:hover { color: #fff; filter: brightness(1.15); text-decoration: none; }
.list-badge .x { background: none; border: 0; color: #fff; opacity: .75; padding: 0; line-height: 1; font-size: .9rem; }
.list-badge .x:hover { opacity: 1; }
.list-card { border-top: 4px solid var(--c, #14213d); }
.color-choice input { display: none; }
.color-choice label { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--c); cursor: pointer; border: 3px solid transparent; }
.color-choice input:checked + label { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.bulk-bar { position: sticky; bottom: 0; z-index: 10; }
.list-checks { max-height: 16rem; overflow: auto; }

.navbar .nav-link { padding-left: .6rem !important; padding-right: .6rem !important; }
.avatar { display: inline-flex; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--alx-accent); color: var(--alx-navy); font-weight: 700; align-items: center; justify-content: center; }

/* Interaction threads (campaign e-mail → replies / visits) */
.thread { margin: .6rem 0 0 1rem; padding-left: 1.4rem; border-left: 2px solid #dfe3ea; }
.thread-child { padding-top: .5rem; }
.thread-child + .thread-child { border-top: 1px dashed #eceff3; margin-top: .5rem; }
.timeline-icon.inbound { background: #e6f4ea; color: #15803d; }

/* Catalogue */
.catalog-thumb { width: 48px; height: 48px; object-fit: contain; background: #f1f3f6; border-radius: .35rem; }
.catalog-picture { height: 170px; display: flex; align-items: center; justify-content: center; background: #f1f3f6; border-radius: .375rem .375rem 0 0; overflow: hidden; }
.catalog-picture img { max-width: 100%; max-height: 100%; object-fit: contain; }
.catalog-card:hover { box-shadow: 0 .25rem .75rem rgba(20, 33, 61, .12); }
.catalog-hero { background: #f1f3f6; border-radius: .375rem; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.catalog-hero img { max-width: 100%; max-height: 360px; object-fit: contain; }

/* Background removal (js/cutout.js): the two pictures side by side, the result on a checkerboard so what is
   transparent is seen to be. */
.cutout-view { display: block; max-width: 100%; max-height: 260px; margin: 0 auto; border-radius: .25rem; }
.cutout-checker {
    background-color: #fff;
    background-image: linear-gradient(45deg, #e3e6ea 25%, transparent 25%), linear-gradient(-45deg, #e3e6ea 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e3e6ea 75%), linear-gradient(-45deg, transparent 75%, #e3e6ea 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* Stars: a supplier's rating, shown and set. The input is five radios drawn right to left, so that hovering or
   ticking one lights it and every one before it with nothing but CSS. */
.stars-shown { color: #f0ad00; letter-spacing: .05em; }
.stars-shown .stars-off { color: #ced4da; }
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; font-size: 1.6rem; line-height: 1; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label { color: #ced4da; cursor: pointer; }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: #f0ad00; }
.stars-input input:focus-visible + label { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: .2rem; }

/* The photograph as taken is where the frame is drawn: a crosshair, and no scrolling on a touch screen while drawing. */
.cutout-frame { cursor: crosshair; touch-action: none; }
.cutout-swatch { display: inline-block; width: .9em; height: .9em; border-radius: .2em; border: 1px solid #adb5bd; vertical-align: -.1em; }
.sha { font-family: var(--bs-font-monospace); font-size: .72rem; word-break: break-all; }

/* Offers */
.offer-lines { min-width: 1320px; }
.offer-lines th:nth-child(2) { min-width: 15rem; }
.offer-lines th:nth-child(3) { min-width: 20rem; }
.offer-lines select[data-pick] { max-width: 100%; }
.offer-lines .form-control-sm { padding-left: .4rem; padding-right: .4rem; }
.conditions h4 { font-size: .95rem; margin-top: .8rem; }

/* The calendar: one grid for actions, events, public calls, proposals and deliveries.
   The colour is the kind and nothing else, so a glance says what sort of week it is. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #e4e7ec; }
.cal-head { background: #f7f8fa; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: .35rem .5rem; font-weight: 600; }
.cal-day { background: #fff; min-height: 7.5rem; padding: .3rem .35rem .45rem; display: flex; flex-direction: column; gap: .15rem; }
.cal-week .cal-day { min-height: 22rem; }
.cal-outside { background: #fbfcfd; }
.cal-outside .cal-date a { color: #b0b7c3; }
.cal-weekend { background: #fafbfc; }
.cal-outside.cal-weekend { background: #f8f9fb; }
.cal-today { background: #eef4ff; box-shadow: inset 0 0 0 2px var(--alx-navy, #14213d); }
.cal-date { font-size: .82rem; font-weight: 600; line-height: 1.1; margin-bottom: .1rem; display: flex; gap: .3rem; align-items: baseline; }
.cal-date a { color: #1f2937; text-decoration: none; }
.cal-date a:hover { text-decoration: underline; }
.cal-month { font-size: .7rem; font-weight: 500; color: #64748b; text-transform: uppercase; }

.cal-item { display: block; font-size: .74rem; line-height: 1.25; padding: .12rem .35rem; border-radius: .2rem; border-left: 3px solid var(--cal, #64748b);
            background: color-mix(in srgb, var(--cal, #64748b) 12%, #fff); color: #1f2937; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item:hover { background: color-mix(in srgb, var(--cal, #64748b) 22%, #fff); color: #111827; text-decoration: none; }
.cal-item .cal-time { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .25rem; color: color-mix(in srgb, var(--cal, #64748b) 75%, #000); }
.cal-done { opacity: .5; }
.cal-done .cal-title { text-decoration: line-through; }
.cal-late { box-shadow: inset 0 0 0 1px #dc3545; }
.cal-more { font-size: .72rem; color: #64748b; text-decoration: none; padding-left: .2rem; }
.cal-more:hover { text-decoration: underline; }

.cal-action { --cal: #2563eb; }
.cal-event { --cal: #7c3aed; }
.cal-tender { --cal: #ea580c; }
.cal-proposal { --cal: #0f766e; }
.cal-delivery { --cal: #059669; }
.cal-project { --cal: #be123c; }
.cal-bid { --cal: #a16207; }
.cal-dayoff { --cal: #475569; font-weight: 600; }
.cal-away { --cal: #0891b2; }
/* A day nobody works is shaded like a weekend, so a month shows its gaps at a glance. */
.cal-off { background: #f1f3f6; }

.cal-key { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; background: var(--cal, #64748b); vertical-align: middle; }

@media (max-width: 767px) {
    .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: .8rem; }
    .cal-day { min-height: 5rem; }
    .cal-item .cal-title { display: none; }
    .cal-item { height: .55rem; padding: 0; }
}

/* ---- Shelf labels ---------------------------------------------------------------------------------------
   A sheet of stickers, measured in millimetres because that is what the label sheet is measured in. The two
   sizes are the common Avery layouts: 70×37 mm (3 across, 8 down) and 48×25 mm (4 across, 10 down). Printing
   must be at 100% — "fit to page" moves every label a little and the whole sheet misses.                    */

.labels { display: grid; gap: 0; background: #fff; }
.labels-big { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; }
.labels-small { grid-template-columns: repeat(4, 48mm); grid-auto-rows: 25mm; }

.label { display: flex; align-items: center; gap: 2mm; padding: 2mm; overflow: hidden; box-sizing: border-box; }
.label-code { flex: 0 0 auto; line-height: 0; }
.labels-big .label-code svg { width: 30mm; height: 30mm; }
.labels-small .label-code svg { width: 19mm; height: 19mm; }
.label-text { min-width: 0; color: #000; }
.label-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.labels-big .label-sku { font-size: 11pt; }
.labels-small .label-sku { font-size: 8pt; }
.label-name { line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.labels-big .label-name { font-size: 9pt; }
.labels-small .label-name { font-size: 6.5pt; -webkit-line-clamp: 2; }
.label-where { color: #444; margin-top: .5mm; }
.labels-big .label-where { font-size: 7.5pt; }
.labels-small .label-where { font-size: 6pt; }
.label-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #888; margin-left: 1mm; }
/* On a sheet the page wrapper is not there at all: the label itself is the grid cell. */
.labels-big .label-page, .labels-small .label-page { display: contents; }

/* A Brother QL on 62 mm continuous tape (DK-22205). The driver takes the tape's width as the width of the page,
   so each label is a page of its own, 62 mm wide and 100 mm long. The sticker is drawn along the tape — 100 mm
   by 62 mm, the way it is read on a shelf edge — and turned a quarter turn to fit that page. The turn has to be
   done here: the page size is fixed by this sheet, so the print dialog's portrait/landscape changes nothing. */
.labels-roll { display: flex; flex-wrap: wrap; gap: 4mm; background: transparent; }
.labels-roll .label-page { position: relative; width: 62mm; height: 100mm; overflow: hidden; background: #fff; outline: 1px dashed #ccc; }
.labels-roll .label {
    position: absolute; top: 0; left: 0; width: 100mm; height: 62mm; padding: 4mm; gap: 4mm;
    transform-origin: top left; transform: translateX(62mm) rotate(90deg);
}
.labels-roll .label-code svg { width: 44mm; height: 44mm; }
.labels-roll .label-sku { font-size: 16pt; }
.labels-roll .label-name { font-size: 12pt; -webkit-line-clamp: 4; }
.labels-roll .label-where { font-size: 10pt; margin-top: 1mm; }

/* On paper: nothing but the labels, at their true size, with the sheet's own margins. */
@media print {
    @page { size: A4; margin: 8mm 5mm; }
    body { background: #fff; }
    .labels { gap: 0; }
    .label { break-inside: avoid; }
    .labels-roll { display: block; }
    /* A hair under the page: Chrome rounds 100 mm down, and a label that spills over wastes a blank one. */
    .labels-roll .label-page { outline: none; height: 99mm; break-after: page; }
    .labels-roll .label-page:last-child { break-after: auto; }
}

/* ---- Labels for people on a Brother QL: contact details and visitor badges ------------------------------------
   Each label is a page of its own, 62 mm wide as the driver sees the tape. A 62 × 29 mm address label is read the
   way it comes out; a 62 × 100 mm one is drawn 100 mm by 62 mm and, on paper only, turned a quarter turn to run
   along the tape, as the shelf labels are. On screen it is shown the way it will be read, to be checked before
   printing. */
.labels-ql { display: flex; flex-wrap: wrap; gap: 4mm; background: transparent; }
.labels-ql .label-page { position: relative; overflow: hidden; background: #fff; outline: 1px dashed #ccc; color: #000; }
.ql-small .label-page { width: 62mm; height: 29mm; }
.ql-big .label-page { width: 100mm; height: 62mm; }
.ql-label {
    position: absolute; top: 0; left: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
    font-family: system-ui, "Segoe UI", Arial, sans-serif; line-height: 1.15;
}
.ql-small .ql-label { width: 62mm; height: 29mm; padding: 1.5mm 2.5mm; justify-content: center; }
.ql-big .ql-label { width: 100mm; height: 62mm; padding: 4mm 5mm; transform-origin: top left; }
.ql-label > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ql-name { font-weight: 700; }
.ql-company { font-weight: 600; }
/* Contact details: what an envelope and a phone call need. */
.ql-details.ql-small .ql-name { font-size: 9pt; }
.ql-details.ql-small .ql-company, .ql-details.ql-small .ql-line { font-size: 7.5pt; }
.ql-details.ql-big .ql-name { font-size: 15pt; }
.ql-details.ql-big .ql-job { font-size: 9.5pt; color: #222; }
.ql-details.ql-big .ql-company { font-size: 11pt; margin-top: 1.5mm; }
.ql-details.ql-big .ql-line { font-size: 9.5pt; }
.ql-details.ql-big .ql-contact { margin-top: auto; font-size: 9pt; }
/* A visitor badge: the name read from across a room. */
.ql-badge .ql-label { text-align: center; justify-content: center; }
.ql-badge.ql-big .ql-event { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #333; margin-bottom: auto; }
.ql-badge.ql-big .ql-name { font-size: 24pt; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ql-badge.ql-big .ql-company { font-size: 14pt; margin-top: 1mm; }
.ql-badge.ql-big .ql-job { font-size: 10pt; }
.ql-badge.ql-big .ql-session { font-size: 10pt; margin-top: auto; }
.ql-badge.ql-small .ql-name { font-size: 12pt; }
.ql-badge.ql-small .ql-company { font-size: 8.5pt; }
.ql-badge.ql-small .ql-session { font-size: 6.5pt; color: #333; }
/* A guest of the person who booked: a line to write their name on. */
.ql-badge .ql-blank { border-bottom: .4mm solid #000; margin: 0 6mm .5mm; min-height: 12mm; }
.ql-badge.ql-small .ql-blank { min-height: 7mm; }
.ql-badge .ql-hint { font-size: 7pt; color: #555; }
@media print {
    .labels-ql { display: block; gap: 0; }
    .labels-ql .label-page { outline: none; break-after: page; }
    /* A hair under the page, as for the shelf labels: Chrome rounds down, and a spill wastes a blank label. */
    .ql-small .label-page { height: 28.6mm; }
    .ql-big .label-page { width: 62mm; height: 99mm; }
    .ql-big .ql-label { transform: translateX(62mm) rotate(90deg); }
    .labels-ql .label-page:last-child { break-after: auto; }
}

/* A machine-written overview. Tight headings and bullets so a page of prose stays scannable, and a rule down
   the left so a reader can always see where the CRM's own records stop and the model's reading of them begins. */
.briefing { border-left: 3px solid #d6dbe1; padding-left: .85rem; }
.briefing h5, .briefing h6 { font-weight: 600; letter-spacing: .01em; }
.briefing h5:first-child, .briefing h6:first-child { margin-top: 0 !important; }
.briefing ul { padding-left: 1.1rem; }
.briefing li { margin-bottom: .2rem; }
.briefing p:last-child, .briefing ul:last-child { margin-bottom: 0 !important; }

/* The editions of a product compared: the rows that are not the same across them. */
.compare-differs, .compare-differs > td { background: #fff8e1; }

/* The message a save left, floating at the top of the window when the page came back where it was (data-keep-scroll). */
.alert-floating { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1080;
                  width: max-content; max-width: min(720px, calc(100vw - 2rem)); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15); }

/* The partner registration's hidden box (Pages/Portal/Register): off-screen, so a person never fills it and a robot does. */
.portal-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* A knowledge base article (Pages/Knowledge): its pictures never wider than the column, a figure never taller than the window. */
.knowledge-article img, .knowledge-answer img { max-width: 100%; height: auto; }
.knowledge-article figure img { max-height: 70vh; }
.knowledge-article h2, .knowledge-article h3 { margin-top: 1.5rem; }
.knowledge-article table { font-size: .9rem; }