/* =========================================================
   Accent layer: Lemon + Sun, host portal (host.vypa.co).
   Loaded LAST on every view, after Bootstrap, the page sheets and the
   view's own <style> block. Matches the marketing site's accent.css.

   Rules this file keeps (from the accent brief):
   - Lemon = "do this / this benefits you". Sun = "notice this".
   - Text on lemon, sun or white is always --ink.
   - The portal defaults to light; body.dark-mode is the dark theme
     (darkmode.js / login.js, localStorage 'theme'). On light surfaces
     lemon and sun are fills behind ink text only (lemon text on white
     is ~1.3:1). On dark surfaces lemon may be text.
   - Semantic colour stays: Accept / Approve / success green, Reject /
     Delete / error red. The host portal's own mint-green brand
     (sidebar, links) is left alone.
   - No new glass. Nothing here adds backdrop-filter.

   On !important: darkmode.css writes most of its page overrides with
   !important, and a few views set colours inline. Where a rule below
   has to beat one of those it says so; everything else wins on
   specificity alone.
   ========================================================= */


/* ---------- 1. Primary buttons -------------------------------------- */
/* Add Screen, Upload, Save, Next / Finish, Save app, Confirm request.
   .btn-primary is the "do this" button on every page. The one exception
   is the dashboard's ad-request table, where .btn-primary is "Accept":
   that is an approve action and stays green. Bootstrap pages read the
   --bs-btn-* variables for hover/active, so those are set too. */
body .btn-primary:not(.js-accept-campaign),
body .request-btn,
body .btn-submit,
body .btn-save,
body .pl-btn-primary,
body .vypa-agr-btn-primary,
body .modal-actions .confirm,
body .pricing-card .btn-premium.yearly,
body .pricing-card .btn-premium[onclick*="'year'"] {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--lemon);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--lemon-hover);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--lemon-hover);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-disabled-color: var(--ink);
  --bs-btn-disabled-bg: var(--lemon);
  --bs-btn-disabled-border-color: var(--ink);
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--ink);
  border-radius: var(--radius-pill);
  /* A 1px ink edge drawn inside the box: lemon on white has no edge of
     its own, and an inset shadow cannot move the layout. */
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* The ripple drawn by ::before (onboarding, premium) was a white wash
   that would bleach the lemon on hover. */
body .btn-primary:not(.js-accept-campaign)::before,
body .pricing-card .btn-premium.yearly::before,
body .pricing-card .btn-premium[onclick*="'year'"]::before {
  display: none;
}

body .btn-primary:not(.js-accept-campaign) i,
body .request-btn i,
body .btn-submit i,
body .btn-save i {
  color: inherit;
}

body .btn-primary:not(.js-accept-campaign):hover:not(:disabled),
body .request-btn:hover:not(:disabled),
body .btn-submit:hover:not(:disabled),
body .btn-save:hover:not(:disabled),
body .pl-btn-primary:hover,
body .vypa-agr-btn-primary:hover,
body .modal-actions .confirm:hover,
body .pricing-card .btn-premium.yearly:hover,
body .pricing-card .btn-premium[onclick*="'year'"]:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: translateY(-1px);
}

body .btn-primary:not(.js-accept-campaign):active,
body .request-btn:active,
body .btn-submit:active,
body .btn-save:active,
body .modal-actions .confirm:active {
  background: var(--lemon-hover);
  color: var(--ink);
  transform: translateY(0);
}

/* Disabled keeps the view's own treatment (opacity or grey) but never
   white-on-lemon. request-btn's grey stays: it reads as "not now". */
body .request-btn:disabled,
body .request-btn:disabled:hover {
  background: #9ca3af;
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

/* On dark the ink edge would read as a black hole; lemon edge instead.
   darkmode.css paints every [class*="btn-primary"] mint green without
   !important, so specificity is enough here. */
body.dark-mode .btn-primary:not(.js-accept-campaign),
body.dark-mode .request-btn:not(:disabled),
body.dark-mode .btn-submit,
body.dark-mode .btn-save,
body.dark-mode .pl-btn-primary,
body.dark-mode .vypa-agr-btn-primary,
body.dark-mode .modal-actions .confirm {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
  box-shadow: none;
}

body.dark-mode .btn-primary:not(.js-accept-campaign):hover:not(:disabled),
body.dark-mode .request-btn:hover:not(:disabled),
body.dark-mode .btn-submit:hover:not(:disabled),
body.dark-mode .btn-save:hover:not(:disabled),
body.dark-mode .pl-btn-primary:hover,
body.dark-mode .vypa-agr-btn-primary:hover,
body.dark-mode .modal-actions .confirm:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  border-color: var(--lemon-hover);
  box-shadow: 0 10px 24px rgb(182 242 58 / .22);
}

/* Focus: blue ring on the light theme (a white ring disappears on
   white), the brief's white ring on dark. */
body .btn-primary:not(.js-accept-campaign):focus-visible,
body .request-btn:focus-visible,
body .btn-submit:focus-visible,
body .btn-save:focus-visible,
body .pl-btn-primary:focus-visible,
body .vypa-agr-btn-primary:focus-visible,
body .modal-actions .confirm:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ink), var(--focus-ring-light);
}

