/* =========================================================
   Accent layer — Lemon + Sun, matching the VYPA mobile app.
   Advertiser portal (advertise.vypa.co). Loaded LAST on every
   view, after the page's own sheets and dark-mode.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 a light theme; dark is `dark-mode` on
     <body> (and on <html> before paint). On light surfaces lemon
     and sun are only ever fills behind ink text. Lemon text is used
     only on dark or blue surfaces (the sidebar, the black stepper
     header, dark mode).
   - One lemon button per modal footer / section. In this portal
     that is the footer of each step of the campaign builder
     (Next / Create Campaign / Submit Campaign), the sign-in and
     sign-up forms, and the page-level "do this" on other pages.
   - Semantic colours stay: approve/success green, error/delete red.
   - No new glass. Nothing here adds backdrop-filter.

   Specificity: several targets are styled by id in campaigns.css
   (#nextStepBtn, #createCampaignBtn) or with !important in
   dark-mode.css and in the campaigns view. Each place that needs
   !important says why.
   ========================================================= */


/* ---------- 1. Primary buttons -------------------------------------- */
/* .btn-primary was a blue gradient in campaigns.css, then black from
   homepage.css (loaded after it), and a solid blue in dark mode. It is
   the one "do this" of each footer and page header, so it goes lemon.
   The 1px border is kept at 1px so nothing grows. */
body .btn-primary,
body #nextStepBtn,
body #createCampaignBtn {
  background: var(--lemon);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* 1a. ...except Open Map Selector, which stays black.

   The rule above repaints every .btn-primary lemon. On the campaign builder's
   first step that turned this button from black - which it had been, via
   homepage.css, exactly as the comment above describes - to lemon, and the
   operator asked for the black back.

   It also reads better here: this button opens a picker, and the real "do this"
   of that flow is the Next in the picker's own footer, which is lemon. Two
   lemon buttons in one journey is two primary actions, which is none.

   An id beats the class above on specificity, so this holds wherever it sits
   in the file. */
body #openMapBtn {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
}

body #openMapBtn:hover {
  background: #1b2233;
  color: var(--white);
  border-color: #1b2233;
}

body .btn-primary:hover,
body #nextStepBtn:hover,
body #createCampaignBtn:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgb(11 15 26 / .12);
}

body .btn-primary:active,
body #nextStepBtn:active,
body #createCampaignBtn:active {
  transform: translateY(0);
}

body .btn-primary:disabled,
body #nextStepBtn:disabled,
body #createCampaignBtn:disabled {
  background: var(--lemon);
  opacity: .5;
  transform: none;
  box-shadow: none;
}

/* On dark, the ink border would read as a black hole; drop it into the fill. */
body.dark-mode .btn-primary,
body.dark-mode #nextStepBtn,
body.dark-mode #createCampaignBtn {
  background: var(--lemon);
  border-color: var(--lemon);
  color: var(--ink);
}

body.dark-mode .btn-primary:hover,
body.dark-mode #nextStepBtn:hover,
body.dark-mode #createCampaignBtn:hover {
  background: var(--lemon-hover);
  border-color: var(--lemon-hover);
  color: var(--ink);
  box-shadow: 0 8px 20px rgb(182 242 58 / .22);
}

/* dark-mode.css colours every <span> #eaff00cc, which would vanish on
   lemon. Labels inside a lemon button follow the button. */
body.dark-mode .btn-primary span,
body.dark-mode .btn-primary i,
body.dark-mode #nextStepBtn span,
body.dark-mode #createCampaignBtn span {
  color: inherit;
}

/* Inside the checkout and the budget modal dark-mode.css resets every
   span/strong to #fff with !important; on lemon that is ~1.3:1. */
body.dark-mode .finalize-modal .btn-primary span,
body.dark-mode .vypa-modal .btn-primary span {
  color: var(--ink) !important;
}

/* Submit spinner: white on lemon is invisible; draw it in ink. */
body #btnNext.is-submitting .btn-spinner {
  border-color: rgb(11 15 26 / .25);
  border-top-color: var(--ink);
}

/* In-body buttons that sit in the same modal as a lemon footer button
   (Open Map Selector, Choose File x2, and the replace-media body
   buttons). One lemon per modal: these take the secondary style,
   white fill with blue text. */
