/* ============================================================================
 * app-shell.css — shared "your stuff" sidebar layout.
 *
 * Drop-in pattern. Pages that opt into the app-shell sidebar do this:
 *
 *   $extra_head = '<link rel="stylesheet" href="/assets/css/app-shell.css" />
 *                  <link rel="stylesheet" href="/assets/css/page.css" />';
 *   ...
 *   require $P . '/nav.php';
 *   require $P . '/app-shell-top.php';      ← opens .app-shell + sidebar
 *   ?> <div class="mgc-page">…page content…</div> <?php
 *   require $P . '/app-shell-bottom.php';   ← closes them
 *   require $P . '/footer.php';
 *
 * The sidebar lives BELOW the fixed #mainNav (top: 89px), stretches the full
 * viewport height of the remaining space, and scrolls independently of the
 * main column. The per-page .mgc-{page} wrapper inside .app-main keeps its
 * own padding/width math — app-main just provides the column.
 *
 * Hidden under 1100px (the breakpoint where the existing pages start
 * single-column anyway). Mobile users still navigate via the top nav burger.
 * ========================================================================== */

/* ---- shell grid ---- */
.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 100%;
  align-items: start;
}

/* ---- sidebar ---- */
.app-sidebar {
  position: sticky;
  top: 89px;                        /* clears fixed #mainNav (89px tall on desktop) */
  height: calc(100vh - 89px);
  overflow-y: auto;
  padding: 24px 18px;
  background: rgba(255, 255, 255, 0.42);
  border-right: 1px solid rgba(24, 58, 42, .10);
  scrollbar-width: thin;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(24,58,42,.18); border-radius: 999px; }

