:root {
  --nav-h: calc(68px + env(safe-area-inset-bottom, 0px));
  --lake: #196281; --lake-dark: #0f4259; --lake-soft: #e6f1f5;
  --leaf: #2f7d4f; --leaf-soft: #e4f2e9;
  --gold: #d98600; --gold-soft: #fff2de;
  --ivory: #fbf7f0; --card: #ffffff; --line: #e2dccd; --ink: #262b2e; --muted: #667378;
  --red: #b3372f; --red-soft: #fbe6e3; --amber-soft: #fff1d6;
  --r: 14px; --tap: 52px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ivory); color: var(--ink);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Sinhala', 'Sinhala MN', sans-serif;
  font-size: 17px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.hide { display: none !important; }

.banner { background: var(--gold-soft); color: #6b4b0c; font-size: 13px; text-align: center; padding: 6px 12px; border-bottom: 1px solid #ecd9a5; }
.banner button { background: none; border: 0; text-decoration: underline; color: inherit; font-size: 13px; padding: 0 0 0 8px; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: var(--lake); color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 16px; position: sticky; top: 0; z-index: 20; }
.topbar .ttl { font-weight: 700; font-size: 19px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .back { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 12px; font-size: 22px; }
.chip { background: rgba(255,255,255,.16); border: 0; color: #fff; border-radius: 20px; padding: 8px 12px; font-size: 14px; }
.main { flex: 1; padding: 16px 16px calc(var(--nav-h) + 90px); width: 100%; max-width: 760px; margin: 0 auto; }

.bnav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
.bnav button { flex: 1; background: none; border: 0; padding: 8px 2px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); min-height: 60px; position: relative; }
.bnav button .ic { font-size: 22px; }
.bnav button.on { color: var(--lake); font-weight: 700; }
.bnav button.on::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: var(--lake); border-radius: 0 0 3px 3px; }
.badge { background: var(--red); color: #fff; border-radius: 12px; font-size: 12px; min-width: 22px; padding: 1px 7px; text-align: center; font-weight: 700; display: inline-block; }
.bnav .badge { position: absolute; top: 4px; right: 22%; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.card h3 { font-size: 17px; margin-bottom: 4px; }
.muted { color: var(--muted); font-size: 14px; }
.sm { font-size: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.sp { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }

.btn { background: var(--lake); color: #fff; border: 0; border-radius: 12px; min-height: var(--tap); padding: 10px 18px; font-weight: 700; width: 100%; }
.btn.sec { background: #fff; color: var(--lake); border: 2px solid var(--lake); }
.btn.green { background: var(--leaf); }
.btn.wa { background: #1fa855; }
.btn.red { background: var(--red); }
.btn.ghost { background: transparent; color: var(--lake); border: 0; text-decoration: underline; min-height: 40px; width: auto; font-weight: 600; }
.btn.small { min-height: 42px; width: auto; padding: 6px 14px; font-size: 15px; }
.btn[disabled] { opacity: .45; }
.btnrow { display: flex; gap: 10px; }
.btnrow .btn { flex: 1; }

.alert { border-radius: var(--r); padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; }
.alert.warn { background: var(--amber-soft); border: 1px solid #f0d28a; }
.alert.info { background: var(--lake-soft); border: 1px solid #bcd9de; }
.alert b { display: block; }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 12px; min-height: 108px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; font-weight: 700; position: relative; }
.tile .ic { font-size: 34px; }
.tile .badge { position: absolute; top: 8px; right: 10px; }
.tile.hl { background: var(--lake); color: #fff; border-color: var(--lake); }

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 10px 16px; font-weight: 600; white-space: nowrap; min-height: 44px; }
.tab.on { background: var(--lake); color: #fff; border-color: var(--lake); }
.tab.small { padding: 7px 13px; min-height: 38px; font-size: 15px; }
.tabs.cats .tab.on { background: var(--orange-deep); border-color: var(--orange-deep); }

.search { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; min-height: 50px; background: #fff; margin-bottom: 10px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 48px; background: #fff; }
textarea { min-height: 80px; resize: vertical; }
label.f { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 4px; color: var(--muted); }

.catlabel { font-weight: 700; color: var(--orange-deep); margin: 16px 0 6px; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; min-height: 64px; }
.item.sel { border-color: var(--leaf); background: var(--leaf-soft); }
.item .nm { font-weight: 600; word-break: break-word; }
.item .un { color: var(--muted); font-size: 13px; }
.item.low .qty-big { color: var(--muted); }
.new-tag { background: var(--gold); color: #fff; font-size: 11px; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.lock { color: var(--muted); font-size: 14px; }

.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--lake); background: #fff; color: var(--lake); font-size: 24px; font-weight: 700; line-height: 1; }
.step button.plus { background: var(--lake); color: #fff; }
.step input { width: 66px; text-align: center; padding: 8px 2px; font-weight: 700; }
.qty-big { font-weight: 800; font-size: 19px; text-align: right; white-space: nowrap; }

.cartbar { position: fixed; left: 0; right: 0; bottom: var(--nav-h); padding: 10px 16px; background: linear-gradient(transparent, var(--ivory) 30%); z-index: 25; }
.cartbar .btn { max-width: 728px; margin: 0 auto; display: block; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

.seg { display: flex; border: 1.5px solid var(--lake); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: #fff; color: var(--lake); padding: 8px 6px; font-weight: 600; font-size: 14px; min-height: 42px; }
.seg button.on { background: var(--lake); color: #fff; }

.status { display: inline-block; border-radius: 10px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.status.sent { background: var(--amber-soft); color: #8a5a00; }
.status.received { background: var(--leaf-soft); color: var(--leaf); }
.status.pending { background: var(--amber-soft); color: #8a5a00; }
.status.approved { background: var(--leaf-soft); color: var(--leaf); }
.status.rejected { background: var(--red-soft); color: var(--red); }
.status.deleted, .status.cancelled { background: #ececec; color: #555; }
.delcard { opacity: .8; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child, td:first-child { text-align: left; }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.scroll { overflow-x: auto; }
.pos { color: var(--leaf); font-weight: 700; } .neg { color: var(--red); font-weight: 700; }

.modalwrap { position: fixed; inset: 0; background: rgba(10,30,36,.55); z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--ivory); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 16px 24px; }
.modal h2 { margin-bottom: 10px; font-size: 20px; }
@media (min-width: 700px) { .modalwrap { align-items: center; } .modal { border-radius: 20px; } }

.pin { max-width: 320px; margin: 0 auto; }
.dots { display: flex; justify-content: center; gap: 14px; margin: 14px 0 18px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lake); display: block; }
.dots i.f { background: var(--lake); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keys button { height: 64px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 26px; font-weight: 700; }
.who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.who button { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 10px; text-align: center; min-height: 84px; }
.who b { display: block; font-size: 18px; } .who span { font-size: 13px; color: var(--muted); }
.logo { text-align: center; padding: 22px 0 16px; }
.logo h1 { color: var(--lake); font-size: 26px; } .logo p { margin: 4px 0 0; color: var(--muted); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 80px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 200; max-width: 90vw; font-size: 15px; }
.wa-preview { white-space: pre-wrap; background: #e7f6dd; border-radius: 12px; padding: 12px; font-size: 14px; border: 1px solid #cde8bd; max-height: 260px; overflow-y: auto; }
.sim { border: 1px dashed var(--gold); background: var(--gold-soft); border-radius: 10px; padding: 8px 10px; margin-top: 8px; font-size: 14px; }
.sim button { margin: 4px 6px 0 0; border: 1px solid var(--gold); background: #fff; border-radius: 16px; padding: 6px 12px; }
details > summary { cursor: pointer; font-weight: 600; color: var(--lake); padding: 8px 0; }

/* desktop: sidebar nav, wider content */
@media (min-width: 900px) {
  .shell { padding-left: 230px; }
  .bnav { top: 0; bottom: auto; left: 0; right: auto; width: 230px; height: 100vh; flex-direction: column; border-top: 0; border-right: 1px solid var(--line); padding: 70px 10px 10px; gap: 4px; }
  .bnav button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 16px; padding: 12px 14px; border-radius: 12px; min-height: 52px; }
  .bnav button.on { background: var(--lake-soft); }
  .bnav button.on::before { display: none; }
  .bnav .badge { position: static; margin-left: auto; }
  .main { max-width: 980px; padding-bottom: 60px; }
  .cartbar { bottom: 0; left: 230px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .topbar { position: sticky; }
}

@media (max-width: 600px) { .hm { display: none; } }

/* ===== v2: table lists, quantity control, receiving table, PDF sheet ===== */
.tl { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: clip; }
.tl-h { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; background: var(--lake); color: #fff; font-weight: 700; font-size: 14px; position: sticky; top: 66px; z-index: 5; }
.tl-h span:last-child { text-align: center; min-width: 176px; }
.tl-cat { background: var(--gold-soft); color: var(--orange-deep); font-weight: 700; font-size: 14px; padding: 6px 12px; border-top: 1px solid var(--line); }
.tl-r { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.tl-r.sel { background: var(--leaf-soft); }
.tl-n { min-width: 0; }
.tl-n .nm { font-weight: 600; word-break: break-word; }
.tl-n .un { color: var(--muted); font-size: 13px; }
.qc { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.qc button { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--lake); background: #fff; color: var(--lake); font-size: 22px; font-weight: 700; line-height: 1; padding: 0; }
.qc .plus { background: var(--lake); color: #fff; }
.qc .qv { width: auto; min-width: 88px; max-width: 128px; padding: 0 8px; font-size: 14px; font-weight: 700; border-color: var(--line); color: var(--muted); }
.qc .qv.has { color: var(--ink); border-color: var(--leaf); }
.hint { background: var(--lake-soft); border: 1px solid #bcd9de; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 10px; }
.calc { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--muted); margin-top: 2px; }
.calc .buy { color: var(--lake); } .calc .ok { color: var(--leaf); font-weight: 700; }
.sum .row { padding: 3px 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chips button { flex: 1; min-height: 44px; border-radius: 22px; border: 1.5px solid var(--lake); background: #fff; color: var(--lake); font-weight: 700; }
.tickmark { display: inline-block; margin-left: 6px; background: var(--leaf); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; font-size: 13px; text-align: center; vertical-align: middle; }
.tile.hl .tickmark, .tile .tickmark { background: var(--leaf); }

.rtl .rhead { display: none; }
.rrow { padding: 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start; }
.rrow.ok { background: var(--leaf-soft); } .rrow.edit { background: var(--amber-soft); }
.rname { grid-column: 1 / -1; } .rname .nm { font-weight: 700; }
.rcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cap { font-size: 12px; color: var(--muted); }
.tkp { display: flex; gap: 8px; }
.tk { width: 56px; height: 46px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-size: 24px; font-weight: 800; padding: 0; }
.tk.ok { color: var(--leaf); } .tk.ok.on { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.tk.no { color: var(--red); } .tk.no.on { background: var(--red); color: #fff; border-color: var(--red); }
.rrow .qc { justify-content: flex-start; } .rrow .qc .qv { min-width: 110px; }
@media (min-width: 700px) {
  .rtl .rhead { display: grid; grid-template-columns: 2.4fr 1fr 1.3fr 1.6fr 1.2fr; }
  .rtl .rhead span:last-child { min-width: 0; text-align: left; }
  .rrow { grid-template-columns: 2.4fr 1fr 1.3fr 1.6fr 1.2fr; align-items: center; }
  .rname { grid-column: auto; } .cap { display: none; }
}

.sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 3px solid var(--lake); padding-bottom: 12px; }
.sh-brand { font-size: 22px; font-weight: 800; color: var(--lake); } .sh-sub { color: var(--muted); font-size: 14px; }
.sh-ref { font-weight: 800; font-size: 17px; border: 2px solid var(--lake); border-radius: 8px; padding: 4px 10px; color: var(--lake); white-space: nowrap; }
.sh-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin: 10px 0; }
.sh-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.sh-t th { background: var(--lake); color: #fff; text-align: left; padding: 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.sh-t td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sh-t .q { text-align: right; width: 34%; font-weight: 700; white-space: nowrap; }
.sh-t tr.sc td { background: var(--gold-soft); color: var(--orange-deep); font-weight: 700; font-size: 13px; }
.sh-note { margin-top: 10px; font-size: 14px; }
.sh-foot { margin-top: 16px; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.pdfsheet { border: 0; border-radius: 0; padding: 36px; width: 794px; }
.pdfstate { display: inline-block; font-size: 13px; padding: 3px 10px; border-radius: 10px; background: var(--amber-soft); }
.pdfstate.ok { background: var(--leaf-soft); color: var(--leaf); font-weight: 700; }
.sess { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-top: 8px; border-radius: 10px; background: var(--amber-soft); font-size: 14px; }
.sess.done { background: var(--leaf-soft); }
a.btn { display: flex; align-items: center; justify-content: center; }
.sheet, .sheet *, .card, .tl-n, .muted { overflow-wrap: anywhere; word-break: break-word; }
.sheet .sh-t { width: 100%; }

.pgrid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 700px) { .pgrid { grid-template-columns: 1fr 1fr; } }
.rolepill { background: var(--lake-soft); color: var(--lake); border-radius: 20px; padding: 3px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { background: var(--leaf-soft); color: #1f5a37; border-radius: 8px; padding: 4px 9px; font-size: 13px; }
.pchip.key { background: var(--gold-soft); color: #6b4b0c; font-weight: 700; }
.pcard { margin-bottom: 12px; }

/* =====================================================================
   BRAND LAYER (v3.0) - proposed Hotel Lake Park visual system.
   Colours and typefaces are PROPOSED (not yet confirmed as official brand values).
   Styling only: no positions or functions are changed here.
   Display face: Cormorant Garamond (wordmark / greeting). Body: Inter (+ Noto Sans Sinhala).
   ===================================================================== */
:root {
  --lake-2: #2a7d9e; --gold-2: #ff914d; --gold-ink: #8a5400; --orange-deep: #a86400; --sand: #f3ebdd;
  --font-display: 'Gilda Display', Georgia, 'Noto Sans Sinhala', serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --sh-1: 0 1px 2px rgba(15,60,72,.07), 0 2px 8px rgba(15,60,72,.05);
  --sh-btn: 0 2px 0 rgba(6,32,40,.28), 0 8px 16px -6px rgba(15,76,92,.45);
  --ring: 0 0 0 3px #fff, 0 0 0 5px var(--gold);
}
body { background: var(--ivory); }
:focus-visible { outline: none; box-shadow: var(--ring); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lake); box-shadow: 0 0 0 3px rgba(15,76,92,.16); }
input, select, textarea, .tab, .chip, .seg button { transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s, transform .12s var(--ease); }

/* top bar */
.topbar { background: linear-gradient(135deg, var(--lake-2) 0%, var(--lake) 45%, var(--lake-dark) 100%); box-shadow: 0 2px 0 var(--gold), 0 6px 18px -8px rgba(6,32,40,.5); }
.topbar .ttl { letter-spacing: .01em; }
.topbar .back, .chip { transition: background-color .15s, transform .12s var(--ease); }
.topbar .back:active, .chip:active { transform: scale(.94); background: rgba(255,255,255,.28); }
@media (hover:hover) { .topbar .back:hover, .chip:hover { background: rgba(255,255,255,.26); } }

/* login / wordmark */
.logo { padding: 34px 0 20px; }
.brand { display: inline-block; }
.bword { font-family: var(--font-display); font-weight: 400; color: var(--lake); font-size: 40px; line-height: 1; letter-spacing: .01em; }
.bimg { display: block; max-height: 92px; max-width: 78%; width: auto; height: auto; margin: 0 auto; }
.bplace { margin-top: 8px; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.bwave { height: 10px; width: 120px; margin: 14px auto 10px; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5 T60 5 T80 5 T100 5 T120 5' fill='none' stroke='%23d98600' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.logo p { font-size: 15px; letter-spacing: .04em; }
.logo h1 { font-family: var(--font-display); font-size: 34px; }
.main > h2:first-child { font-family: var(--font-display); font-size: 30px; color: var(--lake); font-weight: 400; letter-spacing: .005em; }

/* buttons: raised, with hover / press / focus feedback */
.btn { position: relative; background: linear-gradient(180deg, var(--lake-2), var(--lake) 60%, var(--lake-dark)); box-shadow: var(--sh-btn); letter-spacing: .01em;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s, background-color .14s; }
.btn.green { background: linear-gradient(180deg, #3a9460, var(--leaf) 60%, #256a41); }
.btn.wa { background: linear-gradient(180deg, #2ab867, #1fa855 60%, #178a45); }
.btn.red { background: linear-gradient(180deg, #c8463d, var(--red) 60%, #96302a); }
.btn.sec { background: #fff; color: var(--lake); border: 2px solid var(--lake); box-shadow: 0 2px 0 rgba(15,76,92,.25); }
.btn.ghost { background: transparent; box-shadow: none; }
@media (hover:hover) {
  .btn:not([disabled]):hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 3px 0 rgba(6,32,40,.28), 0 12px 20px -8px rgba(15,76,92,.5); }
  .btn.sec:not([disabled]):hover { background: var(--lake-soft); filter: none; }
  .btn.ghost:hover { transform: none; filter: none; box-shadow: none; color: var(--lake-2); }
}
.btn:not([disabled]):active { transform: translateY(2px) scale(.985); filter: brightness(.95); box-shadow: 0 0 0 rgba(0,0,0,0), 0 2px 6px -2px rgba(6,32,40,.4); }
.btn.sec:not([disabled]):active { background: var(--lake-soft); }
.btn.ghost:active { transform: none; box-shadow: none; }
.btn[disabled] { box-shadow: none; filter: grayscale(.4); cursor: not-allowed; }
.cartbar .btn { box-shadow: var(--sh-btn), 0 10px 24px rgba(6,32,40,.18); }

/* "Send everything to" - two clear action buttons (same row, same actions) */
.sendall { flex-wrap: wrap; }
.btnpair { display: flex; gap: 8px; flex: 0 1 auto; min-width: 210px; }
.pbtn { flex: 1; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--lake); background: #fff; color: var(--lake); font-weight: 700; font-size: 14px; line-height: 1.15;
  box-shadow: 0 3px 0 var(--lake); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .15s, color .15s; }
.pbtn::before { content: '\2192'; font-weight: 800; opacity: .75; }
@media (hover:hover) { .pbtn:hover { background: var(--lake-soft); } }
.pbtn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--lake); background: var(--lake); color: #fff; }

/* cards, tiles, rows */
.card, .tile, .item, .tl, .who button, .sheet { box-shadow: var(--sh-1); }
.tile { transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s; }
.tile.hl { background: linear-gradient(135deg, var(--lake-2), var(--lake-dark)); box-shadow: 0 8px 18px -8px rgba(15,76,92,.7); }
@media (hover:hover) { .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,76,92,.35); border-color: #c9d9dc; } }
.tile:active, .who button:active, .alert:active { transform: scale(.975); }
.alert { transition: transform .12s var(--ease); box-shadow: var(--sh-1); }
.item, .tl-r { transition: background-color .15s, border-color .15s; }
.catlabel::before { content: ''; width: 6px; height: 16px; border-radius: 3px; background: var(--gold-2); display: inline-block; }

/* tabs, segments, chips */
.tab { box-shadow: 0 1px 0 rgba(15,60,72,.08); }
.tab:active, .seg button:active, .chips button:active { transform: scale(.96); }
@media (hover:hover) { .tab:not(.on):hover { border-color: var(--lake); color: var(--lake); } .seg button:not(.on):hover { background: var(--lake-soft); } .chips button:hover { background: var(--lake-soft); } }
.tab.on { box-shadow: 0 4px 10px -4px rgba(15,76,92,.6); }
.seg { box-shadow: var(--sh-1); }
.chips button { transition: transform .12s var(--ease), background-color .15s; box-shadow: 0 2px 0 rgba(15,76,92,.2); }

/* quantity steppers, tick buttons, PIN pad */
.qc button, .step button, .tk, .keys button, .who button { transition: transform .1s var(--ease), background-color .15s, box-shadow .15s, border-color .15s; }
.qc button:active, .step button:active, .tk:active { transform: scale(.88); }
.qc .plus, .step button.plus { background: linear-gradient(180deg, var(--lake-2), var(--lake)); box-shadow: 0 2px 0 var(--lake-dark); }
.tk { box-shadow: 0 2px 0 rgba(15,60,72,.12); }
.keys button { box-shadow: 0 2px 0 rgba(15,60,72,.14); }
.keys button:active { transform: scale(.94); background: var(--lake-soft); border-color: var(--lake); }
@media (hover:hover) { .keys button:hover, .who button:hover { border-color: var(--lake); } .who button:hover { transform: translateY(-1px); } }
.dots i { transition: background-color .15s, transform .15s var(--ease); }
.dots i.f { transform: scale(1.12); }
.who button { border-left: 4px solid var(--gold-2); transition: transform .12s var(--ease), border-color .15s; }
.who b { color: var(--lake); }

/* bottom / side navigation */
.bnav { box-shadow: 0 -4px 16px -8px rgba(6,32,40,.25); }
.bnav button { transition: color .15s, background-color .15s; }
.bnav button .ic { transition: transform .18s var(--ease); display: inline-block; }
.bnav button.on .ic { transform: translateY(-1px) scale(1.12); }
.bnav button:active .ic { transform: scale(.88); }
.bnav button.on::before { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
@media (min-width: 900px) { .bnav button:not(.on):hover { background: var(--sand); } }

/* table headers, purchase-list sheet */
.tl-h { background: linear-gradient(135deg, var(--lake), var(--lake-dark)); top: 66px; }
.sh-brand { line-height: 1; }
.sh-brand .bimg { max-height: 58px; max-width: 220px; margin: 0; }
.sh-head { border-bottom: 3px double var(--gold); }
.sh-t th { background: linear-gradient(135deg, var(--lake), var(--lake-dark)); }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetup { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.main.enter { animation: rise .3s var(--ease); }
.logo { animation: rise .45s var(--ease); }
.modalwrap { animation: fade .18s ease-out; }
.modal { animation: sheetup .24s var(--ease); }
.toast { animation: toastin .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- logos ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tlogo { display: block; height: 30px; width: auto; }
.topbar .ttl:has(.tlogo) { display: flex; align-items: center; }
.nlogo { display: none; }
@media (min-width: 900px) { .nlogo { display: block; position: absolute; top: 14px; left: 20px; width: 170px; height: auto; } .bnav { position: fixed; } }
/* website look: crisper headings, Barlow weights */
.topbar .ttl, .btn, .tab, .tile, .who b { font-weight: 600; }
.btn { letter-spacing: .02em; }

/* ---- elephants ---- */
.ele { display: block; height: auto; overflow: visible; }
.bele { margin: 12px auto 4px; width: min(300px, 78%); }
.bele .ele { width: 100%; animation: stroll 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
.card.empty { display: flex; align-items: center; gap: 14px; }
.card.empty .ele { width: 68px; flex: none; opacity: .95; }
@keyframes stroll { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-.6deg); } }

/* v3.1 back / close buttons */
.modal{position:relative}
.mclose{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--lake-soft);color:var(--lake-dark);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .15s}
.mclose:hover{background:#d3e6ee}.mclose:active{transform:scale(.92)}
.modal h2{padding-right:44px}
.pinback{margin:4px 0 0;align-self:flex-start}
/* v3.1 report tables: keep quantities on one line (the table scrolls sideways if needed) */
.card.scroll td:not(:first-child){white-space:nowrap}
.card.scroll td:first-child,.card.scroll th:first-child{min-width:150px}

/* ---- production additions ---- */
.busy{position:fixed;inset:0;z-index:9999;background:rgba(255,255,255,.6);align-items:center;justify-content:center}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid #cfe0e8;border-top-color:#196281;animation:hlpspin .8s linear infinite}
@keyframes hlpspin{to{transform:rotate(360deg)}}
.banner.off{background:#fff3cd;color:#5c4400;border-bottom:1px solid #e6cf7a}
.banner.off button{margin-left:6px}
#lgform{margin-top:6px}
.bele .ele.shop{width:min(300px,86vw);height:auto}