body #openMapBtn,
body #chooseFileLandscapeBtn,
body #chooseFilePortraitBtn,
body #chooseFileBtn,
body #uploadMediaBtn,
body #applyGalleryBtn {
  background: #fff;
  color: var(--vypa-blue);
  border: 1px solid var(--vypa-blue);
}

body #openMapBtn:hover,
body #chooseFileLandscapeBtn:hover,
body #chooseFilePortraitBtn:hover,
body #chooseFileBtn:hover,
body #uploadMediaBtn:hover,
body #applyGalleryBtn:hover {
  background: rgb(var(--vypa-blue-rgb) / .06);
  color: var(--vypa-blue);
  box-shadow: none;
}

body #chooseFileLandscapeBtn .file-btn-spinner,
body #chooseFilePortraitBtn .file-btn-spinner {
  border-color: rgb(var(--vypa-blue-rgb) / .25) !important; /* inline style="" */
  border-top-color: var(--vypa-blue) !important;
}

body.dark-mode #openMapBtn,
body.dark-mode #chooseFileLandscapeBtn,
body.dark-mode #chooseFilePortraitBtn,
body.dark-mode #chooseFileBtn,
body.dark-mode #uploadMediaBtn,
body.dark-mode #applyGalleryBtn {
  background: #1e2338;
  color: var(--vypa-blue-soft);
  border-color: var(--vypa-blue-soft);
}

body.dark-mode #openMapBtn:hover,
body.dark-mode #chooseFileLandscapeBtn:hover,
body.dark-mode #chooseFilePortraitBtn:hover,
body.dark-mode #chooseFileBtn:hover,
body.dark-mode #uploadMediaBtn:hover,
body.dark-mode #applyGalleryBtn:hover {
  background: #232946;
}

body.dark-mode #openMapBtn span,
body.dark-mode #chooseFileLandscapeBtn span,
body.dark-mode #chooseFilePortraitBtn span {
  color: inherit;
}

/* Paystack's redirect button carries Paystack's own gradient inline;
   it is their brand, not ours. Keep its white label. */
body #paystackRedirectBtn {
  color: #fff;
}


/* ---------- 2. The "New Campaign" tile ------------------------------ */
/* The page's key action. The green circle becomes lemon with an ink
   plus; the label was 46% black (~3.3:1) and goes to ink. */
body .new-campaign-circle {
  background: var(--lemon);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 4px 12px rgb(11 15 26 / .18);
}

body .new-campaign-text {
  color: var(--ink);
}

body.dark-mode .new-campaign-circle {
  box-shadow: 0 4px 16px rgb(182 242 58 / .25);
}

body.dark-mode .new-campaign-text {
  color: #fff;
}

.new-campaign-btn:hover .new-campaign-circle {
  background: var(--lemon-hover);
}


/* ---------- 3. Auth pages: Log in / Sign up / reset ----------------- */
body #loginBtn,
body #signupBtn,
body #sendBtn,
body #resetBtn,
body.dark-mode #loginBtn,
body.dark-mode #signupBtn,
body.dark-mode #sendBtn,
body.dark-mode #resetBtn {
  background: var(--lemon);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background-color .2s ease, transform .2s ease;
}

body #loginBtn:hover,
body #signupBtn:hover,
body #sendBtn:hover,
body #resetBtn:hover,
body.dark-mode #loginBtn:hover,
body.dark-mode #signupBtn:hover,
body.dark-mode #sendBtn:hover,
body.dark-mode #resetBtn:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  transform: translateY(-1px);
}

body #loginBtn:disabled,
body #signupBtn:disabled,
body #sendBtn:disabled,
body #resetBtn:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* The auth card sits on brand blue (light) or charcoal (dark), so its
   links are "links on dark": lemon, underlined on hover. The old
   blue/cyan on the blue card was ~2:1. */
body .login-note a,
body .signup-note a,
body.dark-mode .login-note a,
body.dark-mode .signup-note a {
  color: var(--lemon);
}

body .login-note a:hover,
body .signup-note a:hover,
body .login-note a:focus-visible,
body .signup-note a:focus-visible {
  color: var(--lemon);
  text-decoration: underline;
}

/* Theme switch on the auth pages: "on" is lemon. */
body input:checked + .slider {
  background-color: var(--lemon);
}

