/* =============================================================================
   PropPilot / PropPulser UI — core theme + global component fixes
   Consolidated hotfix stylesheet
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base shell
   -------------------------------------------------------------------------- */

.pp-bg{
  /* Dark-shell Bootstrap tokens (fixes low-contrast text inside cards/tables/etc)
     Bootstrap components often use CSS variables (e.g., --bs-body-color) instead
     of inheriting the body text color. If we only set `color`, headings/numbers
     inside `.card` can render as near-black on our dark surfaces. */
  --bs-body-bg: #0b1020;
  --bs-body-bg-rgb: 11,16,32;

  --bs-body-color: #e8eefc;
  --bs-body-color-rgb: 232,238,252;

  --bs-emphasis-color: rgba(255,255,255,.96);
  --bs-heading-color: rgba(255,255,255,.95);

  --bs-secondary-color: rgba(232,238,252,.78);
  --bs-tertiary-color: rgba(232,238,252,.62);

  --bs-border-color: rgba(255,255,255,.12);
  --bs-border-color-translucent: rgba(255,255,255,.12);

  --bs-link-color: #bfe8ff;
  --bs-link-hover-color: #ffffff;

  background:#0b1020;
  color:#e8eefc;
  min-height:100vh;
  color-scheme: dark;
}

/* Ensure Bootstrap components inherit the correct ink in our dark shell. */
.pp-bg .card,
.pp-bg .card-body,
.pp-bg .table,
.pp-bg .table > :not(caption) > * > *{
  color: inherit;
}

.pp-nav{
  position: sticky;
  top: 0;
  z-index: 1035;
  background: rgba(15,23,51,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* -----------------------------------------------------------------------------
   Getting Started progress chip (navbar)
   -------------------------------------------------------------------------- */

.pp-gs-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  white-space:nowrap;
}
.pp-gs-chip .pp-gs-title{
  font-size:12px;
  opacity:.75;
  margin-right:2px;
}
.pp-gs-chip .pp-gs-arrow{
  opacity:.35;
  font-weight:700;
}
.pp-gs-chip .badge{
  font-weight:700;
}
@media (max-width: 575.98px){
  .pp-gs-chip .pp-gs-title{ display:none; }
}

.pp-badge{
  background:rgba(30,168,255,.18);
  color:#bfe8ff;
  border:1px solid rgba(30,168,255,.35);
}

.pp-card{
  background:#101a3a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}

.pp-coach{ position:relative; }
.pp-coach::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:14px 0 0 14px;
  background:rgba(255,255,255,.22);
}
.pp-coach.pp-coach-safe::before{ background:rgba(25, 210, 128, .70); }
.pp-coach.pp-coach-warning::before{ background:rgba(255, 193, 7, .80); }
.pp-coach.pp-coach-danger::before{ background:rgba(220, 53, 69, .85); }

.pp-muted{ color:rgba(232,238,252,.72); }
.pp-kpi{ font-size:1.6rem; font-weight:800; letter-spacing:.2px; }
.pp-alert{ border-radius:14px; }
.pp-btn{ border-radius:10px; font-weight:700; }


/* -----------------------------------------------------------------------------
   Mobile ergonomics (tap targets + stacked actions)
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px){
  /* Ensure primary buttons are easy to tap */
  .pp-btn{ min-height:44px; }
  .btn-sm.pp-btn{ min-height:36px; }

  /* Stack page action rows cleanly on phones */
  .pp-page-actions{ width:100%; }
  .pp-page-actions .btn{ flex: 1 1 auto; }

  /* Prevent overflow from long links/codes */
  code, .pp-code-wrap{ word-break: break-word; overflow-wrap:anywhere; }
}

/* Utility: horizontal scroll container for wide tables (mobile) */
.pp-table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.pp-table-scroll > table{ min-width: 680px; }
.pp-input{
  background:#0b132c;
  border:1px solid rgba(255,255,255,.12);
  color:#e8eefc;
}
.pp-input:focus{
  background:#0b132c;
  color:#e8eefc;
  border-color:rgba(30,168,255,.6);
  box-shadow:none;
}

/* Dark shell: input-group add-ons (prefix/suffix)
   Fixes washed-out/partially obscured prefixes (e.g., "$"), and keeps input-groups
   visually consistent with .pp-input across the app.
*/
.pp-bg .input-group-text{
  background:#0b132c;
  border:1px solid rgba(255,255,255,.12);
  color:#e8eefc;
  position:relative;
  z-index:2; /* stay above decorative surfaces */
}

.pp-bg .input-group > .input-group-text + .pp-input{
  border-left:0;
}

.pp-bg .input-group > .pp-input + .input-group-text{
  border-left:0;
}

/* Default links on dark shell
   IMPORTANT: do not override Bootstrap component links (tabs, buttons, dropdown items, pagination).
*/
.pp-bg a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link){ color:#bfe8ff; }


/* -----------------------------------------------------------------------------
   Reading UI (progress bar + mobile ToC drawer)
   -------------------------------------------------------------------------- */

.pp-reading-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #00d2ff;
  z-index: 1045;
  transform: translateZ(0);
}

.pp-reading-wrap{max-width: 980px; width:100%; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem;}
.pp-content-card{padding: 3rem;}
@media (max-width: 575.98px){ .pp-content-card{padding: 1.5rem;} }

.pp-toc-trigger{position: fixed; right: 1rem; bottom: 1rem; z-index: 1040;}
.pp-toc-trigger .btn{border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.40);} 

/* Featured images (blog cards + posts)
   - Keep it subtle and consistent with the card styling.
*/
.pp-featured-image{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.15);
}

