/* ============================================================================
   playbooki-ui-v229.css — v2.2.9 UI polish
   ----------------------------------------------------------------------------
   Owner decisions 2026-09-21 (review-artifacts/v2.2.9-local-20260921/
   STAGE1-AUDIT-AND-PROPOSAL.md): D1 floating glass bottom bar, D2 soft green
   glow, D3 dark glass tooltip with a green edge, D5 green verified badge,
   D8 "Publishing…" while a post is sending, D9 same composer look on the
   edit-post page and the mass-message window.

   Loaded once from layouts/app.blade.php AFTER @yield('css'), so it wins the
   cascade over the old Sponzy rules in includes/css_general.blade.php — among
   them the dark-mode "every link is #FFF !important" rule and the Admin
   default colour on tooltips and buttons.

   Deliberately NOT touched:
   - the Messages thread composer and inbox (.section-msg*, pinned by P7 in
     playbooki-messages.css). The thread composer reuses the form id
     #formSendMsg, so the mass-message rules are scoped to #newMessageMassive;
     the tooltip rules are scoped to pages WITHOUT .section-msg, so Messages
     pages keep their pinned tooltip;
   - the bottom bar's footprint: 55px + the iPhone safe area, which the
     composer fit rules, the Messages inbox reserve (60px), the cookie banner
     and the change-tier sheet are measured against;
   - layout sizes of the composer controls (44px targets, v2.2 Stage 7).
   ========================================================================== */

:root {
  --pb-ui-green: #00C800;
  --pb-ui-ink: #04140A;
  --pb-ui-glow: rgba(0, 200, 0, .55);
  --pb-ui-glow-strong: rgba(0, 200, 0, .8);
  --pb-ui-spring: cubic-bezier(.2, .9, .3, 1.25);
  --pb-tabbar-h: 55px;
}

/* ── 1. Composer icon buttons (create, edit, mass message) ────────────────── */

#formUpdateCreate .btn-post,
#formUpdateCreate .btn-upload,
#formUpdateEdit .btn-post,
#formUpdateEdit .btn-upload,
#newMessageMassive #formSendMsg .btn-post,
#newMessageMassive #formSendMsg .btn-upload {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(242, 242, 242, .92) !important;
  transform: none;
  transition: color .18s ease, filter .18s ease, transform .22s var(--pb-ui-spring) !important;
}

@media (hover: hover) {
  #formUpdateCreate .btn-post:hover,
  #formUpdateCreate .btn-upload:hover,
  #formUpdateEdit .btn-post:hover,
  #formUpdateEdit .btn-upload:hover,
  #newMessageMassive #formSendMsg .btn-post:hover,
  #newMessageMassive #formSendMsg .btn-upload:hover {
    background: transparent !important;
    color: var(--pb-ui-green) !important;
    filter: drop-shadow(0 0 6px var(--pb-ui-glow));
    transform: none;
  }
}

#formUpdateCreate .btn-post:focus-visible,
#formUpdateCreate .btn-upload:focus-visible,
#formUpdateEdit .btn-post:focus-visible,
#formUpdateEdit .btn-upload:focus-visible,
#newMessageMassive #formSendMsg .btn-post:focus-visible,
#newMessageMassive #formSendMsg .btn-upload:focus-visible {
  color: var(--pb-ui-green) !important;
  filter: drop-shadow(0 0 6px var(--pb-ui-glow));
  outline: 2px solid rgba(0, 200, 0, .75) !important;
  outline-offset: 1px !important;
}

#formUpdateCreate .btn-post:active,
#formUpdateCreate .btn-upload:active,
#formUpdateEdit .btn-post:active,
#formUpdateEdit .btn-upload:active,
#newMessageMassive #formSendMsg .btn-post:active,
#newMessageMassive #formSendMsg .btn-upload:active {
  color: var(--pb-ui-green) !important;
  filter: drop-shadow(0 0 10px var(--pb-ui-glow-strong));
  transform: scale(.9);
}