/* Native checkboxes and radios ("Keep me signed in", ARCON choice).
   The sign-in box sets accent-color inline, hence !important. */
body input[type="checkbox"],
body input[type="radio"],
body .vypa-stay input[type="checkbox"] {
  accent-color: var(--lemon) !important;
}

/* ...and its LABEL, which was near-black on a dark navy panel.

   The sign-in form sits in .login-box - a translucent white glass panel over
   the .login-left navy gradient, so its effective background is about #46537e.
   The label inherits `color: #111` from signup.css, which is linked AFTER
   login.css and so wins: 2.52:1 against that panel, when normal text needs
   4.5:1. It was legible only because the text is short and familiar.

   login.css already paints `.login-box p` white, but the label's text is a
   <span> inside a <label>, not a <p>, so that override never reached it.

   #dbe4f0 measures 5.85:1 there. Deliberately a light grey rather than the
   #f1f5fa near-white used elsewhere on dark: this is secondary text sitting
   directly under white body copy, and matching that white would flatten the
   two into one level. The panel keeps this background at every breakpoint, so
   one value is correct on phone and desktop alike.

   Scoped to .vypa-stay, not to labels generally: every other form label in the
   portal sits on a light card where #111 is right. */
body .vypa-stay,
body .vypa-stay span {
  color: #dbe4f0;
}


/* ---------- 4. Sidebar: active item --------------------------------- */
/* Lemon pill with ink label and icon. The 1px border the old active
   state already drew is kept (recoloured), so nothing shifts. */
body .nav-links a.active,
body .nav-links a.active:hover,
body.dark-mode .sidebar .nav-links a.active,
body.dark-mode .sidebar .nav-links a.active:hover {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
  border-radius: var(--radius-pill);
}

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

/* dark-mode.css turns every <span> #eaff00cc, so on dark every sidebar
   label read near-lemon and the active pill stopped standing out. The
   inactive labels follow their link colour again (white 70%). */
body.dark-mode .sidebar .nav-links a:not(.active) span:not(.notif-nav-badge) {
  color: inherit;
}

/* The unread count keeps its own red chip. */
body .nav-links a.active .notif-nav-badge {
  color: #fff;
}

.nav-links a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ---------- 5. Steppers --------------------------------------------- */
/* 5a. Campaign builder (Details → Categories → Locations → Media).
   The showcase: lemon for the current and completed steps, the
   connector fills lemon behind them. dark-mode.css draws these with
   `.dark-mode .step-item… span { … !important }`, so the dark rules
   below need !important too. */
body .step-item.active span,
body .step-item.completed span {
  background: var(--lemon);
  color: var(--ink) !important;          /* .step-item.completed span sets white !important */
}

/* Current step: an ink ring on light marks "you are here". */
body .step-item.active span {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink);
}

body .step-item.completed::before,
body .step-item.active::before {
  background: var(--lemon);
}

body.dark-mode .step-item.active span,
body.dark-mode .step-item.completed span {
  background: var(--lemon) !important;
  color: var(--ink) !important;
}

body.dark-mode .step-item.active span {
  box-shadow: 0 0 0 4px rgb(182 242 58 / .28);
}

body.dark-mode .step-item.completed::before,
body.dark-mode .step-item.active::before {
  background: var(--lemon) !important;
}

/* dark-mode.css makes every <p> #eaff00cc, so all four labels read
   lemon and the current one did not stand out. Upcoming labels go
   neutral; the current one is lemon. */
body.dark-mode .step-item p {
  color: #cfd8e3;
}

body.dark-mode .step-item.active p {
  color: var(--lemon);
}

/* 5b. Checkout (Review → Terms → Payment → Submit). It sits on a black
   band in both themes, so lemon labels are allowed here. */
body .progress-line-fill {
  background: var(--lemon);
}

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

body .progress-step.active .progress-step-circle {
  box-shadow: 0 0 0 4px rgb(182 242 58 / .3);
}

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

body .progress-step.completed .progress-step-label {
  color: var(--lemon-tint);
}


/* ---------- 6. Selected tabs and choice pills ----------------------- */
/* Active/selected is lemon with ink text. Hover keeps each control's
   existing hover so the selected one stays distinguishable. */
