:root {
  --bg: #f4f4f4; --card: #fff; --ink: #111; --muted: #666; --line: #e0e0e0;
  --accent: #000; --accent-ink: #fff; --error: #b3261e; --demo: #fff4d6;   /* black & white brand */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0b0b; --card: #171717; --ink: #f2f2f2; --muted: #a3a3a3; --line: #2e2e2e;
          --accent: #fff; --accent-ink: #000; --error: #ff8a80; --demo: #3a3220; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" always wins over display rules below */
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Header ribbon: black and white, with the company logo (in both light and dark mode) */
.top { background: #000; color: #fff; padding: 10px 16px;
       padding-top: max(10px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; }
.top .brand { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 30px; width: auto; display: block; }
.login-logo { height: 72px; width: auto; display: block; margin: 0 auto 4px; }
@media (prefers-color-scheme: dark) { .login-logo { filter: invert(1); } }
.rep-bar { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.top-btn { background: none; border: 1px solid currentColor; color: inherit; border-radius: 8px;
           padding: 4px 10px; font-size: 13px; opacity: .9; }
.screen-title { font-size: 20px; margin: 0 0 14px; }
.login { gap: 12px; max-width: 380px; margin: 24px auto; padding: 20px; }
.login h2 { margin: 0; }
.login label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.login .muted { margin: 0; }
.demo { background: var(--demo); margin: 0; padding: 8px 16px; font-size: 13px; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }

.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted);
               text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
input { font: inherit; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
        background: var(--card); color: var(--ink); }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.results { list-style: none; margin: 8px 0; padding: 0; background: var(--card); border: 1px solid var(--line);
           border-radius: 10px; max-height: 60vh; overflow-y: auto; }
.results li { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; cursor: pointer; }
.results li:last-child { border-bottom: 0; }
.results li:hover, .results li:focus { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.results li span { font-size: 14px; }
.results li.empty { cursor: default; color: var(--muted); }
.muted { color: var(--muted); font-size: 14px; }

button { font: inherit; cursor: pointer; }
.link-btn { background: none; border: 0; color: var(--accent); padding: 8px 0; font-weight: 600; }
.results .link-btn { padding: 0; }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 600; }
.secondary { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 12px 18px; }
.primary:disabled { opacity: .6; }

.add-form { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 8px; }
.add-form h3 { margin: 0 0 2px; }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.grid .wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }
.error { color: var(--error); font-size: 14px; }
.actions { display: flex; gap: 10px; margin-top: 12px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card-head .field-label { margin: 0; }
.client-name { font-size: 18px; }

/* ---------------------------------------------------------------- sections */
.section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase;
                 letter-spacing: .04em; margin: 24px 0 8px; }
.products-section { margin-top: 24px; padding-bottom: 80px; }
select { font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
         background: var(--card); color: var(--ink); min-width: 0; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.count { margin: 8px 0; }

/* ---------------------------------------------------------------- product cards */
.products { display: grid; gap: 10px; }
.product { display: grid; grid-template-columns: 88px 1fr; gap: 12px; background: var(--card);
           border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pimg { width: 88px; height: 88px; background: #fff; border-radius: 8px; overflow: hidden;
        display: flex; align-items: center; justify-content: center; }
.pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pbody { min-width: 0; }
.pmeta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.page { color: var(--muted); white-space: nowrap; font-size: 13px; }
.pdesc { font-size: 15px; margin: 2px 0 4px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px;
         background: color-mix(in srgb, var(--muted) 18%, transparent); }
.badge.special { background: var(--ink); color: var(--card); }                 /* solid black */
.badge.nomix { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }  /* outlined */
.ref { font-size: 13px; }
.variants { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.variants li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.sku { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.opt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
       padding: 6px 14px; font-weight: 600; font-size: 14px; }
.variants li.na { color: var(--muted); text-decoration: line-through; }
.na-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.variants li.na .na-label { text-decoration: none; }
.product.unavailable { opacity: .55; filter: grayscale(1); }
.more { width: 100%; margin-top: 12px; }

/* ---------------------------------------------------------------- cart */
.cart-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; margin: 0; }
.cart-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cart-line { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cl-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.cl-desc { font-size: 15px; }
.remove { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 0 4px; align-self: start; }
.cl-inputs { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 8px; margin-top: 8px; align-items: end; }
.cl-inputs label span, .cl-total span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.cl-inputs input { padding: 10px; }
.cl-total { text-align: right; padding-bottom: 10px; }
input.bad { border-color: var(--error); outline-color: var(--error); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px; font-size: 14px; }
.cart-total strong { font-size: 20px; }

.order-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
             max-width: 616px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;
             background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 14px;
             padding: 14px 18px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ---------------------------------------------------------------- ship to, details, submit */
.details { margin-top: 12px; gap: 8px; }
.details .ship-note { margin: 0 0 4px; }
.extra summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 8px 0; }
.extra .grid { margin-top: 4px; }
textarea { font: inherit; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
           background: var(--card); color: var(--ink); resize: vertical; }
.submit { width: 100%; margin-top: 14px; padding: 16px; font-size: 17px; }
#submit-msg { margin: 12px 0 0; }

dialog.confirm { border: 0; border-radius: 16px; padding: 22px; width: min(92vw, 380px);
                 background: var(--card); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
dialog.confirm::backdrop { background: rgba(10, 15, 25, .55); }
dialog.confirm h2 { margin: 0 0 6px; }
dialog.confirm .actions { justify-content: flex-end; margin-top: 18px; }
dialog.confirm .actions button { min-width: 96px; padding: 12px 18px; font-size: 16px; }

.done { text-align: center; gap: 10px; padding: 28px 20px; margin-top: 24px; }
.done h2 { margin: 0; }
.done-check { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
              background: #1e7a46; color: #fff; font-size: 30px; }
.pdf-link { display: block; text-decoration: none; text-align: center; }
.ok { color: #1e7a46; font-weight: 600; }

/* ---------------------------------------------------------------- history */
.history-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.history-row { gap: 4px; }
.history-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.history-actions .secondary { padding: 8px 14px; }
.history-actions .link-btn { padding: 0 0 0 6px; }
.history-status { margin: 10px 0 0; }

/* ---------------------------------------------------------------- tablets (iPad) */
/* iPad portrait and up: wider page, products in a grid. */
@media (min-width: 700px) {
  main { max-width: 1000px; padding: 20px 24px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { margin-top: 48px; }
  .cl-inputs { grid-template-columns: 110px 150px 1fr; }
}
/* iPad landscape and laptops: client + products on the left, the order always visible on the right. */
@media (min-width: 1000px) {
  main { max-width: 1280px; }
  #order-screen {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 24px;
    grid-template-areas: "title order" "client order" "products order";
    grid-template-rows: auto auto 1fr; align-items: start;
  }
  #order-screen > .screen-title { grid-area: title; }
  #client-picker, #selected-client { grid-area: client; }
  #products { grid-area: products; margin-top: 16px; }
  #cart-section { grid-area: order; position: sticky; top: 12px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
                  overflow-y: auto; padding-bottom: 12px; }
  #cart-section .section-title { margin-top: 0; }
  .order-bar { display: none !important; }      /* the order is always on screen */
  .products-section { padding-bottom: 24px; }
}
@media (min-width: 1300px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- compact product list (no photos) */
/* Used when SHOW_PRODUCT_PHOTOS is false in js/config.js: one bordered list, tight rows. */
.products.list { gap: 0; grid-template-columns: 1fr !important; background: var(--card);
                 border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.products.list .product { grid-template-columns: 1fr; border: 0; border-radius: 0; padding: 8px 12px;
                          border-bottom: 1px solid var(--line); gap: 0; }
.products.list .product:last-child { border-bottom: 0; }
.products.list .pmeta { font-size: 14px; align-items: baseline; }
.products.list .badges { margin: 2px 0; }
.products.list .ref { font-size: 12px; }
.products.list .variants { margin-top: 4px; gap: 2px; }
.products.list .variants li { font-size: 13px; }
.products.list .add { padding: 4px 12px; font-size: 13px; }
.client-count { margin: 6px 2px 0; font-size: 13px; }
.products.list .pbody > .badges, .products.list .pbody > .ref { display: inline-flex; vertical-align: middle; margin: 2px 6px 0 0; }
.list-bar { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.list-bar .count { margin: 0; }
.photo-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; user-select: none; }
.photo-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* Clients a rep added in the app: red with "(NEW)" (permanent, by request) */
.new-client { color: #c62828; }
@media (prefers-color-scheme: dark) { .new-client { color: #ff6b6b; } }
input[readonly] { background: var(--bg); color: var(--muted); }
.login-tagline { text-align: center; letter-spacing: .03em; margin-top: 10px !important; }

/* iPhone held sideways: keep content clear of the notch / rounded corners */
.top { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.history-actions .view-link { padding: 8px 14px; display: inline-block; }

/* Header on small phones: never wider than the screen. Long rep names get "...", buttons never wrap,
   and on phones the header shows just the logo (the name is on the sign-in screen and invoices). */
.top { gap: 12px; }
.top .brand { min-width: 0; white-space: nowrap; flex-shrink: 0; }
.rep-bar { min-width: 0; }
#rep-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 520px) { .top .brand-text { display: none; } }
@media (max-width: 340px) { .rep-bar { gap: 6px; } .top-btn { padding: 4px 8px; } }