body .btn-secondary:focus-visible,
body .modal-actions button:not(.confirm):focus-visible,
body .btn-premium:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .btn-primary:focus-visible,
body.dark-mode .btn-secondary:focus-visible,
body.dark-mode .request-btn:focus-visible,
body.dark-mode .btn-submit:focus-visible,
body.dark-mode .btn-save:focus-visible,
body.dark-mode .pl-btn-primary:focus-visible,
body.dark-mode .vypa-agr-btn-primary:focus-visible,
body.dark-mode .modal-actions button:focus-visible,
body.dark-mode .btn-premium:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Secondary buttons keep their look; only the corners follow the
   primaries so a pair sits together. Accept / Reject in the dashboard
   table and Approve / Reject on Ad Requests are left entirely alone. */
body .btn-secondary:not(.js-reject-campaign):not(.campaign-actions .btn-secondary) {
  border-radius: var(--radius-pill);
}


/* ---------- 2. Log in / Sign up / reset ----------------------------- */
/* One primary per card: Log In, Sign Up, Send Reset Link, Set New
   Password, and the team portal's Login. The card sits on mint green,
   where lemon + ink reads clearly. */
body .signup-box form button[type="submit"],
body .login-box form button[type="submit"],
body .content form > button.btn[type="submit"] {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--ink);
  border-radius: var(--radius-pill);
  transition: background-color .2s ease, transform .2s ease;
}

body .signup-box form button[type="submit"]:hover:not(:disabled),
body .login-box form button[type="submit"]:hover:not(:disabled),
body .content form > button.btn[type="submit"]:hover:not(:disabled) {
  background: var(--lemon-hover);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
  transform: translateY(-1px);
}

body.dark-mode .signup-box form button[type="submit"],
body.dark-mode .login-box form button[type="submit"],
body.dark-mode .content form > button.btn[type="submit"] {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
}

body.dark-mode .signup-box form button[type="submit"]:hover:not(:disabled),
body.dark-mode .login-box form button[type="submit"]:hover:not(:disabled),
body.dark-mode .content form > button.btn[type="submit"]:hover:not(:disabled) {
  background: var(--lemon-hover);
  color: var(--ink);
  border-color: var(--lemon-hover);
}

