/* ProfilePro: one button colour system for every app (Tova, Room, Workspace, Storefront) and the profile.
   Change the variables below to re-colour all of them at once. Load AFTER each page's own CSS.
   - Green  = main actions (Save, Create, Send, Pay ...)         --pp-green / --pp-green-dark (hover)
   - Faint green fill + green stroke + green text = the selected pill / tab / filter chip   --pp-pill-fill
   - Red    = destructive actions only (Delete, Stop)
   Orange and yellow are no longer used for buttons. Unread dots and status badges keep their own colours. */
:root{
  --pp-green:#0F766D; --pp-green-dark:#0B5850; --pp-green-soft:#E8F4F1;
  --pp-black:#111111; --pp-red:#C0473B;
  --pp-pill-fill:#F0F9F6; /* selected pill / tab / chip: very faint green fill, green stroke, green text */
  --pp-btn-radius:10px; /* gently curved, not pill-round. Change here to adjust every button */
  --r-btn:10px;
  --teal:#0F766D; --teal-dark:#0B5850;
  --wm-teal:#0F766D; --wm-teal-dark:#0B5850; --room-teal:#0F766D;
  --accent:#0F766D; --accent2:#0B5850;
}

/* main action buttons, same green + same hover everywhere */
.primary, .btn-teal, .app-btn-primary, .room-btn:not(.secondary), .wm-btn:not(.wm-btn-outline):not(.wm-btn-soft),
.call-chat-form button, .pcc-cancel-opt-primary, .app-empty2-action.solid{
  background:var(--pp-green); border-color:var(--pp-green); color:#fff;
}
.primary:hover, .btn-teal:hover, .app-btn-primary:hover, .room-btn:not(.secondary):hover,
.wm-btn:not(.wm-btn-outline):not(.wm-btn-soft):hover, .call-chat-form button:hover, .pcc-cancel-opt-primary:hover{
  background:var(--pp-green-dark); border-color:var(--pp-green-dark); color:#fff;
}
.primary:disabled, .wm-btn:disabled, .room-btn:disabled{opacity:.45;cursor:not-allowed;}
.primary.stop, .primary.danger{background:var(--pp-red); border-color:var(--pp-red);}

/* outlined / soft buttons: green text on white or pale green */
.wm-btn-outline, .room-btn.secondary, .room-event-actions a, .room-event-actions button{color:var(--pp-green);}
.wm-btn-soft{background:var(--pp-green-soft); color:var(--pp-green-dark);}

/* selected pill / tab / chip: faint green fill, green stroke, green text everywhere (Tova, Room, Workspace, Storefront, Saved) */
.tvu-pill.is-active, .wmu-pill.is-active, .wm-chip.is-active,
html body.room-native-shell[data-unified-shell] .room-mobile-tabs button.active,
html body[data-workspace-home] .wsh-mobile-views button.active{
  background:var(--pp-pill-fill) !important; border-color:var(--pp-green) !important; color:var(--pp-green) !important;
}

/* links that used to be orange */
.textlink, .cdlinks a, .pplkv a, .linkbtn{color:var(--pp-green);}


/* Button corners: gently curved (10px) instead of pill-round. Icon-only circle buttons, avatars, chips and tabs are not touched. */
html body .btn, html body a.btn, html body .app-btn, html body .app-empty2-action, html body .bh-btn,
html body .bph-actions .app-btn, html body .app-notif-prompt button, html body .bin-act-btn, html body .bpo-modal-post-btn,
html body .bp-cancel-btn, html body .cd-btn, html body .comm-as-btn, html body .comm-as-cancel, html body .comm-pmenu-btn,
html body .comm-post-action, html body .dir-search button, html body .hc-main a.hc-btn, html body .hero-toggle button,
html body .hm-hero-cta a, html body .hm-id-cta a, html body .hm-pearl-form button, html body .hm-recpro-btn,
html body .hm2-btn-stroke, html body .hm2-pearl-btn, html body .hr-follow-btn, html body .hr-grow-btn,
html body .ja-btn, html body .jd-btn, html body .legal-back-btn, html body .mp-resume-btn, html body .mp-share-btn,
html body .mt-btn, html body .mt-primary, html body .pearl-edit-actions button, html body .photo-btn,
html body .pj-close-actions button, html body .pp-connect-btn, html body .pp-cta-btn, html body .pp-edit-btn,
html body .pp-follow-btn, html body .pp-hire-btn, html body .pp-kyc-banner-cta, html body .pp-msg-btn,
html body .pp-owner-actions .pp-edit-btn, html body .pp-owner-actions .pp-owner-share-btn, html body .pp-owner-share-btn,
html body .ppl-btn, html body .ppl-invite-btn, html body .rm-confirm-btns button, html body .wallet-button,
html body .wl-info button, html body .wm-directory-card .wm-btn, html body .wsb-bg-match-btn,
html body .wsb-share-role-btn, html body .app-notif-prompt button, html body .vf-actions button{
  border-radius:var(--pp-btn-radius);
}

/* Edit Profile = same round pill as Share Profile (my profile, professional profile, company profile) */
html body .mp-identity-actions .mp-edit-btn,html body .mp-edit-btn,
html body .pp-owner-actions .pp-edit-btn,html body .pp-edit-btn,
html body .pp-hero-card .pp-owner-actions .pp-edit-btn,html body .pp-hero-card .pp-owner-actions .pp-owner-share-btn,
html body .pp-owner-actions .pp-owner-share-btn,html body .pp-owner-share-btn{border-radius:999px;}

/* Phones: tiny faint scrollbars (Stage 16e; was fully hidden) */
@media (max-width:720px){
  /* Stage 16e: tiny, faint, short scrollbars on phones for scrollable panels, lists and sheets (was fully hidden).
     The page itself keeps no native bar (no layout shift): pp-overlays.js draws its short page scroller. */
  html,body{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
  *:not(html):not(body)::-webkit-scrollbar{display:block;width:3px;height:3px;background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-track{background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-thumb{background:rgba(27,33,45,.16);background-clip:padding-box;border-radius:3px;border-top:14px solid transparent;border-bottom:14px solid transparent;}
}
@supports not selector(::-webkit-scrollbar){@media (max-width:720px){*:not(html):not(body){scrollbar-width:thin;scrollbar-color:rgba(27,33,45,.16) transparent;}}}