/* Index cards: keep a predictable header image block */
.pp-featured-image:not(.pp-featured-image--post){
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Single post: allow a slightly taller hero within the card */
.pp-featured-image--post{
  max-height: 380px;
  object-fit: cover;
  object-position: 50% 10%;
}
/* -----------------------------------------------------------------------------
   Compliance components (footer disclosure + cookie banner)
   -------------------------------------------------------------------------- */

.pp-footer{
  background: rgba(15,23,51,.85);
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.pp-footer a{ color:#bfe8ff; }
.pp-footer a:hover{ color:#ffffff; }

/* Give the footer About blurb comfortable breathing room,
   especially when pages use the new centered content card layout. */
.pp-footer-about{
  padding-top: .75rem;
  margin-top: 1.25rem !important;
  border-top: 1px solid rgba(255,255,255,.08);
  max-width: 34rem;
}

.pp-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 0;
  z-index: 1090;
}
.pp-cookie-card{
  background: #0f1733;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.40);
}

/* If the cookie banner is visible, lift floating action buttons above it. */
body.pp-cookie-open .pp-support-fab{ bottom: 120px; }

/* -----------------------------------------------------------------------------
   Bootstrap readability adjustments
   -------------------------------------------------------------------------- */

/* Bootstrap's .text-muted is tuned for light backgrounds.
   PropPilot uses a dark shell (pp-bg), so we lift muted text for readability.
   On light sections (e.g., bg-light cards), we revert to a darker muted tone. */
.pp-bg .text-muted{ color:rgba(232,238,252,.70) !important; }
.pp-bg .bg-light .text-muted,
.pp-bg .bg-white .text-muted,
.pp-bg .bg-body-tertiary .text-muted{
  color:rgba(33,37,41,.65) !important;
}

/* Ensure default text is readable on light sections inside the dark shell */
.pp-bg .bg-light,
.pp-bg .bg-white,
.pp-bg .bg-body-tertiary{
  color:#111827;
}

/* Link contrast fix: keep links readable inside light Bootstrap alerts.
   IMPORTANT: do not override Bootstrap button links within alerts. */
.pp-alert.alert-secondary a:not(.btn):not(.dropdown-item),
.pp-alert.alert-warning a:not(.btn):not(.dropdown-item),
.pp-alert.alert-info a:not(.btn):not(.dropdown-item),
.pp-alert.alert-light a:not(.btn):not(.dropdown-item),
.pp-alert.alert-success a:not(.btn):not(.dropdown-item),
.pp-alert.alert-danger a:not(.btn):not(.dropdown-item),
.alert.alert-secondary a:not(.btn):not(.dropdown-item),
.alert.alert-warning a:not(.btn):not(.dropdown-item),
.alert.alert-info a:not(.btn):not(.dropdown-item),
.alert.alert-light a:not(.btn):not(.dropdown-item),
.alert.alert-success a:not(.btn):not(.dropdown-item),
.alert.alert-danger a:not(.btn):not(.dropdown-item){
  color: inherit !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
  font-weight: 600;
}



/* Link contrast fix: links inside light cards/sections within the dark shell.
   Default pp-bg links are light (for dark surfaces). On light surfaces, inherit/underline. */
.pp-bg .bg-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
.pp-bg .bg-white a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
.pp-bg .bg-body-tertiary a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link){
  color: #0b5ed7;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Partner offer banner (promo injection)
   - The banner is rendered as a Bootstrap alert-info block.
   - We restyle it to match the PropPulser dark theme and keep the CTA looking
     like a real primary button (similar to “Log Trade”).
   ------------------------------------------------------------------------- */

.pp-bg .alert.alert-info.border-0.shadow-sm.d-flex.align-items-center.justify-content-between{
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%) !important;
  color: #e8eefc !important;
  border-left: 5px solid rgba(59,130,246,1) !important;
  border-radius: 14px !important;
}

.pp-bg .alert.alert-info.border-0.shadow-sm.d-flex.align-items-center.justify-content-between .text-muted{
  color: rgba(232,238,252,.72) !important;
}

.pp-bg .alert.alert-info.border-0.shadow-sm.d-flex.align-items-center.justify-content-between .badge.bg-dark{
  background: rgba(59,130,246,.14) !important;
  border: 1px solid rgba(59,130,246,.38) !important;
  color: #bfe8ff !important;
}

.pp-bg .alert.alert-info.border-0.shadow-sm.d-flex.align-items-center.justify-content-between a.btn{
  text-decoration: none !important;
}

.pp-bg .alert.alert-info.border-0.shadow-sm.d-flex.align-items-center.justify-content-between .btn.btn-sm.btn-primary{
  border-radius: 10px;
  font-weight: 800;
  padding: .6rem 1.15rem;
  box-shadow: 0 12px 26px rgba(0,0,0,.40);
}

/* Warning alert contrast (dark shell): ensure readable text on subtle yellow */
.pp-bg .alert-warning,
.pp-bg .pp-alert.alert-warning{
  color:#664d03;
}
.pp-bg .alert-warning .text-muted{ color:rgba(102,77,3,.75) !important; }
.pp-bg .alert-warning .btn-outline-light{
  border-color:rgba(0,0,0,.25);
  color:#111827;
}

/* -----------------------------------------------------------------------------
   Navbar dropdown theming (dark-on-dark)
   -------------------------------------------------------------------------- */

/* Force a consistent dark dropdown appearance within the navbar.
   (Bootstrap's default light dropdown clashes with the dark shell.) */
.pp-bg .navbar .dropdown-menu{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  color:rgba(255,255,255,.92);
}

.pp-bg .navbar .dropdown-menu .dropdown-item{
  color:rgba(255,255,255,.88);
  border-radius:8px;
}

/* Language dropdown: use SVG flags (not emoji) for consistent cross-platform rendering */
.pp-lang-toggle{
  display:flex;
  align-items:center;
}

.pp-lang-menu .dropdown-item{
  display:flex;
  align-items:center;
}

.pp-flag{
  width:18px;
  height:14px;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  flex:0 0 auto;
}

.pp-bg .navbar .dropdown-menu .dropdown-item:hover,
.pp-bg .navbar .dropdown-menu .dropdown-item:focus{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.95);
}

.pp-bg .navbar .dropdown-menu .dropdown-divider{
  border-top-color:rgba(255,255,255,.12);
}

/* Notifications dropdown (more specific, for consistent typography) */
.pp-notif-dd .fw-bold,
.pp-notif-dd .fw-semibold,
.pp-notif-dd .dropdown-item,
.pp-notif-dd a{
  color:rgba(255,255,255,.92) !important;
}

.pp-notif-dd .text-muted,
.pp-notif-dd .small.text-muted{
  color:rgba(255,255,255,.62) !important;
}

/* Cap dropdown height on shorter screens */
.pp-notifications-menu{
  max-height:calc(100vh - 90px);
  overflow:auto;
}

/* Account dropdown: keep compact */
.pp-account-menu{
  min-width:240px;
  max-height:calc(100vh - 90px);
  overflow-y:auto;
}

/* -----------------------------------------------------------------------------
   Overlay + badge utilities
   -------------------------------------------------------------------------- */

/* Subtle pulse for breach */
@keyframes ppPulse{
  0%{ box-shadow:0 0 0 0 rgba(220,53,69,0.5); }
  70%{ box-shadow:0 0 0 6px rgba(220,53,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(220,53,69,0); }
}
.pp-pulse{
  border-radius:4px;
  animation:ppPulse 2s infinite;
}

/* Keyboard shortcut overlay */
#ppShortcutOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:2000;
  display:none;
}
#ppShortcutOverlay .panel{
  background:#0f172a;
  color:#fff;
  max-width:420px;
  margin:10% auto;
  padding:20px;
  border-radius:10px;
}
#ppShortcutOverlay kbd{
  background:#111827;
  padding:4px 8px;
  border-radius:4px;
  font-size:.9em;
}

/* Badge hover count */
.pp-badge[data-count]{ position:relative; }
.pp-badge[data-count]:hover::after{
  content:attr(data-count) " draft weeks";
  position:absolute;
  top:120%;
  right:0;
  background:#111827;
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:4px;
  white-space:nowrap;
}

/* -----------------------------------------------------------------------------
   Layout fixes for dropdown overlap (desktop)
   -------------------------------------------------------------------------- */

/* When the notifications dropdown is open, keep top alerts readable */
@media (min-width:992px){
  body.pp-notifications-open .pp-alert{ margin-right:420px !important; }
}

/* When the account dropdown is open, keep top-right page action buttons clickable */
@media (min-width:992px){
  body.pp-account-open .pp-page-actions{ margin-right:360px; }
}

/* -----------------------------------------------------------------------------
   Dropdown menu theming (dark shell)
   -------------------------------------------------------------------------- */

/* Bootstrap's default dropdown is light. In the dark shell this can create
   low-contrast menus (e.g., link text inherits light colors on a white menu).
   Force a consistent dark dropdown surface everywhere, not only in the navbar. */
.pp-bg .dropdown-menu{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  color:rgba(255,255,255,.92);
}

.pp-bg .dropdown-menu .dropdown-item{
  color:rgba(255,255,255,.88) !important;
  border-radius:8px;
}

.pp-bg .dropdown-menu .dropdown-header{
  color:rgba(255,255,255,.60);
}

.pp-bg .dropdown-menu .dropdown-divider{
  border-top-color:rgba(255,255,255,.12);
}

/* -----------------------------------------------------------------------------
   Universal dropdown interaction states
   -------------------------------------------------------------------------- */

/* Some Bootstrap/Theme combinations can yield low-contrast hover/active states
   (e.g., light hover background with light text). Force consistent, readable
   states across all dropdowns within the dark shell. */
.pp-bg .dropdown-menu .dropdown-item:hover,
.pp-bg .dropdown-menu .dropdown-item:focus,
.pp-bg .dropdown-menu .dropdown-item:focus-visible{
  background-color:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.96) !important;
}

.pp-bg .dropdown-menu .dropdown-item.active,
.pp-bg .dropdown-menu .dropdown-item:active{
  background-color:rgba(30,168,255,.22) !important;
  color:#ffffff !important;
}

.pp-bg .dropdown-menu .dropdown-item.disabled,
.pp-bg .dropdown-menu .dropdown-item:disabled{
  color:rgba(255,255,255,.45) !important;
}

.pp-bg .dropdown-menu .dropdown-item.disabled:hover,
.pp-bg .dropdown-menu .dropdown-item:disabled:hover{
  background-color:transparent !important;
  color:rgba(255,255,255,.45) !important;
  cursor:not-allowed;
}