body .signup-box form button[type="submit"]:focus-visible,
body .login-box form button[type="submit"]:focus-visible,
body .content form > button.btn[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .signup-box form button[type="submit"]:focus-visible,
body.dark-mode .login-box form button[type="submit"]:focus-visible,
body.dark-mode .content form > button.btn[type="submit"]:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Theme switch in the corner: "on" (dark) is lemon, as on vypa.co. */
.toggle-switch input:checked + .slider {
  background-color: var(--lemon);
}

.toggle-switch input:focus-visible + .slider {
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .toggle-switch input:focus-visible + .slider {
  box-shadow: var(--focus-ring);
}

/* Links on dark: lemon, underline on hover. Light keeps its colours.
   The forgot-password page sets its "Back to login" colour inline
   (#6C3FC5, unreadable on dark), so that one needs !important. */
body.dark-mode .login-note a,
body.dark-mode .login-note a.forgot-link {
  color: var(--lemon) !important;
}

body.dark-mode .login-note a:hover {
  text-decoration: underline;
}

/* "Keep me signed in": the view sets accent-color inline to blue, so
   only !important can turn it lemon. */
.vypa-stay input[type="checkbox"] {
  accent-color: var(--lemon) !important;
}


/* ---------- 3. Sidebar: active item --------------------------------- */
/* A lemon pill with ink label and icon. The existing active rule
   already draws a 1px border, so recolouring it keeps the box the
   same size: nothing moves. Hover on other items keeps the old wash. */
.nav-links a.active,
.nav-links a.active:hover,
body.dark-mode .nav-links a.active,
body.dark-mode .nav-links a.active:hover,
.nav-submenu a.active,
.nav-link.active {
  background: var(--lemon);
  border-color: var(--lemon);
  border-left-color: var(--lemon);
  color: var(--ink);
  border-radius: var(--radius-pill);
}

.nav-links a.active i,
body.dark-mode .nav-links a.active i,
.nav-submenu a.active i,
.nav-link.active i {
  color: var(--ink);
}

/* Every sidebar link takes the pill shape, not only the active one, so
   the hover highlight (and the focus ring) has the same shape as the
   selected page. Hover keeps its own colour; only the corners change,
   so nothing moves. */
.nav-links a,
.nav-submenu a {
  border-radius: var(--radius-pill);
}

/* The sidebar is a mid-tone mint; the brief's 60% white ring is too
   faint on it, so the ring is solid white here. */
.nav-links a:focus-visible,
.nav-submenu a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff;
}


/* ---------- 4. Status chips ----------------------------------------- */
/* Live / Active / Approved / Online / Paid / Confirmed: lemon tint.
   Pending / Awaiting / Review: sun. Rejected / Failed / Offline, and the
   neutral states (Paused, Completed, Expired, Inactive, Processing),
   keep their colours. All chips get the pill radius.
   darkmode.css sets the Ad Requests chips with !important, so the dark
   variants below need it too. */
.status-badge,
.badge.paid, .badge.pending, .badge.failed, .badge.processing,
.earning-badge,
.badge-success, .badge-warning, .badge-info,
.screen-status-overlay {
  border-radius: var(--radius-pill);
}

.status-badge.status-approved,
.status-badge.status-active,
.status-badge.online,
.badge.paid,
.badge-confirmed,
.badge-success,
.screen-status-overlay.online {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
  border-color: transparent;
}

.status-badge.status-pending,
.badge.pending,
.badge-pending {
  background: var(--sun);
  color: var(--ink);
  border-color: transparent;
}

body.dark-mode .status-badge.status-approved,
body.dark-mode .status-badge.status-active,
body.dark-mode .badge-confirmed {
  background: var(--lemon-tint) !important;
  color: var(--lemon-ink) !important;
  border-color: transparent !important;
}

body.dark-mode .status-badge.status-pending,
body.dark-mode .badge-pending {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}

body.dark-mode .status-badge.online,
body.dark-mode .badge.paid,
body.dark-mode .badge-success {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
}

body.dark-mode .badge.pending {
  background: var(--sun);
  color: var(--ink);
}


/* ---------- 5. Tabs, filters, segmented controls -------------------- */
/* Selected = lemon fill + ink. Hover keeps each page's own colour so the
   selected tab stays distinct from the one under the pointer.
   darkmode.css forces the dark tab states with !important. */
.tab-btn.active,
.tab-btn.active:hover,
.filter-btn.active,
.filter-btn.active:hover,
.view-toggle.active {
  background: var(--lemon);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: none;
}

.tab-btn.active .tab-badge {
  background: rgb(11 15 26 / .12);
  color: var(--ink);
}

body.dark-mode .tab-btn.active,
body.dark-mode .tab-btn.active:hover,
body.dark-mode .view-toggle.active {
  background: var(--lemon) !important;
  border-color: var(--lemon) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn.active:hover {
  background: var(--lemon);
  border-color: var(--lemon);
  color: var(--ink);
}

/* Underline tabs (Media library, campaign modal): the underline alone
   can't be lemon on white, so the selected tab takes a lemon fill with
   rounded top corners and keeps an ink underline. */
.gallery-tab.active,
.modal-tab.active {
  background: var(--lemon);
  color: var(--ink);
  border-bottom-color: var(--ink);
  border-radius: 10px 10px 0 0;
}

.gallery-tab.active .count {
  background: rgb(11 15 26 / .12);
  color: var(--ink);
}

body.dark-mode .gallery-tab.active,
body.dark-mode .modal-tab.active {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--lemon) !important;
}

body.dark-mode .gallery-tab.active .count {
  background: rgb(11 15 26 / .15) !important;
  color: var(--ink) !important;
}

.tab-btn:focus-visible,
.filter-btn:focus-visible,
.gallery-tab:focus-visible,
.modal-tab:focus-visible,
.view-toggle:focus-visible,
.sched-day-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .tab-btn:focus-visible,
body.dark-mode .filter-btn:focus-visible,
body.dark-mode .gallery-tab:focus-visible,
body.dark-mode .modal-tab:focus-visible,
body.dark-mode .view-toggle:focus-visible,
body.dark-mode .sched-day-btn:focus-visible {
  box-shadow: var(--focus-ring) !important;
}


/* ---------- 6. Switches and checkboxes ------------------------------ */
/* Auto-Accept (dashboard), automatic monthly payouts: "on" is lemon.
   The white knob keeps its shadow so it still reads on lemon. */
.toggle-switch-modern input:checked + .toggle-slider-modern,
.auto-payout-switch input:checked + .auto-payout-slider,
body.dark-mode .auto-payout-switch input:checked + .auto-payout-slider {
  background: var(--lemon);
  box-shadow: inset 0 0 0 1px rgb(11 15 26 / .25);
}

.toggle-switch-modern input:focus-visible + .toggle-slider-modern,
.auto-payout-switch input:focus-visible + .auto-payout-slider {
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .toggle-switch-modern input:focus-visible + .toggle-slider-modern,
body.dark-mode .auto-payout-switch input:focus-visible + .auto-payout-slider {
  box-shadow: var(--focus-ring);
}

/* Native checkboxes and radios: Chrome/Safari/Firefox pick a dark tick
   automatically on a light accent. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--lemon);
}

/* mobile.css (and signup.css's `form input`) set appearance:none on every
   input to stop iOS styling the text fields. On a checkbox or radio that
   strips the whole control: it still toggles but draws no box or tick,
   so accent-color above has nothing to paint. Bootstrap's .form-check-input
   draws its own and stays out; switch inputs are hidden and unaffected. */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
  -webkit-appearance: auto;
  appearance: auto;
}

/* Bootstrap switches and checks (screens, playlist). Bootstrap draws a
   white tick / knob, which vanishes on lemon, so they are redrawn ink. */
.form-check-input:checked {
  background-color: var(--lemon);
  border-color: var(--lemon-ink);
}

.form-check-input[type="checkbox"]:checked:not([role="switch"]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0F1A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230B0F1A'/%3e%3c/svg%3e");
}

.form-check-input:focus-visible {
  box-shadow: var(--focus-ring-light);
}

/* Media library: the custom tick box on a selected card. */
.media-card.selected .media-checkbox {
  background: var(--lemon);
  border-color: var(--ink);
}

.media-card.selected .media-checkbox i {
  color: var(--ink);
}


/* ---------- 7. Steppers and progress -------------------------------- */
/* Onboarding wizard and the Host Settings copy of it. Active and
   completed steps are lemon; the active one keeps an ink ring so the
   two stay apart. darkmode.css (and the onboarding view's own <style>)
   set these, the dark ones with !important. */
.progress-step.active .step-circle {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgb(182 242 58 / .45);
}

.progress-step.completed .step-circle {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
}

.progress-step.active .step-label {
  color: var(--ink);
}

/* Was #10b981 on near-white (~2.5:1). */
.progress-step.completed .step-label {
  color: var(--lemon-ink);
}

/* Only the segment right after a completed step fills. The old
   "completed ~ line" rule lit every later segment too, so step 1 done
   looked like the whole wizard done. */
.progress-step.completed ~ .progress-line {
  background: #e5e7eb;
}

.progress-step.completed + .progress-line {
  background: var(--lemon);
}

body.dark-mode .progress-step.active .step-circle {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-color: #fff !important;
}

body.dark-mode .progress-step.completed .step-circle {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-color: var(--lemon) !important;
}

body.dark-mode .progress-step.active .step-label,
body.dark-mode .progress-step.completed .step-label {
  color: var(--lemon) !important;
}

body.dark-mode .progress-step.completed ~ .progress-line {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .progress-step.completed + .progress-line {
  background: var(--lemon) !important;
}

/* Upload / recording progress bars. */
.progress-fill,
.recorder-progress-fill {
  background: var(--lemon);
}


/* ---------- 8. Money: the key earnings numbers ---------------------- */
/* One highlighted figure per page: the dashboard's Earnings tile, the
   Payouts page's "Available for Withdrawal", and Earnings' "Confirmed
   Earnings". Light: a lemon card with ink text. Dark: the number itself
   turns lemon on the dark card (darkmode.css uses !important here). */
.stats-section .stat-card:has(a[href*="earnings"]),
.summary-cards > .card:first-child,
.summary-grid > .summary-card:first-child {
  background: var(--lemon);
  border-color: var(--ink);
}

.stats-section .stat-card:has(a[href*="earnings"]) .stat-number {
  background: var(--ink);
  -webkit-background-clip: text;
  background-clip: text;
}

.stats-section .stat-card:has(a[href*="earnings"]) .stat-icon,
.stats-section .stat-card:has(a[href*="earnings"]):hover .stat-icon {
  background: transparent;
  color: var(--ink);
}

.stats-section .stat-card:has(a[href*="earnings"]) .stat-label,
.summary-cards > .card:first-child p,
.summary-grid > .summary-card:first-child h3,
.summary-grid > .summary-card:first-child .summary-sub {
  color: var(--lemon-ink);
}

.summary-cards > .card:first-child h3,
.summary-grid > .summary-card:first-child .value {
  color: var(--ink);
}

body.dark-mode .stats-section .stat-card:has(a[href*="earnings"]),
body.dark-mode .summary-cards > .card:first-child,
body.dark-mode .summary-grid > .summary-card:first-child {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgb(182 242 58 / .45) !important;
}

body.dark-mode .stats-section .stat-card:has(a[href*="earnings"]) .stat-number {
  background: var(--lemon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* darkmode.css paints the 4th tile's icon amber with !important. */
body.dark-mode .stats-section .stat-card:has(a[href*="earnings"]) .stat-icon {
  color: var(--lemon) !important;
  background: transparent !important;
}

body.dark-mode .stats-section .stat-card:has(a[href*="earnings"]) .stat-label {
  color: #8ba897 !important;
}

body.dark-mode .summary-cards > .card:first-child h3,
body.dark-mode .summary-grid > .summary-card:first-child .value {
  color: var(--lemon) !important;
}

body.dark-mode .summary-cards > .card:first-child p {
  color: #a8c5b5 !important;
}

body.dark-mode .summary-grid > .summary-card:first-child h3,
body.dark-mode .summary-grid > .summary-card:first-child .summary-sub {
  color: #a8c5b5 !important;
}

/* Existing contrast bug: "Pending Clearance" was #f59e0b on white
   (~2.1:1). The view sets it with !important, hence this one. Amber 700
   keeps the meaning at ~5:1. Dark keeps the brighter amber. */
.summary-card .pending-value {
  color: #b45309 !important;
}

body.dark-mode .summary-card .pending-value {
  color: #fbbf24 !important;
}


/* ---------- 9. Callouts --------------------------------------------- */
/* "Notice this" banners: sun, ink text, 16px corners. Error banners
   (frozen / failed-review payouts) stay red. The dashboard's offline-
   screens banner keeps its own amber look: it sits right under the sun
   email-verification toast, and two sun callouts in one section is
   one too many. */
.payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review),
body.dark-mode .payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
  border-radius: var(--radius-callout);
}

.payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) i,
.payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) strong,
.payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) p,
body.dark-mode .payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) i,
body.dark-mode .payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) strong,
body.dark-mode .payout-hold-banner:not(.payout-hold-frozen):not(.payout-hold-pending_review) p {
  color: var(--ink);
}