body .filter-tab.active,
body .filter-tab.active:hover,
body .filter-btn.active,
body .filter-btn.active:hover,
body .chart-tab.active,
body .chart-tab.active:hover,
body .view-toggle.active,
body .notif-page-btn.active,
body .freq-option.active,
body .day-btn.active {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--ink);
}

body.dark-mode .filter-tab.active,
body.dark-mode .filter-tab.active:hover,
body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn.active:hover,
body.dark-mode .chart-tab.active,
body.dark-mode .view-toggle.active,
body.dark-mode .notif-page-btn.active,
body.dark-mode .freq-option.active,
body.dark-mode .day-btn.active {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
}

body.dark-mode .filter-tab.active span,
body.dark-mode .freq-option.active span,
body.dark-mode .filter-tab.active .tab-count {
  color: var(--ink);
}

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

/* Date presets (TODAY / 1D / 7D / 1MO). dark-mode.css sets these with
   !important, so the selected state has to answer in kind. */
body .date-presets .date-preset.active {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

body.dark-mode .date-presets .date-preset.active {
  border-color: var(--lemon) !important;
}

/* Map / List switch on the location picker (tablet and phone).
   map-modal-iphone-fixes.css declares every map-tab property with
   !important (light and dark), so the selected state must too. */
body .map-view-tabs .map-tab.active {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

body.dark-mode .map-view-tabs .map-tab.active {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--lemon) !important;
}

body .map-tab.active .map-tab-count,
body.dark-mode .map-tab.active .map-tab-count {
  background: var(--ink);
  color: var(--lemon);
}

/* Underline tabs (gallery, media, approvals) keep their blue underline
   on light — a lemon line on white is ~1.3:1. On dark, the underline
   and label go lemon. */
body.dark-mode .gallery-tab.active {
  color: var(--lemon);
  border-bottom-color: var(--lemon);
}

/* Focus rings for every tab and pill touched above. */
.filter-tab:focus-visible,
.filter-btn:focus-visible,
.chart-tab:focus-visible,
.view-toggle:focus-visible,
.notif-page-btn:focus-visible,
.freq-option:focus-visible,
.day-btn:focus-visible,
.date-preset:focus-visible,
.map-tab:focus-visible,
.gallery-tab:focus-visible,
.btn:focus-visible,
#nextStepBtn:focus-visible,
#createCampaignBtn:focus-visible,
#prevStepBtn:focus-visible,
#cancelBtn:focus-visible,
#loginBtn:focus-visible,
#signupBtn:focus-visible,
#sendBtn:focus-visible,
#resetBtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .filter-tab:focus-visible,
body.dark-mode .filter-btn:focus-visible,
body.dark-mode .chart-tab:focus-visible,
body.dark-mode .view-toggle:focus-visible,
body.dark-mode .notif-page-btn:focus-visible,
body.dark-mode .freq-option:focus-visible,
body.dark-mode .day-btn:focus-visible,
body.dark-mode .date-preset:focus-visible,
body.dark-mode .map-tab:focus-visible,
body.dark-mode .gallery-tab:focus-visible,
body.dark-mode .btn:focus-visible,
body.dark-mode #nextStepBtn:focus-visible,
body.dark-mode #createCampaignBtn:focus-visible,
body.dark-mode #prevStepBtn:focus-visible,
body.dark-mode #cancelBtn:focus-visible,
body.dark-mode #loginBtn:focus-visible,
body.dark-mode #signupBtn:focus-visible,
body.dark-mode #sendBtn:focus-visible,
body.dark-mode #resetBtn:focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 7. Checkboxes and switches ------------------------------ */
/* Custom checkboxes: checked is a lemon box with an ink tick and an
   ink edge (light) so the state still reads at 3:1 against white. */
body .option-card.selected .option-checkbox,
body .location-card.selected .option-checkbox,
body .terms-checkbox-item.checked .terms-checkbox-box,
body .checkbox.checked {
  background: var(--lemon);
  border-color: var(--ink);
}

body .option-card.selected .option-checkbox i,
body .location-card.selected .option-checkbox i,
body .terms-checkbox-item.checked .terms-checkbox-box i {
  color: var(--ink);
}

body .checkbox.checked::after {
  border-color: var(--ink);
}

body.dark-mode .option-card.selected .option-checkbox,
body.dark-mode .location-card.selected .option-checkbox,
body.dark-mode .terms-checkbox-item.checked .terms-checkbox-box,
body.dark-mode .checkbox.checked {
  background: var(--lemon);
  border-color: var(--lemon);
}

body.dark-mode .location-card.selected .option-checkbox i {
  color: var(--ink);
}

/* Toggle switches (auto-renew per campaign, auto-renew all). The track
   already has an ink edge. The "all" switch is forced green/blue with
   !important in campaigns.css and in a <style> the view injects, so
   this needs !important to take the checked state. */
body .toggle-switch.active {
  background: var(--lemon);
}

body .toggle-switch-all.active {
  background: var(--lemon) !important;
}

/* dark-mode.css paints this one #00c853 by id, with !important. */
body.dark-mode #autoRenewAllToggle.active {
  background: var(--lemon) !important;
  border-color: var(--lemon) !important;
  box-shadow: 0 0 0 3px rgb(182 242 58 / .22) !important;
}

