/* =============================================================================
   Community Gatherings POS — design system
   Refined, calm, native-feeling utility. Light theme, high contrast, large
   tap targets for fast outdoor use. Accent colours come from Settings
   (--primary/--accent/--text/--bg, injected in partials/head.php); everything
   else — neutrals, elevation, radii, motion, components — is defined here.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }   /* sheets stay closed until opened */

:root {
  /* neutrals */
  --ink:        #16202e;
  --ink-soft:   #5b6675;
  --line:       #e7eaef;
  --line-soft:  #f0f2f5;
  --surface:    #ffffff;
  --canvas:     #f3f5f8;
  --ok:         #0f9d58;
  --ok-bg:      #e6f6ec;
  --danger:     #d23b30;
  --danger-bg:  #fdeceb;

  /* tints derived from the configurable accent */
  --primary-12: color-mix(in srgb, var(--primary) 12%, white);
  --primary-20: color-mix(in srgb, var(--primary) 20%, white);
  --primary-ink:color-mix(in srgb, var(--primary) 72%, black);

  /* shape + depth */
  --r-xs: 9px;  --r-sm: 12px;  --r: 16px;  --r-lg: 22px;  --r-pill: 999px;
  --tap: 52px;
  --pad: 16px;
  --shadow-1: 0 1px 2px rgba(16,32,46,.06), 0 1px 3px rgba(16,32,46,.05);
  --shadow-2: 0 2px 8px rgba(16,32,46,.07), 0 6px 18px rgba(16,32,46,.06);
  --shadow-pop: 0 10px 30px rgba(16,32,46,.16), 0 2px 8px rgba(16,32,46,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetUp  { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes popIn    { from { opacity: 0; transform: scale(.96) translateY(8px) } to { opacity: 1; transform: none } }
@keyframes rowIn    { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes tickPop  { 0% { transform: scale(.6) } 60% { transform: scale(1.18) } 100% { transform: scale(1) } }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;            /* never scroll the whole app sideways (keeps sticky topbar working) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI",
               Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
a { color: var(--primary-ink); }
.muted { color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- top bar --------------------------------------------------------------*/
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--primary), var(--primary-ink));
  color: #fff;
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-1);
}
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.event-switch { flex: 1 1 150px; min-width: 0; }
.event-switch select {
  width: 100%; max-width: 340px; height: 40px; border: none; border-radius: var(--r-pill);
  padding: 0 14px; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.92); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6675' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.user-box { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.user-name { font-weight: 700; }
.role-pill { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  padding: 3px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); }
.logout { color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600; opacity: .9; }
.logout:active { opacity: .6; }

/* ---- layout ---------------------------------------------------------------*/
.container { max-width: 920px; margin: 0 auto; padding: 18px 14px calc(40px + env(safe-area-inset-bottom)); }
.event-context { margin: 0 0 16px; color: var(--ink-soft); }
.event-context strong { color: var(--ink); }

/* ---- generic card + form --------------------------------------------------*/
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-1);
}
label { display: flex; flex-direction: column; gap: 7px; font-weight: 650; font-size: 0.82rem; color: var(--ink-soft); letter-spacing: .01em; }
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=search], input[type=date], select, textarea {
  height: var(--tap); width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 0 14px; font-size: 1rem; color: var(--ink); background: var(--surface);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.4; }
input[type=color] { height: 48px; padding: 5px; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
input::placeholder, textarea::placeholder { color: #9aa3b0; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-12);
}

/* ---- buttons --------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
  box-shadow: var(--shadow-1); -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-ink));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-block { width: 100%; }
.danger-btn { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); box-shadow: none; }

.alert { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 14px; font-weight: 600; }
.alert a { color: inherit; font-weight: 800; }
.alert-ok { background: var(--ok-bg); color: var(--ok); }

/* ---- auth -----------------------------------------------------------------*/
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 22px;
  background: radial-gradient(120% 80% at 50% -10%, var(--primary-12), var(--canvas) 60%); }
.auth-card { width: 100%; max-width: 380px; box-shadow: var(--shadow-2); animation: popIn .3s var(--ease); }
.auth-card h1 { text-align: center; color: var(--primary-ink); margin-bottom: 4px; }