/* Email-verification banner: styled entirely inline, so !important is
   the only way in. Its "Resend" label was #f59e0b on white (~2.1:1). */
#emailVerificationBanner {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: rgb(11 15 26 / .12) !important;
  box-shadow: 0 8px 32px rgb(0 0 0 / .18) !important;
}

#emailVerificationBanner button {
  color: var(--ink) !important;
}


/* ---------- 10. Pricing (Premium page) ------------------------------ */
/* The yearly plan is the recommended one: lemon border, lemon "save"
   badge, lemon CTA. The view writes all of this inline, hence the
   !important. Monthly's CTA becomes the brief's secondary (white fill,
   blue text) so gold and lemon never sit side by side as equals. */
.pricing-card:has(.btn-premium.yearly),
.pricing-card:has(.btn-premium[onclick*="'year'"]) {
  border-color: var(--lemon) !important;
}

.pricing-card:has(.btn-premium.yearly) > div[style*="position: absolute"],
.pricing-card:has(.btn-premium[onclick*="'year'"]) > div[style*="position: absolute"] {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
}

.pricing-card .btn-premium.yearly,
.pricing-card .btn-premium[onclick*="'year'"] {
  box-shadow: none;
}

.pricing-card .btn-premium.monthly,
.pricing-card .btn-premium[onclick*="'month'"] {
  background: #fff;
  color: var(--vypa-blue);
  box-shadow: inset 0 0 0 2px var(--vypa-blue);
}

