/*
Theme Name: Polaris Pathways
Theme URI: https://clone.polarispathways.com
Author: Polaris Pathways
Author URI: https://polarispathways.com
Description: Custom theme for Polaris Pathways — community health training, resources, and job platform.
Version: 2.142.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polaris-pathways
*/

/* Design tokens live in assets/css/tokens.css (H5, session-28).
 * That file is enqueued as polaris-tokens BEFORE polaris-style.
 * Edit tokens THERE, not here. */

/* Dark mode — element overrides */
[data-theme="dark"] .pp-footer {
  background: #181817;
}
[data-theme="dark"] .pp-course-status-badge--completed {
  background: rgba(255, 138, 61, 0.15);
}
[data-theme="dark"] .pp-course-status-badge--in_progress {
  background: rgba(251, 191, 36, 0.15);
}
[data-theme="dark"] .pp-course-status-badge--available {
  background: rgba(134, 208, 147, 0.15);
}
[data-theme="dark"] .pp-comment--instructor {
  background: rgba(251, 191, 36, 0.1);
}
[data-theme="dark"] .pp-comment--admin {
  background: rgba(134, 208, 147, 0.1);
}

/* Dark mode — trend card AAA-compliant colors */
[data-theme="dark"] .pp-admin-stat__trend--up {
  color: #5fb86d;
}
[data-theme="dark"] .pp-admin-stat__trend--down {
  color: #f87171;
}

/* Dark mode — semantic background overrides */
[data-theme="dark"] .pp-quiz__previous--passed,
[data-theme="dark"] .pp-quiz__score-card--passed,
[data-theme="dark"] .pp-cb-badge--published,
[data-theme="dark"] .pp-cb__banner,
[data-theme="dark"] .pp-admin-btn--curriculum {
  background: rgba(255, 138, 61, 0.15);
  /* Lifted from #5fb86d (4.08:1 on composited bg #523e32 = FAIL AA) to
     #86d093 (--pp-primary-light dark variant; ~5.5:1 PASS).
     Session-27.1 v2.126.4. */
  color: #86d093;
  border-color: rgba(255, 138, 61, 0.3);
}
[data-theme="dark"] .pp-quiz__previous--failed,
[data-theme="dark"] .pp-quiz__score-card--failed,
[data-theme="dark"] .pp-wishlist-toggle[aria-pressed="true"],
[data-theme="dark"] .pp-cb__action-btn--danger:hover,
[data-theme="dark"] .pp-admin-choice-row .pp-admin-btn--sm:hover,
[data-theme="dark"] .pp-application-status--rejected .pp-badge--danger {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.3);
}
[data-theme="dark"] .pp-qa__answer--instructor {
  background: rgba(251, 191, 36, 0.1);
  border-left-color: #fbbf24;
}
[data-theme="dark"] .pp-qa__answer--accepted,
[data-theme="dark"] .pp-qa__answer--accepted.pp-qa__answer--instructor {
  background: rgba(255, 138, 61, 0.1);
  border-left-color: #5fb86d;
}
[data-theme="dark"] .pp-qa__accepted-label {
  color: #5fb86d;
}
[data-theme="dark"] .pp-quiz__nav-btn--flagged,
[data-theme="dark"] .pp-quiz__flag-btn[aria-pressed="true"] {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
[data-theme="dark"] .pp-quiz__nav-legend-item--flagged::before {
  background: rgba(251, 191, 36, 0.3);
  border-color: #fbbf24;
}
[data-theme="dark"] .pp-quiz__flag-btn:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}

/* Post content inline-styled callout boxes (Gutenberg group blocks with a
   hardcoded background color) leak light-mode colors into dark mode. Override
   any div in lesson/course content that has an inline background style. */
[data-theme="dark"] .pp-single__content div[style*="background"],
[data-theme="dark"] .pp-single__content figure[style*="background"],
[data-theme="dark"] .pp-single__content aside[style*="background"] {
  background: var(--pp-muted) !important;
  color: var(--pp-text) !important;
}
[data-theme="dark"] .pp-single__content div[style*="background"] *,
[data-theme="dark"] .pp-single__content figure[style*="background"] *,
[data-theme="dark"] .pp-single__content aside[style*="background"] * {
  color: var(--pp-text) !important;
}
[data-theme="dark"] .pp-single__content div[style*="background"] a {
  color: var(--pp-primary-text) !important;
}