body .toggle-switch.active .toggle-slider,
body .toggle-switch-all.active .toggle-slider-all {
  box-shadow: 0 0 0 1px rgb(11 15 26 / .35), 0 2px 4px rgb(0 0 0 / .2);
}


/* ---------- 8. Picking locations on the map ------------------------- */
/* A picked screen is a "do this / yours" state: soft lemon wash, ink
   edge (light) or lemon edge (dark). The wash is lighter than
   --lemon-tint so the card's grey meta text keeps 4.5:1. */
body .location-card.selected {
  background: rgb(182 242 58 / .10);
  border-color: var(--ink);
}

/* #64748b meta text drops to ~4.4:1 on any wash; lift it on the picked card. */
body .location-card.selected .lc-store-name,
body .location-card.selected .lc-lastseen {
  color: #475569;
}

body.dark-mode .location-card.selected .lc-store-name,
body.dark-mode .location-card.selected .lc-lastseen {
  color: #a3b0c8;
}

body.dark-mode .location-card.selected {
  background: rgb(182 242 58 / .07);
  border-color: var(--lemon);
}

/* The "Selected N" counter over the list. */
body #selectedFilterBtn.sidebar-stat {
  background: var(--lemon);
  color: var(--ink);
}

body #selectedFilterBtn .sidebar-stat-number,
body #selectedFilterBtn .sidebar-stat-label {
  color: var(--ink);
  opacity: 1;
}

/* "Online" screen chip: Live/Online is lemon-tint with lemon-ink. */
body .location-card .lc-status.is-online,
body.dark-mode .location-card .lc-status.is-online {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
  border-color: var(--lemon-tint);
}

body .location-card .lc-status.is-online .lc-status-dot {
  background: var(--lemon-ink);
}


/* ---------- 9. Status chips ----------------------------------------- */
/* Live/Active/Approved: lemon-tint + lemon-ink.
   Pending/Submitted/Awaiting: sun + ink.
   Draft: white, blue text, thin blue border.
   Rejected/Terminated/Cancelled/Completed keep their colours.
   All chips are pills. Border widths are left as they were. */
body .status-badge,
body .approval-status-badge {
  border-radius: var(--radius-pill);
}

body .status-badge.status-active,
body .approval-status-badge.approved {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
  border-color: var(--lemon-tint);
}

body .status-badge.status-pending,
body .status-badge.status-submitted,
body .status-badge.status-awaiting_approval,
body .approval-status-badge.pending {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
}

body .status-badge.status-draft {
  background: #fff;
  color: var(--vypa-blue);
  border-color: var(--vypa-blue);
}

/* Reports draws a dot before the label; match it to the chip. */
body .status-badge.status-active::before       { background: var(--lemon-ink); }
body .status-badge.status-submitted::before,
body .status-badge.status-pending::before,
body .status-badge.status-awaiting_approval::before { background: var(--ink); }
body .status-badge.status-draft::before        { background: var(--vypa-blue); }

/* Dark: the same fills read fine on the dark table. dark-mode.css
   paints draft and submitted with !important, hence !important here. */
body.dark-mode .status-badge.status-active,
body.dark-mode .approval-status-badge.approved {
  background: var(--lemon-tint) !important;
  color: var(--lemon-ink) !important;
  border-color: var(--lemon-tint) !important;
  opacity: 1;
}