/* -----------------------------------------------------------------------------
   Universal dropdown interaction states
   -------------------------------------------------------------------------- */

/* Some Bootstrap/theme combinations can yield low-contrast hover/active states
   (e.g., light hover background with light text). Force consistent, readable
   states across all dropdowns within the dark shell. */
.pp-bg .dropdown-menu .dropdown-item:hover,
.pp-bg .dropdown-menu .dropdown-item:focus,
.pp-bg .dropdown-menu .dropdown-item:focus-visible {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.pp-bg .dropdown-menu .dropdown-item.active,
.pp-bg .dropdown-menu .dropdown-item:active {
  background-color: rgba(30, 168, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.98) !important;
}

.pp-bg .dropdown-menu .dropdown-item.disabled,
.pp-bg .dropdown-menu .dropdown-item:disabled {
  color: rgba(255, 255, 255, 0.45) !important;
  pointer-events: none;
}

/* If an element is styled as disabled without using the disabled attribute */
.pp-bg .dropdown-menu .dropdown-item.disabled:hover,
.pp-bg .dropdown-menu .dropdown-item[aria-disabled='true']:hover,
.pp-bg .dropdown-menu .dropdown-item[aria-disabled='true']:focus {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* -----------------------------------------------------------------------------
   Modal contrast fixes (PropPulser dark shell)
   -------------------------------------------------------------------------- */

/* Ensure pp-muted remains readable inside light containers (e.g., alert-secondary) */
.pp-bg .bg-light .pp-muted,
.pp-bg .bg-white .pp-muted,
.pp-bg .bg-body-tertiary .pp-muted,
.pp-bg .alert-secondary .pp-muted,
.pp-bg .alert-light .pp-muted{
  color:rgba(33,37,41,.65) !important;
}

/* Theme Bootstrap modals to match the dark shell.
   Fixes low-contrast text when .pp-bg sets light text but modal defaults to white. */
.pp-bg .modal-content{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

.pp-bg .modal-header,
.pp-bg .modal-footer{
  border-color:rgba(255,255,255,.10);
}

.pp-bg .modal-title{
  color:rgba(255,255,255,.96);
}

/* Improve visibility of the close icon on dark modals */
.pp-bg .modal .btn-close{
  filter:invert(1) grayscale(1);
  opacity:.75;
}
.pp-bg .modal .btn-close:hover{
  opacity:1;
}

/* Keep common Bootstrap helper colors readable inside dark modals */
.pp-bg .modal .text-muted{
  color:rgba(255,255,255,.62) !important;
}
.pp-bg .modal a{
  color:#bfe8ff;
}

/* =============================================================================
   Global z-index / stacking order

   Prevents recurring stacking conflicts between:
   - Navbar dropdown menus
   - Floating Support/Chat FAB
   - Page alerts/cards
   - Bootstrap overlays (modal/offcanvas)

   Layer model:
     1     Base content (cards/alerts)
     1040  Navbar
     1050  FAB (Support/Chat)
     1060  Dropdown menus (must be above FAB)
     1065  Backdrops (modal/offcanvas)
     1070  Overlays (modal/offcanvas)

   Notes:
   - A parent with transform/opacity/filter can create a new stacking context.
     This layer system works best when such properties are not applied to
     high-level layout wrappers.
   ============================================================================= */

:root{
  --pp-z-content: 1;
  --pp-z-navbar: 1040;
  --pp-z-fab: 1050;
  --pp-z-dropdown: 1060;
  --pp-z-backdrop: 1065;
  --pp-z-overlay: 1070;
  --pp-z-cookie: 1030; /* below navbar/fab/dropdowns, above base content */
}

/* Layer 1: Base content */
.pp-card,
.pp-alert,
.pp-hero,
.pp-surface{
  position: relative;
  z-index: var(--pp-z-content);
}

/* Dashboard cards: allow dropdown menus to overlay adjacent cards.
   The global .pp-card z-index creates a stacking context per card.
   That can cause dropdown menus to appear behind later siblings.
   This scoped override removes the stacking context for dashboard cards only. */
.pp-dashboard-card{ z-index: auto; }
.pp-dashboard-card .dropdown{ z-index: var(--pp-z-dropdown); }

/* Layer 2: Fixed Navigation */
.navbar{
  z-index: var(--pp-z-navbar) !important;
}

/* Layer 3: Dropdowns (must be above FAB) */
.dropdown-menu{
  z-index: var(--pp-z-dropdown) !important;
}

/* Layer 4: Floating Action Buttons (Support/Chat) */
.pp-support-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--pp-z-fab) !important;
}

.pp-support-fab .btn{
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.pp-support-iframe{
  width: 100%;
  height: calc(100vh - 110px);
  border: 0;
}

@media (max-width: 575.98px){
  .pp-support-iframe{ height: calc(100vh - 120px); }
}

/* Keep the chat button accessible when the cookie banner is visible */
body.pp-cookie-open .pp-support-fab{
  bottom: 128px;
}

/* Cookie banner should not sit above modals/offcanvas */
.pp-cookie-banner{
  z-index: var(--pp-z-cookie) !important;
}

/* Layer 5: Overlays (Modals & Offcanvas) */
.modal,
.offcanvas{
  z-index: var(--pp-z-overlay) !important;
}

.modal-backdrop,
.offcanvas-backdrop{
  z-index: var(--pp-z-backdrop) !important;
}

/* =========================================================
   Global fix: readable "light" buttons inside pale alerts
   Works for Bootstrap 4 and 5
   ========================================================= */

/*
  Why this block exists:
  - We frequently render `.btn-outline-light` inside *light* Bootstrap alerts.
  - That combination is low-contrast by default (white text/border on pale bg).
  - Prior fixes using `currentColor` on hover failed because `currentColor`
    changes when the button text color changes.
  Solution:
  - Capture the alert ink color into a CSS variable in the base state.
  - Use that stored ink color for hover/focus background + border.
*/

/* Capture the alert ink color on the alert itself (so children can reuse it). */
.alert-success,
.alert-info,
.alert-warning,
.alert-light,
.alert-danger {
  --pp-alert-ink: currentColor;
}

/* Base: make outline-light readable in light alerts */
.alert-success .btn-outline-light,
.alert-info .btn-outline-light,
.alert-warning .btn-outline-light,
.alert-light .btn-outline-light,
.alert-danger .btn-outline-light {
  color: var(--pp-alert-ink) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  background: rgba(255, 255, 255, 0.60) !important;
}

/* Hover / focus / active: invert for strong contrast (uses stored ink color) */
.alert-success .btn-outline-light:hover,
.alert-info .btn-outline-light:hover,
.alert-warning .btn-outline-light:hover,
.alert-light .btn-outline-light:hover,
.alert-danger .btn-outline-light:hover,
.alert-success .btn-outline-light:focus,
.alert-info .btn-outline-light:focus,
.alert-warning .btn-outline-light:focus,
.alert-light .btn-outline-light:focus,
.alert-danger .btn-outline-light:focus,
.alert-success .btn-outline-light:active,
.alert-info .btn-outline-light:active,
.alert-warning .btn-outline-light:active,
.alert-light .btn-outline-light:active,
.alert-danger .btn-outline-light:active {
  background: var(--pp-alert-ink) !important;
  border-color: var(--pp-alert-ink) !important;
  color: #fff !important;
}

/* If you also use .btn-light inside alerts, fix that too */
.alert-success .btn-light,
.alert-info .btn-light,
.alert-warning .btn-light,
.alert-light .btn-light,
.alert-danger .btn-light {
  color: var(--pp-alert-ink) !important;
  background: rgba(255, 255, 255, 0.60) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.alert-success .btn-light:hover,
.alert-info .btn-light:hover,
.alert-warning .btn-light:hover,
.alert-light .btn-light:hover,
.alert-danger .btn-light:hover,
.alert-success .btn-light:focus,
.alert-info .btn-light:focus,
.alert-warning .btn-light:focus,
.alert-light .btn-light:focus,
.alert-danger .btn-light:focus {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.20) !important;
}

/* Neutralize accidental forced light text utilities inside those alerts */
.alert-success .btn.text-light,
.alert-info .btn.text-light,
.alert-warning .btn.text-light,
.alert-light .btn.text-light,
.alert-danger .btn.text-light,
.alert-success .btn.link-light,
.alert-info .btn.link-light,
.alert-warning .btn.link-light,
.alert-light .btn.link-light,
.alert-danger .btn.link-light {
  color: inherit !important;
}


/* =============================================================================
   CTA consistency: Empty states + Setup gates
   - Used when a page is blocked by a missing dependency (e.g., no account yet).
   - Keeps “next step” CTAs readable and consistent across the app.
   ============================================================================= */

.pp-empty-state{
  background: linear-gradient(90deg, rgba(15,23,42,.78) 0%, rgba(30,41,59,.78) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 5px solid rgba(30,168,255,.85);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.pp-empty-state .text-muted,
.pp-empty-state .pp-muted{
  color: rgba(232,238,252,.70) !important;
}

.pp-empty-state .pp-empty-title{
  font-weight: 800;
  letter-spacing: .1px;
}

.pp-empty-actions .btn{
  white-space: nowrap;
}

/* Primary CTA (more “Log Trade” / “Save Rules” energy) */
.pp-bg .pp-cta-primary.btn-primary{
  border-radius: 12px;
  font-weight: 800;
  padding: .58rem 1.15rem;
  box-shadow: 0 14px 28px rgba(0,0,0,.40);
  background: linear-gradient(180deg, rgba(30,168,255,1) 0%, rgba(37,99,235,1) 100%);
  border-color: rgba(30,168,255,1);
  color: #fff !important;
}

.pp-bg .pp-cta-primary.btn-primary:hover{
  background: linear-gradient(180deg, rgba(66,188,255,1) 0%, rgba(59,130,246,1) 100%);
  border-color: rgba(66,188,255,1);
  color: #fff !important;
}

.pp-bg .pp-cta-primary.btn-primary:focus{
  box-shadow: 0 0 0 .22rem rgba(30,168,255,.28), 0 14px 28px rgba(0,0,0,.40);
}


/* Default app primary buttons (pp-btn): keep a consistent “brand blue” across the product */
.pp-bg .btn-primary.pp-btn{
  background: linear-gradient(180deg, rgba(30,168,255,1) 0%, rgba(37,99,235,1) 100%);
  border-color: rgba(30,168,255,1);
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

.pp-bg .btn-primary.pp-btn:hover{
  background: linear-gradient(180deg, rgba(66,188,255,1) 0%, rgba(59,130,246,1) 100%);
  border-color: rgba(66,188,255,1);
  color: #fff !important;
}

.pp-bg .btn-primary.pp-btn:focus{
  box-shadow: 0 0 0 .22rem rgba(30,168,255,.28), 0 12px 24px rgba(0,0,0,.35);
}

/* Secondary CTA (readable on dark + inside setup gates) */
.pp-bg .pp-cta-secondary.btn-outline-light{
  border-radius: 12px;
  font-weight: 800;
  padding: .58rem 1.15rem;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}

.pp-bg .pp-cta-secondary.btn-outline-light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
}


/* =============================================================================
   Dark UI: Tabs / pills
   - Bootstrap defaults assume light backgrounds; active tabs can become white.
   - This normalizes nav-tabs and nav-pills across the entire app.
   ============================================================================= */

.pp-bg .nav-tabs{
  border-bottom-color: rgba(255,255,255,.14);
}

.pp-bg .nav-tabs .nav-link{
  color: rgba(255,255,255,.80);
  background: rgba(15,23,42,.40);
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-color: transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-right: .25rem;
}

.pp-bg .nav-tabs .nav-link:hover,
.pp-bg .nav-tabs .nav-link:focus{
  color: rgba(255,255,255,.92);
  background: rgba(15,23,42,.58);
}

.pp-bg .nav-tabs .nav-link.active,
.pp-bg .nav-tabs .nav-item.show .nav-link{
  color: rgba(255,255,255,.96);
  background: rgba(15,23,42,.86);
  border-color: rgba(255,255,255,.18);
  border-bottom-color: rgba(15,23,42,.86);
}

.pp-bg .nav-pills .nav-link{
  color: rgba(255,255,255,.85);
}

.pp-bg .nav-pills .nav-link.active,
.pp-bg .nav-pills .show>.nav-link{
  background-color: rgba(30,168,255,.22);
  color: rgba(255,255,255,.96);
}

/* =============================================================================
   Stacking order: ensure admin toolbar dropdowns always overlay page cards
   - The admin toolbar sits below the main navbar, but above page content.
   - Main navbar dropdowns should always win if they overlap.
   ============================================================================= */

/* Ensure z-index always applies (some theme effects create new stacking contexts). */
.navbar{
  position: relative;
  isolation: isolate;
}

/* Main navbar dropdowns should be the top-most dropdown layer in the app UI. */
.pp-bg .navbar .dropdown-menu{
  z-index: calc(var(--pp-z-dropdown) + 1) !important; /* e.g. 1061 */
}

/* Admin toolbar should float above cards, but under the main navbar. */
.pp-admin-nav{
  position: relative !important;
  z-index: calc(var(--pp-z-navbar) - 5) !important; /* e.g. 1035 */
  overflow: visible !important;
  isolation: isolate;
}

.pp-admin-nav .dropdown-menu{
  z-index: var(--pp-z-dropdown) !important; /* e.g. 1060 */
}

/* Partner toolbar should float above cards, but under the main navbar. */
.pp-partner-nav{
  position: relative !important;
  z-index: calc(var(--pp-z-navbar) - 5) !important; /* e.g. 1035 */
  overflow: visible !important;
  isolation: isolate;
}

.pp-partner-nav .dropdown-menu{
  z-index: var(--pp-z-dropdown) !important; /* e.g. 1060 */
}

/* =============================================================================
   Admin dropdown readability
   - Reduce vertical scrolling in Partners / Operations without removing items.
   - Promote the Onboarding Wizard as the primary CTA.
   ============================================================================= */

.pp-admin-nav .dropdown-menu.pp-dd-cols{
  min-width: 360px;
  max-width: 560px;
  padding: .6rem;
  columns: 2;
  column-gap: .75rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* Reuse the same multi-column dropdown treatment in Partner Portal toolbars. */
.pp-partner-nav .dropdown-menu.pp-dd-cols{
  min-width: 360px;
  max-width: 560px;
  padding: .6rem;
  columns: 2;
  column-gap: .75rem;
  max-height: 70vh;
  overflow-y: auto;
}

.pp-partner-nav .dropdown-menu.pp-dd-cols li{
  break-inside: avoid;
}

.pp-partner-nav .dropdown-menu.pp-dd-cols .dropdown-header{
  padding: .25rem .75rem;
  margin-top: .1rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}

.pp-partner-nav .dropdown-menu.pp-dd-cols .dropdown-divider{
  margin: .5rem .5rem;
  border-top-color: rgba(255,255,255,.10);
}

.pp-admin-nav .dropdown-menu.pp-dd-cols li{
  break-inside: avoid;
}

.pp-admin-nav .dropdown-menu.pp-dd-cols .dropdown-header{
  padding: .25rem .75rem;
  margin-top: .1rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}

.pp-admin-nav .dropdown-menu.pp-dd-cols .dropdown-divider{
  margin: .5rem .5rem;
  border-top-color: rgba(255,255,255,.10);
}

.pp-admin-nav .dropdown-item.pp-dd-primary{
  border: 1px solid rgba(30,168,255,.30);
  background: rgba(30,168,255,.14);
  border-radius: 12px;
  padding-top: .55rem;
  padding-bottom: .55rem;
  -webkit-column-span: all;
  column-span: all;
}

.pp-admin-nav .dropdown-item.pp-dd-primary:hover{
  background: rgba(30,168,255,.20);
}

.pp-admin-nav .dropdown-item.pp-dd-primary .small{
  line-height: 1.2;
}

/* =============================================================================
   Partner onboarding wizard UI
   ============================================================================= */

.pp-wizard-steps{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.pp-wizard-step{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  text-decoration: none;
  background: rgba(15,23,42,.35);
}

.pp-wizard-step:hover{
  color: rgba(255,255,255,.92);
  background: rgba(15,23,42,.55);
}

.pp-wizard-step.active{
  border-color: rgba(30,168,255,.35);
  background: rgba(30,168,255,.14);
}

.pp-wizard-step .pp-wiz-num{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.pp-wizard-step.active .pp-wiz-num{
  background: rgba(30,168,255,.35);
}

.pp-wizard-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.pp-wizard-progress > div{
  height: 100%;
  background: rgba(30,168,255,.55);
}

.pp-wizard-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  border-radius: 18px;
}

/* =============================================================================
   Form control visibility (global)
   - Fixes invisible placeholders and low-contrast input text on dark UI.
   - Also fixes inputs placed inside light Bootstrap alerts.
   ============================================================================= */

.pp-bg .form-control,
.pp-bg .form-select,
.pp-bg .pp-input,
.pp-bg textarea{
  color: rgba(255,255,255,.92);
  background-color: rgba(15,23,42,.55);
  border-color: rgba(255,255,255,.16);
}

.pp-bg .form-control::placeholder,
.pp-bg .form-select::placeholder,
.pp-bg .pp-input::placeholder,
.pp-bg textarea::placeholder{
  color: rgba(255,255,255,.55);
  opacity: 1; /* Firefox */
}

.pp-bg .form-control:focus,
.pp-bg .form-select:focus,
.pp-bg .pp-input:focus,
.pp-bg textarea:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.08);
}

/* File inputs on dark UI: keep the “Choose file” button readable.
   Chromium uses ::file-selector-button, WebKit uses ::-webkit-file-upload-button. */
.pp-bg input[type="file"].form-control{
  color: rgba(255,255,255,.92);
}
.pp-bg input[type="file"].form-control::file-selector-button{
  margin-right: .75rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
.pp-bg input[type="file"].form-control::-webkit-file-upload-button{
  margin-right: .75rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
.pp-bg input[type="file"].form-control::file-selector-button:hover,
.pp-bg input[type="file"].form-control::-webkit-file-upload-button:hover{
  background: rgba(255,255,255,.16);
}

/* Date picker icon visibility (Chromium). */
.pp-bg input[type='date']{ color-scheme: dark; }
.pp-bg input[type='date']::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.85); }

/* Light alerts: force dark ink inputs so they never look blank. */
.pp-bg .alert .form-control,
.pp-bg .alert .form-select,
.pp-bg .alert .pp-input,
.pp-bg .alert textarea{
  color: #0b1220;
  background-color: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.15);
}

.pp-bg .alert .form-control::placeholder,
.pp-bg .alert .form-select::placeholder,
.pp-bg .alert .pp-input::placeholder,
.pp-bg .alert textarea::placeholder{
  color: rgba(0,0,0,.45);
  opacity: 1;
}





/* =============================================================================
   Form label visibility (global)
   - Fixes low-contrast labels/help text on dark UI.
   ============================================================================= */

.pp-bg .form-label,
.pp-bg .col-form-label{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.pp-bg .form-text{
  color: rgba(255,255,255,.70);
}

.pp-bg .form-check-label{
  color: rgba(255,255,255,.90);
}

/* Inside light surfaces, revert to dark ink so labels remain readable. */
.pp-bg .alert .form-label,
.pp-bg .alert .col-form-label,
.pp-bg .alert .form-text,
.pp-bg .alert .form-check-label,
.pp-bg .bg-light .form-label,
.pp-bg .bg-white .form-label,
.pp-bg .bg-body-tertiary .form-label,
.pp-bg .bg-light .col-form-label,
.pp-bg .bg-white .col-form-label,
.pp-bg .bg-body-tertiary .col-form-label,
.pp-bg .bg-light .form-text,
.pp-bg .bg-white .form-text,
.pp-bg .bg-body-tertiary .form-text,
.pp-bg .bg-light .form-check-label,
.pp-bg .bg-white .form-check-label,
.pp-bg .bg-body-tertiary .form-check-label{
  color: rgba(0,0,0,.72);
}


/* =============================================================================
   Blog UX polish (sticky ToC, tables, FAQ accordion) — public header/footer
   ========================================================================== */

/* Aliases for legacy blog markup (pj-*) */
.pj-card{background:#101a3a;border:1px solid rgba(255,255,255,.08);border-radius:14px;}
.pj-muted{color:rgba(255,255,255,.65)!important;}
.pj-content{font-size:1.02rem;line-height:1.75;}
.pj-content a{color:#7dd3fc;}
.pj-content a:hover{color:#bae6fd;text-decoration:none;}

/* Constrain long-form reading width */
.pp-article{max-width: 900px;}

/* Spacing polish */
.pj-content h2,.pj-content h3{margin-bottom:1.5rem;}
.pj-content h2{margin-top:2rem;}
.pj-content h3{margin-top:1.5rem;}
.pj-content p{margin-bottom:1rem;}
.pj-content ul,.pj-content ol{margin-bottom:1rem;}

/* Sticky right sidebar ToC */
.pp-sidebar{position:sticky;top:5rem;}
.pp-toc .fw-bold{letter-spacing:.2px;}
.pp-toc-list{list-style:none;padding-left:0;}
.pp-toc-list li{padding:.2rem 0;}
.pp-toc a{color:rgba(199,221,255,.92);text-decoration:none;}
.pp-toc a:hover{color:#fff;}
.pp-toc-l3{margin-left:1rem;opacity:.9;font-size:.95em;}

@media (max-width: 991.98px){
  .pp-sidebar{position:static;top:auto;}
}

/* Tables */
.pp-table{
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
}
.pp-table thead th{
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  padding: .75rem .75rem;
}
.pp-table td{
  padding: .75rem .75rem;
}
.pp-table tbody tr{transition: background .15s ease;}
.pp-table tbody tr:hover{background: rgba(59,130,246,.10);}
.pp-table td,.pp-table th{border-color: rgba(255,255,255,.08);}

/* FAQ accordion styling (<details>/<summary>) */
.pp-faq-item{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}
.pp-faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  list-style:none;
}
.pp-faq-item summary::-webkit-details-marker{display:none;}
.pp-faq-item summary::after{
  content:"+";
  font-weight:900;
  opacity:.9;
}
.pp-faq-item[open] summary::after{content:"–";}
.pp-faq-answer{margin-top:.75rem;animation: ppFaqIn .18s ease-out;}
@keyframes ppFaqIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}


/* Footer refinement */
.pp-footer{background: rgba(15,23,51,.90);} 
.pp-footer .pp-fineprint{font-size: .92rem; line-height: 1.65;}
.pp-footer-about{max-width: 32rem;}


/* Table card containment (for drawdown tables) */
.pp-table-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1rem;
  overflow-x: auto;
}
.pp-table{min-width: 520px;}

/* -----------------------------------------------------------------------------
   Admin: client-side branded image capture templates (html2canvas)
   -------------------------------------------------------------------------- */

.pp-img-capture-stage{position:absolute; left:-10000px; top:-10000px; width:1px; height:1px; overflow:hidden;}
.pp-img-tpl{position:relative; display:block; overflow:hidden; border-radius: 24px;}
.pp-img-tpl--hero{width:1600px; height:900px;}
.pp-img-tpl--social{width:1200px; height:630px;}
.pp-img-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(0,210,255,.22), transparent 60%),
    radial-gradient(1000px 600px at 85% 25%, rgba(117,84,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(6,10,24,1), rgba(10,15,35,1));
}
.pp-img-card{
  position:absolute; left:5%; right:5%; top:10%; bottom:10%;
  padding: 58px 62px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.pp-img-tpl--social .pp-img-card{padding: 48px 52px; top:12%; bottom:12%;}
.pp-img-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 22px;}
.pp-img-logo{font-family: Inter, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight:700; letter-spacing:-.5px; font-size: 34px; color:#fff;}
.pp-img-logo span{color: var(--pp-accent-cyan, #00D2FF);}
.pp-img-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 14px; font-weight:700; letter-spacing:.18em;
  padding: 10px 14px;
  border-radius: 999px;
  color: #c9f6ff;
  border: 1px solid rgba(0,210,255,.50);
  background: rgba(0,210,255,.10);
  box-shadow: 0 0 0 1px rgba(0,210,255,.12) inset;
}
.pp-img-title{
  font-family: Inter, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  font-size: 72px;
  margin-top: 14px;
}
.pp-img-tpl--social .pp-img-title{font-size: 60px;}
.pp-img-sub{margin-top: 18px; font-size: 20px; color: rgba(255,255,255,.90); letter-spacing:.08em;}
.pp-img-tpl--social .pp-img-sub{font-size: 18px;}

.pp-img-icon-text, .pp-img-icon text{letter-spacing: 0.05em;}
.pp-img-foot{position:absolute; bottom: 44px; right: 58px; font-size: 14px; color: rgba(255,255,255,.60); letter-spacing:.12em; text-transform:uppercase;}
.pp-img-tpl--social .pp-img-foot{bottom: 38px; right: 48px;}

/* Breadcrumb contrast fix (dark gradient UI) */
.pp-bg .breadcrumb{
  --bs-breadcrumb-divider-color: rgba(255,255,255,.35);
}
.pp-bg .breadcrumb a{
  color: rgba(199,221,255,.92);
  text-decoration: none;
}
.pp-bg .breadcrumb a:hover{
  color: #fff;
  text-decoration: underline;
}
.pp-bg .breadcrumb .breadcrumb-item.active{
  color: rgba(255,255,255,.88);
}

/* -----------------------------------------------------------------------------
   Public Proof / Recap privacy blur
   - Default state is controlled in JS by toggling body.pp-hide-money
   - Mark any currency fields with: <span class="pp-sensitive" data-pp-sensitive="money"><span class="pp-sensitive__value">...</span></span>
   -------------------------------------------------------------------------- */

.pp-sensitive{
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.pp-sensitive__value{
  display: inline-block;
  transition: filter .16s ease, opacity .16s ease;
}

body.pp-hide-money .pp-sensitive[data-pp-sensitive="money"] .pp-sensitive__value{
  filter: blur(7px);
  opacity: .55;
  user-select: none;
}

body.pp-hide-money .pp-sensitive[data-pp-sensitive="money"]::after{
  content: "HIDDEN";
  position: absolute;
  inset: -2px -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(11,16,32,.40);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(232,238,252,.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* -----------------------------------------------------------------------------
   Storytelling layer (quick tags + live preview card)
   -------------------------------------------------------------------------- */

.pp-tag-chip{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(232,238,252,.92);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, transform .06s ease;
}

.pp-tag-chip:hover{
  background: rgba(30,168,255,.10);
  border-color: rgba(30,168,255,.35);
  transform: translateY(-1px);
}

.pp-tag-chip:active{
  transform: translateY(0);
}

.pp-tag-chip.is-active{
  background: rgba(30,168,255,.18);
  border-color: rgba(30,168,255,.55);
  box-shadow: 0 0 0 1px rgba(30,168,255,.22) inset;
}

.pp-proof-preview{
  position: sticky;
  top: 88px;
}

@media (max-width: 991.98px){
  .pp-proof-preview{ position: static; }
}

.pp-card-preview-text{
  color: rgba(232,238,252,.92);
  font-size: .95rem;
  line-height: 1.35;
  white-space: pre-wrap;
}


/* -----------------------------------------------------------------------------
   Button consistency inside Bootstrap alerts
   - Avoid "invisible" outline buttons inside light alert backgrounds
   - Ensures text + hover remain readable in success/info/warning/etc.
   -------------------------------------------------------------------------- */

.pp-bg .alert .btn-outline-light,
.pp-bg .pp-alert .btn-outline-light{
  color: inherit !important;
  border-color: rgba(0,0,0,.25) !important;
}

.pp-bg .alert .btn-outline-light:hover,
.pp-bg .pp-alert .btn-outline-light:hover,
.pp-bg .alert .btn-outline-light:focus,
.pp-bg .pp-alert .btn-outline-light:focus{
  background-color: rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.35) !important;
  color: inherit !important;
}

.pp-bg .alert .btn-outline-light:focus-visible,
.pp-bg .pp-alert .btn-outline-light:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Partner onboarding (Step 3) — primary lane + status lane
   -------------------------------------------------------------------------- */

.pp-po-lane{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.pp-po-lane-item{
  display:flex;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.pp-po-lane-num{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: rgba(232,238,252,.92);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

.pp-po-lane-body{ flex: 1; }

.pp-po-advanced{
  border-top: 1px dashed rgba(255,255,255,.10);
  padding-top: 10px;
}

.pp-po-advanced > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.pp-po-advanced > summary::-webkit-details-marker{ display:none; }

.pp-po-advanced > summary:after{
  content: "▾";
  font-size: .8rem;
  opacity: .7;
}

.pp-po-advanced[open] > summary:after{ content:"▴"; }


/* -----------------------------------------------------------------------------
   Rule Integrity Panel (details/summary)
   - Transparency without clutter: collapsed by default.
   -------------------------------------------------------------------------- */
.pp-details{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding: .75rem 1rem;
  background: rgba(0,0,0,.08);
}
.pp-details-summary{
  cursor:pointer;
  user-select:none;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.pp-details-summary::-webkit-details-marker{ display:none; }
.pp-details-summary::after{
  content:'▾';
  opacity:.65;
  font-weight:900;
}
.pp-details[open] .pp-details-summary::after{
  content:'▴';
}

/* --------------------------------------------------------------------------
   Gamification (low-noise): Level/XP + Streak ring
   -------------------------------------------------------------------------- */
.pp-xp-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.pp-xp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .55rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);font-weight:800;}
.pp-xp-pill .pp-xp-lbl{opacity:.75;font-weight:700;font-size:12px;}
.pp-xp-pill .pp-xp-lvl{font-size:13px;}
.pp-xp-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.10);}
.pp-xp-bar > div{height:100%;width:0;background:var(--pp-accent-cyan, #00D2FF);}

.pp-streak-wrap{display:flex;align-items:center;gap:1rem;}
.pp-ring{width:56px;height:56px;flex:0 0 56px;}
.pp-ring circle{fill:none;stroke-width:6;}
.pp-ring .pp-ring-bg{stroke:rgba(255,255,255,.12);}
.pp-ring .pp-ring-fg{stroke:var(--pp-accent-cyan, #00D2FF);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;}
.pp-ring-center{font-weight:900;font-size:13px;}
.pp-streak-meta .pp-muted{line-height:1.25;}

/* Optional navbar badge (kept off by default via config) */
.pp-nav-level-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);font-weight:800;font-size:12px;}
.pp-nav-level-badge .pp-dot{width:6px;height:6px;border-radius:50%;background:var(--pp-accent-cyan, #00D2FF);display:inline-block;}


/* Achievements (G2) */
.pp-ach-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.pp-ach-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .55rem;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;max-width:100%;}
.pp-ach-badge:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);}
.pp-ach-badge.earned{background:rgba(0,210,255,.10);border-color:rgba(0,210,255,.25);}
.pp-ach-badge.locked{opacity:.75;}
.pp-ach-emoji{font-size:14px;line-height:1;}
.pp-ach-title{font-weight:700;font-size:13px;white-space:nowrap;}
.pp-ach-meta{font-size:12px;opacity:.75;margin-left:.25rem;}

/* Achievements page */
.pp-ach-icon{font-size:22px;line-height:1;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.pp-ach-pill{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);}
.pp-ach-pill.earned{background:rgba(0,210,255,.10);border-color:rgba(0,210,255,.25);}
.pp-ach-pill.locked{opacity:.8;}
.pp-ach-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.10);}
.pp-ach-bar>div{height:100%;width:0;background:var(--pp-accent-cyan, #00D2FF);}
.pp-ach-card-earned{box-shadow:0 0 0 1px rgba(0,210,255,.08) inset;}
.pp-ach-card-locked{opacity:.95;}

/* Missions (G3) */
.pp-mission-icon{font-size:22px;line-height:1;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.pp-mission-pill{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);}
.pp-mission-pill.active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.pp-mission-pill.complete{background:rgba(0,210,255,.10);border-color:rgba(0,210,255,.25);}
.pp-mission-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.10);}
.pp-mission-bar>div{height:100%;width:0;background:var(--pp-accent-cyan, #00D2FF);}

/* --------------------------------------------------------------------------
   Micro-celebrations (G4)
   - Minimal, non-gimmicky toasts for meaningful progress moments.
   -------------------------------------------------------------------------- */
.pp-toast-root{position:fixed;right:18px;bottom:18px;z-index:1080;display:flex;flex-direction:column;gap:.6rem;max-width:360px;width:calc(100vw - 36px);pointer-events:none;}
.pp-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.75rem;padding:.8rem .9rem;border-radius:14px;background:rgba(20,20,24,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(6px);transform:translateY(12px);opacity:0;transition:transform .22s ease, opacity .22s ease;}
.pp-toast.show{transform:translateY(0);opacity:1;}
.pp-toast-emoji{font-size:18px;line-height:1;margin-top:2px;}
.pp-toast-title{font-weight:900;font-size:14px;margin:0;}
.pp-toast-msg{margin:2px 0 0 0;opacity:.85;font-size:13px;line-height:1.25;}
.pp-toast-actions{display:flex;gap:.75rem;margin-top:6px;}
.pp-toast-actions a{font-size:12px;opacity:.8;text-decoration:none;}
.pp-toast-actions a:hover{opacity:1;text-decoration:underline;}
.pp-toast-close{margin-left:auto;border:none;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:18px;line-height:1;padding:0 2px;}
.pp-toast-close:hover{opacity:1;}

/* -----------------------------------------------------------------------------
   Trade Log (MT5 import UX)
   - Beginner view: focuses on Date/Symbol/Side/Risk/PnL/R + rules.
   - Pro view: adds lot sizing, duration, fees.
   - Debug view: exposes raw import strings for troubleshooting.
   -------------------------------------------------------------------------- */

.pp-trade-log .pp-raw-code{
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(232,238,252,.86);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px;
}

.pp-trade-log .pp-note-raw{ display:none; }
.pp-trade-log.pp-view-debug .pp-note-raw{ display:block; }

.pp-trade-log.pp-view-beginner [data-col="lot"],
.pp-trade-log.pp-view-beginner [data-col="duration"],
.pp-trade-log.pp-view-beginner [data-col="fees"]{ display:none; }

.pp-trade-log.pp-view-pro [data-col="lot"],
.pp-trade-log.pp-view-pro [data-col="duration"],
.pp-trade-log.pp-view-pro [data-col="fees"]{ display:table-cell; }

.pp-trade-log.pp-view-debug [data-col="lot"],
.pp-trade-log.pp-view-debug [data-col="duration"],
.pp-trade-log.pp-view-debug [data-col="fees"]{ display:table-cell; }

.pp-trade-details-box{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px;
}

.pp-trade-details-row td{
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Cohort percentile ("You vs traders like you")
   - Privacy-safe aggregate benchmark.
   - Designed to be readable without stealing focus.
   -------------------------------------------------------------------------- */
.pp-cohort-grid{display:flex;flex-wrap:wrap;gap:12px;}
.pp-cohort-stat{flex:1;min-width:240px;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.pp-cohort-big{font-size:28px;font-weight:900;line-height:1.05;margin-top:2px;}
.pp-cohort-stat .pp-muted{opacity:.82;}
.pp-cohort-stat code{font-size:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:.05rem .35rem;border-radius:8px;}
@media (max-width: 575.98px){
  .pp-cohort-big{font-size:24px;}
}

/* --------------------------------------------------------------------------
   G6: Benchmark insight (1 sentence + 1 action)
   - Reuses existing card styling; only adds a subtle left accent by severity.
   -------------------------------------------------------------------------- */
.pp-bench-card{border-left:4px solid rgba(255,255,255,.08);}
.pp-bench-card.pp-bench-danger{border-left-color: var(--bs-danger);} 
.pp-bench-card.pp-bench-warning{border-left-color: var(--bs-warning);} 
.pp-bench-card.pp-bench-success{border-left-color: var(--bs-success);} 
.pp-bench-card.pp-bench-info{border-left-color: var(--bs-info);} 


/* --------------------------------------------------------------------------
   G6.1: "Why?" explainer (native <details>)
   - Zero JS dependency, low-noise, expandable only when user cares.
   -------------------------------------------------------------------------- */
.pp-bench-why summary{
  cursor:pointer;
  user-select:none;
  color:rgba(232,238,252,.78);
}
.pp-bench-why summary:hover{ color:rgba(232,238,252,.92); }
.pp-bench-why[open] summary{ opacity:.92; }
.pp-bench-why ul{ margin-bottom:.25rem; }
.pp-bench-why li{ margin-bottom:.15rem; }
.pp-bench-why-src code{ font-size:12px; }


/* G7: Data health assistant */
.pp-health-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.18);
}
.pp-health-details summary{
  cursor:pointer;
  user-select:none;
}
.pp-health-details summary::-webkit-details-marker{
  display:none;
}
.pp-health-details summary:before{
  content:"▸";
  display:inline-block;
  margin-right:6px;
  opacity:.8;
  transform:translateY(-1px);
}
.pp-health-details[open] summary:before{
  content:"▾";
}

/* --- Partner Benchmarks (G8) --- */
.pp-bench-wrap{display:flex;flex-direction:column;gap:.75rem}
.pp-bench-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.75rem}
.pp-bench-card{background:var(--card-bg,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:14px}
.pp-bench-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.pp-bench-kpi{padding:.5rem .75rem;border-radius:12px;border:1px solid var(--border,#e5e7eb);background:var(--soft-bg,#fafafa)}
.pp-bench-kpi .v{font-weight:700;font-size:1.1rem}
.pp-bench-kpi .l{font-size:.85rem;opacity:.8}
.pp-bench-bar{height:10px;border-radius:999px;background:var(--soft-bg,#f3f4f6);overflow:hidden;border:1px solid var(--border,#e5e7eb)}
.pp-bench-bar>span{display:block;height:100%}
.pp-bench-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border,#e5e7eb);background:var(--soft-bg,#fafafa);font-size:.8rem}

/* --- Readiness ladder (G10) --- */
.pp-ladder-card{border:1px solid rgba(255,255,255,.12)}
.pp-ladder{display:flex;flex-direction:column;gap:.75rem}
.pp-ladder-step{display:grid;grid-template-columns:14px 1fr;gap:.75rem;align-items:start}
.pp-ladder-dot{width:12px;height:12px;border-radius:999px;margin-top:.35rem;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.pp-ladder-dot-done{border-color:rgba(25,135,84,.9);background:rgba(25,135,84,.35)}
.pp-ladder-dot-warn{border-color:rgba(255,193,7,.95);background:rgba(255,193,7,.35)}
.pp-ladder-dot-todo{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.pp-ladder-next{border-top:1px solid rgba(255,255,255,.10);padding-top:.75rem}
.pp-ladder-why summary{cursor:pointer}


/* --- G16: Focus execution mode --- */
.pp-focus-banner{border:1px solid rgba(245,158,11,.25)!important;background:rgba(245,158,11,.07)!important}


/* -----------------------------------------------------------------------------
   UI fixes: Daily Review tags (Trade Log)
   -------------------------------------------------------------------------- */
.pp-dayreview-tags{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .6rem .8rem;
}
.pp-dayreview-tags .pp-tag-pill{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.pp-dayreview-tags .pp-tag-pill .form-check-input{
  float:none;
  margin:0;
  border-color:rgba(255,255,255,.28);
  background-color:rgba(255,255,255,.07);
}
.pp-dayreview-tags .pp-tag-pill .form-check-input:focus{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.18);
}
.pp-dayreview-tags .pp-tag-pill .form-check-label{
  margin:0;
  color:rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.1px;
}

/* Slightly denser on very small screens */
@media (max-width: 575.98px){
  .pp-dayreview-tags{ grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   Homepage: demo thumbnail + showcase cards
   -------------------------------------------------------------------------- */

.pp-btn-icon{
  display:inline-block;
  margin-right:8px;
  transform: translateY(-1px);
  opacity:.95;
}

.pp-home-demo{ display:flex; justify-content:center; }
.pp-demo-thumb{
  position:relative;
  width: min(720px, 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
  padding:0;
  cursor:pointer;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pp-demo-thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 80px rgba(0,0,0,.38);
}
.pp-demo-thumb img{ display:block; width:100%; height:auto; }
.pp-demo-thumb__play{
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.40);
}
.pp-demo-thumb__play::before{
  content:'';
  position:absolute;
  left: 22px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 16px solid rgba(255,255,255,.92);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.pp-demo-thumb__label{
  position:absolute;
  left: 84px;
  bottom: 28px;
  font-weight: 800;
  letter-spacing: .1px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.60);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
}

/* Showcase cards (TradeZella-style) */
.pp-showcard{
  position:relative;
  min-height: 430px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  padding: 28px;
  color: #fff;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
}

.pp-showcard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 80px rgba(0,0,0,.38);
}

.pp-showcard__go{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  font-weight: 900;
  opacity: .95;
}

.pp-showcard__top{ max-width: 92%; }

.pp-showcard__title{
  font-size: 28px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.2px;
}

.pp-showcard__desc{
  margin-top: 12px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.45;
  max-width: 95%;
}

.pp-showcard__shot{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 210px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,10,25,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.pp-showcard__shot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Gradients */
.pp-showcard--a{ background: radial-gradient(120% 120% at 15% 85%, rgba(255,0,200,.45) 0%, rgba(90,60,255,.85) 45%, rgba(20,28,70,.92) 100%); }
.pp-showcard--b{ background: radial-gradient(120% 120% at 15% 85%, rgba(0,210,255,.25) 0%, rgba(90,60,255,.85) 45%, rgba(20,28,70,.92) 100%); }
.pp-showcard--c{ background: radial-gradient(120% 120% at 15% 85%, rgba(120,255,160,.18) 0%, rgba(90,60,255,.80) 45%, rgba(20,28,70,.92) 100%); }

@media (max-width: 575.98px){
  .pp-showcard{ min-height: 390px; padding: 22px; }
  .pp-showcard__title{ font-size: 24px; }
  .pp-showcard__shot{ height: 190px; left: 16px; right: 16px; bottom: 16px; }
  .pp-demo-thumb__label{ left: 78px; bottom: 24px; }
}

/* --- Weekly Recap Coach (M3) --- */
.pp-focus{
  outline: 2px solid rgba(13,110,253,.85) !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.18) !important;
  border-radius: .55rem;
}
.pp-card .table.table-dark{
  --bs-table-bg: rgba(0,0,0,.15);
  --bs-table-border-color: rgba(255,255,255,.08);
}
.pp-card .table.table-dark th{
  color: rgba(255,255,255,.8);
  font-weight: 700;
  letter-spacing: .1px;
}

/* Dashboard onboarding checklist (M6) */
.pp-onboard-item{
  padding: .6rem .75rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pp-onboard-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
}
.pp-onboard-ico{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 2px;
}

/* M10: Smart alerts / nudges (Dashboard) */
.pp-smart-alert{
  padding: .85rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.pp-smart-alert:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.24);
}


/* -----------------------------------------------------------------------------
   UI fixes: tooltips + prefix icons
   -------------------------------------------------------------------------- */

/* Some pages use a left-side input prefix positioned with Bootstrap utilities
   start-0 top-50 translate-middle. translate-middle shifts X by -50%, which
   can clip the prefix (half hidden). Override to only translate on Y. */
.pp-bg .position-absolute.start-0.top-50.translate-middle{
  transform: translate(0,-50%) !important;
}

/* Ensure tooltips always sit above gradient cards and other stacked UI. */
.tooltip{
  z-index: 2000;
}

/* --------------------------------------------------------------------------
   Hello bar (public announcement / early access)
   -------------------------------------------------------------------------- */
.pp-hello-bar{
  position: sticky;
  top: 0;
  z-index: 1035;
  background: rgba(0, 210, 255, .12);
  border-bottom: 1px solid rgba(0, 210, 255, .25);
  backdrop-filter: blur(8px);
}
.pp-hello-bar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: .55rem 1rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}
.pp-hello-bar__text{
  color: rgba(255,255,255,.92);
  font-size: .95rem;
}
.pp-hello-bar__text strong{ color:#fff; }
.pp-hello-bar__actions{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}

/* CTA + dismiss (match the app's outline button vibe; keep it subtle) */
.pp-hello-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .28rem .75rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px;
  color: rgba(255,255,255,.92);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-size: .9rem;
}
.pp-hello-cta:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.75);
}
.pp-hello-cta:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.14);
}

.pp-hello-dismiss{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  padding: .1rem .35rem;
  font-size: 1rem;
  line-height: 1;
}
.pp-hello-dismiss:hover{ color: rgba(255,255,255,.92); }
.pp-hello-dismiss:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.14);
  border-radius: 8px;
}
@media (max-width: 576px){
  .pp-hello-bar__inner{ flex-direction: column; align-items: flex-start; }
  .pp-hello-bar__actions{ width: 100%; justify-content: flex-end; }
}


/* --- Guided Menu (Offcanvas) --- */
.pp-more-btn{ padding:.35rem .6rem; border:1px solid rgba(255,255,255,.38); border-radius:10px; line-height:1.2; }
.pp-more-btn:hover{ border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.06); }

.pp-offcanvas{ background: rgba(8,12,22,.98); color: rgba(255,255,255,.92); border-left: 1px solid rgba(255,255,255,.08); }
.pp-offcanvas .offcanvas-title{ font-weight: 700; letter-spacing: .2px; }
.pp-offcanvas-close{ opacity:.85; }
.pp-offcanvas-search{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); border-radius: 10px; }
.pp-offcanvas-search:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

.pp-offcanvas-acc-item{ background: transparent; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; overflow:hidden; margin-bottom: 10px; }
.pp-offcanvas-acc-item .accordion-button{ background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); font-weight: 650; }
.pp-offcanvas-acc-item .accordion-button:focus{ box-shadow: none; }
.pp-offcanvas-acc-item .accordion-button:not(.collapsed){ background: rgba(255,255,255,.06); }
.pp-offcanvas-acc-item .accordion-body{ padding: .35rem .25rem; }

.pp-offcanvas-list .list-group-item{ background: transparent; border: 0; border-radius: 10px; color: rgba(255,255,255,.86); padding: .55rem .65rem; }
.pp-offcanvas-list .list-group-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
.pp-offcanvas-meta{ padding: .35rem .1rem; border-bottom: 1px solid rgba(255,255,255,.10); }

/* --- Chart empty states --- */
.pp-chart-slot{ position: relative; }
.pp-chart-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.14); }
.pp-chart-empty .btn{ border-radius: 10px; }


/* ============================
   Pagination polish (scoped)
   ============================ */
.pp-pager .pagination .page-link{
  background: rgba(10,18,44,.55);
  border-color: rgba(255,255,255,.14);
  color: rgba(235,242,255,.88);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.pp-pager .pagination .page-link:hover{
  background: rgba(22,120,255,.20);
  border-color: rgba(22,120,255,.35);
  color: #fff;
}
.pp-pager .pagination .page-item.active .page-link{
  background: rgba(22,120,255,.85);
  border-color: rgba(22,120,255,.95);
  color: #fff;
}
.pp-pager .pagination .page-item.disabled .page-link{
  opacity: .45;
}

/* ============================
   Sort header links (listings)
   ============================ */
.pp-sort-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.pp-sort-icon{
  font-size: .9em;
  line-height: 1;
  opacity: .9;
}
.pp-sort-icon.pp-sort-neutral{
  opacity: .55;
}