/* ---- home tiles -----------------------------------------------------------*/
.tile-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 6px; }
.tile {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 3px;
  min-height: 124px; padding: 16px; border-radius: var(--r); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .08s, box-shadow .15s; position: relative; overflow: hidden;
  animation: rowIn .35s var(--ease) backwards;
}
.tile .tile-ic { width: 30px; height: 30px; margin-bottom: 10px; flex: 0 0 auto; }
.tile:active { transform: scale(.98); }
.tile-label { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; z-index: 1; }
.tile-sub { font-size: 0.82rem; color: var(--ink-soft); z-index: 1; }
.tile-disabled { opacity: .5; box-shadow: none; }

/* ---- page header row ------------------------------------------------------*/
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.checkin .checkin-head { flex-wrap: wrap; }
#checkinStats { font-weight: 600; }

.toolbar { display: flex; gap: 10px; margin: 14px 0 16px; }
.toolbar input[type=search] { flex: 1; min-width: 0; box-shadow: var(--shadow-1); }
.toolbar .btn { white-space: nowrap; padding: 0 16px; }

/* ---- camper list ----------------------------------------------------------*/
.camper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.camper {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 11px; min-height: 62px; box-shadow: var(--shadow-1);
  transition: transform .08s, border-color .15s; animation: rowIn .28s var(--ease) backwards;
}
.camper:active { transform: scale(.99); border-color: var(--primary-20); }
.camper-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.camper-name { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camper-sub { font-size: 0.8rem; color: var(--ink-soft); }
.camper.is-cancelled { opacity: .5; }
.camper.is-cancelled .camper-name { text-decoration: line-through; }

.tick {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface); color: transparent;
  font-size: 1.35rem; font-weight: 900; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s, color .15s;
}
.camper.is-in .tick { background: var(--ok); border-color: var(--ok); color: #fff; animation: tickPop .3s var(--ease); }

/* ---- avatars --------------------------------------------------------------*/
.avatar {
  width: 47px; height: 47px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; color: #fff;
  background: linear-gradient(150deg, var(--primary), var(--primary-ink));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 38px; height: 38px; font-size: 0.78rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 1.7rem; border-radius: 28px; }

.empty { text-align: center; padding: 44px 16px; color: var(--ink-soft); }

/* ---- bottom sheet / modal -------------------------------------------------*/
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16,32,46,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .18s ease;
}
.sheet {
  background: var(--surface); width: 100%; max-width: 540px; max-height: 92dvh; overflow: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop); animation: sheetUp .3s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-head {
  position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 16px 12px; border-bottom: 1px solid var(--line-soft);
}
.sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 5px; border-radius: var(--r-pill); background: var(--line); }
.sheet-head strong { font-size: 1.04rem; font-weight: 800; }
.sheet-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.link-btn { background: none; border: none; color: var(--primary-ink); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 6px 2px; }
.link-btn:active { opacity: .55; }
.link-btn.save { color: var(--primary); }

