/* Turnaround tags, Reports, Swatching assistant prompt and split */
.kdue { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.kdue.soon { color: var(--amber); }
.kdue.late { color: var(--red); }
.kdue.late::before, .kdue.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ohead .meta .kdue { margin-left: 4px; }
.rptabs { margin-bottom: 12px; flex-wrap: wrap; }
.rpctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.rpctl .rpmgmt { margin-left: auto; }
@media (max-width: 640px) { .rpctl .rpmgmt { margin-left: 0; width: 100%; } .rpctl .rpmgmt .btn { flex: 1 1 auto; } }
.rpmeters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rpk .sechead { margin-bottom: 2px; }
.rpmeter { margin: 12px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.rpmh { display: flex; justify-content: space-between; align-items: baseline; }
.rpmh b { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rpmeter.ok .rpmh b { color: var(--good); }
.rpmeter.under .rpmh b { color: var(--red); }
.rpbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--surface2); overflow: visible; }
.rpbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--blue-btn, var(--blue)); }
.rpmeter.ok .rpbar i { background: var(--good); }
.rpmeter.under .rpbar i { background: var(--red); }
.rpbar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.6; }
.rpdl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 0.875rem; }
.rpdl dt { color: var(--muted); }
.rpdl dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rpdl dd.rplate { color: var(--red); }
.rptscroll { overflow-x: auto; }
.rpt td.num, .rpt th.num { text-align: right; padding-left: 12px; white-space: nowrap; }
.rpt th[scope="row"] { font-weight: 600; padding-right: 12px; }
.rpset textarea { font-family: inherit; }
.rppage .lrbox { margin-bottom: 16px; }
.swask { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.swask h2 { margin: 0 0 4px; }
.swask p { margin: 0; }
.swsplit { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; border: 0; padding: 0; }
.swsplit .chkl { align-items: flex-start; }
@media (max-width: 1100px) { .rpmeters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rpmeters { grid-template-columns: 1fr; } }
.swbo { margin-top: 16px; }
.swbolist { list-style: none; margin: 8px 0 0; padding: 0; }
.swboitem { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--divider); }
.swboitems { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; }
.swboacts { display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.swtag.good { background: var(--good-bg, #E3F1EA); color: var(--good); }
.bonote { display: block; color: var(--amber); font-size: 0.75rem; }
.stkw .stk { display: block; font-size: 0.75rem; }
.stknote:empty { display: none; }
@media (max-width: 640px) { .swboitem { flex-direction: column; } }
.swbonone { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; }
.racard .rabig { font-size: 1.4rem; margin: 4px 0 8px; display: flex; align-items: center; gap: 12px; }
.rtarrive { margin-bottom: 16px; }
.rtfind { display: flex; gap: 8px; max-width: 520px; margin: 8px 0; }
.rtfind input { flex: 1; }
.rtlist { display: flex; flex-direction: column; gap: 10px; }
.rtrow { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rtrow form { flex-basis: 100%; }
.rtra { font-size: 1.05rem; margin-right: 8px; }
.rtacts { display: flex; gap: 10px; align-items: center; }
/* Settings hub */
.setgroup { margin-bottom: 24px; }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.setcard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; }
.setcard:hover { border-color: var(--input); box-shadow: var(--sh-2); }
.setcard svg { flex: none; width: 22px; height: 22px; color: var(--blue-btn); margin-top: 2px; }
.setcard b { display: block; font-weight: 650; }
.setcard small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; margin-top: 2px; }
.backset { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--muted); text-decoration: none; margin: 0 0 8px; }
.backset svg { width: 16px; height: 16px; }
.backset:hover { color: var(--ink); }
/* Logistics: a searchable directory (list left, details right) */
.lgpage .pagehead { margin-bottom: 12px; }
.lgdir { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.lgleft { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: calc(100vh - 40px); }
.lgtop { display: flex; align-items: center; gap: 6px; }
.lgtop .searchbar { flex: 1; min-height: 40px; margin: 0; }
.lgtop .searchbar input { min-height: 36px; }
.lgtop .iconbtn { flex: none; border: 1px solid var(--line); background: var(--surface); }
.lglist { list-style: none; margin: 0; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.lgrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 6px 8px 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lgrow:hover { background: var(--row-hover); }
.lgrow.on { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue-btn); }
.lgrn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lgrn b { font-size: 0.9375rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgrp { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lgchips { display: flex; gap: 4px; flex: none; max-width: 40%; overflow: hidden; }
.lgchip { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface2); font-size: 0.75rem; font-weight: 600; color: var(--grey-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgrow > .ic { width: 14px; height: 14px; flex: none; color: var(--muted); }
.lgnone { margin: 8px 4px; }
.lgdet { padding: 16px 18px 12px; }
.lgdh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lgdh h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 750; }
.lgdh .lgback { display: none; align-items: center; gap: 4px; flex-basis: 100%; min-height: 40px; }
.lgback svg { width: 14px; height: 14px; }
.lgedit { color: var(--muted); }
.lgedit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lgmeta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 10px 0 0; }
.lgmeta > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lgmeta dt, .lgt th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lgmeta dd { margin: 0; font-size: 0.9375rem; }
.lgv { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.lgv a, .lgmeta dd a { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
.lgv a:hover, .lgmeta dd a:hover { text-decoration: underline; }
.lgcp { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.lgcp:hover { background: var(--surface2); color: var(--ink); }
.lgcp svg { width: 14px; height: 14px; }
.lgh3 { margin: 16px 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lgaccts { display: flex; flex-wrap: wrap; gap: 6px; }
.lgacct { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; border: 1px solid var(--line); background: var(--surface2); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 0.875rem; color: var(--ink); cursor: pointer; }
.lgacct:hover { border-color: var(--input); }
.lgacct span { color: var(--muted); }
.lgacct svg { width: 13px; height: 13px; color: var(--muted); }
.lgnote { margin: 10px 0 0; font-size: 0.875rem; color: var(--grey-ink); }
.lgtw { overflow-x: auto; }
.lgt { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lgt th, .lgt td { padding: 5px 10px 5px 0; text-align: left; vertical-align: middle; }
.lgt thead th { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.lgt tbody tr + tr td { border-top: 1px solid var(--divider); }
.lgt tr.lgg th { padding: 10px 0 2px; color: var(--ink); font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; border-bottom: 0; }
.lgt tr.lgg + tr td { border-top: 0; }
.lgt td b { font-weight: 650; }
.lgaddr { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--divider); }
.lgaddr h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.lgaddr ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 24px; }
.lgaddr li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 4px; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 0.875rem; }
.lgan { grid-column: 1; min-height: 28px; display: flex; align-items: center; gap: 4px; }
.lgan b { font-weight: 650; }
.lgan .lgedit { width: 28px; height: 28px; min-height: 28px; }
.lgad { grid-column: 1; color: var(--grey-ink); }
.lgaddr li .small { grid-column: 1; }
.lgaddr li > .lgcp { grid-column: 2; grid-row: 1 / span 2; }
.lgcard textarea, .lgdir textarea { font-family: inherit; }
@media (max-width: 899px) {
  .lgdir { grid-template-columns: minmax(0, 1fr); }
  .lgleft { position: static; max-height: none; }
  .lgdir.lgopen .lgleft { display: none; }
  .lgdir:not(.lgopen) .lgright { display: none; }
  .lgdh .lgback { display: inline-flex; }
  .lgdet { padding: 12px 14px; }
  .lgt thead { display: none; }
  .lgt, .lgt tbody, .lgt tr, .lgt td { display: block; }
  .lgt tr { padding: 8px 0; border-top: 1px solid var(--divider); }
  .lgt tr.lgg { padding: 8px 0 0; border-top: 0; }
  .lgt tr.lgg th { display: block; }
  .lgt td { padding: 1px 0; border: 0 !important; }
  .lgt td:empty, .lgt td[data-l="Role"]:empty { display: none; }
  .lgt td[data-l="Role"] { color: var(--muted); }
}
/* A page's main button sits under its heading with room around it */
.pageact { display: flex; gap: 12px; margin: 4px 0 24px; }
.crsum { margin: -8px 0 12px; }
.pgopen { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px; margin: 0 2px 0 4px; }
.pgopen.on { background: var(--tint-good); color: var(--good); }
.pgopen.off { background: var(--chip-bg); color: var(--muted); }
.pgopen:empty { display: none; }
/* Steppers fit however many steps they have (credits with returns have five) */
@media (min-width: 641px) { .kstep { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.rm .rmsteps li small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--amber); margin-top: 2px; }
.rm .rmsteps li.done small { color: var(--muted); }

/* ---------- Swatching board: compact cards (30+ orders in a column) ---------- */
.swcol { gap: 6px; }
.swcards { gap: 6px; }
.swcard { gap: 4px; padding: 8px 10px 6px; border-radius: 10px; }
.swcard .swmain { gap: 0; }
.swl1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.swl1 .qk { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swl1 .kdue { flex: none; }
.swcard .swmain b { font-size: 0.875rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swcard .qs { font-size: 0.8125rem; line-height: 1.35; color: var(--grey-ink); display: -webkit-box; white-space: normal; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.swcard .swacts { flex-wrap: nowrap; gap: 6px; margin-top: 1px; }
.swcard .swlinks { gap: 2px; }
.swstep { display: inline-flex; align-items: center; gap: 2px; min-height: 26px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.swstep:hover { border-color: var(--blue-btn); color: var(--blue-btn); }
.swstep.go { background: var(--blue-btn); border-color: var(--blue-btn); color: #fff; }
.swstep .ic { width: 13px; height: 13px; }
.swicon { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; list-style: none; }
.swicon::-webkit-details-marker { display: none; }
.swicon:hover, .swmore[open] > .swicon { background: var(--surface2); color: var(--ink); }
.swicon .ic { width: 16px; height: 16px; }
.swmore { position: relative; }
.swmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--sh-pop); }
.swmi { padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.swmi:hover, .swmi:focus-visible { background: var(--surface2); }
@media (pointer: coarse) { .swstep { min-height: 36px; } .swicon { width: 40px; height: 40px; } .swmi { padding: 12px; } }
.swl3 { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.swl3 .qs { flex: 1 1 auto; min-width: 0; }
.swl3 .swtags { flex: none; max-width: 100%; }
.swl3 .swtags .swtag { flex: none; }
.swcard .swacts { justify-content: space-between; }
.lgret { margin-top: 16px; }
@media (max-width: 899px) { .lgrow.on { background: none; box-shadow: none; } }
@media (max-width: 899px) { .lgdash { display: none; } }

/* Waiting over 3 days (not backorders): red tinge */
.swcard.late { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.swcard.late .swmain b { color: var(--red); }

/* ---------- Agent D design pass: Credits & Returns tab counts ---------- */
.crmod .subnav a .n { margin-left: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

/* Hidden frame that holds a PDF while the print window is open (js/printpdf.js) */
.pdfprint { position: fixed; right: 0; bottom: 0; width: 2px; height: 2px; border: 0; opacity: 0; pointer-events: none; }

/* MCP Phone installers (js/deskapp.js) */
.dapprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, #e2e2e2); flex-wrap: wrap; }
.dapprow > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dappacts { display: flex; gap: 8px; flex-wrap: wrap; }
.dappup { cursor: pointer; }
/* Point of Sale stock report (Backorders) */
.swboh-acts { display: flex; gap: 12px; align-items: center; }
.posrep { margin-top: 16px; }
.posreptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.posreptile { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.posreptile b { font-size: 1.5rem; line-height: 1.1; }
.posreptile span { font-size: .82rem; opacity: .75; }
.posrepbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.posrepbar select { max-width: 100%; }
.posrepsub { font-size: 1rem; margin: 16px 0 6px; }
.posrepwrap { overflow-x: auto; }
.posreptbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.posreptbl th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; padding: 6px 8px; border-bottom: 1px solid var(--line, #ddd); }
.posreptbl td { padding: 7px 8px; border-bottom: 1px solid var(--line, #eee); vertical-align: top; }
.posreptbl .n { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .posreptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phone setup: desk phone settings files */
.phcfg { margin-top: 16px; }
.phcfglist { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 16px; }
.phcfglist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
.phcfglist li .link { white-space: nowrap; }
/* Customer search: the KAM's photo beside each customer */
.pick.pickkam { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.pick.pickkam .pickt { font-size: inherit; color: inherit; }
.pick.pickkam .pickt > span { display: block; font-size: 0.8125rem; color: var(--muted); }
.pick.pickkam .pickt .swtag { display: inline-block; font-size: .72rem; }
.pickkam .pickt { flex: 1; min-width: 0; display: block; }
.pickav { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.pickav .av { width: 34px; height: 34px; }
.pickav.none { border-radius: 50%; border: 1px dashed var(--line, #ccc); font-size: .72rem; color: var(--muted, #777); }
.custkam { display: inline-flex; align-items: center; gap: 6px; }
.custkam .av { width: 22px; height: 22px; font-size: .62rem; }
.repgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.reprow { display: flex; align-items: center; gap: 10px; }
.reprow span { flex: 1; min-width: 0; }
.reprow input { width: 6em; }
.repgrid .formact { grid-column: 1 / -1; }

/* Tasks: who has to act, exception reasons, Completed tab */
.tkactby { font-weight: 500; color: var(--muted); }
.tkexc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tkexc span { padding: 1px 8px; border-radius: 6px; background: var(--red-bg); color: var(--red); font-size: 0.75rem; font-weight: 600; }
.tab.tkover .n { color: var(--red); font-weight: 700; }
.tkdhelp { margin: 12px 0; }
.tkdlist { list-style: none; margin: 0; padding: 0 0 72px; display: flex; flex-direction: column; gap: 6px; }
.tkdrow { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.tkdrow:hover { border-color: var(--input-strong, #7C8A83); }
.tkdrow .tkopen::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.tkdat { color: var(--muted); white-space: nowrap; }
@media (max-width: 700px) {
  .tkdrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .tkdrow .tkmain { grid-column: 1 / -1; grid-row: 2; }
  .tkdrow .tkopen b, .tkdrow .tksub span { white-space: normal; overflow-wrap: anywhere; }
}
.tksplit .tkexc { order: 3; flex: 1 0 100%; }

/* Settings, Key Account Managers (kam-admin.js) */
.kchead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kchead p { flex: 1 1 420px; margin: 0; }
.kctable { display: flex; flex-direction: column; margin-top: 16px; }
.kcrow { display: grid; grid-template-columns: 130px minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) 100px 80px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--divider); }
.kcrow.kchd { border-top: 0; padding-top: 0; font-size: var(--fs-14); color: var(--muted); font-weight: 600; }
.kcrow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kcrow .kcp { flex-direction: row; align-items: center; gap: 10px; }
.kcrow .kcp > span { display: flex; flex-direction: column; min-width: 0; }
.kcrow.off { opacity: .65; }
.kcrow.kcedit { display: block; }
.kcform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 12px 0; }
.kcform .formact, .kcform .chkl { grid-column: 1 / -1; }
.kcsample { display: flex; gap: 8px; }
.kcsample input { flex: 1; min-width: 0; }
.kcform .ferr { color: var(--red); font-size: var(--fs-14); margin: 4px 0 0; }
.kcform .ferr:empty { display: none; }
@media (max-width: 760px) {
  .kcrow { grid-template-columns: 1fr; gap: 4px; }
  .kcrow.kchd { display: none; }
  .kcrow > span.kcl { flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
  .kcrow > span.kcl::before, .kcrow > span.kcs::before { content: attr(data-l) ":"; color: var(--muted); }
  .kcform { grid-template-columns: 1fr; }
}

/* Request form: the chosen customer as an account card (kam-new.js acctCard) */
.acct { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 4px; background: var(--surface); }
.actop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.accode { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--blue-tint); color: var(--blue-ink); font-weight: 700; font-size: var(--fs-14); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.accode.sm { font-size: 12px; padding: 1px 6px; margin-right: 8px; vertical-align: 1px; }
.acname { font-size: 18px; line-height: 1.25; }
.acgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.acf { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.acf.wide { grid-column: 1 / -1; }
.acic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-btn); color: #fff; }
.acic svg { width: 16px; height: 16px; }
.acav { flex: none; }
.acv { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.acv small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.acsrc { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .acgrid { grid-template-columns: 1fr; } }

/* Reports: the reports inside a tab (Customer Services: Service centre, Turnaround; Claims: Credits, Remakes, repairs & warranty) */
.rpviews { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.rpviews a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--grey-ink); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.rpviews a:hover { background: var(--row-hover); color: var(--ink); }
.rpviews a[aria-current="page"] { background: var(--blue-tint); border-color: transparent; color: var(--blue-ink); font-weight: 700; }
.rpviews a:focus-visible { outline-offset: 2px; }
@media (max-width: 640px) { .rpviews a { min-height: 44px; } }

/* Reports > Calls: the brand buttons above the By staff table */
.rpchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 8px; }