body.dark-mode .status-badge.status-pending,
body.dark-mode .status-badge.status-submitted,
body.dark-mode .status-badge.status-awaiting_approval,
body.dark-mode .approval-status-badge.pending {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: var(--sun) !important;
  opacity: 1;
}

body.dark-mode .status-badge.status-draft {
  background: #fff !important;
  color: var(--vypa-blue) !important;
  border-color: var(--vypa-blue) !important;
  opacity: 1;
}

/* Dark mode drew "NOT APPROVED" amber — the pending colour. Rejected
   is an error state and goes back to red, like terminated. */
body.dark-mode .status-badge.status-rejected {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  border-color: rgba(239, 68, 68, .3);
}


/* ---------- 10. Notices: sun callouts ------------------------------- */
/* "Notice this" panels: sun fill, ink text, 16px radius. Error banners
   stay red; the blue advisory variant of the agreement banner stays
   blue (nothing is blocked there). */

/* Outstanding Advertiser Agreement (blocking). */
body .agreement-gate-banner:not(.is-advisory),
body.dark-mode .agreement-gate-banner:not(.is-advisory) {
  background: var(--sun);
  border-color: var(--sun);
  border-left-color: var(--ink);
  border-radius: var(--radius-callout);
}

body .agreement-gate-banner:not(.is-advisory) .agb-icon,
body.dark-mode .agreement-gate-banner:not(.is-advisory) .agb-icon {
  background: rgb(255 255 255 / .55);
  color: var(--ink);
}

body .agreement-gate-banner:not(.is-advisory) .agb-title,
body .agreement-gate-banner:not(.is-advisory) .agb-text,
body.dark-mode .agreement-gate-banner:not(.is-advisory) .agb-title,
body.dark-mode .agreement-gate-banner:not(.is-advisory) .agb-text {
  color: var(--ink);
}

/* Its action is an ink pill: lemon beside sun would be two equals. */
body .agreement-gate-banner:not(.is-advisory) .agb-action,
body.dark-mode .agreement-gate-banner:not(.is-advisory) .agb-action {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
}

body .agreement-gate-banner:not(.is-advisory) .agb-action:hover,
body.dark-mode .agreement-gate-banner:not(.is-advisory) .agb-action:hover {
  background: #000;
}

.agreement-gate-banner .agb-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

/* "Important:" before submitting a campaign. */
body .submit-warning,
body.dark-mode .submit-warning {
  background: var(--sun);
  border-color: var(--sun);
  border-radius: var(--radius-callout);
}

body .submit-warning i,
body .submit-warning-text,
body .submit-warning-text strong,
body.dark-mode .submit-warning i,
body.dark-mode .submit-warning-text,
body.dark-mode .submit-warning-text strong {
  color: var(--ink);
}

/* dark-mode.css forces spans/strong inside the checkout to #fff !important. */
body.dark-mode .finalize-modal .submit-warning strong,
body.dark-mode .finalize-modal .submit-warning span {
  color: var(--ink) !important;
}

/* Pending-review banner in the campaign details panel (the neutral
   variant; .approved stays green and .rejected stays red). */
body .status-banner:not(.approved):not(.rejected),
body.dark-mode .status-banner:not(.approved):not(.rejected) {
  background: var(--sun);
  border-color: var(--sun);
  border-radius: var(--radius-callout);
}

body .status-banner:not(.approved):not(.rejected) .status-banner-icon,
body .status-banner:not(.approved):not(.rejected) .status-banner-title,
body .status-banner:not(.approved):not(.rejected) .status-banner-text,
body.dark-mode .status-banner:not(.approved):not(.rejected) .status-banner-title,
body.dark-mode .status-banner:not(.approved):not(.rejected) .status-banner-text {
  color: var(--ink);
}


/* ---------- 11. Tap targets ----------------------------------------- */
@media (max-width: 768px) {
  body .btn-primary,
  body #nextStepBtn,
  body #createCampaignBtn,
  body #loginBtn,
  body #signupBtn,
  body #sendBtn,
  body #resetBtn,
  body .filter-tab,
  body .freq-option,
  body .date-preset,
  body .map-tab,
  body .chart-tab,
  body .filter-btn {
    min-height: 44px;
  }

  body .day-btn {
    width: 44px;
    height: 44px;
  }
}


