/* Whitmore label platform — accounts + dashboard.
   Self-contained house style (Whitmore/OilSafe blue, clean industrial-modern).
   Used by login.html, register.html, account.html. */
:root {
  --brand: #0a72bd;
  --brand-dark: #075a96;
  --brand-darker: #064a7c;
  --ink: #11202e;
  --muted: #5b6b78;
  --line: #e3e9ef;
  --bg: #eef2f6;
  --surface: #ffffff;
  --go: #1f9d57;
  --go-dark: #178048;
  --gold: #f3a712;
  --danger: #c8442f;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(16,32,46,.06), 0 8px 24px rgba(16,32,46,.08);
  --shadow-sm: 0 1px 2px rgba(16,32,46,.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 0 22px; height: 60px;
  box-shadow: var(--shadow-sm);
}
.brand-lockup { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; color: var(--ink); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(150deg, var(--brand), var(--brand-darker));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 2px 6px rgba(10,114,189,.35);
}
.brand-lockup small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.topbar .spacer { flex: 1; }
.topbar a.nav { color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.topbar a.nav:hover { color: var(--ink); background: var(--bg); text-decoration: none; }

/* ---- Responsive top bar -------------------------------------------------
   Shared by account / cart / admin / manage / sheet. It was a fixed-height
   single row with no breakpoints, so on a phone the brand wrapped mid-word
   ("OilSafe |" / "Hydrotex"), the nav items broke across lines, and the cart
   + account chip were pushed off the right edge (Timo 2026-08-06).
   Desktop is unchanged — the base rule only lets the bar grow if it ever
   wraps; everything else is inside a media query. */
.topbar { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 6px; }
.brand-lockup, .topbar a.nav, .account-chip { white-space: nowrap; }

@media (max-width: 900px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .topbar a.nav { padding: 8px 7px; }
}
/* Tablet: the second brand line is decoration — drop it before anything
   functional, and pull the type down a notch. */
@media (max-width: 700px) {
  .topbar { gap: 8px; padding: 0 12px; min-height: 54px; }
  .brand-lockup { font-size: 15px; gap: 8px; }
  .brand-lockup small { display: none; }
  .brand-mark { width: 27px; height: 27px; font-size: 13px; }
  .topbar a.nav { font-size: 13px; padding: 7px 6px; }
}
/* Phone: keep the "W" mark as the home link but drop the wordmark and the
   account name. That frees ~140px, which is what keeps the nav, cart and
   avatar on one reachable row at 390px. */
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 0 10px; }
  .brand-lockup > span:not(.brand-mark) { display: none; }
  .topbar a.nav { font-size: 12.5px; padding: 6px 5px; }
  .account-chip { padding: 4px; border: none; }
  .account-chip .who, .account-chip .acct-name { display: none; }
  /* Admin is staff-only — collapse it to its gear so the customer-facing
     items all fit one row. */
  #adminLink { font-size: 0; padding: 6px 4px; }
  #adminLink::before { content: "⚙"; font-size: 15px; }
}
.account-chip {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font: inherit;
}
.account-chip:hover { border-color: #cdd8e2; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(150deg,var(--brand),var(--brand-darker));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.account-chip .who { font-size: 13px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-cart-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 700; }
.wm-cart-link:hover { background: var(--brand-dark); text-decoration: none; }
.wm-cart-ico { display: block; flex: 0 0 auto; }
.wm-cart-count { background: rgba(255,255,255,.24); border-radius: 999px; padding: 0 7px; font-size: 12px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 10px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .12s;
  background: var(--brand); color: #fff; white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.full { width: 100%; }
.btn.go { background: var(--go); } .btn.go:hover { background: var(--go-dark); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--bg); border-color: #cdd8e2; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 7px; }
.btn.link { background: none; color: var(--brand); border: none; padding: 6px; }
.btn.link:hover { text-decoration: underline; }

/* ---------- auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-aside {
  background: linear-gradient(155deg, var(--brand-dark), var(--brand-darker) 70%, #053a63);
  color: #fff; padding: 56px 56px; display: flex; flex-direction: column; gap: 26px;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; inset: auto -120px -160px auto; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 65%);
}
.auth-aside .brand-lockup { color: #fff; }
.auth-aside .brand-lockup small { color: rgba(255,255,255,.7); }

/* Sign-in / register brand lockup — Katie (2026-08-14): "make the OilSafe |
   Hydrotex logos larger to fill in the space", then "change the logo to the one
   attached and make the Label Wizard text larger".
   It started as the same small "W" tile + text as the top ribbon, which looked
   lost against the full-height panel. Katie then supplied a proper WHITE
   OilSafe | Hydrotex lockup, so the artwork now sits straight on the dark panel
   and the white plate that earlier held the dark-artwork logos is gone. */
.auth-brands { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.auth-brand-logo {
  display: block; width: min(430px, 100%); height: auto;
  /* The supplied PNG carries a little transparent padding of its own, so size
     by width and let the height follow rather than fighting it. */
}
.auth-brand-sub {
  font-size: 21px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
@media (max-width: 1100px) {
  .auth-brand-logo { width: min(340px, 100%); }
  .auth-brand-sub { font-size: 18px; }
}
.auth-aside h1 { font-size: 34px; line-height: 1.18; max-width: 14ch; }
.auth-aside p { color: rgba(255,255,255,.82); font-size: 15.5px; max-width: 42ch; }
.auth-points { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: rgba(255,255,255,.92); }
.auth-points .tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: grid; place-items: center; font-size: 12px; }
/* Instructional-video callout on the sign-in panel (Stacie, 2026-09-02). Same
   translucent treatment as the tick badges, so it reads as part of the panel
   rather than a bolted-on ad. Hidden with the whole aside on narrow screens. */
.auth-video { margin: 26px 0 0; padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); max-width: 42ch; }
.auth-video p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); }
.auth-video-link { display: inline-flex; align-items: center; gap: 9px; color: #fff;
  font-size: 14.5px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px; }