/* Dark mode — dark text color overrides */
[data-theme="dark"] .pp-course-status-badge--in_progress {
  color: #fbbf24;
}
[data-theme="dark"] .pp-cb__banner {
  color: #5fb86d;
}
[data-theme="dark"] .pp-admin-choice-row .pp-admin-btn--sm {
  color: #fca5a5;
}
/* Dark-mode badge--danger needs bg override too -- light-pink bg #fef2f2 from
   admin.css:837 doesn't flip, so light-red text on light-pink yields 1.73:1
   FAIL. Soft red bg + light red fg = ~5:1 PASS AA. Session-27.1 v2.126.4. */
[data-theme="dark"] .pp-badge--danger {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.35);
}
[data-theme="dark"] .pp-quiz__nav-btn--flagged,
[data-theme="dark"] .pp-quiz__flag-btn[aria-pressed="true"] {
  color: #fbbf24;
}

/* Dark mode — Q&A component overrides */
[data-theme="dark"] .pp-qa__status {
  color: #5fb86d;
}
[data-theme="dark"] .pp-qa__char-count,
[data-theme="dark"] .pp-qa__empty,
[data-theme="dark"] .pp-qa__time,
[data-theme="dark"] .pp-qa__lesson-source,
[data-theme="dark"] .pp-qa__answer-count,
[data-theme="dark"] .pp-qa__toggle-answers,
[data-theme="dark"] .pp-qa__resolve-btn,
[data-theme="dark"] .pp-qa__accept-btn {
  color: var(--pp-text-secondary);
}
[data-theme="dark"] .pp-qa__resolved-badge,
[data-theme="dark"] .pp-qa__accept-btn:hover,
[data-theme="dark"] .pp-qa__accept-btn[aria-pressed="true"],
[data-theme="dark"] .pp-qa__resolve-btn[aria-pressed="true"] {
  color: #5fb86d;
  border-color: rgba(255, 138, 61, 0.3);
}
[data-theme="dark"] .pp-qa__thread--resolved {
  border-color: rgba(255, 138, 61, 0.3);
}
[data-theme="dark"] .pp-qa__toggle-answers:hover,
[data-theme="dark"] .pp-qa__resolve-btn:hover {
  color: var(--pp-primary-text);
  border-color: var(--pp-primary);
}
[data-theme="dark"] .pp-qa__toggle-answers:active,
[data-theme="dark"] .pp-qa__resolve-btn:active,
[data-theme="dark"] .pp-qa__accept-btn:active {
  background: rgba(134, 208, 147, 0.1);
}
[data-theme="dark"] .pp-qa__textarea:focus-visible {
  outline: 3px solid var(--pp-ring);
  border-color: var(--pp-primary);
}
[data-theme="dark"] .pp-qa__toggle-answers:focus-visible,
[data-theme="dark"] .pp-qa__resolve-btn:focus-visible,
[data-theme="dark"] .pp-qa__accept-btn:focus-visible {
  outline: 3px solid var(--pp-ring);
}

/* Dark mode — hover state overrides */
[data-theme="dark"] .pp-cb__lesson:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .pp-admin-btn--curriculum:hover {
  background: rgba(255, 138, 61, 0.25);
  border-color: rgba(255, 138, 61, 0.4);
}

/* ── Print Reset ── */
@media print {
  :root,
  [data-theme="dark"] {
    --pp-bg: #ffffff;
    --pp-surface: #ffffff;
    --pp-text: #000000;
    --pp-foreground: #000000;
    --pp-border: #cccccc;
    --pp-shadow-sm: none;
    --pp-shadow-md: none;
    --pp-shadow-lg: none;
    --pp-shadow-xl: none;
  }
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  line-height: 1.6;
  color: var(--pp-text);
  background-color: var(--pp-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pp-font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--pp-foreground);
}

h1 {
  font-size: var(--pp-text-5xl);
}
h2 {
  font-size: var(--pp-text-4xl);
}
h3 {
  font-size: var(--pp-text-3xl);
}
h4 {
  font-size: var(--pp-text-2xl);
}
h5 {
  font-size: var(--pp-text-xl);
}
h6 {
  font-size: var(--pp-text-lg);
}