/* ---------- 12. Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .btn-primary,
  body #nextStepBtn,
  body #createCampaignBtn,
  body #loginBtn,
  body #signupBtn,
  body #sendBtn,
  body #resetBtn {
    transition: none;
  }

  body .btn-primary:hover,
  body #nextStepBtn:hover,
  body #createCampaignBtn:hover,
  body #loginBtn:hover,
  body #signupBtn:hover,
  body #sendBtn:hover,
  body #resetBtn:hover {
    transform: none;
  }
}

/* ---------- 13. Links in running text ------------------------------- */
/* Rule 10: blue on light, lemon on dark, underlined on hover.

   Scoped, deliberately. A blanket `a { color }` would repaint every anchor
   in the portal, and a great many of them are not links at all - the sidebar
   items, the action links on a campaign row, the tabs, the buttons built as
   <a>. Those already carry their own colour and their own states.

   The scope is therefore prose containers, and within them only anchors that
   carry NO class of their own: a styled control always has a class, a
   sentence's link does not. Checked against the three text pages - privacy,
   the advertiser agreement and the help centre - where 21 of 22 anchors are
   unclassed prose links. */
.wrap a:not([class]),
.main-content a:not([class]),
.agr-section a:not([class]),
.help-section a:not([class]) {
  color: var(--vypa-blue);
  text-decoration: none;
}

.wrap a:not([class]):hover,
.main-content a:not([class]):hover,
.agr-section a:not([class]):hover,
.help-section a:not([class]):hover { text-decoration: underline; }

/* On dark, brand blue drops to about 2.3:1 on the charcoal ground. Lemon is
   the token that reads there, and rule 2 allows lemon AS TEXT on dark. */
body.dark-mode .wrap a:not([class]),
body.dark-mode .main-content a:not([class]),
body.dark-mode .agr-section a:not([class]),
body.dark-mode .help-section a:not([class]) { color: var(--lemon); }

.wrap a:not([class]):focus-visible,
.main-content a:not([class]):focus-visible,
.agr-section a:not([class]):focus-visible,
.help-section a:not([class]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
  border-radius: 3px;
}

body.dark-mode .wrap a:not([class]):focus-visible,
body.dark-mode .main-content a:not([class]):focus-visible,
body.dark-mode .agr-section a:not([class]):focus-visible,
body.dark-mode .help-section a:not([class]):focus-visible { box-shadow: var(--focus-ring); }

/* ---------- 14. The searchable picker ------------------------------- */
/* vypa-fields.css draws the control; the ACCENT decisions live here, with the
   others, and win because this sheet is linked last.

   The category picker is single-select, so rule 7 makes the chosen row lemon
   with ink text - never white on lemon (rule 1). The chevron is an affordance
   rather than an action, so it takes brand blue, and --vypa-blue-soft on dark
   where #0042FF would sit at about 2.3:1. */
.vp-option[aria-selected="true"] {
  background: var(--lemon);
  color: var(--ink);
}

body.dark-mode .vp-option[aria-selected="true"] {
  background: var(--lemon);
  color: var(--ink);
}

.vp-chevron { color: var(--vypa-blue); }
body.dark-mode .vp-chevron { color: var(--vypa-blue-soft); }

.vp-button:focus-visible { box-shadow: var(--focus-ring-light); }
body.dark-mode .vp-button:focus-visible { box-shadow: var(--focus-ring); }

/* dark-mode.css paints EVERY <span> #eaff00cc (see its rule at line 324), and
   .vp-value is a span - so the chosen category rendered yellow-green on the
   dark card rather than in the card's own ink. Caught in the dark specimen.
   Same hazard the sidebar and the stepper labels hit further up this file. */