.photo-row { display: flex; align-items: center; gap: 16px; }
.photo-btn { cursor: pointer; }
.big-checkin { font-size: 1.12rem; min-height: 62px; font-weight: 800; }
.big-checkin.undo { background: linear-gradient(180deg, var(--ok), #0b7d46); box-shadow: 0 2px 6px rgba(15,157,88,.4); }

.pkg-set { border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 0; }
.pkg-set legend { padding: 0 6px; font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; font-weight: 650; font-size: 0.92rem; cursor: pointer; transition: background .12s, border-color .12s; }
.chip:has(input:checked) { background: var(--primary-12); border-color: var(--primary); color: var(--primary-ink); }
.chip input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }

.contact summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 6px 0; }
.cancel-row { flex-direction: row; align-items: center; gap: 11px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.cancel-row input { width: 20px; height: 20px; accent-color: var(--danger); }

.pool-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pool-results li { display: flex; align-items: center; gap: 11px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.pool-results li:active { background: var(--line-soft); }
.pool-results li.no-hit { cursor: default; justify-content: center; color: var(--ink-soft); }
.pool-results .add-tag { margin-left: auto; color: var(--primary); font-weight: 800; }

/* ---- type manager ---------------------------------------------------------*/
.type-mgr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.type-mgr li { display: flex; align-items: center; gap: 10px; }
.type-mgr li.off .tm-name { opacity: .5; text-decoration: line-through; }
.type-mgr .tm-name { flex: 1; min-width: 0; }
.type-add { display: flex; gap: 10px; margin-top: 16px; }
.type-add input { flex: 1; min-width: 0; }

/* ---- events ---------------------------------------------------------------*/
.event-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px;
  box-shadow: var(--shadow-1); transition: transform .08s, border-color .15s; animation: rowIn .3s var(--ease) backwards;
}
.event-card:active { transform: scale(.99); border-color: var(--primary-20); }
.event-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.event-sub, .event-tags { font-size: 0.82rem; color: var(--ink-soft); }
.event-tags::before { content: "#"; opacity: .6; margin-right: 2px; }

.status { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.status-active   { background: var(--ok-bg); color: var(--ok); }
.status-upcoming { background: var(--primary-12); color: var(--primary-ink); }
.status-past     { background: #eef0f3; color: var(--ink-soft); }
.status-archived { background: #eef0f3; color: var(--ink-soft); }

.date-row { display: flex; gap: 12px; }
.date-row label { flex: 1; }

/* ---- breakpoints ----------------------------------------------------------*/
@media (min-width: 640px) {
  body { font-size: 16.5px; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 920px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) {
  /* centred modal on larger screens instead of a bottom sheet */
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { border-radius: var(--r-lg); max-height: 86dvh; animation: popIn .26s var(--ease); }
  .sheet-head::before { display: none; }
  .sheet-head { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.photo-actions { display: flex; flex-direction: column; gap: 8px; }
.photo-actions .btn { min-height: 44px; padding: 0 18px; }

/* ===== sales setup ========================================================*/
h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.setup-card { margin-bottom: 14px; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.9rem; }
.back-link { display: inline-block; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.86rem; margin-bottom: 2px; }

.row-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px; }
.row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row-name { font-weight: 700; }
.row-sub { font-size: 0.8rem; color: var(--ink-soft); }
.mini-badge { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: var(--primary-12); color: var(--primary-ink); padding: 2px 7px; border-radius: var(--r-pill); vertical-align: middle; }

.pkg-list .tm-map { white-space: nowrap; }
.map-group { margin-bottom: 12px; }
.map-group-h { font-weight: 700; font-size: 0.8rem; color: var(--ink-soft); margin: 4px 0 8px; }

/* ===== outlet items =======================================================*/
.cat-block { margin-bottom: 18px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
  padding: 0 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cat-empty { padding: 2px 2px 4px; font-size: 0.86rem; }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item-row { display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; box-shadow: var(--shadow-1); }
.item-row:active { transform: scale(.99); border-color: var(--primary-20); }
.item-row.off { opacity: .5; }
.item-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== POS / till =========================================================*/
.pos { padding-bottom: 96px; }
.pos-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pos-controls .segmented { flex: 1 1 100%; }
.pos-outlet { width: auto; flex: 0 0 auto; min-width: 130px; height: 44px; }
.segmented { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--line-soft); border-radius: var(--r-pill); padding: 3px; gap: 2px;
  scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented { cursor: grab; user-select: none; -webkit-user-select: none; }
.segmented.dragging { cursor: grabbing; }
.segmented button { flex: 0 0 auto; white-space: nowrap; border: none; background: transparent; padding: 8px 16px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; min-height: 38px; }
.segmented button.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-1); }
.headcount { margin-left: auto; background: var(--primary-12); color: var(--primary-ink);
  font-weight: 700; font-size: 0.84rem; padding: 7px 13px; border-radius: var(--r-pill); }

.camper-pick { margin-top: 4px; }
.serving-bar { position: sticky; top: 64px; z-index: 20; margin-bottom: 14px; }
.serving-bar .back { display: inline-flex; margin-bottom: 8px; }
.serving-head { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow-1); }
.serving-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.serving-name { font-weight: 800; overflow-wrap: anywhere; }
.serving-pkgs { font-size: 0.78rem; color: var(--ink-soft); }
.attach-wrap { margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow-1); }
.attach-wrap input[type="search"] { width: 100%; }
.attach-results { max-height: 240px; overflow-y: auto; margin: 8px 0 0; }
#newSaleBtn { margin: 0 0 10px; }

.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.item-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px;
  min-height: 64px; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .07s, border-color .12s; }
.item-btn:active { transform: scale(.97); border-color: var(--primary); }
.ib-name { font-weight: 700; line-height: 1.2; }
.ib-price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-ink); }
.item-btn.free .ib-price { color: var(--ok); }