a {
  color: var(--pp-primary-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--pp-primary-dark);
}
a:focus-visible {
  outline: 3px solid var(--pp-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Classes */
.pp-container {
  width: 100%;
  max-width: var(--pp-max-width);
  margin: 0 auto;
  padding: 0 var(--pp-space-6);
}
.pp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pp-section {
  padding: var(--pp-space-20) 0;
}
.pp-section--alt {
  background-color: var(--pp-surface);
}

.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  padding: var(--pp-space-3) var(--pp-space-6);
  font-family: var(--pp-font-heading);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  border-radius: var(--pp-radius-lg);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.pp-btn:focus-visible {
  box-shadow: var(--pp-focus-ring);
}

.pp-btn--primary {
  background-color: var(--pp-primary-text);
  color: var(--pp-on-primary);
}
.pp-btn--primary:hover {
  background-color: var(--pp-primary-dark);
  box-shadow: var(--pp-shadow-md);
}

.pp-btn--secondary {
  background-color: var(--pp-secondary);
  color: var(--pp-on-secondary);
}
.pp-btn--secondary:hover {
  background-color: var(--pp-secondary-dark);
}

.pp-btn--outline {
  background: transparent;
  color: var(--pp-primary-text);
  border: 2px solid var(--pp-primary-text);
}
.pp-btn--outline:hover {
  background-color: var(--pp-primary-text);
  color: var(--pp-on-primary);
}

.pp-btn--lg {
  padding: var(--pp-space-4) var(--pp-space-8);
  font-size: var(--pp-text-base);
}
.pp-btn--sm {
  padding: var(--pp-space-1) var(--pp-space-3);
  font-size: var(--pp-text-sm);
}
.pp-btn--xs {
  padding: var(--pp-space-1) var(--pp-space-2);
  font-size: var(--pp-text-xs);
}
.pp-input {
  padding: var(--pp-space-2) var(--pp-space-3);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  font-size: var(--pp-text-sm);
  font-family: var(--pp-font-body);
  background: var(--pp-surface);
  color: var(--pp-text);
}
.pp-input:focus-visible {
  outline: 3px solid var(--pp-primary);
  outline-offset: 1px;
}

.pp-card {
  background: var(--pp-surface);
  border-radius: 14px; /* kit spec — 14px cards (COMPONENT_SPECS.md) */
  border: 1px solid var(--pp-border);
  padding: var(--pp-space-6);
  box-shadow: var(--pp-shadow-sm);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.pp-card:hover {
  background: var(--pp-primary-ghost);
  /* no lift — kit pattern: ghost-tint on hover, cards stay put */
}
.pp-card:focus-within {
  box-shadow: var(--pp-shadow-md);
  outline: 3px solid var(--pp-primary);
  outline-offset: 2px;
}

/* ===== Breadcrumbs ===== */
.pp-breadcrumbs {
  margin-bottom: var(--pp-space-4);
}
.pp-breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-1);
  font-size: var(--pp-text-sm);
}
.pp-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
  color: var(--pp-text-muted-text);
}
.pp-breadcrumbs__item a {
  color: var(--pp-primary-text);
  text-decoration: none;
}
.pp-breadcrumbs__item a:hover {
  text-decoration: underline;
}
.pp-breadcrumbs__item a:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.pp-breadcrumbs__item + .pp-breadcrumbs__item::before {
  content: "/";
  color: var(--pp-border);
  margin-right: var(--pp-space-1);
}
.pp-breadcrumbs__item--current {
  color: var(--pp-text);
  font-weight: 500;
}

.pp-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--pp-space-1) var(--pp-space-3);
  font-size: var(--pp-text-xs);
  font-weight: 600;
  border-radius: var(--pp-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
}
.pp-badge--primary {
  background: rgba(73, 156, 87, 0.1);
  color: var(--pp-primary-text);
}
.pp-badge--secondary {
  background: rgba(253, 94, 2, 0.1);
  color: #a83d00;
}
/* session-55: base secondary badge hardcodes #a83d00 (dark orange) -> 1.82:1 on
   the translucent-orange-over-dark bg (job/product archive cards). Only the
   coming-soon variant had a dark mirror; add one for the base badge too. */
[data-theme="dark"] .pp-badge--secondary {
  color: #ffad7a;
}
/* Coming-soon training cards inherit opacity:0.85 from .pp-training-card--coming-soon
   in components.css, which fades EVERY .pp-badge--<variant> child below AA Normal.
   card-training.php emits 3 badge variants inside this card: --secondary (type),
   --accent (level), --primary (live_virtual conditional). Each needs a darker text
   color so the post-opacity blend clears 4.5:1 against the also-faded badge bg.
   Phase 2.3 added secondary; Phase 2.4 (2026-05-18) consolidates accent + primary.
   Contrast targets (post-blend, light page #e9e3d5):
     secondary text #8b3a0e -> blends to ~#99532c, contrast ~4.2:1 vs faded sec bg.
     accent    text #4d3a00 -> blends to ~#645320, contrast ~5.7:1 vs faded acc bg.
     primary   text #1f4225 -> blends to ~#3d5a3f, contrast ~5.6:1 vs faded pri bg.
   Dark-mode mirrors lift the text instead; ample headroom on the dark badge bg. */
.pp-training-card--coming-soon .pp-badge--secondary {
  color: #8b3a0e;
}
.pp-training-card--coming-soon .pp-badge--accent {
  color: #4d3a00;
}
.pp-training-card--coming-soon .pp-badge--primary {
  color: #1f4225;
}
[data-theme="dark"] .pp-training-card--coming-soon .pp-badge--secondary {
  color: #ffad7a;
}
[data-theme="dark"] .pp-training-card--coming-soon .pp-badge--accent {
  color: #ffe082;
}
[data-theme="dark"] .pp-training-card--coming-soon .pp-badge--primary {
  color: #86d093;
}
.pp-badge--accent {
  background: rgba(255, 173, 1, 0.1);
  color: var(--pp-accent-text);
}
/* Color-keyed variants (emitted by search.js / lesson-player / curriculum — see assets/js/search.js). */
.pp-badge--green {
  background: rgba(73, 156, 87, 0.1);
  color: var(--pp-primary-text);
}
.pp-badge--blue,
.pp-badge--cyan {
  background: rgba(21, 117, 232, 0.1);
  color: var(--pp-info-text);
}
.pp-badge--purple {
  background: rgba(255, 173, 1, 0.1);
  color: var(--pp-accent-text);
}
.pp-badge--gray {
  background: var(--pp-muted);
  color: var(--pp-text-secondary);
}

/* Search Hero — kit-spec 3-stop gradient + radial spotlight + dot grid.
   Mirrors assets/css/search.css so pages that don't enqueue search.css
   (e.g. the marketing home front-page.php) still get the kit treatment. */