.pricing-card .btn-premium.monthly::before,
.pricing-card .btn-premium[onclick*="'month'"]::before {
  display: none;
}

.pricing-card .btn-premium.monthly:hover,
.pricing-card .btn-premium[onclick*="'month'"]:hover {
  background: #fff;
  color: var(--vypa-blue-700);
  box-shadow: inset 0 0 0 2px var(--vypa-blue-700);
  transform: translateY(-1px);
}


/* ---------- 11. Tap targets ----------------------------------------- */
/* 44px minimum on phones for the buttons restyled above. Table-row
   buttons (Accept / Reject) are left out so rows keep their height. */
@media (max-width: 768px) {
  body .btn-primary:not(.js-accept-campaign),
  body .request-btn,
  body .btn-submit,
  body .btn-save,
  body .modal-actions .confirm,
  .tab-btn,
  .filter-btn,
  .gallery-tab,
  .view-toggle {
    min-height: 44px;
  }
}


@media (prefers-reduced-motion: reduce) {
  body .btn-primary,
  body .request-btn,
  body .btn-submit,
  body .btn-save,
  body .modal-actions .confirm,
  body .signup-box form button[type="submit"],
  body .login-box form button[type="submit"],
  body .content form > button.btn[type="submit"] {
    transition: none;
  }
  body .btn-primary:hover,
  body .request-btn:hover,
  body .btn-submit:hover,
  body .btn-save:hover,
  body .modal-actions .confirm:hover,
  body .signup-box form button[type="submit"]:hover,
  body .login-box form button[type="submit"]:hover,
  body .content form > button.btn[type="submit"]:hover,
  .pricing-card .btn-premium:hover {
    transform: none;
  }
}


/* ---------- 12. Links ------------------------------------------------ */
/* Blue on light, lemon on dark (rule 10). darkmode.css paints every
   unclassed link #07cb91 — a green left over from the old palette, and
   the last place the portal still looks like a different product. It is
   8.1:1 on the dark card, so this is a brand fix, not a contrast one.
   Lemon lands at 12.9:1.

   Nav, pager, buttons and chips are excluded: they are links by markup
   but controls by behaviour, and sections 1-5 already own them. The
   sidebar links carry no class, so they are excluded by their parent:
   the mint sidebar is the host portal's own, and keeps its colours. */
body.dark-mode :not(.nav-links):not(.nav-submenu) > a:not([class]),
body.dark-mode .action-link,
body.dark-mode .link-text,
body.dark-mode .forgot-link,
body.dark-mode .btn-alert-link,
body.dark-mode .content p a:not([class]),
body.dark-mode .card a:not([class]) {
  color: var(--lemon);
}

body.dark-mode :not(.nav-links):not(.nav-submenu) > a:not([class]):hover,
body.dark-mode .action-link:hover,
body.dark-mode .link-text:hover,
body.dark-mode .btn-alert-link:hover {
  color: var(--lemon);
  text-decoration: underline;
}

/* Light: the brand blue, never lemon — lemon on white is 1.3:1. */
body:not(.dark-mode) .action-link,
body:not(.dark-mode) .link-text,
body:not(.dark-mode) .btn-alert-link {
  color: var(--vypa-blue);
}

body:not(.dark-mode) .action-link:hover,
body:not(.dark-mode) .link-text:hover,
body:not(.dark-mode) .btn-alert-link:hover {
  color: var(--vypa-blue-700);
  text-decoration: underline;
}

.action-link:focus-visible,
.link-text:focus-visible,
.btn-alert-link:focus-visible,
a:not([class]):focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .action-link:focus-visible,
body.dark-mode .link-text:focus-visible,
body.dark-mode .btn-alert-link:focus-visible,
body.dark-mode :not(.nav-links):not(.nav-submenu) > a:not([class]):focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 13. Multi-select pickers --------------------------------- */
/* Rule 7's soft treatment: lemon TINT and lemon ink, not solid lemon.
   These are the controls where several things are chosen at once — the
   custom scheduling days, and the venue-category cards on the campaign
   form. Solid lemon here would put six equal shouts beside the one Save
   the section is actually asking for.

   Single-select tabs and filters keep the solid fill in section 5; the
   difference is the point. */
.sched-day-btn.active,
.option-card.selected {
  background: var(--lemon-tint);
  border-color: var(--lemon);
  color: var(--lemon-ink);
  box-shadow: none;
}

.option-card.selected .option-title,
.option-card.selected i {
  color: var(--lemon-ink);
}

/* On dark the pale tint would glare, so the fill is a lemon wash and the
   text is lemon itself (12.9:1 on the card). */
body.dark-mode .sched-day-btn.active,
body.dark-mode .option-card.selected {
  background: rgb(182 242 58 / .16) !important;
  border-color: var(--lemon) !important;
  color: var(--lemon) !important;
  box-shadow: none !important;
}

body.dark-mode .option-card.selected .option-title,
body.dark-mode .option-card.selected i {
  color: var(--lemon) !important;
}

.option-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .option-card:focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 14. Primary actions the first pass missed ---------------- */
/* Each is the one "do this" in its card or page, written under its own
   class rather than .btn-primary, so section 1 never reached it:
   - Notifications: "Go" in an opened notification. It was white on
     #07cb91 (2.3:1), below AA.
   - Premium: the large-format CTA at the foot of its own section.
   - Subscription: Reactivate. White on #10b981 (2.5:1), below AA.
   - Host settings: "Confirm & Upload" for the logo. It replaces the
     dropzone's Browse button, so the two are never on screen together.
   - Email verified / failed: the page's filled button. The failed page's
     dark "Go to Dashboard" becomes the outline secondary beside it. The
     result modal's "Got it" only dismisses, so it keeps its look. */
.notif-detail-actions .btn-go-primary,
.lfp-cta .lfp-btn,
.btn.btn-reactivate,
.upload-preview .btn-confirm,
.container > .success-icon ~ a.btn:not(.btn--ghost),
.container > .buttons > #resendBtn {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.notif-detail-actions .btn-go-primary i,
.lfp-cta .lfp-btn i,
.btn.btn-reactivate i,
.upload-preview .btn-confirm i,
.container > .success-icon ~ a.btn:not(.btn--ghost) i,
.container > .buttons > #resendBtn i {
  color: inherit;
}

/* The verify pages' shine sweep is a white wash across the fill. */
.container > .success-icon ~ a.btn:not(.btn--ghost)::before,
.container > .buttons > #resendBtn::before {
  display: none;
}

.notif-detail-actions .btn-go-primary:hover,
.lfp-cta .lfp-btn:hover,
.btn.btn-reactivate:hover,
.upload-preview .btn-confirm:hover,
.container > .success-icon ~ a.btn:not(.btn--ghost):hover,
.container > .buttons > #resendBtn:hover:not(:disabled) {
  background: var(--lemon-hover);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: translateY(-1px);
}

body.dark-mode .notif-detail-actions .btn-go-primary,
body.dark-mode .lfp-cta .lfp-btn,
body.dark-mode .btn.btn-reactivate,
body.dark-mode .upload-preview .btn-confirm,
body.dark-mode .container > .success-icon ~ a.btn:not(.btn--ghost),
body.dark-mode .container > .buttons > #resendBtn {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
  box-shadow: none;
}

body.dark-mode .notif-detail-actions .btn-go-primary:hover,
body.dark-mode .lfp-cta .lfp-btn:hover,
body.dark-mode .btn.btn-reactivate:hover,
body.dark-mode .upload-preview .btn-confirm:hover,
body.dark-mode .container > .success-icon ~ a.btn:not(.btn--ghost):hover,
body.dark-mode .container > .buttons > #resendBtn:hover:not(:disabled) {
  background: var(--lemon-hover);
  color: var(--ink);
  box-shadow: 0 10px 24px rgb(182 242 58 / .22);
}

.notif-detail-actions .btn-go-primary:focus-visible,
.lfp-cta .lfp-btn:focus-visible,
.btn.btn-reactivate:focus-visible,
.upload-preview .btn-confirm:focus-visible,
.container > .success-icon ~ a.btn:not(.btn--ghost):focus-visible,
.container > .buttons > #resendBtn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ink), var(--focus-ring-light);
}

body.dark-mode .notif-detail-actions .btn-go-primary:focus-visible,
body.dark-mode .lfp-cta .lfp-btn:focus-visible,
body.dark-mode .btn.btn-reactivate:focus-visible,
body.dark-mode .upload-preview .btn-confirm:focus-visible,
body.dark-mode .container > .success-icon ~ a.btn:not(.btn--ghost):focus-visible,
body.dark-mode .container > .buttons > #resendBtn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* The verify pages keep a white card in dark mode, but darkmode.css
   lightens every heading, so "Email Verified!" was near-white on white. */
body.dark-mode .container > .success-icon ~ h1,
body.dark-mode .container > .error-icon ~ h1 {
  color: #0a0a0a !important;
}

/* Verification failed: the secondary beside Resend. White fill, ink
   text and edge on light; an outline on dark. */
.container > .buttons > .btn-secondary {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.container > .buttons > .btn-secondary::before {
  display: none;
}

.container > .buttons > .btn-secondary:hover {
  background: #fff;
  color: var(--vypa-blue-700);
  box-shadow: inset 0 0 0 1.5px var(--vypa-blue-700);
  transform: translateY(-1px);
}

/* The card stays white in dark mode too, so the button keeps its light
   look there. darkmode.css forces every dark .btn-secondary to a faint
   white-on-glass (invisible on this white card) and hovers it the old
   mint, so this pair needs !important. */
body.dark-mode .container > .buttons > .btn-secondary,
body.dark-mode .container > .buttons > .btn-secondary:hover:not(:disabled) {
  background: #fff !important;
  color: var(--ink) !important;
  border: 0 !important;
}

.container > .buttons > .btn-secondary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ink), var(--focus-ring-light);
}

/* Same white card: the white dark-theme ring would vanish on it, and the
   lemon primaries keep their ink edge. */
body.dark-mode .container > .buttons > .btn-secondary:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--ink), var(--focus-ring-light);
}

body.dark-mode .container > .success-icon ~ a.btn:not(.btn--ghost),
body.dark-mode .container > .buttons > #resendBtn {
  box-shadow: inset 0 0 0 1px var(--ink);
}

body.dark-mode .container > .success-icon ~ a.btn:not(.btn--ghost):focus-visible,
body.dark-mode .container > .buttons > #resendBtn:focus-visible {
  box-shadow: inset 0 0 0 1px var(--ink), var(--focus-ring-light);
}

/* Email verified, on a phone with the app: "Continue in your browser"
   is a transparent .btn, so it inherited .btn's white text onto the white
   card and could not be read in either theme. */
.container > .success-icon ~ a.btn--ghost,
.container > .success-icon ~ a.btn--ghost:hover {
  color: var(--ink);
  border-color: rgb(11 15 26 / .35);
}

.container > .success-icon ~ a.btn--ghost:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

@media (max-width: 768px) {
  .notif-detail-actions .btn-go-primary,
  .lfp-cta .lfp-btn,
  .btn.btn-reactivate,
  .upload-preview .btn-confirm,
  .container > .success-icon ~ a.btn,
  .container > .buttons > .btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notif-detail-actions .btn-go-primary,
  .lfp-cta .lfp-btn,
  .btn.btn-reactivate,
  .upload-preview .btn-confirm,
  .container > .success-icon ~ a.btn,
  .container > .buttons > .btn {
    transition: none;
  }
  .notif-detail-actions .btn-go-primary:hover,
  .lfp-cta .lfp-btn:hover,
  .btn.btn-reactivate:hover,
  .upload-preview .btn-confirm:hover,
  .container > .success-icon ~ a.btn:hover,
  .container > .buttons > .btn:hover {
    transform: none;
  }
}


/* ---------- 15. Status chips the first pass missed ------------------- */
/* Same scheme as section 4, on chips that use their own class names.
   - Proof of play: a proof's review state (approved / awaiting), the
     screen's Online pill, and the per-screen tile badge, where "Done"
     is complete and "Proof due" is waiting on the host. "Record now"
     stays red; "Nothing owed" stays grey.
   - Host settings: a connected payout method.
   The Online pill was white on the mint --green (~2.3:1). */
.timeline-status .status-badge,
.pop-status-badge,
.pt-badge,
.badge-status {
  border-radius: var(--radius-pill);
}

.timeline-status .status-badge.approved,
.pop-status-badge.online,
.pt-badge.done,
.badge-status.connected,
body.dark-mode .timeline-status .status-badge.approved,
body.dark-mode .pop-status-badge.online,
body.dark-mode .pt-badge.done {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
}

.timeline-status .status-badge.pending,
.pt-badge.due,
body.dark-mode .timeline-status .status-badge.pending,
body.dark-mode .pt-badge.due {
  background: var(--sun);
  color: var(--ink);
}

/* Offline keeps its grey, but white on #94a3b8 is 2.6:1; ink is 7.6:1. */
.pop-status-badge.offline {
  color: var(--ink);
}

