/* EPOS AI SERVICE COLOURS (owner, 27 Sep 2026).
 *
 * One place for the colour of every service, the same as its key on the till:
 * Lotto purple, Oyster TfL blue, PayPoint yellow, PayZone pink, Transport
 * slate. Loaded by every screen that shows the services flow - Back Office
 * (Yesterday box, Daily Close, day report, the service detail, Today), the
 * phone page the QR code opens, the stock machine's Daily Close and the till's
 * End of Day - so they can never drift apart.
 *
 * Tag anything with data-svc="<PROVIDER>" (Daily Close rows already carry
 * data-cmprov). Then:
 *   .svx-row   a stripe down the left and a light wash of the colour
 *   .svx-top   a stripe across the top (a panel or a popup)
 *   .svx-mark  the square badge (L, O, PP, PZ, T), an empty element
 * Put .svc-dark on a dark page (or its body) to lift the deep colours.
 */
[data-svc], tr[data-cmprov] { --svc: #64748B; --svc-ink: #FFFFFF; }
[data-svc="LOTTO"], tr[data-cmprov="LOTTO"], [data-svc="SCRATCH_BACKS"], tr[data-cmprov="SCRATCH_BACKS"] { --svc: #5C2D91; }
[data-svc="OYSTER"], tr[data-cmprov="OYSTER"] { --svc: #0019A8; }
[data-svc="PAYPOINT"], tr[data-cmprov="PAYPOINT"] { --svc: #FFCC00; --svc-ink: #1A1A1A; }
[data-svc="PAYZONE"], tr[data-cmprov="PAYZONE"] { --svc: #E5007D; }
[data-svc="TRANSPORT_OTHER"], tr[data-cmprov="TRANSPORT_OTHER"] { --svc: #475569; }
[data-svc="OTHER"], [data-svc="MISC"] { --svc: #DC2626; }
[data-svc="PAPER_ROUND"] { --svc: #0D9488; }

.svc-dark [data-svc="LOTTO"], .svc-dark tr[data-cmprov="LOTTO"], .svc-dark [data-svc="SCRATCH_BACKS"], .svc-dark tr[data-cmprov="SCRATCH_BACKS"],
[data-svc="LOTTO"].svc-dark, [data-svc="SCRATCH_BACKS"].svc-dark { --svc: #8B5CD6; }
.svc-dark [data-svc="OYSTER"], .svc-dark tr[data-cmprov="OYSTER"], [data-svc="OYSTER"].svc-dark { --svc: #3D5BFF; }
.svc-dark [data-svc="TRANSPORT_OTHER"], .svc-dark tr[data-cmprov="TRANSPORT_OTHER"], [data-svc="TRANSPORT_OTHER"].svc-dark { --svc: #7C8DA6; }

.svx-row {
  box-shadow: inset 4px 0 0 var(--svc);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--svc) 11%, transparent) 0%, color-mix(in srgb, var(--svc) 3%, transparent) 42%, transparent 70%);
}
.svx-top { box-shadow: inset 0 4px 0 var(--svc); }

.svx-mark {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px; margin-right: 9px; vertical-align: middle;
  background: var(--svc); color: var(--svc-ink);
  font: 800 10px/1 'Barlow', system-ui, 'Segoe UI', Arial, sans-serif; letter-spacing: .02em;
}
.svx-mark::before { content: "\2022"; }
[data-svc="LOTTO"] .svx-mark::before, tr[data-cmprov="LOTTO"] .svx-mark::before, .svx-mark[data-svc="LOTTO"]::before { content: "L"; }
[data-svc="SCRATCH_BACKS"] .svx-mark::before, tr[data-cmprov="SCRATCH_BACKS"] .svx-mark::before, .svx-mark[data-svc="SCRATCH_BACKS"]::before { content: "SC"; }
[data-svc="OYSTER"] .svx-mark::before, tr[data-cmprov="OYSTER"] .svx-mark::before, .svx-mark[data-svc="OYSTER"]::before { content: "O"; }
[data-svc="PAYPOINT"] .svx-mark::before, tr[data-cmprov="PAYPOINT"] .svx-mark::before, .svx-mark[data-svc="PAYPOINT"]::before { content: "PP"; }
[data-svc="PAYZONE"] .svx-mark::before, tr[data-cmprov="PAYZONE"] .svx-mark::before, .svx-mark[data-svc="PAYZONE"]::before { content: "PZ"; }
[data-svc="TRANSPORT_OTHER"] .svx-mark::before, tr[data-cmprov="TRANSPORT_OTHER"] .svx-mark::before, .svx-mark[data-svc="TRANSPORT_OTHER"]::before { content: "T"; }
[data-svc="OTHER"] .svx-mark::before, [data-svc="MISC"] .svx-mark::before { content: "M"; }
[data-svc="PAPER_ROUND"] .svx-mark::before { content: "PR"; }
.svx-mark.sm { width: 18px; height: 18px; font-size: 8px; margin-right: 7px; }