.pp-search-hero {
  padding: var(--pp-space-24) 0;
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 50%
    ),
    linear-gradient(135deg, #499c57 0%, #3a7d46 60%, #2d6337 100%);
  color: var(--pp-on-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pp-search-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.pp-search-hero > * {
  position: relative;
  z-index: 1;
}
.pp-search-hero h1 {
  color: var(--pp-on-primary);
  margin-bottom: var(--pp-space-4);
}
.pp-search-hero p {
  font-size: var(--pp-text-xl);
  margin-bottom: var(--pp-space-8);
}
/* Dark overlay behind text/transparent buttons — brings all gradient stops to ≥4.5:1 with white */
.pp-search-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
/* Primary button in hero needs explicit dark bg — overlay only helps transparent elements */
.pp-search-hero .pp-btn--primary {
  background-color: #2e6338;
}
.pp-search-hero .pp-btn--primary:hover {
  background-color: #245430;
}

.pp-search-bar {
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  background: var(--pp-surface);
  border-radius: var(--pp-radius-full);
  overflow: hidden;
  box-shadow: var(--pp-shadow-xl);
}
.pp-search-bar input {
  flex: 1;
  padding: var(--pp-space-4) var(--pp-space-6);
  border: none;
  font-size: var(--pp-text-lg);
  font-family: var(--pp-font-body);
  color: var(--pp-text);
  outline: none;
}
.pp-search-bar button {
  padding: var(--pp-space-4) var(--pp-space-8);
  background: var(--pp-primary);
  color: var(--pp-on-primary);
  border: none;
  font-family: var(--pp-font-heading);
  font-weight: 600;
  font-size: var(--pp-text-base);
  cursor: pointer;
  transition: background 0.2s;
}
.pp-search-bar button:hover {
  background: var(--pp-primary-dark);
}

/* Grid Layouts */
.pp-grid {
  display: grid;
  gap: var(--pp-space-6);
}
.pp-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.pp-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.pp-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive */
@media (max-width: 1024px) {
  .pp-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pp-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .pp-grid--4,
  .pp-grid--3,
  .pp-grid--2 {
    grid-template-columns: 1fr;
  }
  .pp-search-bar {
    flex-direction: column;
    border-radius: var(--pp-radius-xl);
  }
  .pp-search-bar button {
    border-radius: 0 0 var(--pp-radius-xl) var(--pp-radius-xl);
  }
  h1 {
    font-size: var(--pp-text-4xl);
  }
  h2 {
    font-size: var(--pp-text-3xl);
  }
  .pp-section {
    padding: var(--pp-space-12) 0;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: var(--pp-text-3xl);
  }
  .pp-container {
    padding: 0 var(--pp-space-4);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Disabled Buttons ── */
.pp-btn:disabled,
.pp-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Accessibility Utilities ────────────────── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.pp-account-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/* ── Touch Target Minimums (WCAG 2.5.5 AAA) ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  min-height: 44px;
}

/* ── Button text span (preserves icon during async state) ── */
.pp-btn__text {
  display: inline;
}

/* ── Notification Bell ─────────────────────── */
.pp-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pp-notification-bell__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--pp-space-2);
  color: var(--pp-text);
  position: relative;
  border-radius: var(--pp-radius-sm);
  transition: background 0.15s;
}
.pp-notification-bell__btn:hover {
  background: var(--pp-gray-100);
}
.pp-notification-bell__btn:focus-visible {
  outline: 3px solid var(--pp-primary);
  outline-offset: 2px;
}
.pp-notification-bell__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  background: var(--pp-error-solid, var(--pp-red));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* ── Theme Toggle ── */
.pp-theme-toggle {
  background: none;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-full);
  cursor: pointer;
  padding: var(--pp-space-2);
  color: var(--pp-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pp-theme-toggle:hover {
  background: var(--pp-muted);
}
.pp-theme-toggle:focus-visible {
  outline: 3px solid var(--pp-ring);
  outline-offset: 2px;
}
.pp-theme-toggle__icon--dark {
  display: inline-flex;
}
.pp-theme-toggle__icon--light {
  display: none;
}
[data-theme="dark"] .pp-theme-toggle__icon--dark {
  display: none;
}
[data-theme="dark"] .pp-theme-toggle__icon--light {
  display: inline-flex;
}

/* ── Notification Dropdown ─────────────────── */
.pp-notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  box-shadow: var(--pp-shadow-lg);
  z-index: 1000;
  margin-top: var(--pp-space-2);
}
.pp-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pp-space-3) var(--pp-space-4);
  border-bottom: 1px solid var(--pp-border);
}
.pp-notif-mark-all {
  background: none;
  border: none;
  color: var(--pp-primary-text);
  font-size: var(--pp-text-xs);
  cursor: pointer;
  font-weight: 600;
}
.pp-notif-mark-all:hover {
  text-decoration: underline;
}
.pp-notif-mark-all:focus-visible {
  outline: 3px solid var(--pp-primary);
  outline-offset: 2px;
}
.pp-notif-empty {
  padding: var(--pp-space-6) var(--pp-space-4);
  text-align: center;
  color: var(--pp-text-muted-text);
  font-size: var(--pp-text-sm);
}
.pp-notif-item {
  display: flex;
  gap: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-bottom: 1px solid var(--pp-border);
  text-decoration: none;
  color: var(--pp-text);
  transition: background 0.15s;
}
.pp-notif-item:hover {
  background: var(--pp-gray-50);
}
.pp-notif-item--unread {
  background: rgba(73, 156, 87, 0.04);
}
.pp-notif-item--unread .pp-notif-item__msg {
  font-weight: 600;
}
.pp-notif-item__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}
.pp-notif-item__body {
  flex: 1;
  min-width: 0;
}
.pp-notif-item__msg {
  display: block;
  font-size: var(--pp-text-sm);
  line-height: 1.4;
}
.pp-notif-item__time {
  display: block;
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted-text);
  margin-top: 2px;
}

@media (max-width: 480px) {
  .pp-notification-dropdown {
    width: calc(100vw - 32px);
    right: -8px;
  }
}