.order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16,32,46,.08); font-weight: 800; }

.cart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-line { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cl-top { display: flex; align-items: flex-start; gap: 8px; }
.cl-name { font-weight: 700; flex: 1; min-width: 0; }
.cl-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-qty { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.cl-unit { color: var(--ink-soft); font-size: 0.85rem; }
.cl-free { color: var(--ok); font-weight: 600; font-size: 0.85rem; }
.cl-disc { width: 64px; box-sizing: border-box; }
.cl-total { margin-left: auto; font-weight: 800; }
.cl-note { width: 100%; box-sizing: border-box; }
.qbtn.rm { color: var(--danger, #c0392b); }
.cl-total { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.cl-disc { width: 64px !important; height: 36px !important; padding: 0 8px !important; font-size: 0.85rem; }
.qbtn { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface);
  font-size: 1.1rem; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.qbtn.rm { color: var(--danger); border-color: var(--danger-bg); }

.order-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding: 6px 0; }
.order-total strong { font-size: 1.3rem; }
.checkout-actions { display: flex; flex-direction: column; gap: 10px; }
.pay-methods { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.seg2 { display: flex; gap: 8px; }
.seg2 button { flex: 1; min-height: 46px; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-sm); font-weight: 700; cursor: pointer; }
.seg2 button.active { background: var(--primary-12); border-color: var(--primary); color: var(--primary-ink); }

.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.balance-grid > div { background: var(--line-soft); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.bal-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; }
.bal-val { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bal-owing { background: var(--primary-12); }
.bal-owing .bal-val { color: var(--primary-ink); }
.hist-h { margin: 6px 0 0; }
.order-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.hist-row.off { opacity: .5; }

@media (min-width: 560px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .item-grid { grid-template-columns: repeat(4, 1fr); } }

.headcount { border: none; cursor: pointer; font-family: inherit; }
.pool-results .add-tag.ordered { color: var(--ok); }

/* --- till roster (camper list under search) --- */
.roster { list-style: none; margin: 10px 0 88px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.roster-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px; box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .12s, transform .07s; }
.roster-row:active { transform: scale(.99); border-color: var(--primary); }
.rr-name { flex: 1; font-weight: 600; min-width: 0; }
.rr-out { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; }
.rr-bal { border: none; background: var(--bg-soft, #f2f4f7); color: var(--ink-soft); font-weight: 700; font-size: 0.85rem;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.rr-bal.owing { background: #fef0e7; color: #b4540a; }
.roster .no-hit { padding: 18px; text-align: center; list-style: none; }

/* --- roster served tick --- */
.rr-serve { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; }
.rr-serve input { width: 26px; height: 26px; accent-color: var(--primary); cursor: pointer; }

/* --- profile tabs --- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-soft); margin-top: 4px; }
.tabs button { flex: 1; background: none; border: none; font: inherit; font-weight: 700; color: var(--ink-soft);
  padding: 10px 6px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--primary-ink); border-bottom-color: var(--primary); }
.tab-pane { margin-top: 4px; }

.order-hist, .pay-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
  max-height: 46dvh; overflow: auto; -webkit-overflow-scrolling: touch; }
.ord-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.ord-card.off { opacity: .55; }
.ord-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 6px; }
.ord-period { font-weight: 700; }
.ol-line { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 2px 0; }
.ol-line .free { color: var(--ok); font-weight: 600; }
.ord-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--line-soft); font-weight: 800; }
.ord-acts { display: flex; gap: 12px; }

.pay-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.pay-when { font-size: 0.82rem; color: var(--ink-soft); flex: 1; }
.pay-method { text-transform: capitalize; font-size: 0.85rem; color: var(--ink-soft); }
.pay-amt { font-weight: 800; }

/* --- stock --- */
.item-btn.oos { opacity: .5; filter: grayscale(1); cursor: not-allowed; }
.item-btn .ib-stock { font-size: 0.68rem; color: var(--ink-soft); margin-top: 2px; }
.item-btn .ib-stock.out { color: #b4540a; font-weight: 700; }
.stock-tag { display: inline-block; margin-top: 2px; font-size: 0.72rem; color: var(--ink-soft); }
.stock-tag.out { color: #b4540a; font-weight: 700; }
.soft-rule { border: none; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.hint { font-size: 0.8rem; margin: -6px 0 0; }

/* --- variations: setup editor --- */
.var-head { display: flex; align-items: center; justify-content: space-between; }
.var-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 10px; }
.var-row .v-name { grid-column: 1 / -1; }
.var-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.var-row input[type="text"], .var-row .v-name, .var-row .v-price, .var-row .v-stock { padding: 8px; }
.var-row .v-oos { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.var-row .v-rm { background: none; border: none; color: var(--danger, #c0392b); font-size: 1rem; cursor: pointer; padding: 4px 6px; }

/* --- variations: till picker --- */
.var-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* --- install app button --- */
.install-btn { margin-top: 14px; }
.install-hint { text-align: center; margin-top: 12px; font-size: 0.85rem; }

/* --- prep station --- */
.prep-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.prep-controls .pos-outlet { flex: 1 1 150px; }
.prep-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.prep-h { font-size: 1rem; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.prep-count { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 0.85rem; }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--r-sm); padding: 12px; box-shadow: var(--shadow-1); }
.ticket.aging { border-left-color: #e0a106; }
.ticket.old { border-left-color: #c0392b; }
.ticket.is-done { opacity: .6; border-left-color: var(--ok); }
.ticket.completing { opacity: .35; transition: opacity .2s; }
.ticket.fresh { animation: ticketIn .28s var(--ease); }
@keyframes ticketIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.t-head { display: flex; justify-content: space-between; align-items: baseline; }
.t-no { font-weight: 800; }
.t-when { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-camper { font-weight: 600; margin: 4px 0 8px; }
.t-period { font-weight: 600; font-size: 0.78rem; color: var(--ink-soft); }
.t-lines { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.t-lines li { font-size: 0.95rem; }
.t-qty { font-weight: 800; color: var(--primary-ink); }
.t-inc { font-size: 0.7rem; color: var(--ok); font-weight: 700; }
.t-lnote { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-left: 18px; }
.t-note { font-size: 0.85rem; background: var(--bg-soft, #f2f4f7); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.ticket .btn { width: 100%; }

/* catalogue: divider between meal items and all-day items */
.cat-divider { margin: 14px 2px 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 10px; }

/* cart note: comfortable typing height */
.cl-note { min-height: 40px; padding: 8px 10px; }

/* prep tickets: larger, kitchen-readable text */
.ticket { padding: 14px; }
.t-no { font-size: 1.15rem; }
.t-when { font-size: 0.95rem; }
.t-camper { font-size: 1.15rem; margin: 6px 0 10px; }
.t-period { font-size: 0.9rem; }
.t-lines li { font-size: 1.2rem; line-height: 1.35; }
.t-qty { font-size: 1.2rem; }
.t-lnote { font-size: 0.95rem; margin-left: 22px; }
.t-note { font-size: 1rem; }
.ticket .btn { font-size: 1.05rem; padding: 12px; margin-top: 4px; }

/* ===== profile: full details panel ========================================*/
.details-toggle { display: inline-block; margin: 10px 0 2px; font-weight: 700; }
.prof-details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 12px; margin: 4px 0 6px; background: var(--surface); }
.pd-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pd-row:last-of-type { border-bottom: none; }
.pd-k { flex: 0 0 84px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding-top: 1px; }
.pd-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-in { color: var(--ok, #1a7f4b); font-weight: 700; }
.pd-out { color: var(--danger); font-weight: 700; }
.prof-details .btn { margin-top: 6px; text-align: center; text-decoration: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== account page =======================================================*/
.alert-err { background: var(--danger-bg); color: var(--danger); }
.settings-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.settings-form > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.acct-photo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.photo-pick { cursor: pointer; }
.logout-btn { margin-top: 20px; max-width: 520px; background: var(--surface); border: 1.5px solid var(--line);
  color: var(--danger); text-decoration: none; }
.logout-btn:active { background: var(--danger-bg); }
/* user-box is now a link to the account page */
.topbar .user-box { text-decoration: none; color: #fff; }
.topbar .user-box:active { opacity: .7; }

/* ===== brand logo + home event switcher + appearance previews ==============*/
.brand-logo { height: 30px; width: auto; max-width: 60vw; display: block; object-fit: contain; }
.home-event { margin: 2px 0 18px; }
.home-event select { width: 100%; max-width: 480px; height: 52px; font-size: 1.05rem; font-weight: 700; }
.home-event-dates { display: block; margin-top: 6px; font-size: 0.85rem; }
.brand-preview { background: var(--primary); border-radius: var(--r-sm); padding: 10px 12px; display: inline-block; margin-bottom: 10px; }
.brand-preview img { height: 30px; width: auto; display: block; }
.icon-preview { margin-bottom: 10px; }
.icon-preview img { width: 72px; height: 72px; border-radius: 16px; display: block; box-shadow: var(--shadow-1); }

/* ===== inline checkbox rows + right-aligned user box =======================*/
label.check-inline, .check-inline { display: flex; flex-direction: row; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.check-inline input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); flex: 0 0 auto; margin: 0; }
.settings-form > label.check-inline { flex-direction: row; align-items: center; }
.topbar .user-box { margin-left: auto; }
/* user management */
.user-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; }
.user-row.off { opacity: .55; }
.user-row .row-main { flex: 1; min-width: 0; }
.user-row .row-name { font-weight: 700; }
.user-row .row-sub { font-size: 0.8rem; color: var(--ink-soft); }

/* ===== order-ready notifications + kitchen toast ==========================*/
.cg-notify { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 90; pointer-events: none; padding: 0 12px; }
.cg-note { pointer-events: auto; width: 100%; max-width: 460px; display: flex; align-items: center; gap: 12px;
  background: var(--ok, #137a3f); color: #fff; border-radius: var(--r); padding: 12px 14px;
  box-shadow: var(--shadow-2); animation: popIn .25s var(--ease); }
.cg-note-ic { font-size: 1.3rem; line-height: 1; }
.cg-note-txt { flex: 1; min-width: 0; font-weight: 600; text-align: left;
  background: none; border: none; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; }
.cg-note-sub { display: block; font-size: 0.78rem; opacity: .85; font-weight: 500; }
.cg-note-x { background: rgba(255,255,255,.2); border: none; color: #fff; width: 32px; height: 32px;
  border-radius: 50%; font-size: 1rem; cursor: pointer; flex: 0 0 auto; }
.cg-note-x:active { background: rgba(255,255,255,.35); }

.kitchen-toast { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 80; pointer-events: none; padding: 0 12px; }
.kt-item { background: var(--ok, #137a3f); color: #fff; font-size: 1.05rem; font-weight: 700;
  border-radius: var(--r-pill); padding: 12px 20px; box-shadow: var(--shadow-2); animation: popIn .25s var(--ease); transition: opacity .4s, transform .4s; }
.kt-item.out { opacity: 0; transform: translateY(10px); }
.kt-tick { display: inline-block; margin-right: 6px; }

/* ===== notification order card =============================================*/
.card-camper { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cc-name { font-weight: 800; font-size: 1.05rem; }
.cc-meta { font-size: 0.85rem; }
.cc-note { font-style: italic; color: var(--ink-soft); margin: 4px 0 12px; }
.ord-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ord-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.ol-qty { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; }
.ol-name { flex: 1; min-width: 0; }
.ol-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.card-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; margin: 4px 0 16px; }

/* ===== prep tabs ==========================================================*/
.prep-tabs { display: flex; gap: 6px; margin: 4px 0 14px; border-bottom: 2px solid var(--line-soft); }
.prep-tab { appearance: none; background: none; border: none; font: inherit; cursor: pointer;
  padding: 10px 16px; font-weight: 700; color: var(--ink-soft); border-bottom: 3px solid transparent;
  margin-bottom: -2px; display: inline-flex; align-items: center; gap: 8px; }
.prep-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.prep-tab .prep-count { background: var(--primary); color: #fff; border-radius: var(--r-pill);
  min-width: 22px; height: 22px; padding: 0 6px; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
#loadMore { margin: 14px auto 4px; max-width: 320px; }

/* ===== home-icon picker (settings) ========================================*/
.icon-rows { display: flex; flex-direction: column; gap: 8px; }
.icon-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; }
.icon-row-pv { display: inline-flex; align-items: center; justify-content: center; }
.icon-row-pv .ir-ic { width: 26px; height: 26px; }
.icon-row-name { font-weight: 600; font-size: .92rem; min-width: 0; }
.icon-row .ir-icon { height: 40px; min-width: 120px; }
.icon-row .ir-col { width: 44px; height: 40px; padding: 2px; }
@media (max-width: 460px) {
  .icon-row { grid-template-columns: 30px 1fr auto; grid-template-areas: "pv name col" "pv sel sel"; row-gap: 6px; }
  .icon-row-pv { grid-area: pv; } .icon-row-name { grid-area: name; } .icon-row .ir-col { grid-area: col; } .icon-row .ir-icon { grid-area: sel; }
}

/* ===== prep: in-progress + done-flash + actions ===========================*/
.ticket.is-inprog { border-left-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-12), var(--shadow-1); }
.t-status { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--primary); background: var(--primary-12); padding: 2px 8px; border-radius: var(--r-pill); }
.t-head { display: flex; align-items: center; gap: 8px; }
.t-head .t-when { margin-left: auto; }
.t-actions { display: flex; gap: 8px; margin-top: 4px; }
.t-actions .btn { flex: 1; }
.ticket.done-flash { opacity: 1; border-left-color: var(--ok); background: var(--ok-bg);
  animation: doneFlashIn .3s var(--ease); transition: opacity .5s; }
.t-doneline { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
  font-weight: 800; color: var(--ok); }
@keyframes doneFlashIn { from { transform: scale(.98); } to { transform: scale(1); } }

/* ===== prep <-> sales toggle + awaiting-prep badge ========================*/
.prep-jump { margin: 16px 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.prep-jump .pj-ic { width: 20px; height: 20px; }
.prep-badge { position: fixed; right: 16px; bottom: 84px; z-index: 45; cursor: pointer;
  width: 64px; height: 64px; border-radius: 50%; border: none; color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-ink));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  animation: popIn .25s var(--ease); }
.prep-badge:active { transform: scale(.94); }
.prep-badge-n { font-size: 1.25rem; font-weight: 800; }
.prep-badge-lbl { font-size: .56rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; margin-top: 1px; }

/* ===== sales roster: order-ready tick =====================================*/
.rr-ready { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff;
  font-size: .8rem; font-weight: 900; margin-left: 6px; vertical-align: middle; }
.rr-ready.is-new { animation: tickPop .3s var(--ease); }

/* ===== offline link-guard toast ===========================================*/
.net-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px);
  z-index: 95; background: #1f2430; color: #fff; font-weight: 700; font-size: .95rem;
  padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.net-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== blackboard editor ==================================================*/
.board-default { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; margin: 8px 0 18px; }
.board-default input { width: 100%; }
.board-default .save-flag { color: var(--ok); font-weight: 700; font-size: .85rem; align-self: center; }
.board-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.board-sec-head h2 { margin: 0; }
.seg-list { display: flex; flex-direction: column; gap: 10px; }
.seg-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow-1); }
.seg-when { font-weight: 800; }
.seg-meta { font-size: .85rem; color: var(--ink-soft); grid-column: 1; }
.seg-card .seg-edit { grid-column: 2; grid-row: 1 / span 2; }
.board-add { display: flex; gap: 8px; margin-bottom: 8px; }
.board-add select { flex: 1; min-width: 0; }
.board-add-extra { margin-top: 2px; }
.board-add-extra .btn { flex: 1; }
.entry-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.entry-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--canvas); }
.entry-row.er-heading { background: var(--surface); border-style: dashed; }
.entry-row.er-heading .er-label { font-weight: 800; }
.er-top { display: flex; gap: 8px; align-items: center; }
.er-top .er-label { flex: 1; min-width: 0; }
.er-move { display: flex; gap: 4px; flex: 0 0 auto; }
.er-move button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font-size: 1rem; }
.er-move .er-rm { color: var(--danger); }
.er-bot { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.er-bot .er-price { width: 110px; }
.er-chk { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-soft); }
.er-chk input { width: 18px; height: 18px; }

/* ===== blackboard promos ==================================================*/
.board-sync { margin-top: 18px; font-size: .85rem; }
.promo-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--canvas); display: flex; flex-direction: column; gap: 8px; }
.pr-head { display: flex; align-items: center; gap: 10px; }
.pr-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--ink-soft); overflow: hidden; text-align: center; }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pr-thumb.is-fallback img { opacity: .65; }
.pr-imgbtns { display: flex; flex-direction: column; gap: 4px; }
.pr-callout { font-weight: 700; }
.pr-desc { width: 100%; resize: vertical; font: inherit; }
.pr-price { width: 140px; }
.promo-row .er-move { margin-left: auto; }

.board-link { text-align: center; margin-top: 14px; }
.board-link a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.board-link a:hover { text-decoration: underline; }

/* ===== Products (master catalogue) ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 2px; }
.page-head h1 { margin: 0; }
.product-list { list-style: none; margin: 14px 0 88px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.product-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 12px; box-shadow: var(--shadow-1); cursor: pointer; }
.product-row.is-inactive { opacity: 0.6; }
.product-row .prod-thumb { border-radius: 10px; background: var(--surface-2, #eef1f5); }
.product-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.product-name { font-weight: 700; overflow-wrap: anywhere; }
.product-sub { font-size: 0.78rem; }
.product-price { font-weight: 800; white-space: nowrap; }
.prod-image-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.prod-thumb { border-radius: 12px; }
.prod-image-actions { display: flex; gap: 8px; align-items: center; }
.prod-variable-note { font-size: 0.78rem; margin: 4px 0 2px; }

/* ===== Products: variable editor ===== */
.type-seg { margin: 4px 0 6px; }
#variableFields .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 700; margin: 14px 0 6px; }
.vattr-hint, .vvar-hint { font-size: 0.76rem; margin: 2px 0 8px; }
.attr-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.attr-row input { width: 100%; }
.var-row { background: var(--surface-2, #f3f5f8); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.var-label { font-weight: 700; font-size: 0.86rem; margin-bottom: 6px; }
.var-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.var-fields .vf { display: flex; flex-direction: column; gap: 3px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.var-fields .vf input { width: 84px; }
.var-fields .vf-sku { flex: 1; min-width: 130px; }
.var-fields .vf-sku input { width: 100%; }
.var-fields .v-active { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; white-space: nowrap; align-self: center; }
.var-fields .v-active input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ===== Sales Setup: linked product overrides ===== */
.stock-tag.shop { background: var(--primary-bg, #e7f0fe); color: var(--primary-ink, #1551a8); }
.pvar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.pvar-label { font-weight: 700; flex: 1; min-width: 90px; }
.pvar-master { font-size: 0.76rem; white-space: nowrap; }
.pvar-row .pvar-price { width: 90px; }

/* ===== Reports ===== */
.rpt-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 10px 0 18px; padding: 12px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; }
.rpt-filters label { display: flex; flex-direction: column; font-size: 0.74rem; color: var(--muted, #667); gap: 3px; }
.rpt-filters select, .rpt-filters input[type=date] { font-size: 0.9rem; padding: 5px 7px; }
.rpt-h { font-size: 1rem; margin: 22px 0 8px; }
.rpt-h3 { font-size: 0.85rem; margin: 0 0 6px; color: var(--muted, #667); }
.rpt-note { font-weight: 400; font-size: 0.72rem; }
.rpt-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.rpt-card { flex: 1 1 120px; min-width: 110px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.rpt-card-v { font-size: 1.35rem; font-weight: 700; }
.rpt-card-l { font-size: 0.76rem; color: var(--muted, #667); }
.rpt-card-s { font-size: 0.68rem; color: var(--muted, #99a); }
.rpt-chart { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.rpt-svg { width: 100%; height: auto; display: block; }
.rpt-bar { fill: var(--primary, #1d6fe0); opacity: 0.85; }
.rpt-cumline { stroke: #e0791d; stroke-width: 2; }
.rpt-axis { fill: var(--muted, #889); font-size: 10px; }
.rpt-axisline { stroke: var(--line, #dde); stroke-width: 1; }
.rpt-legend { font-size: 0.74rem; color: var(--muted, #667); margin: 6px 0 0; }
.rpt-legend .k-bar, .rpt-legend .k-line { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border-radius: 2px; }
.rpt-legend .k-bar { background: var(--primary, #1d6fe0); opacity: 0.85; }
.rpt-legend .k-line { height: 3px; background: #e0791d; }
.rpt-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.rpt-actions { display: flex; gap: 8px; align-items: center; }
.rpt-inline { font-size: 0.78rem; color: var(--muted, #667); }
.rpt-table-wrap { overflow-x: auto; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rpt-table th, .rpt-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line, #eee); }
.rpt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt-table tfoot th { border-top: 2px solid var(--line, #ccc); border-bottom: none; }
.rpt-cashup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }