/* Tallyo side menu — shared by every signed-in page (and the dashboard). Self-contained colors, light + dark. */
:root { --sb-w: 252px; --sb-bg: #ffffff; --sb-ink: #15221d; --sb-mut: #6b7a73; --sb-cap: #93a19a; --sb-line: #e6ebe8; --sb-hover: #f1f5f3; --sb-on: #0f6b51; --sb-on-bg: linear-gradient(135deg, #12805f, #1aa77b); --sb-brand: #0f6b51; --sb-top: rgba(255,255,255,.86); }
html[data-theme='dark'] { --sb-bg: #111916; --sb-ink: #e7efeb; --sb-mut: #93a39b; --sb-cap: #6f8078; --sb-line: #1f2b27; --sb-hover: #18231f; --sb-on-bg: linear-gradient(135deg, #1f8f6b, #2fb487); --sb-brand: #2a9d78; --sb-top: rgba(13,19,17,.86); }

.sb { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sb-w); background: var(--sb-bg); border-inline-end: 1px solid var(--sb-line); display: flex; flex-direction: column; z-index: 80; color: var(--sb-ink); font-family: var(--text, Inter, system-ui, sans-serif); }
.sb * { box-sizing: border-box; }
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 14px; }
.sb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sb-ink); font-weight: 750; font-size: 21px; letter-spacing: -.03em; font-family: var(--display, inherit); }
.sb-x { display: none; }
.sb-store { display: flex; align-items: center; gap: 10px; margin: 2px 14px 10px; padding: 10px 12px; border-radius: 14px; background: var(--sb-hover); min-width: 0; }
.sb-store div { min-width: 0; display: grid; }
.sb-store b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-store small { font-size: 11.5px; color: var(--sb-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-avatar { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sb-on-bg); color: #fff; font-weight: 800; font-size: 14px; }
.sb-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; }
.sb-group { margin-top: 14px; }
.sb-cap { font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-cap); padding: 0 12px 6px; }
html[dir='rtl'] .sb-cap { letter-spacing: 0; font-size: 12.5px; }
.sb-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin: 2px 0; border: 0; border-radius: 12px; background: transparent; color: var(--sb-ink); font: inherit; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer; text-align: start; transition: background .15s, color .15s, box-shadow .2s; }
.sb-item svg { flex: none; color: var(--sb-mut); transition: color .15s; }
.sb-item:hover { background: var(--sb-hover); }
.sb-item.on { background: var(--sb-on-bg); color: #fff; box-shadow: 0 8px 20px rgba(18, 128, 95, .28); }
.sb-item.on svg { color: #fff; }
.sb-foot { border-top: 1px solid var(--sb-line); padding: 10px 12px 16px; }
.sb-foot form { margin: 0; }
.sb-foot .sb-item { font-size: 14px; padding: 8px 12px; }
.sb [hidden] { display: none !important; }
.sb-ic-dark, .sb-ic-light { display: inline-flex; }
.sb-ic-light, .sb-l-light { display: none; }
html[data-theme='dark'] .sb-ic-dark, html[data-theme='dark'] .sb-l-dark { display: none; }
html[data-theme='dark'] .sb-ic-light { display: inline-flex; }
html[data-theme='dark'] .sb-l-light { display: inline; }

/* phone top bar + drawer */
.sb-top { display: none; }
.sb-scrim { display: none; }
body.sb-on { padding-inline-start: var(--sb-w); }

@media (max-width: 1023px) {
  body.sb-on { padding-inline-start: 0; }
  .sb { width: min(86vw, 320px); transform: translateX(-102%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  html[dir='rtl'] .sb { transform: translateX(102%); }
  body.sb-open .sb { transform: none; }
  .sb-x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--sb-ink); cursor: pointer; }
  .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(8, 14, 12, .38); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 79; }
  body.sb-open .sb-scrim { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  .sb-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; position: sticky; top: 0; z-index: 70; height: 58px; padding: 0 8px; background: var(--sb-top); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--sb-line); color: var(--sb-ink); }
  .sb-burger { width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--sb-ink); display: grid; place-items: center; cursor: pointer; }
  .sb-burger:active { background: var(--sb-hover); }
  .sb-title { text-align: center; font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-top .sb-avatar { justify-self: end; margin-inline-end: 6px; width: 30px; height: 30px; font-size: 13px; }
  .sb-item { padding: 12px 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sb, .sb-scrim { transition: none; } }
.sb-plan { display: block; margin: -4px 14px 8px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 650; text-decoration: none; color: var(--sb-on); background: color-mix(in srgb, #1aa77b 12%, transparent); text-align: center; }
.sb-plan:hover { background: color-mix(in srgb, #1aa77b 20%, transparent); }
/* WhatsApp help button */
.wa-fab { position: fixed; z-index: 60; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 0; height: 56px; min-width: 56px; padding: 0 14px; border-radius: 99px; background: #25d366; color: #fff; text-decoration: none; font: 600 14px/1 inherit; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.wa-fab span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s, margin .25s; }
.wa-fab:hover span, .wa-fab:focus-visible span { max-width: 220px; margin-inline-start: 10px; }
@media print { .wa-fab { display: none; } }
.sb-plan.warn { background: #fff4d6 !important; color: #7a5200 !important; border-color: #f0c45a !important; }
html[data-theme='dark'] .sb-plan.warn { background: #3a2c08 !important; color: #f3d27a !important; }
.sb-avatar.img { background: #fff; overflow: hidden; border: 1px solid var(--sb-line); }
.sb-avatar.img img { width: 100%; height: 100%; object-fit: cover; }