.app-side-section { margin-bottom: 18px; }
.app-side-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7e857d;
  font-weight: 850;
  margin: 8px 12px 10px;
}
.app-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  color: #314133;
  font-weight: 750;
  font-size: 14px;
  margin-bottom: 3px;
  text-decoration: none;
  transition: background .15s ease;
  border: 1px solid transparent;
}
.app-side-link:hover { background: #eff8ee; }
.app-side-link .left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.app-side-link .left .emoji {
  width: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.app-side-link.active {
  background: #eaf5ea;
  color: #19492f;
  font-weight: 900;
  border-color: rgba(31, 107, 66, .14);
}
.app-side-pill {
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  background: #19492f;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ─── Image-banner row (e.g. Harvest Hustle wooden-sign logo) ─────────
   Some sidebar entries ship branded artwork that already contains
   their own typography — for those we suppress the emoji+text row
   and let the image fill the link width as a button-style banner. */
.app-side-link.app-side-link-image {
  padding: 6px;                       /* tighter — image is its own frame */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  display: block;                     /* override the row's flex layout */
  text-align: center;
  transition: transform .15s ease, filter .15s ease;
}
.app-side-link.app-side-link-image:hover {
  background: transparent;
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 14px rgba(19, 41, 29, .22));
}
.app-side-link.app-side-link-image.active {
  background: rgba(31, 107, 66, .08);
  border-color: rgba(31, 107, 66, .18);
}
.app-side-link.app-side-link-image .app-side-pill,
.app-side-link.app-side-link-image .app-side-tierpill {
  position: absolute;
  top: 6px;
  right: 6px;
}
.app-side-banner {
  display: block;
  width: 100%;
  height: auto;
  /* The current Harvest Hustle artwork is ~2.31:1 wide:tall but visually
     dense with the "The Game" plaque underneath the ribbon — 120px gives
     enough vertical room for the plaque to read without dominating the
     sidebar. Previous 86px clipped the bottom plaque on some viewports. */
  max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;        /* let clicks go to the <a> wrapper */
}

/* ─── Tier-locked link state ──────────────────────────────────────────
   When an item requires a tier the user doesn't have, the link is shown
   greyed out, with a small tier pill on the right doubling as an upgrade
   CTA. Clicking the row navigates to /billing. The hover lift is removed
   to avoid suggesting it's a normal clickable nav item. */
.app-side-link.locked {
  color: #8a948c;
  opacity: .72;
}
.app-side-link.locked:hover {
  background: #f5f1e9;     /* warm cream, distinct from #eff8ee hover */
  opacity: .92;
}
.app-side-link.locked .emoji { filter: grayscale(.55) opacity(.85); }

/* Tier pill: gold/cream color to distinguish from the green count badge.
   Different tiers get distinct accent colors so users can learn the
   visual vocabulary (PLUS=green, PRO=deep green, ORG=blue, PARTNER=gold). */
.app-side-tierpill {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f5e4b8;
  color: #6b4f08;
  border: 1px solid rgba(107, 79, 8, .15);
  text-transform: uppercase;
}
/* PLUS / PRO tier pills — green family */
.app-side-link.locked[title*="Sales"] .app-side-tierpill,
.app-side-tierpill:where([data-tier="plus"]) {
  background: #d8efd6;
  color: #1c4a2e;
  border-color: rgba(28, 74, 46, .18);
}
/* When a future tweak wants per-tier color, add data-tier="plus|pro|org|partner"
   to the pill in the partial. The selectors above are conservative defaults. */

/* upgrade promo at the bottom of the sidebar (Free tier only) */
.app-side-promo {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #edf8ee, #e4f1e6);
  border: 1px solid rgba(31, 107, 66, .10);
  box-shadow: 0 8px 22px rgba(19, 41, 29, .06);
  text-align: center;
}
.app-side-promo .mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(19, 41, 29, .08);
}
.app-side-promo h4 {
  margin: 0 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  letter-spacing: -.02em;
  color: #19492f;
}
.app-side-promo p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #4a5249;
  line-height: 1.4;
}
.app-side-promo .upgrade-btn {
  display: block;
  width: 100%;
  background: #19492f;
  color: #fff;
  padding: 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.app-side-promo .upgrade-btn:hover { background: #1f6b42; }

/* ---- main column ---- */
.app-main {
  min-width: 0;                 /* prevents grid blowup from intrinsic content */
}

/* ---- nested page wrappers ---- */
/* The per-page .mgc-{page} wrappers were designed for full-width layouts and
   include their own 92px top padding to clear the fixed nav. When nested
   inside .app-main, the top padding is still needed (nav is fixed), but the
   width-clamp math should now operate within the remaining column. The
   wrappers' existing `width: min(NNNpx, calc(100% - 36px))` already does
   the right thing automatically. No per-page CSS override required. */

/* ─── Mobile drawer toggle (FAB) + scrim ──────────────────────────────
   Hidden on desktop. On mobile, a small fixed pill-shaped button at the
   bottom-left fires a CSS-only :target slide-in for the sidebar. No JS
   needed for the basic open/close (we add small JS for nicer scroll-lock
   + outside-tap-close, but the core works without it). */
.app-side-fab {
  display: none;             /* mobile-only */
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 45;               /* above page content + most fixed widgets */
  cursor: pointer;
  touch-action: manipulation;          /* kill the 300ms tap delay on iOS */
  -webkit-tap-highlight-color: rgba(25, 73, 47, 0.25);
  -webkit-appearance: none;
  background: #19492f;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px 11px 14px;
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(19, 41, 29, .28);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
}
.app-side-fab:hover { background: #1f6b42; }
.app-side-fab .menu-icon {
  display: inline-block;
  width: 18px; height: 12px;
  position: relative;
  margin-right: 8px;
  vertical-align: -1px;
}
.app-side-fab .menu-icon::before,
.app-side-fab .menu-icon::after,
.app-side-fab .menu-icon span {
  content: ""; display: block; position: absolute; left: 0; right: 0;
  height: 2px; background: #fff; border-radius: 2px;
}
.app-side-fab .menu-icon::before { top: 0; }
.app-side-fab .menu-icon span    { top: 5px; }
.app-side-fab .menu-icon::after  { bottom: 0; }

.app-side-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 22, 16, .42);
  z-index: 39;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  /* Below 1100px the sidebar becomes a slide-out drawer. The grid
     collapses to a single column for the main content area; the sidebar
     itself is moved to fixed positioning, hidden offscreen until the
     drawer is opened (via `.app-shell.drawer-open`). */
  .app-shell { grid-template-columns: minmax(0, 1fr); }

  .app-sidebar {
    display: block;              /* keep rendered; visibility via transform */
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    max-width: 320px;
    background: #faf6e9;
    z-index: 40;
    transform: translateX(-105%); /* off-screen by default */
    transition: transform .25s cubic-bezier(.22, .9, .26, 1);
    box-shadow: 8px 0 32px rgba(8, 22, 16, .18);
    overflow-y: auto;
    padding: 88px 16px 24px;      /* clear the fixed top nav */
    border-right: 1px solid rgba(31, 107, 66, .12);
  }

  .app-side-fab { display: inline-flex; align-items: center; }

  /* When .drawer-open is on the .app-shell wrapper (toggled by JS),
     slide the sidebar in + show the scrim. */
  .app-shell.drawer-open .app-sidebar { transform: translateX(0); }
  .app-shell.drawer-open .app-side-scrim { display: block; opacity: 1; }
  .app-shell.drawer-open .app-side-fab { display: none; }
}

/* Even smaller — reduce the FAB to icon-only on very narrow screens. */
@media (max-width: 420px) {
  .app-side-fab { padding: 11px 13px; }
  .app-side-fab .label { display: none; }
  .app-side-fab .menu-icon { margin-right: 0; }
}