/* Direction C: dark sidebar with logo, light content, attention cards. Loaded after style.css by renderShell(). */
:root { --yellow: #f7ca16; --side: #1a2030; --side-text: #e6e9f0; --side-muted: #9aa4b5; --side-hover: rgba(255,255,255,.08); }

.app { display: block; }
.side {
  position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: 288px; max-width: 86vw; overflow-y: auto;
  background: var(--side); color: var(--side-text); padding: var(--s4) var(--s3) var(--s5);
  transform: translateX(-100%); transition: transform 150ms ease-out; display: flex; flex-direction: column;
}
.side.open { transform: none; box-shadow: var(--shadow-float); }
.scrim { position: fixed; inset: 0; background: rgba(26, 32, 48, .5); z-index: 55; display: none; }
.scrim.open { display: block; }
.side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side a {
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); min-height: 44px; border-radius: var(--r-control);
  color: var(--side-text); text-decoration: none; transition: background-color 150ms;
}
.side a:hover { background: var(--side-hover); color: #fff; }
.side a.active { background: var(--accent); color: #fff; font-weight: 700; }
.side a .label { flex: 1; }
.side .count { background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); text-align: center; }
.side a.active .count { background: #fff; color: var(--accent-hover); }
.side .grp { font-size: 13px; color: var(--side-muted); padding: var(--s4) var(--s3) var(--s1); }
.side .bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--s4); padding-top: var(--s3); }
.side .mobile-picker { padding: 0 var(--s3) var(--s3); }
.side .mobile-picker label { color: var(--side-muted); font-weight: 400; font-size: 13px; margin: 0 0 var(--s1); }
.side :focus-visible { outline-color: #fff; }

.protobar[hidden] { display: none; }
/* red banner in the logo red (so the white logo's own red badge blends in) with a thin yellow line from the logo's sun */
.topbar { background: var(--brand); border-bottom: 3px solid var(--yellow); color: #fff; }
.topbar .brand { color: #fff; gap: var(--s4); }
.topbar .brand img { height: 44px; width: auto; }
.topbar .brand .sep { height: 36px; }
@media (max-width: 399px) {
  .topbar .brand { gap: var(--s3); }
  .topbar .brand img { height: 36px; }
  .topbar .brand .sep, .topbar .brand .t2 { display: none; }
}
.topbar .brand .t2 { color: #fff; font-size: 13px; }
.topbar .brand .sep { background: rgba(255,255,255,.45); }
.topbar .burger { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.topbar .mainbar, .topbar .mainbar span { color: #fff; font-weight: 700; font-size: 15px; }
.topbar :focus-visible { outline-color: #fff; }
/* white banner across the top, as in the first version; dark sidebar below it */
.topbar { display: flex; min-height: 64px; }
.mainbar { display: none; }
.col { min-width: 0; }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 256px 1fr; align-items: start; }
  .side { position: sticky; top: 64px; height: calc(100vh - 64px); transform: none; width: auto; max-width: none; box-shadow: none; padding-top: var(--s5); }
  .side .mobile-picker { display: none; }
  .scrim { display: none !important; }
  .mainbar { display: flex; align-items: center; gap: var(--s4); font-size: 14px; color: var(--muted); }
  .mainbar select { min-height: 40px; max-width: 280px; font-size: 14px; }
  main { padding-top: var(--s5); margin: 0; max-width: 1200px; }
}

/* greeting banner */
.banner { background: var(--accent-tint); border: 1px solid #f6cfcf; border-radius: var(--r-card); padding: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; }
.banner h1 { margin: 0; }
.banner p { margin: var(--s1) 0 0; color: var(--muted); }
.banner .asat { font-size: 14px; color: var(--muted); }

/* attention cards ("current matters") */
.section-title { margin: var(--s6) 0 var(--s3); }
.cases { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 900px) { .cases { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.case { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.case .ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.case.alert .ico { background: var(--bad-bg); color: var(--bad); }
.case .txt { flex: 1; min-width: 180px; }
.case .name { font-weight: 700; display: block; line-height: 1.3; margin-bottom: var(--s1); }
.case .sub { display: block; font-size: 14px; color: var(--muted); margin-top: var(--s1); }
.case .btn { flex: none; }
@media (max-width: 599px) { .case .btn { width: 100%; } }

.recent .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.recent h2 { margin: 0; }

/* round 2: ageing, filters, definition grid, toolbars */
.ageing { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 700px) { .ageing { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 699px) { .ageing .cell.zero { display: none; } .stat .value.stmt-total { font-size: 24px; white-space: nowrap; } }
@media (min-width: 700px) and (max-width: 1199px) { .dt.stmt th:nth-child(4), .dt.stmt td:nth-child(4) { display: none; } .dt.stmt th, .dt.stmt td { padding-left: 8px; padding-right: 8px; font-size: 14px; } }
.ageing .cell { background: var(--bg); border-radius: var(--r-control); padding: var(--s3); }
.ageing .cell .label { color: var(--muted); font-size: 13px; }
.ageing .cell .amt { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.pagehead p { margin: 0; }
.filterbar { display: grid; grid-template-columns: 1fr; gap: 0 var(--s4); }
@media (min-width: 700px) { .filterbar { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; } }
.filterbar label { margin-top: var(--s3); }
.filters-d { margin-bottom: var(--s4); }
.filters-d > summary { list-style: none; cursor: pointer; }
.filters-d > summary::-webkit-details-marker { display: none; }
.filters-d[open] > summary { margin-bottom: var(--s3); }
@media (min-width: 900px) { .filters-d > summary { display: none; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); margin: 0; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 599px) { .actions .btn { width: 100%; } }
.totals { margin-top: var(--s4); margin-left: auto; max-width: 340px; }
.totals div { display: flex; justify-content: space-between; padding: var(--s1) 0; font-variant-numeric: tabular-nums; }
.totals .due { font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }
.paging { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s4); color: var(--muted); font-size: 14px; }

/* tables: keep numbers, dates and document numbers on one line; let long text wrap; scroll inside the card if still too wide */
.dt td { white-space: nowrap; }
.dt td[data-label="Description"], .dt td[data-label="Particulars"] { white-space: normal; min-width: 140px; }
.card:has(> .dt) { overflow-x: auto; }
@media (max-width: 699px) { .dt td { white-space: normal; } }
@media (min-width: 700px) and (max-width: 1499px) { .dt th, .dt td { padding-left: 8px; padding-right: 8px; } }
.dt td .wrap { white-space: normal; max-width: 220px; margin-top: 4px; }
@media (min-width: 700px) and (max-width: 1199px) { .dt.ship th:nth-child(2), .dt.ship td:nth-child(2) { display: none; } }

/* brand principal: bars and stat row */
.stats3 { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin: var(--s5) 0; }
@media (min-width: 900px) { .stats3 { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.bars { display: grid; gap: var(--s2); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 64px; align-items: center; gap: var(--s3); font-size: 14px; }
.bar-row .bl { color: var(--ink); }
.bar-row .bt { background: var(--bg); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-row .bf { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.bar-row .bv { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-row .bc { grid-column: 2 / 4; font-size: 13px; color: var(--muted); margin-top: -4px; }
@media (min-width: 700px) { .bar-row { grid-template-columns: 170px 1fr 72px 170px; } .bar-row .bc { grid-column: auto; margin-top: 0; text-align: right; } }
.up { color: var(--ok); } .down { color: var(--bad); }
.sharebar { display: inline-block; vertical-align: middle; width: 90px; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; margin-right: var(--s2); }
.sharebar > span { display: block; height: 100%; background: var(--accent); }

/* admin: view-as-dealer banner */
.viewas { background: var(--warn-bg); color: #5f3a00; border-bottom: 1px solid #e8cf8a; padding: var(--s2) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; font-size: 15px; }
.viewas .btn { min-height: 36px; flex: none; }
@media (min-width: 700px) and (max-width: 1499px) { .dt.adm th:nth-child(3), .dt.adm td:nth-child(3) { display: none; } }
/* Sign out is a POST form button, styled like the menu links */
.side .bottom form { margin: 0; }
.side .bottom button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s3); min-height: 44px; border-radius: var(--r-control); color: #e6e9f0; cursor: pointer; font: inherit; }
.side .bottom button:hover { background: var(--side-hover); color: #fff; }
.side .bottom button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Numbered item lines: a "No." column on laptops; on phones the number sits in front of the item name instead */
.lineno-m { display: none; }
@media (max-width: 699px) {
  .dt td[data-label="No."] { display: none; }
  .lineno-m { display: inline; color: var(--muted); font-weight: 400; margin-right: 6px; }
}
/* Payments table has six columns: tighten it between 900 and 1199px, where the sidebar leaves little room */
@media (min-width: 900px) and (max-width: 1199px) { .dt.pay th, .dt.pay td { font-size: 13px; padding-left: 6px; padding-right: 6px; } }
@media (min-width: 900px) and (max-width: 1199px) { .pay-card { padding: var(--s4); } }
.type-sub { display: none; }
/* Between 900 and 1199px there is no room for a separate Type column: the type sits under the document number instead */
@media (min-width: 900px) and (max-width: 1199px) {
  .dt.pay th:nth-child(2), .dt.pay td[data-label="Type"] { display: none; }
  .type-sub { display: block; font-size: 12px; color: var(--muted); }
}
/* Back button on detail pages: an outlined button with an arrow, easy to see and to tap */
.btn.back { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); padding-left: var(--s3); }

/* "Where did this payment go?" disclosure under the payments table */
details.where { border: 1px solid var(--line); border-radius: var(--r-control); margin-bottom: var(--s2); }
details.where > summary { cursor: pointer; padding: var(--s3); min-height: 44px; font-weight: 700; }
details.where[open] > summary { border-bottom: 1px solid var(--line); }
details.where > table { margin: 0; }
@media (min-width: 900px) and (max-width: 1199px) {
  details.where .dt th, details.where .dt td { font-size: 13px; padding-left: 6px; padding-right: 6px; }
  details.where td .badge { display: block; margin: 2px 0 0 !important; width: max-content; }
}

/* Forms inside action groups sit side by side like buttons */
.actions form { margin: 0; }
/* Admin dealer directory: eight columns. Between 700 and 1199px the salesperson, area and ERP status move under the dealer's name as one small line */
.dir-sub { display: none; }
@media (min-width: 700px) and (max-width: 1199px) {
  .dt.dir th:nth-child(3), .dt.dir th:nth-child(4), .dt.dir th:nth-child(5),
  .dt.dir td[data-label="Salesperson"], .dt.dir td[data-label="Area"], .dt.dir td[data-label="ERP"] { display: none; }
  .dir-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .dt.dir th, .dt.dir td { font-size: 13px; padding-left: 6px; padding-right: 6px; }
}
/* Wide admin tables stack like the phone layout up to 1199px, where the sidebar leaves too little room for a real table */
@media (min-width: 700px) and (max-width: 1199px) {
  .dt.stack-md, .dt.stack-md tbody, .dt.stack-md tfoot, .dt.stack-md tr, .dt.stack-md td { display: block; width: 100%; }
  .dt.stack-md thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt.stack-md tr { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .dt.stack-md td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: var(--s4); text-align: right; white-space: normal; }
  .dt.stack-md td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: none; }
  .dt.stack-md td.primary { font-size: 16px; font-weight: 700; text-align: left; justify-content: flex-start; }
  .dt.stack-md td.primary::before { content: none; }
}

/* Footer: fixed to the bottom of the window like the banner is fixed to the top, so it never follows the page height */
footer.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px var(--gutter); gap: 2px var(--s4);
}
.col { padding-bottom: 76px; }   /* room under the content so nothing hides behind the footer (a phone footer can take two lines) */
@media (min-width: 900px) {
  footer.foot { left: 256px; padding: 12px var(--s5); }   /* starts after the sidebar */
  .col { padding-bottom: 56px; }
}

/* Banner: "Dealer Portal" larger, "by cloudata.my" smaller (owner request, 2026-11-07) */
.topbar .brand .t1 { font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; }
.topbar .brand .t2 { font-size: 11px; opacity: .92; margin-top: 2px; }
@media (max-width: 599px) { .topbar .brand .t1 { font-size: 19px; } }

/* Footer: shorter, text on the left, the help line (dealers only) on the right */
footer.foot { justify-content: flex-start; text-align: left; align-items: center; padding: 6px var(--gutter); font-size: 12px; min-height: 32px; }
footer.foot span + span { margin-left: auto; }
.col { padding-bottom: 56px; }
@media (min-width: 900px) {
  footer.foot { padding: 6px var(--s5); }
  .col { padding-bottom: 48px; }
}
/* On a phone the help line drops to a second line, also on the left */
@media (max-width: 599px) { footer.foot span + span { margin-left: 0; flex-basis: 100%; } footer.foot { font-size: 11px; } }
/* Big money figures on the Home and Invoices cards stay on one line on a phone. */
@media (max-width: 599px) { .stats .stat .value { font-size: 28px; white-space: nowrap; } }
/* A total row under a table: a strong line above it so the totals stand out from the items. */
.dt tfoot .sumrow td { border-top: 2px solid var(--ink); font-size: 15px; }
@media (max-width: 699px) { .dt tfoot .sumrow { border-top: 2px solid var(--ink); border-bottom: 0; } .dt tfoot .sumrow td { border-top: 0; } }
/* Invoice list: what is still owed is bold, and red when it is past due; nothing owed fades back. */
.dt td.owe { font-weight: 700; }
.dt td.owe.over { color: var(--bad); }
.dt td.owe-none { color: var(--muted); }
/* A centred column (the invoice list's Status) on laptop and tablet; on a phone the rows are stacked and keep their own layout. */
@media (min-width: 700px) { .dt th.ctr, .dt td.ctr { text-align: center; } }
/* Purchases and promos: period pills, the checklist toggle and the per-document lists. */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.pill:hover { border-color: var(--ink); }
.pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.check-d > summary { list-style: none; cursor: pointer; display: inline-block; }
.check-d > summary::-webkit-details-marker { display: none; }
.dt td.tick { width: 44px; }
.dt td.tick input { width: 20px; height: 20px; }
.doc-d { margin-bottom: var(--s3); }
.doc-d > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); cursor: pointer; list-style: none; }
.doc-d > summary::-webkit-details-marker { display: none; }
.doc-d > summary .primary { font-weight: 700; }
.doc-d > summary .num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { .dt td.tick { display: flex; justify-content: flex-start; } }
/* Purchase Lookup: totals of the ticked models, and invoice rows that look like something to open. */
.ticksum { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); background: var(--info-bg); border: 1px solid #cfe1fd; border-radius: var(--r-card); padding: var(--s3) var(--s4); margin: 0 0 var(--s3); }
.ticksum .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: #163f80; }
.ticksum .c { font-size: 13px; color: var(--muted); }
.doc-d > summary { padding: 2px 0; }
.doc-d > summary:hover { background: var(--bg); }
.doc-d > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--r-control); }
.doc-d .doc-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--accent, #a4231a); font-weight: 600; font-size: 14px; }
.doc-d .doc-toggle svg { transition: transform .15s ease; }
.doc-d[open] .doc-toggle svg { transform: rotate(180deg); }
.doc-d .when-open { display: none; }
.doc-d[open] .when-open { display: inline; }
.doc-d[open] .when-closed { display: none; }
.doc-d > summary .num { margin-left: auto; }

/* Brand: two filters side by side (also on a phone), and the shaded models-by-region table */
.filterbar.pair { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .filterbar.pair { grid-template-columns: 1fr 1fr; } }
.heatgrid th a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.heatgrid th a:hover { text-decoration: underline; }
.heatgrid td.heat { font-variant-numeric: tabular-nums; }
.heatgrid td.primary a { color: inherit; text-decoration: none; font-weight: 600; }
.heatgrid td.primary a:hover { text-decoration: underline; }

/* Model coverage: one wide bar under the headline sentence */
.covbar { background: var(--bg); border-radius: 8px; height: 14px; overflow: hidden; margin: 12px 0; }
.covbar > span { display: block; height: 100%; background: var(--accent); }

/* A small "Details" pill beside a name that opens a page, so new users can see it is clickable */
.chip { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; vertical-align: 1px; }
a:hover .chip, a:focus-visible .chip { border-color: var(--ink); }

/* Centred number columns keep their digits lined up */
.dt td.ctr { font-variant-numeric: tabular-nums; }

/* Loading feedback (busy.js): a bar along the top, a small note, and the page dimmed and not clickable until the next page arrives */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--accent); animation: progress-run 1s linear infinite; }
@keyframes progress-run { to { left: 100%; } }
.busy-pill { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; padding: 16px 26px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transition: opacity .15s; pointer-events: none; }.busy-pill::before { content: ""; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: busy-spin .8s linear infinite; }@keyframes busy-spin { to { transform: rotate(360deg); } }
body.busy .progress, body.busy .busy-pill { opacity: 1; }
body.busy #main { opacity: .35; pointer-events: none; transition: opacity .2s; }
body.busy { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .progress::before { animation: none; left: 0; width: 100%; opacity: .6; } .busy-pill::before { animation: none; } }

/* Rows hidden by the search box must stay hidden in the phone card layout too; group headings above columns */
.dt tr[hidden] { display: none !important; }
.dt th.grp { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line); }

/* Coverage tables: the columns about the picked model (g1) and about the whole brand (g2) are tinted differently and split by a line, so they are easy to tell apart */
.dt th.g1, .dt td.g1 { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dt th.g2, .dt td.g2 { background: rgba(20, 30, 50, .045); }
.dt th.grp.g1, .dt th.grp.g2 { border-bottom: 3px solid var(--accent); }
.dt th.grp.g2 { border-bottom-color: var(--ink); }
@media (min-width: 700px) { .dt th.gfirst, .dt td.gfirst { border-left: 2px solid var(--line); } }
/* A region that cannot be changed (a login tagged with one region) looks like the picker but is plain text */
.lbl { display: block; font-weight: 600; margin-bottom: 4px; }
.fixedval { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-weight: 600; }

/* The row of the region being shown, in the regions-side-by-side table */
.dt tr.here td { background: var(--accent-tint); }
@media (max-width: 699px) { .dt tr.here { background: var(--accent-tint); } }

/* Date boxes written out in words (datepick.js): the real date box is laid invisibly over a read-only text box that shows the words. */
.datepick { position: relative; display: block; }
.datepick .dp-view { display: block; width: 100%; pointer-events: none; padding-right: 44px; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23525a6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.datepick input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.datepick:focus-within .dp-view { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Home: Needs Your Attention as one grouped list (replaces the cards): thin rows under Act Now and Your Orders. */
.attn { padding: 0; overflow: hidden; }
.attn .grp { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--bg); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.attn .grp:not(:first-child) { border-top: 1px solid var(--line); }
.attn .arow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.attn .arow:last-child, .attn .orow:last-child { border-bottom: 0; }
.attn .ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-control); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.attn .ico.bad { background: var(--bad-bg); color: var(--bad); }
.attn .ico.warn { background: var(--warn-bg); color: var(--warn); }
.attn .ico.ok { background: var(--ok-bg); color: var(--ok); }
.attn .txt { flex: 1; min-width: 200px; }
.attn .name { display: block; font-weight: 700; line-height: 1.3; }
.attn .name .badge { margin-left: var(--s2); vertical-align: 1px; }
.attn .sub { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.attn .orow { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4) var(--s2) calc(var(--s4) + 36px + var(--s3)); border-bottom: 1px solid var(--line); font-size: 14px; }
.attn .orow .badge { margin: 0 var(--s1); }
.attn .obar { display: flex; height: 8px; max-width: 420px; gap: 2px; margin: var(--s2) 0 var(--s1); border-radius: 4px; overflow: hidden; }
.attn .seg { display: block; height: 100%; }
.attn .seg.prep, .attn .dot.prep { background: var(--info); }
.attn .seg.rev, .attn .dot.rev { background: #b7791f; }
.attn .seg.rec, .attn .dot.rec { background: var(--field); }
.attn .legend { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: 13px; color: var(--muted); }
.attn .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
@media (max-width: 520px) { .attn .orow { padding-left: var(--s4); } .attn .arow .btn { margin-left: calc(36px + var(--s3)); } }