/* Party Portal – banana-leaf green, turmeric highlights, quiet working surfaces */
[hidden] { display: none !important; }
:root {
  --leaf: #1f5c3a; --leaf-dark: #154329; --leaf-soft: #e3eee6;
  --turmeric: #c98a0b; --turmeric-soft: #fbf1d9;
  --ink: #1b2a24; --muted: #5d6d66; --line: #d3ddd7;
  --bg: #eef2ef; --surface: #fff; --red: #b3261e; --red-soft: #fbe7e5;
  --radius: 6px;
  font-family: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--leaf); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 2px; }

/* Shell */
body.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: var(--leaf-dark); color: #dfe9e2; display: flex; flex-direction: column; padding: 1.25rem .75rem; position: sticky; top: 0; height: 100vh; }
.brand { color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 1.25rem; }
.leaf { width: 22px; height: 12px; background: #7fc28f; border-radius: 0 100% 0 100%; display: inline-block; transform: rotate(-20deg); }
.leaf.big { width: 34px; height: 18px; background: var(--leaf); margin-right: .5rem; vertical-align: middle; }
.side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side nav a { color: #dfe9e2; text-decoration: none; padding: .5rem .75rem; border-radius: var(--radius); }
.side nav a:hover { background: rgba(255,255,255,.08); }
.side nav a.on { background: #fff; color: var(--leaf-dark); font-weight: 600; }
.navgroup { margin: 1rem .75rem .25rem; font-size: .8rem; color: #9fbfa9; }
.me { border-top: 1px solid rgba(255,255,255,.15); padding: .75rem .5rem 0; display: flex; flex-direction: column; font-size: .85rem; }
.me span { color: #9fbfa9; }
.me a { color: #fff; margin-top: .4rem; }
.main { padding: 1.5rem 2rem 3rem; max-width: 1280px; width: 100%; }

.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.crumb { margin: 0 0 .25rem; font-size: .85rem; color: var(--muted); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.panel.flush { padding: 0; overflow: hidden; }
.panel .padded { padding: 1rem 1.25rem 0; }
.panel.narrow { max-width: 520px; }
.panelhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.panelhead h2 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.grid2.wide-left { grid-template-columns: 2fr 1fr; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.cols3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 .75rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.stats div { background: var(--surface); padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.stats b { font-size: 1.35rem; }
.stats span { color: var(--muted); font-size: .85rem; }

/* Lists */
.row-link { display: flex; align-items: center; gap: .9rem; padding: .6rem .25rem; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.row-link:hover { background: var(--leaf-soft); }
.row-link > span:nth-child(2), .row-link > span:first-child:not(.time) { flex: 1; }
.row-link small { color: var(--muted); }
.time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5rem; color: var(--leaf); }
.amount { font-variant-numeric: tabular-nums; }
ul.plain { padding-left: 1.1rem; }

/* Forms */
label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .88rem; }
label small { font-weight: 400; color: var(--muted); display: block; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid #b9c7bf; border-radius: var(--radius); }
textarea { resize: vertical; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 .8rem; }
fieldset.choice legend { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
fieldset.choice label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .7rem; margin: 0 .35rem .35rem 0; cursor: pointer; }
fieldset.choice label:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); }
fieldset.choice input, label.check input { width: auto; margin: 0; display: inline; }
label.check { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; margin: 0; white-space: nowrap; }
.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline input, .inline select { margin: 0; width: auto; flex: 1 1 110px; }
.inline.tight input[type=number] { flex: 0 0 64px; }
.inline label { margin: 0; }
.filters { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input, .filters select { width: auto; margin: 0; }
.filters input[type=search] { flex: 1 1 220px; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
form.stack { margin-bottom: .5rem; }

.btn { display: inline-block; padding: .5rem .9rem; border: 1px solid #b9c7bf; background: #fff; color: var(--ink); border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--leaf); }
.btn.primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn.primary:hover { background: var(--leaf-dark); }
.btn.danger { color: var(--red); border-color: #e3aaa5; }
.btn.small { padding: .25rem .55rem; font-size: .82rem; }
.btn.wide { width: 100%; }

/* Tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; color: var(--muted); font-weight: 600; background: #f6f9f7; }
td small { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--red); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--leaf-soft); }
tr.attention td { background: var(--turmeric-soft); }
tr.locked td { opacity: .55; }

/* Status */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: #e7ece9; color: var(--ink); white-space: nowrap; }
.st-hold { background: var(--turmeric-soft); color: #7a5306; }
.st-tentative { background: #fff4c7; color: #6b5200; }
.st-confirmed, .st-checked_in { background: var(--leaf-soft); color: var(--leaf-dark); }
.st-locked { background: #dde7f3; color: #23466e; }
.st-in_progress { background: var(--leaf); color: #fff; }
.st-completed, .st-checked_out { background: #e7ece9; }
.st-closed { background: #cfd8d3; }
.st-cancelled, .st-released, .st-no_show { background: var(--red-soft); color: var(--red); }

/* Booking progress rail – the one bold element */
.rail { list-style: none; display: flex; padding: 0; margin: 0 0 1.25rem; counter-reset: s; overflow-x: auto; }
.rail li { flex: 1; min-width: 96px; position: relative; padding: 1.6rem .25rem 0; text-align: center; font-size: .82rem; color: var(--muted); }
.rail li::before { content: ""; position: absolute; top: .55rem; left: 0; right: 0; height: 4px; background: var(--line); }
.rail li::after { content: ""; position: absolute; top: .2rem; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.rail li.done { color: var(--leaf-dark); }
.rail li.done::before, .rail li.now::before { background: var(--leaf); }
.rail li.done::after { background: var(--leaf); border-color: var(--leaf); }
.rail li.now { color: var(--ink); font-weight: 700; }
.rail li.now::after { border-color: var(--turmeric); background: var(--turmeric); box-shadow: 0 0 0 4px var(--turmeric-soft); }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs a { padding: .55rem .9rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-color: var(--leaf); font-weight: 600; }

dl.facts { display: grid; grid-template-columns: 8rem 1fr; gap: .35rem .75rem; margin: 0 0 1rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
dl.amounts { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
dl.amounts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.amounts .total { font-weight: 700; }

.flash { padding: .6rem .85rem; border-radius: var(--radius); margin-bottom: .75rem; border-left: 4px solid var(--leaf); background: var(--leaf-soft); }
.flash.warn { border-color: var(--turmeric); background: var(--turmeric-soft); }
.flash.error { border-color: var(--red); background: var(--red-soft); }

.need { display: inline-block; margin: .15rem .3rem .15rem 0; padding: .1rem .5rem; border-radius: 99px; background: var(--leaf-soft); }
.need.short { background: var(--turmeric-soft); color: #7a5306; font-weight: 600; }
.veg, .nonveg { display: inline-block; width: 10px; height: 10px; border: 2px solid; margin-right: .45rem; position: relative; top: 1px; }
.veg { border-color: #2e7d32; background: radial-gradient(#2e7d32 40%, transparent 45%); }
.nonveg { border-color: #8d3a1f; background: radial-gradient(#8d3a1f 40%, transparent 45%); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .45rem 0; border-top: 1px solid var(--line); }
.timeline time { color: var(--muted); display: inline-block; min-width: 8.5rem; font-variant-numeric: tabular-nums; }

/* Feature switches */
table.features td:first-child { width: 55%; }
.pill { display: inline-block; min-width: 2.6rem; text-align: center; padding: .1rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.pill.on { background: var(--leaf); color: #fff; }
.pill.off { background: #e7ece9; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid #b9c7bf; border-radius: var(--radius); overflow: hidden; }
.seg button { font: inherit; font-size: .85rem; padding: .3rem .7rem; border: 0; border-right: 1px solid #b9c7bf; background: #fff; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--leaf); color: #fff; font-weight: 600; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dow { background: #f6f9f7; padding: .4rem .5rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.day { background: var(--surface); min-height: 100px; padding: .35rem; display: flex; flex-direction: column; gap: 3px; }
.day.blank { background: #f6f9f7; }
.day.today .dnum { background: var(--turmeric); color: #fff; border-radius: 99px; padding: 0 .4rem; }
.dnum { font-size: .8rem; font-weight: 600; align-self: flex-start; }
.ev { font-size: .75rem; padding: .1rem .35rem; border-radius: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Login */
body.guest { display: grid; place-items: center; min-height: 100vh; }
body.guest .main { max-width: 400px; padding: 1.5rem; }
.login { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }

@media (max-width: 900px) {
  body.app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem; }
  .brand { padding: 0 .5rem; }
  .side nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .navgroup { display: none; }
  .me { border: 0; padding: 0 .5rem; flex-direction: row; gap: .6rem; align-items: center; margin-left: auto; }
  .me span { display: none; }
  .me a { margin: 0; }
  .main { padding: 1rem; }
  .grid2, .grid2.wide-left, .cols2, .cols3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .day { min-height: 64px; }
  .ev { font-size: 0; height: 6px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
table.features td:first-child, .panel.flush table th:first-child, .panel.flush table td:first-child { padding-left: 1.25rem; }

.headside { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.itempick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem 1rem; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; }
.itempick fieldset { border: 0; margin: 0; padding: 0; }
.itempick legend { font-weight: 600; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.itempick label.check { display: flex; margin: .15rem 0; white-space: normal; }
.inline select { flex: 1 1 160px; }

/* Enquiries */
.funnel { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: 0; margin: .75rem 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.funnel li { background: var(--surface); padding: .6rem .7rem; display: flex; flex-direction: column; }
.funnel b { font-size: 1.3rem; }
.funnel span { font-size: .82rem; color: var(--muted); }
.funnel .f-won { background: var(--leaf-soft); }
.funnel .f-lost { background: #faf3f2; }
.quote { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .6rem; opacity: .7; }
.quote.open { opacity: 1; border-color: var(--leaf); }
.qhead { display: flex; justify-content: space-between; align-items: center; }
.quote p { margin: .3rem 0 .5rem; }
.panel.wide-form { max-width: 760px; }
.st-new, .st-draft { background: #e7ece9; }
.st-contacted, .st-site_visit, .st-sent { background: #dde7f3; color: #23466e; }
.st-quoted, .st-negotiation, .st-pending_approval { background: var(--turmeric-soft); color: #7a5306; }
.st-won, .st-accepted { background: var(--leaf); color: #fff; }
.st-lost, .st-rejected, .st-superseded { background: var(--red-soft); color: var(--red); }
.st-superseded { background: #eee; color: var(--muted); }
@media (max-width: 900px) { .funnel { grid-template-columns: repeat(4, 1fr); } }

/* Store & recipes */
tr.group td { background: #f6f9f7; font-size: .8rem; font-weight: 600; color: var(--muted); padding-top: .4rem; padding-bottom: .4rem; }
tr.current td { background: var(--leaf-soft); }
input.qty { width: 7rem; margin: 0 0 0 auto; text-align: right; }
.recipe-grid { max-height: 60vh; overflow: auto; padding-right: .25rem; }
.recipe-grid h3 { margin: .9rem 0 .3rem; font-size: .82rem; color: var(--muted); }
.rline { display: grid; grid-template-columns: 1fr 6.5rem 2.5rem; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-weight: 400; }
.rline input { margin: 0; text-align: right; }
.rline.used span { font-weight: 600; }

/* Logistics */
.trip-event { border-top: 1px solid var(--line); padding: .75rem 0; }
.trip-event p { margin: .25rem 0 .5rem; }
.veh { border-top: 1px solid var(--line); padding: .6rem 0; }
.veh p, .veh ul { margin: .25rem 0 0; }
label.tick { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; gap: .5rem; font-weight: 400; padding: .45rem .25rem; margin: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
label.tick input { width: 1.1rem; height: 1.1rem; margin: 0; }
label.tick.done span { color: var(--muted); text-decoration: line-through; }
label.tick small { color: var(--muted); text-align: right; }
.otp { font-size: 1.4rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.st-planned { background: #e7ece9; } .st-loading { background: var(--turmeric-soft); color: #7a5306; }
.st-dispatched { background: #dde7f3; color: #23466e; } .st-delivered { background: var(--leaf); color: #fff; } .st-returned { background: #cfd8d3; }

/* Reports */
.stats { grid-template-columns: repeat(4, 1fr); }
.barrow { display: grid; grid-template-columns: 9rem 1fr 8.5rem; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .9rem; }
.barrow strong { text-align: right; font-variant-numeric: tabular-nums; }
.bar { display: block; height: .7rem; background: #edf1ee; border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--leaf); border-radius: 99px; }
.bar.alt > span { background: #3f7fb0; }
.bar.warn > span { background: var(--turmeric); }
tr.total td { font-weight: 700; background: #f6f9f7; }
@media (max-width: 700px) { .barrow { grid-template-columns: 6.5rem 1fr 6.5rem; } }

/* Sweets & snacks */
.prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
label.prod { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; margin: 0; font-weight: 400; }
label.prod.on { border-color: var(--leaf); background: var(--leaf-soft); }
label.prod .pname { font-weight: 600; }
label.prod input { margin-top: .25rem; }
.livetotal { font-size: 1.05rem; margin: .75rem 0; }
.season { display: flex; gap: .4rem; align-items: flex-end; overflow-x: auto; padding: .75rem 1rem; }
.season a { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 3.2rem; text-decoration: none; color: var(--ink); padding: .25rem; border-radius: var(--radius); }
.season a.on { background: var(--leaf-soft); outline: 1px solid var(--leaf); }
.season .sbar { width: 1.4rem; background: var(--turmeric); border-radius: 4px 4px 0 0; }
.season small { color: var(--muted); white-space: nowrap; }
/* shop 'confirmed' keeps the booking colour */ .st-packed { background: var(--turmeric-soft); color: #7a5306; }
.st-out_for_delivery { background: #dde7f3; color: #23466e; } .st-failed { background: var(--red-soft); color: var(--red); }

/* Weddings / multi-day */
fieldset.session { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .8rem 1.1rem; margin: 0 0 1rem; }
fieldset.session legend { font-weight: 700; padding: 0 .4rem; }
.sessions-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.scard { display: flex; flex-direction: column; gap: .3rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--turmeric); border-radius: var(--radius); padding: .75rem .9rem; color: var(--ink); text-decoration: none; }
.scard:hover { border-color: var(--leaf); }
.scard.ended { opacity: .55; border-top-color: var(--line); }
.scard .sday { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.scard .sfoot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; text-align: right; font-variant-numeric: tabular-nums; }
.groupbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; background: var(--turmeric-soft); border-radius: var(--radius); padding: .45rem .6rem; margin-bottom: 1rem; }
.groupbar a { text-decoration: none; padding: .2rem .55rem; border-radius: 99px; color: var(--ink); }
.groupbar a.on { background: var(--leaf); color: #fff; }
.groupbar a.ended { text-decoration: line-through; opacity: .6; }
.wtag { font-size: .78rem; font-weight: 600; color: #7a5306; }

/* Customer online page */
body.public { display: block; background: var(--bg); }
.pmain { max-width: 860px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.phead { display: flex; gap: .75rem; align-items: center; margin: .5rem 0 1rem; }
.phead h1 { margin: 0; }
.stepno { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--leaf); color: #fff; font-size: .85rem; margin-right: .4rem; }
.venuegrid, .menugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-bottom: .75rem; }
label.vcard, label.mcard { display: flex; flex-direction: column; gap: .2rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; margin: 0; font-weight: 400; cursor: pointer; }
label.vcard input, label.mcard input { width: auto; margin: 0 0 .2rem; }
label.vcard:has(input:checked), label.mcard:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); }
label.vcard.off { opacity: .55; cursor: not-allowed; }
.vstate { font-size: .8rem; font-weight: 600; color: var(--leaf); }
label.vcard.off .vstate { color: var(--red); }
.mcard .price { font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bigstatus { font-size: 1.35rem; margin: .2rem 0 .6rem; }
.payamt { font-size: 1.8rem; font-weight: 700; margin: .2rem 0 .8rem; font-variant-numeric: tabular-nums; }
.pfoot { text-align: center; margin-top: 2rem; }
.st-online { background: #3f7fb0; color: #fff; }
.online-panel { border-left: 4px solid #3f7fb0; }
label.vcard input, label.mcard input { align-self: flex-start; accent-color: var(--leaf); }

/* Notifications */
td.msg { max-width: 460px; font-size: .88rem; }
.notif-row { border-top: 1px solid var(--line); padding: .75rem 0; }
.notif-row textarea { margin: .35rem 0; }
.navcount { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--turmeric); color: #fff; font-size: .75rem; text-align: center; }
.st-queued { background: var(--turmeric-soft); color: #7a5306; } .st-sent { background: var(--leaf); color: #fff; } .st-skipped { background: #e7ece9; }

/* Vessel transfers */
.panel.transfer { margin-bottom: .75rem; }
.panel.transfer.focus { outline: 2px solid var(--leaf); }
.panel.transfer.late { border-left: 4px solid var(--red); }
.panel.transfer p { margin: .35rem 0 .6rem; }
.suggest { background: var(--turmeric-soft); border-radius: var(--radius); padding: .6rem .8rem; margin-top: .75rem; }
.suggest ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.st-requested { background: var(--turmeric-soft); color: #7a5306; } .st-approved { background: #dde7f3; color: #23466e; }
.st-received { background: var(--leaf-soft); color: var(--leaf-dark); } .st-returned { background: #cfd8d3; } .st-rejected { background: var(--red-soft); color: var(--red); }
.st-review { background: var(--turmeric-soft); color: #7a5306; } .st-expired { background: #e7ece9; }

/* ===== Menu with icons (v14) ===== */
.ic { flex: none; display: block; }
.side { overflow: hidden; }
.side nav { overflow-y: auto; overflow-x: hidden; margin: 0 -.25rem; padding: 0 .25rem; scrollbar-width: thin; }
.side nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; white-space: nowrap; position: relative; }
.side nav a .ic { opacity: .85; }
.side nav a.on .ic { opacity: 1; color: var(--leaf); }
.side nav a .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side nav a .navcount { margin-left: auto; }
.side nav a:focus-visible, .collapse:focus-visible, .signout:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 1px; }
.navgroup { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.me { flex-direction: row; align-items: center; gap: .6rem; padding: .75rem .35rem .25rem; }
.me .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--turmeric); color: #fff; font-weight: 700; }
.me .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.me .who small { color: #9fbfa9; }
.me .signout { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); color: #dfe9e2; margin: 0; flex: none; }
.me .signout:hover { background: rgba(255,255,255,.1); }
.me .signout .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.collapse { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .45rem .7rem; background: none; border: 0; color: #9fbfa9; font: inherit; font-size: .85rem; cursor: pointer; border-radius: var(--radius); }
.collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.collapse .ic { transition: transform .2s; }

/* Collapsed: icons only, names on hover */
html.nav-collapsed body.app { grid-template-columns: 68px 1fr; }
html.nav-collapsed .side { padding-left: .5rem; padding-right: .5rem; }
html.nav-collapsed .side .lbl { display: none; }
html.nav-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
html.nav-collapsed .side nav a { justify-content: center; padding: .55rem 0; }
html.nav-collapsed .side nav a .navcount { position: absolute; top: 2px; right: 4px; min-width: 1.05rem; padding: 0 .25rem; font-size: .65rem; line-height: 1.05rem; }
html.nav-collapsed .navgroup { height: 1px; margin: .6rem .5rem; background: rgba(255,255,255,.15); }
html.nav-collapsed .me { flex-direction: column; padding-left: 0; padding-right: 0; }
html.nav-collapsed .collapse { justify-content: center; padding: .45rem 0; }
html.nav-collapsed .collapse .ic { transform: rotate(180deg); }

/* Phones & small tablets: brand + user on top, icon strip you can swipe */
@media (max-width: 900px) {
  body.app, html.nav-collapsed body.app { grid-template-columns: 1fr; }
  .side, html.nav-collapsed .side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .45rem .6rem .35rem; }
  .brand, html.nav-collapsed .brand { padding: 0 .4rem; flex: 1; justify-content: flex-start; }
  html.nav-collapsed .brand .lbl { display: inline; }
  .me, html.nav-collapsed .me { order: 2; border: 0; flex-direction: row; padding: 0; }
  .me .who { display: none; }
  .collapse { display: none; }
  .side nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .25rem; margin: .35rem -.6rem 0; padding: 0 .6rem .15rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a, html.nav-collapsed .side nav a { flex: none; flex-direction: column; justify-content: center; gap: .15rem; min-width: 64px; padding: .35rem .45rem; font-size: .7rem; scroll-snap-align: start; }
  .side nav a .lbl, html.nav-collapsed .side nav a .lbl { display: block; flex: none; max-width: 76px; text-align: center; }
  .side nav a .navcount, html.nav-collapsed .side nav a .navcount { position: absolute; top: 1px; right: 6px; min-width: 1.05rem; padding: 0 .25rem; font-size: .62rem; line-height: 1.05rem; }
  .navgroup, html.nav-collapsed .navgroup { display: block; flex: none; width: 1px; height: 34px; margin: 0 .3rem; align-self: center; background: rgba(255,255,255,.2); }
  .navgroup .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .collapse .ic { transition: none; } }
/* Let the grid column shrink so the icon strip scrolls inside the screen instead of widening the page */
.side, .main { min-width: 0; }
@media (max-width: 900px) {
  body.app, html.nav-collapsed body.app { grid-template-columns: minmax(0, 1fr); }
  .side { width: 100%; }
}