/* A toggled-on tool (price or title open) keeps the green icon, not a grey disc. */
#formUpdateCreate .btn-post.btn-active-hover,
#formUpdateCreate .btn-upload.btn-active-hover,
#formUpdateEdit .btn-post.btn-active-hover,
#formUpdateEdit .btn-upload.btn-active-hover,
#newMessageMassive #formSendMsg .btn-post.btn-active-hover,
#newMessageMassive #formSendMsg .btn-upload.btn-active-hover {
  background: transparent !important;
  color: var(--pb-ui-green) !important;
  filter: drop-shadow(0 0 6px var(--pb-ui-glow));
}

/* The v2.2.1 Public warning state stays red (playbooki-composer.css). */
#formUpdateCreate .pbAudienceSimpleToggle.is-public,
#formUpdateEdit .pbAudienceSimpleToggle.is-public {
  color: #ff4d4f !important;
  filter: none;
}

/* ── 1b. Tooltips (site-wide except Messages, which keeps its pinned style) ── */

body:not(:has(.section-msg)) .tooltip.show { opacity: 1 !important; }

body:not(:has(.section-msg)) .tooltip .tooltip-inner {
  max-width: 240px;
  padding: 6px 12px !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  color: #f2f2f2 !important;
  background: rgba(14, 18, 15, .92) !important;
  background-color: rgba(14, 18, 15, .92) !important;
  border: 1px solid rgba(0, 200, 0, .38) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 14px rgba(0, 200, 0, .18);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(:has(.section-msg)) .tooltip .tooltip-inner {
    background: rgba(14, 18, 15, .82) !important;
    background-color: rgba(14, 18, 15, .82) !important;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}

/* The dot and the hidden arrow are additions the pinned Messages tooltip does
   not have, so they are kept off pages that contain the Messages layout. */
body:not(:has(.section-msg)) .tooltip .tooltip-inner::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--pb-ui-green);
  box-shadow: 0 0 6px var(--pb-ui-green);
}

/* The pill needs no pointer; the arrow in the Admin colour looked detached. */
body:not(:has(.section-msg)) .tooltip .arrow { display: none !important; }

/* ── 2. Mobile bottom bar — floating liquid-glass capsule (D1) ────────────── */