.auth-video-link:hover { border-bottom-color: #fff; }
.auth-video-play { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 9px;
  padding-left: 2px; border-bottom: 0; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 25px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 26px; font-size: 14.5px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; background: #fff; transition: .12s;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10,114,189,.14); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-msg { font-size: 13.5px; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; display: none; }
.form-msg.err { display: block; background: #fdecea; color: var(--danger); border: 1px solid #f4c7bf; }
.form-msg.ok { display: block; background: #e9f7ef; color: var(--go-dark); border: 1px solid #bfe6cf; }
.auth-foot { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- dashboard ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 30px 22px 80px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.dash-head h1 { font-size: 26px; }
.dash-head .sub { color: var(--muted); margin-top: 4px; font-size: 14.5px; }
.toolbar { display: flex; gap: 12px; align-items: center; margin: 22px 0 18px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 220px; }
.search input {
  width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 14.5px; background: #fff;
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10,114,189,.12); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.count-pill { font-size: 13px; color: var(--muted); font-weight: 600; }

.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.order-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: .14s;
}
.order-card:hover { box-shadow: var(--shadow); border-color: #d4dee7; transform: translateY(-1px); }
.oc-top { padding: 15px 16px 12px; display: flex; gap: 12px; align-items: flex-start; }
.swatch { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px #fff; }
.oc-top .meta { min-width: 0; }
.oc-title { font-weight: 700; font-size: 15px; line-height: 1.3; word-break: break-word; }
.oc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 16px 12px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.chip.pa { background: #e8f1fa; color: var(--brand-dark); }
.chip.legacy { background: #fff4e0; color: #9a6b09; }
.chip.submitted { background: #e9f7ef; color: var(--go-dark); }
.oc-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fbfcfd; }
.oc-actions .btn { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
/* Primary "Reorder as-is" takes its own full-width row so the longer labels fit the 3-up grid. */
.oc-actions .btn.go { flex-basis: 100%; }
.oc-actions .btn.icon { flex: 0 0 auto; }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.loadmore { text-align: center; margin: 26px 0; }
.skeleton { height: 168px; border-radius: var(--r); background: linear-gradient(100deg,#eef2f6 30%,#f6f9fb 50%,#eef2f6 70%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(16,32,46,.5); display: none; place-items: center; z-index: 100; padding: 20px; }
.modal-back.open { display: grid; }
.modal { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); width: 100%; max-width: 460px; overflow: hidden; }
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #fbfcfd; }
.x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }

/* ---------- dropdown menu ---------- */
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); min-width: 200px; padding: 6px; display: none; }
.menu.open .menu-pop { display: block; }
.menu-pop .mi { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 7px; font: inherit; font-size: 14px;
  background: none; border: none; cursor: pointer; color: var(--ink); }
.menu-pop .mi:hover { background: var(--bg); text-decoration: none; }
.menu-pop .who-full { padding: 9px 11px 4px; font-size: 12px; color: var(--muted); }
.menu-pop hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); z-index: 200; transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- cart / checkout ---------- */
.cart-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 22px; }
.cart-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.cart-item .swatch { width: 34px; height: 34px; border-radius: 8px; }
.cart-item .ci-main { min-width: 0; }
.cart-item .ci-title { font-weight: 700; font-size: 15px; word-break: break-word; }
.cart-item .ci-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.cart-item .ci-ro { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-item .ci-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.iconbtn {
  appearance: none; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.iconbtn:hover { border-color: var(--brand); color: var(--brand-dark); }
.iconbtn.save { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint, #eef4fb); }
.iconbtn.save:hover { background: var(--brand); color: #fff; }
.iconbtn:disabled { opacity: .6; cursor: default; }
.iconbtn.danger:hover { border-color: var(--danger); color: var(--danger); }
.sheets-pill { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* On narrow screens the (now wider) action buttons would crowd the title to one
   character per line — drop them onto their own full-width row below the label. */
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 40px 1fr; }
  .cart-item .ci-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.cart-checkout {
  display: flex; gap: 20px 24px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.cart-checkout .cart-name { flex: 1; min-width: 240px; margin: 0; }
.cart-checkout .opt { color: var(--muted); font-weight: 400; }
.cart-checkout .dl-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.btn.dl-all { padding: 12px 22px; font-size: 15px; white-space: nowrap; }
.cart-checkout .dl-note { font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; max-width: 230px; }

.send-panel {
  margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 20px; background: #fbfcfd;
}
.send-panel h4 { margin: 0 0 4px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.send-panel .send-lead { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.send-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.send-opt { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.send-opt-h { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--ink); }
.send-opt p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.send-opt a { font-weight: 600; }
/* Per-brand order addresses (Stacie, 2026-08-17): OilSafe and Hydrotex go to
   different inboxes, so they are listed rather than run into the sentence.
   The label sits on its own line and the address below it: the panel is a
   two-column grid, and inline they wrapped mid-address ("htl-" / the rest). */
.send-emails { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.send-emails li { font-size: 13px; line-height: 1.45; }
.send-emails li span { display: block; color: var(--muted); }
.send-emails li a { overflow-wrap: anywhere; }
@media (max-width: 640px) { .send-opts { grid-template-columns: 1fr; } }
.send-panel p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.send-panel .addr { font-weight: 600; color: var(--muted); }
.send-panel .muted { color: var(--muted); font-size: 12.5px; }
.tbd { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); background: #fdf0d8; border-radius: 5px; padding: 2px 7px; }

.done-card { text-align: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 40px 24px; max-width: 520px; margin: 10px auto; }
.done-card .big { width: 54px; height: 54px; border-radius: 50%; background: #e9f7ef; color: var(--go);
  display: grid; place-items: center; font-size: 26px; margin: 0 auto 14px; }
.done-card h2 { font-size: 21px; margin-bottom: 6px; }
.done-card p { color: var(--muted); margin: 0 0 18px; }
.done-card .ref { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.done-card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- dashboard tabs + batches + multiselect ---------- */
.tabs { display: inline-flex; gap: 4px; background: #e7edf3; padding: 4px; border-radius: 10px; margin: 18px 0 4px; }
.tab { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
  padding: 8px 16px; border-radius: 7px; cursor: pointer; }
.tab.on { background: #fff; color: var(--brand-dark); box-shadow: var(--shadow-sm); }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 18px; }
.filters .search { flex: 1; }
.filters .datepick { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.filters .datepick input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 13.5px; background: #fff; }

.batch-list { display: flex; flex-direction: column; gap: 12px; }
.batch-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 18px; box-shadow: var(--shadow-sm); transition: .14s;
}
.batch-card:hover { box-shadow: var(--shadow); border-color: #d4dee7; }
.thumbstrip { display: flex; }
.thumbstrip i { width: 30px; height: 30px; border-radius: 7px; border: 2px solid #fff; margin-left: -8px;
  box-shadow: 0 1px 3px rgba(16,32,46,.16); display: block; }
.thumbstrip i:first-child { margin-left: 0; }
.thumbstrip .more { width: 30px; height: 30px; border-radius: 7px; margin-left: -8px; background: var(--bg);
  border: 2px solid #fff; font-size: 10.5px; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.bc-name { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bc-name.untitled { color: var(--muted); }
.bc-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: flex; gap: 9px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.bc-actions { display: flex; gap: 8px; }
.rename-btn { background: none; border: 0; color: var(--brand); font: inherit; font-size: 12px; cursor: pointer;
  text-decoration: underline dotted; padding: 0; }
.batch-items { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bi-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bi-row .bi-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bi-row .ci-ro { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.selbar { position: sticky; top: 70px; z-index: 30; display: flex; align-items: center; gap: 14px;
  background: var(--brand-dark); color: #fff; border-radius: 10px; padding: 10px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow); }
.selbar .n { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.selbar .btn { margin-left: auto; }
.selbar .btn.white { background: #fff; color: var(--brand-dark); }
.selbar .btn.white:hover { background: #eef4fa; }
.selbar .btn.clear { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.order-card.selectable { cursor: pointer; }
.order-card.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.oc-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; color: #fff; font-size: 13px; }
.order-card { position: relative; }
.order-card.sel .oc-check { background: var(--brand); border-color: var(--brand); }

@media (max-width: 820px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .batch-card { grid-template-columns: 1fr; }
  .batch-card .bc-actions { justify-content: flex-start; }
}

/* ---- delete / remove affordances ---- */
.btn.danger { background: var(--danger, #d5202b); color: #fff; border-color: transparent; }
.btn.danger:hover { background: #b01822; }
.oc-actions .oc-del, .bc-actions .bc-del { flex: 0 0 auto; color: var(--muted); }
.oc-actions .oc-del:hover, .bc-actions .bc-del:hover {
  color: var(--danger, #d5202b); border-color: var(--danger, #d5202b); background: #fff;
}
/* Job-delete dialog (offers delete-with-labels OR just-ungroup) */
.job-del-back { position: fixed; inset: 0; background: rgba(20,28,38,.45);
  display: grid; place-items: center; z-index: 200; }
.job-del-card { background: #fff; border-radius: 14px; padding: 22px;
  width: min(360px, 92vw); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.job-del-card h3 { margin: 0 0 4px; font-size: 17px; }
.job-del-card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.job-del-card .btn.full { margin-top: 8px; }
.job-del-card .btn.clear { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.job-del-card .btn.clear:hover { background: var(--bg, #f2f5f8); }