:root { --blue: #0b4f8a; --blue-dk: #083a66; --ink: #1d2330; --muted: #5b6475; --bg: #f5f7fa; --line: #dde3ea; --ok: #1a7f37; --bad: #b42318; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: #fff; line-height: 1.55; }
a { color: var(--blue); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: .2em 0 .4em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .4em; }
.btn { display: inline-block; padding: .8em 1.4em; border-radius: 8px; background: var(--blue); color: #fff; text-decoration: none; font-weight: 600; border: 2px solid var(--blue); }
.btn:hover { background: var(--blue-dk); border-color: var(--blue-dk); }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-light { background: #fff; color: var(--blue); border-color: #fff; }
.btn-sm { padding: .5em 1em; font-size: .9rem; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }

.group-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 35; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .04); }/* the open phone menu can be taller than the screen: let it scroll inside the sticky header */
/* anchors (#receive, #charges) land below the sticky header instead of under it */
html { scroll-padding-top: 90px; }
.group-header .section { padding: 14px 0; }
.header-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.menu { display: flex; gap: 18px; flex-wrap: wrap; }
.menu a { color: var(--ink); text-decoration: none; }

.section-hero { background: linear-gradient(135deg, #eaf2fb, #fff); padding: 88px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--blue); margin: 0; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 640px; }

.intro { color: var(--muted); max-width: 680px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: #fff; }
.card h3 { margin: 0 0 .3em; }
.card p { margin: 0; color: var(--muted); }

.section-cta { background: var(--blue); color: #fff; text-align: center; }
.section-cta p { opacity: .9; }

.section-status { background: var(--bg); }
.status { border-collapse: collapse; width: 100%; max-width: 760px; margin-top: 12px; background: #fff; border: 1px solid var(--line); }
.status th, .status td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.status th { white-space: nowrap; }
.status .ok { color: var(--ok); font-weight: 700; width: 2em; }
.status .bad { color: var(--bad); font-weight: 700; width: 2em; }

.group-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.group-footer .section { padding: 24px 0; }

/* ---- app pages (portal + admin) ---- */
.group-body .section { padding: 28px 0; }
.group-body .section + .section { padding-top: 0; }
.page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-title h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.page-title .buttons { margin-top: 0; }
h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.alert { margin: 0; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.alert-ok { border-color: #a7d7b4; background: #edf8f0; color: var(--ok); }
.alert-bad { border-color: #f1b4ae; background: #fdf0ef; color: var(--bad); }

.form { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { font: inherit; padding: .55em .7em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field .check { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.field .check input { width: auto; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.help { color: var(--muted); }
.req { color: var(--bad); }
button.btn { cursor: pointer; font: inherit; font-weight: 600; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table.data { border-collapse: collapse; width: 100%; font-size: .93rem; background: #fff; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: var(--bg); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { font-weight: 700; background: var(--bg); border-top: 2px solid var(--line); }
.empty { color: var(--muted); font-style: italic; }

.badge { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #e8ecf1; color: var(--ink); white-space: nowrap; }
.badge-ok { background: #dcf3e2; color: var(--ok); }
.badge-warn { background: #ffe8d1; color: #9a4b00; }
.badge-watch { background: #fff4c2; color: #7a5d00; }
.badge-info { background: #dcebfb; color: var(--blue-dk); }
.badge-muted { background: #eef0f3; color: var(--muted); text-decoration: line-through; }

.detail { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.detail dt { font-weight: 600; color: var(--muted); }
.detail dd { margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; color: var(--ink); text-decoration: none; }
a.stat:hover { border-color: var(--blue); }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.stat-label { color: var(--muted); font-size: .88rem; }

.search { display: flex; gap: 8px; max-width: 560px; }
.search input { flex: 1; min-width: 0; font: inherit; padding: .5em .7em; border: 1px solid #c5ced9; border-radius: 6px; }
.alert-info { border-color: #b7d2ee; background: #eef5fc; color: var(--blue-dk); }

/* ---- feedback: header button, panel, and the /admin/feedback log ---- */
.fbbtn { display: inline-flex; align-items: center; gap: 6px; padding: .4em .8em; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600; background: #fff; }
.fbbtn:hover { border-color: var(--blue); color: var(--blue); }
.fbbtn svg { width: 16px; height: 16px; flex: none; }
.fbcount { background: var(--bad); color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 .5em; line-height: 1.6; }
.fboverlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; z-index: 50; }
.fboverlay[hidden] { display: none; }
body.fb-open { overflow: hidden; }
.fbpanel { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.fbhead { display: flex; align-items: center; gap: 12px; }
.fbhead h2 { margin: 0; flex: 1; font-size: 1.2rem; }
.fbclose { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.fbwhere { color: var(--muted); font-size: .88rem; margin: 6px 0 12px; }
.fbwhere code { background: var(--bg); padding: .1em .4em; border-radius: 4px; word-break: break-all; }
.fbpanel .field textarea { font: inherit; padding: .55em .7em; border: 1px solid #c5ced9; border-radius: 6px; width: 100%; }
.fbfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fbfoot .spacer { flex: 1; }
.fbdone[hidden], .fbpanel form[hidden] { display: none; }

.fbitem { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.fbmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbmeta .spacer { flex: 1; }
.fburl code { font-size: .82rem; word-break: break-all; }
.fbtitle { font-size: .82rem; margin-top: 2px; }
.fbbody { margin: 8px 0 0; overflow-wrap: anywhere; }
.fbreply { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--blue); background: var(--bg); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.fbact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fbact select, .fbact input[type=text] { font: inherit; font-size: .9rem; padding: .35em .6em; border: 1px solid #c5ced9; border-radius: 6px; }
.fbact input[type=text] { flex: 1; min-width: 180px; }
.btn-danger { color: var(--bad); border-color: var(--bad); }
@media (max-width: 640px) { .fbbtn .lbl { display: none; } }

.map-key { color: var(--muted); font-size: .88rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.map-key .slot { display: inline-block; width: 14px; height: 14px; margin-left: 8px; }
.map-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); }
.map { display: flex; flex-direction: column; gap: 10px; min-width: max-content; }
.shelf { display: flex; align-items: center; gap: 10px; }
.shelf-name { width: 28px; font-weight: 800; font-size: 1.1rem; text-align: center; }
.shelf-sections { display: flex; gap: 4px; }
.sec { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.sec-num { font-size: .7rem; color: var(--muted); }
.slot { display: block; width: 34px; height: 18px; border-radius: 3px; border: 1px solid #b9c3cf; }
.slot-free { background: #fff; }
.slot-used { background: #8fb8e0; border-color: #5d93c7; }
.slot-sel { background: #f2a33a; border-color: #c97a10; }
a.slot:hover { outline: 2px solid var(--blue); }

/* ---- header: menu, feedback button, phone menu toggle ---- */
.header-bar { gap: 12px 20px; }
/* logo left with the buttons (client view, feedback) top right; the menu gets its own row underneath */
.header-bar .menu { order: 5; flex-basis: 100%; }
.header-bar .fbbtn { order: 3; }

/* ---- client view: header button + picker, and the bar shown while in it ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.viewas { order: 3; position: relative; }
.viewasbtn { display: inline-flex; align-items: center; gap: 6px; padding: .4em .8em; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.viewasbtn::-webkit-details-marker { display: none; }
.viewasbtn:hover, .viewas[open] .viewasbtn { border-color: #c99a00; color: #7a5d00; background: #fff8dc; }
.viewasbtn svg { width: 16px; height: 16px; flex: none; }
.viewaspanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.viewaspanel label { font-weight: 700; font-size: .85rem; }
.viewaspanel select { font: inherit; padding: .5em .6em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; width: 100%; }
.viewaspanel .help { font-size: .8rem; line-height: 1.4; }
.group-header .section-viewas-bar { padding: 8px 0; background: #fff4c2; border-bottom: 1px solid #e8d48a; }
.viewasbar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; color: #5c4600; font-size: .92rem; }
.viewasbar-what { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; }
.viewasbar-what svg { width: 18px; height: 18px; flex: none; }
.viewasbar form { margin: 0; }
.viewasbar select { font: inherit; font-size: .9rem; padding: .35em .5em; border: 1px solid #d9c26a; border-radius: 6px; background: #fff; max-width: 240px; }
.viewasbar-exit { background: #5c4600; border-color: #5c4600; }
.viewasbar-exit:hover { background: #3f3000; border-color: #3f3000; }
@media (max-width: 640px) { .viewasbtn .lbl { display: none; } .viewasbar-what { flex-basis: 100%; } }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }
.menu a { padding: .2em 0; white-space: nowrap; }
.menu a:hover { color: var(--blue); }

/* ---- full-width pages: three columns, tabs, side lists ---- */
body.wide .wrap { max-width: 1680px; }
.cols { max-width: 1680px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1101px) { .cols:has(> .col:nth-child(2):last-child) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.cols .section { padding: 0; }
.cols .wrap { padding: 0; max-width: none; }
.col-side { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.col-side h2 { font-size: 1.15rem; }

.tab-bar { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin; }
.tab { padding: .6em 1em; text-decoration: none; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-count { display: inline-block; min-width: 1.6em; text-align: center; font-size: .75rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 .4em; color: var(--muted); }
.tab-panel > .section + .section { margin-top: 18px; }
.tabs:not(.tabs-on) .tab-panel { margin-bottom: 28px; }
.tab-panel[hidden] { display: none; }

.plist { list-style: none; margin: 8px 0 0; padding: 0; }
.plist li { padding: 10px 0; border-top: 1px solid var(--line); }
.plist li:first-child { border-top: 0; }
.plist-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }

.search select { flex: 1; min-width: 0; font: inherit; padding: .5em .7em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; }

/* ---- tablets ---- */
@media (max-width: 1100px) {
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col-main { grid-column: 1 / -1; }
}

/* ---- phones ---- */
@media (max-width: 760px) {
  .section { padding: 32px 0; }
  .group-body .section { padding: 18px 0; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-title { align-items: flex-start; }
  .page-title .buttons { width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .stat-value { font-size: 1.25rem; }
  .form { padding: 14px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form .btn, .search .btn { width: 100%; text-align: center; }
  .search { flex-direction: column; }
  .detail { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .detail dd { margin-bottom: 8px; }
  table.data th, table.data td { padding: 8px 10px; }
  .fbmeta .spacer { display: none; }
  .fbpanel { padding: 16px; }
  .fboverlay { padding-top: 4vh; }
}

/* sub-navigation between related pages (reports) */
.subnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.subnav a { white-space: nowrap; padding: .45em .9em; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem; background: #fff; }
.subnav a:hover { border-color: var(--blue); color: var(--blue); }
.subnav a.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* month calendar (receiving): a Monday-first grid; an agenda of days with entries on phones */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; gap: 6px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cal-wd { padding: 6px 8px; background: var(--bg); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-day { min-height: 118px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day.is-other { background: #fafbfc; }
.cal-day.is-other .cal-date { opacity: .55; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-date { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .9rem; }
.cal-date a { color: var(--ink); text-decoration: none; }
.cal-date a:hover { color: var(--blue); text-decoration: underline; }
.cal-day.is-today .cal-date > :first-child { color: var(--blue); }
.cal-dow, .cal-mon { display: none; }
.cal-count { font-size: .72rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 .5em; color: var(--muted); }
.cal-ev { display: block; padding: 3px 6px; border-radius: 5px; border-left: 3px solid var(--blue); background: #eef5fc; color: var(--ink); text-decoration: none; font-size: .8rem; line-height: 1.3; min-width: 0; }
.cal-ev:hover { background: #dcebfb; }
.cal-ev-label { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-sub { display: block; color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-late { border-left-color: var(--bad); background: #fdf0ef; }
.cal-ev-late:hover { background: #fbe1de; }
.cal-ev-inspect { border-left-color: #c99a00; background: #fff8dc; }
.cal-ev-inspect:hover { background: #fff1b8; }
.cal-more { font-size: .78rem; font-weight: 600; padding: 0 6px; }
.cal-note { margin: 10px 0 0; font-size: .9rem; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; white-space: nowrap; }
.cal-key .cal-ev { display: inline-block; width: 18px; height: 12px; padding: 0; margin-left: 6px; }
@media (max-width: 760px) {
  .cal { display: block; border: 0; border-radius: 0; background: none; }
  .cal-wd, .cal-day:not(.has-ev) { display: none; }
  .cal-day { min-height: 0; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 10px; gap: 6px; background: #fff; }
  .cal-day.is-other { background: #fff; }
  .cal-day.is-other .cal-date { opacity: 1; }
  .cal-dow, .cal-mon { display: inline; }
  .cal-ev { font-size: .9rem; padding: 6px 8px; }
  .cal-ev-label, .cal-ev-sub { white-space: normal; }
  .cal-key { display: flex; margin: 6px 0 0; }
}

/* order upload preview (portal) */
.upl-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upl-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.upl-warn { margin-bottom: 16px; }
.upl-warn ul { margin: 6px 0 0; padding-left: 20px; }
.upl-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 18px; background: #fff; }
.upl-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 12px; }
.upl-inspect { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: .55em; }
.upl-group .table-scroll { border-radius: 8px; }
.upl-same td, .upl-received td { color: var(--muted); }
.upl-changes { margin: 4px 0 0; padding-left: 18px; font-size: .85rem; color: var(--muted); }
.upl-changes s { color: var(--bad); }
.upl-go { margin-top: 4px; }

/* order entry without the template (portal) */
.ord-entry [hidden] { display: none !important; }
.ord-lines th, .ord-lines td { padding: 6px 4px; }
.ord-lines td input { width: 100%; min-width: 0; padding: 6px 8px; }
.ord-lines td:last-child { width: 1%; }
.ord-lines tbody tr + tr input::placeholder { color: transparent; }   /* the example only on the first line */
.ord-del { padding: 4px 10px; line-height: 1; }
.ord-existing-note { margin: 0 0 10px; }

/* photos & videos of an item (inc/media.php, assets/media.js) */
.media { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; width: 100%; }
.media-grid:empty { display: none; }
.media-tile { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.media-tile a { display: block; aspect-ratio: 4 / 3; background: #e8ecf1; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; font-size: .9rem; }
.media-video a::after { content: ''; position: absolute; left: 50%; top: calc(50% - 14px); width: 0; height: 0; margin: -14px 0 0 -9px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.media-tile figcaption { padding: 5px 8px; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .65); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.media-del:hover { background: var(--bad); }
.media-tile.is-uploading a { opacity: .55; }
.media-bar { height: 4px; background: #e8ecf1; }
.media-bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.media-tile.is-failed { border-color: #f1b4ae; }
.media-tile.is-failed figcaption { color: var(--bad); white-space: normal; }
.media-add { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.media-add svg { width: 18px; height: 18px; }
.media-help { margin-top: -4px; }
.media-note { margin: 0; font-size: .9rem; color: var(--blue-dk); }
.media-note.is-bad { color: var(--bad); }
.mstrip { display: inline-flex; gap: 4px; margin-top: 4px; vertical-align: middle; }
.mstrip a { display: block; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #e8ecf1; border: 1px solid var(--line); position: relative; }
.mstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mstrip a span { display: flex; align-items: center; justify-content: center; height: 100%; font-size: .65rem; color: var(--muted); }
.mstrip-video::after { content: '\25B6'; position: absolute; right: 3px; bottom: 1px; font-size: .65rem; color: #fff; text-shadow: 0 0 3px #000; }
.mstrip-more { align-self: center; font-size: .8rem; color: var(--muted); }
.section-slot-warn { display: none; }        /* data for assets/slotwarn.js only */

/* ---- item stickers (/admin/labels, inc/labels.php): sized in inches/points so they print true to size ---- */
.stk-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.stk-size { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.stk-size select { font: inherit; font-weight: 400; padding: .45em .6em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; }
.stk-help { margin-bottom: 16px; color: var(--muted); font-size: .9rem; }
.stk-help summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.stk-help ol { margin: 8px 0 0; padding-left: 20px; }
.stksheet { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
/* on screen the stickers are shown big, so their codes can also be scanned straight off the monitor */
.stksheet .stk { zoom: 2.4; box-shadow: 0 0 0 .5px #9aa5b4, 0 2px 6px rgba(15, 23, 42, .12); }
.stksheet .stk-l { zoom: 1; }
@media (max-width: 760px) { .stksheet .stk { zoom: 1.4; } .stksheet .stk-l { zoom: .8; } }
.stk-nudge { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: .88rem; }
.stk-nudge-label { font-weight: 600; margin-right: 8px; display: flex; align-items: center; gap: 8px; }
.stk-nudge-label select { font: inherit; font-weight: 400; padding: .4em .5em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; }
.stk-nudge-fine { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.stk-nudge-val { color: var(--muted); margin: 0 4px; flex-basis: 100%; }
.stk { box-sizing: border-box; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; overflow: hidden; line-height: 1.1; }
.stk .qr { display: block; flex: none; }
.stk-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.stk-line, .stk-client, .stk-itemno { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-client { font-weight: 700; text-transform: uppercase; }
/* 2.25 x 1.25 */
/* 2.25 x 0.75 (the default roll): one row, the QR beside the details and barcode */
.stk-w { padding: .04in .09in; display: flex; align-items: center; gap: .07in; color: #000; }
.stk-w .qr { width: .6502in; height: .6502in; }   /* 33 modules x 4 dots = 132 dots at 203 dpi */
.stk-w .stk-txt { font-size: 6.5pt; gap: .008in; font-weight: 600; line-height: 1.08; }
.stk-w .stk-client { font-size: 8.5pt; font-weight: 900; letter-spacing: -.01em; }
.stk-w .stk-what { font-weight: 700; font-size: 7pt; }
.stk-w .stk-bc { margin-top: .015in; display: flex; flex-direction: column; align-items: flex-start; }
.stk-w .bc { display: block; width: 1.0837in; height: .16in; }   /* 110 modules x 2 dots = 220 dots at 203 dpi */
.stk-w .stk-tag { font-size: 6.5pt; font-weight: 800; letter-spacing: .12em; padding-left: .1in; }

/* 2.25 x 1.25: client across the top; below it the QR, and beside it the details with the barcode under them */
.stk-m { padding: .06in .09in; display: flex; flex-direction: column; gap: .04in; color: #000; }
.stk-m .stk-top { display: flex; justify-content: space-between; gap: .05in; font-size: 9pt; border-bottom: .75pt solid #000; padding-bottom: .02in; }
.stk-m .stk-of { font-weight: 700; white-space: nowrap; }
.stk-m .stk-mid { display: flex; gap: .07in; align-items: center; flex: 1; min-height: 0; }
/* QR sizes are whole printer dots per module at 203 dpi (Zebra's usual): 33 modules x 4 dots = 132 dots = .65in */
.stk-m .qr { width: .8128in; height: .8128in; }   /* 33 modules x 5 dots = 165 dots at 203 dpi */
.stk-m .stk-txt { font-size: 7pt; gap: .012in; font-weight: 600; }
.stk-m .stk-itemno { font-size: 8pt; }
.stk-m .stk-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; }
.stk-m .stk-bc { margin-top: .025in; display: flex; flex-direction: column; align-items: flex-start; }
.stk-m .bc { display: block; width: 1.0837in; height: .2in; }   /* 110 modules x 2 dots = 220 dots at 203 dpi */
.stk-m .stk-tag { font-size: 7pt; font-weight: 800; letter-spacing: .12em; padding-left: .1in; }
/* 1.5 x 0.5 */
/* the QR and the text are centred as one group with a clear margin each side: Zebras do not print right to the edge */
.stk-s { padding: .02in .08in; display: flex; align-items: center; justify-content: center; gap: .05in; }
.stk-s .stk-txt { flex: 0 1 auto; max-width: .82in; }
.stk-s .qr { width: .4286in; height: .4286in; }   /* 29 modules x 3 dots = 87 dots at 203 dpi */
/* thermal printers turn grey and thin strokes into speckles: everything solid black and bold */
.stk-s .stk-txt { font-size: 7pt; line-height: 1.08; gap: .012in; font-weight: 700; color: #000; }
.stk-s .stk-client { font-size: 8pt; font-weight: 900; letter-spacing: -.01em; }
.stk-s .stk-big { font-size: 7.5pt; }
.stk-s .stk-tagline { display: flex; justify-content: space-between; gap: .04in; letter-spacing: .04em; }
/* 4 x 6 */
.stk-l { padding: .2in .25in; display: flex; flex-direction: column; gap: .12in; }
.stk-l .stk-top { display: flex; justify-content: space-between; gap: .1in; font-size: 22pt; border-bottom: 2pt solid #000; padding-bottom: .06in; }
.stk-l .stk-top .stk-client { white-space: normal; }
.stk-l .stk-of { font-weight: 700; white-space: nowrap; }
.stk-l .stk-mid { display: flex; flex-direction: column; gap: .12in; flex: 1; }
.stk-l .qr { width: 2.3in; height: 2.3in; align-self: center; }
.stk-l .stk-txt { font-size: 13pt; gap: .04in; }
.stk-l .stk-itemno { font-size: 18pt; }
.stk-l .stk-desc { white-space: normal; font-weight: 700; font-size: 15pt; }
.stk-l .stk-bc { display: flex; flex-direction: column; align-items: center; }
.stk-l .bc { display: block; width: 3.2in; height: .6in; }
.stk-l .stk-tag { font-size: 16pt; font-weight: 700; letter-spacing: .1em; }
/* 2.4 x 3.9 (tall, narrow): the 4x6 stacked layout, sized down; QR and barcode in whole printer dots at 203 dpi */
/* Brother QL printers leave ~3 mm unprinted at the top and bottom, so the stack keeps clear of both edges and is
   sized to end well inside the label (it was cut off at the bottom when it filled all 3.9") */
.stk-l.stk-t { padding: .22in .14in .2in; gap: .06in; justify-content: center; }
.stk-l.stk-t .stk-top { font-size: 13pt; flex-direction: column; align-items: center; text-align: center; gap: 0; border-bottom-width: 1.5pt; padding-bottom: .03in; }
.stk-l.stk-t .stk-mid { gap: .06in; align-items: center; flex: 0 0 auto; }
.stk-l.stk-t .qr { width: 1.2in; height: 1.2in; }
.stk-l.stk-t .stk-txt { font-size: 9pt; gap: .02in; text-align: center; align-items: center; width: 100%; }
.stk-l.stk-t .stk-itemno { font-size: 12pt; }
.stk-l.stk-t .stk-desc { font-size: 10pt; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stk-l.stk-t .stk-bc { margin-top: .04in; }
.stk-l.stk-t .bc { width: 1.6in; height: .34in; }
.stk-l.stk-t .stk-tag { font-size: 13pt; line-height: 1.1; }
@media print {
  body:has(.stksheet) .group-header, body:has(.stksheet) .group-footer,
  body:has(.stksheet) .group-body > .section:not(.section-labels), .stk-tools, .stk-help, .stk-nudge, .stk-warn { display: none !important; }
  html:has(.stksheet), body:has(.stksheet) { margin: 0 !important; padding: 0 !important; background: #fff; }
  body:has(.stksheet) .group-body { margin: 0; padding: 0; }
  .stksheet .stk { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; margin: 0; }
  .section-labels, .section-labels .wrap { padding: 0 !important; margin: 0; max-width: none; }
  .stksheet { display: block; padding: 0; gap: 0; background: none; border: 0; border-radius: 0; }
  .stksheet .stk { zoom: 1; box-shadow: none; break-after: page; page-break-after: always; }
  .stksheet .stk:last-child { break-after: auto; page-break-after: auto; }
}

/* ---- the installable app: Scan button, camera scanner (/t), install page (/app) ---- */
.scanbtn { order: 3; display: inline-flex; align-items: center; gap: 6px; padding: .4em .85em; border-radius: 999px; background: var(--blue); color: #fff; text-decoration: none; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.scanbtn:hover { background: var(--blue-dk); }
.scanbtn svg { width: 17px; height: 17px; flex: none; }
.scan { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0f172a; max-width: 560px; }
.scan-view { position: relative; aspect-ratio: 4 / 3; background: #0f172a; overflow: hidden; }
.scan-toggle, .scan-light { white-space: nowrap; flex: none; }
.scan-light.is-on { background: #fff4c2; border-color: #c99a00; color: #7a5d00; }
.scan-bar .scan-status { flex: 1; }
.scan-frame { inset: 15% 20%; }
.scan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18% 22%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .35); transition: border-color .15s; }
.scan:not(.is-on) .scan-frame { opacity: .35; }
.scan.is-found .scan-frame { border-color: #4ade80; }
.scan-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #fff; }
.scan-status { margin: 0; font-size: .92rem; color: var(--muted); }
.scan-status.is-bad { color: var(--bad); }
.scan-type { margin-top: 12px; max-width: 560px; }
.scan-help { max-width: 560px; margin: 8px 0 0; font-size: .88rem; }
.install-done, .install-button { display: none; border: 2px solid var(--blue); border-radius: 14px; padding: 18px; background: #eef5fc; margin-bottom: 18px; max-width: 560px; }
.install-done h2, .install-button h2 { margin-top: 0; }
html.can-install .install-button { display: block; }
html.is-app .install-done { display: block; }
html.is-app .install-button, html.is-app .install-steps { display: none; }
.install-steps ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.install-steps li { margin-bottom: 4px; }
.install-steps .card p { margin-top: 8px; }
/* installed on a phone: respect the notch / home bar */
html.is-app body { padding-bottom: env(safe-area-inset-bottom); }
html.is-app .group-header { padding-top: env(safe-area-inset-top); }

/* an order line edited in place (admin/order.php): boxes only on the row whose Edit was clicked */
tr .le { display: none; }
tr.is-editing .lv { display: none; }
tr.is-editing .le { display: flex; flex-direction: column; gap: 4px; min-width: 7ch; }
tr.is-editing { background: #eef5fc; }
tr.is-editing td { vertical-align: top; }
.le input, .le select { font: inherit; font-size: .88rem; padding: .35em .5em; border: 1px solid #c5ced9; border-radius: 5px; background: #fff; width: 100%; min-width: 0; box-sizing: border-box; }
.le input:focus, .le select:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.le input[type=number] { width: 6ch; }
.line-form { display: none; }
.line-rm { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--bad); white-space: nowrap; }
.line-rm input { width: auto; }
.btn.line-del { color: var(--bad); }

/* an order line's Edit pop-up (admin/order.php; replaced by editing in place) */
.line-actions { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
dialog.line-edit { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 0; border-radius: 14px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); white-space: normal; }
dialog.line-edit::backdrop { background: rgba(15, 23, 42, .45); }
.line-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.line-edit-head h3 { margin: 0; flex: 1; font-size: 1.15rem; }
.line-edit-x { border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--muted); }
.line-edit .field { display: flex; flex-direction: column; gap: 4px; }
.line-edit .label { font-weight: 600; font-size: .88rem; }
.line-edit input, .line-edit select, .line-edit textarea { font: inherit; padding: .5em .65em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; width: 100%; box-sizing: border-box; }
.line-edit .form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 12px; }
.line-edit-rm { display: flex; align-items: center; gap: 8px; color: var(--bad); font-weight: 600; margin-bottom: 4px; }
.line-edit-rm input { width: auto; }
.line-edit .buttons { margin-top: 10px; }

/* the Edit items grid on an order (sections/item-grid.php; no longer linked, the line pop-up replaced it) */
.igrid-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.igrid-head h2 { margin: 0; }
.igrid-head .buttons, .igrid-form > .buttons { margin-top: 0; }
.igrid-form > .buttons { margin-top: 12px; }
table.igrid { width: max-content; min-width: 100%; }
table.igrid td { padding: 4px 4px; vertical-align: middle; }
.igrid input[type=number] { text-align: right; }
table.igrid th { padding: 8px 4px; }
.igrid input, .igrid select, .igrid textarea { font: inherit; font-size: .88rem; padding: .35em .45em; border: 1px solid #c5ced9; border-radius: 5px; background: #fff; width: 100%; box-sizing: border-box; }
.igrid textarea { resize: vertical; min-height: 2.1em; }
.igrid input:focus, .igrid select:focus, .igrid textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.igrid-rm { text-align: center; }
.igrid-rm input { width: 18px; height: 18px; }

/* ticking several rows for one action (client page: stickers for several orders) */
.pick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-form { display: inline-flex; gap: 8px; margin: 0; }
.pick-order { width: 18px; height: 18px; cursor: pointer; }

/* ---- scan station and shipments (scanner gun: assets/scanstation.js) ---- */
.ss { border: 2px solid var(--blue); border-radius: 14px; padding: 16px; background: #eef5fc; max-width: 900px; transition: background .2s; }
.ss h2 { margin-top: 0; }
.ss-label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; color: var(--blue-dk); }
.ss-label svg { width: 24px; height: 24px; }
.ss-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; padding: .5em .7em; border: 2px solid #9fc0e4; border-radius: 10px; background: #fff; }
.ss-input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.ss-flash { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 1.15rem; font-weight: 700; }
.ss-flash.ss-ok { background: #dcf3e2; color: var(--ok); }
.ss-flash.ss-warn { background: #fff4c2; color: #7a5d00; }
.ss-flash.ss-bad { background: #fdf0ef; color: var(--bad); border: 2px solid var(--bad); }
.ss.flash-bad { animation: ssbad .5s; }
@keyframes ssbad { 0%, 100% { background: #eef5fc; } 30% { background: #fbd5d1; } }
.ss-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.ss-tools form { margin: 0; }
.ss-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ss-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ss-card:first-child { border-color: var(--blue); box-shadow: 0 0 0 2px #cfe0f3; }
.ss-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.ss-client { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.ss-for { font-size: 1.02rem; }
.ss-desc { font-weight: 700; }
.ss-meta { color: var(--muted); font-size: .88rem; }
.ss-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9rem; margin: 2px 0 6px; }
.ship-lines tr.is-new td { animation: shipnew 1.2s; }
@keyframes shipnew { 0% { background: #dcf3e2; } 100% { background: transparent; } }
.ship-lines tr.is-short .ship-count strong { color: #9a4b00; }
.ship-totals { font-size: 1.05rem; }

/* scanned sticker: whose it is, big */
.owner { border: 2px solid var(--blue); border-radius: 14px; padding: 16px 18px; background: #eef5fc; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.owner-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.owner-tag { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.owner-client { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.owner-for { font-size: 1.15rem; }
.owner-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 4px 0; }
.owner-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.owner-facts dd { margin: 0; font-weight: 600; }
.owner .btn { margin-top: 6px; }

/* move pieces from the map: how many, to which slot, Move */
.mapmove { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 300px; }
.mapmove input[type=number] { width: 4.2em; font: inherit; font-size: .9rem; padding: .4em .4em; border: 1px solid #c5ced9; border-radius: 6px; }
.mapmove .combo { flex: 1; min-width: 130px; }
.mapmove .combo input { width: 100%; font: inherit; font-size: .9rem; padding: .4em 2em .4em .55em; border: 1px solid #c5ced9; border-radius: 6px; }
.mapmove .combo-list { min-width: 220px; }
.mapmove .btn { white-space: nowrap; }
.table-scroll:has(.combo.is-open) { overflow: visible; }

/* searchable pick-list (form field type "combo", assets/combo.js) */
.combo { position: relative; }
.field .combo input { padding-right: 2.2em; }
.combo-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2em; border: 0; border-radius: 0 6px 6px 0; background: transparent; cursor: pointer; }
.combo-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.combo.is-open .combo-toggle::after { transform: rotate(-135deg); margin-top: -2px; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #c5ced9; border-radius: 8px; box-shadow: 0 12px 28px rgba(15, 23, 42, .16); }
.combo-list[hidden] { display: none; }
.combo-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: .45em .6em; border-radius: 5px; cursor: pointer; }
.combo-list li[hidden] { display: none; }
.combo-list li.is-active { background: #dcebfb; }
.combo-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.combo-l { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.combo-list .combo-none { color: var(--muted); font-style: italic; cursor: default; }
.combo.is-invalid input { border-color: var(--bad) !important; background: #fdf0ef !important; }
.search .combo { flex: 1; min-width: 0; }
.search .combo input { width: 100%; font: inherit; padding: .5em 2.2em .5em .7em; border: 1px solid #c5ced9; border-radius: 6px; }

/* filter bar (GET): a wrapping grid of small labelled controls */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end;
           background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-wide { grid-column: span 2; }
.filter label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.filter select, .filter input { font: inherit; font-size: .92rem; padding: .45em .6em; border: 1px solid #c5ced9; border-radius: 6px; background: #fff; width: 100%; min-width: 0; }
.filter.is-set select, .filter.is-set input { border-color: var(--blue); background: #eef5fc; }
.filter-buttons { flex-direction: row; gap: 8px; }
.late { color: var(--bad); }
@media (max-width: 760px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-wide, .filter-buttons { grid-column: 1 / -1; }
  .filter-buttons .btn { flex: 1; text-align: center; }
}

/* share arrow (page-title share): click copies the link, panel offers Text / Email */
.page-title .buttons { align-items: center; }
.sharepop { position: relative; }
.share-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); cursor: pointer; }
.share-btn::-webkit-details-marker { display: none; }
.share-btn:hover, .sharepop[open] .share-btn { border-color: var(--blue); background: #eef5fc; }
.share-btn svg { width: 18px; height: 18px; }
.share-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(320px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); }
.share-status { margin: 0 0 8px; font-size: .9rem; color: var(--ok); }
.share-status strong { color: var(--ok); }
.share-url { width: 100%; font: inherit; font-size: .9rem; padding: .45em .6em; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.share-actions { display: flex; gap: 8px; margin-top: 8px; }
.share-actions .btn { flex: 1; text-align: center; }

/* the honeypot field on /join: hidden from people, visible to form-filling bots */
.field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- below 1400px the menu folds behind a Menu button, so the sticky header stays one short row (the staff menu
   is long). Kept last so it wins over the header rules above. ---- */
@media (max-width: 1400px) {
  .nav-button { display: inline-flex; align-items: center; gap: 8px; order: 4; padding: .45em .8em; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; cursor: pointer; user-select: none; }
  .nav-button span, .nav-button span::before, .nav-button span::after { display: block; width: 16px; height: 2px; background: var(--ink); position: relative; content: ''; }
  .nav-button span::before { position: absolute; top: -5px; }
  .nav-button span::after { position: absolute; top: 5px; }
  .header-bar .menu { display: none; order: 5; flex-basis: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 18px; border-top: 1px solid var(--line); padding-top: 4px; }
  .header-bar .menu a { padding: .55em 0; }
  .header-bar .nav-toggle:checked ~ .menu { display: grid; max-height: calc(100vh - 140px); overflow-y: auto; }
  .nav-toggle:focus-visible + .nav-button { outline: 2px solid var(--blue); }
}
.nav-button .lbl { font-weight: 600; }
@media (max-width: 760px) {
  .header-bar .menu { grid-template-columns: minmax(0, 1fr); }
  .header-bar .menu a { padding: .7em 0; border-bottom: 1px solid var(--line); }
  /* phones: logo and the buttons share one row; the logo wraps, the buttons go icon-only */
  .header-bar { gap: 8px 6px; }
  .header-bar .logo { flex: 1 1 0; min-width: 0; font-size: 1.05rem; line-height: 1.2; margin-right: 4px; }
  .viewasbtn, .fbbtn, .nav-button, .scanbtn { padding: .45em .6em; min-height: 36px; }
  .viewasbtn .lbl, .fbbtn .lbl, .nav-button .lbl { display: none; }
  .scanbtn { padding: .45em .8em; }
  .nav-button { padding: .45em .7em; }
}

/* ---- consignment (my.justintimeconsign.com) ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; margin: 0; }
button.btn { cursor: pointer; font: inherit; font-weight: 600; }
.thumb { display: block; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 6px, #fff 6px, #fff 12px); }
.thumb-lg { width: 180px; height: 135px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.photo-tile { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.photo-tile.is-main { border-color: var(--ok); box-shadow: 0 0 0 2px #dcf3e2; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-tile figcaption { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; align-items: center; }
.photo-add { cursor: pointer; margin-right: 10px; }
.intake-grid table { min-width: 1100px; }
.intake-grid td { padding: 4px; }
.intake-grid input, .intake-grid select { width: 100%; font: inherit; font-size: .9rem; padding: .4em .5em; border: 1px solid #c5ced9; border-radius: 6px; }
.intake-grid td:nth-child(2) input { min-width: 200px; }
.intake-grid input.num { width: 80px; }
.contract { border: 1px solid var(--line); border-radius: 10px; padding: 24px; background: #fff; }
.contract h3 { margin: 1.4em 0 .4em; font-size: 1.05rem; }
.contract-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.contract-no { text-align: right; }
.contract-terms { white-space: normal; color: var(--ink); }
.contract-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.contract-sign span { display: block; border-bottom: 1px solid var(--ink); height: 40px; margin-bottom: 6px; }
/* register, receipts, ledger */
input.num { width: 110px; font: inherit; padding: .45em .5em; border: 1px solid #c5ced9; border-radius: 6px; }
td.num { text-align: right; white-space: nowrap; }
.price-form { display: inline-flex; gap: 6px; align-items: center; }
.search input[type=search], .search input:not([type]) { font: inherit; padding: .55em .7em; border: 1px solid #c5ced9; border-radius: 6px; }
form.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.search input[type=search] { flex: 1 1 260px; }
.totals { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.totals td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.totals td:last-child { text-align: right; }
.totals .grand td { font-size: 1.35rem; font-weight: 800; border-bottom: 0; }
.pay-form .field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.pay-form select, .pay-form input { font: inherit; padding: .5em .6em; border: 1px solid #c5ced9; border-radius: 6px; }
.btn-big { width: 100%; padding: 1em; font-size: 1.15rem; margin: 6px 0 8px; }
.alert-bad { background: #fde8e7; color: var(--bad); padding: 8px 12px; border-radius: 8px; }
.receipt .data td { padding: 6px 4px; }
details.mt { margin-top: 12px; }
@media print {
  .group-header, .group-footer, .section-alert, .section-form, .section-list, .page-title .buttons, .fbbtn, .viewasbar { display: none !important; }
  .section-table[data-purpose="Split"] { display: none !important; }
  .contract { border: 0; padding: 0; }
}

/* ---- phones (checked at 390px wide, 2026-10-15). Screens only: a printed contract keeps its table. ---- */
@media screen and (max-width: 760px) {
  /* 16px stops iPhones zooming the page when a box is tapped; !important because several older rules size boxes smaller */
  input, select, textarea { font-size: 16px !important; }
  /* search rows: the box takes the width, the button sits beside it (the stacked .search made flex-basis a height) */
  form.search { flex-direction: row; flex-wrap: wrap; max-width: none; }
  form.search input[type=search], form.search input:not([type]), form.search input[type=number] { flex: 1 1 140px; width: auto; height: auto; }
  form.search .btn { width: auto; flex: 0 0 auto; }
  form.search .check { flex: 1 1 100%; }
  input.num { width: 100%; }
  .price-form { display: flex; flex-wrap: nowrap; width: 100%; }
  .price-form input { flex: 1; min-width: 0; }
  .btn-sm { padding: .6em 1em; }
  .btn-row form.inline { display: block; flex: 1 1 100%; }
  .btn-row .btn { width: 100%; text-align: center; }
  .thumb { width: 72px; height: 54px; }
  .thumb-lg { width: 46%; height: auto; aspect-ratio: 4 / 3; }
  .contract { padding: 14px; }
  .contract-head, .contract-sign { flex-direction: column; grid-template-columns: 1fr; gap: 16px; }
  .contract-no { text-align: left; }
  .contract .table-scroll { margin: 0 -4px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .photo-add { display: block; width: 100%; text-align: center; margin: 0 0 8px; }

  /* tables become cards: one card per row, each value labelled with its column */
  .table-stack { overflow: visible; border: 0; border-radius: 0; }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { background: transparent; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; }
  /* the label sits in a left column of its own, so the cell's own content (text, <br>, <small>) flows untouched */
  table.stack td { position: relative; padding: 7px 0 7px 38%; min-height: 2.2em; border-bottom: 1px solid #eef1f5; overflow-wrap: anywhere; }
  table.stack tr td:last-child { border-bottom: 0; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: 9px; width: 34%; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
  table.stack td[data-label=""], table.stack td:not([data-label]) { padding-left: 0; }
  table.stack td[data-label=""]::before, table.stack td:not([data-label])::before { display: none; }
  table.stack td:empty { display: none; }
  table.stack td.is-empty { display: none; }
  table.stack tfoot tr { background: var(--bg); font-weight: 700; }
  table.stack tfoot td { background: transparent; border-top: 0; }
  /* intake: one card per item */
  .intake-grid table { min-width: 0; }
  .intake-grid td.row-no { font-weight: 800; font-size: 1rem; padding-left: 0; text-align: center; }
  .intake-grid td.row-no::before { display: none; }
  .intake-grid td:nth-child(2) input, .intake-grid input.num { min-width: 0; width: 100%; }
}