body.dark-mode .vp-button .vp-value { color: #e8ecf8; }
body.dark-mode .vp-button[data-placeholder="true"] .vp-value { color: #7c86a5; }

/* ---------- 15. Addendum fixes -------------------------------------- */

/* 15a. Ordinary body text on dark was almost lemon.

   dark-mode.css line 324 paints EVERY p, span and label #eaff00cc, so a whole
   page of prose read as washed-out lemon and the accent stopped meaning
   anything: if everything is lemon, nothing is. Lemon is for links, key
   numbers and active states, and those are set explicitly elsewhere in this
   file at higher specificity, so they are unaffected by the reset below.

   Same selector shape as the rule it corrects, and this sheet is linked last,
   so it wins on order without needing !important. #f1f5fa is the near-white
   dark-mode.css already uses for its own headings. */
body.dark-mode p,
body.dark-mode span,
body.dark-mode label { color: #f1f5fa; }

/* Text sitting ON lemon or sun must stay ink whatever the theme (rule 1).
   Restated here because the reset above would otherwise turn a <span> inside
   a lemon button near-white, which is the one thing lemon must never carry. */
body.dark-mode .btn-primary span,
body.dark-mode .btn-primary label,
body.dark-mode .status-badge.status-active span,
body.dark-mode .vp-option[aria-selected="true"] span { color: var(--ink); }

/* 15c. The auth heading.

   .login-box / .signup-box is glass over brand blue, so the effective ground
   runs #4575FF to #2159F4 across the gradient. #00115a on the darker end is
   3.09:1 — it scrapes the large-text bar and looks like ink smudged on blue.
   White is 4.01:1 at the pale end and 5.53:1 at the dark end, and it is what
   the brand puts on blue everywhere else. */
.login-box h2,
.signup-box h2 { color: #FFFFFF; }

/* 15d. ATTENTION, and the reports 'paused' chip.

   --yellow was #f59e0b, which is 2.15:1 on white and 1.99:1 on its own pale
   tint — unreadable in both places it is used as TEXT: the ATTENTION label on
   a campaign row, and .status-paused in reports.css. Overridden here rather
   than edited in four page stylesheets: campaigns.css, gallery.css (twice) and
   reports.css each declare it on :root, and this sheet is linked last.

   #B45309 is the same hue two steps darker: 5.02:1 on white, 4.65:1 on the
   tint. The decorative uses (a border, an icon on pale amber) only improve. */
:root { --yellow: #B45309; }

/* Dark mode needs the opposite move. #B45309 is 3.74:1 on the dark card —
   darkening it further from a near-black ground is backwards, so the original
   #f59e0b comes back here at 9.3:1. Declared on body, which every consumer of
   the token inherits from. */
body.dark-mode { --yellow: #f59e0b; }

/* The three reports chips are bare class names (.status-paused, not
   .status-badge.status-paused), so unlike the campaign badges they have no
   dark rule of their own and were being flattened — to lemon by dark-mode.css
   before, to near-white by 15a now. Rule 7 says the mapping survives the
   theme, so it is restated with the dark palette dark-mode.css already uses
   for the badge set: green #34d399, amber #fbbf24, muted #94a3b8. */
body.dark-mode .status-active    { color: #34d399; }
body.dark-mode .status-paused    { color: #fbbf24; }
body.dark-mode .status-completed { color: #94a3b8; }

/* 15e. Dark mode leftovers.

   campaigns.css gives the last table row background #edf2f7 and nothing ever
   undoes it, so on dark the table ended in a bar of light grey. !important
   because dark-mode.css sets row backgrounds the same way — the comment at the
   top of this file explains the house rule for beating it. */
body.dark-mode tbody tr:last-child { background-color: transparent !important; }

/* The CLEAR button is destructive and carries its red inline. dark-mode.css
   repaints every .date-preset with !important, which swallowed that red and
   left CLEAR looking like the other presets. Rule 5: destructive stays red.

   The red itself changes too, in BOTH themes. White on #ef4444 is 3.76:1 and
   the label is 13px, so it never met the 4.5:1 bar — in light mode either,
   where the inline red was winning quietly all along. #dc2626 is 4.83:1 and
   is still plainly the destructive red. Rule 14 over rule 5, as the brief
   asks. !important on both because it is an inline style being corrected. */
.date-preset#clearDatesBtn,
body.dark-mode .date-preset#clearDatesBtn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.date-preset#clearDatesBtn:hover,
body.dark-mode .date-preset#clearDatesBtn:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* 15f. Total Amount is a key number (rule 8), so it is lemon on dark.

   .payment-total-value paints itself with a blue gradient clipped to the text,
   so the colour lives in background-image and -webkit-text-fill-color, not in
   `color`. Both are replaced, or the gradient would keep showing through. */
body.dark-mode .payment-total-value {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--lemon) !important;
  color: var(--lemon) !important;
}