@media (max-width: 991.98px) {
  /* The outer box keeps the reserved footprint and becomes see-through; only
     the capsule inside takes taps. */
  body .menuMobile.pb-tabbar-wrap {
    display: flex;
    align-items: flex-end;
    height: calc(var(--pb-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tabbar {
    position: relative;
    pointer-events: auto;
    width: 100%;
    height: calc(var(--pb-tabbar-h) - 4px);
    padding: 2px;
    border-radius: 999px;
    background: rgba(24, 26, 25, .96);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 30px rgba(0, 0, 0, .55);
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .menuMobile.pb-tabbar-wrap .pb-tabbar {
      background: rgba(28, 30, 29, .62);
      backdrop-filter: blur(22px) saturate(1.6);
      -webkit-backdrop-filter: blur(22px) saturate(1.6);
    }
  }

  body .menuMobile.pb-tabbar-wrap .pb-tabbar-list {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tabbar-item {
    display: flex;
    flex: 1 1 0 !important;       /* beats Bootstrap .flex-fill: equal tabs, equal pills */
    min-width: 0;
    margin: 0 !important;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tab {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 2px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(242, 242, 242, .92) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .22s var(--pb-ui-spring) !important;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tab .icon-navbar {
    display: block;
    font-size: 21px;
    line-height: 22px;
    height: 22px;
    margin: 0 !important;
    color: inherit !important;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tab .pb-tab-svg {
    width: 22px;
    height: 22px;
  }

  body .menuMobile.pb-tabbar-wrap .pb-tab-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: .01em;
    color: inherit !important;
  }

  @media (hover: hover) {
    body .menuMobile.pb-tabbar-wrap .pb-tab:hover {
      color: var(--pb-ui-green) !important;
      background: transparent !important;
    }
  }

  body .menuMobile.pb-tabbar-wrap .pb-tab:active { transform: scale(.92); }

  body .menuMobile.pb-tabbar-wrap .pb-tab:focus-visible {
    outline: 2px solid rgba(0, 200, 0, .8) !important;
    outline-offset: -3px;
  }

  /* The selection pill (Apple-Music style): darker capsule, green edge. */
  body .menuMobile.pb-tabbar-wrap .pb-tab.is-current {
    color: var(--pb-ui-green) !important;
  }
  /* One pill element under the current tab (menu-mobile.blade.php sets
     --pb-pill-i / --pb-pill-n). Tabs are equal width, so its box is simply
     index / count of the capsule's inner width. */
  body .menuMobile.pb-tabbar-wrap .pb-tab-pill {
    position: absolute;
    z-index: 0;
    top: 2px;
    bottom: 2px;
    left: calc(2px + (100% - 4px) * var(--pb-pill-i, 0) / var(--pb-pill-n, 4));
    width: calc((100% - 4px) / var(--pb-pill-n, 4));
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 0, .28), 0 0 16px rgba(0, 200, 0, .18);
    pointer-events: none;
  }
  body .menuMobile.pb-tabbar-wrap .pb-tab.is-current .icon-navbar {
    filter: drop-shadow(0 0 6px rgba(0, 200, 0, .6));
  }
  body .menuMobile.pb-tabbar-wrap .pb-tab.is-current .pb-tab-label {
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 200, 0, .45);
  }

  /* Unread badges: beside the icon, clear of the label. */
  body .menuMobile.pb-tabbar-wrap .pb-tab .notify {
    top: 2px !important;
    right: auto !important;
    left: calc(50% + 4px);
    z-index: 2;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(10, 12, 10, .9);
  }
}

/* ── 2b. Page-to-page transition on phones (owner request 2026-09-21) ──────
   Pages opt in with `@view-transition { navigation: auto; }`, which the layout
   prints on every app page except Messages threads and live streams (so the
   pinned v2.1.4 Messages repair never runs inside a transition). It applies to
   every same-site page change on a phone (tabs, links, back/forward), signed in
   or not. The browser keeps the old page on screen until the new one is ready,
   then cross-fades: no black flash. The top bar and the glass capsule are identical on both
   pages, so the cross-fade leaves them visually still (they stay in the root
   snapshot, which also keeps the real backdrop blur). Only the pill and the
   tab icons get their own layers, pill first so the icons stay on top: the
   pill slides from the old tab to the new one, like the approved mockup.
   Browsers without cross-document view transitions (Firefox, iOS < 18.2)
   simply load pages as before. */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
  body .menuMobile.pb-tabbar-wrap .pb-tab-pill { view-transition-name: pb-tab-pill; }
  body .menuMobile.pb-tabbar-wrap .pb-tabbar-list { view-transition-name: pb-tabbar-items; }

  /* Layers are stacked in old-page order, with new-only names on top: coming
     from a page with no current tab, the pill would fade in OVER the icons.
     Pin the order: pill below, icons above. */
  ::view-transition-group(pb-tab-pill) { z-index: 0; }
  ::view-transition-group(pb-tabbar-items) { z-index: 1; }

  ::view-transition-group(pb-tab-pill) {
    animation-duration: .34s;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1.15);
  }
  ::view-transition-group(pb-tabbar-items),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .22s;
  }
}

/* ── 3. Publish / Save (D2, D8) ──────────────────────────────────────────── */

#btnCreateUpdate,
#formUpdateEdit .btnEditUpdate {
  background: var(--pb-ui-green) !important;
  background-color: var(--pb-ui-green) !important;
  border-color: transparent !important;
  color: var(--pb-ui-ink) !important;
  clip-path: none !important;          /* the bevel would clip the glow */
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  transition: box-shadow .2s ease, filter .2s ease, transform .22s var(--pb-ui-spring), background-color .2s ease !important;
}

