/* VectorERP UK demo. Same look as the main demo: white enamel, copper, the LCD. Colours come from css/vx.css. */
:root { --vx-accent: #B4531D; --vx-tint: rgba(236, 124, 60, .13); --uk-grad: linear-gradient(180deg, #F8FAFC, #E9EFF4); --vx-ink: #0F2235; --vx-mute: #55697C; --vx-card: #fff; --vx-soft: #F3F6F9; }
html[data-theme="dark"] { --vx-accent: #F5A877; --vx-tint: rgba(236, 124, 60, .16); --uk-grad: linear-gradient(180deg, #0B1620, #0B1620); --vx-ink: #EAF1F8; --vx-mute: #A6B6C6; --vx-faint: #8797A8; --vx-card: #131F2C; --vx-soft: #1B2A3A; --vx-line: rgba(226, 238, 248, .13); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--uk-grad) fixed; color: var(--vx-ink); font-family: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 16px; background: #0B1620; color: #C4D2DE; font-size: .84rem; text-align: center; }
.bar b { color: #fff; }
.bar a { padding: 3px 13px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bar a:hover { background: rgba(255, 255, 255, .12); }
.bar a.talk { background: #0B8043; border-color: #0B8043; }
.bar .vx-theme { width: 30px; height: 30px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.tabs { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 0 clamp(14px, 3vw, 32px); background: var(--vx-card); border-bottom: 1px solid var(--vx-line); }
.brand { font-weight: 800; white-space: nowrap; }
.brand em { font-style: normal; color: #DC7537; }
.tabrow { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabrow::-webkit-scrollbar { display: none; }
.tabrow a { padding: 15px 12px; border-bottom: 2px solid transparent; color: var(--vx-mute); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.tabrow a:hover { color: var(--vx-ink); }
.tabrow a.on { color: var(--vx-ink); border-bottom-color: #EC7C3C; font-weight: 700; }
.co { text-align: right; white-space: nowrap; line-height: 1.25; }
.co b { display: block; font-size: .88rem; }
.co small { color: var(--vx-mute); font-size: .7rem; }
.page { max-width: 1240px; margin: 0 auto; padding: clamp(14px, 2.5vw, 28px) clamp(14px, 3vw, 32px) 60px; }
.card { display: block; padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--vx-line); border-radius: 18px; background: var(--vx-card); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(16, 36, 56, .05), 0 10px 26px -14px rgba(16, 36, 56, .22); }
.card h2, .kan h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; }
.dash { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.dash .card { margin: 0; }
.main { grid-row: span 1; }
.side { display: grid; gap: 10px; }
.mini { padding: 14px 16px; margin: 0; transition: transform .15s; }
a.mini:hover { transform: translateY(-2px); }
.mini b { display: block; font-size: 1.35rem; font-weight: 700; }
.mini small { color: var(--vx-mute); font-size: .78rem; font-weight: 600; }
small.good { color: var(--vx-ok); } small.bad { color: #CF3434; }
html[data-theme="dark"] small.bad { color: #FF9D9D; }
.live { grid-column: 1 / -1; }
.live .vx-feed { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hint { margin: 6px 0 0; color: var(--vx-mute); font-size: .82rem; }
.hint.top { margin: -6px 0 12px; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.head h2 { margin: 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
table.wide { min-width: 820px; }
th { padding: 8px 10px; border-bottom: 1px solid var(--vx-line); color: var(--vx-mute); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--vx-line); font-size: .92rem; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--vx-soft); }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.act { text-align: right; white-space: nowrap; }
.lnk { color: var(--vx-accent); font-weight: 600; text-decoration: none; }
.grp td { padding-top: 16px; color: var(--vx-accent); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sum td { border-top: 2px solid var(--vx-ink); font-weight: 800; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pill.paid { background: #DCF5E7; color: #14713F; } .pill.due { background: #FFF0D9; color: #925E10; } .pill.overdue { background: #FDE3E3; color: #B32222; }
html[data-theme="dark"] .pill.paid { background: rgba(95, 215, 155, .16); color: #5FD79B; }
html[data-theme="dark"] .pill.due { background: rgba(240, 184, 90, .16); color: #F0B85A; }
html[data-theme="dark"] .pill.overdue { background: rgba(255, 143, 143, .15); color: #FF9D9D; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 11px; background: linear-gradient(180deg, #F8A56E, #EC7C3C 55%, #DC7537); color: #2A1204; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sm { padding: 6px 12px; font-size: .8rem; margin-left: 6px; }
.btn.ghost { background: var(--vx-card); color: var(--vx-ink); border: 1px solid var(--vx-line); }
.btn.wide { flex: 1; }
.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.toast { margin: 0 0 12px; padding: 11px 15px; border: 1px solid rgba(20, 113, 63, .3); border-radius: 12px; background: var(--vx-ok-t); color: var(--vx-ok); font-weight: 600; }
.toast.warn { background: var(--vx-warn-t); color: var(--vx-warn); border-color: rgba(180, 83, 29, .3); }
.form label { display: block; margin-bottom: 12px; font-size: .8rem; font-weight: 700; color: var(--vx-mute); }
.form input, .form select { display: block; width: 100%; min-width: 80px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-soft); color: var(--vx-ink); font: inherit; font-weight: 400; }
.form input.num { text-align: right; }
.form td { border: 0; padding: 4px 6px 4px 0; }
.till { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { padding: 14px; border: 1px solid var(--vx-line); border-radius: 16px; background: var(--vx-card); color: var(--vx-ink); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, border-color .12s; }
.item:hover { transform: translateY(-2px); border-color: #EC7C3C; }
.item:active { transform: scale(.97); }
.item b { display: block; font-weight: 600; line-height: 1.25; }
.item span { display: block; margin-top: 8px; font-size: 1.1rem; font-weight: 700; }
.item small { color: var(--vx-mute); font-size: .74rem; }
.cart { list-style: none; margin: 0 0 12px; padding: 0; min-height: 120px; }
.cart li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vx-line); font-size: .92rem; }
.cart li.muted { color: var(--vx-mute); border: 0; }
.kan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kan h2 small { color: var(--vx-mute); font-size: .82rem; font-weight: 500; }
.kan .mini { margin-bottom: 10px; }
.party { font-size: 1rem !important; font-weight: 600 !important; }
.amt { display: block; margin-top: 6px; font-weight: 700; color: var(--vx-accent); }
.eq { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.eq .mini { flex: 1; min-width: 150px; }
.eq > span { font-size: 1.4rem; font-weight: 800; color: var(--vx-mute); }
.profit { background: var(--vx-ok-t); }
.profit b { color: var(--vx-ok); }
@media (max-width: 900px) {
  .dash, .till, .kan { grid-template-columns: minmax(0, 1fr); }
  .co { display: none; }
}

/* ---------- workable things (7 Nov 2026): checklist, aged debtors, statement, day close, book-in ---------- */
.todo { grid-column: 1 / -1; }
.todo ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; counter-reset: s; }
.todo li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 42px; border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-soft); font-weight: 600; font-size: .9rem; }
.todo li::before { counter-increment: s; content: counter(s); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--vx-card); border: 1px solid var(--vx-line); color: var(--vx-mute); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }
.todo li.ok::before { content: "✓"; background: var(--vx-ok); border-color: var(--vx-ok); color: #fff; }
.todo li.ok { opacity: .72; }
.todo li.ok a { text-decoration: line-through; }
.todo li a { color: inherit; text-decoration: none; }
.todo li:hover { border-color: #EC7C3C; }
.prog { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--vx-mute); font-weight: 600; }
.prog b { color: var(--vx-ink); font-size: 1.05rem; }
.prog i { width: 120px; height: 8px; border-radius: 99px; background: var(--vx-soft); border: 1px solid var(--vx-line); overflow: hidden; }
.prog i::after { content: ""; display: block; width: var(--w, 0%); height: 100%; background: linear-gradient(90deg, #F8A56E, #DC7537); transition: width .4s; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two > .card { margin: 0; }
.two h3 { margin: 0 0 8px; font-size: .95rem; }
.age { list-style: none; margin: 0; padding: 0; }
.age li { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vx-line); font-size: .9rem; }
.age li:last-child { border-bottom: 0; }
.age i { height: 12px; border-radius: 99px; background: var(--vx-soft); overflow: hidden; }
.age i::after { content: ""; display: block; width: var(--w, 0%); height: 100%; background: linear-gradient(90deg, #F8A56E, #DC7537); }
.age li:nth-child(3) i::after, .age li:nth-child(4) i::after { background: linear-gradient(90deg, #F08A8A, #CF3434); }
.age b { text-align: right; font-variant-numeric: tabular-nums; }
.lnk.plain { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--vx-line); text-underline-offset: 3px; }
.lnk.plain:hover { color: var(--vx-accent); }
.muted { color: var(--vx-mute); font-size: .82rem; }
.row.top0 { margin-top: 0; }
.statement .head { align-items: flex-start; }
.statement .head h2 { font-size: 1.5rem; margin: 2px 0; }
.owing { background: var(--vx-warn-t); }
.owing b { color: var(--vx-warn); }
.daylink { margin-top: 10px; width: 100%; }
.changed td { background: var(--vx-ok-t); }
.faded { opacity: .6; }
.kan .mini .btn.sm { margin: 10px 0 0; }
.stockgrid { grid-template-columns: 1.6fr 1fr; align-items: start; }
.form .btn { margin-top: 4px; }
@media (max-width: 900px) { .two, .stockgrid { grid-template-columns: 1fr; } .age li { grid-template-columns: 1fr 80px; } .age i { grid-column: 1 / -1; } }
@media print { .bar, .tabs, .btn, .hint, .toast, .vx-theme { display: none !important; } body { background: #fff; } .page { padding: 0; } .card { box-shadow: none; border: 0; } }