/* ==============================================================
   Theme color switcher — popover that appears below the
   "Change color contrast" icon in the topbar. Lets the user pick
   between 4 brand-friendly palettes. The actual colour swap is
   done in theme-switcher.js (both via CSS variables and by
   re-writing inline `style` attributes throughout the page).
   ============================================================== */

:root {
   /* These get updated by theme-switcher.js at runtime.
      Default values match NPPA's original green / orange. */
   --ipdms-primary: #006838;
   --ipdms-primary-dark: #00572f;
   --ipdms-primary-light: #3aa66c;
   --ipdms-primary-rgb: 0, 104, 56;
   --ipdms-primary-dark-rgb: 0, 87, 47;
   --ipdms-accent: #f15a29;
}

/* ---------- toggle button visual cue ---------- */
#nppa-color-toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: background 0.18s ease;
   padding: 2px;
}
#nppa-color-toggle:hover,
#nppa-color-toggle.tsw-open {
   background: rgba(0, 0, 0, 0.06);
}

/* ---------- palette popover ---------- */
.tsw-popover {
   position: fixed;
   z-index: 1200;
   background: #ffffff;
   border-radius: 14px;
   box-shadow: 0 18px 48px rgba(2, 35, 71, 0.18),
               0 2px 6px rgba(2, 35, 71, 0.08);
   padding: 14px 16px 16px;
   min-width: 220px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
   font-family: inherit;
}
.tsw-popover.tsw-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.tsw-popover::before {
   content: '';
   position: absolute;
   top: -7px;
   right: 24px;
   width: 14px;
   height: 14px;
   background: #ffffff;
   transform: rotate(45deg);
   box-shadow: -2px -2px 6px rgba(2, 35, 71, 0.06);
}

.tsw-popover-title {
   font-size: 13px;
   font-weight: 600;
   color: #022347;
   margin: 0 0 10px;
   letter-spacing: 0.02em;
}

.tsw-swatches {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}

.tsw-swatch {
   appearance: none;
   border: 2px solid transparent;
   background: transparent;
   padding: 4px;
   border-radius: 12px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   transition: border-color 0.18s ease, transform 0.18s ease;
}
.tsw-swatch:hover { transform: translateY(-2px); }
.tsw-swatch.tsw-active {
   border-color: rgba(2, 35, 71, 0.25);
}

.tsw-swatch-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--swatch);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   position: relative;
}
.tsw-swatch.tsw-active .tsw-swatch-dot::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #ffffff;
   box-shadow: 0 0 0 2px var(--swatch);
}

.tsw-swatch-label {
   font-size: 11px;
   font-weight: 600;
   color: #2b3445;
   letter-spacing: 0.01em;
}

/* ---------- selectors that honour the swap-able primary colour ----
   These live alongside the find-and-replace pass in JS so the
   site reads correctly even when new content is rendered later. */
.dashboard-link { color: var(--ipdms-primary) !important; }
.headingstylestat,
.section-header p { color: var(--ipdms-primary); }

/* small responsive tweak */
@media (max-width: 575px) {
   .tsw-popover { min-width: 200px; padding: 12px; }
   .tsw-swatch-dot { width: 24px; height: 24px; }
}