@media (hover: hover) {
  #btnCreateUpdate:not(:disabled):hover,
  #formUpdateEdit .btnEditUpdate:not(:disabled):hover {
    background: var(--pb-ui-green) !important;
    color: var(--pb-ui-ink) !important;
    filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 200, 0, .55), 0 6px 22px rgba(0, 200, 0, .42) !important;
  }
}

#btnCreateUpdate:not(:disabled):focus-visible,
#formUpdateEdit .btnEditUpdate:not(:disabled):focus-visible {
  outline: 2px solid rgba(0, 200, 0, .75) !important;
  outline-offset: 2px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 22px rgba(0, 200, 0, .42) !important;
}

#btnCreateUpdate:not(:disabled):active,
#formUpdateEdit .btnEditUpdate:not(:disabled):active {
  background: var(--pb-ui-green) !important;
  transform: scale(.98);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), 0 0 16px rgba(0, 200, 0, .55) !important;
}

/* Empty: clearly switched off, not a dim green. */
#btnCreateUpdate:disabled,
#formUpdateEdit .btnEditUpdate:disabled {
  background: rgba(255, 255, 255, .07) !important;
  background-color: rgba(255, 255, 255, .07) !important;
  color: rgba(240, 240, 240, .42) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
  cursor: not-allowed;
  filter: none;
}

/* Sending: app-functions.js disables the button and adds the spinner to its
   <i>. Full green with a moving sheen, and the label reads "Publishing…"
   (text from the playbooki_ui language files, exposed as --pb-publishing by
   the layout). */
#btnCreateUpdate:disabled:has(.spinner-border),
#formUpdateEdit .btnEditUpdate:disabled:has(.spinner-border) {
  background-color: var(--pb-ui-green) !important;
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
  color: var(--pb-ui-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 14px rgba(0, 200, 0, .35) !important;
  cursor: progress;
  animation: pb-ui-sheen 1.4s linear infinite;
}
/* playbooki.css paints every spinner green (!important): on a green button it vanished. */
#btnCreateUpdate .spinner-border,
#formUpdateEdit .btnEditUpdate .spinner-border {
  color: var(--pb-ui-ink) !important;
}
#btnCreateUpdate:disabled:has(.spinner-border) #textPostPublish { display: none; }
#btnCreateUpdate:disabled:has(.spinner-border)::after { content: var(--pb-publishing, "Publishing…"); }

/* Browsers without :has() (iOS Safari < 15.4) cannot tell "sending" from
   "empty", so they keep the v2.2.8 see-through green for every disabled state
   rather than showing a sending post as switched off. */
@supports not selector(:has(*)) {
  #btnCreateUpdate:disabled,
  #formUpdateEdit .btnEditUpdate:disabled {
    background: rgba(0, 200, 0, .4) !important;
    background-color: rgba(0, 200, 0, .4) !important;
    color: #000 !important;
    cursor: default;
  }
}

@keyframes pb-ui-sheen {
  from { background-position: 120% 0; }
  to   { background-position: -80% 0; }
}

/* ── 4. Verified badge — Playbooki green everywhere (D5) ─────────────────── */

.verified > i.bi-patch-check-fill,
.verified > i.bi.bi-patch-check-fill,
.pb-verified > i.bi-patch-check-fill {
  color: var(--pb-ui-green) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #formUpdateCreate .btn-post, #formUpdateCreate .btn-upload,
  #formUpdateEdit .btn-post, #formUpdateEdit .btn-upload,
  #newMessageMassive #formSendMsg .btn-post, #newMessageMassive #formSendMsg .btn-upload,
  body .menuMobile.pb-tabbar-wrap .pb-tab,
  #btnCreateUpdate, #formUpdateEdit .btnEditUpdate {
    transition: none !important;
    transform: none !important;
  }
  #btnCreateUpdate:disabled:has(.spinner-border),
  #formUpdateEdit .btnEditUpdate:disabled:has(.spinner-border) {
    animation: none;
  }
}