/* darkmode.css sets the payout-method chip with !important. */
body.dark-mode .badge-status.connected {
  background: var(--lemon-tint) !important;
  color: var(--lemon-ink) !important;
}

/* Subscription status. The view writes the colour inline from a PHP map
   (status -> hex), as a colour on a 13% tint of itself, so the hex in
   the style attribute is the only handle and !important the only way in.
   Active was #10b981 on its tint (~2.3:1): lemon tint. Trialing was
   #3b82f6 (~3.3:1): sun, since a trial is waiting to become a plan.
   Past due and Cancelled keep their meaning, darkened on light to pass
   AA. On dark, past due's amber passes (5.5:1); cancelled's red is 3.6:1,
   so it takes the light red darkmode.css uses for errors. */
.subscription-status-badge {
  border-radius: var(--radius-pill);
}

.subscription-status-badge[style*="#10b981"] {
  background: var(--lemon-tint) !important;
  color: var(--lemon-ink) !important;
}

.subscription-status-badge[style*="#3b82f6"] {
  background: var(--sun) !important;
  color: var(--ink) !important;
}

body:not(.dark-mode) .subscription-status-badge[style*="#f59e0b"] {
  color: #b45309 !important;
}

body:not(.dark-mode) .subscription-status-badge[style*="#ef4444"] {
  color: #b91c1c !important;
}

body:not(.dark-mode) .subscription-status-badge[style*="#6b7280"] {
  color: #4b5563 !important;
}

body.dark-mode .subscription-status-badge[style*="#ef4444"] {
  color: #fca5a5 !important;
}


/* ---------- 16. Dark-mode gaps ---------------------------------------- */
/* Surfaces that had no dark rule at all, so they stayed light-theme white
   on the dark page. darkmode.css sets its neighbours with !important,
   and these carry it too so a later darkmode.css rule can't undo them.
   - Filter buttons (payouts.css): white pills on dark. No view renders
     them today, but payouts.js still wires them, so the rule stays
     ready. The selected one is lemon (section 5).
   - Media library: an upload's progress row was #f8fafc, and its file
     name reads var(--text), which is near-white on dark: invisible. */
body.dark-mode .filter-btn:not(.active) {
  background: rgb(255 255 255 / .07) !important;
  border-color: rgb(255 255 255 / .15) !important;
  color: #c0cfca !important;
}

body.dark-mode .filter-btn:not(.active):hover {
  background: rgb(255 255 255 / .12) !important;
  border-color: rgb(255 255 255 / .3) !important;
  color: #fff !important;
}

body.dark-mode .progress-item {
  background: rgb(255 255 255 / .06) !important;
  border: 1px solid rgb(255 255 255 / .1);
}

/* Ad Requests: the schedule labels are inline brand blue, which is 2.5:1
   on the dark card. The soft blue is the token for blue text on dark. */
body.dark-mode #modal-schedule-label,
body.dark-mode .detail-value > span[style*="--vypa-blue"] {
  color: var(--vypa-blue-soft) !important;
}


/* ---------- 17. Icon spacing on the auth submit buttons -------------- */
/* Team login / team accept: "<i></i> Login" relied on the space between
   the icon and the word, and a flex button drops a whitespace-only gap,
   so the icon touched the text. An explicit gap does not depend on it. */
body .content form > button.btn[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


/* ---------- Sidebar groups (partials/sidebar-nav.view.php) ---------- */
/* Media ▸ Media Library, Apps and Earnings ▸ Overview, Payouts fold into
   native <details> so the sidebar has seven rows instead of nine. The
   header is drawn exactly like a sidebar link; the sub-links ARE sidebar
   links (they sit inside .nav-links), indented. Sub-links keep the 22px
   type the rest of the nav uses — an accessibility requirement — and are
   told apart by indent alone. */
.nav-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.932);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary > i:first-child {
  font-size: 18px;
  width: 20px;
  text-align: center;
}
.nav-group > summary:hover {
  background: rgba(68, 170, 255, 0.2);
  border-color: #fff;
  color: #fff;
}
.nav-group > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff;
}
/* The group holding the current page reads as "you are in here" without
   competing with the lemon pill on the page itself. */
.nav-group > summary.has-active { font-weight: 700; color: #fff; }

.nav-group-arrow {
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.nav-group > summary .sidebar-badge + .nav-group-arrow { margin-left: 8px; }
.nav-group[open] .nav-group-arrow { transform: rotate(180deg); }

.nav-group-items {
  display: flex;
  flex-direction: column;
  margin: 2px 0 4px 26px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

body.dark-mode .nav-group > summary { color: #90a898; }
body.dark-mode .nav-group > summary:hover {
  background: rgba(7, 203, 145, 0.1);
  border-color: transparent;
  color: #34d399;
}
body.dark-mode .nav-group > summary.has-active { color: #cfe9dc; }
body.dark-mode .nav-group-items { border-left-color: rgba(7, 203, 145, 0.25); }

@media (max-width: 1023px) {
  .nav-group > summary { padding: 14px 20px; }
  .nav-group-items { margin-left: 22px; }
}